HTML Beginner Tutorial – Lists

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 8:29 pm - 595 views

There are three types of list; unordered lists, ordered lists and definition lists. We will look at the first two here, and definition lists in the HTML Intermediate Tutorial.

Unordered lists and ordered lists work the same way, except that the former is used for non-sequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers.

The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item.

Change your code to the following:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title>My first web page</title>
</head>

<body>
	<h1>My first web page</h1>

	<h2>What this is</h2>
	<p>A simple page put together using HTML</p>

	<h2>Why this is</h2>
	<ul>
		<li>To learn HTML</li>
		<li>To show off</li>
		<li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
	</ul>

</body>

</html>

If you look at this in your browser, you will see a bulleted list. Simply change the ul tags to ol and you will see that the list will become numbered.

Lists can also be included in lists to form a structured hierarchy of items.

Replace the above list code with the following:


<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>

Et voil?. A list within a list. And you could put another list within that. And another within that. And so on and so forth.

0 Comments

HTML Beginner Tutorial – Links

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 8:26 pm - 843 views

So far you’ve been making a stand-alone web page, which is all very well and nice, but what makes the internet so special is that it all links together.

The ‘H’ and ‘T’ in ‘HTML‘ stand for ‘hypertext‘, which basically means a system of linked text.

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.

Add this to your document:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
	<title>My first web page</title>
</head>

<body>

	<h1>My first web page</h1>

	<h2>What this is</h2>
	<p>A simple page put together using HTML</p>

	<h2>Why this is</h2>
	<p>To learn HTML</p>

	<h2>Where to find the tutorial</h2>
	<p><a href="http://www.programimi.com">ProgramimiCOM</a></p>

</body>

</html>

The destination of the link is defined in the href attribute of the tag. The link can be absolute, such as “http://www.programimi.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 of moss in flight</a> or something like this.

A link does not have to link to another HTML file, it can link to any file anywhere on the web.

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, rather than replacing the web page the user is on, which at first thought may sound like a good idea as it doesn’t take the user away from your site.

There are a number of reasons why you shouldn’t do this however.

From a usability point of view, this method breaks navigation. The most commonly used navigation tool on a browser is the “back” button. Opening a new window disables this function.

On a wider, more general usability point, users do not want new windows to be popping up all over the place. If they want to open a link in a new window then they can choose to do so themselves.

0 Comments

HTML Beginner Tutorial – Images

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 8:23 pm - 509 views

Things might seem a little bland and boring with all of this text formatting. Of course, the web is not just about text, it is multi-media and the most common form of media is the image.

The img tag is used to put an image in an HTML document and it looks like this:


<img src=”http://www.programimi.com/wp-content/themes/limau-orange-01/images/logo.gif” width=”301? height=”56? alt=”ProgramimiCOM” />

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"...

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.

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.

Note that, like the br tag, because the img tag does not have a closing tag, it closes itself, ending with “/>”

The construction of images for the web is a little outside of the remit of this website, but it is worth noting a few things…

The most commonly used file formats used for images are GIFs and JPEGs. They are both compressed formats, and have very different uses.

GIFs can have no more than 256 colours, but they maintain the colours of the original image. The lower the number of colours you have in the image, the lower the file size will be.

GIFS SHOULD BE USED FOR IMAGES WITH SOLID COLOURS.

JPEGs on the other hand use a mathematical algorithm to compress the image and will distort the original slightly. The lower the compression, the higher the file size, but the clearer the image.

JPEGS SHOULD BE USED FOR IMAGES SUCH AS PHOTOGRAPHS.

Images are perhaps the largest files a new web designer will be handling. It is a common mistake to be oblivious to the file size of images, which can be extremely large. Web pages should download as quickly as possible, and if you keep in mind that most people still use modems that download at less than 7Kb a second (realistically it is less than 5Kb), you can see how a large file will greatly slow down the download time of a full page.

You need to strike a balance between image quality and image size. Most modern image manipulation programs allow you to compress images and the best way to figure out what is best suited for yourself is trial and error.

0 Comments

HTML Beginner Tutorial – Tables

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 8:19 pm - 637 views

Across the worldwide web, HTML tables are used and abused to layout pages. We will come across how to layout a page without tables, in the CSS Advanced Tutorial. The correct use for tables is to do exactly what you would expect a table to do – to structure tabular data.

There are a number of tags used in tables, and to fully get to grips with how they work is probably the most difficult area of this HTML Beginners Tutorial.

Copy the following code into the body of your document and then we will go through what each tag is doing:


<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>
	<tr>
		<td>Row 4, cell 1</td>
		<td>Row 4, cell 2</td>
		<td>Row 4, cell 3</td>
	</tr>
</table>

The table element defines the table.

The tr element defines a table row.

The td element defines a data cell. These must be enclosed in tr tags, as shown above.

If you imagine a 3×4 table, which is 12 cells, there should be four tr elements to define the rows and three td elements within each of the rows, making a total of 12 td elements.

1 Comment

HTML Beginner Tutorial – Forms

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 8:17 pm - 814 views

Forms can be used to send data across the web and are often used as contact forms to convert information inputted by a user into an email.

