Now that we have an understanding of what HTML is lets start making a web page. HTML is a set of tags that web browsers use to display content on a web page. HTML has dozens of tags but we are only going to discuss the 12 most important tags. These tags (coupled with CSS) are the building blocks of modern web pages.
- <html>
- <head>
- <body>
- <div>
- <p>
- <span>
- <a>
- <img>
- <link>
- <style>
- <ul>
- <li>
These tags can be divided into 3 categories – document tags, content tags and CSS tags. Document tags define the parts of a web page. A letter has a header, body, and signature as part of the structure of the letter. Web pages are the same way – they have a head and body. Content tags describe the content of the page and are nested in the body of the web page. Finally, there are CSS tags. These tags existing in the head of the web page and control what CSS stylesheets are used to control the presentation of the page. But I am getting ahead of myself now – more on this later.
Document Tags
Every web page must begin with an <html> tag. Additionally, it must have a <head> tag and <body> tag. If you create a new web page in Visual Web Developer 2010 Express the new web page will have this structure by default.
<html>
<head></head>
<body> </body>
</html>
Think of these tags as the shell of your web page. All other tags will either go in the <head> or <body>. The <head> is for CSS and JavaScript tags and the <body> is for content tags.
Content Tags
All content tags live in the <body> tag.
<html>
<head></head>
<body>
Content tags go here!!!!
</body>
</html>
Most content tags describe text. Lets look at the text content tags and how to use them.
<p> </p> – Paragraph tags
The <p> tag is used to describe paragraph content. All paragraphs should be wrapped in a <p> tag.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<span> </span> – Span tags
The <span> tag is used to group text content. The <span> tag is frequently nested inside of <p> tags. The usefulness of this tag will not become evident until we discuss CSS.
<p>Lorem ipsum dolor sit amet, <span>consectetur adipisicing elit</span>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<div> </div> – Division tags
The <div> tag is used to group other content tags. For example a page may have a main content division, an advertisement content division and a menu content division. However, like the <span> tag the true power of this tag will not be revealed until we discuss CSS.
<div>
<p> Menu Content </p>
</div>
<div>
<p> Paragraph A Content </p>
<p> Paragraph B Content </p>
<p> Paragraph C Content </p>
</div>
<ul> <li> – List tags
The <ul> and <li> tags are used together to create a list of content items. <ul> is the list and <li> is the individual items in the list. <ul> stands for un-ordered list and <li> stands for list item.
<ul>
<li> One <li>
<li> Two </li>
<li> Three </li>
</ul>
<img> – Image tag
This tag adds an image to the page. The src attribute tells the browser where to get the image content.
<img src=”/images/Logo.png” />
<a> – Anchor tag
The anchor tag creates a link to another page. The href attribute controls where the link will direct the browser to.
<a href=”www.bing.com”> click here to go to bing.com </a>
So now you are an HTML expert – no not really. In the next lesson we are going to use these tags to create a very unimpressive web page. Then we will take our very unimpressive web page and turn it into something really cool using CSS.
milliken 