HTML-Part1

Subject: Web Design and Programming Lecturer: Ahmed Ali Saihood
Thi-Qar University, Collage of Computer sciences and Mathematics,
Chapter 2
Part I
HTML
Topics
a) Hyper Text Markup Language(HTML)
b) HTML TAGs
c) The structure of an HTML program
d) Text Formatting
e) Lists
f) Adding Graphics to HTML Documents
*****************************************************************
I. Hyper Text Markup Language(HTML)
 The language used to develop web pages is called HTML.
 The HTML is language interpreted by Browser.
 Web pages are also called HTML documents.
 HTML is a set of special codes that can be embedded in text to add
formatting and linking information.
 HTML is specified as TAGS in an HTML documents.
II. HTML TAGs
 TAGs are instructions that are embedded directly into a text of the
documents.
 HTML TAGs is signal to the browser that it should do something
other than just throw text up on the screen.
 HTML TAGs can be of two types:

1. Paired tags: Tags to be paired if it along with companion tag,
flanks the text for example tag is paired Tag, with its
companion causes the text between them to be bold.
2. Singular tags: it does not have companion tag for example 
tag will insert link break; this tag does not require companion tag.
III. The structure of an HTML program
Document Type <HTML> </HTML>
Title <TITLE> </TITLE>
Header <HEAD> </HEAD>
Body <BODY> </BODY>
• HTML document begins and ends with HTML tag i.e. <HTML>
</HTML>
Here <HTML> indicates the browser that it is a HTML document and
</HTML> tells the browser that HTML document is completed.
• Header Tag i.e. <HEAD></HEAD>
Header Tag does not contain any text; it only contains the Title Tag in it.
• Title tag i.e. <TITLE></TITLE>
anything written between this tag is not displayed on the screen but it is
used to identify the Webpage.
• Footer just as title can be placed in the title of the bar of the browser
window; certain information is placed on the foot of web page.
<ADDRESS>…….</ADDRESS>
• Body tag i.e.<BODY></BODY>
this is the main part of HTML document. The content which is to be
displayed on screen as webpage should be written here. Body Tag
contains the text as well as various tags but only the text will be
displayed on Webpage.

A simple example
1.<html>
2.<head>
3.<title> My First WEB PAGE </title>
4.<body>
5.HTML is Hyper Text Markup Language
6.</body>
7.<address> address </address>
8.</html>
IV. Text Formatting
 Paragraph Breaks: Paragraph Tag is used to begin a new
paragraph i.e. it tells the browser to insert a empty line and then
begin with a new line. A simple example
1.<html>
2.<head>
3.<title> My first web page </title></head>
4.<body>
5.HTML is Hyper Text Markup Language
6.HTML is Easy
7.</body>
8.</html

 Line Break : Line Break Tag as name indicates it is used to
tell the browser that the line has ended, without skipping blank
line.
 Horizontal Rule <hr>: Horizontal Rule Tag will give you a thin
black line across the page.
It has few basic elements.
1) Size: it sets length of the horizontal rule in pixels or in % of
page width.
2) Align: it aligns the horizontal rule to left, right, and center.
3) Width: It specifies the width of the horizontal rule.
Sample Program:
01.<html>
02.<head>
03.<title>Program</title></head>
04.<body>
05.Statement can be broken using line break tag
06.<hr align =left size="2" width="50%" >
07. Web Page can be divided using horizontal rule tag
08.</body>
09.</html>
 Heading:
There is tag for various headings in HTML known as Heading tag
ranging from h1 to h6 where h1 is for most important and h6 is for
least important.

Example:
01.<html>
02.<head>
03.<title> Heading Example </title></head>
04.<body>
05.<h1>Heading tag </h1>
11.</body>
12.</html>
 Text styles
Bold: display the text in boldface style. The tags used are
…...
Example is
 Computer Department
Output is
Computer Department
Italic: display text in italic, the tags used are between …..
Example:
 Italic

Output:
Italic
Underline: display text as underlined, the tags used are
 …
 Centering (text, Images, etc.):
<CENTER>……</CENTER> tags are used to center everything found
between them-text, lists, images, rules, tables and other pages elements.
 Font: Specify the font size, font face and color of text:
This is some text!
This is some text!
V. Lists
Type of Lists
1. Unordered Lists(Bullets)
An unordered list starts with the tag <UL> and ends with </UL> and
each list item starts with the tag <LI>.
Example:
<UL type=”circle”>
<li>Ahmed
<li>Abbas
<li>Ali
</UL>

2. Ordered Lists(Numbering)
An ordered list start with the tag <OL> and ends with </OL>.each list
items start with the tag <LI>
<ol type="1"> - Default-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.
Example:
<OL type=”a”>
<li>Ahmed
<li>Abbas
<li>Ali
</OL>
3. Definition Lists
The definition list values is appear within tag <DL> and </DL>.it
consist of two parts
Definition term: appears after the tag <DT>.
Definition description: appears after the tag<DD>.
Example:
<DL>
<DT>Keyboard

<DD> an input device
<DT>Printer
<DD>an output device
</DL>
VI. Adding Graphics to HTML Documents
The <img> tag defines an image in an HTML page.
The <img> tag has two required attributes: src and alt.
Note: Images are not technically inserted into an HTML page, images
are linked to HTML pages. The <img> tag creates a holding space for
the referenced image.
Tip: To link an image to another document, simply nest the <img>
tag inside <a> tags.
align top
bottom
middle
left
right
Specifies the alignment of an image according to
surrounding elements
alt Text Specifies an alternate text for an image
border Pixels Specifies the width of the border around an image
height Pixels Specifies the height of an image
src URL Specifies the URL of an image
width Pixels Specifies the width of an image
Example:
<img src="smiley.gif" alt="Smiley face" width="42" height="42">

HTML-Part1

More Related Content

What's hot

Viewers also liked

Similar to HTML-Part1

More from Ahmed Saihood

Recently uploaded

HTML-Part1