Scribd
Upload
2 views

HTML Tags & Attributes

HTML knowledge

Uploaded by

mattchan0531
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
2 views

HTML Tags & Attributes

HTML knowledge

Uploaded by

mattchan0531
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

c2

HKDSE ICT Book C2 Chapter 4

Lessonn 2
Lesso on HTM L

<BODY> Section of a HTML File

ln the last lesson, you learnt the basic structure of a HTML file which is composed of a <head> and <bodp'

The <BODY> section of a HTML file is used to represent the actual content to be displayed on the web page,

such as headings, paragraphs, images, hyperlinks, tables, lists, etc.

Forming Paragraphs

HTMI Tag Description Sample HTML Code Output

Without any html tags for paragraph This is This is our house
t The browser will automatically remove extra spaces ou r house
and lines when the page is displayed
<p> Pa ragra ph <p>This is</p> <p>our This is

t The browser will automatically add house</p> our house


a single blank line
<pre> Pre-formatted Text <pre>This is This is

t The texts inside <pre> are displayed our house </pre> our house
in a fixed-width font and preserves
both spaces and line breaks
<br> Line break (no ending tag for <br>) This is<br>our house This is

our house

<hr> Horizontal rule (no ending tag for This is<hr>our house This is

<hr>)
ou r house

More attributes for <p> tags:


While the word "p" only specifies the function to create a paragraph, there are some more settings about

the paragraphs that can be defined. We call those settings as attributes.


HTML Tag Desription Sample HTML Code

<p align> Paragraph alignment <p align=" left">He! lo</p>


t The browser will automatically add a single <p align="center" >H el lo</p>
blank line
<p align=" right" >Hel lo</p>

<p align="justify" >H e I Io</p>

<p class> Sets one or more global CSS classes to be <p class="design1">This is our house
a pplied to the pa ragra ph.
<lp>
<p style> Sets the CSS style for the paragraph only. <p style="background-color: blue">This

is our house <lp>


Lists

HTML Tag Desription Sample Output


<u1> Bulleted list (unordered list) <ul> o Chloe
<!i>Chloe</li> O Selina
<li>Selina</li> O Jerry

<li>Jerry<lli>
<lul>
<oI > Numbered list (ordered list <ol> L. Chloe
<li>Chloe</li> 2. Selina
from L onwards)
<li>Selina</li> 3. Jerry

<li>Jerry</li>
<lol>

More attribute for <ul> tags:


HTML Tag Description Sample HTML Code

<uI t14le> bullet style for the list: <ul type="circle I disc I square">

) By default, it is a circle. <li> ...... <lli>


</ul>

More attribute for <ol> tags:


HTML Tag Description Sample HTML Code

<o1 Whether the number list is in reverse order, <ol reversed>


reversed> <li>Chloe</li>
3. Chloe
<li>Selina <lL> 2. Selina
<li>Jerry <lli> 1. Jerry

<lol>
<oI Specify an integer to start counting <ol start="5">
sEart > <li>Chloe</li>
5. Chloe
<li>Selina <lr,> 6. Selina
<li>JerrV <llt> 7. Jerry

<lol>
<oI t14>e> Specify the type of numbering <o! type="A">
, By default, it is numbers. Other types include:
<li>Chloe</li>
I a for lowercase letters A. Chloe
I a fon uppercase letters <li>Selina <lli> B. Selina
I i for lowercase Roman numerals <li>Jerry <lli> C. Jerry
r r for uppercase Roman numerals'
<lol>
I 1 for numbers {default}
Nested List

To form a nested ordered/unordered list, simply create another <uI> or another <o1> within a list.

HTML Code Output on Browser


<p>Principals in CFS S</p>
Principals in CFSS
<o1>
<1i>School Principal< /1i> 1. School Principal
<uI>
<1i>Ho Tik Shun</LL> o Ho Tik Shun
</ur>
<Ii>Deputy Prineipals< / L:-> 2. Deputy Principals
<ul>
<ri>Kwok yih Feng sabastein </LL> o Kwok Yih Feng Sabastein
<1i> Lam Chi Wai ilimmy </LL> o Lamchi Wai Jimmy
</uL>
<Ii>Assistant Principals< /Lr> -l
J. Assistant Principals
<u1>
o Ho Chun Man
.rL"H H !,::: O Hsu Yuk Fun
< li > L,eung Yue Shan ilenni f er < / LL> o Leung Yue Shan Jennifer
</uL>
</oL>

Classwork of Today:

Display the following on the web page:

Title of the web page: 5499 CW2

Diff"*"t P

l. Level l: Easy
O Variables
OIF
2. Level 2: Moderate
o FOR Loop
i. Level 3: Slightly Dfficult
o WHILE Loop
4. Level 4: Array
o Using affay in loops
!nserting Images

The <img> tag is used to insert (link) an image to a web page. There are a few attributes for the tag, as

shown below:

HTML Tag Description Sample HTML Code

< img sre> Specify the location (source) of the image. <img sre= rrTomato. jpg" >

Hint: it denotes that the image is at the same


file location as the web page.

<img alt> Define alternative texts that can replace the image <img src= I'Tomato . jpg t'
in the page for two different purposes: a1t="This is a photo about
1. In case the link with the photo is broken, the a tomato. tr >
text will appear.
2. For the screen reader to read aloud the content
of the image via alternative text.
< img Define the height of the image. < img height= !r 3 0 0PxI' >
t If the width is not specified, the browser will
height > scale the image according to its aspect ratio.

< img Define the width of the image. < img width= rr
4 0 0Pxrr >
If the height is not specified, the browser will scale
width> the image according to its aspect ratio.

Irolder structure Meanirt

root M q
rchlogo.png lndCIr.htrnl
<img src*" schlogc. png">

raot
g lndex.htrnl
<img src:"image/schl ogo. png">
tmage
----**:- M
xhtogo.png'

root
M
r<hlogo.png
<img src:" . . I schlogo. png">
rrnage g
indax.hlml

roat M
xhlogo png

image <img src:r' . . / . . / schlogo.png">


uglY
g
.nd€r.htmt

root
ts
imag* rchrogo png <img src:It . . lima qe / schlogc, png">
uglY
q
rn<rrr.html

You might also like