HTML understanding in English:
First step:
Creating a HTML Page:
1- Open Notpad
2- Start typing
<html>
<head>
<title>Your title here</title>
</head>
<body>
<!--Everything will be written in the body-->
</body>
</html>
<!--Everything will be written in the body--> is just a comment for information, as in HTML <!--Type comment here--> is used for comment it will not desplay on screen, it helps editing HTML...
3- Now select File>Save As option or press Ctrl+F9 type any name and save with .html extension(i.e_Home.html)
Example Explained:
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
Using this description, a web browser can display a document with a heading and a
paragraph.
1- Open Notpad
2- Start typing
<html>
<head>
<title>Your title here</title>
</head>
<body>
<!--Everything will be written in the body-->
</body>
</html>
<!--Everything will be written in the body--> is just a comment for information, as in HTML <!--Type comment here--> is used for comment it will not desplay on screen, it helps editing HTML...
3- Now select File>Save As option or press Ctrl+F9 type any name and save with .html extension(i.e_Home.html)
Example Explained:
The text between <html> and </html> describes an HTML document
The text between <head> and </head> provides information about the document
The text between <title> and </title> provides a title for the document
The text between <body> and </body> describes the visible page content
Using this description, a web browser can display a document with a heading and a
paragraph.
Body Background
Change Color of background of body:By default in HTML the body background color is white, However it can be changed
in many ways..
Just add bgcolor attribute in body tag and in between “ ” type the desired color name,
Im typing Green..
<body bgcolor=“green”>
<html>
<head>
<title>Your title here</title>
</head>
<body bgcolor=“green”>
<!--Everything will be written in the body-->
</body>
</html>
Now save the page and open it color will be changed...
Body background color changement schemes:
Simple:
<body bgcolor=“ ”>
RGB:
<body bgcolor=rgb(0,0,0)>
Change the values from 0 to 255 that can produce thousands of colors..
Hexa:
<body bgcolor=#000000>
OR
<body bgcolor=“000000”>
Change the values from each 0 to any digit or alphabet that can produce thousands of colors..
Add Image in Body background:
It is very simple to add image in Body’s background, Just use background attribute
instead of bgcolor.
<body background=“ ”>
Type Image URL in “” .
Third Step:
Headings & Paragraphs
Hadings:
In Html Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important
heading.
<h1>This is first Hading</h1>
<h1> defines the most important heading. <h6> defines the least important
heading.
<h1>This is first Hading</h1>
<html>
<head>
<title>Your title here</title>
</head>
<body bgcolor=“green”>
<h1>This is the first heading</h1>
<h2>This is the second heading</h2>
</body>
</html>
<head>
<title>Your title here</title>
</head>
<body bgcolor=“green”>
<h1>This is the first heading</h1>
<h2>This is the second heading</h2>
</body>
</html>
The size of first heading will be desplayed larger & of the last will be
desplayed smaller.
Paragraphs:
In HTML The <p> element defines a paragraph. A single web page can
have infinite paragraphs.
After typing the paragraph end it with </p> element.
<p>This is a paragraph</p>
In HTML The <p> element defines a paragraph. A single web page can
have infinite paragraphs.
After typing the paragraph end it with </p> element.
<p>This is a paragraph</p>
<html>
<head>
<title>Your title here</title>
</head>
<body bgcolor=“green”>
<p>This is a paragraph<p>
<p>This is another paragraph<p>
</body>
</html>
<head>
<title>Your title here</title>
</head>
<body bgcolor=“green”>
<p>This is a paragraph<p>
<p>This is another paragraph<p>
</body>
</html>
Fourth Step:
Text Formatting
Change the Color of Text:
The color property defines the text color to be used for an HTML element
<h1 color=“ ”>Text</h1>
<p color=“ ”>Text</p>
<font color=“ ”>Text</font>
Text color changement schemes:
Simple:
<font color=“ ”>Text</font>
RGB:
<font color=rgb(0,0,0)>Text</font>
Change the values from 0 to 255 that can produce thousands of colors..
Hexa:
<font color=#000000>Text</font>
OR
<font color=“000000”>Text</font>
Change the values from each 0 to any digit or alphabet that can produce thousands of colors..
<html>
<head>
<title>Your title here</title>
</head>
<body bgcolor=“green”>
<h1 color=“Green”>This Hading will be Green color</h1>
<p color=“Red>This paragraph will be Red color</p>
<font color=“yellow”>This text will Yellow color</font>
</body>
</html>
Text Styles:
HTML defines special elements, for defining text with a special meaning. HTML for example uses elements like <b> and <i> for formatting output, like bold or italic text. Formatting elements were designed to display special types of text:
Tag
|
Description
|
Example
|
<b>
|
Defines bold text
|
<b>Text</b>
|
<em>
|
Defines emphasized text
|
<em>Text</em>
|
<i>
|
Defines italic text
|
<i>Text</i>
|
<small>
|
Defines smaller text
|
<small>Text</small>
|
<strong>
|
Defines important text
|
<strong>Text</strong>
|
<sub>
|
Defines subscripted text
|
<sub>Text</sub>
|
<sup>
|
Defines superscripted text
|
<sup>Text</sup>
|
<ins>
|
Defines inserted text
|
<ins>Text</ins>
|
<del>
|
Defines deleted text
|
<del>Text</del>
|
<mark>
|
Defines marked/highlighted text
|
<mark>Text</mark>
|
Fifth Step:
Image Linking
HTML Image syntax:
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute defines the url (web address) of the image:
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute defines the url (web address) of the image:
Simple:
<img src=“URL of image”>
Image will be desplayed in its origional size:
Specifying height & width of image:
<img src=“URL of image” height=“ ” width=“ ”>
Type the desird height and width of image...
Image Border:
<img src=“URL of image” height=“ ” width=“ ” border=“”>
Type the size of width in double quotes of border=“”
Open Image by clicking:
<a href=“Url of Image”><img src=“URL of image” height=“ ” width=“ ”
border=“ ”><a>
First image will be desplayed in the specified height and width and border then on clicking it will oppen and appear as Large...
<img src=“URL of image”>
Image will be desplayed in its origional size:
Specifying height & width of image:
<img src=“URL of image” height=“ ” width=“ ”>
Type the desird height and width of image...
Image Border:
<img src=“URL of image” height=“ ” width=“ ” border=“”>
Type the size of width in double quotes of border=“”
Open Image by clicking:
<a href=“Url of Image”><img src=“URL of image” height=“ ” width=“ ”
border=“ ”><a>
First image will be desplayed in the specified height and width and border then on clicking it will oppen and appear as Large...
Practicle:
<html>
<head>
<title>Your title here</title>
</head>
<body bgcolor=”silver”>
<a href=“Url of Image”><img src=“URL of image” height=“ ” width=“ ”
border=“ ”><a>
</body>
</html>
<head>
<title>Your title here</title>
</head>
<body bgcolor=”silver”>
<a href=“Url of Image”><img src=“URL of image” height=“ ” width=“ ”
border=“ ”><a>
</body>
</html>
Sixth step:
07 Audio
Linking Audio files:
It is very simple & easy to add and play audios in your html page by using<audio> tag.
Syntax:
<audio controls>
<source src=”horse.mp3” type=”audio/mpeg”>
</audio>
<html>
<head>
<title>Your title here</title>
</head>
<body>
<audio controls>
<source src="atif.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Seventh step:
08 Creating HTML Tables:
Table:-
- In HTML, Tables are defined with the <table> tag.
- Border of table is defined by border property.
- Tables are divided into table rows with the <tr> tag.
- Table rows are divided into table data with the <td> tag.
- A table row can also be divided into table headings with the <th> tag.
<head>
<title>Your title here</title>
</head>
<body>
<table border=“1”>
<tr>
<th>Name</th>
<th>Website</th>
</tr>
<tr>
<td>Atif Pervaiz</td>
<td>www.atifsoftwares.blogspot.com</td>
</tr>
</table>
</body>
</html>
| Name | Website |
|---|---|
| Atif | www.atifsoftwares.blogspot.com |
Using Colspan:-
colspan attribute is used to make a cell span many columns
<table border=”1”>
<tr>
<th colspan=”2”>Numbers</th>
</tr>
<tr>
<th>Land line</th>
<th>Mobile</th>
</tr>
<tr>
<td>04230000000</td>
<td>03130000000</td>
</table>
<tr>
<th colspan=”2”>Numbers</th>
</tr>
<tr>
<th>Land line</th>
<th>Mobile</th>
</tr>
<tr>
<td>04230000000</td>
<td>03130000000</td>
</table>
| Numbers | |
|---|---|
| Land line | Mobile |
| 04230000000 | 03130000000 |
Using Rowspan:-
rowspan attribute is used to make a cell span many rows.
<table border=”1”>
<tr>
<th rowspan=”2”>Names</th>
<th colspan=”2”>Phone Numbers</th>
</tr>
<tr>
<th>Land line</th>
<th>Mobile</th>
</tr>
<tr>
<td>Atif Pervaiz</td>
<td>04230000000</td>
<td>03130000000</td>
</table>
| Names | Phone Numbers | |
|---|---|---|
| Land line | Mobile | |
| Atif Pervaiz | 04230000000 | 03130000000 |
Using cellpadding:-
cellpadding attribute, which specifies the space between the cell wall and the cell
content.
<table border=“1” cellpadding=“10”>
<tr>
<th>Name</th>
<th>Website</th>
</tr>
<tr>
<td>Atif Pervaiz</td>
<td>www.atifsoftwares.blogspot.com</td>
</tr>
</table>
| Name | Website |
|---|---|
| Atif Pervaiz | www.atifsoftwares.blogspot.com |
Using cellspacing:-
The cellspacing attribute specifies the space, in pixels, between cells.
<table border=“1” cellpadding=“10” cellspacing=“10”>
<tr>
<th>Name</th>
<th>Website</th>
</tr>
<tr>
<td>Atif Pervaiz</td>
<td>www.atifsoftwares.blogspot.com</td>
</tr>
</table>
| Name | Website |
|---|---|
| Atif Pervaiz | www.atifsoftwares.blogspot.com |
Tag
|
Description
|
<table>
|
Defines a table
|
<th>
|
Defines a header cell in a table
|
<tr>
|
Defines a row in a table
|
<td>
|
Defines a cell in a table
|
<thead>
|
Groups the header content in a table
|
<tbody>
|
Groups the body content in a table
|
<tfoot>
|
Groups the footer content in a table
|
cellspacing
|
The cellspacing attribute specifies the space, in pixels, between cells.
|
cellpadding
|
attribute, which specifies the space between the cell wall and the cell content.
|
rowspan
|
attribute is used to make a cell span many rows
|
colspan
|
attribute is used to make a cell span many columns
|
valign
|
Alignment used in table to align table, row or cell data top, bottom, left, right etc.
|
bgcolor
|
attribute to change background color of table it is used in <table> tag
i.e_ <table bgcolor=“Green”
|
I hope it is enough for u if any queries than inform me so that I can guide you properly
No comments:
Post a Comment