Learn HTML | html tutorial to create html website

on

Learn HTML - What is HTML?

HTML is markup language used as front-end web development while creating websites. It is the backbone of every website that are available in world wide web(WWW). Almost all websites like Quora , Amazon used HTML. To view the html source code of any website, just point your mouse cursor anywhere on website, right click on it and finally click on view source code then it will show you  the source code of the website it is written in. After learning HTML, you can jump into CSS or JavaScript for making it more interactive and responsive.

HTML example:


<!doctype html>

<html>

<head>

<title>this is title</title>
</head>

<body>

<h1>this is heading 1</h1>
<p>this is heading 2</p>
</body>
</html>

Output:


this is heading 1

this is paragraph
  • This output shows only that part which is inside <body> element.

HTML Basics - Learn html code for website

HTML Element

  • Elements contains start tag and end tag with content within it. Start tag might be <body> and end tag be </body> with forward slash before tag. 

HTML example:

<body>

<h1>this is heading</h1>
<p> this element contains paragraph.</p>

</body>
  • Some elements do not have end tag like <br>.which means line break.

HTML example:

<body>
<h3>this is heading</h3>
<p>this is <br>paragraph</p>
</body>

Output:

this is heading

this is 
paragraph

HTML Editor

  • HTML Editor are the tool used to write HTML codes for creating web pages. 
  • Professional HTML editor can be used such as Dreamweaver but simple editor is proved to be helpful like Notepad for writing HTML.

To use Notepad, open Start>Programs>Accessories>Notepad
Then write some codes


Next, save it anywhere as File>Save As

Name the file with any name.html


Now open it in your favourite browser by simply double clicking on it or by using (open with) after right click on it. It will probably look like this after opening in browser.


HTML Programs - HTML Headings

  • Headings are defined with <h1> to <h6> tags. 
  • Heading <h1> is by default largest heading. <h1> heading should be used for main heading, <h2> for sub-heading and <h6>for least important heading. 
  • You can change its size using CSS font-size property. 

HTML example:

<body>

 <h1 style= “font-size: 60px;”>Bigger heading</h1>

</body>

Output:

Bigger heading

  • Headings are very important because search engine uses heading to index website
  •  People searches across website with the help of heading.

HTML example:

<body>

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

</body>

Output:

this is heading 1

this is heading 2

this is heading 3

this is heading 4

this is heading 5
this is heading 6


HTML Programs - HTML Paragraph

  • HTML <p> element is define  as a paragraph.

HTML example:

<body>
<p>this is paragraph</p>
<p>this is another paragraph with <br> line break</p>
</body>

Output:

this is paragraph

this is another paragraph with
line break

Note : Browser will automatically add some space before and after a paragraph. 
  • Browser will not add space or extra pattern as it is pre -set in source code when displayed.

HTML example:

<body>
<p>this para contains a lot of     spaces
and breaks but browser just ignore it</p>
</body>

Output:

this para contains a lot of spaces and breaks but browser just ignore it

  • To overcome such problems, you can use HTML <pre> element that means pre formatted text.

HTML <pre> Element

This element saves spaces and extra pattern and displays as same as how it is set to be.

HTML example:

<body>
<pre>

 x                 x
     x        x
          x
     x        x
x                 x

</pre>
</body>

Output:

 x                 x

     x        x

          x

     x        x

x                 x









HTML Programs - HTML Links




    

  • Links let you to jump from one page to another page or website. These links are called hyperlinks. 
    • 

  • HTML links are defined with <a> tag.
    • 

  • The syntax of HTML link is <a href="url">link text</a>
    • 

  • A link can be local link(link to the same website) or can  be full address link as above.
    • 






HTML example:

<body>



<a href="https://techfunss.blogspot.com/" target="_blank">go to this website</a>

</body>


    

  • In this example, href attribute means  destination of link. 
    • 

  • When you click go to this website link, it goes to full link address mentioned in Href. 
    • 

  • Target attribute defines where link should be opened. Here link is opened in new window due to "_blank" attribute. 
    • 




