Vous êtes sur la page 1sur 24

WHAT IS HTML? HTML stands for Hypertext Mark Up Language. HOW TO SAVE A HTML DOCUMENT?

Step 1. After writing your HTML command in notepad click on “File” in Menu Bar.

Step 2. Then click on “Save As” option.

Step 3. Write the name of the HTML page and add “.html” to its end (without quotes) and the drop down list below saying “Save as type” select “All Files” and click on “Save” button.

HOW TO OPEN HTML DOCUMENT?

HTML Document cab be opened by double-clicking on it and the default browser windows will open and you will be able to see your HTML page.

HTML BASIC STRUCTURE:

<HTML> <HEAD> <TITLE> MY HTML PAGE </TITLE> </HEAD> <BODY> THE BODY OF THE PAGE </BODY> </HTML>

<BODY> tag attributes

1. BGCOLOR

BGCOLOR is used to set the background colour of the HTML page.

<BODY> tag attributes 1. BGCOLOR BGCOLOR is used to set the background colour of the HTML
2. TEXT TEXT attribute is used to specify the text colour of the HTML page.
2. TEXT
TEXT
attribute is
used to
specify the
text colour
of the
HTML
page.
Attributes for setting the text links, visited links and active link3s. colour in the html page.
Attributes for setting the text links, visited links and active link3s. colour in the html page.

Attributes for setting the text links, visited links and active link3s. colour in the html page.

  • Link Attribute is used to set the colour of the link in the HTML page.

<BODY LINK=GREEN>

  • ALink attribute is used to set the active link’s colour in the HTML page.

<BODY ALINK=YELLOW>

  • VLink attribute is used to set visited link’s colour in the HTML page.

<BODY VLINK=BLUE>

  • 4. Attributes for setting page margins

    • Left margin attribute: This attribute is used to set the left margin of the HTML page. The value entered is in pixels.

<BODY LEFTMARGIN=40>

  • Right margin attribute: this attribute is used to set the right margin of the HTML page. The value entered is in pixels.

<BODY RIGHTMARGIN=60>

  • Top margin attribute: This attribute is used to set the top margin of the page. The value entered is in pixels.

<BODY TOPMARGIN=50>

  • 5. Attribute for setting background image

Background attribute is used to set an image as the background for an HTML page.

<BODY BACGROUND=”C:/IMAGE.JPG”> Or

If the image is the same folder where the html page is located simply enter the following code:

<BODY=IMAGENAME.PNG> See the following example:

<BODY LEFTMARGIN=40> Right margin attribute: this attribute is used to set the right margin of the
Text formatting elements in HTML TAG TYPE FUNCTION ATTRIBUTES FONT CONTAINER Used to change SIZE, FACE,

Text

formatting elements in HTML

TAG

TYPE

FUNCTION ATTRIBUTES

FONT

CONTAINER

Used to change

SIZE, FACE,

 

size, colour and style of text

COLOR

BASEFONT

CONTAINER

Used to set a basic size for the font which the browser will use to display the HTML page.

SIZE

BR

EMPTY

Used to insert a line breaks

NONE

CENTER

CONTAINER

Center any text that is written within it

NONE

H1 to H6

CONTAINER

Used as heading element with various sizes 1-6

ALIGN

P

CONTAINER

Used to define a paragraph of text on the web page

ALIGN

HR

EMPTY

Used segregate different parts of the text from one another with help of a horizontal line

SIZE, WIDTH, COLOR, ALIGN, NOSHADE

COMMENT

CONTAINER

Comments are text that are written into the HTML page, but are ignored by the browser and hence not displayed.

NONE

B

CONTAINER

Display text in bold face

NONE

I

CONTAINER

Display text in italics

NONE

U

CONTAINER

Underlines the enclosed text

NONE

SUP

CONTAINER

Display text in superscript

NONE

SUB

CONTAINER

Display text in subscript

NONE

Using FONT Tag

