HTML Notes

Creating HTML Page

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

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.

Structure of HTML File

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.


<html>
        <head>  
                <title>    </title>
          </head>
<body>
Hare you can write any text and other<br>
 tags which display in the main browser <br>
windows when you open this file in Web Broswer.<br>

                    </body>
            </html>

Character Formatting Tags

The following tags are used for character formatting in HTML document.

Comments Tag

<!-- 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.

Heading tags

<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.

Paragraph <p> 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.

Break <b/> tag

<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).

<Center> Tag

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


<p>Welcome in learning hints .com </p>
<center>
<p>Learning Hints.</p>
</center>

HTML <b> Tag

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.

HTML <strong> Tag

The <strong> tag is a phrase tag. It defines important of text. Text also little bold from other text.


<strong> hello </strong>

HTML Unordered Lists <ul>Tag

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:


<ul>
<lh>Subject Name</lh>
<li>Math</li>
<li>Computer</li>
<li>English</li>
</ul>

which could be rendered as: 
Subject Name
    Subject Name
  • Math
  • Computer
  • English

We can also pass argument for example
<ul type=" disc | square | circle ">

HTML Ordered Lists <ol> Tag

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">

<font> Tag In HTML

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.

Font Size Attribute

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"

Font Face Attribute

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.

Alternate font faces

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">

font color Attribute

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>

HTML Table <table> Tag

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>
            <tr>
                    <th>Product Name</th>
                    <th>Price</th>
                    <th>quantity</th>
            </tr>
    </thead>

            <tfoot>
                    <tr>
                        <th>Product Name</th>
                        <th>Price</th>
                        <th>quantity</th>
                  </tr>
            </tfoot>
    <tbody>

 <tr>
                    <td>TV</td>
                    <td>10000</td>
                    <td>20</td>
             </tr>
           

                   </tbody>


    </table>
   

 

 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

 

 


Hyper Links in HTML

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

Target Attribute

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

Hyper Link With Image

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>

image Tag

in HTML document you can also insert the image. for this purpose <image> tag with src attribute are used:
syntax:
<img src="path/URL" hspace="space in Pix" vspace="space in Pix">
For example:
<img src="mylogo.gif" hspace="4" vspace="2">




View and Download More Tutorials !

Notes of HTML