Ticker

6/recent/ticker-posts

Introduction to HTML

TechWaker August 10, 2020
Code, Programming, Coding, Web, Language ,Introduction to HTML

    Hyper Text markup Language(HTML) was created in the 1990's by Sir Tim Berners-Lee and has until now evolved lot..HTML 2 .0 and 4.01 were also published in the same decade.HTML 5 was published in 2012 and 4.01 and 5 were among the successful models.

It was originally developed to help publish and exchange documents.This in a web page defines the content and structure that page.You might have already got an intuition on web development from our previous post.Here as said we will discuss some techniques and code for adding elements like paragraph , images ,video , forms and more.Hope this might seem interesting for you.

    The < !DOCTYPE html > , for HTML 5 declaration is the beginning of the code indicate the document type that help to display the web page in proper way.The exact code begins with the <html > tag and end with the </html> tag.Inside this you have the head and body tags.Inside the <head> tag you have the information regarding title (that is displayed as shown below when you open a web page) , attached style sheets, scripts ,other html pages etc and all non-visual elements that make your page work. The <body> tag is were all your content displayed goes.Both of these have opening and closing tags.They have headings, elements ,paragraphs, images ,texts, videos, links and more. we will go through them one by one.

    The <meta> tag inside the <head> tag gives information like character sets,keywords, author,page description etc .The charset attribute indicates the character set used for encoding the HTML document. UTF-8 is the most commonly used which stands for Unicode character set.

    The html elements are written using start tag and end tag with content in between.They are classified as inline and block elements.Block level elements always start from a new line ,while inline can be applied regardless of line breaks. Eg <h1> ,<li> ,<ul>,<ol> ,<div> ,<table> ,<form> etc are block elements and <p> ,<a> , <img> ,<span> ,<i> etc are inline elements.

    <div> is used as a container element in HTML by while you can apply same styles and all to multiple tags as a block , while <span> can used multiple times inside the div element.

    The html attributes are those that provide additional information about the element or tag.Example text or line align ,line width, image height etc are attributes.Multiples attributes are separated by spaces.Look below

< p align="right" > This paragraph is aligned to right </p>    

   You can define width and height in terms of percentage and also pixels.You put the percentage values in quotes like "30%" .

<hr width=30 px  />    

    There we begin with headings .Heading range from <h1>,<h2>,<h3>,....<h6> in decreasing order of size.You can't just randomly misuse the heading tags everywhere.Look at the syntax.

<h1>Largest Heading</h1>          <h6>Smallest heading</h6>

Output: 

Largest Heading        Smallest Heading


*  For commenting inside the code for notes and descriptions you can use <!-- Your Comment -->  tag.

* For horizontal lines you use the <hr/> tag.And for lines breaks <br/> tag .

For paragraphs:<p> tags are used . 

                          syntax : <p>This is a paragraph</p>

    You can use text formatting to modify your displayed text.Example strong ,italic ,bold ,subscripted ,superscripted ,inserted ,deleted,regular ,big or small.All by simply placing them inside tags <strong> ,<i> ,<b> , <sub> ,<sup> ,<ins> ,<del> ,no tag for regular ,<big> ,<small> respectively.remember they have closing tags.

    If you need to insert images in your web page you use the <img> tag.In the src attribute you specify the source of file. You can even put the link of the image in this attribute or the file path.For the alt attribute you give the text to be displayed incase the browser fails to load image so that your viewer understand the image content.You can also provide border and specify its thickness for images.

           <img  src="image.jpg"  alt=" "   width ="50%"  height="50%"   border=2px />

    To include links to images or texts in your web-pages that direct you to other web pages,  you use the <a> tag. The href attribute specifies where to direct the web page it can be URL (Uniform resource locator). You can set target attribute in the <a> tag  to _blank to open the link in a new window. .You can see we have included suck links in our web pages too that takes you too our previous posts.

                < a href="  where to direct  " >  Text or Image to click on  </a>     