Font tag is a very convenient tag used to change the size, colour and style of the text, especially when different segments of text require different looks.

<FONT>This is font tag</FONT> Font tag attributes:

COLOR - <FONT COLOR=GREEN>THE TEXT COLOR IS NWO GREEN</FONT> FACE - <FONT FACE=ARIAL>THE TEXT’S FONT IS ARIAL</FONT> See the coding below:

COLOR - <FONT COLOR=GREEN>THE TEXT COLOR IS NWO GREEN</FONT> FACE - <FONT FACE=ARIAL>THE TEXT’S FONT IS
COLOR - <FONT COLOR=GREEN>THE TEXT COLOR IS NWO GREEN</FONT> FACE - <FONT FACE=ARIAL>THE TEXT’S FONT IS

BASEFONT Tag

Using

<BASEFONT> tag is used to set the basic size for the font, the browser will use to display your HTML page.

  • 1. A single value ranging from 1 to 7

e.g. <BASEFONT size=4>

  • 2. A relative value by placing a plus or minus sign before the value

<BASEFONT SIZE=+4> The base font size will increase the existing size by 4 resulting in a total font size of 7.

<BASEFONT SIZE=-2> The base font size will decrease the existing size by 2 resulting in a total font size of 5.

Using BR Tag

The <BR> tag is used to give break between the lines or words in a HTML document. It gives page a neat and organised look and makes it visually appealing.

The <BR> tag is used to give break between the lines or words in a HTML

Try this code:

The <BR> tag is used to give break between the lines or words in a HTML

Using <CENTER> tag

<CENTER> tag is used to set text or image in centre align. It is a container element so the text entered within this tag gets center aligned.

Using <CENTER> tag <CENTER> tag is used to set text or image in centre align. It
Using <CENTER> tag <CENTER> tag is used to set text or image in centre align. It

Using <H1> to <H6> tags

These tags are known as heading tags. HTML has six level of heading tags from <H1> to

<H6>.

They are used to a text as heading in html document. For e.g. <H1> This is heading</H1> Align attribute is used to set the alignment of the heading existing in heading tags.

For e.g. <H1 align=right>The heading alignment is right</h1>

Using <p> tag

<p> tag is used to specify the paragraph in the document and also to set the alignment of the different paragraphs.

Syntax: <P ALIGN=CENTER>THE PARAGRAPH HERE</P> <P ALIGN=LEFT>THE PARAGRAPH HERE</P> <P ALIGN=RIGHT>THE PARAGRAPH HERE</P>

Using <HR> tag <HR> tag is used to create a horizontal link in the html document. It is a empty element.

Attributes:

  • 1. SIZE – SIZE attribute is used to set the size (broadness) of the horizontal line.

Syntax - <HR size=50>

  • 2. Width – This attribute is used to set the width of the horizontal line.

Syntax - <HR WIDTH=60%>

  • 3. Colour – This attribute is used to set the colour of the horizontal line.

Syntax - <HR COLOR=GREEN>

Using comment tag

Comment tag is creates a text which is not visible in the browser but can be seen in the HTML code.

There are two ways of creating a comment in HTML:

  • 1. Using <COMMENT> tag

Syntax - <COMMENT>THIS IS A COMMENT</COMMENT>

  • 2. Using <!—and tab

Syntax - <!—This is also a comment

Using <B>, <U>, <I>, <SUP>, <SUB> tags

  • 1. <B> tag is used to set the text in bold.

Syntax - <B>THE TEXT HERE IS BOLD.</B>

  • 2. <U> tag is used to underline the text.

Syntax - <U>The text is underlined</U>

3.

<I> tag is used to italicize the text.

Syntax - <I>The text here is italicized</I>

  • 4. <SUP> tag is used to set the text in superscript.

Syntax – X<SUP>2</SUP>Y

  • 5. <SUB> tag is used to set the text in subscript.

Syntax – H<SUB>2</SUB>O

Creating Lists in HTML

