HTML Notes

Cambridge IGCSE ICT
Chapter 21
Website Authoring
Website
• A website is a collection of individual but related
web pages that are often stored together and
hosted by a web server.
• A web page can include different objects such as

text, sound, video and still images.
Website
• A web page is created using three layers :
 Content layer
 Presentation layer
 Behavior layer
Website
• You develop the content / structure of your web
page in HTML and the presentation layer in CSS
• Behavior layer included script language and not

tested in practical exam for IGCSE
HTML
• HTML stands for Hyper Text Markup Language
• Text Based language to develop content layer of
websites
• Can be written in using note pad or Adobe
Dreamweaver
• Files are saved with .htm or .html extention
• Files are recognize by web browsers
Use of preset HTML styles – Task 21A
<!DOCTYPE html>
<html>

<head>
<title>Task 21a</title>
</head>
<body>
<p>My first web page by Lalitha</p>
<h1>This is a style h1, the largest heading style
</h1>
Use of preset HTML styles – Task 21A
<h2> This is style h2 </h2>

<h5> This is style h5</h5>
<h6>This is style h6, the smallest heading style</h6>
<p>This is style p, the paragraph style</p>
</body>
</html>
Save filename intro.html
Create a Web Page
• All HTML web pages start with a <!DOCTYPE html>
• It tells that the page is written in HTML rather than

another markup language.
• Comments in your webpage starts with 
Colour
• All the different combinations of red, green and blue
(RGB) allows 16 million different colours.
Numbers : 0 to 9 and
Characters : A to F
• All colour codes have six characters, the first two

being red, the next two green and final two blue.
Use hexadecimal (hex codes)
Colour
• If a colour is off it is set to 00 and if it is fully on it
is set to FF. To create the colour for any pixel you
must tell the computer how much red, green and
blue light to show.
Black : #000000
White : #FFFFFF
Tables in content layer
• Start with <table> and ends with </table>

• <tr> for table row and ends with </tr>
• <td> for table data and ends with </td>
Cell Padding & Spacing
• Cell Padding : to add spaces between the content of
a cell and the cell itself
• Cell Spacing : to add spacing between the cells in a

table
Cellpadding
<table width="15%" border="4" cellpadding="20">
Cellspacing
• <table width="15%" border="4" cellspacing="20">
Use embedded CSS in HTML
• Styles can be applied to tables and other HTML
elements by placing CSS instructions in a style
attribute within the HTML tag. This is called
embedded CSS
• Align the table in the centre of the browser window.
<table width="80%" border="1" style="margin-

left:auto; margin-right: auto">
Embedded Styles
• Display the table with single solid border
<table width="80%“ border="1" style="margin-

left:auto; margin-right: auto; border-
collapse:collapse“>
• Internal gridline 2 pixels wide :

<td style="border:solid "2";text-align:
center"> </td>
Images
• There are three common file types for images :
JPEG and PNG. GIF (animation)
• You can use graphic package to change images from

one format to another by opening them and using
Save As ….. To change the file format for the new
image.
• Use Photoshop to add turtlelogo.gif and save as

turtlelogo.jpg
Images
• Insert turtlelogo.jpg
• Resize the image width=100 height=100
• Add Alt Attribute

The required alt attribute specifies an alternate
text for an image, if the image cannot be
displayed.
 Save As intro.htm
List
• The most common HTML lists are ordered and
unordered lists:
An ordered list: An unordered list:
1.The first list item • List item
2.The second list item • List item
3.The third list item • List item
List
• An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag.
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
List
• An ordered list starts with the <ol> tag. Each list
item starts with the <li> tag.
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
List
•The <dl> tag defines a

description list.
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Hyperlink
• A method of accessing another document or
resource from your current application
• When you select a hyperlink it will perform the

action :
 move your position within a page
 open another page either locally or the internet
 open your email editor
Anchors (Explanation)
• An anchor is used to set a hyperlink to allow you
to navigate within a page or to an external page
• An anchor starts with an <a> and closes with an

</a>
• <a href = “http://wms.edu.my”>My School</a>
• <a href=“#SectionA”> text </a>

Hyperlink
• Use the text My School to create a link to
http://wms.edu.my
• Use ptct.jpg to open Chapter 21 notes (new

window)
• Use the text Image to create a link to turtlelogo.jpg

(_blank)
• Use the link June 2016 Paper 3 to create a link to

0417_w16_qp_3.pdf (_exam)
Mailto
<a href=
"mailto:tina@wms.edu.my?subject=Urgent%20Message">Em
ail</a>
Remember to not
leave it blank and
insert %20
Hyperlinks within a webpage
Create the Division and Set the link to it
Division
• A point of reference within a page like a bookmark
• The division starts with <div> and close with </div>
<div id=“top”> Any content could appear here </div>
Set Link
Make the word ‘top’ in the last line a hyperlink to the
top of the page.
<a href=“#top”> text </a>

HTML Notes

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

HTML Notes

Încărcat de

Drepturi de autor:

Formate disponibile

Cambridge IGCSE ICT

• A web page can include different objects such as

• Behavior layer included script language and not

<h2> This is style h2 </h2>

• It tells that the page is written in HTML rather than

• Comments in your webpage starts with <!-- and

• All colour codes have six characters, the first two

• Start with <table> and ends with </table>

• Cell Spacing : to add spacing between the cells in a

• Align the table in the centre of the browser window.

<table width="80%" border="1" style="margin-

<table width="80%“ border="1" style="margin-

• Internal gridline 2 pixels wide :

• You can use graphic package to change images from

• Use Photoshop to add turtlelogo.gif and save as

• Resize the image width=100 height=100

• Add Alt Attribute

•The <dl> tag defines a

• When you select a hyperlink it will perform the

• An anchor starts with an <a> and closes with an

• <a href = “http://wms.edu.my”>My School</a>

• <a href=“#SectionA”> text </a>

• Use ptct.jpg to open Chapter 21 notes (new

• Use the text Image to create a link to turtlelogo.jpg

• Use the link June 2016 Paper 3 to create a link to

S-ar putea să vă placă și