Scribd
Upload
21 views

Chapter 2 - Introduction To HTML

Uploaded by

doghork
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
21 views

Chapter 2 - Introduction To HTML

Uploaded by

doghork
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 32

Chapter # 2

Introduction to HTML

Dr. Shaukat Ali


Department of Computer Science
University of Peshawar
HTML
• Hyper Text Markup Language is a formatting language
used to develop web pages.
• HTML language tells a Web Browser how to
format/represent the document i.e. where to put text, how
big to make the words, where to place pictures etc.
• HTML is not a programming language .i.e. it does not
have variable declaration, decision control structure and
loop.
• But, HTML is a language; as it has certain rule about
formatting the contents of a web page.
• HTML uses tags or markups to specify that how the
contents of a web page will be displayed.
Tags, elements and Attributes
• HTML uses tags or markups to specify that how the contents of a
web page will be displayed.
• A HTML tag is started with character “<“ followed by an element
and ends with character “>”. These characters are called angle
brackets.
• An element is a word that instructs to the browser that how to
format the content of the page coming after.
Example : <B>Shaukat Ali.</B>
• Element is surrounded by angle brackets.
• Attributes are the additional information about the element that is
included with the element inside the angle brackets.
• Some attributes are optional whereas come are compulsory.
• Example : <BODY BGCOLOR = “red”>, <TABLE ALIGN =
“center” >, <IMG SOURCE = “C:\\shooni\abc.jpg”> etc
Tags
• A HTML tag will be either single or paired tag:
Single Tag:
A tag that has only the opening tag but does not have the
closing tag.
Example : <HR>, <BR> etc.
Paired Tag:
A tag that has the opening as well as the closing tag.
Example : <BODY>----Some Text----</BODY>
The closing tag has the same element name but preceded
by “/”.
• HTML tag effects the contents coming between the opening and
closing tags.
• If a closing tag is missing, the browser will not report an error but
the page will not be displayed as expected.
• HTML tags can be written in both uppercase and lowercase.
• HTML tags can be nested and can be opened and closed in any
order.
• Example : <B><I>Shaukat Ali</B></I>
Benefits of HTML
• Simplicity:
HTML is a simple language. Any person can use HTML
easily to create web pages.
• Plateform Independent:
HTML works on any plateform (OS, Hardware).
HTML is text based language. Therefore HTML document
created for one type plateform can be used on different type of
plateform.
• Easy Navigation:
HTML web pages are linked together using hyperlinks. It
provides easy navigation form one page to another page.
• Attractive and Easier to Read:
HTML allows the use of graphics and animation. It delivers
richer contents and arranges the content creatively.
Limitation of HTML
• No Programming Capabilities:
HTML provides no programming capabilities.
It only provides formatted text, pictures and sounds
etc.
• Static:
HTML can only be used to create static web pages.
Creation of HTML Document
• HTML document is a file that contains tags and
informations (text, pictures) to be formatted.
• HTML file will have extension either .HTM or .HTML.
• The basic requirements to create HTML documents are:
Text Editor:
Text editor is used to write HTML commands
(tags).
Any simple text editor like Notepad or Worpad
can be used for this purpose.
Web Browser:
Web browser is used to test web pages.
Any web browser like Internet Explorer, Netscape
Communicator can be used for this purpose.
Basic Structure of a HTML Document
• HTML document starts with <HTML> <HTML>
and ends with </HTML> tags. <HEAD>
• HTML documents has TWO sections: <TITLE>
 Head Section: -------
 Head section contains tags -------
that has some control -------
information. Head Section
-------
 The text between <TITLE>
and </TITLE> tags is -------
displayed at the title bar of the </TITLE>
browser. </HEAD>
 Body Section: <BODY>
 Body section contains the ---------
actual informations (text, ---------
graphics) that is to be
displayed in the display are of --------- Body Section
the browser. ---------
 It also contains the tags for ---------
