Post
Ask Question

Basics Of HTML And CSS - Part 1

Introduction 

 
HTML 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.       <head>    
  3.         <title></title>    
  4.     </head>      
  5.     <body>    
  6.         <h1>Welcome to csharpcorner</h1>    
  7.         <h2>Welcome to csharpcorner</h2>    
  8.         <h3>Welcome to csharpcorner</h3>    
  9.         <h4>Welcome to csharpcorner</h4>    
  10.         <h5>Welcome to csharpcorner</h5>    
  11.         <h6>Welcome to csharpcorner</h6>      
  12. </html>    
Output
 
Heading Tag
 

Paragraph Tag

 
Paragraph tags are defined with <p></p>.
 
Example
  1. <Html>      
  2.     <Head>    
  3.         <Title>    
  4.         </title>    
  5.     </head>      
  6.     <Body>    
  7.         <p>Welcome to csharpcorner</p>    
  8.         <p>Welcome author</p>    
  9.         <p>N.Vinodh</p>    
  10.     </body>      
  11. </html>    
Output
 
Paragraph Tag
 

Image Tag

 
Image tags are defined with <img></img>.
 
Image tags are useful for displaying images.
 
Example
  1. <Html>      
  2.     <Head>    
  3.         <Title>    
  4.         </title>    
  5.     </head>      
  6.     <Body> <img src="images\ccorner.png" alt="logo" /> </body>      
  7. </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. <head>    
  3.     <title></title>    
  4. </head>      
  5. <body>    
  6.     <table border="1">    
  7.         <tr>    
  8.             <td> Vinodh</td>    
  9.             <td> Arun</td>    
  10.         </tr>    
  11.         <tr>    
  12.             <td>Bill</td>    
  13.             <td>Tom</td>    
  14.         </tr>    
  15.     </table>    
  16. </body>      
  17. </html>     
Output
 
Table Tag
 

List tag

  • Ordered list
  • Unordered list
Unordered list
 
 Unordered lists are defined with <ul></ul> tag.
 
Example
  1. <html>      
  2. <head>    
  3.     <title></title>    
  4. </head>      
  5. <body>    
  6.     <ul>    
  7.         <li>Article</li>    
  8.         <li>Blogs</li>    
  9.         <li>News</li>    
  10.     </ul>    
  11. </body>      
  12. </html>    
Output
 
Un-Ordered list
 
Ordered list
 
 Ordered lists are defined with <ol></ol> tag.
 
Order the list by numbers.
 
Example
  1. <html>      
  2. <head>    
  3.     <title></title>    
  4. </head>      
  5. <body>    
  6.     <ol>    
  7.         <li>Article</li>    
  8.         <li>Blogs</li>    
  9.         <li>News</li>    
  10.     </ol>    
  11. </body>      
  12. </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. <head>    
  3.     <title></title>    
  4. </head>      
  5. <body>    
  6.     <dl> <dt>    
  7. Article    
  8. </dt>    
  9.         <dd> Basics of HTML and CSS </dd>    
  10.         </ol>    
  11. </body>      
  12. </html>    
Output
 
Output
 

Summary 

 
In this article, we learned about the Basics Of HTML And CSS - Part 1.  


Similar Articles