Vous êtes sur la page 1sur 15

Informatics Computer School

CS114 Web Publishing


HTML Lesson 1
Lesson Outline
 Introduction to HTML
 Basic outline of an HTML code
 Basic Tags for Lesson 1
 Sample Codes to format text
 Lists

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

3
Basic Outline of an HTML code
<HTML>
<HEAD>
<TITLE> </TITLE>
</HEAD>
<BODY>

</BODY>
</HTML>

4
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.
5
<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>.
<B> To bold the text. Need to closed with </B>

<I> To italicize the text. Need to be closed with


</I>.

6
<U> To underline the text. Need to be
closed with </U>.
<BR> To give a line break. Need not be
closed.
<P> To give a paragraph break. Need not
be closed.
<HR> To give a horizontal line. Has
attributes like size, width and color.
<FONT> To format the font face, size and
color of the text. Need to be closed
with </FONT>.

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

8
Sample Codes to format Text
Code 1
<HTML>
<HEAD> <TITLE> My First Page </TITLE>
</HEAD>
<BODY>
<H1> This is in header size 1 </H1>
<H2> This is in header size 2 </H2>
<H3> This is in header size 3 </H3>
</BODY>
</HTML>
9
Code 2

<HTML>
<HEAD> <TITLE> My Second Page </TITLE>
</HEAD>
<BODY>
Hello Welcome to my webpage. <BR>
I like HTML. It is cool. <P>
<FONT FACE=“ARIAL” size=2 color=“BLUE”> This text is of
size 2, blue in colour and of Arial font style. The size here has a
range between 1 to 7.</FONT> <P>

10
<U> Underlined Text </U> <BR>
<B> Bold Text </B> <BR>
<I> Italicized Text </I> <BR>
<HR>
<PRE> Here the text will appear as I enter.
HTML
is
Cool </PRE>
<HR>
</BODY>
</HTML>
11
Code 3
<HTML>
<HEAD> <TITLE> My Third Page </TITLE>
</HEAD>
<BODY>
<U>Unordered List</U> <P>
<UL> My favourite subjects
<LI> Maths
<LI> English
<LI> Science
</UL>
12
<U>Ordered List</U> <P>
<OL> My favourite football clubs
<LI> Manchester United FC
<LI> Chelsea FC
<LI> Liverpool FC
</OL>

13
<U>Description List</U> <P>
<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>
14
</HTML>
15

Vous aimerez peut-être aussi