HTML Tutorial From Scratch Till Advance Level Part II

Advance HTML

Advance html tutor


Html language is full of tags and I would discuss tags below. But you have to keep in mind the basic structure of a htm program will not change and you can place below tags anywhere between body tags in a html program. I explained how to write and run a html program in my previous post. Below I’ll again start by showing the basic structure of an html code and then I would just talk about different tags that you may insert in between body tag. It’ll be best if you test the code snippets as we go through html. Don’t forget that to run a html code you only need a note pad. So below is the useful stuff for you.

1. Basic Structure
<html>

<head>

</head>

<body>
</body>

</html>
2. Heading Tag
Heading tag is used to specify headings and its tags go from h1, h2, h3, h4 till h6. H1 has the biggest font.

Syntax
<h1> The heading one </h1>
<h2> The heading two </h2>
<h3> The heading three </h3>
<h4> The heading four </h4>
<h5> The heading five </h5>
<h6> The heading six </h6>

Usage: Write this in body tags and see the results.

3. Paragraph Tags
Paragraph tags are used around paragraphs to align paragraphs in a proper manner. Below is the syntax for paragraph tags.

Syntax
<p> First Paragraph </p>
<p> Second Paragraph </p>

4. Hyperlinks
Hyperlinks are created in html using anchor text tag.

Syntax:
<a href=”http://www.zeeshandurrani.com”> My Blog </a>

Explanation:
The result will be a text “My Blog”. As soon as you would click it link that you have defined in the a href tag would open up. Search engines love hyperlinks and anchor texts so develop a good understanding for hyperlinks.

5. HTML Images
<img> tags are used to open images in html language.

Syntax:
<img src=”logo.jpg” alt=”My Logo” width=”500” height=”250”>

Explanation
Src shows the path to your image that you are going to show on your webpage. Alt is used to show the alternate text that will be displayed by the browser incase image is not displayed. Secondly height and width show the dimensions of your image which you can adjust according to your liking.

6. HTML Comments
Below is the syntax for html comments. Comments are very important and if your code is well commented then you’ll have a better grip on your own code and even others can also understand your code easily.

Syntax:
<! – Comments — >

7. Line Breaks
<Br> tag is used for line breaks. You can use <br> tag in between a paragraph or wherever want to give a line break.

Syntax:
<p> The sun rises from the east. <br> The sun sets in the west </p>

Result:
The sun rises from the east.
The sun sets in the west.

8. Formatting Tags
<b> and <i> are bold and italic tags and <strong> tag is also for bold and <em> is for italics.

Syntax:
<b> Bold Text </b>
<i> Italic Text </i>
<strong> Bold text </strong>
<em> Italic text </em>

9. Title Tag
<Title> tag is used to define the title of the web page. All the tags we studied above come in the body tag of an html program. But title tag is positioned in between <head> tag as shown below.

Syntax:
<!Doctype html>
<html>
<head>
<title> Home Remedies for Diseases </title>
</head>
<body>
</body>
</html>

10. Base Tag
Base Tag specifies the base url for your page.

Syntax:
<head>
<base href=”http://www.zeeshandurrani.com” target=”_blank”>
</head>

Note: The base tag is also defined in the <head> tags.

11. Link Tag
Link tag is used to hook up css style files with your html page and these tags are also defined in the <head> tags.

Syntax:
<!Doctype html>
<html>

<head>
<link rel=”stylesheet” type=”text/CSS” Stylesheet.css>
</head>

<body>

</body>
</html>

12. Style Tag
Style tag is used to insert some specific styles into our html document.

Syntax:
<head>
<style>
P {background-color: 123456;}
P {color: white;}
</style>
</head>

13. Meta Tags
Meta tags are very important for the search engine optimization of your website. Meta tags are used to define the description, keywords, author and refresh rate of your html page. Below is the syntax

Syntax:
<! – - Keywords meta tag — >
<meta name=”keywords” content=“Kids Games, Best of the net, Kids recipes, home remedies”>

<! – Description meta tag — >
< meta name=”Description” content=”Best Kids Websites of 2014”>

<! – - Author meta tag — >
<meta name=”author” content=”Zeeshan Aslam Durrani”>

<!- -Refresh meta tag – ->
<meta name=”http-equiv=”refresh” content=”150”>

14. HTML CSS styling techniques
CSS (Cascading Styling sheets) to style your html tags. There are basically three ways to link CSS styles with your html document.
• Inline CSS Style
• External CSS file
• Internal CSS Style

