HTML-for-Beginners

HTML Basic Tags

Basic HTML Format

<!DOCTYPE html>
<html>
  <body>
    Hello world!
  </body>
</html>

<!DOCTYPE html>

Hello world!

Paragraph (Default)

<p>This is a paragraph</p>

This is a paragraph

Paragraph (with alignment attributes)

<p align="left">Paragraph with left alignment</p>
<p align="center">Paragraph with center alignment</p>
<p align="middle">Paragraph with middle alignment</p>
<p align="right">Paragraph with right alignment</p>
<p align="justify">Paragraph with justified alignment</p>

Paragraph with left alignment

Paragraph with center alignment

Paragraph with middle alignment

Paragraph with right alignment

Paragraph with justified alignment

Bold

This text is <b>Bold</b>

This text is Bold

Italic

This text is <i>Italic</i>

This text is Italic

Underline

This text is <u>Underlined</u>

This text is Underlined

Strong

This text is <strong>strong</strong>

This text is strong

Emphasize

This text is <em>emphasized</em>

This text is emphasized

Delete

This text is <del>deleted</del>

This text is deleted

Line Break

There are <br>three </br>lines

There are
three </br>lines

Horizontal Line

There is a horizontal line under this paragraph. <hr>
There is a horizontal line above this paragraph.

There is a horizontal line under this paragraph. <hr> There is a horizontal line above this paragraph.

Subscript

Chemical formula of water is H<sub>2</sub>O

Chemical formula of water is H2O

Superscript

A mathematical formula is (a + b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup>

A mathematical formula is (a + b)2 = a2 + 2ab + b2

Heading

<h1>This is h1 heading</h1>
<h2>This is h2 heading</h2>
<h3>This is h3 heading</h3>
<h4>This is h4 heading</h4>
<h5>This is h5 heading</h5>
<h6>This is h6 heading</h6>

This is h1 heading

This is h2 heading

This is h3 heading

This is h4 heading

This is h5 heading
This is h6 heading

Image (Default)

<img src="waterlilly.jpg">

Image (with width and height)

<img src="waterlilly.jpg" width="150" height="100">

Image (with alternative text, if image is missing)

<img src="waterlilly.jpg" alt="An image of a Waterlily">

An image of a Waterlily

Visit <a href="https://www.google.com">Google</a>

Visit Google

Visit <a href="https://www.google.com" target="_blank">Google</a> in a new tab.

Visit Google in a new tab.

Note: GitHub doesn’t support new tab link opening as of now. But HTML editors will work fine.

Open <a href="basic_html_code.html">Basic HTML</a> file. <br>
Open <a href="horse.jpeg">horse</a> image.

Open Basic HTML file.
Open horse image.

Ordered List (Default)

<ol>
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ol>
  1. Banana
  2. Apple
  3. Mango
  4. Lichi
  5. Orange
  6. Guava

Ordered List (with attribute)

<ol type="A">
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ol>
  1. Banana
  2. Apple
  3. Mango
  4. Lichi
  5. Orange
  6. Guava

Ordered List (Roman Number)

<ol type="i">
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ol>
  1. Banana
  2. Apple
  3. Mango
  4. Lichi
  5. Orange
  6. Guava

Ordered List (start from specific number)

<ol type="1" start="13">
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ol>
  1. Banana
  2. Apple
  3. Mango
  4. Lichi
  5. Orange
  6. Guava

Unordered List (Default)

<ul>
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ul>

Unordered List (Circle)

<ul type="circle">
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ul>

Unordered List (Square)

<ul type="square">
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ul>

Unordered List (Disk)

<ul type="disk">
  <li>Banana</li>
  <li>Apple</li>
  <li>Mango</li>
  <li>Lichi</li>
  <li>Orange</li>
  <li>Guava</li>
</ul>

Nested Ordered and Unordered List

<ul type="disk">
  <li>Fruits</li>
    <ol type="i">
      <li>Banana</li>
      <li>Apple</li>
      <li>Mango</li>
    </ol>
  <li>Vegetables</li>
  <li>Rice</li>
  <li>Oil</li>
</ul>




Table

Table (Default)

<table>
  <tr>
    <td>Name</td>
    <td>Roll</td>
  </tr>
  <tr>
    <td>John</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>
Name Roll
John 2301
Christopher 230002

Table (with double table border)

<table border="1">
  <tr>
    <td>Name</td>
    <td>Roll</td>
  </tr>
  <tr>
    <td>John</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>
Name Roll
John 2301
Christopher 230002

Table (with single table border)

<table border="1" cellspacing="0">
  <tr>
    <td>Name</td>
    <td>Roll</td>
  </tr>
  <tr>
    <td>John</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>
Name Roll
John 2301
Christopher 230002

Table (with table data alignment)

<table border="1" cellspacing="0">
  <tr>
    <td align="left">Name</td>
    <td align="right">Roll</td>
  </tr>
  <tr>
    <td align="right">John</td>
    <td align="center">2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>
Name Roll
John 2301
Christopher 230002

Table (with table row alignment)

<table border="1" cellspacing="0">
  <tr align="center">
    <td>Name</td>
    <td>Roll</td>
  </tr>
  <tr align="right">
    <td>John</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>
Name Roll
John 2301
Christopher 230002

Table (with table heading row)

<table border="1" cellspacing="0">
  <tr>
    <th>Name</th>
    <th>Roll</th>
  </tr>
  <tr>
    <td>John</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>
Name Roll
John 2301
Christopher 230002

Table (Rowspan)

<table border="1" cellspacing="0">
  <tr>
    <th>Name</th>
    <th>Batch</th>
    <th>Roll</th>
  </tr>
  <tr>
    <td>John</td>
    <td rowspan="2">23</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>230002</td>
  </tr>
</table>
Name Batch Roll
John 23 2301
Christopher 230002

Table (Colspan)

<table border="1" cellspacing="0">
  <tr>
    <th colspan="2">First Name & Last Name</th>
    <th>Roll</th>
  </tr>
  <tr>
    <td>John</td>
    <td>Richard</td>
    <td>2301</td>
  </tr>
  <tr>
    <td>Christopher</td>
    <td>Tyler</td>
    <td>230002</td>
  </tr>
</table>
First Name & Last Name Roll
John Richard 2301
Christopher Tyler 230002




Examples

Complex Table 1

<img src="images/Screenshot_1.png"width="500">

Hint: Use colspan, rowspan, hyperlink, image and line break tags. Click here to get the answer.

Complex Table 2

<img src="images/Screenshot_2.png"width="500">

Hint: Use colspan, rowspan and table data alignments. Click here to get the answer.

Complex Table 3

<img src="images/Screenshot_3.png"width="500">

Hint: Use colspan, rowspan and vertical alignment. Click here to get the answer.

Complex Table 4

<img src="images/Screenshot_4.png"width="500">

Hint: Use colspan, rowspan and table data alignment. Click here to get the answer.

Complex Table 5

<img src="images/Screenshot_5.png"width="500">

Hint: Use colspan, rowspan and ordered list. Click here to get the answer.

Complex Table 6

<img src="images/Screenshot_6.png"width="500">

Hint: Try yourself! Click here to get the answer.