HTML TUTORIAL



















Table of contents:

Ch1. Introduction to HTML crash course:





Hey people, in this crash course, You gonna explore the HTML language with me. I already have created table of contents for this crash course . So let me just give you a quick review on what we are gonna be learning in these 15 days crash course of HTML.

Wanna learn programming in order to build a website then visit >> How to create a website for free 



Ch2. Overview:

HTML acronym for hyper text markup language. It is the most widely used language to build web pages.  HTML is simply a collection of  certain keywords called tags. HTML is a platform independent language i.e. It supports all operating system i.e. Linux, Windows, Mac etc.

Hyper text: The term Hyper text was coined in 1965 by Ted Nelson. It is a text which contains links to another text. Hyper text is not constrained to be linear i.e. It is written inside tags.

Markup language: is the combination of words and symbols which gives instructions on how a document should appear e.g. We use tags for Italic and bold.

Ch3. Fundamentals of HTML

 

1. Creating Saving and Weaving a HTML document
  • A HTML document can be created by using any of the editor such as notepad which should be saved with a ".htm" or ".html" extension.
  • HTML file can be viewed on web browsers like Google Chrome, Mozilla Firefox or Internet explorer.
  • For creating HTML document we use predefined HTML tags which we gonna look in details later on this HTML course. 

 2. Basic format/Structure of HTML tags:

This is the basic structure which is always followed in every HTML document. You just have to type it in your notepad and then save it as an extension ".htm" or ".html" and your HTML document will get created.

<HTML>
<HEAD>
<TITLE> This will be displayed as your title for your document</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>

 
Ch4. Tags in HTML

Tags in HTML are instructions that are embedded directly into text of documents. HTML Tags are signals to a web browser that what it should do something other than just throw the text on screen. All HTML tags begin with an open angular bracket "<" and end with closing angular bracket ">" e.g.
<tag name> 

  Types of HTML Tags 

HTML tags are of two types:
i).  Container(paired):- Tags which have both opening and closing i.e. they hold text and other HTML tags in between the tags e.g.

<b> some text in bold </b>
<i> some text in italic </i> 

ii). Empty tags:- these are tags which have only opening and no endings are known as empty tags in HTML.


 Body tag Attributes:-

 This tag is used for defining body attributes i.e.

<body bg color="red">
<body background="image">
<body text="color name">
<body left margin="pixel">  

similarly, it's
<body top margin="pixel">   
<body right margin="pixel">

FORMATTING WEB PAGE:- 

i). Section Heading: There are 6 section heading tags in HTML. It starts with <h1> tag and goes down to <h6>. If a content is written in <h1> tag then it is the biggest of all in size, <h2> heading tag are slightly smaller in size as compared to <h1> tag and this trend follows till <h6> and <h6> is the smallest section heading tag available in HTML.

<H1> Biggest of all</H1> 
<H2> Bigger</H2> 
<H3> Big</H3> 
<H4> Small than h3 tag </H4> 
<H5> Smaller</H5> 
<H6> Smallest of all the above</H6>      


ii). Paragraph Tag: this tag indicates two paragraph to get separated by a blank line.
 i.e. 
<p> hello this text is written inside a paragraph tag and it will get separated with a blank line</p>

Attributes of Paragraph Tag 

Alignment attribute:  This align attribute is used in paragraph to arrange the paragraph according to the ones look and feel. A paragraph could be aligned in 4 ways using align attribute. i.e.
align="right/left/center/Justify"  e.g.

<p align="right">

            ----------------------------------------
                  --------------------------------------
       ---------------------------------------------
         --------------------------------------------
  -------------------------------------------------
  -------------------------------------------------
         -------------------------------------------- 
<p align="left">

 -------------------------------------------
 ----------------------------------
 -------------------------------------
 --------------------------------
 --------------------------
 --------------------------------------------
 -------------------- 
<p align="center"> 

------------------------------------------
-------------------------------------
---------------------------------
---------------------------------------------
-----------------------------------
--------------------------------
----------------------------------------------
----------------------------------------







<p align="justify">


     ------------------------------------------
     ------------------------------------------
     ------------------------------------------
     ------------------------------------------
     ------------------------------------------
     ------------------------------------------
     ------------------------------------------
     ------------------------------------------


We can also pass attributes like bgcolor to change the background color of the paragraph
e.g.
<p align="right" bgcolor="blue"> Your paragraph text here</p>
Here the text written inside the <p> </p> tag will get aligned right and will have blue color.

iii). Line Break Tag: this is an empty tag and is used whenever we want to start a new line. 
Tag- <br/>
e.g.

<body>
Hello! I am shiv and I am your host and guide here.<br/> I live in India.
</body>

Note:  As you insert <br/> tag in between the sentence it will start write "I live in India."  in a new line.

iv). Horizontal Rule Tag:  It's an empty tag used to draw a horizontal line.

Attributes of Horizontal Rule Tag
  • Size=pixel  e.g. <hr size="3px"/>
  • width="px/%" e.g. <hr width="3px"/>
  • Align="right/left/center" e.g. <hr Align="left"/>
  • Color="color name" e.g. <hr color="red"/>

