Introducing HTML

ICT11Introducing HTML

Rita Ester

2023-04-10 ©WCCS, ICT11: Introducing HTML 2

What is HTML?

Hypertext Markup LanguageSpecifies the structure of a web page:

Contents How the page is displayed

Platform independentCan be interpreted by any computer

regardless of the hardware or operating system.


How to find HTML?

Open IEOpen a web page

e.g. http://www.biblegateway.com/

Use the command View Source

Notepad opens with the HTML code of the web page

http://www.biblegateway.com/

http://www.biblegateway.com/


Tags

Example:

<p> This is a paragraph. </p>

Words/ characters in angled brackets

Opening Tag <p>

Closing Tag </p>

Enclose what has to be formatted


<head>

</head>

<html>

</html>

Structure of an HTML Document

<body>

</body>


<head>

</head>

<html>

</html>

Document Tags

<body>

</body>

<title> Document Title </title>

Content of the page

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

Smaller font

<h1> Heading 1 </h1>...<h6> Heading 6 </h6>

Define the font size Define space above and belowExample:

<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 wrapsAfter the paragraph: blank line

Break Tag <br> Line Break, like ENTER keyNo closing tag


Paragraph Alignment

Default: left alignedAttribute 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 Style

Logical Style Meaning

<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>


<table>

</table>

<tr>

</tr>

<tr>

</tr>

Tables in HTML: Example

Sugar Salt Peppper

Sucre Sel Poivre

<td> Pepper </td>

<td> Salt </td>

<td> Sugar </td>

<td> Sucre </td>

<td> Sel </td>

<td> Poivre </td>


Table Tags

<table>...</table> for the entire table

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

<td>...</td> for the cells, or columns, in each rowtable data tags


Tables for Page Layout

To design the layout structure of a web page Table without the borders showingText stays inside it‘s column borders

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>

HTML Code of the Example


Hyperlinks

Example: GOOGLEto any other Web page

Locally - in the web site, the page belongs toGlobally - on the entire Web

to text on the same pageto other documentsto e-mail

http://www.google.com/


<a href=“http://www.google.com”>

</a>

Example GOOGLE

In general<a href="URL">

name of the link</a>

GOOGLE

Links to Global Web Pages


Links to Local Web PagesPages in the same folder

Link to the homepage

<a href="index.html"> Home

</a>

Link to the last page

<a href="lastpage.html"> Go to last page

</a>

index.html

lastpage.html


Links to Email

Example<a href=“mailto:[email protected]"> Email to your teacher </a>

In general <a href="mailto:email@address">

link name </a>


Link to an Anchor Point: Example

For more informationjump to the Useful Tips Section

Useful Tips

Always use closing tags.

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

<a name=“tips”> </a>

<a href=“#tips”> </a>


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”>Last summer I travelled to

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

</a>.

</font></p>

<a href = "mailto:[email protected]"> 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”>Last summer I travelled to

<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 Graphics on Web pagesPostcards and other printsLogos

No copyrightOnline freewareClips from MSYour own digital photos


Sources Chapter 3 in: Presley,

Bruce, Beth Brown, and Elaine Malfas: A Guide to Web Authoring using Microsoft Frontpage 2000. Pennington: Lawrenceville Press, 2001.

Reference HTML Cheatsheet. Webmonkey. Feb. 08, 2005 <http://webmonkey.wired.com/webmonkey/reference/html_cheatsheet/>

Boulton, J. HTML Tutorial. Feb. 10, 2005 <http://peacock.mjsd1.ca/~jboulton/webdesign/tutorials/HTML/default.htm>

W3Schools Online Web Tutorials. Mar. 14, 2006 <http://www.w3schools.com/html/default.asp >

http://webmonkey.wired.com/webmonkey/reference/html_cheatsheet/



http://peacock.mjsd1.ca/~jboulton/webdesign/tutorials/HTML/default.htm



http://www.w3schools.com/html/default.asp

http://www.w3schools.com/html/default.asp

Introducing HTML

Technology

Transcript of Introducing HTML