Scribd
Upload
225 views15 pages

Informatics Computer School CS114 Web Publishing: HTML Lesson 1

This document provides an introduction and overview of basic HTML tags for formatting text on webpages. It outlines common HTML tags like <HTML>, <HEAD>, <TITLE>, <BODY> and others. It then provides examples of using basic tags to change text formatting, create lists, and more. The document is intended as a lesson for beginners to learn HTML tags through explanations and sample codes.

Uploaded by

Alma Mary
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
225 views15 pages

Informatics Computer School CS114 Web Publishing: HTML Lesson 1

This document provides an introduction and overview of basic HTML tags for formatting text on webpages. It outlines common HTML tags like <HTML>, <HEAD>, <TITLE>, <BODY> and others. It then provides examples of using basic tags to change text formatting, create lists, and more. The document is intended as a lesson for beginners to learn HTML tags through explanations and sample codes.

Uploaded by

Alma Mary
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 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

You might also like