HTML Tutorial

HTML Tutorial is designed for the web developer who is interested in designing websites and web applications. You can use HTML in any programming language like JSP, PHP, ASP etc.

HTML is the basis or backbone in creating a Web application or Website. In every file HTML will always with <HTML> tag and ends with </HTML> tag. The web browser reads the content of the file which is inside the <HTML> and </HTML> tags and displays on the browser.

HTML tags are case-insensitive. That is, <HTML> will be the same as <html> and </HTML> will be the same as </html>.

Table of Contents

<HEAD> tag in html

The header will serve as an identifier on the page you create. Inside the header we define the meta data, information related to document etc. To define header in HTML tag you need <HEAD> tag and you should add <HEAD> tag below the <HTML> tag and it will look like this:

<HTML>
<HEAD>
 <!-- Head Contents -->
</HEAD>
</HTML>

<BODY> tag in html

The body section is the section where you can write any text that you want to display on a web page. To define body, we use <BODY> tag to start the body and end it with the </BODY> tag.

<HTML>
<HEAD>
 <!-- Header Part -->
</HEAD>
<BODY>
 <!-- Body Part -->
</BODY>
</HTML>

<TITLE> tag in html

By using <TITLE> you we give the title to the web page that we created. Title tag starts with <TITLE> and ends with </TITLE>, we put the title tag inside the <HEAD>…</HEAD> section.

<HTML>
<HEAD>
<TITLE>Welcome to GeekCer</TITLE>
</HEAD>
<BODY>
Hello geeks, How are you all?
</BODY>
</HTML>

Html headings <H1>…</H1>

The headings are different from tags, because content inside <TITLE>… </TITLE>will not appear in web pages but content inside <H1>…</H1>will appear in web pages.

HTML provides six levels of headings which are <H1>, <H2>, <H3>, </H4>, <H5> and <H6>.

<HTML>
<HEAD>
<TITLE>Title of Web page</TITLE>
</HEAD>
<BODY>
  <H1>...</H1>
  <H2>...</H2>
  <H3>...</H3>
  <H4>...</H4>
  <H5>...</H5>
  <H6>...</H6>
</BODY>
</HTML>

Paragraph <P>…</P> in html tutorial

To create a paragraph in HTML, you can use <P> tag to start and </P> tag to end. You can adjust the paragraph you create by using the ALIGN attribute followed by the position (LEFT, RIGHT, CENTER).

<HTML>
<HEAD>
  <TITLE>Paragraph Example</TITLE>
</HEAD>
<BODY>
  <P ALIGN="right"> Paragraph with right aligned. </P>
  <P ALIGN="center"> Paragraph with center aligned. </P>
  <P ALIGN="left"> Paragraph with left aligned. </P>
</BODY>
</HTML>

Preformatted Text <PRE>…</PRE> in html (Tutorial)

We use the <PRE> tag is html to display text the same as we type in an HTML document. The browser will display in a monospaced font (usually courier new).

<HTML>
<HEAD>
  <TITLE>Preformatted Text</TITLE>
</HEAD>
<BODY>
  <PRE> Contents in the first line.
  Contents in the section line.</PRE>
</BODY>
</HTML>

Begin Row <BR> in html

The <BR> tag will create a newline without the leave a blank space underneath. We use <BR> tag to break the line and start text for the next line.

<P>HTML will help you to design the website 
  <BR>but if you use CSS with html then you 
  <BR>will have better look can feel.
</P>

Link <A>…</A> in html (Tutorial)

In the html, we use the anchor <A> command to create links. And it uses HREF attribute to refer the page or resources.

If you want to create a link in a same document HTML then you can specify a name of the anchor location for the link. You can create anchor name by adding the NAME attribute to the <A> tag.

<HTML>
<HEAD>
  <TITTLE>Link Example</TITTLE>
</HEAD>
<BODY>

  <A NAME="up">Top content</A>

  <P>Get, <A HREF="#down">More info</A> </P>


  <A HREF="destination.html">Go to destination page</A>

  <A NAME="down">Location in same page</A>

  <A HREF="#up">UP</A>
</BODY>
</HTML>

<TABLE> in html (Tutorial)

We can use table to display information concise and easy to read that is why we use table. The start tag of the table is <TABLE> and the closing tag is </TABLE>.

The <TABLE> tag has several important parts:

