HTML Tutorial

 Hyper Text Markup Language
 A markup language designed for the creation
of web pages and other information viewable
in a browser
 The basic language used to write web pages
 File extension: .htm, .html

 If we have some text e.g. “This is my first day
of work, I’m so excited!”
 If we want to display the Text as :
“This is my first day of work, I’m so excited!”
 Then we need to mark “first day of work” as
Bold.

“This is my first day of work, I‟m so
excited!”

To be marked in Bold letters.

“This is <B>first day of work,</B> so
my I‟m
excited!”

Result is :

“This is my first day of work, I‟m so
excited!”

1. Open Notepad
2. Click on File -> Save as…
3. In the File name pull-down box, type in
webpage.html
4. Click on Save
5. Type in content for your file
6. Once you finished the content, click on File -
> Save

Select “All Files”
from the “Save as
type” drop down list
box.

 There are 3 ways to view the web page
generated by the HTML file.

Select the location of the HTML file
(Where it is stored on your PC)

Select “All Files” option from the “Files of Type”
Drop Down Menu.

Select the required HTML file from the list of all
files in that location.

Click on the Open button after selecting the file.

The Web Page appears
according to the HTML
formats provided.

 Open any browser e.g. IE, Mozilla Firefox, Opera
, Netscape Navigator etc.
 Click Open -> Browse to the location of the File.
 Select the file and click Open.

 Go to My Computers.
 Navigate to the actual
location of the HTML
file.
 Select the HTML file.
 Double click to open it.

 We use HTML tags to mark the elements of a
file for the browser, in other words, we use
tags to denote the various elements in an
HTML document. HTML tags consist of a left
angle bracket (<), a tag name, and a right
angle bracket (>). Tags are usually paired
(e.g., <H1> and </H1>) to start and end the
tag instruction. The end tag looks just like the
start tag except a slash (/) precedes the text
within the brackets.

 For example: <b>, <font>,<title>, <p> etc.
 Tag usually goes with pair: an open tag (<b>) and
an end tag (<b>)

Effect Code Code Used What It Does
Bold B <B>Bold</B> Bold
Italic I <I>Italic</I> Italic
 Single tag: <hr>,<br>
 Tags are NOT case sensitive

 Each HTML tag has certain additional
options for providing more information to
the final output.
 These options are called ATTRIBUTES.
 E.g. :
<BODY BGCOLOR=“Red”>…..</BODY>
 Here BODY is the Tag and BGCOLOR is the
Attribute.

<html>
<head>
<title> Page Title Goes Here </title>
</head>

<body>
content goes here
</body>
</html>

<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>

<BODY>
Today is my first day at my new job, I’m so
excited!
</BODY>
</HTML>

For aligning the text towards
the center of the web page.
For aligning the text towards
the left of the web page.
For aligning the text
 <center>….Text….</center> towards the right of the
For applying BOLD font style
web page.
 <left>….Text….</left> applying ITALIC font style
For
to the enclosed text.
 <right>….Text….</right>the enclosed text.
to
For applying Underline font
 <B>….Text….</B> style to the enclosed text.
 <I>….Text….</I>
 <U>….Text….</U>

 The heading tag is used to format the
enclosed text as large bold characters for
displaying the heading of the web page
content.

For Example 

This is the application of <h1>….</h1>
tag on the text.

 There are 6 levels of the heading tag :
<h1>……….Text…………</h1>
<h2>……….Text…………</h2>
<h3>……….Text…………</h3>
<h4>……….Text…………</h4>
<h5>……….Text…………</h5>
<h6>……….Text…………</h6>

 Each level of the heading tag formats the
enclosed heading text with different font
sizes beginning from the largest <h1> to
<h6>.
 We can also apply the various formatting tags
on it too.

<HTML>
<HEAD>
<TITLE>My First Web Page</TITLE>
</HEAD>
<BODY>
<h1>My First Day of Work!</h1>
Today is my first day at my new job, I’m so
excited!
</BODY>
</HTML>

 Hyper Text Markup Language
 Web authoring software language
 Specifically created to make World Wide Web
pages
 Created by Tim Berners-Lee in 1993 from
SGML

 BGCOLOR

 Specifies a background-color for an HTML page.

<body bgcolor="#000000">

<body bgcolor="rgb(0,0,0)">

<body bgcolor="black">

Using the Color Code : „#000000‟
or „RGB(0,0,0)‟ or „black‟ gives
the black color in the background.

Method I -- Simple Language Codes

• Using the name of the color
: e.g.
Red, Black, Blue, Yellow, Pink
, Orange etc.

Orange color in the
background.

<html>
<head>
<title>My First Web Page</title>
</head>

<body bgcolor=“Orange">
<h1>My First Day at Work!</h1>
</body>
</html>

Method II -- Hexadecimal Codes

• Using any arbitrary combination of
alphabets and numbers preceded by a „#‟
symbol.

• Like : <body bgcolor = “#abc123”>

A random(green) color in the
background.

Method III -- Using RGB function

• Using the RGB() function in the following
manner : RGB(r,g,b) where :
r = red color component
g = green color component
b = blue color component

• Example : <body bgcolor = rgb(3,4,5)>

A random(violet) color in the
background.

 Background Attribute in the Body tag.

 Specifies a background-image for a HTML page
<body background="clouds.gif">
<body
background="C:WindowsFeatherTexture.bmp">

Some simple tips :

Step 1
• Search for some pictures available on your PC.

You can provide the image
type (*.jpg,*.gif,*.bmp,*.png)
etc. to narrow your search.

Select any image
and browse to its
location.

Copy the actual location of the
image.

The location copied is :
“C:Documents and Settingsnew
userMy DocumentsMy Pictures”

Select and copy the
filename from the
Properties Dialog Box and
check its type also.

The Complete path to the image is :
“C:Documents and Settingsnew userMy DocumentsMy
PicturesGiraffe.jpg”

Background image is
applied at the back

HTML Tutorial

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to HTML Tutorial

Similar to HTML Tutorial (20)

Recently uploaded

Recently uploaded (20)

HTML Tutorial