This link opens in the same window.

Another thing you can create is lists ,may be ordered or unordered, that is enclosed with <ol>...</ol> and <ul> ...</ul> .respectively.Your items in the list has to bee inside the <li> ...</li> element.

<ul>  
         <li>First</li>                                                    
         <li>Second</li>                                                           
         <li>Third</li>  
 </ul>                                                  

Output                                                                 

  • First
  • Second
  • Third

<ol>    
        <li>First</li>

        <li>Second</li>

        <li>Third</li>  
</ol>

Output  
  1. First
  2. Second
  3. Third
    For inserting table , you enclose elements in <table> ...</table> .Tag <td> is for columns and <tr> for rows.There are attributes like border ,colspan and rowspan(to expand columns and rows) .You can also apply color and alignation for tables.

  <body>
    <table>
        <tr> 
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>4</td>
          <td>5</td>
          <td>6</td>
        </tr>
    </table>
  </body>

Output:
   
     Now if your wish to make forms to collect information you could use the <form> elements.These are enclosed within <form> .....</form>. For taking input you use the <input> tag. the type attribute inside input tag will specify what kind of information you are collecting.the values can be "password" - that won't be displayed to anyone but only dots ,"text" ,"date" ,"radio" - for selecting one among options ,"checkbox" - for selecting more than one option , "submit " -creates button  for submitting.The value attribute of input is the values that we expect the user to enter or select.

    The action attribute of form is to mention the page it will direct you once you submit the form.This will be a URL.The method attribute has value GET or POST that takes care of privacy .The user input may be displayed on the title bar in case you use GET method.By using POST method you can ensure that information like passwords are not shown there.And the name attribute is to give name to the form.

  <body>
    <form  action="URL "  method= " POST " >
       <input type="text" name='username' ><br/>
       <input type="radio" name="gender"  value="male">  Male <br/>
       <input type="radio" name="gender"  value="female" >  Female <br/>
       <input type="password" value="12345" name="password" >
 </form>
  </body>

Output:


Code for a simple website:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>REVOLUTION 2020</title>
  </head>
  <body>
    <h1 align = "center">  About The Book  </h1>
    <hr align="center"width=50%/>
    <a href="https://www.google.com"  target="_blank">Buy the book from here</a>
    <h2>Revolution 2020</h2>
    <h3>-Chetan Bhagath</h3>
    <img src="https://images.unsplash.com/photo-1544716278-ca5e3f4abd8c?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="150px" height="100px" border="1px"/>
    <p align="left">  Hey,this blog is about a best seller book by famous writer <strong>Chetan Bhageth</strong>.</p>
    <p align="left "><em>Revolution 2020</em> is one of the books that i have read by chetan bhagath.</p>
    <p> The book has the following features:
    <ul>
      <li> good quality</li>
      <li> better font</li>
      <li> convinient language</li>
    </ul>
    <h4>Survey Results:</h4>
    <table border=2>
      <tr>
        <td colspan="2" >categories</td>
      </tr>
      <tr>
        <td bgcolor="blue">Age group</td>
        <td bgcolor="green">Time spent</td>
      </tr>
      <tr>
        <td>10-18</td>
        <td>20 hrs</td>
      </tr>
      <tr>
        <td>19-50</td>
        <td>30 hrs</td>
      </tr>
    </table>
    <br>
    <p>Login to our Page</p>
    <form action="URL "  method= " POST " >
      <label for="username">User Name:</label><br>
      <input type="text" id="username" name="username" value=""><br>
      <label for="password">Password:</label><br>
      <input type="password" id="password" name="password" value=""><br><br>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

Website will be like this:

    

These were the basic introductive part of HTML .We will try to discuss more in depth HTML 5 in our coming article . 

Note :-   After writing the code in your text editor or notepad you have to save it with file extension  file name.html , then on opening it from the folders you can see your web page.

                                      STAY  AWAITED  and  KEEP  READING!!

Tags:

Post a Comment

1 Comments