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.

Slides:



Advertisements
Similar presentations
Introduction to Web Design Lecture number:. Todays Aim: Introduction to Web-designing and how its done. Modelling websites in HTML.
Advertisements

3.02D HTML Overview 3.02 Develop webpages.
Math Introduction to HTML Gavin Shaddick
Basic HTML Workshop LIS Web Team Spring 2007.
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.
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
WeB application development
Website Design.
MMDE5011 – INTERACTIVE MEDIA PRACTICE 1 WEEK 1: INTRODUCTION TO HTML5
In this lecture, you will learn: ❑ How to link between pages of your site ❑ How to link to other sites ❑ How to structure the folders on your web site.
HTML Introduction (cont.) 10/01/ Lecture 8, MAT 279, Fall 2009.
LIST- HYPERLINK- IMAGES
Introduction to Web Site Development Steven Emory Department of Computer Science California State University, Los Angeles Lecture 3: Hyperlinks and Images.
Computer Science 1611 Internet & Web Creating Webpages Hypertext and the HTML Markup Language.
CM143 - Web Week 2 Basic HTML. Links and Image Tags.
MA10126 Introduction to HTML Gavin Shaddick
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 =
Computer Science 103 Chapter 2 HyperText Markup Language (HTML)
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 Links and Anchors.
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.
.  Entertain  Inform  Educate  Blogs  Sell  Date  Gamble  Religion.
Programming in HTML.  Programming Language  Used to design/create web pages  Hyper Text Markup Language  Markup Language  Series of Markup tags 
1 Essential HTML coding By Fadi Safieddine (Week 2)
Agenda Links External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks Images Image Attributes: src, alt, width, height, align, border.
Hyperlinks. Linking pages…Hyperlinks 2 Lecture 8  Hyperlink “A clickable HTML element that will direct the web browser to display a different Web page.
HTML Overview Part 4 – Tables 1. HTML Tables  Tables are defined with the tag pair.  A table is divided into rows with tag pairs. o tr stands for "table.
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.
Linking web pages Wah Yan College (Hong Kong) Mr. Li C.P.
What is Markup and Markup Languages? What is HTML? A Basic HTML Document Basic HTML Tags Tag Attributes and Text Formatting Tags Insert Hyperlinks Add.
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.
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.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Adding Graphical Elements Essentials for.
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”
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.
HTML (Hyper Text Markup Language) Lecture II. Review Writing HTML files for web pages – efficient compact – fundamental. Text files with htm extension.
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.
1 Mapping Coordinates Find the x- and y- coordinates for the images, relative to the x-axis and y-axis In a coordinate pair, the first number is the x-coordinate.
1 Creating the Home Page. 2 Creating a Table Table attributes  Two rows and two columns  No border  Left-aligned Change the vertical alignment of the.
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.
Lecture 8 Introduction to Web Programming. Announcement  First In-class exam will be on Oct. 10 (Wednesday)  2.50pm – 4.05pm  Exam will cover all materials.
Lecture 6, MAT 279, Fall HTML Introduction (cont.) 9/17/2009.
Chapter 6 Frames and Image Maps Frame sets and frames Image Maps.
TNPW1 Ing. Jiří Štěpánek.  Tags  Marks for elements ▪ Pair ▪ Start and end tag ( Paragraph text ) ▪ Single ▪ Only start tag, according to XHTML 1.0.
HTML Basics (Part-3).
HTML Basics.
Images in HTML PowerPoint How images are used in HTML
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
3.00cs HTML Overview 3.00cs Develop webpages.
Hosted by Coach Slanina
Chapter 3 Images.
WEBSITE DESIGN Chp 1
Graphics (Characteristics 1)
Basic HTML and Embed Codes
HTML Introduction Lecture 8.
HTML Images.
Internet Technologies I - Lect.01 - Waleed Ibrahim Osman
Pertemuan 1b
Pertemuan 1 Desain web Pertemuan 1
Images in HTML PowerPoint How images are used in HTML
Presentation transcript:

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 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.

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 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 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.

Image Tags TagDescription <img> Defines an image <map> Defines an image map <area> Defines an area inside an image map

Inserting an Image <html><body><p> An image: <img src="constr4.gif" width="144" height="50"> </p><p> A moving image: <img src="hackanm.gif" width="48" height="48"> </p><p> Note that the syntax of inserting a moving image is no different from that of a non-moving image. </p></body></html>

Inserting Images from different locations <html><body><p> An image from another folder: <img src="/images/netscape.gif" width="33" height="32"> </p><p> An image from Disney: <img src=" width="73“ height="68"></p></body></html>

Background Image <html> Look: A background image! Look: A background image! Both gif and jpg files can be used as HTML Both gif and jpg files can be used as HTMLbackgrounds.</p> If the image is smaller than the page, the If the image is smaller than the page, the image will repeat itself. image will repeat itself. </body></html>

Adjust images to different sizes <html><body><p> <img src="/images/hackanm.gif" width="20" height="20"> </p><p> <img src="/images/hackanm.gif" width="45" height="45"> </p><p> <img src="/images/hackanm.gif" width="70" height="70"> </p><p> You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the img tag. </p></body></html>

Make a hyperlink of an image <html><body><p> You can also use an image as a link: <img border="0" src="buttonnext.gif" width="65“ height="38"></a></p></body></html>

Create an image map <html><body><p> Click on one of the planets to watch it closer: </p> <img src="/images/planets.gif" width="145" height="126" usemap="#planetmap"> <area shape="rect" coords="0,0,82,126"alt="Sun"href="sun.htm"> <area shape="circle" coords="90,58,3"alt="Mercury"href="mercur.htm"> coords="124,58,8"alt="Venus"href="venus.htm"></map><p> Note: We use both an id and a name attribute in the map tag Note: We use both an id and a name attribute in the map tag because some versions of Netscape don't understand the id attribute. because some versions of Netscape don't understand the id attribute. </body></html>

Turn an image into an image map <html><body><p> Move the mouse over the image, and look at the status bar to see how the coordinates change. </p><p> <img src="/images/planets.gif" ismap width="146" height="126"> </a></p></body></html>