HTML Tags:
<html>
Is the opening tag that kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document.
<body>
The stuff between <body> and </body> is the main content of the document that will appear in the browser window.
Attributes
Tags can also have attributes, which are extra bits of information. They look something like <tag attribute="value">Margarine</tag>.
Elements
Everything that is in-between and includes the <body> and </body> tags is the body element.
Evertything that is in-between and includes <title> and </title> is a title element.
head
The head element (that which starts with the <head> opening tag and ends with the </head> tag) appears before the body element (starting with <body> and ending with </body>) and contains information about the page. The information in the head element does not appear in the browser window.
<title>
<p>
The p tag is for paragraph.
Eg: <p>This is my first web page</p>
<p>How exciting</p>
This will create a new paragraph, just like in books.
comment
Eg: <!-- By the way, this is a comment -->
Emphasis:
You can emphasise text in a paragraph using em (emphasis (italic)) and strong (strong emphasis (bold)). These are two ways of doing pretty much the same thing, although traditionally, browsers display em in italics and strong in bold.
<p>Yes, that <em>is</em> what I said. How <strong>very</strong> exciting.</p>
Line breaks:
Eg: This is my first web page <br />
How exciting
However, this method is over-used and shouldn't be used if two blocks of text are intended to be separate from one another (because if that's what you want to do you probably want the p tag).
Note that because there's no content involved with the line-break tag, there is no closing tag and it closes itself with a "/" after the "br".
Headings:
They are h1, h2, h3, h4, h5 and h6, h1 being the almighty emperor of headings and h6 being the lowest pleb.
(my explanation: space above and below, and text in bold)
Note that the h1 tag is only used once - it is supposed to be the main heading of the page and shouldn't be used multiple times.
h2 to h6 however, can be used as often as you desire, but they should always be used in order, as they were intended. For example, an h4 should be a sub-heading of an h3, which should be a sub-heading of an h2.
Lists:
There are three types of list; unordered lists, ordered lists and definition lists.
ul
The ul tag is used to define unordered lists
Ol
and the ol tag is used to define ordered lists. li
Inside the lists, the li tag is used to define each list item.
Eg: Of a list withing a list
<ul>
<li>To learn HTML</li>
<li>
To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>To the little talking duck in my brain</li>
</ol>
</li>
<li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>
Links:
An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag - the destination of the link.
The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as "http://www.htmldog.com", or it can be relative to the current page.
So if, for example, you had another file called "flyingmoss.html" then the line of code would simply be <a href="flyingmoss.html">The miracle </a> or something like this.
id (attribute)
A link can also send a user to another part of the same page they are on. You can add an id attribute to just about any tag, for example <h2 id="moss">Moss</h2>, and then link to it by using something like this: <a href="#moss">Go to moss</a>. Selecting this link will scroll the page straight to the element with that id.
The a tag allows you to open the link in a newly spawned window, new tab, same page etc.
<img>
The img tag is used to put an image in an HTML document and it looks like this:
<img src="http://www.htmldog.com/images/logo.gif" width="157" height="70" alt="HTML Dog logo" />
Note that, like the br tag, because the img tag does not have a closing tag, it closes itself, ending with "/>"
src (attribute)
The src attribute tells the browser where to find the image. Like the a tag, this can be absolute, as the above example demonstrates, but is usually relative. For example, if you create your own image and save it as "alienpie.jpg" in a directory called "images" then the code would be <img src="images/alienpie.jpg"...
Width & Height (attribute)
The width and height attributes are necessary because if they are excluded, the browser will tend to calculate the size as the image loads, instead of when the page loads, which means that the layout of the document may jump around while the page is loading.
alt (attribute)
The alt attribute is the alternative description. This is used for people who cannot or choose not to view images. This is a requirement in the latest versions of HTML.
Tables
<table>
Across the worldwide web, HTML tables are used and abused to layout pages. The correct use for tables is to do exactly what you would expect a table to do - to structure tabular data.
The table element defines the table.
The tr element defines a table row.
The td element defines a data cell.
border (attribute)
Eg: <table border="1">
Eg: <table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
</table>
Forms
The basic tags used in the actual HTML of forms are <form>, <input>, <textarea>, <select> and <option>.
<form>
<form> defines the form
action (attribute)
action attribute tells the form where its contents will be sent to when it is submitted.
method (attribute)
The optional method attribute tells the form how the data in it is going to be sent and it can have the value get (which is default) or post. This is commonly used, and often set to post which hides the information (get latches the information onto the URL).
Eg: <form action="processingscript.php" method="post">
<input>
The input tag is the daddy of the form world. It can take ten forms, outlined below:
1. <input type="text" /> is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox.
2. <input type="password" /> is similar to the textbox, but the characters typed in by the user will be hidden.
3. <input type="checkbox" /> is a checkbox, which can be toggled on and off by the user. This can also have a checked attribute, which would be used in the format <input type="checkbox" checked="checked" />, and makes the initial state of the check box to be switched on, as it were.
4. <input type="radio" /> is similar to a checkbox, but the user can only select one radio button in a group. This can also have a checked attribute, used in the same way as the checkbox.
5. <input type="file" /> is an area that shows the files on your computer, like you see when you open or save a document in most programs, and is used to enable users to upload files.
6. <input type="submit" /> is a button that when selected will submit the form. You can control the text that appears on the submit button (as you can with button and reset types - see below) with the value attribute, for example <input type="submit" value="Ooo. Look. Text on a button. Wow" />.
7. <input type="image" /> is an image that will submit the coordinates of where the user clicked on it. This also requires a src attribute, like the img tag.
8. <input type="button" /> is a button that will not do anything without extra code added.
<input type="reset" /> is a button that when
9. selected will reset the form fields to their default values.
10. <input type="hidden" /> is a field that will not be displayed and is used to pass information such as the page name that the user is on or the email address that the form should be posted to.
Note that the input tag closes itself with a "/>" at the end.
<textarea>
A textarea is, basically, a large textbox.
<textarea rows="10" cols="20" name="comments">Your comments</textarea>
rows & cols (attribute)
It requires a rows and cols attribute and is used like this:
Eg: <textarea rows="5" cols="20">A big load of text here</textarea>
<select>
<option>
The select tag works with the option tag to make drop-down select boxes.
selected (attribute)
Similar to the checked attribute of checkboxes and radio buttons, an option tag can also have a selected attribute, which would be used in the format <option value="mouse" selected="selected">Rodent</option>.
name (attribute)
the form fields need names. So to all of the fields, the attribute name needs to be added, for example <input type="text" name="name" value="Your name" />
