HTML
I suggest that you read the complete article. So, that you can learn how to create a website using HTML.
HTML TAGS
HTML tags are formed with a keyword enclosed between the angle brackets (<and>). An HTML text is tagged with different tags for different purposes. Each tag has its specific job to do.
There are two types of HTML tags: 1.Container tags, 2.Empty tags.
The tags which are used in a pair, i.e., the tags which have a starting as well as ending tag are called container tags. The ending tag is same as that of opening tag except that it is preceded by a forward slash (/), e.g., <HTML>.....</HTML> is a container tag. On the other hand the tags which do not have an ending tag are called Empty tags, e.g., <BR>or<HR> tags.
ATTRIBUTES
Attributes are the special words used inside the tags to control the behavior of a tag. They provide extra information to the web browser about how to apply the tag. Attributes are always placed in the opening tag.
e.g., <FONT FACE="ARIAL" SIZE="2" COLOR="Green">
Attributes Value
STRUCTURE OF THE HTML DOCUMENT
Each HTML document begins with <HTML> tag and ends with </HTML>. Within these tags HTML document is divided in two parts, i.e., HEAD and BODY. Thus, the basic structure of an HTML document is
<HTML>
<HEAD>
<TITLE> Title of your page </TITLE>
</HEAD>
<BODY>
.....................................................................................................................
All the stuffs that appears in the web browser window is placed in this section.
.....................................................................................................................
</BODY>
</HTML>
THE BODY TAG
Body tag can be used to set the background color, text color, background picture, left margin, top margin, etc. of your web page. By default your web page is created on a white background with text in black color. To change the background color of the page, you can use bgcolor attribute like this:
<BODY bgcolor = "BLUE">
With this BODY tag the background color of your web page will be in blue color.
Using Picture As A Background:
To use some picture instead of color in the web page background, you can use the background attribute like this:
<BODY background = "Location of file with extension">
For Example: C:\My document\My picture\photo2.jpg
Changing Text Color:
To change the default text color from black to something else, you can use the text attribute like this:
<BODY text = "White">
With this the text you will add to your web page will appear in white color.
NOTE
You can use only one attribute among bgcolor and background at a time in the BODY tag.
CREATING HEADINGS
To create the titles or the subtitle of the new section of your web page, you can make use of <Hn> tag, where n is a number ranging from 1 to 6. <H1> is the largest heading tag which is used to give highest level of heading and <H6> is the smallest heading tag to give lowest level of heading.
Syntax for <Hn> command is
<Hn>...Title text...</Hn>
For Example The following HTML code:
<H1>First Level of Heading</H1>
<H2>Second Level of Heading</H2>
<H3>Third Level of Heading</H3>
<H4>Fourth Level of Heading</H4>
<H5>Fifth Level of Heading</H5>
<H6>Sixth Level of Heading</H6>
will produce the following output:
You can align the headings to left, right or center and using ALIGN attribute in <Hn> tag.
e.g. <H1 Align = "Center">Heading Text</H1>
will display the heading text in the center of web page.
HORIZONTAL RULE (<HR>) TAG
As you know <HR> tag is used to display a horizontal line across the web page. In case you want to change the size, thickness, color or alignment of horizontal rule, you can use its following attributes:
SIZE (in pixels): To change the thickness of line.
WIDTH (in percentage): To change the size of the line.
COLOR: To change the line color.
ALIGN: To change the alignment in case the line is smaller than page width.
For Example:
<HR size= "10" WIDTH="50%" COLOR="Green" ALIGN="Center">
will display the horizontal rule with a thickness of 10 pixels having size half of the width of the page in green color placed in the center of the page.
Text Formatting Tags
HTML offers various text formatting tags which can be used to give text effects that are available with a word processing software like Bold face, Italic, Underline or to change the font, font size, color, etc.
The Bold (<B>) Tag:
You can give the bold face effect to the text by enclosing it between the <B> tag.
For Example, <B> This Text is in bold face </B> will display the enclosed text with bold letters.
The Italic (<I>) Tag:
To give the italicized effect to the text by enclosing it between the <I> tag.
e.g., <I> This text is in italicized mode </I>
will display the enclosed text with Italics effect.
The Underline (<U>) Tag:
To underline the important text of your document, you can make use of <U> tag.
e.g., <U> This is an underlined text </U>
will display the enclosed text underlined.
The Center (<CENTER>) Tag:
Center tag is used to place the enclosed text into the center on the web page.
e.g., <CENTER> This text is in the center of page </CENTER>
The enclosed text will appear in the middle of page along the page width.
Note
You can also nest the above tags to apply two or more text formatting simultaneously to an enclosed text.
For Example: <B><I><U><CENTER> Text Formatting </CENTER></U></I></B>
|_________________________|
|________________________________________|
|_______________________________________________|
|______________________________________________________|
Nested Tags
The above code will display the enclosed text in the center on a page with Bold Face, Italics and Underlined effect.
The Font Tag:
By default HTML document uses Times New Roman font to display the text in the document. But, at times you may want to just make a few words or lines to appear in different font or with different font size or color. FONT tag offers you the facility to make all such formatting in your document.
Changing the Font Face:
The Font tag uses the FACE attribute to change the default font to that you like
e.g., <FONT FACE="COMIC SANS">...text...</FONT>
will change the font of the enclosed text to Comic Sans.
Note
You can also use more than one font name in the FACE attribute, so that in case one font is not available, the text can be display by the next font. The syntax is:
<FONT FACE="Font name 1, Font name 2...">...text...</FONT>
Changing Font Size:
The text size in an HTML document can be changed using size attribute in the FONT tag. The syntax to use size attribute is:
<FONT SIZE="n">text</FONT>
where n is a number ranging from 1 to 7. Number 1 represents the size with smallest font size whereas 7 is the largest font size. By default the value of n is 3,i.e., the default font size is 3
Changing Text Color:
BODY tag allows you to change the default text color for all the text on the page. in case you want to change the color of specific text, you can use COLOR attribute of the FONT tag to change the color of enclosed text. The HTML code is:
<FONT COLOR="color">
For example, <Font COLOR="Mahroon">...text...</FONT>
will display the enclosed text only in mahroon color.
Changing the Default Font:
As you know HTML displays the text in the web browser with Times New Roman as default font and 3 as default size. If you want to change these default setting, you can use BASEFONT tag as:
<BASEFONT FACE="Font mane" Size="n">
where Font name is the name of that you want to use as default font and n is a number from 1 to 7.
For Example, <BASEFONT FACE="Arial" Size="5">
will set the default font as Arial with size 5.
Strikeout Text:
In some situations, you want to strikeout some text on your web page to show corrections or revisions. This can be done the HTML document using <STRIKE> tag as
<STRIKE>...TEXT...</STRIKE>
For Example <STRIKE> Strikeout </STRIKE>
will display the text as:
INSERTING IMAGES TO THE WE PAGE
Images or pictures are the components of a good web page. Images make your web page more attractive and they add visual appeal to the page. They can convey the message in a better manner along with the text.
Various type of image file formats supported by the web browser are GIF (Graphical Interchange Format), JPEG (Joint Photographic Experts Group), PNG (Portable Network Graphics).
HTML offers <IMG> tag to insert images in a web page. To specify the location of image file which is to be inserted, the SRC or SOURCE attribute is used in the IMG tag. The syntax of <IMG> tag is
<IMG SRC="URL or Full path of the picture file with its name">
e.g., <IMG SRC="C:\My Documents\My Pictures\flower.gif">
will insert the image file flower.gif which is stored at the location, C:\My Documents\My Pictures.
The Height and Width Attributes:
To change the size of the image, you can use HEIGHT and WIDTH attributes in the <IMG> tag. The value of these attributes can be specified in pixels value or the percentage of the height or width of the browser window.
e.g., <IMG SRC ="C:\My Documents\My Pictures\flower.gif" HEIGHT= "50%" WIDTH= "50%">
will display the above picture like this
Adding Image Border:
If you want to add border around the inserted picture you can make use of BORDER attribute in the <IMG> tag. The thickness of the border can be specified in pixels. The syntax for using BORDER attributes is:
<IMG SRC = "URL or Full path of the picture file with its name" BORDER="n">
where n is the border thickness specified in pixels.
For Example:
The above HTML code with border attributes as:
<IMG SRC ="C:\My Documents\My Pictures\flower.gif" HEIGHT= "50%" WIDTH= "50%" BORDER="10">
will display the image like this
Align the Images:
The images can be alinged to the left or right side of the screen using ALIGN attribute. In case of left alinged image, text flows to the right of the image and in case of right alinged image, text flows to the left side of the image. For example, in the above <IMG> tag adding attribute like this:
<IMG SRC ="C:\My Documents\My Pictures\flower.gif" HEIGHT= "50%" WIDTH= "50%" BORDER="10" ALIGN= "RIGHT">
will produce the output in the web browser.
HYPERLINKS
As you know WWW (World Wide Web) is a collection of millions of web pages, connected with each other through links available on the web pages in the shape of images, buttons or text, etc. By clicking on these links you can move from one page to another. These links are called Hyperlinks. Now, we will learn how to create links between the pages using Hyperlinks.
The Anchor (tag) <A>:
HTML has anchor tag <A> which uses HREF attribute to specify the name of the web document to be linked. It is a container tag which encloses the text or image, to be used as a link on the page.
The syntax for using <A> tag is:
<A HREF="Name Of HTML Document">...text or image...</A>
| |
HTML document to be Hypertext which when clicked
linked with complete path opens the linked document
For Example the following HTML code:
<A HREF= "C:\My Documents\Mypage.html">Click Here</A>
will display the enclosed text as
Click Here
The linked text appears in a different color. When you bring the mouse pointer on the Hyperlink it turns to a hand shape. Clicking once the left mouse button opens the linked document in the web browser window.
You can also use the <A> tag to link with the other websites or webpages on the internet by specifying their URL address as the HREF value.
For example, The following HTML code:
<A HREF= "http://www.google.co.in">Google India</A>
will display the text Google India as hyperlink which when clicked will open the google search engine web page if your terminal is connected with the Internet.
Using Image As A Hyperlink:
If you want to use some picture in your web page as a hyperlink, you can use the <A> tag as follows:
<A HREF="Name with location or URL of HTML document"><IMG SRC="Image file"></A>
Here in this code image file is the picture file added to the web page, which on clicking will open the HTML document or URL you have specified in the <A HREF> tag.
Identifying the Links:
A web page can have many links in it. The links by default are shown in blue color. When a link is clicked to open the connected web page, the color of the link changes to purple, so as to mark the link as visited link. This feature helps you to keep the track of visited links which avoids the wasted efforts of multiple visits. If you want to change the color of unvisited and visited links, you can use LINK and VLINK attributes in the <BODY> tag like this:
<BODY LINK="Color name1" VLINK="Color name2">
where color name 1 is the color of hyperlink unvisited and color name 2 of the visited hyperlink.
For example,
<BODY bgcolor="Mahroon" Text="White" LINK="GREEN" VLINK="Yellow">
will display the normal text in white color on Mahrooon background and links in green color. Once you will click on a link to visit the linked page, the linked text will change to yellow color.
I hope you will read the complete article.
Please comment if you are not able to understand HTML or facing any problem in coding.
0 comments:
Post a Comment