Images and Lists in HTML
1336735806
3,451 views
22 slides
Aug 04, 2015
Slide 1 of 22
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
About This Presentation
Images and Lists in HTML
Slide Content
Z Week 8: Images and Lists in HTML Subject Code: COMP121 By: Marlon Jamera Email: [email protected]
Z Images and Lists in HTML
Z Review: How the Web Works using HTML It contains text files of HTML that provide information about the page content structure. W eb Search Web Page Web Browser Website Application
Z Review: How the Web Works using HTML This file must have a . htm or .html file extension, it can be created with text editors like notepad, notepad, etc. Text File HTML File XHTML File XML File
Z Review: How the Web Works using HTML It is always enclosed in angle bracket (<>) like <html>. Tag Attribute Head Title
Z Review: How the Web Works using HTML It is part of the main tags that describe html web page that is to be viewed by a web browser. <html> <head> <title> <body>
Z Review: How the Web Works using HTML What kind of tag is this? <h1> This is a sample text </h1> Hyperlink Tag Image Tag Text Formatting Tag Background Tag
Z Scope of the Lesson Images in HTML Miscellaneous Tags Creating Lists Ordered Lists Unordered Lists Definition Lists Special Characters in HTML
Z Learning Outcomes By the end of the lesson, you will be familiar and know how the website works using HTML. Discuss the basic coding of images in HTML. Understand the coding syntax of creating lists in HTML. Explain thoroughly the coding styles and special characters in HTML.
Z Images in HTML img stands for “image”. It announces to the browser that an image will go here on the page. src stands for “source”. This is an attribute, a command inside a command. It’s telling the browser where to go to find the image. alt stands for “alternate text”. This tells the browser that if it can’t find the image, then just displays this text.
Z Adding Images The html code for adding the image is as simple as one line; the < img > command. There are over a dozen attributes or options which may be added to this command, but to keep things simple we’ll only go over a couple. Inserting an image with < img > tag: <img src=“logo.png“ alt=“Logo Image”>
Z Width and Height Attributes We can also specify the image’s width and height. If the width and/or height are not the actual image dimension then the image will be scaled to fit. <img src=“logo.png“ width=“70” height=“30” alt=“Logo Image”>
Images in HTML Inserting an image with < img > tag: Image Attributes <img src=" logo.jpeg" alt="logo" /> src Location of image file (relative or absolute) alt Substitute text for display (e.g. in text mode) height Number of pixels of the height width Number of pixels of the width border Size of border, 0 for no border
Miscellaneous Tags <hr />: Draws a horizontal rule (line) < center > </ center >: Makes the texts center . <font> </font>: Designs the texts. <hr size=“5” width=“70%” /> <center>This is a centered texts.</center> <font size=“3” color=“blue”>Sample Font</font> <font size=“+4” color=“blue”>Font+4 </font>
Miscellaneous Tags Example <html> <head> <title>Miscellaneous Tags Example</title> </head> <body> <hr size="5" width="70%" /> <center>Hello World!</center> <font size="3" color="blue">Font3</font> <font size="+4” color="blue">Font+4</font> </body> </html>
Ordered Lists: < ol > tag Create an ordered list using < ol > </ ol >: Attribute values for type are 1, A, a, I, or i. <ol type="1"> <li>Apple</li> <li>Orange</li> <li> Grapefruit </li> </ol> Apple Orange Grapefruit Apple Orange Grapefruit Apple Orange Grapefruit Apple Orange Grapefruit Apple Orange Grapefruit
Uno rdered Lists: < u l> tag Create an ordered list using < ul > </ ul >: Attribute values for type are disc, circle & square <ul type="disk"> <li>Apple</li> <li>Orange</li> <li> Grapefruit </li> </ul> Apple Orange Pear Apple Orange Pear Apple Orange Pear
Definition Lists: < d l> tag Create definition list using <dl> tag: Pairs of text and associated definitions; text is in < dt > tag, definition in < dd > tag. Renders without bullets Definition is indented <dl> <dt>HTML</dt> <dd>A markup language …</dd> <dt>CSS</dt> <dd>Language used to …</dd> </dl>
Lists Example <ol type="1"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ol> <ul type="disc"> <li>Apple</li> <li>Orange</li> <li>Grapefruit</li> </ul> <dl> <dt>HTML</dt> <dd>A markup lang…</dd> </dl>
HTML Special Characters £ £ British Pound € € Euro " " Quotation Mark ¥ ¥ Japanese Yen — — Em Dash Non-breaking Space & & Ampersand > > Greater Than < < Less Than ™ ™ Trademark Sign ® ® Registered Trademark Sign © © Copyright Sign Symbol HTML Entity Symbol Name
Special Characters Example <p>[>> Welcome <<]</p> <p>►I have following cards: A♣, K♦ and 9♥.</p> <p>►I prefer hard rock ♫ music ♫</p> <p>© 2015 by Svetlin Nakov & his team</p> <p>AMA Computer College</p>
Z Let’s call it a day, Thank you!
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 3,451
- Slides 22
- Favorites 3
- Age 3772 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views