20 tags that will help you to build your very own HTML page.
HTML was invented in 1990 by a scientist called Tim Berners-Lee. The purpose was to make it easier for scientists at different universities to gain access to each other's research documents.
The project became a bigger success than Tim Berners-Lee had ever imagined. By inventing HTML he laid the foundation for the web as we know it today.
HTML is the "mother tongue" of your browser.
HTML is a language, which makes it possible to present information (e.g. scientific research) on the Internet. What you see when you view a page on the Internet is your browser's interpretation of HTML.
HTML is used to make websites. It is as simple as that!
The aim of this tutorial is to give you an easy, yet thorough and correct introduction to how to make websites. The tutorial starts from scratch and requires absolutely no prior knowledge of programming.
The tutorial cannot show you everything. So some engagement and a will to experiment are required. But don't worry - learning how to make websites is a lot of fun and gives a tremendous amount of satisfaction when you get it right.
How you choose to use the tutorial is up to you. But we suggest you read only two or three lessons a day and take time to experiment with the new things you learn in each lesson.
WHAT DOES H-T-M-L STANDS FOR
HTML is an abbreviation of "HyperText Mark-up Language" - which is already more than you need to know at this stage. However, for the sake of good order, let us explain in greater detail.
Hyper is the opposite of linear. In the good old days - when a mouse was something the cat chased - computer programs ran linearly: when the program had executed one action it went to the next line and after that, the next line and so on. But HTML is different - you can go wherever you want and whenever you want.
Text is self explanatory
Mark-up is what you do with the text. You are marking up the text the same way you do in a text editing program with headings, bullets and bold text and so on.
Language is what HTML is. It uses many English words.
Let's Get Started!
Here is a list of 20 tags that will help you to build your very own HTML page. The intention here is to briefly describe the rules for how these tags behave so you have enough freedom to build your own HTML content.
The first set of tags help to set up the entire document structure.
1. <html>... </html>
If you're building a complete HTML file, it must open and close with this one. This is the root tag that you'll need to use.
This only appears at the root of the file. That is to say, there are no HTML tags that can wrap this one, and it can contain ONLY <head> and <body> tags, in that order.
2. <head>... </head>
The head tag sits as the first element in the HTML page. The contents describes the file, but does not contain content. THis is where you add the title, add style, javascript, and meta information.
This Must be the first tag to appear within the <html> tag. It does not contain any actual page content.
3. <title>... </title>
The title tag is what's used to give the page a title. This is what appears in the top bar of the browser window.
This appears only within the <head> tag and only contains text, no other tags.
4. <body>... </body>
The body tag is where the actual content appears.
This appears after the <head>... </head> tag and contains any content-bearing tags
Here's an example, with the basics of what we've learned so far
<html>
<head>
<title>My First HTML</title>
</head>
<body>This is the page content</body>
</html>
Not too hard, eh? Everything else helps to describe the actual content that falls inside the <body> tag.
5. <h1>...</h1> through <h6>...</h6>
These are headings. These help to indicate the title of content that follows, like a headline for a newspaper article. Search engines have traditionally placed greater emphasis to text within these tags.
This makes sense semantically, because if there is a heading on the page, this is likely to indicate something significant that appears within. These help to identify what the content on the page is about. <h1> identifies the most important heading and <h6> the least. You can have as many of these as you like on the page.
This is a block level element. You can put a lot of different elements within it, including inline elements, images, line breaks. Other block level elements should stay out.
6. <p>
The paragraph tag is the main tag to use for blocks of text content. Similar to the headings, you can put inline elements, images, and line breaks within.
7. <a>
Ahh the anchor tag. This is what the world wide web was built on. The anchor tag allows you to link to another web page or other url's. To make it work, just add an "href" attribute.
<a href="http://wwww.lo-fi.net">THis is a link</a>
The value of the href attribute is the place where the link should take you.This is an inline elementYou can put other inline elements inside the anchor tag.
8. <img />
The image tag let's you put an image on the page. This is another tag that requires an attribute to work. You need to use the "src" attribute to specify the address of the image. You can also use the "width" and "height" attributes if you need to control the size.
If you specify only one of them, the unspecified dimension will scale proportionately. The value of the "height" and "width" attributes is measured in pixels
<img src="http://lo-fi.net/images/picture.jpg" width="100" height="200"/>
This is an inline element and an empty tag.
9. <br />
This is a line break. Quite simply, it places a break in t a line so the text following it appears on a new line.
Lists
Lists are a very important way to present text on a web page. With the nature of short attention spans abounding on the internet, there's nothing like a list to make content easy to digest. In addition, they help tremendously when you need to display information in a hierarchical way.
10. <ul>
This is an Unordered List, or as we typically know it, a bulleted list. This is a block level element in which List Items are placed. The only tag that you can legally put into a <ul> tag is a <li> tag. This is what a bulleted list might look like
<ul>
<li>Fruits</li>
<li>Vegetables</li>
<li>Proteins</li>
</ul>
This is what it looks likeFruitsVegetablesProteinsWhat's cool about lists is that they can be nested inside each other. A < tag can rest within a <li> tag, which builds a hierarchy, like this.
<ul>
<li>Fruits
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Lemons</li>
</ul>
</li>
<li>Vegetables
<ul>
<li>Carrots</li>
<li>Broccoli</li>
<li>Beets</li>
</ul>
</li>
<li>Proteins
<ul>
<li>Beef</li>
<li>Salmon</li>
<li>Chicken</li>
</ul>
</li>
</ul>
This is what it looks likeFruitsApplesOrangesLemonsVegetablesCarrotsBroccoliBeetsProteinsBeefSalmonChicken.
11. <ol>
The more organized sibling to the Unordered List, is the Ordered List. It works the same way as the unordered list does, but it appears on the page with numbers instead of bullets. You can nest these within each other as well. You can even mix an ordered list with an unordered list. Check this out.
<ul>
<li>Top Fruits
<ol>
<li>Apples</li>
<li>Oranges</li>
<li>Lemons</li>
</ol>
</li>
<li>Top Vegetables
<ol>
<li>Carrots</li>
<li>Broccoli</li>
<li>Beets</li>
</ol>
</li>
<li>Top Proteins
<ol>
<li>Beef</li>
<li>Salmon</li>
<li>Chicken</li>
</ol>
</li>
</ul>
This is what it looks likeTop FruitsApplesOrangesLemonsTop VegetablesCarrotsBroccoliBeetsTop ProteinsBeefSalmonChicken.
12. <li>
The List Item is an HTML tag that belongs only in a <ul> or <ol> tag. Any place else is just wrong. The content of <li> tag is a little more flexible. They are block level elements, so you can put other block level elements in them -- headings, paragraphs, other lists, and such. You can of course put inline elements in these as well -- anchors, images, plain text, whatever.
Formatting
Sometimes, you'll find it necessary and important to add some visual formatting to your text. Most of the time, it's best to use Cascading Style Sheets (CSS) to do that (which I don't cover at ALL here). However, it is still legal to add some text formatting with HTML tags. Here's 2 common ones.
13. <strong> or <b>
Wrapping text in the Strong or Bold tag has the same default effect. This makes the text inside it bold. The main difference is that the <strong> tag is interpreted by screen readers (web browsers for the vision-impaired) in such a way as to raise a voice.
These tags are inline elements, and should only contain other inline elements.
14. <em> <i>
The Emphasis and Italic tags also have the same default effect. These make the text inside italic. The <em> tag has the same analogous interpretation as the <strong> tag by screen readers. It adds some, eh, emphasis to the text.
These tags are inline elements as well, and should only contain other inline elements. Here's an example of something that is both bold and italic.
<strong><i>Bold and Italic</i></strong>
Table
The table is one of the most powerful layout elements that HTML provides. This allows you to place content into a grid of columns and rows. To use a table, there are three main pieces involved. A tabular layout will consist of the table container, rows within that container, and cells within each row. The cells are the only thing in the table that can contain any actual content of the table.
15. <table>
The Table tag is the tag that starts the table. Alone, it doesn't do much. In fact, it is not valid to have <table> tag with nothing in it. It simply doesn't make sense to set this up without contents inside. There are only a couple of valid tags that can be direct children of a <table> tag, and they are all specific to a tabular layout.
16. <tr>
One of the main HTML tags that can be a child of a <table> tag is the Table Row. This too requires content to be valid. The content of a table row can only be one of two table cell tags.
17. <td>
The Table Data cell can only appear within a <tr> tag. However, the <td> tag can contain just about anything it wants to. Other tables, headings, images, plain text, paragraphs -- just about anything that doesn't have any limitations on what it's parent tag is can go in here. Here is a sample table with one row, and two columns:
<table>
<tr>
<td>One</td>
<td>Two</td>
</tr>
</table>
This is what it looks like with a border
OneTwo
18. <th>
Another tag that can appear within the <tr> tag is the Table Heading tag. The <th> helps to declare what the heading of a table is. Typically, this tag will appear in the top row of a table to indicate the name of the column. However, there are no restrictions on which position they reside in a <tr>. Other than the semantic nuance, a <th> behaves the same way as the <td> tag does.
<table>
<tr>
<th>Letters</th>
<th>Numbers</th>
</tr>
<tr>
<td>A</td>
<td>1</td>
</tr>
<tr>
<td>B</td>
<td>2</td>
</tr>
<tr>
<td>C</td>
<td>3</td>
</tr>
</table>
This is what it looks like with a border
LettersNumbersA1B2C3
Document Structure
Occasionally, it's nice to have a tag just to collect a group of content together, simply for the purpose of putting a boundary around it. For that purpose, and it is a common one, we have a couple tags to help.
19. <div>
The Division tag , frequently referred to simply as a "div", defines a section of the page. That's it. It does not have any significant impact on the display of it's contents other than acting as a block level type of container for it's contents.
The simplicity of a <div> provides a lot of flexibility in structuring the content of an HTML file. As you work on building HTML over time, you'll find yourself using this a lot. Especially when there are a lot of different blocks of content that you want to group together visually.
The contents of a <div> are very flexible. Any tag that doesn't have any restrictions on what it's parent tag can be are allowed here. Tables, other divs, inline elements, etc. The <div> tag is a block level element.
<div>
<h1>Here's a heading</h1>
<p>Here's a paragraph grouped with the heading</p>
</div>
20. <span>
The Span tag similarly wraps content for the sake of grouping content together. The main difference between the <div> tag and the <span> tag is that the span tag is an inline element. That means that it can only contain raw text or other inline elements.
Here's an example that shows nested span tags to group some words together.
<span>Here is some text <span>and this is a sub-group of text</span></span>
Bonus
What you see above represent what I consider the essentials to building an HTML document. Much of the other parts of HTML (and there are many) are more specialized. For example, we didn't touch form elements or some more advanced table features. However, what's above will give you what you need to get started.
There are a couple items that are worth noting, as a bonus.
21. <!DOCTYPE >
The first bonus is the Document Type declaration. This is a line that goes at the very top of the page to help the browser determine what how to read the rest of the HTML that you wrote. Believe it or not, there are a couple different flavors of HTML, and each has slightly different rules. The Document Type helps to tell the browser what rules your HTML adheres to. Using a document type is not a requirement, but it is a very good idea. People who write good HTML code use doctypes.
The doctype for HTML that uses the HTML5 rules is refreshingly simple:
<!DOCTYPE HTML>
The doctype for HTML that uses the XHTML Strict rules is a little more verbose. I don't know anyone who has it memorized:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
An HTML document with a proper HTML5 document type declaration would look like this
<!DOCTYPE HTML>
<html>
<head><title>HTML 5 page</title></head>
<body>This is an HTML 5 page</body>
</html>
22. <!-- Comments -->
Last but not least, the comment is something you should be aware of. The comment tag allows you to add comments to the coe you're writing, which the browser will not show. They can be helpful in making notes to help you understand the HTML you write. This is what a comment inside a Paragraph would look like.
<p>I love to write HTML <!-- as long as someone is paying for it --></p>
In that example, the only thing that the end user would see is the "I love to write HTML". Everything inside the <!-- ... --> does not show. As you can see, it is a helpful way to communicate between people writing the code.
So that's it! You should be off to the races now. Be careful though. Once you get started with this, it's hard to stop. And once you get into using javascript to add interactive behavior, and CSS to control your visual style, it's nearly impossible.
Comments
Post a Comment