Whereas the purpose of the HTML Beginner Tutorial was to teach the bare essentials, this guide adds a few nuts and bolts, which shouldn’t be particularly difficult as such, but will add a bit more to our understanding of HTML and enable us to do a few more things.
Span and Div
HTML is all about applying meaning to content. Whereas most HTML tags apply meaning (p makes a paragraph, h1 makes a heading etc.), the span and div tags apply no meaning at all, which might sound about as useful as a foam hammer, but they are actually used quite extensively in conjunction with CSS.
The difference between span and div is that a span element is in-line and usually used for a small chunk of in-line HTML whereas a div (division) element is block-line (which is basically equivalent to having a line-break before and after it) and used to group larger chunks of code.
<div id="scissors"> <p>This is <span>crazy</span></p> </div>
div and especially span shouldn’t actually be used that often. Whenever there is a sensible alternative that should be used instead.For example, if you want to emphasize the word ‘crazy’ and the class ‘paper’ is bold, then the code might look like this:<div id="scissors"> <p>This is <strong>crazy</strong></p> </div>If you haven’t got a clue about classes and ID’s yet, don’t worry, they’re all explained in the CSS Intermediate Tutorial.All you need to remember is that span and div are ‘meaningless’ tags.Meta Tags
Once upon a time, many eons ago when the Internet was just a small number of cardboard boxes attached to each other with string, meta tags were the town criers of the internet… erm… town.Meta tags don’t do anything to the content that is presented in the browser window, but they are used by the likes of search engines to catalogue information about the web page.There is one meta tag which can be used as many times as you desire and can contain the attributes content (required), http-equiv and name.The content attribute is the meta data itself, which is linked to the name or http-equiv attribute.The name attribute can be anything you like.Commonly used names include author, keywords and description. description meta data is often used by search engines (such as Google) to display a description of a web page in its search results, and as such this is perhaps the most useful application of the meta tag.The http-equiv attribute can be used instead of the name attribute and will make an HTTP header, which is information sent to the server where the web page is held.The content attribute can be content-type, expires, refresh (how often the page automatically refreshes – very bad for accessibility), or set-cookie.<html> <head> <title>Title</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="description" content="This is my bloody exciting web page about air conditioners" /> ...The reason why meta tags used to be so important was because they were relied on by search engines to build a profile of a web page.The keywords meta data was used extensively for example.Nowadays however, most search engines use the actual content of the page itself, rendering most meta data useless beyond conveying information to someone who is physically reading the HTML.HTML Tables II
Tables may have seemed complicated enough in the HTML Beginner Tutorial. It can be quite difficult to visualise a two-dimensional grid from one-dimensional lines of code.Well, it gets trickier. All thanks to the rowspan and colspan attributes. Those bastards.<table border="1"> <tr> <th>Column 1 heading</th> <th>Column 2 heading</th> <th>Column 3 heading</th> </tr> <tr> <td>Row 2, cell 1</td> <td colspan="2">Row 2, cell 2, also spanning Row 2, cell 3</td> </tr> <tr> <td rowspan="2">Row 3, cell 1, also spanning Row 4, cell 1</td> <td>Row 3, cell 2</td> <td>Row 3, cell 3</td> </tr> <tr> <td>Row 4, cell 2</td> <td>Row 4, cell 3</td> </tr> </table>Firstly, we have replaced the td tags of the first row with th tags. Whereas a td is a standard data cell, th is a header cell. As with the td tag, these tags must be enclosed in tr tags.We have also used colspan and rowspan attributes in some of the td tags. If you look at this code in a browser, you will see that on the second row there are now two cells instead of three, the second cell spanning the second and third column.The colspan attribute, which means ‘column span’ will span the cell over the number of cells that is specified. This means, in this example, that there is no need for a third td tag – two cells are merged into one.The self-descriptive rowspan attribute is similar to colspan, except, obviously, it will span across rows rather than columns. Again, the cells that it spans should be removed. In this example, because it spans over the fourth row, there is only two cells in that row.As with the simpler 3×4, 12-cell table, the numbers on these tables with merged cells should also add up. Although there are only 10 cells in this example, there are 2 spans.Definition Lists
The HTML Beginner Tutorial looked at unordered lists and ordered lists, but much like Peter Cushing’s Doctor Who, definition lists are quite often forgotten.This is maybe because they are much more specific than ordered and unordered lists and therefore less useful, but where there is a list of terms and descriptions (such as a glossary), a definition list should be used.The dl element gets the ball rolling, similar to the ul and ol elements, establishing the list. Rather than there being an li element though, definition lists have a dt element, which is the definition term, followed by a dd element which is a definition description associated to the dt element.There doesn’t have to be one dt followed by one dd, there can be any number of either.For example, if there are a number of words that have the same meaning, there might be a number of dt‘s followed by one dd. If you have one word that means various different things, there might be one dtfollowed by several dd‘s.<h1>Some random glossary thing</h1> <dl> <dt>HTML</dt> <dd>Abbreviation for HyperText Markup Language – a language used to make web pages.</dd><dt>Dog</dt> <dd>Any carnivorous animal belonging to the family Canidae.</dd> <dd>The domesticated sub-species of the family Canidae, Canis lupus familiaris.</dd><dt>Moo juice</dt> <dt>Cat beer</dt> <dt>Milk</dt> <dd>A white liquid produced by cows and used for human consumption.</dd> </dl>
Javascript
Javascript is a client-side scripting language that can work in conjunction with HTML and while this is not a Javascript guide, we can look at how HTML can use Javascript.Javascript events can be used like attributes in HTML tags. An event is something that happens to that HTML element, such as when it is ‘clicked’ or when it loses focus.<ahref="#top"onclick="alert ('wow. Javascript.')">Click me</a>The events that can be used are:
- onblur (used in form elements and executed when an element loses focus)
- onchange (used in form elements and executed when something is changed)
- onclick (executed when a mouse is clicked on an element)
- ondblclick (executed when a mouse is double-clicked on an element)
- onfocus (used in form elements and executed when an element gains focus)
- onkeydown (executed when a key is pressed down)
- onkeypress (executed when a key is pressed and released)
- onkeyup (executed when a key is released)
- onload (used in the body tag and executed when the page loads)
- onmousedown (executed when the button of a mouse is pressed down)
- onmousemove (executed when the mouse cursor moves on an element)
- onmouseout (executed when the mouse cursor moves away from an element)
- onmouseover (executed when mouse cursor moves over an element)
- onmouseup (executed when the button of a mouse is released)
- onreset (used in form elements and executed when a form is reset)
- onselect (used in form elements and executed when an element is selected)
- onsubmit (used in form elements and executed when a form is submitted)
- onunload (used in the body tag and executed when the user navigates away from the page)
Try not to get carried away with Javascript. It’s best uses tend to be small additions of functionality. There is a danger of seriously degrading the accessibility of a web page with Javascript, and many things that it can be used for can be replaced with server-side scripting languages such as PHP or ASP.
0 comments:
Post a Comment