Informatics Computer School CS114 Web Publishing HTML Lesson 1.

Informatics Computer SchoolCS114 Web Publishing

HTML Lesson 1

2

Lesson Outline

Introduction to HTMLBasic outline of an HTML codeBasic Tags for Lesson 1Sample Codes to format textLists

3

Introduction to HTML

•HyperText Markup Language - capability to format the appearance of text and images on a webpage.

•Need text editors (e.g. NotePad) to write HTML codes.

•The HTML codes are written within angle brackets( < > ).

•The files need to be saved as .htm or .html files.

•The saved files need to be opened using any internet browsers such us Internet Explorer or Netscape Navigator.

4

Basic Outline of an HTML code

<HTML>

<HEAD>

<TITLE> </TITLE>

</HEAD>

<BODY>

</BODY>

</HTML>

5

Basic Tags

<HTML> Beginning of an HTML code. Needs to be closed with </HTML>

<HEAD> Used to place the title and also to place JavaScript functions and META Tags. Needs to be closed with </HEAD>.

<TITLE> To place the title of the webpage. Must be closed with </TITLE>. Must be placed within the <HEAD> and </HEAD> tags.

6

<BODY> Used to place all the main codes. All other tags must be placed within this tag except for <FRAMESET> tags. Must be closed with </BODY>.

<H1> To write text with a header size 1. Must be closed with </H1>. The header values range from <H1> to <H6>.

 To bold the text. Need to closed with 

 To italicize the text. Need to be closed with .

7

 To underline the text. Need to be closed with .

 To give a line break. Need not be closed.

 To give a paragraph break. Need not be closed.

<HR> To give a horizontal line. Has attributes like size, width and color.

 To format the font face, size and color of the text. Need to be closed with .

8

<UL> To define an Unordered List. The elements will be displayed as bulleted. Need to be closed with </UL>.

<LI> To display each element within a list. Need not be closed.

<OL> To define an Ordered List, where the elements will be displayed as ordered numbers. (e.g. 1,2,3…).

<DL> To define a Description List. The other tags within this tag are <DT>, meaning Description Term, and <DD>, meaning Description Data. <DL> tag must be closed with a </DL>.

9

Sample Codes to format Text

Code 1

<HTML>

<HEAD> <TITLE> My First Page </TITLE>

</HEAD>

<BODY>

<H1> This is in header size 1 </H1>



</BODY>

</HTML>

10

Code 2

<HTML>

<HEAD> <TITLE> My Second Page </TITLE>

</HEAD>

<BODY>

Hello Welcome to my webpage. 

I like HTML. It is cool. 

 This text is of size 2, blue in colour and of Arial font style. The size here has a range between 1 to 7.

11

 Underlined Text 

 Bold Text 

 Italicized Text 

<HR>

<PRE> Here the text will appear as I enter.

HTML

is

Cool </PRE>

<HR>

</BODY>

</HTML>

12

Code 3

<HTML>

<HEAD> <TITLE> My Third Page </TITLE>

</HEAD>

<BODY>

Unordered List 

<UL> My favourite subjects

<LI> Maths

<LI> English

<LI> Science

</UL>

13

Ordered List 

<OL> My favourite football clubs

<LI> Manchester United FC

<LI> Chelsea FC

<LI> Liverpool FC

</OL>

14

Description List 

<DL> The top players in each club

<DT> Manchester United

<DD> Beckham, Giggs, Cole, Stam, Barthez, Yorke, Keane.

<DT> Liverpool

<DD> Owen, Heskey, Fowler.

<DT> Arsenal

<DD>Bergamp, Kanu, Henry, Seaman, Adams.

</DL>

</BODY>

</HTML>

Informatics Computer School CS114 Web Publishing HTML Lesson 1.

Documents

Transcript of Informatics Computer School CS114 Web Publishing HTML Lesson 1.