1. Introduction to the Internet
Lecture 3
HTML
Dr. Abeer Alnuaim
Development of Internet Application 1501CT - Sara Almudauh

2. Development of Internet Application 1501CT - Sara Almudauh
Images
Images can be included using <img >
by default, browsers can display GIF and JPEG files, more modern browsers can also typically support PNG files and SVG graphics (of course, use at your own risk)
other image formats may require plug-in applications for display
Development of Internet Application 1501CT - Sara Almudauh

3. Development of Internet Application 1501CT - Sara Almudauh
Images
Use the src attribute to indicate the image location.
Include alt attribute that describe the image. Alt is short for alternative text.
width and/or height - dimensions in pixels (often only need to specify one of them and the other is automatically scaled to match, where possible pictures should be resized using other programs to save on bandwidth and problems that some (older) browsers might have with resizing images)
Development of Internet Application 1501CT - Sara Almudauh

4. Development of Internet Application 1501CT - Sara Almudauh
Images
Example:
<img src = ”Smile.jpg” alt = "Picture of a happy face” >
Make sure your image is in your web site directory folder
Image as a Link:
<a href=" src=”hyperlinkedImage.jpg" alt=”alternitavetext”> </a>
Development of Internet Application 1501CT - Sara Almudauh

5. Development of Internet Application 1501CT - Sara Almudauh
Lists
HTML supports:
Unordered Lists (or Unnumbered lists)
Ordered Lists (or Numbered lists)
Definition lists (or Description lists)
You can nest lists too, but use this feature sparingly because too many nested items can get difficult to follow.
Development of Internet Application 1501CT - Sara Almudauh

6. Development of Internet Application 1501CT - Sara Almudauh
Unordered Lists
Starts with an opening list <ul> (for unordered list) tag.
Enter the <li> (list item) tag followed by the individual item
End the entire list with a closing list </ul> tag
Example:
Result
Source Code
<ul>
<li> Sara </li>
<li> Nora </li>
<li> Hana </li>
</ul>
Sara
Nora
Hana
The <li> item can contain multiple paragraphs. Indicate the paragraphs with the <P> paragraph tags. Try it!
Development of Internet Application 1501CT - Sara Almudauh

7. Development of Internet Application 1501CT - Sara Almudauh
Ordered Lists
A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except is uses <ol> instead of <ul>.
<li> is used here as well to list the items.
Source Code
<ol>
<li> Sara </li>
<li> Nora </li>
<li> Hana </li>
</ol>
Result
Sara
Nora
Hana
Development of Internet Application 1501CT - Sara Almudauh

8. Development of Internet Application 1501CT - Sara Almudauh
lists
Unordered lists and ordered lists are commonly used in HTML:
Unordered List
The first item
The second item
The third item
The fourth item
Ordered List
The first item
The second item
The third item
The fourth item
Development of Internet Application 1501CT - Sara Almudauh

9. Description List (Definition Lists )
The <dl> tag defines a description list.
It is used in conjunction with <dt> (defines terms) and <dd> (describes each term)
Web browsers generally format the definition on a new line and indent it.
<dl>   <dt>Coffee</dt>   <dd>- black hot drink</dd>   <dt>Milk</dt>   <dd>- white cold drink</dd> </dl>
Coffee    - black hot drink   Milk    - white cold drink
Development of Internet Application 1501CT - Sara Almudauh

10. Development of Internet Application 1501CT - Sara Almudauh
 The Style Attribute
A style attribute can be added to an unordered list, to define the style of the marker:
Style
Description
list-style-type:disc
The list items will be marked with bullets (default)
list-style-type:circle
The list items will be marked with circles
list-style-type:square
The list items will be marked with squares
list-style-type:none
The list items will not be marked
Development of Internet Application 1501CT - Sara Almudauh

11. Development of Internet Application 1501CT - Sara Almudauh
Example (Disc)
Code
Result
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Unordered List with Disc Bullets
Coffee
Tea
Milk
Development of Internet Application 1501CT - Sara Almudauh

12. Development of Internet Application 1501CT - Sara Almudauh
Example (Circle)
Code
Result
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Circle Bullets</h2>
<ul style="list-style-type:circle">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Unordered List with Disc Bullets
Coffee
Tea
Milk
Development of Internet Application 1501CT - Sara Almudauh

13. Development of Internet Application 1501CT - Sara Almudauh
Example (Square)
Code
Result
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Unordered List with Disc Bullets
Coffee
Tea
Milk
Development of Internet Application 1501CT - Sara Almudauh

