This is lecture three of web design and development series.

1. [Day Three]
Images, Links & Lists
Course: Web Design and Develop
Date: 2017/05/14
Lecturer: Mohammad Rafi Haidari

2. Last Lesson Conclusion!
• Describe HTML Tags?
• Name a tag that doesn’t need a closing tag?
• Name tag for inserting inline CSS?
• How many heading tags are there in HTML?

3. HTML Images!
<img src=“pomtech_academy.jpg" alt=“Logo" width="128" height="128">
 Use the HTML <img> element to define an image
 Use the HTML src attribute to define the URL of the image
 Use the HTML alt attribute to define an alternate text for an image,
if it cannot be displayed
 Use the HTML width and height attributes to define the size of the
image
 Use the CSS width and height properties to define the size of the
image (alternatively)

4. HTML Links!
You can click on a link and jump to another document.
Note: A link does not have to be text. It can be an image
or any other HTML element.

5. HTML Links!
<a href="https://pomtech.academy/" target="_blank">
PomTech Academy</a>
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial" style="width:42px;height:42px;border:0;">
</a>
<h2 id="C4">Chapter 4</h2>
<a href="#C4">Jump to Chapter 4</a>
<a href="html_demo.html#C4">Jump to Chapter 4</a>

6. HTML Lists!
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
disc Sets the list item marker to a bullet
(default)
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none The list items will not be marked

7. HTML Lists!
Ordered HTML List
An unordered list starts with the <ol> tag. Each list item
starts with the <li> tag.
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

8. HTML Lists!
Nested HTML Lists
List can be nested (lists inside lists).
Horizontal Lists
HTML lists can be styled in many different ways with CSS.
One popular way is to style a list horizontally, to create a
menu:

9. Lesson Conclusion Game!
• Name two attributes of img tag?
• What is the name of tag for linking?
• Name two attributes of a tag?
• How can you create a bookmark?
• Tags for Ordered list and Unordered list?
• How to create a list item with out any mark?
• What is nested list give some examples?

10. Move 2 creating 6 squares.

11. Solved Version!

12. Question?

13. Thank you!