Introducing HTML

ICT11
Introducing HTML

Rita Ester

What is HTML?
Hypertext Markup Language
Specifies the structure of a web page:
Contents
How the page is displayed
Platform independent
Can be interpreted by any computer
regardless of the hardware or operating
system.
18/04/2012 ©WCCS, ICT11: Introducing HTML 2

How to find HTML?
 Open IE
 Open a web page
e.g.
http://www.biblegateway.
com/
 Use the command
View  Source
 Notepad opens
with the HTML code
of the web page


Tags
 Example: Words/ characters
in angled brackets
<p>
Opening Tag
This is a paragraph. <p>
</p> Closing Tag
</p>
Enclose what has
to be formatted


Structure of an HTML Document
<html>
<head>

</head>
<body>

</body>
</html>

Document Tags
<html>
<head>
<title> Document Title </title>
</head>
<body>
Content of the page
</body>
</html>

Demo 1: Your First Web Page
<html>

<head>
<title>My First Home Page</title>
</head>

<body>

Hi folks, my name is Chris Brown.
</body>

</html>

Tags and Attributes
 Attributes are added to tags

 Example

<body bgcolor = “red” text = “#0000FF”>

This shows blue text
on red background

</body>


Demo 2: Change Page Colours
<html>
<head>
<title>My First Home Page</title>
</head>

<body bgcolor = “yellow” text = “#000033 “>


Hi folks, my name is Chris Brown.

</body>
</html>

Tags for Header Formatting
<h1> Heading 1 </h1>
... Smaller font
<h6> Heading 6 </h6>

 Define the font size
 Define space above and below
 Example:
<h1> My Vacation to Mexico </h1>

Browser display:
My Vacation to Mexico

Demo 3: Use Heading Tags
<html>

<head>
<title>My Vacation Page</title>
</head>

<body>


</body>

</html>

Tags for Paragraph Formatting
 Paragraph Tag <p>
 <p>
This is a paragraph
</p>
 Text of the paragraph wraps
 After the paragraph: blank line

 Break Tag <br>
 Line Break, like ENTER key
 No closing tag


Paragraph Alignment
 Default: left aligned
 Attribute added to the paragraph tag
<p align="center">
This is a centered paragraph
</p>

<p align="right">
This is a right aligned paragraph
</p>


Demo 4: Paragraph Tags
<html>
<head>
<title>My Vacation Page</title>
</head>

<body>

<p> Last summer I travelled to Mexico.
</p>

<br>

</body>
</html>


Change Fonts: An Example
<p>
<font face="arial, helvetica, tahoma"
size = "4"
color="red">
This paragraph is shown in
Arial, size 4, color red
</font>
</p>


Tag for Font Setting
<font face="face1[,face2][,face3]"
size="n | +n | -n"
color="color value">
text to be displayed
</font>
Default Font:
Times New Roman, size 3 (point 12)
Sizes from 1..7


More Tags for Text Formatting
Physical Logical Style Meaning
Style
<b> ... </b> <strong>...</strong> bold

<i> ... </i> <em> ...</em> italic

Examples
<strong> These words are bold </strong>
<i> These words are italic </i>
Use logical styles rather than physical

Demo 5: Text Formatting
<body>

<p>
<font face = “Verdana”>
Last summer I travelled to

<strong>Mexico</strong>.
</font>
</p>

<br>
</body>


Unordered Lists with HTML
 Example
∙ Photos
∙ Videos
 In HTML
<ul>
<li>Photos</li>
<li>Videos</li>
...
</ul>


Ordered Lists with HTML
Example
1. Cut out the shapes
2. Assemble the shapes

In HTML
<ol>
<li>Cut out the shapes</li>
<li>Assemble the shapes</li>
...
</ol>


Tables in HTML: Example
<table>
<tr>
<td> Sugar </td>

