HTML Tutorial

What is HTML?

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

Concept of Mark-up

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.

first day of work“This is my , I’m so

excited!”

<B>

</B>

Result is :

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

How does an HTML File Look Like

Creating a HTML File

1. Open Notepad2. Click on File -> Save as…3. In the File name pull-down box, type

in webpage.html4. Click on Save5. Type in content for your file6. Once you finished the content, click

on File -> Save

1. Open Notepad

2. Click on File -> Save as…

3. In the File name pull-down box, type in webpage.html

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

4. Click on Save

5. Type in content for your file

6. Once you finished the content, click on File -> Save

Viewing the HTML file in a Browser

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

Method 1

Go to Start -> Run

Click on Browse button.

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.

Method 2

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.

Method 3

Go to My Computers.

Navigate to the actual location of the HTML file.

Select the HTML file.

Double click to open it.

What are HTML tags?

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.

HTML Tags

For example: <b>, <font>,<title>, <p> etc.

Tag usually goes with pair: an open tag (<b>) and an end tag (<\b>)

Single tag: <hr>,<br> Tags are NOT case sensitive

Effect Code Code Used What It Does

Bold B <B>Bold</B> Bold

Italic I <I>Italic</I> Italic

HTML Tag Attributes

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 Document Structure

<html> <head>

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

<body> content goes here

</body></html>

A Sample – My First Web Page

<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>

Some Formatting Tags

<center>….Text….</center> <left>….Text….</left> <right>….Text….</right> <B>….Text….</B> <I>….Text….</I> <U>….Text….</U>

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

towards the right of the web page.

For applying BOLD font style to the enclosed

text.For applying ITALIC

font style to the enclosed text.For applying Underline font style to the enclosed text.

The Heading Tag

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.

The Heading Tag

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.

Application

<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>

What is 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

Background

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.

Using Color CodesMethod 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 code

<html><head>

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

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

</body></html>

Using Color CodesMethod 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.

HTML code

<html><head>


<body bgcolor=“#abc123"><h1>My First Day at Work!</h1>

</body></html>

Using Color CodesMethod III -- Using RGB function

• Using the RGB() function in the following manner : RGB(r,g,b) where :

r = red color componentg = green color componentb = blue color component

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

A random(violet) color in the background.

HTML code

<html><head>


<body bgcolor=RGB(150,44,100)><h1>My First Day at Work!</h1>

</body></html>

Background : Adding Images Background Attribute in the Body tag.

Specifies a background-image for a HTML page<body background="clouds.gif"> <body background="C:\Windows\FeatherTexture.bmp">

HTML code

<html> <head>

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

<body background="C:\Windows\FeatherTexture.bmp">

<h1>My First Day at Work!</h1> </body></html>

Procedure to add Background ImagesSome 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 Settings\new user\My Documents\My Pictures”

Select “Properties”.

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 Settings\new user\My Documents\My Pictures\Giraffe.jpg”

HTML Code

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

<body background= “C:\Documents and Settings\new user\My Documents\My Pictures\Giraffe.jpg” ><h1>My First Day at Work!</h1></body></html>

Background image is applied at the back

Education

HTML Tutorial