v). Pre Formatted Tag: this <pre> tag is used to print your text as it is written. It preserves the spaces and line breaks in the text written inside the tag.
e.g. 
<body>
<pre>
Shiv kesh dubey
Your host and guide
Lives in India
You are currently learning HTML
</pre>
</body>

  
vi). Text or Character Formatting Tags: It is used to specify how a particular text should be displayed on the screen to distinguish certain characters withing the document.

  • Bold Phase: tag used to write text in bold. e.g. <b>your text in bold</b>
  • Italic Phase: tag used to write text in italics. e.g. <i>your text in italic</i>
  • Underline Phase: tag used to write text in underline. e.g. <u>your text in underline</u>
  • Big text:  this tag will increase your text size from your default webpage text. e.g. <big>your text in big</big>
  • Small text: this tag will decrease your text size from your default webpage text.. e.g. <small>your text in small</small>
  • Sub Script: this tag is used to write sub text like if you were to write H2O.                                    Code:  H<sub>2</sub>O
  • Super Script: this tag is used to write super text like if you were to write a2+b2.                  Code: a<sup>2</sub>+b<sup>2</sub>                                            

vii). Font Tags: It is a deprecated tag used with attributes i.e. Face, Size, Color.
e.g. 
<font color="red" face="arial" size="px"> 
Text
</font>
NOTE:  Attributes sequences does not matter. Size also takes values between 1 to 7. 
            The default size is 3.
e.g.   <font size="5" color="red">
          Your text here
         </font> 

Ch5. Symbols in HTML

Symbol Code
& &amp;
< &lt;
> &gt;
© &copy;
® &reg;
}} &raquo;
{{ &laquo;
1/4 &frac14;
1/2 &frac12;
♠ &spades;
♥ &hearts;
• &bull;
White space &nbsp;

NOTE: Here you only have to paste the code of the Symbol and the symbol will get generated itself.


Ch6. Lists in HTML

There are two types of lists in HTML:
i). Ordered List
ii). Unordered List


i). Ordered List: It is written as <ol>. An ordered list is also called a numbered list. It should begin with <ol> tag followed by <li> tag.

Attributes:- 
  • Type="1|A|i|"
  • Start="Start positon"

NOTE:  Start position is where you wanna start your ordered list from. If you wanna start from 10 then you type in <ol type="1" start="10"> and your ordered list will get started from 10.


ii). Un Ordered List: It is written as <ul>. An unordered list is also called a bulleted list, used to present list of items marked with bullet. It should begin with <ul> tag followed by <li> tag.

Attributes:- 
  • Type="disc|square|circle|"                                                            

NOTE: There is no Start position in an unordered list. The default type of unordered list is disc.

e.g. Code of unordered list

<ul type="square">
<li>HTML</li>
<li>CSS</li>
<li>JAVA SCRIPT</li>
<li>PHP</li>
</ul>

OUTPUT

  • HTML
  • CSS
  • JAVA SCRIPT
  • PHP


iii). Nested List:  A nested list is actually not a type of list in HTML but it is actually a combination of both ordered and unordered list together.

e.g. Code of nested list

<ul type="disc">
<li>
 <ol>
<li>Chemistry</li>
<li>Maths</li>
<li>Physics</li> 
</ol>
</li>
<li>
<ul type="square">
<li>History</li>
<li>Geography</li>
 </ul>
</li>
</ul>

OUTPUT

    1. Chemistry
    2. Maths
    3. Physics
    • History
    • Geography


    Using Graphics in Web Pages

    Images can be placed in a webpage by using <img/> tag. Img has many attributes like Src, Alignment, Height and Width, Hspace and Vspace, Alt tag, Border etc. Let’s have a look at them in details.

    Attributes of img Tag

    1. Src:  This attribute is used to give the name of the image with their path it exists in any other location e.g. <img src=”sunset.jpg”/>
     2.  Align: Used to set the alignment of the text adjacent to the image. It takes the following value left, right, top, middle and bottom

    Note: By default the text is aligned with the bottom of the image.

    3. Height and width:  this attribute is used to set width and height of the images.

    4. Hspace and Vspace: this space is used for the white space provided around the image.

    5. ALT tag: This is also known as the alternative text. This attribute is used to give alternative text that can be displayed in the place of the image.

    6. Border: This attribute is used to give border around the image. By default image is displayed with a very thin border. E.g.
    <img src=”sunset.jpg” alt=”sunset” border=”5” Hspace=”50” Vspace=”50”/>

    Links in HTML

    For links in HTML document we use anchor <a> tag by giving hyper reference <href> value. We can also specify the targeted attribute having the values
    i.    New
    ii.    _self
    iii.    _blank
    iv.    _parent

    Note: _self is the default targeted attribute in link.

    External Links in HTML



    <a href=http://www.google.com target=”_blank”>Visit Google</a>

    _new:- this attribute value opens the new tag or window when clicked on any link of parent window but if we click on the parent link again the new tab or window will over right the child tab or window.

     _blank: It opens the new tab or window every time when it is clicked.
    Internal Links in HTML

    An internal link in HTML is used to link internal pages of the same site. E.g. If we want to link to about.html page of our website, we can do this by using Internal linking which is like.

    <a href=”about.html”> About Us</a>

    Same Page Links/Section Links in HTML

    Syntax:    <a href=”#Section_name”>Link text</a>
    <a name=”section_name”>Target</a>
    e.g.
    <a name=”head”></a>
    <a href=”#foot”>Bottom</a>
          ____________________________________________________________________
          ____________________________________________________________________
          ____________________________________________________________________
          ____________________________________________________________________

         <a href=”#head”>Top</a>
         <a name=”foot”></a>


         Linking Images in HTML

         <a href=http://www.google.com><img src=”Google logo.jpg” alt=”/></a>


 HTML Tables:

 Tables are defined with <table> tag.  A table is divided into rows with <tr> tag and each row is further divided into data cells with the <td> tag. We can also use table heading <th> tag in place of <td> tag in 1st row. e.g.