On their own, forms are useless. They need to be hooked up to a program that will process the data inputted by the user. These take all manner of guises and are outside of the remit of this website. If you use an internet service provider to host your HTML, they will be able to help you with this and will probably have clear and simple instructions on how, for example, to make a form-to-email form work.

The basic tags used in the actual HTML of forms are form, input, textarea, select and option.

form defines the form and within this tag, there is one required action attribute which tells the form where its contents will be sent to when it is submitted.

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).

So a form element will look something like this:


<form action="processingscript.php" method="post">

</form>

The input tag is the daddy of the form world. It can take ten forms, outlined below:

<input type="text" /> is a standard textbox. This can also have a value attribute, which sets the initial text in the textbox.
<input type="password" /> is similar to the textbox, but the characters typed in by the user will be hidden.
<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.
<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.
<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.
<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" />.
<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.
<input type="button" /> is a button that will not do anything without extra code added.
<input type="reset" /> is a button that when selected will reset the form fields to their default values.
<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.

A textarea is, basically, a large textbox. It requires a rows and cols attribute and is used like this:

<textarea rows="5" cols="20">A big load of text here</textarea>

The select tag works with the option tag to make drop-down select boxes.

They work like this:


<select>
	<option value="first option">Option 1</option>
	<option value="second option">Option 2</option>
	<option value="third option">Option 3</option>
</select>

When the form is submitted, the value of the selected option will be sent.

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>.

All of the tags mentioned above will look very nice presented on the page, but if you hook up your form to a form-handling program, they will all be ignored. This is because the form fields need names. So to all of the fields, the attribute name needs to be added, for example <input type="text" name="talkingsponge" />

A form might look like the one below. (Note: this form will not work unless there is a “contactus.php” file, which is stated in the action attribute of the form tag, to handle the submitted date)


<form action="contactus.php" method="post">

	<p>Name:</p>
	<p><input type="text" name="name" value="Your name" /></p>

	<p>Comments: </p>
	<p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p>

	<p>Are you:</p>
	<p><input type="radio" name="areyou" value="male" /> Male</p>
	<p><input type="radio" name="areyou" value="female" /> Female</p>
	<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
	<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>

	<p><input type="submit" /></p>

	<p><input type="reset" /></p>

</form>

There is a whole other level of complexity you can delve into in the HTML Advanced Tutorial if you are so inclined.

0 Comments

HTML Beginner Tutorial – Putting It All Together

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 8:13 pm - 428 views

If you have gone through all of the pages in this HTML Beginner Tutorial then you should be a competent HTMLer.

In fact, due to the fact that most people who use HTML use it rather badly, you should be better than most.

The following code incorporates all of the methods that have been explained in the previous pages:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

	<title>My first web page</title>

	<!-- By the way, this is a comment -->

</head>

<body>

<h1>My first web page</h1>

<h2>What this is</h2>
<p>A simple page put together using HTML. <strong>A simple page put together using HTML.</strong> A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML. A simple page put together using HTML.</p>

<h2>Why this is</h2>
<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>

<h2>Where to find the tutorial</h2>
<p><a href="http://www.programimi.com"><img src="http://www.programimi.com/wp-content/themes/limau-orange-01/images/logo.gif" width="301" height="56" alt="ProgramimiCOM" /></a></p>

<h3>Some random table</h3>
<table border="1">
	<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>
	<tr>
		<td>Row 4, cell 1</td>
		<td>Row 4, cell 2</td>
		<td>Row 4, cell 3</td>
	</tr>
</table>

<h3>Some random form</h3>
<p><strong>Note:</strong> It looks the part, but won't do a damned thing</p>

<form action="somescript.php" method="post">

<p>Name:</p>
<p><input type="text" name="name" value="Your name" /></p>

<p>Comments: </p>
<p><textarea rows="10" cols="20" name="comments">Your comments</textarea></p>

<p>Are you:</p>
<p><input type="radio" name="areyou" value="male" /> Male</p>
<p><input type="radio" name="areyou" value="female" /> Female</p>
<p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p>
<p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p>

<p><input type="submit" /></p>

<p><input type="reset" /></p>

</form>

</body>

</html>

There you have it. Save the file and play around with it – this is the best way to understand how everything works. Go on. Tinker.

When you’re happy, you can move on to the CSS Beginner Tutorial.

0 Comments

HTML Intermediate Tutorial – Span and Div

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 7:12 pm - 562 views

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.

They are used to group a chunk of HTML and hook some information on to that chunk, most commonly with the attributes class and id to associate the element with a class or id CSS selector.

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 class="paper">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 class="paper">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.

0 Comments

HTML Intermediate Tutorial – Meta Tags

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 6:48 pm - 486 views

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.

0 Comments

HTML Intermediate Tutorial – HTML Tables II

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 6:47 pm - 450 views

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.

The following code is similar to that in the Tables page of the HTML Beginner Tutorial.


<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.

0 Comments

HTML Intermediate Tutorial – Definition Lists

22 Jul

Posted by ProCOM bloggeraz on July 22, 2007 – 6:45 pm - 501 views

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 dt followed 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>