formatting the text to be </BODY>
displayed. </HTML>
Exapmle First Web Page
<BODY> Tag
• <BODY> ---- </BODY> tag contains the actual
informations to be displayed in the display area of the
browser.
• <BODY> has some attributes that will effect the whole
document:
BGCOLOR:
Specifies the background color of the web page.
BACKGROUND:
Specifies the background picture of the web page.
TEXT:
Specifies the color of text to be displayed in the
web page.
Example Attributes <BODY> Tag
Headings
• Headings are used to display different types of headings
in the <BODY> tag of HTML document.
• The opening tag for heading tag is <Hn> and the closing
tag is </Hn> where n is the size of heading and its value
can be from 1 to 6.
• The value 1 represents the largest and the value 6
represents the smallest heading size.
• Headings tag has an attribute:
ALIGN:
Specifies the alignment of the heading. The
possible values can be center, left and right. The
value left is by default.
Example Headings
Paragraphs <P> Tag
• <P> adds text to a document in such away that it will
automatically adjust the end of the lines to suit the
window size of the browser.
• Text to be displayed is written between <P> and </P>
tags.
• <P> tag also add and extra balnk line before and after the
paragraph.
• Attribute of <P> is:
ALIGN:
Specifies the alignment of the heading. The
possible values can be center, left and right. The
value left is by default.
Example <P> Tag
Line Breaks <BR> Tag
• Line break is used to decide that where the text will
break one a line or continue to the end of the window.
• Line break is used to break the current line and move the
control to the next line.
• The <BR> tag is used to end a line and it is single tag
(having no closing tag) and does not have any attribute.
Example <BR> Tag
Horizontal Line <HR> Tag
• Horizontal line <HR> tag is used to display a horizontal line in
the page to separate different areas of a web page.
• <HR> is a single tag (having no closing tag).
• <HR> tag attributes are:
ALIGN:
Specifies the alignment of the heading. The possible values
can be center, left and right. The value left is by default.
SIZE:
Specifies the size of the line in pixels. The default size is 2
pixels.
WIDTH:
Specifies the width of the line in either pixels or
percentage. The width of the line is according to the width
of the web page by default.
NOSHADE:
Turns off the shading of the line.
COLOR:
Specifies the color of the line.
Example Horizontal Line <HR> Tag
Text Formatting Tags
• Bold:
<B> tag is used to display text in bold face style.
Example : <B>Formatting make things cool.</B>
• Italic:
<I> tag is used to display text in italic style.
Example : <I>Italic text looks stylish.</I>
• Underline:
<U>tag is used to display text as underline.
Example: <U>Underline text look Prominent.</U>
• Superscript:
<SUP> tag is used to display text as superscript.
Ex: X<SUP>3</<SUP>.
• Subscript:
<SUB>tag is used to display text as subscript.
Example : H<SUB>2</SUB>O.
Example Formatting Text
<STRONG> and <EM> Tags
• <STRONG>---</STRONG> tag is an alternative to <B>--</B> tag.
• <EM>---</EM> tag is an alternative to <I>--</I> tag.
<CENTER> Tag
• <CENTER>---</CENTER> tag is used to center everything found
between them .i.e. Text, Image, Tables or any page element.
FONT<FONT> Tag
• <FONT> tag is used to specify the font name, size and color of
the text to be displayed.
• Text to be displayed is between <FONT> and </FONT>.
• <FONT> tag attributes are:
FACE:
Specifies the font of the text. Possible values are “Arial”,
“Arial Black”, “Courier” etc.
SIZE:
Specifies font size of the text. It can be from 1 to 7. The
default size is 3. The size 1 displays 8pt size, size 2
displays 10pt and so on.
COLOR:
Specifies the color of the text. Its value can either the color
name or the hexadecimal value of the color.
COLOR Example
Color Name. Hexadecimal Value.
Red. #FF0000
Green. #00FF00
Blue. #0000FF
White. #FFFFFF
Black. #000000
Gray. #808080
Dark Red. #800000
Dark Green. #008000
Yellow. #FFFF00
Example <FONT> Tag
Spaces and Character Entities
• If an HTML document has many spaces between two
words, additional spaces are removed automatically.
• If the user inserts Five spaces between two characters,
four of them will be removed automatically.
• Example: If I write <B>Hello World!</B>
It will be displayed as Hello World.
If I want more spaces, I will write it as
<B>Hello &nbsp; &nbsp; &nbsp; &nbsp;World!</B>
It will be displayed as Hello World!.
• Therefore if additional spaces are required, character
entity (&nbsp;) has to be used.
Character Entities
Entity Name. Description. Output.
&nbsp; Blank Space.
&lt; Greater Than. <
&gt; Less Than. >
&amp; Ampersand. &
&quot; Quotation Mark. "
&cent; Cent. ¢
&pound; Pound. £
&yen; Yen. ¥
&sect; Section. §
&copy; Copyright. ©
&reg; Registered Trademark ®
&times; Multiplication. ×
Example Character Entities
Preformatted Text <PRE> Tag
• Web browser normally while executing the HTML
stream back from the server ignores the carriage returns
(enter) pressed by the developer during writing text in
the web page.
• But, <PRE> tag is used to display the text as that has
been written by the programmer.
• The text to be displayed is written between <PRE> and
</PRE> tags.
Example <PRE> Tag
End of Chapter # 2.

You might also like