1. Essentials of HTML

3. Lesson Objectives: 01 02 03 04 05 06 Continue learning HTML Revise
HTML Structure
Adding images
Linking Pages
Adding Tables
Adding Color

4. Brian Strom : - 2minutes
Add all the tags which you learned in HTML

6. 1. Add Images

7. Adding image
Image from computer
Image from folder
Image from web

8. Adding image from the Device
In HTML, images are defined with the <img> tag and does not have a closing tag
Image Syntax
<img src=“zayed.jpg" alt=“shk zayed" style="width:128 ;height:128">
<img src=“zayed.jpg" alt=“shk zayed" width = “128” height=”128">

9. 2. Adding image from the Device
Image Syntax
<img src=“foldername/imagename.jpg” >
<img src=“images/zayed.jpg" alt=“shk zayed" style="width:128 ;height:128">
<img src=“images/zayed.jpg" alt=“shk zayed" width = “128” height=”128">

10. 3. Adding image from a link
Image Syntax
<img src="
zayed.JPG" alt="shaikh zayed.com" width = "300" height="250” >

11. Open NotePad++ and follow step by step to accomplish the activity.
Practical P-84-85
Open NotePad++ and follow step by step to accomplish the activity.

12. Task Sheet Open NotePad++ - and write main html tags head & body
Completed
Not Completed 1
Open NotePad++ - and write main html tags head & body 2
Save your file as “Lesson7-Name.html “ 3
Add a Title for your page ( Zayed in our heart ) 4
Add h1 heading “Year 2018 – Year of Zayed “ 5
Add 2 breaks after the above heading 6
Add a comment “ image of zayed” after the breakes 7
Add an image from your folder “zayed2018.jpg”

13. 2. Links

14. Links To link two or more HTML documents together. 1. Hyper Links
You can click on a link and jump to another document.
Syntax
<a href=" Visit our HTML tutorial </a>

15. Links 2. Links to another page in the same html folder Syntax
<a href=“page2.html"> Next Page </a>

16. Task Sheet No
Task
Completed
Not Completed 8
Add a link to “ “ Government of UAE. 9
Add a link to another page in your folder.

17. 3. Colours

18. Adding Colour
CSS – Cascading Style Sheet : modern programming language used to format the look of the web pages.
Syntax
Refer to student book P

19. Task Sheet Add a new heading h2 to your page colored maroon as “No
Task
Completed
Not Completed 10
Add a new heading h2 to your page colored maroon as “
Sheikh Zayed bin Sultan Al Nahyan, the Founding President of the UAE “ 11
Add a blue paragraph copied from the government page as advised by your teacher.

20. 4. Adding Tables

21. Table Main Structure <table> </table> Make table
<th></th>
Table header
<tr> </tr>
Table Row
<td></td>
Table Data

22. Output of our table Border Line
<table> <table border= "1">

23. Add a border to your table
<table> </table>
Make table
<th></th>
Table header
<tr> </tr>
Table Row
<td></td>
Table Data

24. Task Sheet Create a table using the <table > tagNo
Task
Completed
Not Completed 12
Create a table using the <table > tag 13
Add the following table headings and raws

25. Evaluate your Understanding