HTML Tutorials
Tutorial No. 1
HTML
The HTML instructions, along with the text to which the instructions apply, are called HTML elements. The HTML instructions are themselves called tags, and look like <element_name> -- that is, they are simply the element name surrounded by left and right angle brackets.
HTML is a abbreviation of Hyper Text Mark up Language. This is a computer language.Computer language is a way of communication between man and a computer, that tells the computer what men wants.HTML language is very helpful for you to make a web page.
The big advantage of this language is that there is no need of any software for use of this language. You can use this coding in any text editing software such as Note pad or word pad but Note pad has a greater importance.
HTML coding uses different tags. These tags are consist of symbols ''>'' (greater than) and ''<'' (less than) and tag description are in these symbols, such as title tag is shown as <title>
It is necessary to close the tag which was opened or started. For closing of tag slash symbol ( / ) is used, such as closing tag of title is </title>
Now we will start our first lesson which is a procedure of opening of Note pad and introduction of basic tags and how we save our work.
Go to start, then go to all programs and accessories, You will get Note pad.
Click on Note pad, Note pad will be open as shown in following screen shot
After the opening of Note pad you will start HTML coding with html tag. HTML tag means you are using html coding. Other basic tags are also shown.
<html>
<head>
<title>
LEARN COMPUTER EARN
</title>
</head>
<body>
this is a first tutorial on html. a body of a html coding is a description of title.
</body>
</html>
Now you can save your work.
Go to file and click on save as, a pop up window will appear on screen. write your file name with html extension, such as file name is learn, you will write learn.html. note that html extension is necessary for appearing your work on web browsing
.
After saving your file your file will save on your selected location according to your web browser.
Result of your file on web page is shown as under
Tutorial No. 2
Tags Description
HTML documents are structured into two parts, the HEAD, and the BODY. Both of these are contained within the HTML element -- this element simply denotes this as an HTML document.
The head contains information about the document that is not generally displayed with the document, such as its TITLE. The BODY contains the body of the text, and is where you place the document material to be displayed. Elements allowed inside the HEAD, such as TITLE, are not allowed inside the BODY, and vice versa.
EXAMPLE:-
<HEAD> <TITLE>
LEARN COMPUTER EARN
</TITLE></HEAD>
2 <BODY>
Now you will write all the html coding in this body tag along with all relevant html tags. I will describe relent tags in incoming tutorials.
EXAMPLE:-
<BODY>
In this web site you will learn different computer tutorials such as creating a blog, google adsense, MS word, MS excel, Photoshop, corel draw etc. So keep in touch with LEARN COMPUTER EARN
</BODY>
HTML coding
HTML coding result
Remember that you will save your html coding file with html extension.
3 <B> or <I> or <U>
If you want to distinguished some text from other's text. you can performed this task by using these three tags. 1) <b>, <u>, <I>
B stand for Bold, U stand for Underline, I stand for Inclined
EXAMPLE
<BODY>
I visit many blogs but <b> LEARN COMPUTER EARN </b> is the best of all. I suggest you to visit regularly this blog<u> LEARN COMPUTER EARN</u>. <I> I hope you will.</I>
</BODY>
The <br> tag inserts a single line break.
The <br> tag is an empty tag which means that it has no end tag.
The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least important heading.
EXAMPLE
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
HTML Tables and the Border Attribute
HTML List
HTML
The HTML instructions, along with the text to which the instructions apply, are called HTML elements. The HTML instructions are themselves called tags, and look like <element_name> -- that is, they are simply the element name surrounded by left and right angle brackets.
The big advantage of this language is that there is no need of any software for use of this language. You can use this coding in any text editing software such as Note pad or word pad but Note pad has a greater importance.
HTML coding uses different tags. These tags are consist of symbols ''>'' (greater than) and ''<'' (less than) and tag description are in these symbols, such as title tag is shown as <title>
It is necessary to close the tag which was opened or started. For closing of tag slash symbol ( / ) is used, such as closing tag of title is </title>
Now we will start our first lesson which is a procedure of opening of Note pad and introduction of basic tags and how we save our work.
Go to start, then go to all programs and accessories, You will get Note pad.
Click on Note pad, Note pad will be open as shown in following screen shot
After the opening of Note pad you will start HTML coding with html tag. HTML tag means you are using html coding. Other basic tags are also shown.
<html>
<head>
<title>
LEARN COMPUTER EARN
</title>
</head>
<body>
this is a first tutorial on html. a body of a html coding is a description of title.
</body>
</html>
Now you can save your work.
Go to file and click on save as, a pop up window will appear on screen. write your file name with html extension, such as file name is learn, you will write learn.html. note that html extension is necessary for appearing your work on web browsing
After saving your file your file will save on your selected location according to your web browser.
Result of your file on web page is shown as under
Tutorial No. 2
Tags Description
- <HEAD> <TITLE>
HTML documents are structured into two parts, the HEAD, and the BODY. Both of these are contained within the HTML element -- this element simply denotes this as an HTML document.
The head contains information about the document that is not generally displayed with the document, such as its TITLE. The BODY contains the body of the text, and is where you place the document material to be displayed. Elements allowed inside the HEAD, such as TITLE, are not allowed inside the BODY, and vice versa.
This Tag is used for your header description. The message at the top of your website will appear by using this tag while message describes your topic description or title description. Close the tag where you want to finish the effect of title description.
EXAMPLE:-
<HEAD> <TITLE>
LEARN COMPUTER EARN
</TITLE></HEAD>
2 <BODY>
Now you will write all the html coding in this body tag along with all relevant html tags. I will describe relent tags in incoming tutorials.
EXAMPLE:-
<BODY>
In this web site you will learn different computer tutorials such as creating a blog, google adsense, MS word, MS excel, Photoshop, corel draw etc. So keep in touch with LEARN COMPUTER EARN
</BODY>
HTML coding
Remember that you will save your html coding file with html extension.
3 <B> or <I> or <U>
If you want to distinguished some text from other's text. you can performed this task by using these three tags. 1) <b>, <u>, <I>
B stand for Bold, U stand for Underline, I stand for Inclined
EXAMPLE
<BODY>
I visit many blogs but <b> LEARN COMPUTER EARN </b> is the best of all. I suggest you to visit regularly this blog<u> LEARN COMPUTER EARN</u>. <I> I hope you will.</I>
</BODY>
4 <P>
The <p> tag defines a paragraph.
Browsers automatically add some space (margin) before and after each <p> element. The margins can be modified with CSS (with the margin properties).
EXAMPLE
<P> THIS IS A PARAGRAPH ABOUT LEARN COMPUTER EARN </P>
5 <BR>
The <br> tag is an empty tag which means that it has no end tag.
EXAMPLE
<BR> THIS TAG IS USED FOR SINGLE LINE BREAK
6 <h1> - <h6>The <h1> to <h6> tags are used to define HTML headings.
<h1> defines the most important heading. <h6> defines the least important heading.
EXAMPLE
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
7 <p> TAG ATTRIBUTES
It is used for format the paragraph means set your paragraph at center,left or right of page.For this purpose following attributes are valid.
<p align="center"> center text </p>
<p align="left"> center text </p>
<p align="right"> center text </p>
EXAMPLE
<p align="center"> learncomputerearn.blogspot.com </p>
<p align="left"> this is a learning website </p>
<p align="right"> this is a learning website </p>
8 HTML Link
HTML links are defined with the <a> tag.
EXAMPLE
< a href ="http://www.learncomputerearn.blogspot.com"> this is a link</a>
Result of above HTML code will be this is a link
TUTORIAL NO 3
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
<img src="url" alt="some_text"/>
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
The value of the alt attribute is an author-defined text:
<img src="IMG_111" alt="WE ARE SORRY" />
IMAGE RESULT
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).
ALT RESULT
8 HTML Link
HTML links are defined with the <a> tag.
EXAMPLE
< a href ="http://www.learncomputerearn.blogspot.com"> this is a link</a>
Result of above HTML code will be this is a link
TUTORIAL NO 3
9 HTML Images
- The <img> Tag and the Src Attribute
In HTML, images are defined with the <img> tag.The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
<img src="url" alt="some_text"/>
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.
The Alt Attribute
The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.The value of the alt attribute is an author-defined text:
<img src="IMG_111" alt="WE ARE SORRY" />
IMAGE RESULT
ALT RESULT
The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
<img src="IMG_111" alt="WE ARE SORRY" width="304" height="228" />
It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading.
HTML Tables
Tables are defined with the <table> tag.
A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Result of above codes.
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
Result of above codes.
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
HTML Tables and the Border Attribute
If you do not specify a border attribute, the table will be displayed without borders. Sometimes this can be useful, but most of the time, we want the borders to show.
To display a table with borders, specify the border attribute:
HTML Table Headers
Header information in a table are defined with the <th> tag.
All major browsers display the text in the <th> element as bold and centered.
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
result of above codes.
| Header 1 | Header 2 |
|---|---|
| row 1, cell 1 | row 1, cell 2 |
| row 2, cell 1 | row 2, cell 2 |
HTML List
An unordered list
An ordered list:
An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.The list items are marked with bullets (typically small black circles).<ul> <li>Tea</li> <li>Milk</li> </ul> result of above codes
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>Coffee</li> <li>Milk</li> </ol> result of above codes
HTML Definition ListsA definition list is a list of items, with a description of each item.The <dl> tag defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the item in the list) and <dd> (describes the item in the list): <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> result of above codes
|
thanks nice blog for learning
ReplyDeleteexcellant efort
ReplyDelete