22
| Date post: | 15-Aug-2015 |
| Category: |
Internet |
| Upload: | marlon-jamera |
| View: | 22 times |
| Download: | 0 times |
Z
Images and Listsin HTML
Z
Review: How the WebWorks using HTML
• It contains text files of HTML that
provide information about the page
content structure.
a. Web Search
b. Web Page
c. Web Browser
d. Website Application
Z
Review: How the WebWorks using HTML
• This file must have a .htm or .html file
extension, it can be created with text
editors like notepad, notepad, etc.
a. Text File
b. HTML File
c. XHTML File
d. XML File
Z
Review: How the WebWorks using HTML
• It is always enclosed in angle bracket
(<>) like <html>.
a. Tag
b. Attribute
c. Head
d. Title
Z
Review: How the WebWorks using HTML
• It is part of the main tags that describe
html web page that is to be viewed by a
web browser.
a. <html>
b. <head>
c. <title>
d. <body>
Z
Review: How the WebWorks using HTML
• What kind of tag is this? <h1> This is a
sample text </h1>
a. Hyperlink Tag
b. Image Tag
c. Text Formatting Tag
d. 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 TagsExample
<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>
a. Appleb. Orangec. Grapefruit
1. Apple2. Orange3. Grapefruit
A. AppleB. OrangeC. Grapefruit
I. AppleII. OrangeIII. Grapefruit
i. Appleii. Orangeiii. Grapefruit
Unordered Lists: <ul> 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
o Apple
o Orange
o Pear
Apple
Orange
Pear
Definition Lists: <dl> 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
SymbolHTML EntitySymbol 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!
