3 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 ID: 753532
Download Presentation The PPT/PDF document "Essentials of HTML Lesson Objectives:" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Essentials of HTMLSlide2Slide3
Lesson Objectives:3
01
02
03
04
05
06
Continue
learning HTML
Revise
HTML Structure
Adding images
Linking Pages
Adding Tables
Adding ColorSlide4
1 Minute Strategy
Build up the HTML sweet home Structure using the HTML main blocks within one minute?Slide5
1. Add ImagesSlide6
Adding imageSlide7
Adding image from the DeviceIn 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">Slide8
2. Adding image from the Device
Image Syntax
<
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">
<
img src
=“foldername/imagename.jpg” >Slide9
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”
> Slide10
Practical
Open
NotePad
++
and follow step by step to accomplish the activity.Slide11
No
Task
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”
Task SheetSlide12
2. LinksSlide13
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>Slide14
Links 2. Links to another page in the same html folder
Syntax
<a
href
=“
page2.html
"> Next Page </
a>Slide15
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.
Task SheetSlide16
3.
ColoursSlide17
Adding ColourCSS – Cascading Style Sheet : modern programming language used to format the look of the web pages.
Syntax
Refer to student book P-106-107Slide18
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.
Task SheetSlide19
4. Adding TablesSlide20
<table> </table>
Make table
<th></th>
Table header
<tr> </tr>
Table Row
<td></td>
Table Data
Table Main StructureSlide21
Output of our table
Border Line
<table> <table border= "1">Slide22
<table> </table>
Make table
<th></th>
Table header
<tr> </tr>
Table Row
<td></td>
Table Data
Add a border to your tableSlide23
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
Task SheetSlide24
Evaluate your Understanding