Basics Of HTML And CSS - Part 1

In this article I have explained how to use HTML and CSS.

HMTL stands for hypertext markup language useful for developing web pages.

Using HTML we can add paragraphs, headings, images into web pages.

Basic Structure

    <!DOCTYPE html>
    <html> ----------------------------------- <html> Start tag
    <head>-------------------------------<head > tag contains scripts and stylesheets
    <title></tilte>--------------------- <title> tag display the tilte of the page
    </head>
    <body>
    _________________________ <body> Contains main content appears on the webpage
    </body>
    </html>-------------------------------------<html> End tag

Let us see the basic HTML tags used for creating a web page.

Heading Tag

Heading tags are defined with <h1> to <h6>.

Example:
  1. <html>  
  2.   
  3.     <head>  
  4.         <title></title>  
  5.     </head>  
  6.   
  7.     <body>  
  8.         <h1>Welcome to csharpcorner</h1>  
  9.         <h2>Welcome to csharpcorner</h2>  
  10.         <h3>Welcome to csharpcorner</h3>  
  11.         <h4>Welcome to csharpcorner</h4>  
  12.         <h5>Welcome to csharpcorner</h5>  
  13.         <h6>Welcome to csharpcorner</h6>  
  14.   
  15. </html>  
Output

Heading Tag

Paragraph Tag:

Paragraph tags are defined with <p></p>.

Example
  1. <Html>  
  2.   
  3.     <Head>  
  4.         <Title>  
  5.         </title>  
  6.     </head>  
  7.   
  8.     <Body>  
  9.         <p>Welcome to csharpcorner</p>  
  10.         <p>Welcome author</p>  
  11.         <p>N.Vinodh</p>  
  12.     </body>  
  13.   
  14. </html>  
Output

Paragraph Tag
Image Tag

Image tags are defined with <img></img>.

Image tags are useful for displaying images.

Example:
  1. <Html>  
  2.   
  3.     <Head>  
  4.         <Title>  
  5.         </title>  
  6.     </head>  
  7.   
  8.     <Body> <img src="images\ccorner.png" alt="logo" /> </body>  
  9.   
  10. </html>  
You can also adjust the height and width of the image inside the image tag
  1. <img src="images\ccorner.png" alt="logo" height="200" width="200" />  
Output

Image Tag

Table Tag

Tables are defined with <table></table>.

<tr></tr> tags contains table rows
<td></td> tags contains table data


Example
  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6.   
  7. <body>  
  8.     <table border="1">  
  9.         <tr>  
  10.             <td> Vinodh</td>  
  11.             <td> Arun</td>  
  12.         </tr>  
  13.         <tr>  
  14.             <td>Bill</td>  
  15.             <td>Tom</td>  
  16.         </tr>  
  17.     </table>  
  18. </body>  
  19.   
  20. </html>  
Output

Table Tag
 
List tag
  • Ordered list
  • Unordered list

Unordered list

Unordered lists are defined with <ul></ul> tag.

Example:

  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6.   
  7. <body>  
  8.     <ul>  
  9.         <li>Article</li>  
  10.         <li>Blogs</li>  
  11.         <li>News</li>  
  12.     </ul>  
  13. </body>  
  14.   
  15. </html>  
Output

Un-Ordered list

Ordered list

Ordered lists are defined with <ol></ol> tag.

Order the list by numbers.

Example
  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6.   
  7. <body>  
  8.     <ol>  
  9.         <li>Article</li>  
  10.         <li>Blogs</li>  
  11.         <li>News</li>  
  12.     </ol>  
  13. </body>  
  14.   
  15. </html>  
Output

Ordered list

Description lists

Description lists are defined with <dl></dl> tag.

<dt></dt> Stands for description term
<dd></dd> Stands for description data

Example
  1. <html>  
  2.   
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6.   
  7. <body>  
  8.     <dl> <dt>  
  9. Article  
  10. </dt>  
  11.         <dd> Basics of HTML and CSS </dd>  
  12.         </ol>  
  13. </body>  
  14.   
  15. </html>  
Output

Output