Essentials of HTML

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

1 Minute Strategy Build up the HTML sweet home Structure using the HTML main blocks within one minute?

1. Add Images

Adding image Image from computer Image from folder Image from web

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

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

3. Adding image from a link Image Syntax <img src="https://www.moe.gov.ae/Ar/MediaCenter/News/PublishingImages/ zayed.JPG" alt="shaikh zayed.com" width = "300" height="250” >

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

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”

2. Links

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="https://www.w3schools.com/html/"> Visit our HTML tutorial </a>

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

Task Sheet No Task Completed Not Completed 8 Add a link to “ https://government.ae/en/ “ Government of UAE. 9 Add a link to another page in your folder.

3. Colours

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

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.

4. Adding Tables

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

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

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

Task Sheet Create a table using the <table > tag No 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

Evaluate your Understanding