The HTML page is a basically text document which contain HTML tags which create effect when its open in web browser. We can create an HTML page the simple of text editors such as Notepad in Windows. You can also create pages using some third party editors which do most of the work of coding for you such as Macromedia Dream weaver and Adobe GoLive. You can also use Microsoft front page which is specially design for this purpose.
in text editor when you want to save your file then save the file with .html extension for example open the text you wish to edit or type it into Notepad, and choose "File...Save As..." from the menu bar. Under "File name" give your file a name and change its extension from ".txt" to ".html." Under "Save as type" switch to "All Files" then click "OK."
After saving the file double click on file where you save it its open in your default web browser. you can also open the file in browser from file menu and selecting open option.
HTML tags which are also called HTML element are what we use to structure an HTML page. Tags start with a less then sign '<', then the command this is called opening tag and end with a grater then sign ' > ' which is called closing tag. For example <html> </html> which is vary first html tag of html page and show the start of the file and end of the file. Some tage in html have only opening tag so we use these tag for both opening and closing for example <br/> is single tage which is used for line break. so in this type of single tag we add forward slash ' / ' in the end of the command.
An HTML file structured on The HTML's beginning and end tag , head tag , Title tag and body tag. each file begin with <HTML> tag which show the starting of html file. the closing tag of <HTML> tag is written in The end of the whole document. <Head> is next section after <HTML> tag . This section contains information for the browser that does not appear in the browser's main window. <Head> tag also contain the <Title> </Title> tag . The text between <title> and </title> tag is show the title of your document which is not only display at the title bar of your browser is also useful of search engine. After <Head> tag BODY tag is start <Body> , which contains the text that will appear in the browser's main window. all the other tags and text is under the <body> and </body> text.
Hare you can write any text and other
tags which display in the main browser
windows when you open this file in Web Broswer.
The following tags are used for character formatting in HTML document.
<!-- your text-->
Comments tag is only display in the document for you and not appear in the browser window. This is basically use for describing the process steps.
<h1> ... </h1>
<H1> to <H6> are Heading Tags. The
header of an HTML document where information about the document is placed is
identify by <head> and </head>. The <head> tag is all the header elements. The
<title>, <style>, <meta>, <link>, <script>, <noscript>, and <base> tags are used
inside The Header Tag.
The <p> tag is used to create a new paragraph. Each paragraph of start with
<p> and end with </p> . When we write </p> then this means that this is the end of previous paragraph.
Example
<p>Hello learning hints.</p> <p>Now this is the beginning of second paragraph of text.</p> <p>This is a third paragraph of text.</p>
This will produce following result:
Hello learning hints.
Now this is the beginning of second paragraph of text.
This is a third paragraph of text.
<b/> is used for line break . because BR is single tag means that this tag have now closing tag so that this is written with a flowered slash <br/> . In XHTML we use <br /> ( br with forward slash with a space If you omit this space, older browsers will have trouble rendering the line break).
This tag is used to align the text center of the page .
<center> .... </center>
in above any thing between the <center> and </center> is align center of the page.
Example
Welcome in learning hints .com
Learning Hints.
The HTML <b> tag is used for specifying bold text. Every thing which is
written in between <b> and </b> become bold without conveying any extra importance.
My website is <b> Learning Hints </b>. you can learn every thing on this website.
The <strong> tag is a phrase tag. It defines important of text. Text also
little bold from other text.
hello
When you want to display the text in form of list then we use <ul> tag for
unorder list. An unordered list starts with the <ul> tag. In list each list item
starts with the <li> tag.
The opening list tag must be <UL>. It is followed by an optional list header (<LH>caption</LH>)
and then by the first list item (<LI>).
For example:
An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.
The list items are marked with numbers.
<ol>
<li>Math</li>
<li>Computer</li>
<li>English</li>
</ol>
We can also pass argument for example
<ol type="1|a|A|i|I">
When you want to display the contents then vary first element is Font which represent the contents in browser window. Font make our website user friendly and increasing content readability. When we discus font then there are some more attribute which are related with font which are font faze ,font size, font style and font color. <font> tag is used to set the font face , font size , font color.
You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.
<font size="1">This is Font size="1"</font><br
/>
<font size="2">This is Font size="2"</font><br />
<font size="3">This is Font size="3"</font><br />
<font size="4">This is Font size="4"</font><br />
<font size="5">This is Font size="5"</font><br />
<font size="6">This is Font size="6"</font><br />
<font size="7">This is Font size="7"</font>
This will produce following result:
This is Font size="1"
This is Font size="2"
This is Font size="3"
This is Font size="4"
This is Font size="5"
This is Font size="6"
This is Font size="7"
You can set font face for example arial, verdana, calibri . for this purpose we use <font > tag with face attribute.
<font face="Calibri"> this is Calibri font face Arial</font>
Remember that which font face you using if this font is not available in user browser window then they will not be able to see it and user will see the default font face.
if user is unable to see the font which you are used then the default font is display on the user windows. But it is also possible that we specify more then one font face alternatives by listing the font face names, separated by a comma.
For example:
<font face="arial , calibri, time new roman">
The color attribute in <font> tag Set Font Color which you want to display. The color can specify by the color name or hexadecimal code for that color.
For Example:
<font color="#0000FF"> (0000FF) This is the color code of blue </font>
The <table> element in HTML is used for displaying tabular data. We say taht
when we display the data like a spreadsheet software. Essentially: columns and
rows. Then we use Table element with <tr>, <th>, and <td> elements.
<caption> Student Table </caption>
<thead>
<tfoot>
<tr> </tbody>
|
Start of the Table This is Title of The Table This is Column Heading
End of the Column Heading
This is table footer which display in the bottom of the table. Just like column total
This is table body start this is first row this is first column this is second column this is third column end of row end of table body End of table tag
|
in HTML page hyperlink is an element or text or an image that when you click on it , its jump to another link page. For this purpose we use anchor (link) <a> tag with Href attribute.
For example
HTML |
Out Put |
Click hare for reading Class Notes <a href="http://www.learninghints/notes.php">Learning hints Notes page </a> |
Click for reading class notes learning Hints Notes Page |
In link tag we also use target attribute which specifies where to open the linked document.
For example if we want to open the link document in new window then we use :
<a href="http://www.learninghints/notes.php target="_blank">Learning hints Notes page </a>
we cal also use
_self
Opens the linked document in the same frame.
_parent Opens
the linked document in the parent frame
_top
Opens the linked document in the full body of the window
frame Name Opens the linked document in a named
frame
You can create link with image file using <image> tag with in the <a> tag for example
<a href="notes.php">
<img src="notes.gif" alt="HTML tutorial">
</a>
Normally link text is display as under line if you want to remove the under line then you can use text-direction attribute for example;
<a href="notes.asp"
style="text-decoration : none">Read More Notes</a>