Basic Markup


HTML uses a system of markup or tags which denote blocks of web content such as paragraphs, images, and links. An HTML block contains two main sections: a head and a body.
view plaincopy to clipboardprint?
  1. <html>  
  2.   
  3.     <head>  
  4.         <title></title>  
  5.     </head>  
  6.     <body>  
  7.   
  8.   
  9.     </body>  
  10. </html>  

Add Content


Web editors automatically add a doctype section which tells your browser which web standards your html pages conform to. Below, an html page after a title, an image, and some paragraphs have been added.
view plaincopy to clipboardprint?
  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>Gettysburg Address</title>  
  5.     </head>  
  6.     <body>  
  7.         <center> <img src="lincoln.jpg"> </center>  
  8.         <p>Four score and seven years ago, our fathers brought forth  
  9.         upon this continent a new nation: conceived in liberty, and  
  10.         dedicated to the proposition that all men are created equal. Now  
  11.         we are engaged in a great civil war. . .testing whether that  
  12.         nation, or any nation so conceived and so dedicated can long  
  13.         endure. We are met on a great battlefield of that war. </p>  
  14.           
  15.         <p>We have come to dedicate a portion of that field as a final  
  16.         resting place for those who here gave their lives that that  
  17.         nation might live. It is altogether fitting and proper that we  
  18.         should do this. </p>   
  19.           
  20.         <p>But, in a larger sense, we cannot  
  21.         dedicate, we cannot consecrate, we cannot hallow this ground.  
  22.         The brave men, living and dead, who struggled here have  
  23.         consecrated it, far above our poor power to add or detract. The  
  24.         world will little note, nor long remember, what we say here, but  
  25.         it can never forget what they did here. </p>   
  26.           
  27.     </body>  
  28. </html>  

View Current Version


Add Styling To The Head Section


By adding a style block in the head section of your html page, you can use a kind of scripting called CSS (cascading style sheet). This allows you to customize the look of each of your html blocks.
view plaincopy to clipboardprint?
  1. <style type="text/css">  
  2.     body{  
  3.         background-color:  #ffcc00;  
  4.     }   
  5.     p{  
  6.         background-color: #003366;  
  7.         color:  white;  
  8.         padding:  25px;  
  9.         font: large arial;  
  10.     }  
  11.     img{  
  12.         border: 5px dotted red;  
  13.         padding:  10px;  
  14.         background-color: white;  
  15.     }  
  16. </style>  

View After Styling Has Been Added


Color Style Guide





Sample Projects