a. Inline CSS Style
Syntax
<body>
<p style=”color: red; background-color: yellow; font-family: arial; font-size: 30px;”> Paragraph text </p>
</body>

Explanation:
In above syntax <p> tag will have red color for text, yellow background, arial font with 30 pixel size. Let us see other styles to practice styling with html.

b. Internal CSS
For internal CSS we use style tag and put it in our head tag just as shown below.

Syntax:
<head>
<style type=text/css>
Body {background-color: red;}
P {font-size: 25px; color: #123222; background-color: orange;}
H1 {font-family: arial;}
</style>
</head>

c. External CSS
In external css we make a separate text file and define all our css styles in that file and save it with .css extension and then we link it with our main html page in the <head> tag. This style is mostly followed as too much of inline or internal css styles can complicate the code so it is always better to keep our css styles separate from our html file. But you can use all three methods to assign styles to html elements. Below is the syntax to integrate a CSS file with an Html page. Link tag is used to link CSS file with html page.

Syntax:
<head>
<link rel=”stylesheet” type= text/CSS href= ”styles.css”>
</head>

15. Div Tags
Div tags create a block in which you can enter anything you like. Below is the syntax

Syntax:

<body>
<div id=”main” style=”display: block; background-color: black; font-size: 25px; color: white”>
</body>

Display: block will show div as a block. Secondly using id we specify the name of the div tag.

16. Margin Tag
Margin tag is used to specify margin around html elements. Kindly not that margin is different from padding. Margin is specified in left, right, up or down of an html element. Margin shows space around an object whereas padding shows space inside an object. Below is the syntax.

Syntax:
<div style=”left-margin: 10px; right-margin: 10px; top-margin: 10px; bottom-margin: 10px;”>

17. Padding
Padding is just like margins but padding is space inside an element. For example we use padding inside table cells.
Syntax:
<p style=”padding: 10px”>
Explanation:
Padding: 10px leaves 10 pixels space in all the four directions left, right, up and down.

18. HTML Tables
Below is the syntax for html tables. Normally th, td and tr tags are used in tables.

Syntax:
<body>
<table border=”3”>
<tr>
<th> Serial # </th>
<th> Employee Names </th>
</tr>

<tr>
<td> 1 </td>
<td> John Smith </td>
</tr>

<tr>
<td> 2 </td>
<td> Will Smith </td>
</tr>

</table>
</body>
Explanation
<table border=”3”> —- specifies the table border width
<th> shows the table header and it is normally bold and in heading format
<td> show coloumn or table data
<tr> tag is used for table row.

18. HTML Lists
There are two kind of html lists ordered lists and unordered lists. Ordered lists display sequential numbers before all the elements whereas unordered lists show just bullets before all the elements

Syntax:
Ordered List
<body>
<ol>
<li> Apples </li>
<li> oranges </li>
<li> bananas </li>
</ol>
</body>

Unordered Lists

<body>
<ul>
<li> Peanuts </li>
<li> Almonds </li>
<li> Cashew Nuts </li>
</ul>
</body>
Result:
1. Apples
2. Oranges
3. Bananas

• Peanuts
• Almonds
• Cashew Nuts

19. Span Tag
Span tag has no special meaning and mostly it is used to add some text style below example will show how.

Example:
<body>
<p> This is paragraph one <span style=”color: red;> on html language </p>
</body>

20. HTML Web Layout
Below is a complete html code to make an html web page layout. I hope you would like and experiment it. Just copy paste my code in your notepad. Save as .html filename and try different variations with colors to see the magic happen. Normally for colors we use color: #111fff six digits blend of numbers and alphabets.
Html Layout Code:
<!Doctype html>
<html>
<head>
</head>

<body>
<div id=”container” style=”background-color: orange; width=500px”>
<div id=”header” style=” background-color: brown; color: white; margin-bottom: 0px; ”> Main Header</div>

<div id=”sidebar” style=”background-color:green; color: yellow; float: left; width: 100px; height: 300px>

<OL>
<li> Fruits </li>
<li> Vegetables </li>
<li> Nuts </li>
<li> Fresh Drinks </li>
</OL>
</div>

<div id=”main” style=”background-color: #222FFA; color: black; float: left; width: 400px; height: 300px>
</div>

<div id=”footer” style=”background-color:pink; color: brown; clear: both; width: 500px; height: 100px; margin-bottom: 0px;>
<bold> <em> @ Copyright Zeeshan Aslam Durrani ! All rights reserved ! </em> </bold>
</div>
</div>
</body>

</html>

Leave a Reply

Your email address will not be published. Required fields are marked *


5 × one =

CommentLuv badge