HTML Images Dr. Baker Abdalahq. The Image Tag and the Src Attribute In HTML, images are defined with the tag. In HTML, images are defined with the tag.

Slides:



Advertisements
Similar presentations
Learning HTML. > Title of page This is my first homepage. Tells Browser This is an HTML page Basic Tags Tells Browser End of HTML page Header information.
Advertisements

What happens when you create an HTML document and include pictures.
HTML Images. The Image Tag and the Src Attribute  In HTML, images are defined with the tag.  In HTML, images are defined with the tag.  The tag is.
Images, Tables, lists, blocks, layout, forms, iframes
HTML Introduction (cont.) 10/01/ Lecture 8, MAT 279, Fall 2009.
LIST- HYPERLINK- IMAGES
HTML Introduction. What we have learned so far:  2.1 Basic HTML page development  2.2 Tags… (example?)  2.3 Lists… (example?)  2.4 Single Tag… (example?)
Computer Science 1611 Internet & Web Creating Webpages Hypertext and the HTML Markup Language.
1 IMAGES: A Picture Is Worth a Thousands Words, Image Formats Image Sizes Graphic Tips Image Tag Attributes Centering Images.
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
MA10126 Introduction to HTML Gavin Shaddick
Including images in Web pages Skills: use the tag IT concepts: none This work is licensed under a Creative Commons Attribution-Noncommercial- Share Alike.
Basic HTML Workshop LIS Web Team Fall What is HTML? Stands for Hyper Text Markup Language Computer language used to create web pages HTML file =
HTML Elements. HTML documents are defined by HTML elements.
Colour & Image in HTML Wah Yan College (Hong Kong) Mr. Li C.P.
HTML Tags. Objectives Know the commonly used HTML tags Create a simple webpage using the HTML tags that will be discussed.
HTML. What is HTML?  HTML is a language for creating web pages.  HTML stands for Hyper Text Markup Language  A markup language has tags which are codes.
HTML HTML stands for "Hyper Text Mark-up Language“. Technically, HTML is not a programming language, but rather a markup language. Used to create web pages.
Agenda Links External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks Images Image Attributes: src, alt, width, height, align, border.
Images Inserting an image on a web page. chcslonline.org2 ITEMS REQUIRED Go to the course download page on the course website and download the 3 images.
Images (1) Three most popular formats – Graphics Interchange Format (GIF) – Joint Photographic Experts Group (JPEG) – Portable Network Graphics (PNG) –
Images in HTML PowerPoint How images are used in HTML.
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
DHTML AND JAVASCRIPT Genetic Computer School LESSON 2 HTML TAGS G H E F.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
Linking web pages Wah Yan College (Hong Kong) Mr. Li C.P.
Computing Theory: HTML Year 11. Lesson Objective You will: o Be able to define what HTML is - ALL o Be able to write HTML code to create your own web.
Last week you should have had something that looked like this.
Unit 2, cont. September 12 More HTML. Attributes Some tags are modifiable with attributes This changes the way a tag behaves Modifying a tag requires.
Chapter 4 BIE1313/BPROG1203 | Web design Prepared by Mohamed Abdulkarim / Mike Ng Ah Ngan.
CSC 330 E-Commerce Teacher Ahmed Mumtaz Mustehsan Ahmed Mumtaz Mustehsan GM-IT CIIT Islamabad GM-IT CIIT Islamabad CIIT Virtual Campus, CIIT COMSATS Institute.
XHTML1 Images N100 Building a Simple Web Page. XHTML2 The Element The src attribute specifies the filename of an image file To include the src attribute.
Week 1 – Beginners Content McAfee & Big Fish Games CoderDojo.
Introduction to HTML Xiangming Mu 9/23/ Learning Objectives Understand basic HTML tags and their attributes Learn to create a simple HTML page.
HTML Lesson 3 Hyper Text Markup Language. Assignment Part 2  Set the file name as “FirstName2.htm”  Set the title as “FirstName LastName First Web Site”
Graduate School of Library and Information Science LIS 753 Introduction to HTML 5 By: Yijun Gao Week Three.
HTML Tags Lesson 2. What are HTML Tags?  Markup tags  Coded instructions that accompany the plain text of an HTML document  Syntax –Left wicket< –Tag.
HTML Basic. What is HTML HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is not a programming language, it.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
HTML JAVASCRIPT. CONTENTS Javascript Example NOSCRIPT Tag Advantages Summary Exercise.
Adding Images to Your Web Page Web Design Section 5-7 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development.
HTML IMAGES. CONTENTS IMG Tag Alt Attribute Setting Width and Height Of An Image Summary Exercise.
Basic Webpage Design Mark-up html document with images.
Are You Smarter Than a 5 th Grader? 1,000,000 5th Grade HTML 5th Grade Syntax 4th Grade HTML 4th Grade Syntax 3rd Grade HTML 3rd Grade Syntax 2nd Grade.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
HTML Links HTML uses a hyperlink to another document on the Web.
HTML CS 105. Page Structure HTML elements control the details of how a page gets displayed. Every HTML document has the following basic structure: … …
1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page.
Assistant Professor,UCER Naini,Allahabad
Slide 1 Graphics (Characteristics 1) Images have various characteristics that affect performance Size (number of pixels) – Large images can be several.
REEM ALMOTIRI Information Technology Department Majmaah University.
Links and Images. Links HTML uses a hyperlink to link to another document on the Web A hyperlink can be either text or a picture Links are created with.
HTML Basic Structure. Page Title My First Heading My first paragraph.
Chapter 1: Intro to HTML Section 1: HTML Structure Presentation Section 2: Layout of an HTML File Section 3: Working with Lists & Tables Section 4: HTML.
Lecture 6, MAT 279, Fall HTML Introduction (cont.) 9/17/2009.
HTML Basics (Part-3).
HTML basics
Images in HTML PowerPoint How images are used in HTML
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Adding Images to Your Web Page
HTML Images CS 1150 Spring 2017.
Graphics (Characteristics 1)
Basic HTML and Embed Codes
HTML Images.
Internet Technologies I - Lect.01 - Waleed Ibrahim Osman
HTML Images CS 1150 Fall 2016.
Pertemuan 1b
Pertemuan 1 Desain web Pertemuan 1
Images in HTML PowerPoint How images are used in HTML
Presentation transcript:

HTML Images Dr. Baker Abdalahq

The Image Tag and the Src Attribute In HTML, images are defined with the tag. In HTML, images are defined with the tag. The tag is empty, which means that it contains attributes only and it has no closing tag. The tag is empty, which means that it contains attributes only and it has no closing tag. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page. To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display on your page.

The syntax of defining an image: The syntax of defining an image: The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on " has the URL: The URL points to the location where the image is stored. An image named "boat.gif" located in the directory "images" on " has the URL: The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph. The browser puts the image where the image tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

The Alt Attribute The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text: The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:

The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers. The "alt" attribute tells the reader what he or she is missing on a page if the browser can't load images. The browser will then display the alternate text instead of the image. It is a good practice to include the "alt" attribute for each image on a page, to improve the display and usefulness of your document for people who have text-only browsers.

Basic Notes - Useful Tips If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully. If an HTML file contains ten images - eleven files are required to display the page right. Loading images take time, so my best advice is: Use images carefully.