14. Development of Internet Application 1501CT - Sara Almudauh
Example (None)
Code
Result
<!DOCTYPE html>
<html>
<body>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
Unordered List with Disc Bullets
Coffee
Tea
Milk
Development of Internet Application 1501CT - Sara Almudauh

15. Development of Internet Application 1501CT - Sara Almudauh
The Type Attribute
Type
Description
type="1"
The list items will be numbered with numbers (default)
type="A"
The list items will be numbered with uppercase letters
type="a"
The list items will be numbered with lowercase letters
type="I"
The list items will be numbered with uppercase roman numbers
type="i"
The list items will be numbered with lowercase roman numbers
Development of Internet Application 1501CT - Sara Almudauh

16. The Type Attribute (Number)
Code
Result
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Numbers</h2>
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Ordered List with Numbers
Coffee
Tea
Milk
Development of Internet Application 1501CT - Sara Almudauh

17. The Type Attribute (Uppercase letters)
Code
Result
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Ordered List with Numbers
Coffee
Tea
Milk
Development of Internet Application 1501CT - Sara Almudauh

18. The Type Attribute (Lowercase letters)
Code
Result
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Letters</h2>
<ol type=“a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Ordered List with Numbers
Coffee
Tea
Milk
Development of Internet Application 1501CT - Sara Almudauh

19. The Type Attribute (Uppercase Roman Numbers)
Code
Result
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Roman Numbers</h2>
<ol type=“I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Ordered List with Numbers
Coffee
Tea
Milk
Development of Internet Application 1501CT - Sara Almudauh

20. The Type Attribute (Lowercase Roman Numbers)
Code
Result
<!DOCTYPE html>
<html>
<body>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Ordered List with Numbers
Coffee
Tea
Milk
Development of Internet Application 1501CT - Sara Almudauh

21. Development of Internet Application 1501CT - Sara Almudauh
Nested HTML Lists
Code
Result
<!DOCTYPE html>
<html>
<body>
<h2>A Nested List</h2>
<ul>
<li>Coffee</li>
<li>Tea
<li>Black tea</li>
<li>Green tea</li>
</ul>
</li>
<li>Milk</li>
</body>
</html>
A Nested List
Coffee
Tea
Black tea
Green tea
Milk
Development of Internet Application 1501CT - Sara Almudauh

22. Development of Internet Application 1501CT - Sara Almudauh
Horizontal Lists
Code
Result
<!DOCTYPE html>
<html>
<head>
<style>
ul#menu li {
display:inline; }
</style>
</head>
<body>
<h2>Horizontal List</h2>
<ul id="menu">
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
<li>PHP</li>
</ul> </body>
</html>
Horizontal List
HTML CSS  JavaScript PHP
Development of Internet Application 1501CT - Sara Almudauh

23. HTML <q> for Short Quotations
The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.
Code
Result
<!DOCTYPE html>
<html>
<body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body>
</html>
Browsers usually insert quotation marks around the q element.
WWF's goal is to: Build a future where people live in harmony with nature.
Development of Internet Application 1501CT - Sara Almudauh

24. Development of Internet Application 1501CT - Sara Almudauh
Special Characters
Some characters (symbols) are reserved in HTML5. For example, you cannot use the > and < signs or the copyright symbol © within your text because the browser could mistake them for markup. You need to use the special characters sometimes called Entity characters.
Development of Internet Application 1501CT - Sara Almudauh

25. Development of Internet Application 1501CT - Sara Almudauh
Special Characters
Char. Entity Meaning
& & Ampersand
< < Less than
> > Greater than
" " Double quote
' &apos; Single quote
¼ ¼ One quarter
½ ½ One half
¾ ¾ Three quarters
 ° Degree
(space)   Non-breaking space
@ © Copyright
€ € Euro
Development of Internet Application 1501CT - Sara Almudauh

26. Development of Internet Application 1501CT - Sara Almudauh
Inline Tags
An inline element does not start on a new line and only takes up as much width as necessary. Some inline tags are: <em> <strong> <dfn> <code> <kbd> <samp> <var> <cite> <q> <sub> <sup>
Development of Internet Application 1501CT - Sara Almudauh

27. Development of Internet Application 1501CT - Sara Almudauh
New Tags
In HTML5, there are new (div-like) sectioning tags, e.g.:
<header> <footer> <nav> <main>
<section> <article> <aside> <figure>
There are new (span-like) phrasing tags, e.g.:
<mark> <time> <command>
There are new media tags, e.g.:
<video> <audio> <canvas> <svg> <math>
See the HTML5 differences from HTML4 document:
Development of Internet Application 1501CT - Sara Almudauh

28. Development of Internet Application 1501CT - Sara Almudauh
Questions !! 
Development of Internet Application 1501CT - Sara Almudauh