This html tutorial is best suited for beginners. This tutorials covers the basic concepts starting from creating a new html file in notepad and naming it with .html extension so that it can be opened with web browsers.
What is HTML?
HTML stands for HyperText Markup Language. Basically, it is an authoring language which is used to create documents on the World Wide Web. It describes how a set of text, images, sounds and links should be displayed in a browser. HTML is a Platform Independent Language. Platform Independent means you can write HTML code on any computer running MS Windows, Linux or UNIX. The only thing you should remember is that you should save your file as text file (ASCII).
Basic Structure of an HTML Page:
<html>
<head>
<title>You can write the title of your web page here</title>
</head>
<body>
<p> This is test paragraph.</p>
</body>
</html>
<html>
<head>
<title>You can write the title of your web page here</title>
</head>
<body>
<p> This is test paragraph.</p>
</body>
</html>
Explanation of each tag used above
1. <html> - This tag tells the browser that it is a html page and the html starts from there. This has ending tag </html>.
2. <head> - There are few extra information about your webpage like title, meta name etc goes inside <head> tag. This has ending tag </head>.
3. <title> - This tag defines the title of your web page. This has ending tag <title>.
4. <body> - Contents of the web page is included inside <body> tag. It has ending tag </body>.
1. <html> - This tag tells the browser that it is a html page and the html starts from there. This has ending tag </html>.
2. <head> - There are few extra information about your webpage like title, meta name etc goes inside <head> tag. This has ending tag </head>.
3. <title> - This tag defines the title of your web page. This has ending tag <title>.
4. <body> - Contents of the web page is included inside <body> tag. It has ending tag </body>.
Get ready to write your very first web page using Notepad.
- Open the Notepad ( Start – Programs – Accessories – Notepad). Copy the text from up, paste it in the Notepad and save it as per the instruction below.
- Save your file (File – Save As – index.htm or index.html or anything with .html file extension). Changed the Save as Type to All Files as seen in Red Circle in the screenshot.
- Open the saved file in Internet Explorer.
HTML generally has 2 parts an on-code and off-code, which contains the text to be defined.
Note: Few Tags doesn’t require an off-code.
Syntax:
< tagname > .......... </tagname> :- on-code
< tagname > :- off-code
< tagname > .......... </tagname> :- on-code
< tagname > :- off-code
The most important thing to keep in mind about HTML is that its purpose is not to specify the exact formatting or layout of a web page, but rather to define and specify the specific elements that make up a page such as the body of the text, heading, paragraph, line breaks, text elements and so on. We use “Tag” or “Tag Element” for this purpose. Tags are inserted between < and > symbols and it’s not case-sensitive. But I recommend to use only lowercase. This is just to avoid some problem with CSS (Cascaded Style Sheet).
There are two types of Tags in html:
- Container Tag: It bracket or contains text or other tag elements. Usually it has start & end tag.
- Empty Tag: It is a standalone & doesn’t bracket or contain text or any other tag elements.
Attribute
This allows us to specify how web browser should treat a particular tag & is included within the actual tag, either within start tag or an empty tag.
Syntax: Attribute=”value”.
Now let’s start with Tag Listing & their respective explanation
1. DOCUMENT TAG:
All HTML files should include at least these 4 Tags
- HTML tag: This is the top-most tag used in HTML document which identifies it as a HTML document. It is a container tag.
- HEAD tag: This is nested within the HTML tag and contains information about the HTML file.
Syntax:
<HTML>
<HEAD>
…………………
</HEAD>
</HTML>
- TITLE tag: This is nested within HEAD tag. The tag output is displayed on the browser’s title bar but doesn’t appear as part of that page.
Syntax:
<HTML>
<HEAD>
<TITLE>
...........
</TITLE>
</HEAD>
</HTML>
-BODY tag: This is the compliment of the HEAD tag and contains all of the tags or elements that a browser actually displays as the body of the HTML document.
Syntax:
<HTML>
<HEAD>
<TITLE>
<BODY>
.....…
</BODY>
</TITLE>
</HEAD>
</HTML>
All HTML files should include at least these 4 Tags
- HTML tag: This is the top-most tag used in HTML document which identifies it as a HTML document. It is a container tag.
- HEAD tag: This is nested within the HTML tag and contains information about the HTML file.
Syntax:
<HTML>
<HEAD>
…………………
</HEAD>
</HTML>
- TITLE tag: This is nested within HEAD tag. The tag output is displayed on the browser’s title bar but doesn’t appear as part of that page.
Syntax:
<HTML>
<HEAD>
<TITLE>
...........
</TITLE>
</HEAD>
</HTML>
-BODY tag: This is the compliment of the HEAD tag and contains all of the tags or elements that a browser actually displays as the body of the HTML document.
Syntax:
<HTML>
<HEAD>
<TITLE>
<BODY>
.....…
</BODY>
</TITLE>
</HEAD>
</HTML>
2. STRUCTURING WEB PAGE TAG:
It is basically Heading Tag. These are 6 tags.
Heading Tag<H1> .......... </H1> : This is a top level heading
<H2> .......... </H2> : This is 2nd level heading
<H3> .......... </H3> : This is 3rd level heading
<H4> .......... </H4> : This is 4th level heading
<H5> .......... </H5> : This is 5th level heading
<H6> .......... </H6> : This is 6th level heading
It is basically Heading Tag. These are 6 tags.
Heading Tag<H1> .......... </H1> : This is a top level heading
<H2> .......... </H2> : This is 2nd level heading
<H3> .......... </H3> : This is 3rd level heading
<H4> .......... </H4> : This is 4th level heading
<H5> .......... </H5> : This is 5th level heading
<H6> .......... </H6> : This is 6th level heading
3. PARAGRAPH & LINE BREAK TAGS:
These are P & BR tags used to insert block and line of text on the web page.
Syntax:
<HTML>
<HEAD>
<TITLE>
<BODY>
<H1> THIS IS TO SHOW TAGS IMPLEMENTATION </H2>
<P> This is the Sample Page Text </P>
This is second line of sample text
<BR>
This is third sample text
</BODY>
</TITLE>
</BODY>
These are P & BR tags used to insert block and line of text on the web page.
Syntax:
<HTML>
<HEAD>
<TITLE>
<BODY>
<H1> THIS IS TO SHOW TAGS IMPLEMENTATION </H2>
<P> This is the Sample Page Text </P>
This is second line of sample text
<BR>
This is third sample text
</BODY>
</TITLE>
</BODY>
4. ADDING COMMENTS:
This is a stand-alone tag that allows us to include comments for future reference like other computer languages.
Syntax: < ! This is my comment tag >
This is a stand-alone tag that allows us to include comments for future reference like other computer languages.
Syntax: < ! This is my comment tag >
5. FORMATTING TEXT TAGS:
Tags are explained one by one
Syntax:
<B> : used to format a text bold, this is literal tag
<I> : used to format a text italic, this is also literal tag
<EM> : used as bold tag, this is a logical tag
<STRONG> : used for strong emphasis, it is also a logical tag
<BLOCKQUOTE> : This tag double-indent a block of text from both margins.
Syntax:
<BLOCKQUOTE> ………………… </BLOCKQUOTE>
<PRE> : This is preformatted text used to display a block of “preformatted” text in a monospace, fixed-pitch font.
Syntax: <PRE> ……………… </PRE>
Tags are explained one by one
Syntax:
<B> : used to format a text bold, this is literal tag
<I> : used to format a text italic, this is also literal tag
<EM> : used as bold tag, this is a logical tag
<STRONG> : used for strong emphasis, it is also a logical tag
<BLOCKQUOTE> : This tag double-indent a block of text from both margins.
Syntax:
<BLOCKQUOTE> ………………… </BLOCKQUOTE>
<PRE> : This is preformatted text used to display a block of “preformatted” text in a monospace, fixed-pitch font.
Syntax: <PRE> ……………… </PRE>
6. LIST CREATING TAG:
There are 2 types of links tag
Syntax:
<ol> : Ordered tag, defines a sequentially numbered list
Syntax:
<ol>
<li>
..........
</li> - List item tag comes under <OL> tag
</ol>
<ul> : Unordered list, defines a bulleted list of items.
Syntax:
<ul>
<li>
........
</li>
</ul>
Note: It is also possible to nest a list inside another list. The browser automatically indents nested list levels. We can nest the same or different kinds of lists. TYPE attribute like “A”, “a”, “I”, “i” or “1” can be set. Syntax is <ol type=”attrib”>. “START” attrib is used to start numbering sequence at a particular number.
Syntax is - <ol start=”3”>
There are 2 types of links tag
Syntax:
<ol> : Ordered tag, defines a sequentially numbered list
Syntax:
<ol>
<li>
..........
</li> - List item tag comes under <OL> tag
</ol>
<ul> : Unordered list, defines a bulleted list of items.
Syntax:
<ul>
<li>
........
</li>
</ul>
Note: It is also possible to nest a list inside another list. The browser automatically indents nested list levels. We can nest the same or different kinds of lists. TYPE attribute like “A”, “a”, “I”, “i” or “1” can be set. Syntax is <ol type=”attrib”>. “START” attrib is used to start numbering sequence at a particular number.
Syntax is - <ol start=”3”>
7. DEFINITION LIST TAG:
This tag allows to create glossaries or list of terms and definitions. It consists of three tag elements: DL (define list), DT (define term), and DD (define definition).
Syntax:
<dl>
<dt> Sample term <dd> explanation of term
This tag allows to create glossaries or list of terms and definitions. It consists of three tag elements: DL (define list), DT (define term), and DD (define definition).
Syntax:
<dl>
<dt> Sample term <dd> explanation of term
8. HYPERTEXT LINK TAG:
Allows us to create links to other HTML documents or data objects, to other places in the same HTML document, or to places in other HTML documents.This tag is composed of 3elements: start and end tags that encloses the whole link, the link target and link text.
Syntax:
Linking to file or data object
click here to jump to <A HREF=”SUB.HTML”> SUBDOCUMENT </A>
Linking to a place in the same HTML document
<A HREF=”#ANCHORNAME”> ANCHORTEXT </A> : # is fragment identifier
Linking to a place in another HTML document
<A HREF=”ADDRESS#anchorname”> anchortext </A>
Allows us to create links to other HTML documents or data objects, to other places in the same HTML document, or to places in other HTML documents.This tag is composed of 3elements: start and end tags that encloses the whole link, the link target and link text.
Syntax:
Linking to file or data object
click here to jump to <A HREF=”SUB.HTML”> SUBDOCUMENT </A>
Linking to a place in the same HTML document
<A HREF=”#ANCHORNAME”> ANCHORTEXT </A> : # is fragment identifier
Linking to a place in another HTML document
<A HREF=”ADDRESS#anchorname”> anchortext </A>
9. CREATING LINK LIST:
This is a list of hypertext links.
Syntax: <A HREF=”index.htm”> Home </A>
This is a list of hypertext links.
Syntax: <A HREF=”index.htm”> Home </A>
10. INSERTING INLINE IMAGES TAG:
allows to insert inline images on web page.
Syntax:
< IMG SRC=”images/image.gif”>
It also has ALT, ALIGN, HEIGHT & WEIGHT attribute.
allows to insert inline images on web page.
Syntax:
< IMG SRC=”images/image.gif”>
It also has ALT, ALIGN, HEIGHT & WEIGHT attribute.
11. CREATING IMAGE LINKS TAG:
Syntax:
<A HREF=”sub.htm”> <IMG SRC=”IMAGE.GIF”> both image & text is a link </A>
Attribute: Border=”10” : specifies border of 10 pixels
Syntax:
<A HREF=”sub.htm”> <IMG SRC=”IMAGE.GIF”> both image & text is a link </A>
Attribute: Border=”10” : specifies border of 10 pixels
12. HORIZONTAL RULE:
This is a standalone tag.
Syntax:
<hr> : adds horizontal rules to the web page.
Attributes: HEIGHT, NOSHADE, WIDTH, ALIGN, SIZE
This is a standalone tag.
Syntax:
<hr> : adds horizontal rules to the web page.
Attributes: HEIGHT, NOSHADE, WIDTH, ALIGN, SIZE
13. ADDRESS TAG:
is used to define a signature block for the web page.
Syntax:
<address> ..... <A HREF=”mailto:topaix@gmail.com”>Contact Us</A> </address>
is used to define a signature block for the web page.
Syntax:
<address> ..... <A HREF=”mailto:topaix@gmail.com”>Contact Us</A> </address>
14. TEXT FORMATTING TAG:
Syntax:
<sup> ..... </sup> : Superscript
<sub> ..... </SUB> : Subscript
<u> ..... </u> : Underline
<strike> ..... </strike> : Strikethrough
<h2 align=”left”> ..... </h2> : Align left text
<font size=”1”> ..... </font> : Font size from 1 to 7, + & - for relative font size
<small> ..... </small> : Small font
<big> ..... </big> : Big Font
<font color=”AQUA”> ..... < /font> : Font color changed by this tag
Some body tags:
<body bgcolor=”colorname” text=”colorname” link=”colorname” vlink=”colorname” alink=”colorname”>
Where:
bgcolor: Sets background color
text: sets text or foreground color
link: sets hyperlink texts color
vlink: Sets visited link color
alink: sets activated link color
Syntax:
<sup> ..... </sup> : Superscript
<sub> ..... </SUB> : Subscript
<u> ..... </u> : Underline
<strike> ..... </strike> : Strikethrough
<h2 align=”left”> ..... </h2> : Align left text
<font size=”1”> ..... </font> : Font size from 1 to 7, + & - for relative font size
<small> ..... </small> : Small font
<big> ..... </big> : Big Font
<font color=”AQUA”> ..... < /font> : Font color changed by this tag
Some body tags:
<body bgcolor=”colorname” text=”colorname” link=”colorname” vlink=”colorname” alink=”colorname”>
Where:
bgcolor: Sets background color
text: sets text or foreground color
link: sets hyperlink texts color
vlink: Sets visited link color
alink: sets activated link color
15. BACKGROUND IMAGE TAG:
Syntax: <body background=”filename or URL”>
Syntax: <body background=”filename or URL”>
16. MARQUEE TAG:
This displays the content as moving text.
Syntax:
<marquee> .......... </marquee>
attributes are behaviour, bgcolor, direction, height, width, loop, and scrolldelay.
This displays the content as moving text.
Syntax:
<marquee> .......... </marquee>
attributes are behaviour, bgcolor, direction, height, width, loop, and scrolldelay.
Comments
Post a Comment