Web Designing

What is HTML

In Web Designing by Baqir Ali

HTML Stands for Hyper Text Markup Language Used to create a Web pages. HTML is Made up of tags that specify the structure of the document (this section is a heading, this section is a paragraph, etc..)

An excerpt from a sample HTML document:

<html>
   <head>
     <title>Code Modes</title>
   </head>
   <body>
     <h1>This is my first Web page</h1> 
   </body>
</html>

HTML TAGS

Most HTML tags work in pairs.  There is an opening and a closing tag.

<p>Some content here.</p> 

The <p>…</p> tag displays a paragraph. <p> opens the paragraph (opening tag) and </p> closes the paragraph (closing tag).

Self Closing Tags

Some HTML tags are self closing.  For example: <br />. The <br /> tag will display a line break.

Required Tags in HTML

  • !DOCTYPE – Tells the browser which set of standards the page adheres to
  • <html>…</html> — Surrounds the contents of the entire page
  • <head>…</head> — Lists the identification information on the page, such as the title
  • <title>…</title> — Gives the name of the page that appears in the top of the browser window
  • <body>…</body> — Frames the content of the page to be displayed in the browser

Some Common HTML Tags

  • <p>…</p> — Creates a paragraph
  • <br /> — Adds a line break
  • <hr /> — Separates sections with a horizontal rule
  • <h1>…</h1> — Displays a heading (h1-h6)
  • <!–…–> — Inserts a comment
  • <ol>…</ol> — Creates an ordered list
  • <ul>…</ul> — Creates an unordered list
  • <img /> — Inserts an image into the document
  • <a>…</a> — Inserts a link into the document

Line Break Example

 <p>
   Roses are Red. <br />
   Violets are Blue. <br />
   You should study for Exam 1. <br />
   It will be good for you! 
 </p> 

Output is:

Roses are Red.
Violets are Blue.
You should study from Exam 1.
It will be good for you!

Heading Example

 <h1>This is heading 1</h1>
 <h2>This is heading 2</h2>
 <h3>This is heading 3</h3>
 <h4>This is heading 4</h4>
 <h5>This is heading 5</h5>
 <h6>This is heading 6</h6> 
HTML Heading Examples
HTML Heading Examples