return to content page/computer science home
html stands for hypertext markup language. the current standard is html 4.01, but xhtml (extensible html) is the way of the future.
it defines a set of tags (usually in pairs such as <b> and </b>) and related attributes (such as the style attribute in <p style="align:right;">right aligned paragraph</p>), and how a browser interprets the tags the content in between. learn the set of tags, and their associated attributes, and how browsers treat them and you learn html.
most tags are made up of both an opening tag such as <i> and a matching closing tag such as </i>. attributes only appear inside the opening tag.
for some tags (e.g. <p> and <li>) the closing tag is optional, but for future version of html (xhtml) you should always put them in anyway.
other tags are empty tags(e.g. <br>, <hr>) and also don't require a closing tag, but for these empty tags you should specifically indicate that they are empty by inserting a "/" before the closing ">" (e.g. <br /> and <hr />).
static html pages (the ones you'll be making here) should be saved with the suffix .html or .htm
although in older versions of html, the tags and their attributes are case-insensitive (e.g. an <hr /> tag is equivalent to an <HR /> tag), xhtml is not and so it is best to start writing all your tags in lower case.
all html pages follow the same outline:
<html>
<head>
<!-- all information about your page goes here - it does not appear in the main browser window -->
</head>
<body>
<!-- all the content of your page goes here - this is what appears in your browser window -->
</body>
</html>
|
a note about comments in your html page: if you want to annotate your html source code with stuff that won't be picked up by the browser (so won't be displayed), put it inside <!-- these tags -->
used by some search engines to determine how relevant your page is, although google scans your entire page contents.
notice how the 'name' and 'content' words appear within the <meta> tag - these are the attributes of the tag. they usually give further information as to how the browser should interpret the tag. each attribute is represented by a name="value" pair. we will come across more attributes later.
<head>
<title>html - tutorial 1</title>
<meta name="description" content="a visual introduction to the basics of html" />
<meta name="keywords" content="html, tutorial, tags, markup, beginners, basic" />
<link href="../../styles/notesstyle.css" rel="stylesheet" type="text/css"/>
</head>
|
the rest of this tutorial demonstrates the main tags used to markup (tell the browser how to display) the content of your web-page
as there are many tags, and many which can be nested inside other tags (like the <title;> tag is nested inside the <head> tag), it is a really good idea to indent all your nesting. as a rule, for every level of nesting (i.e. after every opening tag) i indent 1 tab (or 4 spaces). this makes your source code soooo much easier to create. white-space is pretty much ignored by the browser (except in between <pre></pre> tags) so feel free to space things out as much as you need to make them clear. e.g.
<table>
<tr>
<td>some content</td>
</tr>
</table>
|
almost all tags can take these attributes.
id is a unique identifier (meaning only a single tag can have a
particular id value on any one page), and it will surplant the use of name -
but for now, you only need set the name and id attributes of a tag that you
are going to want to link to directly on your page.
e.g. for the title of this section:
<h2 id="s4" name="s4"><li>the ...
name is required for backwards compatibility and id for future-proofing.
also, ensure that the id and name are the same, and that their value
starts with a letter and contains only alpha-numerics.
class is used to give a name to a group of tags for common styling
style is used to format the html element - set the color, font, thickness, margins, type, etc.
you will learn more about the class and style attributes in the css tutorial. but for now, if you have a group of tags on a page that will probably be formatted in the same way, you can set their 'class' attribute.
<u></u> should be used sparingly as people on the net associate it with links. furthermore, it is deprecated so replace with <span style="text-decoration:underline;"> underlined text</span>
<font></font> is another deprecated tag that we will not cover here.
| source | displayed |
|---|---|
| <h1>heading 1</h1> | heading 1 |
| <h2>heading 2</h2> | heading 2 |
| <h3>heading 3</h3> | heading 3 |
| <h4>heading 4</h4> | heading 4 |
| <h5>heading 5</h5> | heading 5 |
| <em>emphasis</em> | emphasis |
| <strong>strong</strong> | strong |
| <del>deleted text</del> | |
| <code>code</code> | code |
| base value<sup>superscript</sup> | base valuesuperscript |
| base value<sub>subscript</sub> | base valuesubscript |
| source | displayed |
|---|---|
| <b>bold</b> | bold |
| <i>italic</i> | italic |
| <u>underline</u> | underline - deprecated! avoid using |
| <big>big</big> | big |
| <small>small</small> | small |
| <span style="color:red;">span style="color:red;"</span> | span style="color:red;" |
the exact appearance of how a browser displays all of these tag's contents can be precisely controlled using stylesheets or the style attribute - see the next tutorial on adding style as to how to do this (once you've written your site, especially using logical markup tags, you can set the look and feel using a stylesheet - this way you can make your pages more uniform, and it is easy to change the look of your whole site - you just need to change a single file!)
<p> - starts a new paragraph (the end tag </p> at the end of the paragraph is optional)
<br /> - forces a line break (same as <br> - i.e. an empty tag)
| source | displayed |
|---|---|
| <p>paragraph 1</p> <p>paragraph 2</p> |
paragraph 1 paragraph 2 |
| line 1<br /> line 2 |
line 1 line 2 |
every item in a list is preceded by the <li> tag - the closing </li> tag at the end of the list item is optional
<li>'s can be used within an ordered (<ol>) or unordered (<ul>) list.
| source | displayed |
|---|---|
<ol>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ol>
|
|
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
|
|
the type attribute (see below in ordered and unordered lists) can also be aplied to the <li> tag
attribute: type="disc|square|circle" - deprecated, use the style attribute: list-style-type
style="list-style-type:none|disc|square|circle"
| source | displayed |
|---|---|
<ul style="list-style-type:none;">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
|
|
<ul style="list-style-type:disc;">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
|
|
<ul style="list-style-type:square;">
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
</ul>
|
|
<ul style="list-style-type:circle;">
<li>list item 1
<li>list item 2
<li>list item 3
</ul>
|
|
attribute: type="1|A|a|I|i" - deprecated, use the style attribute: list-style-type
style="list-style-type:decimal|upper-alpha|lower-alpha|upper-roman|lower-roman"
| source | displayed |
|---|---|
<ol style="list-style-type:decimal;">
<li>list item 1
<li>list item 2
<li>list item 3
</ol>
|
|
<ol style="list-style-type:upper-alpha;">
<li>list item 1
<li>list item 2
<li>list item 3
</ol>
|
|
<ol style="list-style-type:lower-alpha;">
<li>list item 1
<li>list item 2
<li>list item 3
</ol>
|
|
<ol style="list-style-type:upper-roman;">
<li>list item 1
<li>list item 2
<li>list item 3
</ol>
|
|
<ol style="list-style-type:lower-roman;">
<li>list item 1
<li>list item 2
<li>list item 3
</ol>
|
|
attribute: start="an integer" - although this attribute is deprecated, i would still use it as there isn't a suitable replacement in css as yet. e.g.
| source | displayed |
|---|---|
<ol start="4">
<li>list item 1
<li>list item 2
<li>list item 3
</ol>
|
|
<table></table> goes around the entire table,
<tbody></tbody> goes around all the rows of the table,
<tr></tr> goes around each table row
and
<td></td> goes around the table data (i.e. the content of each table cell)
| source | displayed | ||||
|---|---|---|---|---|---|
<table border="1">
<caption>this is the table caption</caption>
<thead>this is the table header</thead>
<tfoot>this is the table footer</tfoot>
<tbody>
<tr>
<td>row 1, col 1</td>
<td>row 1, col 2</td>
</tr>
<tr>
<td>row 2, col 1</td>
<td>row 2, col 2</td>
</tr>
<tbody>
</table>
|
|
other elements that go just before the
section are:
| source | displayed | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
<table border="1">
<tr>
<td width="100px">cell 1</td>
<td width="100px">cell 2</td>
<td width="100px">cell 3</td>
</tr>
<tr>
<td colspan="2">cell 4 - colspan="2"</td>
<td rowspan="2">cell 5 - rowspan="2"</td>
</tr>
<tr>
<td>cell 6</td>
<td>cell 7</td>
</tr>
<tr>
<td>cell 8</td>
<td colspan="2" rowspan="2">
cell 9 - colspan="2" rowspan="2"</td>
</tr>
<tr>
<td>cell 10</td>
</tr>
</table>
|
|
||||||||||||
cellpadding is the spacing (in pixels) between the contents of a cell and the inside border/edge of the cell
cellspacing is the spacing (in pixels) between cells
border is the thickness of the border (in pixels) around the table and cells
| source | displayed | ||||
|---|---|---|---|---|---|
<table border="1" cellspacing="0" cellpadding="5">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
|
|
||||
<table border="1" cellspacing="5" cellpadding="0">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
|
|
||||
<table border="0" cellspacing="5" cellpadding="0">
<tr>
<td>cell 1</td>
<td>cell 2</td>
</tr>
<tr>
<td>cell 3</td>
<td>cell 4</td>
</tr>
</table>
|
|
many of the tags in this section can also take the attributes align ("left|center|right" - the horizontal alignment of the contents of the tag) and valign (the vertical alignment of the contents of the tag)
|
<p align="center"> <p align="left"> - the default <p align="right"> | |||
| |||
|
<img src="url of image" alt="alt text">
e.g. in the same folder that this html page is in is another folder called images, in here is a picture named smileynuts.gif
| source | displayed |
|---|---|
| <img src="images/smileynuts.gif" alt="smile nutter!"> | 
|
| <img src="images/wrongname.gif" alt="smile nutter!"> |  |
if, for some reason, the browser can't find your image - it displayes the 'alt' text instead.
<a></a>: the anchor tag
<a href="rel or abs url">link text</a>
these start with a folder name or the page name itself, or with "../" which moves up one level to the parent folder of the current folder.
so to link back to the computer science page, i use the url: "../CompSci.html"
<a href="../CompSci.html">back to computer home</a>
start with "http://"
<a href="http://www.google.co.nz">
go to google nz<a>
but if people use this link, they leave your site (unless they right-click and select 'open in new window/tab').
to open the link in a new page add the attribute: target="_blank":
<a href="http://www.google.co.nz" target="_blank">
open google nz in a new page<a> - try it!
first, for each point you will want to directly link to you need to give it a name with an anchor tag: <a name="name of section"></a>beginning of your section
then you can link to it by appending to the end of the url with #name of section
if moving to different places on the same page, you use href="#name of section" in your link
e.g. for the back to top sections:<a href="#top">back to top</a>
if i wanted to link to <a href="here"></a>here from another page,
i would use
<a href="http://alicia.orcon.net.nz/computer/webtutorials/htmltutorial1.html#here">link to 'here' in html tutorial</a>
try it!