Scribd
Upload
36 views32 pages

Chapter 2 - Introduction To HTML

Uploaded by

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

Chapter 2 - Introduction To HTML

Uploaded by

doghork
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy