Scribd
Upload
1K views

HTML Notes

This document provides information about creating websites, including: 1. Websites are collections of related web pages stored on a web server. Web pages contain objects like text, images, sound and video. 2. Web pages have three layers - content created with HTML, presentation with CSS, and optional behavior with scripting languages. 3. HTML is used to develop the content layer and structure of web pages. Files are saved with .html or .htm extensions. 4. CSS can be used to style HTML elements by applying styles within HTML tags directly on the page.

Uploaded by

Winnie Ooi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
1K views

HTML Notes

This document provides information about creating websites, including: 1. Websites are collections of related web pages stored on a web server. Web pages contain objects like text, images, sound and video. 2. Web pages have three layers - content created with HTML, presentation with CSS, and optional behavior with scripting languages. 3. HTML is used to develop the content layer and structure of web pages. Files are saved with .html or .htm extensions. 4. CSS can be used to style HTML elements by applying styles within HTML tags directly on the page.

Uploaded by

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

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>
<!-- Markup created today -->
<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>


<h3> This is style h3 </h3>
<h4> This is style h4 </h4>
<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 <!-- and


ends 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">&nbsp;</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:[email protected]?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>

You might also like