Roll No Name Address
1 Anuj Lucknow
2 Shiv Allahabad


It’s Code:

<table>
<tr>
<td> Roll No </td>
<td> Name </td>
<td> Address </td>
</tr>
<tr>
<td> 1 </td>
<td> Anuj </td>
<td> Lucknow</td>
</tr>
<tr>
<td> 2 </td>
<td> Shiv </td>
<td> Allahabad </td>
</tr>
</table>

Attributes of Table Tag:

1. Align: It is used to align the table according to our requirement. E.g.
<table align=”left/right/centre”>
   
2. BgColor=”color name/color code”

3. Cellpadding: Cell padding is used to give internal gaps around the cell content. E.g. <table cellpadding=”5px”>

4. Cellspacing: Cell spacing is used to give marginal gaps between the cells. E.g. <table cellspacing=”5px”>

5. Height: It is used to assign the height of the table e.g. <table height=”5px”>

6. Width: It is used to assign the height of the table e.g. <table width=”5px”>

7. Border: It is used to set the border height of the table e.g. <table border=”1px”>

8. Colspan: It is used to merge two or more columns in one table. e.g.


<table>
<tr>
<td></td>
<td Colspan=”2”></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

9.    Rowspan: It is used to merge two or more rows in one table. 

e.g.
 
<table>
<tr>
<td rowspan=”2”></></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

10.    Valignment: It is an attribute of <td> tag. It is used to align images or text from top, bottom, right or left of the <td> cell.

 E.g.

<table>
<tr>
<td valign=”top”> Hello this is Anuj</td>
<td Colspan=”2”>Here is my pic.</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

11.    Rowspan: It is used to merge two or more rows in one table. e.g. 

<table>
<tr>
<td rowspan=”2”></></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

Note: We can also use attributes like align, BG color, height, width in <td> tag.

HTML FORMS

Forms are used to pass data to the server.  It can contain input elements like text field, check boxes, radio button, submit button etc. These elements are enclosed in form tag.
 E.g.

<form>
Form elements
</form>

HTML Form Elements: 

1.    Input type: It is used to create an input box in order to insert value inside
 e.g.


 
Code:
 
<input type=”text” name=”first_input” value=”it’s the value which we want to be displayed by default” maxlength=”no of characters” disabled=”disabled” read only=”read only”/>

 2.     Password field: Password field is used in HTML forms to insert password specified by the user in the table.

 E.g.

<input type=”password” size=”” name=”” maxlength=”it is used to limit the size of password and it is given in numeric characters”>

Output:

 

 3.    Radio Button: It let the user to select only one choice from multiple options.
 i.e




        Code:

<input type=”radio” name=”” value=””/>
4.    Check Box: It lets the user select multiple choices.





 
 Code:<input type=”checkbox” name=”” value=””/>
    
 
5.    Combo Box: It is used to select a value from the drop down list. 

 i.e.


                             
Code:

<Select name=“”>
<option value=””>Country</option>
<option value=””>India</option>
<option value=””>China</option>
<option value=””>Japan</option>
<option value=””>France</option>
</selected>
 
Note: 

i.    The option value written first is the default value type.
ii.    To change the default value type we use “selected” term. 
 
i.e. 

<option value=”” selected>China</option>

6.    Button: It is used to create button in HTML forms.
 E.g.

<input type=”button” name=”” value=”submit”/>

7.    Submit Button: Unlike the ordinary button, submit button is used to submit the form
 e.g.

<input type=”submit” name=”” value=”submit form”/>

8.    Reset Button: Reset button is used to reset the HTML form values. 
E.g.

<input type=”reset” name=”” value=”Cancel form”/>

9.    Text Area Field: Text area field is used in HTML forms to create text box area where one could write while submitting the form.
E.g.

 


Code: 

<textarea name=”” rows=”specify the no of rows in numbers” cols=” specify the no of coloms in numbers”>
</textarea> 




No comments:

Post a Comment

Subscribe to: Posts (Atom)