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. 1 Minute Strategy
Build up the HTML sweet home Structure using the HTML main blocks within one minute?

5. 1. Add Images

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

7. 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">

8. 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">

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

10. Open NotePad++ and follow step by step to accomplish the activity.
Practical
Open NotePad++ and follow step by step to accomplish the activity.

11. 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”

12. 2. Links

13. 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>

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

15. 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.

16. 3. Colours

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

18. 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.

19. 4. Adding Tables

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

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

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

23. 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 14
Add an image in a new column as below

24. Evaluate your Understanding