Presentation
Welcome to the HTML Tutorial for novices. This instructional exercise doesn\'t oblige you to have earlier information of any programming dialect. Everything you need to have is fundamental content altering abilities on a PC!!HTML Stands for Hyper Text Markup Language. It is a markup dialect used to make site pages. Web programs like Internet Explorer, Google Chrome, Mozilla Firefox, and so on., can comprehend this dialect and presents the website pages in the arrangement proposed by its creator.
It\'s fun and simple to learn HTML.
(This instructional exercise clarifies HTML 4.01 which is upheld by every present day program.)
Beginning
To begin learning HTML everything you need is a word processor like Notepad to make the HTML record and a web program, for example, Internet Explorer to show the pages you make. So let\'s make our first website page.Step 1: Open Notepad
Step 2: Type in the accompanying HTML code. This HTML code will be clarified in the later sections of this instructional exercise.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>My First Page</title></head><body><font color=Red><h1>A very interesting web page !!!</h1></font></body></html>
Step 3: Save the document:
In Notepad Click File->Save As
Select Save as Type: All Files
Enter Filename: FirstPage.html
Click Save
Step 4: Open FirstPage.html record on your web program. You will see the page you just made, much the same as the one demonstrated as follows.
Components and Tags
HTML Elements
A HTML page is comprised of an arrangement of HTML Elements. HTML components comprise of HTML Tags and some substance.
The accompanying is a sample of a HTML component.
<h1>A very interesting web page!!!</h1><h1> and </h1> are the labels in this HTML component and it advises the web program to show the content - An extremely intriguing site page!!! - as heading.
HTML Tags
The vast majority of the HTML labels come in sets - an opening tag and an end tag.
Opening labels will have a < taken after by the label name and >
Shutting labels will have a </taken after by the label name and a >
In the HTML component above, <h1> is the opening tag and </h1> is the end tag.
Some HTML labels don't have an end tag. For instance the <br> tag is utilized addition a line break as a part of a HTML page and it doesn't require an end tag.
Characteristics
The opening labels in HTML can have characteristics which gives extra data to the tag.
The <font> tag in your first html page has the credit color=red to show the content in red.
<font color=Red>
HTML Structure
The structure of a HTML archive is as demonstrated as follows
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
</head>
<body>
</body>
</html>DOCTYPE: Declares which form of HTML is utilized as a part of the document.<!DOCTYPE> assertions for HTML 4.01 are:
Strict
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">Transitional
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">Frameset
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> : Defines the begin of the HTML archive.
<head> : Defines the begin of head segment. Head area contains general data around a page such as title, depiction, and catchphrases.
</head> : Defines the end of head segment.
<body> : Defines begin of the real page substance.
</body> : Defines the end of page substance
</html> : Defines the end of the HTML record
Title tag
Title: <title>Title label sets the title of the report and it ought to be set in the <head> segment of the HTML page. The content between the title labels will be shown on the highest point of the program window.
Sample Code:
<html>
<head>
<title>My First Page</title>
</head>
<body>
Basic HTML Tags
</body>
</html>Shown as:
Body Tag
Body Tag: <body>
The <body> tag characterizes the body of the HTML page where the genuine page substance are set. The most generally utilized traits for a <body> tag are
foundation: to determine a foundation picture for the page
bgcolor: to determine a foundation shading for the page
content: to determine the content shading
Code:
<body bgcolor="silver" text="blue" >Shown as:
Heading Tags
Heading: <h1> to <h6>
Heading labels are set inside the body segment of the HTML and are utilized to show content as heading. There are 6 diverse heading labels - <h1>, <h2>, <h3>, <h4>, <h5> and <h6>
h1 has the most noteworthy significance and h6 has the slightest significance.
Code:
<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>Shown as:
This is Heading 1
This is Heading 2
This is Heading 3
This is Heading 4
This is Heading 5
This is Heading 6
Section Tag
Section: <p>
The section labels, <p> and </p>, will design the content as a passage and include some space previously, then after the fact.
Code:
<p>This is an example for paragraph tags in HTML. Paragraph alignment can be set using the align attribute. This is my first paragraph.</p>
<p align=center>This is the second paragraph. This paragraph is aligned to the center. The align attribute can have one of the following values: left, right, center, justify.</p>
Shown as:
This is an illustration for passage labels in HTML. Passage arrangement can be set utilizing the adjust characteristic. This is my first passage.
This is the second section. This passage is adjusted to the inside. The adjust characteristic can have one of the accompanying qualities: left, right, focus , legitimize
Break and Rule Tag
Line break: <br>
The <br> tag will embed a line break. Any content or picture that takes after this tag is moved to the following line. <br> tag don't have an end tag.Code
This is an example of a line break <br>This is another line<br>and one more<br>Dispayed as
This is a case of a line break
This is a different line
also, one more
Even Rule: <hr>
The <hr> tag will embed an even run the show. You can determine the length and width of the standard utilizing qualities size and width. <hr> tag don't have an end tag.
Code
Rule 1: <hr>
Rule 2: <hr size="5" width="300">Shown as
Rule 1 :
Rule 2:
Rule 2:
Formatting Tags
Striking: <b>
<b> tag will show the content in striking.
Italic: <i>
<i> tag will show the content in italic.
Solid: <strong>
<strong> tag will organize the content as imperative.
Square Quote: <blockquote>
<blockquote> tag is utilized to configuration content as a citation.
Code -
<b>This is bold text</b><br>
<i>This is Italic text</i><br>
<strong>This is Strong text</strong><br>
<blockquote>"The Best English Web Magazine -http://en-tipsntricks.blogspot.com/ " - Mahatma Gandhi</blockquote>
Shown As
This is bold text
This is Italic text
This is Strong text
This is Italic text
This is Strong text
"The Best English Web Magazine - http://en-tipsntricks.blogspot.com/"
List Tags
Unordered rundown : <ul>An unordered rundown is a bulleted rundown of things and characterized utilizing the labels <ul> and </ul>. Every thing in the rundown is characterized utilizing labels <li> and </li>. The default shot style is a plate (a filled circle). You can change the slug style by setting the sort ascribe to circle, square or plate.
Code:
<ul type="square">
<li> Tech News </li>
<li> Downloads </li>
<li> @en-tipsntricks.blogspot.com </li>
</ul>Shown as:
- Tech News
- Downloads
- @en-tipsntricks.blogspot.com
Requested rundown: <ol>
A requested rundown is a numbered rundown of things and characterized utilizing the labels <ol> and </ol>. Every thing in the rundown is characterized utilizing labels <li> and </li>. The default numbering style is 1,2,3,.. You can change the setting so as to number style the sort ascribe to one of the accompanying :
1 - for numbers
a - for lower case letters
A - for capitalized letters
i - for lower case roman numerals
I - capitalized roman numerals
Code:
<ol type="I">
<li> First </li>
<li> Second </li>
<li> Third </li>
</ol>Shown as:
- First
- Second
- Third
Picture Tag
Picture Tag: <img>
The <img> tag is utilized to embed a picture on a HTML page. It doesn't have an end tag. The most generally utilized characteristics for a <img> tag are
src: to indicate the url of the picture
alt: to indicate the substitute content to showed if the picture is not accessible
width: to indicate the width of a picture in pixels
stature: to determine the tallness of a picture in pixels
Code:
<img src="/images/TheBestEnglishWebmagazine/Tipsntricks.jpg" alt="Tipsntricks" height="200" width="200" >Shown as:
Grapple Tag
Grapple Tag: <a>
The grapple labels <a> and </a> are utilized to make a connection to an asset, for example, a html page or any document. Connections can be made around some content or a picture by putting the content or picture between the opening grapple label <a> and shutting tag </a>. The regularly utilized qualities for stay labels are
href : To determine the area (URI) of the asset
Focus: To determine the objective casing where the connection is to be opened. As a matter of course the objective quality will have the worth "_self", so the connection will open in the same casing where it was clicked. To open the connection in another window, you can set target="_blank"
Code:
<a href="http://en-tipsntricks.blogspot.com/" target="_blank">Click here Tech NEWS</a>
Shown as:
Click here Tech NEWS
HTML Tables
Table Tags: <table>, <th>, <tr> ,<td>
<table> tag is utilized to mastermind information in a table organization in HTML. Every column inside of the table is characterized with the tag <tr> and every cell in a table is characterized with <td> tag. You can likewise characterize a header column for the table utilizing the <th> tag.
Here is basic case of a HTML table with one header line three information lines and two segments :
<table border="1">
<tr><th>Item</th> <th>Qty.</th></tr>
<tr><td>Apple</td> <td>10</td></tr>
<tr><td>Mango</td> <td>20</td></tr>
<tr><td>Orange</td> <td>30</td></tr>
</table>Shown as:
| Item | Qty. |
|---|---|
| Apple | 10 |
| Mango | 20 |
| Orange | 30 |
Different characteristics normally utilized with <table> tag are:
cellpadding : to set the space between the cell outskirt and the cell content
cellspacing : to set the space between two cells
width : to set the width of the table
The characteristics normally utilized with <tr> and <td> labels are:
adjust :To on a level plane adjust the substance left, right, focus, legitimize
valign :To vertically adjust the substance top, center or base
bgcolor :to set a foundation shading
You could likewise have a cell traverse numerous sections and columns by setting the accompanying qualities
rowspan :to set the quantity of columns to traverse
colspan :to set the quantity of cells (segments) to traverse
Here is a changed adaptation of our past illustration:
<table border="1" width="200" cellpadding="5" cellspacing="5" >
<tr><th bgcolor="grey">Item</th> <th bgcolor="grey">Qty.</th></tr>
<tr bgcolor="red"><td>Apple</td> <td>10</td></tr>
<tr bgcolor="green"><td>Mango</td> <td>20</td></tr>
<tr bgcolor="orange"><td>Orange</td> <td>30</td></tr>
<tr><td colspan="2" align="center" bgcolor="blue">Total = 60</td></tr>
</table>Shown as
| Item | Qty. |
|---|---|
| Apple | 10 |
| Mango | 20 |
| Orange | 30 |
| Total = 60 | |
So That's All Guides. If you got some Knowledge from this, BE KIND TO SHARE THIS.
Comments
Post a Comment