ICT Grade 11 Introduction To HTML

Unit Three
Hyper Text Markup Language
(HTML)
Hyper Text Markup Language (HTML)
 HTML stands for Hyper Text Markup Language,
and it is the most widely used language to write
Web Pages. HTML is the building block for web
pages.
What is an html File?
i. HTML is a format that tells a computer how to
display a web page.
ii. An HTML file is a text file containing small
markup tags.
iii. The markup tags tell the Web browser how to
display the page.
iv. An HTML file must have an htm or html file
extension.
Prerequisites:
 You will need a text editor, such as Notepad and
you need an Internet browser, such as IE ,
Firefox, Google chrome, Opera Mini or Safari.
What are HTML tags?
i. HTML tags are used to mark-up HTML elements.
ii. HTML tags are surrounded by the two
characters < and >.
iii. HTML tags normally come in pairs like <b> and
</b>.
iv. The first tag in a pair is the start tag; the
second tag is the end tag.
v. HTML tags are not case sensitive; <b> means
the same as <B>.
Tag Description
 HTML is a markup language and makes use of
various tags to format the content. These tags
are enclosed within angle braces <Tag Name>.
Except few tags, most of the tags have their
corresponding closing tags. For example,
<html> has its closing tag</html> , <body>
tag has its closing tag </body> and <b> tag
has </b> closing tag etc.
Tag Description
 <html> This tag marks the start of an html
document.
 <head>...</head>This tag represents the
document's header which can keep other HTML
tags like <title>, <link> etc.
 <title> The <title>tag is used inside the
<head> tag to mention the document title.
 <body> This tag represents the document's
body which keeps all the contents of a web
page- text, images, sound etc.
 <Hn> This tag represents the heading tags of
different sizes. Where n is the number start
from 1…6 Like <H1>,<H2>……..<H6>
Tag Description
• <center> This tag is used to write a line or text
in center
• <p> This tag represents a paragraph
• <p align=left/right/center>This tag is used to
write paragraph alignment in html.
• <br> This tag is used to insert new line or insert
enter in html.
• Bold, Italics, Underline :<b> tag is used to make
a text bold in html.
• <i>tag is used to make a text italics in html.
• <u>tag is used to make a text underlined in
html.
Tag Description
 <body bgcolor ="yellow" > tag is used to
change the background color of an html page
and
 <body text=”red”> changes text color in to red.
 <font> tag is used to add style, size, and color
to the text on your website. You can use a
<basefont> tag to set all of your text to the
same size, face, and color. The font tag is having
three attributes called size, color, and face to
customize your fonts.
 <Font color= red> makes text color to red
 <Font size=“18”> makes text size to 18
 <Font face=“Bookman Old Style”
How to create webpages?
1. Click Start-> All Programs->Accessories. Open
notepad and type the code given below.
Example :-
<head>
<title>My First Webpage </title>
</head>
<center><h1> Webpage </h1></center>
This is my first homepage.
<b>This text is bold</b>
<i> This line is in italics text. </i>
<u> This line is in underline text. </u>
<br>This is the 1st line. <br>This is the 2nd line.
The output of our program is :-
Paragraph alignment in html
</title>
</head>
<body>
This is an html document.
<p align=left>This paragraph aligned to the left.
</p>
<p align=right>This paragraph aligned to the
right. </p>
<p align=center>This paragraph aligned to the
center. </p>
</body>
</html>
Heading Tags
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
Break Tag
<head>
<title>Line Break Example</title>
</head>
<body>
<h1>
<p>Hello<br />
You delivered your assignment on time. <br />
Thanks<br />
Dawit.</p>
</h1>
</body>
Centering tag
<head>
<title> Centering Content Example</title>
</head>
<body>
<h2>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
<h2>
</body>
Horizontal Lines
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<h2>
<p>This is paragraph one and should be on
top</p>
<hr />
<p>This is paragraph two and should be at
bottom</p>
</h2>
</body>
Setting Font Color :
• <head>
• <title>Setting Font Color</title>
• </head>
• <body>
• <font color="#000000">This text is in
black</font><br />
• <font color="#FFFFFF">This text is in
white</font><br />
• <font color="#FF00FF">This text is in
pink</font><br />
• <font color="red">This text is red</font>
• </body>
Lists in HTML
 HTML provides a simple way to show unordered
lists (bullet lists) or ordered lists (numbered
lists). All lists must contain one or more list
elements. Lists may contain:
 <ul>An unordered list. This will list items using
plain bullets.
 <ol> An ordered list. This will use different
schemes of numbers to list your items.
Unordered Lists
• 1. An unordered list has no specific numbering
or ordering. It starts with the <ul> tag. Each list
item starts with the <li>. Each item in the list is
marked with a bullet.
• <h2><b>Unordered List with Bullets</b>
• <p><h3> I like to drink the following: <h3>
</P>
• <ul>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul> </h2>
The type Attribute
• You can use type attribute to specify the type of
bullet you like. By default, it is a disc.
• <ul type="square"> <ul type="disc">
• <ul type="circle">
• <h2><b>Unordered List with Square
Bullets</b>
• <p><h3> I like to drink the following: <h3> </P>
• <ul type=square>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul> </h2>
Ordered Lists
• - An ordered list can be numerical or
alphabetical in a specific order. This list is
created by using <ol> tag. The numbering starts
at one and is incremented by one for each
successive ordered element tagged with <li>.
• The type Attribute
• You can use type attribute for <ol> . By default,
it is a number. Following are possible options:
• <ol type="1"> - Default-Case Numerals.
• <ol type="I"> - Upper-Case Numerals.
• <ol type="i"> - Lower-Case Numerals.
• <ol type="A"> - Upper-Case Letters.
• <ol type="a"> - Lower-Case Letters.
Ordered List with Default-Case Numerals
• <h2><b>Ordered List with Default-Case
Numerals </b></h2>
</P>
• <ol>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul>
Ordered List with Upper-Case Numerals
• <h2><b>Ordered List with Upper-Case
Numerals </b></h2>
</P>
• <ol type="I"> <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul>
The start Attribute
You can use start attribute for <ol> tag to specify
the starting point of numbering you need.
Following are the possible options:
• <ol type="1" start="4"> - Numerals starts with
4.
• <ol type="I" start="4"> - Numerals starts with
IV.
• <ol type="i" start="4"> - Numerals starts with
iv.
• <ol type="a" start="4"> - Letters starts with d.
• <ol type="A" start="4"> - Letters starts with D.
Ordered List that starts with 4.
• <h2><b> Ordered List with Upper-Case Letters.
that starts with 4. </b></h2>
</P>
• <ol type="A" start="4">
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul>

ICT Grade 11 Introduction To HTML

Uploaded by

Copyright:

Available Formats

You might also like

ICT Grade 11 Introduction To HTML

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

ICT Grade 11 Introduction To HTML

Uploaded by

Copyright:

Available Formats

Unit Three

Hyper Text Markup Language

You might also like