Output:


















    

  • Target attribute may have different values like:
    • 



    

  1.  _blank= Opens the linked document in new window.
    2. 

  2.  _self = Opens the linked document in same tab.(This is default)
    3. 

  3.  _top = Opens the linked document in full body of same window.
    4. 





    

  • Images can be used as a link instead of text. When you click the image, it will take you to its linked address.
    • 








HTML Titles



This attribute gives title to the element and give extra information about it. It worked as a tooltip when mouse is hovered over the element.



HTML example:

<body>

<a href="https://techfunss.blogspot.com/" target="_blank" title="Tech review">go to this website</a>







</body>







Output:

go to this website









This output shows title "Tech review" when your mouse is hovered over this link.





HTML Programs - HTML Table




    

  • Table element is used to create table to make written content more readable. By default, it will not add styles like border, color, columns, rows. So we have to use CSS style property.
    • 

  • Table heading<th> will bold and centered by default.
    • 






HTML example:



<body>



<table style="width:100%">



<tr>

<th>Solid</th>

<th>Liquid</th>

<th>Gas</th>

</tr>



<tr>

<td>stone</td>

<td>water</td>

<td>nitrogen</td>

</tr>



<tr>

<td>rock</td>

<td>milk</td>

<td>oxygen</td>

</tr>



<tr>

<td>brick</td>

<td>tea</td>

<td>hydrogen</td>

</tr>

</table>



</body>





Output:






    

  • Table element is used to create table to make written content more readable. By default, it will not add styles like border, color, columns, rows.
    • 






Adding a border




    

  • We can use CSS border property in table to make it more attractive.
    • 






HTML example:



<!doctype html>

<html>

<head>

<style>

table, th, td {border:1px solid black ;}

</style>

</head>



<body>

<table style="width:100%">



<tr>

<th>Solid</th>

<th>Liquid</th>

<th>Gas</th>

</tr>



<tr>

<td>stone</td>

<td>water</td>

<td>nitrogen</td>

</tr>



<tr>

<td>rock</td>

<td>milk</td>

<td>oxygen</td>

</tr>



<tr>

<td>brick</td>

<td>tea</td>

<td>hydrogen</td>

</tr>

</table>



</body>

</html>



Output:






    

  • Remember to specify border in both table and cells (table, td, th)
    • 




 Collapsed Border




    

  • You can collapse border into one by using CSS border-collapse property.
    • 








HTML example:





<!doctype html>

<html>



<head>

<style>

table, th, td {border:1px solid black ;      border-collapse:collapse;       }

</style>

</head>



<body>

<table style="width:100%">



<tr>

<th>Solid</th>

<th>Liquid</th>

<th>Gas</th>

</tr>



<tr>

<td>stone</td>

<td>water</td>

<td>nitrogen</td>

</tr>



<tr>

<td>rock</td>

<td>milk</td>

<td>oxygen</td>

</tr>



<tr>

<td>brick</td>

<td>tea</td>

<td>hydrogen</td>

</tr>

</table>

</body>

</html>



Output:









  


Adding Cell Padding and text-align




    

  • Cell padding is the space between content and border. 
    • 

  • Without specifying cell padding, table do not display padding by default. Use CSS padding property to define padding.
    • 

  • Text-align CSS property can be used to make text left, right, center. Now, we will be using this property to left-align text heading as it is centered by default.
    • 




HTML example:





<!doctype html>

<html>



<head>

<style>

table, th, td {border:1px solid black ;      border-collapse:collapse; }



td ,  th { padding : 8px; }



th { text-align : left ; }

</style>

</head>



<body>

<table style="width:100%">



<tr>

<th>Solid</th>

<th>Liquid</th>

<th>Gas</th>

</tr>



<tr>

<td>stone</td>

<td>water</td>

<td>nitrogen</td>

</tr>



<tr>

<td>rock</td>

<td>milk</td>

<td>oxygen</td>

</tr>



<tr>

<td>brick</td>

<td>tea</td>

<td>hydrogen</td>

</tr>



</table>

</body>

</html>



Output:



























If you want basic information about these HTML Tags, you have to read previous article. Click this link  

                                                                                       




 





















































































































































































































Comments











Post a Comment