HTML IMAGES. CONTENTS IMG Tag Alt Attribute Setting Width and Height Of An Image Summary Exercise.

Slides:



Advertisements
Similar presentations
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Advertisements

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.
MMDE5011 – INTERACTIVE MEDIA PRACTICE 1 WEEK 1: INTRODUCTION TO HTML5
Images, Tables, lists, blocks, layout, forms, iframes
LIST- HYPERLINK- IMAGES
 2008 Pearson Education, Inc. All rights reserved. 1 Introduction to HTML.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: Frames © 2007 Prosoft Learning Corporation All rights reserved ITD 110 Web Page Design.
Copyright © 2004 ProsoftTraining, All Rights Reserved. Lesson 9: HTML Frames.
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.
XP 1 Tutorial 5 Using Frames in a Web Site. XP 2 Tutorial Objectives  Describe the uses of frames in a Web site  Lay out frames within a browser window.
.  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)
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.
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.
Web Design (7) Images (1). Images and the Image Element Images can be placed in the flow of text..jpg,.png and.gif image files work in web pages The img.
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”
Graduate School of Library and Information Science LIS 753 Introduction to HTML 5 By: Yijun Gao Week Three.
Adding Images. XHTML Element ElementAttributeAttribute Value Closing tag AttributeAttribute Value The src attribute supplies the name and location of.
Internet Applications Development Lecture 4 L. Obead Alhadreti.
Web Design (8) Images (2). My Holiday Photos An exercise in adding and linking images. Create a new website folder calling it ‘My Holiday Photos’. In.
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 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.
Basic Webpage Design Mark-up html document with images.
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: … …
HTML Frames. Advantages to Using Frames n flexibility in design n information in different Web pages n remove redundancy. n site easier to manage. n update.
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.
HTML5 and CSS3 Illustrated Unit F: Inserting and Working with Images.
Lecture 6, MAT 279, Fall HTML Introduction (cont.) 9/17/2009.
HTML Basics (Part-3).
HTML basics
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Images in HTML PowerPoint How images are used in HTML
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
Hosted by Coach Slanina
Web Design and Development
Adding Images to Your Web Page
HTML Images CS 1150 Spring 2017.
Chapter 3 Images.
Adding Images.
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
Adding Images.
Adding Images.
Pertemuan 1 Desain web Pertemuan 1
Adding Images.
Adding Images.
Images in HTML PowerPoint How images are used in HTML
Presentation transcript:

HTML IMAGES

CONTENTS IMG Tag Alt Attribute Setting Width and Height Of An Image Summary Exercise

IMG TAG In HTML, images are defined with the tag. The tag is empty, which means that it contains attributes only, and 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. Syntax for defining an image:

IMG TAG The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on " has the URL: The browser displays the image where the 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.

ALT ATTRIBUTE The required alt attribute specifies an alternate text for an image, if the image cannot be displayed. The value of the alt attribute is an author-defined text: The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

SET HEIGHT AND WIDTH OF AN IMAGE The height and width attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default: Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).

SUMMARY Img tag is used to add image to the page. Path of the file is given. You can set the height and width of your image according to your wish.

EXERCISE How Img tag is used? How the Path of the file is given? How to set the height and width of your image?

THANK YOU