<CAPTION> …</CAPTION> : We use it to form the title of table. The table title will be available outside the table at the top or bottom.
<TH>…</TH> : We use this tag to put the table title at the top or the far left of the table.
<TD> … </TD> : To write data or information in a table.

Table ALIGN and WIDTH

Use the ALIGN attribute for horizontal alignment, which can be left for left alignment, right for right alignment. You can use VALIGN for vertical alignment, TOP for top alignment, MIDDLE for center alignment, and BOTTOM for bottom alignment. Meanwhile, we can use WIDTH to set the width table, usually expressed in (%) or expressed in pixels that actually have a size.

Table CELLSPACING and CELLPADDING

We use CELLSPACING attribute to specify the amount of space between the two cells and CELLPADDING to set the amount of space between the boundaries/border with the content or text in the cell.

Table COLSPAN and ROWSPAN

We use COLSPAN attribute to merge multiple columns into 1 column and ROWSPAN to merge multiple rows into one.

<html>
<head>
<title>Example of Table in html</title>
</head>
<body>
  <table width="50%" border="1" cellspacing="5" cellpadding="5">
   <tr>
    <td width="40%" rowspan="2">Width 40% and rowspan 2</p></td>
    <td width="60%">Width 60%</td>
   </tr>
   <tr>
    <td width="60%">Width 60%</td>
   </tr>
   <tr>
    <td width="100%" colspan="2">Width 100% and colspan 2</td>
   </tr>
</table>
</body>
</html>

Ordered List <OL> in html

When you need a list where each section should be numbered sequentially then you should go for ordered list. You can achieve this by using tag <OL>…</OL> tags. For each part you can use <LI> …</LI> inside the <OL>…</OL>.

When using this OL the numbering starts 1,2,3,… , but you can change it by using the TYPE attribute in the <OL>.

TYPE=1: ordered list with 1, 2, 3,
TYPE=I: list in order of I, II, III,
TYPE=a: an ordered list with a, b, c,

<OL>
 <LI>First Part</LI>
 <LI>Second Part</LI>
 <LI>Third Part</LI>
 <LI>Fourth Part</LI>
</OL>

Unordered List <UL> in html

In an unordered list, there is no order in a list. Every part of the unordered list marked with a bullet which is the default for unordered lists. To create this tag <UL> to start and for closing we use </UL>. We use <LI>…</LI> for each part.
We can also use disc marks, circles, etc. as well.

<UL TYPE="square">
 <LI>First Part</LI>
 <LI>Second Part</LI>
 <LI>Third Part</LI>
 <LI>Fourth Part</LI>
</UL

Graphics in Web Pages html (Tutorial)

In HTML, We use the IMG tag to display images in web pages. The most frequently used images on web pages are GIF and JPEG.

We use SRC attribute to determine the source of the image and ALT attribute as text instead of images.

There are several attributes in the IMG tag, namely:

BORDER: give a border or border on the image by default=0
HEIGHT,WEIGHT: specify the height and width of the image in pixels
HSPACE,VSPACE: specify the horizontal spacing and vertical spacing between images with surrounding objects.
ALIGN: adjusts the alignment of the image to the surrounding objects.

<IMG SRC="image_file" ALT="alternative_name">

Html Forms <FORM>…</FORM> in html (Tutorial)

The <FORM> and <INPUT> tags are used together to request input from the user for sending to the Server. The <FORM> tag creates the outline and the <INPUT> tag provides the elements interface with the user. For standard form writing are as follows:

<FORM METHOD="POST/GET" ACTION="URL">
…
…
…
</FORM>

The METHOD attribute has 2 values POST and GET. GET method sends data on server by putting the data at the end of the designated URL. POST method send the data separately. If there are many inputs, it is recommended that you use POST. ACTION will contain the URL of the program called by the form.

TextBox in html

Textbox is a type of control for entering data. HTML provides <INPUT> tags with attribute TYPE=”text” to create an input box. We use VALUE attribute to give the input value, and SIZE to determine the longest limit of an input.

<input type="text">

CheckBox in html

You can provide a TYPE attribute by using a working Checkbox to give the user a choice.

<input type="checkbox">

Radio button in html

If you replace the TYPE=”checkbox” attribute with TYPE=”radio”, the user will be able to select only one available option. User cannot choose more than one option. You can CHECKED attribute for default selection.