TAG

TYPE

TITLE

ATTRIBUTES

UL

Container

Tag is used to create unordered lists. <LI> tag has to be used inside this.

TYPE

OL

Container

Tag is used to create ordered lists. <LI> tag has to be used inside this.

TYPE, START

DL

Container

Used for terms and their definitions.

-

Type of lists:

Unordered lists are bulleted lists like:

Computer components are:

  • Processor

  • Motherboard

  • Graphics Card

  • HDD Ordered Lists are numbered lists like:

Computer components are:

  • 1. Processor

  • 2. Motherboard

  • 3. Graphics Card

  • 4. HDD

Definition lists are mostly used for terms and their definitions HTTP Hypertext Transfer Protocol

FTP File Transfer Protocol

Creating unordered lists

<UL> tag is used to start creating unordered lists. <LI> is used to create a new list item.

Creating unordered lists <UL> tag is used to start creating unordered lists. <LI> is used to

Syntax –

& square. Attributes of <UL> tag: TYPE – is used to set the type of bullets

& square.

Attributes of <UL> tag:

TYPE – is used to set the type of bullets in the lists. Their are four types of bullets available disc, circle

Syntax –

<UL TYPE=disc> <UL TYPE=circle>

& square. Attributes of <UL> tag: TYPE – is used to set the type of bullets

<UL TYPE=square>

Creating ordered lists

<OL> tag is used to start creating ordered lists. <LI> is used to create a new list item.

Creating ordered lists <OL> tag is used to start creating ordered lists. <LI> is used to

Syntax –

Attributes of <OL> tag: 1. TYPE is used to set the type of numbered lists. Type

Attributes of <OL> tag:

  • 1. TYPE is used to set the type of numbered lists.

Type Values

Style of Numbered Lists Sample Output

I

Uppercase Roman Numerals

I, II, III

i

Lowercase Roman Numerals

I, ii, iii

1

Arabic Numerals

1, 2, 3

A

Uppercase Alphabets

A, B, C

a

Lowercase Alphabets

a, b, c

Syntax –

<OL TYPE=I>

<OL TYPE=i> <OL TYPE=1> <OL TYPE=A> <OL TYPE=a>

2.

START attribute lets the user set the starting numeral or alphabet valuein the numbered or alphabet value lists.

Syntax –

<OL type=A start=5> <li>Green <li>Yellow <li>Blue </ol>

2. START attribute lets the user set the starting numeral or alphabet valuein the numbered or

Note- The start attribute has to be always specified numeral value if it is a alphabetical ordered list also.

Nesting of lists:

Observe the following code you will understand how nesting can be done in ordered as well as unordered lists.

The above method is same for unordered lists. Try yourself. Creating Definition Lists Definition lists are

The above method is same for unordered lists. Try yourself.

Creating Definition Lists

Definition lists are mostly used for displaying Definition, Terms and their Definition descriptions. They are not list of the items. So, as the name suggests there are three tags involved in this combination - <DL> for Definition Lists, <DT> for Definition Terms and <DD> for Definition Description.

Syntax:

<HTML><HEAD><TITLE>DL</TITLE><BODY> <DL>

<DT>Term1

<DD>Definiation1

<DT>Term2

<DD>Definiation2

</DL></BODY>

</HTML>

Compact attribute of <DL> tag If the definitions are short, one can display it on the

Compact attribute of <DL> tag

If the definitions are short, one can display it on the same line rather than have a line break. This is main purpose compact lists.

Syntax:

<HTML><HEAD><TITLE>COMPACT</TITLE><BODY> <DL COMPACT> <DT>HTTP <DD>HYPERTEXT TRANSFER PROTOCOL <DT>FTP <DD>FILE TRANSFER PROTOCOL </DL></BODY></HTML>

Observe the coding.

GET THE SECOND VOLUME IT’S FREE TO LEARN HYPERLINKING, INSERTING IMAGE & MARQUEE.