<td> Salt </td>
Sugar Salt Peppper
<td> Pepper </td>
</tr>
Sucre Sel Poivre <tr>
<td> Sucre </td>

<td> Sel </td>

<td> Poivre </td>
</tr>
</table>

Table Tags
<table>...</table>
for the entire table

<tr>...</tr>
for a row

<td>...</td>
for the cells, or columns, in each row
table data tags


Tables for Page Layout
To design the layout structure of a web
page
Table without the borders showing
Text stays inside it„s column borders

Example


HTML Code of the Example
<table border="1" cellpadding="0" cellspacing="0"
width="100%" height="550">
<tr>
<td valign="top" colspan="2" height="75">

<b> Buttons </b>
</td>
<td valign="top" width="90%">

<b> Here goes the content</b>
</td>
</tr>
</table>

Hyperlinks
Example: GOOGLE
to any other Web page
Locally - in the web site, the page belongs to
Globally - on the entire Web
to text on the same page
to other documents
to e-mail


Links to Global Web Pages
Example
<a href=“http://www.google.com”>
GOOGLE
GOOGLE

</a>
In general
<a href="URL">
name of the link
</a>


Links to Local Web Pages
Pages in the same folder
Link to the homepage
<a href="index.html"> index.html

Home
lastpage.html
</a>

Link to the last page
<a href="lastpage.html">
Go to last page
</a>

Links to Email
Example
<a href=“mailto:rita.ict11@gmail.ca">
Email to your teacher
</a>

In general
<a href="mailto:email@address">
link name
</a>


Link to an Anchor Point:
Example

For more information
<a href=“#tips”> jump to the Useful Tips Section </a>

……………………………………
……………………………………
……………………………………
……………………………………
…………………………

<a name=“tips”> Useful Tips </a>
Always use closing tags.


Links to Text on the Same Page
 Create the anchor point (target, bookmark) on the same
page
<a name=“target_name">
target text
</a>
 Link to the anchor point
<a href="#target_name">
name of the link
</a>


Demo 6: Hyperlinks
<p>
<font face = “Helvetica”>

<a href = "http://mexico-travel.com/">
Mexico
</a>.

</font>
</p>

<a href = "mailto:rita.ict11@gmail.com">
Email to Webmaster
</a>

Tags for Graphics
Horizontal Rule
<hr
align= "left| center| right"
size="n"
width= "n | n%"
color="color value" >

Img Tag


Adding Images: Examples
Example 1
<img src="homer.gif">

Example 2
<img src= "images/switzerland.jpg”>
alt= "switzerland"
border="2"
align= "right">


Demo 7: Graphics
<p>
<font face = “Helvetica”>
<a href = "http://mexico-travel.com/">
Mexico
</a>.

<img src="images/mexicomap.gif"
alt=“Mexico Map"
align="top">
<hr>

</font>
</p>


Graphics and Copyrights
 Copyright  No copyright
 Graphics on Web  Online freeware
pages  Clips from MS
 Postcards and other  Your own digital
prints photos
 Logos


Sources
 Chapter 3 in:  Boulton, J. HTML Tutorial.
Presley, Bruce, Beth Feb. 10, 2005
Brown, and Elaine Malfas:
A Guide to Web Authoring <http://peacock.mjsd1.ca/~j
using Microsoft Frontpage boulton/webdesign/tutorials
2000. Pennington: /HTML/default.htm>
Lawrenceville Press, 2001.  W3Schools Online Web
 Reference HTML Tutorials. Mar. 14, 2006
Cheatsheet. Webmonkey. <http://www.w3schools.com
Feb. 08, 2005 /html/default.asp >
<http://webmonkey.wired.c
om/webmonkey/reference/h
tml_cheatsheet/>


Introducing HTML

More Related Content

What's hot (20)

Viewers also liked (20)

Similar to Introducing HTML (20)

More from ritaester (7)

Recently uploaded (20)

Introducing HTML

Editor's Notes