Working With HTML
Category : 7th Class
Working With HTML
Introduction
HTML stands for Hyper Text Markup Language and it is the most widely used language to design webpages. A web page is a digital page which comprises of multimedia. A group of webpages forms a website. HTML was developed with the intent of defining the structure of documents like heading, paragraphs, lists etc. HTML defines the structure and layout of a web document by using a variety of tags and attributes. When you save an HTML file, you can use either the .htm or the .html extension.
Tags
An HTML tag is a set of characters constituting a formatted command for a web page. A web page consists of various types of tags to denote the various elements in an HTML document, HTML tags consists of a left angular bracket (<), a tag name and a right angular bracket (>). Tags are usually paired (e.g., <Tag>. and </Tag>) to start and end the tag instruction. The end tag looks like the start tag except a slash (/) precedes the text within the brackets.
Attributes
Some elements may include an attribute which is additional information included inside the start tag. An attribute defines the characteristics of an HTML element. For example, you can specify the alignment of text (right, left or center) by including the appropriate attribute with the image source HTML code.
Headings
Headings are used to arrange the contents in a systematic way. HTML has six levels of headings, number 1 to 6, with 1 being the largest. Headings are typically displayed in larger and / or bolder fonts than normal body text. The first heading in each document should be tagged <H>.
Syntax
<Hn> Heading/sub-Heading </Hn>
Where n is a number between 1 and 6 specifying the level of the headings?
Some Tags in HTML
Every HTML document contains certain standard HTML tags. They are as follows:
v HTML Tag
v Head tag
v Title tag
v Body tag
HTML Tag
The HTML element tells your browser that the file contains HTML coded information. The file extension .html also indicates this on HTML document and must be used. It comes in a pair <HTML> and <HTML>
Syntax
<HTML>
________
________
</HTML>
HEAD Tag
The Head element identifies the first part of your HTML coded document that contains the title. It contains title tag. It also comes with opening and closing tags <HEAD> and </HEAD>
Syntax
<HTML>
<HEAD>
_________
_________
</HEAD>
</HTML>
Title Tag
The Title tag contains your document title and identifies its content in a global context. The title is typically displayed in the title bar at the top of the browser window, but not inside the window. The title is also what is displayed on someone's hotlist or bookmark list, so choose something descriptive, unique and relatively short. A title is also used to identify your page for search engines.
Syntax:
<HTML>
<Head>
< Title >
DESCRIBE YOUR TITLE
</Title>
</Head>
</HTML>
Body Tag
The Second and largest part of your HMTL document is the body, which contains the content of your document (displayed within the text area of your browser window). The tags explained below are used within the body of your HTML document.
Syntax:
<HTML>
<Head>
<Title>
MY FIRST WEB PAGE
</Title>
</Head>
<Body>
________
________
</Body>
</HTML>
Paragraphs
Paragraphs may consist of a single sentence or more than one sentence including punctuation marks and blank space. Paragraph is represented by <P> .......</P> tags. End tag </P> is not essential to add as the browsers assumes the start of paragraph when <P> tag is given.
Line Break
This tag is used to change lines with no extra blank spaces. It can be used for short lines of text such as postal addresses. This tag is represented by <BR>.
Example:
National Informatics Centre <BR>
Chanakya Puri <BR>
New Delhi <BR>
Horizontal Rule
The HR (Horizontal Ruler) tag is a stand-alone, or empty document element that allows you to add horizontal rules to your web pages.
Change the height of a horizontal rule
To change the height of a horizontal rule, the size attribute value in the HR tag may be used. The value you set is the rule's height, or thickness in pixels.
Attributes of HTML:
|
Attribute |
Description |
Syntax |
|
Width |
To display the horizontal rule of specified width in pixels or percentage. |
|
|
Size |
It changes the height or thickness of the Size horizontal rule |
|
|
Color |
To apply background color behind the Color horizontal rule. |
|
|
Align |
To set the position of the horizontal rule. It takes three values: left, right or center. Note: Align attribute effect is noticeable only if the horizontal rule width is less than the width of browser window. |
|
|
Noshade |
To display horizontal rule as flat solid bar rather than default 3D bar. This attribute is used without any value. |
Character Formatting Attributes
We use some specific formatting attributes to highlight words, phrases or entire sentences in a paragraph or in a page. Some of them are as follows ?
For example: - COMPUTER.
For example: - Computer.
For example: - Computer.
For example: - 02, 2 is in subscript form.
For example: - In a2, 2 is in superscript form.
For example: - COMPUTER.
Text Alignment
Paragraph, headings or other text can be aligned using ALIGN attribute. They can be aligned in three ways:
v Center
v Right
v Left
The syntax for this is as follows:
ALIGN = "VALUE"
Where value can be replaced with left, right or center.
Changing Font Size and Colors
You can set or change the size and colors of the font as desired. It can be done using <FONT>tag.
Specifying Font Size
To specify size of the fonts, size attribute is used with font tag. Normally fonts are in seven sizes. It can be given a number 1 being the smallest, and 7 being the largest. By default the font size is 3.
Example <Font size = "3">
Specifying Font Colors
To change font color, we use color attribute with the font tag. We can set sixteen different colors to make fonts look attractive. They are <Font Color = “AQUA”>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
And so many other
Specifying Font Face
Font face tag is used to change the font enclosed within the <font> and </font> tags.
e.g. <font face = "comic sans">
Example
<P> <Font size = 7 color = "AQUA" Face = "Comic Sans">
This is aqua color.
</Font>
You need to login to perform this action.
You will be redirected in
3 sec
