ESSENTIALS OF HTML Lesson Objectives 03 Adding images
ESSENTIALS OF HTML
Lesson Objectives: 03 Adding images 02 Revise HTML Structure 01 Continue learning HTML 04 Linking Pages 05 Adding Color Adding Tables 06 3
Brian Strom : - 2 minutes Add all the tags which you learned in HTML
1. Add Images
Adding image Image from computer Image from folder Image from web
1. 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/Media. Center/News/Publishing. Images/ zayed. JPG" alt="shaikh zayed. com" width = "300" height="250” >
Practical P-84 -85 Open Note. Pad++ and follow step by step to accomplish the activity.
Task Sheet No Task 1 Open Note. Pad++ - and write main html tags head & body 2 Save your file as “Lesson 7 -Name. html “ 3 Add a Title for your page ( Zayed in our heart ) 4 Add h 1 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 “zayed 2018. jpg” Completed Not Completed
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. w 3 schools. com/html/"> Visit our HTML tutorial </a>
Links 2. Links to another page in the same html folder Syntax <a href=“page 2. html"> Next Page </a>
Task Sheet No 8 9 Task Add a link to “ UAE. https: //government. ae/en/ “ Government of Add a link to another page in your folder. Completed Not Completed
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 No Task 10 Add a new heading h 2 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. Completed Not Completed
4. Adding Tables
Table Main Structure <table> Make </table> 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> Make </table> table <th></th> Table header <tr> </tr> Table Row <td></td> Table Data
Task Sheet No Task 12 Create a table using the <table > tag 13 Add the following table headings and raws Completed Not Completed
Evaluate your Understanding
- Slides: 25