|
|
 Posted 13/02/2006 14:07:54 |
|
|
286
 
Group: Forum Members
Last Login: 03/08/2006 08:51:13
Posts: 345,
Visits: 876
|
|
| Micro Mart Diploma Basic HTML - Part 1/8: Mark-up It's the first part in our second diploma and this time, we're going to be looking at basic HTML programming.
So, why bother to learn HTML when there are so many good packages around that let you design your pages directly onto the screen without any code? Because by understanding what goes on behind the scene, you'll be better placed to move on to more advanced web programming such as PHP or .NET languages. You'll also be able to tweak your pages when the design program doesn't get it quite right. Firstly, although the 'L' in HTML stands for language, it is not a programming language. It is a collection of mark-up codes that describe the structure of a document. The tags tell the computer that at a certain point in the flow of the text it needs to do something, such as start displaying text in bold or insert an image etc. Get Coding
We're assuming you don't have a website design package or an HTML editor. All you need to get started is any old text editor - we'll use Windows Notepad. Watch out for notepad adding a '.txt' extension to your filenames though. HTML documents must have a '.html' or '.htm' extension, otherwise your HTML tags won't be interpreted. To view your saved document, simply choose 'Open file' from your browser's menu. This is the way in which you view documents on your own computer. We'll see the different way in which you view documents on the Internet later. All HTML documents should have the following basic structure: <HTML>
<HEAD>
<TITLE>
My web page
</TITLE>
</HEAD>
<BODY>
Welcome to my web page
</BODY>
</HTML> The code above simply displays 'Welcome to my web page' on the browser screen. You will notice a lot of words enclosed within angled brackets (e.g. '<HTML>') - these are known as tags. Tags are elements of HTML and usually come in pairs. A pair of like-tags is known as a container and bounds the area of the document to which it applies. A tag with a '/' before the word is a closing tag and one without is an opening tag. Notice the opening tag <HTML> at the start of the document and the closing tag </HTML> at the end of the document - the whole document is 'contained' within them. Within the <HTML></HTML> container are two other containers: <HEAD></HEAD> and <BODY></BODY>. Within the <HEAD></HEAD> container is yet another container <TITLE></TITLE> etc. Tags Explained The <HTML></HTML> tags contain the whole web page. The <HEAD></HEAD> section contains information about the document. An important piece of information is the <TITLE></TITLE> section. The text enclosed in this container is displayed in the browser's title bar while the page is being viewed and it's also important to search engines. The <BODY></BODY> section contains the content of your document. The majority of HTML elements are found within the <BODY></BODY> section. Notice how each new nested section is indented by a space. This is just for readability as browsers ignore multiple spaces, tabs and carriage returns. However, 'nesting' tags is vitally important. Look at how the <TITLE></TITLE> section is completely contained within the <HEAD></HEAD> section and that the <HEAD></HEAD> section is, in turn, completely contained within the <HTML></HTML> section. Now look at this wrongly nested version of our sample document: <HTML>
<HEAD>
<TITLE>
My web page
</HEAD>
</TITLE>
<BODY>
Welcome to my web page
</BODY>
</HTML> The problem is that the <TITLE></TITLE> container also contains the closing tag </HEAD> in addition to the title text. The </TITLE> closing tag should appear before the </HEAD> closing tag. In other words, the containers overlap rather than being nested. Put simply, the rule is this: You cannot close a container if there is another open container within it. Now I'll introduce a couple of new tags just to further illustrate container nesting. Let's say we want the simple message 'Welcome to my Web page' to appear in italic. We would simply contain the text within italic tags <I> and </I>, like this: <I>Welcome to my Web page</I> Now, say we want to emphasise the word 'my' by making it bold. We would use the bold tags <B> and </B> to contain just the word 'my' like this: <I>Welcome to <B>my</B> Web page</I> Try it. Notice that the whole sentence is still in italic, including the word 'my'. The <B> and </B> tags are completely nested or contained within the <I> and </I> tags so the whole sentence is shown in italic. So how would you make the bold 'my' non-italic, while keeping the rest of the sentence italic? Like this? <I>Welcome to <B></I>my<I></B> <I>Web page</I> or like this? <I>Welcome to</I> <B>my</B> <I>Web page</I> The second is correct. The first example is incorrect because the first </I> tag is attempting to close the <I> container, which in turn contains an open <B> tag. The heading tags <H1> to <H6> can be used to create headings with text in one of six sizes - 1 being the biggest and 6 the smallest. Normal text is equivalent to <H4>. Heading tags can be used to show text of roughly a certain size, anywhere within your document. However, the prime purpose of HTML is to describe the structure of your document and not its look. That may seem a little strange as almost all tags impart a certain look on the area of the document that is bound by them. That default look though, is subject to change by both the users' browsers and the user themselves. I'll explain more later but for now, it is safe to assume that a <H1> tag gives large text but you really should only use it where you are actually describing a major heading within your document. Using Paragraphs An important tag is the paragraph tag - <P>. The browser will usually show a paragraph separated from the preceding text by a blank line. The <P> tag is unusual in that it does not strictly need a closing </P> tag but it is always good practice to add one - it will help you to nest correctly. A common mistake is to try to use multiple <P> tags together to open up blank lines. This does not work because the <P> tag describes the structure of the document and the fact that it separates its content from the preceding text in most browsers is incidental. The <BR> tag, which does not have a corresponding closing tag, can be used to force a line break and to open up a blank line. <P>Here is paragraph 1.
<P>Here is paragraph 2 and I'm going to break to another line here...<BR>There I'm on another line now! <CENTER></CENTER>, (note the American spelling), is a container that causes anything within it to be centre justified within the browser window. <CENTER>
<H1>Welcome to my website</H1>
<H2>Last updated: 10th June 2005</H2>
</CENTER> Don't forget everything to be displayed goes between the <BODY></BODY> tags, I'm simplifying it here to save space. Horizontal Rule Now to separate the headings from the text. The <HR> tag stands for horizontal rule and simply draws a horizontal line across the browser screen at the point at which it appears in the document. Like <BR> it's a single tag and does not have a corresponding closing tag. By default, it draws a neat line, one pixel in width (a pixel being the smallest point that can be referenced on the screen), extending the whole width of the browser screen. We can change this by applying 'attributes' the <HR> tag. Attributes All tags accept attributes. Their purpose varies but they either describe the tag (the HTML element) or they modify its behaviour. Some tags have mandatory attributes whereas others are optional and a default is applied if they are not specified. Attributes are specified within the angled-brackets of the tag after the tag name. They are always specified on an opening tag and not on the closing tag. The syntax is as follows: <TAGNAME attribute="value"...> For example, the <HR> tag accepts an attribute called WIDTH. This specifies how far across the browser window the line will be drawn. You would specify the WIDTH attribute with the <HR> tag as follows: <HR WIDTH="60%"> This tells the browser that it should draw a horizontal line extending across 60% of the width of the browser window. If the user resizes the browser window, the browser will adjust the length of the line accordingly. The value of the WIDTH attribute of the <HR> tag can either be a percentage (which varies with the size of the browser window), a fixed number of pixels (e.g. 10px) or a measurement (e.g. 50cm). In the latter cases, the line will be a fixed width. If the number of pixels specified is larger than the browser window, the browser will add a scroll bar automatically. <CENTER>
<H1>Welcome to my website</H1>
<H2>Last updated: 10th June 2005</H2>
<HR WIDTH="80%">
</CENTER> In this example, I've added a <HR> with a width of 80% and because I nested it within the <CENTER></CENTER> container, it was also centralised. Another attribute of the <HR> tag is SIZE. This specifies the thickness of the line in pixels (the default is one pixel). To make a nice chunky line, extending half way across the browser window, you would write: <HR WIDTH="50%" SIZE="10"> Look Around A great way to learn HTML is to look at other people's code. To do this, while you are viewing a web page, select the 'View' menu then select 'Source' (in Internet Explorer - other browsers may differ). Copy and paste this into your editor and try to see what's going on. Play about with any new tags you find. In the next chapter, I'll introduce more text formatting tags and explain the difference between physical and logical tags.
Petula (level60 Gnome Warlock)
Ichabod (level60 Human Warrior)
Grommoo (level37 Tauren Shaman)
Bronwyn (level34 Dwarf Priest)
World of Warcraft - Aggramar Server
|
|
|
|
| Posted 13/02/2006 14:10:54 |
|
|
286
Group: Forum Members
Last Login: 03/08/2006 08:51:13
Posts: 345,
Visits: 876
|
|
Diploma Module 2 - Basic HTML: Part 1/2 - Text Formatting And Physical Elements
There's lots to get through this week so I'll jump straight in with some more text formatting tags. Examine this block of code...<HTML>
<HEAD>
<TITLE>MORE TEXT FORMATTING TAGS</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">More text formatting tags</H1>
<DIV ALIGN="CENTER">
<BR><U> is <U>Underline</U>
<BR><SUB> is <SUB>Subscript</SUB>
<BR><SUP> is <SUP>Superscript</SUP>
<BR><STRIKE> is <STRIKE>Strikethrough</STRIKE>
<BR><BIG> is <BIG>Big</BIG>
<BR><BIG><BIG> is<BIG><BIG>Bigger</BIG></BIG>
<BR><SMALL> is <SMALL>Small</SMALL>
<BR><SMALL><SMALL> is <SMALL> <SMALL>Smaller</SMALL> </SMALL>
</DIV>
</BODY>
</HTML>
The first of these, underline <U></U>, is not used very often. The reason being that hypertext links on the web are signified by underlined text. Therefore, if text is underlined and doesn't form a link, it may confuse people viewing the page. However, links are usually coloured blue, so as long as underlines are kept the same colour as the surrounding text and used sparingly, it should be okay to use them on occasion if absolutely necessary. Subscript <SUB></SUB> and Superscript <SUP></SUP> do exactly as their names suggest, as does Strikethrough, <STRIKE></STRIKE>. Sizing Up
Last week, I showed how you can use the heading tags <H1> to <H6> to change the size of your text. The real purpose for the heading tags though, is to form part of the document's structure. It's incidental that in most graphical browsers they are shown at different sizes. In text-only browsers, for instance, headings may be indented to varying levels or made bright or bold. A better way to alter the size of your text is with the <BIG></BIG> and <SMALL></SMALL> tags. These alter the text size on a scale from one (smallest) to seven (largest) - yes, that's the opposite of the heading tags numbering system - isn't life fun? The default setting is size three. Each nesting of a <BIG> tag goes up a size and each nesting of a <SMALL> tag goes down a size. The following shows how nesting the <BIG> tag gives different sizes. <BIG><BIG><BIG>This is size 6</BIG>This is size 5</BIG>This is size 4</BIG> Your text will still not change size in a text-only browser but at least it will not be indented. Now look back at the first code example before. See the characters after the <BR> and before the word 'is' on most of the lines? For example: <BR><STRIKE> is <STRIKE>Strikethrough</STRIKE> What's all that about then? Well look at the browser output of, say the 'Strikethrough' line - it starts with the <STRIKE> tag. If you want to display the word '<STRIKE>' for example in the browser, you can't just put it into the code - otherwise browsers will interpret it as a tag. You need to use special codes: < stands for 'less than' and > stands for 'greater than', so <STRlKE> displays as <STRIKE>. There are many other codes for foreign characters, but the most common are for those characters that would otherwise be treated differently by the browser, like multiple spaces. Here are a few useful codes - you can use the number or the named version of these, but don't forget the semicolon on the end: or   = Space
" or " = Quote
& or & = Ampersand (& )
Physical And Logical Elements
So far we've looked at just physical elements. These elements physically do a particular job. For instance, their job may be to make text bold or to underline it. There is another set of elements though: logical elements. These elements describe the type of text contained within them. The way in which that text is then displayed is incidental and under the control of the browser. That said there tends to be standard ways in which modern browsers display logical elements.
With stylesheets (we'll talk about these in a few weeks), logical elements are becoming more important. Let's say, for instance, you want a sentence to stand out. You could use the bold element <B></B> or you could use <STRONG><STRONG>. <B></B> simply makes the text bold whereas <STRONG></STRONG> happens to display as bold but more importantly informs the browser that this portion of text needs to be picked out from the rest. Using stylesheets for instance, these elements could be displayed in a different colour. In other words, logical elements describe what text is, rather than how it should look. Here is a list of logical elements: <ABBR> </ABBR> Abbreviation
<CITE> </CITE> Citation
<CODE> </CODE> Program source code
<DFN > </DFN> Definition
<EM > </EM > Emphasis
<KBD> </KBD> Keyboard input (key-presses)
<SAMP></SAMP> Sample information
<STRONG> </STRONG> Text to stand out
<VAR> </VAR> Program variable Divisions And Blocks Last week we looked at the <CENTER> </CENTER> element, which centralises the text contained within it. You'll notice that in the above example I've centralised the headings and text without using <CENTRE> </CENTRE>. I did this by centralising the heading using the ALIGN attribute of the <H1> tag with a value of CENTER. This causes the text contained within the <H1></H1> container to be centre-justified within the browser window. Other values for the ALIGN attribute are LEFT (the default) and RIGHT. Similarly, I've centralised the main body of text by adding the ALIGN='CENTER' attribute and value to the <DIV> tag. <DIV></DIV> is a way of sectioning your document. <DIV></DIV> containers can be nested to give your document a structure. Divisions are very powerful when used with stylesheets and I'm only mentioning them here in passing. It certainly would do no harm to use <DIV ALIGN= "CENTER"> </DIV> instead of <CENTRE> </CENTRE> in all your code. <DIV>s work like a container - a box to insert content into. This container can have various properties. In the above example, try changing the <DIV> line to read <DIV ALIGN="CENTER" STYLE="background:lightblue;"> and you'll see the extent of the box. Again, more on style sheets in a few weeks. Until now, you've probably been patiently using the default Times New Roman font for proportional fonts and Courier for monospaced fonts. To exercise considerable control over your text, use the <FONT> </FONT> element (or using style sheets). Remember the different text sizes? Well <FONT> uses these too. You can specify a font size directly by using the SIZE attribute. For example, to specify a big size six font you would write <FONT SIZE="6">This is BIG</FONT> You can also emulate the <BIG> and <SMALL> tags by giving the SIZE attribute a relative value. This takes the form of a signed value such as +2 or -3 relative to the current font size. If the increase or decrease goes 'off the scale', seven or one is chosen. So, to achieve the same effect as two nested <BIG> tags, you would say <FONT SIZE="+2">This is BIG</FONT> <FONT> isn't just limited to sizing text though, it can colour it as well. To change the colour of the text contained within the <FONT> </FONT> tags we use the attribute 'COLOR' (note the American spelling!). The colour attribute accepts a value as a six digit hexadecimal number. representing the RGB value of the required colour. In English, RBG stands for Red, Green, Blue in a subtractive way, like mixing light, rather than additive like mixing paint. So each colour, for instance, produces white while none of any of them produces black, full red gives no green and full blue gives a bright magenta, and so on. Specifying what proportion of these colours is a little tricky though, since the values are two digit hexadecimal numbers therefore giving `a range of values for each 'primary' colour (red, green and blue) of '00' (none) to 'FF' - full. For example, white is '#FFFFFF' black is '#000000' and magenta is '#FF00FF'. Some graphics packages will show you the values of colours so you can pick one and read off the value. Fortunately, most modern browsers support a large range of named colours so you could specify COLOR='MAGENTA' instead of '#FF00FF'. This is a much more friendly approach, but the names do get a bit silly - whitesmoke, rosybrown, lightsalmon, papayawhip and lemonchiffon; programming never used to be like this. COLOUR CODING There are hundreds of websites dedicated to such colours. For a great colour palette and posters/books to buy try www.visibone.com. Finally, the FACE attribute of the <FONT> tag causes the contained text to be displayed in the font specified by name. This is only possible if the viewer has the named font installed on their computer. The FACE attribute therefore allows a list of fonts to be specified, which the browser will try one by one until it finds each on the viewer's computer. So a line of code to display huge 'papaya whip' coloured letters in Comic Sans MS font (or Arial if that's not available) would be: <FONT SIZE="7" COLOR= "PAPAYAWHIP" FACE="COMIC SANS MS, ARIAL">Nice colour!? I don't think so!</FONT>
Petula (level60 Gnome Warlock)
Ichabod (level60 Human Warrior)
Grommoo (level37 Tauren Shaman)
Bronwyn (level34 Dwarf Priest)
World of Warcraft - Aggramar Server
|
|
|
|
| Posted 13/02/2006 14:17:11 |
|
|
286
Group: Forum Members
Last Login: 03/08/2006 08:51:13
Posts: 345,
Visits: 876
|
|
| Basic HTML: Part 3/8 Graphics It's part three of our Basic HTML diploma and I thought it was about time we had a look at graphics. Each pixel of a bitmapped image contains information about the colour it should show. True colour uses 24 bits per pixel to make 16,777,216 colours possible and this is usually used to display photographic quality images. Not only would this take up loads of memory, however, it would take ages to download. Fortunately, the main image formats used on the Internet have built in compression algorithms that greatly reduce their size. The commonest formats are GIF and JPG. Each has its pros and cons and each is suited to a particular type of image. Images are compressed to make them smaller so faster to download. Overdoing it though will seriously compromise image qualify. Here the 'a' in the Micro Mart logo has been compressed to a reasonable amount on the left image and by too much on the right. Notice colour variations creeping in - these are called JPG artefacts GIF GIF images have the filename extension '.gif'. They only handle 8-bit images and so are limited to 256 colours. Therefore they are best suited to diagrams and text in the form of an image. There are two variations of GIFs: GIF87 and GIF89a. GIF89a has the added advantage of being able to nominate one of its 256 colours as transparent This colour will not be displayed by the browser but will allow the background colour to show through. A good graphics package will allow you to select the colour to become transparent simply by pointing to it. Transparency can produce some stunning results if used correctly. An image can be used in conjunction with a hyperlink and if made transparent can give your web page a multimedia look. A word of warning though; make sure you choose the colour to be made transparent with care. As an extreme example, imagine you had a picture of a zebra on a black background and you chose black to become transparent. The web page background would also show through its black stripes - probably quite amusing but unlikely to be the desired effect. Also, a common technique for 'smoothing' the edges of an image is to anti-alias it. This means that rather than use a stepped edge to an image, a gradual change of colour gives the illusion of smoothness. The problem here is that when it is used with transparency, because only one colour can be made transparent and not shades of it, a 'halo' effect results around the image where the slight colour variations are not made transparent. The alternative is to use a fixed background colour instead of transparency. This is the Micro Mart logo as used on the website. It's a 173x63 pixel image. Look how smooth the edges look 
Magnified we can see why the edges look smooth - they use lots of anti-aliasing. Anti-aliasing is a setting on most tools in your graphics application. In general turn it on when creating images and images of text 
This is a close-up of what the logo would look like without anti-aliasing. This would give a very rough look to the actual logo 
I can't apologise enough to Micro Mart's brand and design people for this - but it's just to illustrate a point that anti-aliased edges can't be used on different coloured backgrounds as they introduce a halo GIF89a also supports animations. These are simply multiple images stored in the one image file. A suitable browser will display each of the images in succession, giving the effect of movement. Delays and loops can also be built into the image using suitable software. Used sparingly, animations can be very effective - for instance a spinning star to highlight something new or a moving arrow to show where to press. But do keep animated images small. Older browsers that do not support animations will usually show the first image in an animation sequence. JPG
JPG images have the filename extension of ".jpg" or ".jpeg". They store images in 24-bit true colour and so are best suited to photographs. Their compression algorithm is extremely efficient and can be further enhanced by specifying a percentage loss. This specifies the amount of detail that can be omitted. JPGs do not support transparency or animation. So in summary, the two main points to glean from all this are: choose the format which best suits the type of image - GIF for line drawings, diagrams and text and JPG for photographs; consider the download time - this may not be apparent if you are displaying images locally on your PC or if you have broadband. Remember though that many people still use a dial-up connection, so don't make images too large or use too many. Don't feel that you have to use loads of images either. Some of the most effective websites use a very clean, almost sparse format with two or three very small graphics.
Putting Images Into Your Web Page
Okay, you want to know how to put images into your web page, don't you? Easy:
<IMG SRC="myimage.gif">
The <IMG> element has a mandatory parameter SRC. This is the filename of your image. The example above assumes that the image it specifies exists in the working directory on the server (i.e. in the same place as your web pages). The source could be a relative such as:
<IMG SRC="pics/myimage.gif">
This points to a subdirectory of the current directory, which contains the image. The source could be a link to someone else's website:
<IMG SRC="www.othercompany.com/images/logo.gif">
Try to avoid this though, because of the extra time involved in looking up the other website and then downloading from another location, not to mention the legal/moral aspect of using their copyrighted image and bandwidth. Try to keep all your images on your own server. If the image pointed to by the SRC parameter does not exist, the browser will display a symbol in its place indicating that the image could not be found.
Size Matters
Until a full image has been fully loaded, the browser has no idea how big it is. It therefore cannot determine the page layout until all the images have been downloaded. You can tell the browser how big an image is in advance by using the HEIGHT and WIDTH parameters to the IMG element. For example:
<IMG SRC="myimage.gif" HEIGHT="300" WIDTH="150">
The browser will then reserve space on the page and download the image into that space. The browser can then download the text and display it while the images are still downloading. Your graphics program will tell you the size of the image - if you specify the size incorrectly, the image will still load into the space but its dimensions will be distorted so your image may appear squashed or stretched. HEIGHT and WIDTH can be used to intentionally resize an image but this is not a good idea. It is better to resize the image in your graphics program, particularly if you want to reduce the image size, because the full image is still loaded in even if you tell the browser it should be half size. By resizing in your graphics program you would reduce file size and therefore download time.
Specifying an image's height and width in the <IMG> tag is a good idea as it 'reserves' space in the browser so the browser can continue to layout the rest of the page
Backgrounds
The default browser backgrounds are chosen for their neutral colours and hence their readability. You can, however, change the colour of the browser background or even use an image as the background.
Internet Explorer supports a non-standard feature that makes the background static so that when the browser window is scrolled, the background stays still. To use this, set the value of the BGPROPERTIES parameter of the <BODY> tag to "FIXED":
<BODY BACKGROUND= "bgimage.gif" BGPROPERTIES= "FIXED">
Be aware, though, that a poor combination of background and foreground can make your site look amateurish or simply unreadable. Changing the background colour couldn't be simpler. You simply specify the colour as the value to the BGCOLOR parameter of the <BODY> element. The colour may be specified as a number or a name as with <FONT>:
<BODY BGCOLOR="CORNFLOWERBLUE">
Specifying a background image is just as easy with the BACKGROUND parameter. Simply specify the URL of your image as the value to this parameter and the image will be tiled (repeated horizontally and vertically to fill the browser window) as the background: <BODY BACKGROUND="bgimage.gif"> It's even more important to choose a background image with care than a background colour. Contrast is the most important feature with pale backgrounds and dark text working best. Blurring the background image slightly, using your graphics program makes the foreground text stand out in a 3D-like effect. The <IMG> element supports simple alignment of images, which also determines how text will flow around them. The alignment parameters work as you would expect but it's important to note the following. TOP MIDDLE and BOTTOM describe where the text is to be aligned in relation to the image whereas LEFT and RIGHT describe where the image is aligned in relation to the browser window. Text then flows from the top of the image on the other side. So an image aligned RIGHT would be placed against the right-hand edge of the browser window and text would flow from the top of the image, on the image's left-hand side. The opposite is true of LEFT aligned images. The automatic text flowing which browsers provide is very powerful but there will be times when you want to break the text flow around an image and restart text after the image. <BR> will cause text following it to start on a new line but within the flow around the image. 
Here, there is a <BR> after the word 'caption' alongside the first image. Notice how it starts a new line but one that is still alongside the image. A parameter of <BR> called CLEAR breaks the text flow, restarting it after the image. There is a <BR CLEAR="ALL"> after the word 'caption' alongside the second image. Here is the code for this example. <HTML>
<HEAD>
<TITLE>Image alignment example </TITLE>
</HEAD>
<BODY>
<IMG SRC="test.gif" ALIGN ="LEFT">
I want the next sentence to appear under the image as a caption.
<BR > But it doesn't <HR>
<BR CLEAR= "ALL"> <1MG SRC="cAtest.gif" ALIGN ="LEFT">
I want the next sentence to appear under the image as a caption.
<BR CLEAR= "ALL"> It works!
</BODY>
</HTML> The flow around an image isn't just restricted to text. Other images will also flow around an image as will just about anything else you can place on your page. This is the reason why I have inserted a <BR CLEAR= "ALL"> before the second image otherwise it would have been placed in the flow to the right of the first image. Borders And Spacing
You may have noticed that the foreground images have a border around them. To add a border to an image, use the BORDER parameter of the <IMG> element - its value is the thickness of the border in pixels:
<IMG SRC="myimage.gif" BORDER="2">
To leave a space around an image, use the VSPACE and HSPACE parameters of the <IMG> element - again their values are in pixels. VSPACE inserts an area of clear space to the top and bottom of the image. By 'clear space' I mean that the area is reserved and text or images will not show in it. On the other hand, background colour or a background image will show in it. HSPACE leaves an area to the sides of the image. Both VSPACE and HSPACE can be used together to leave a protective border around an image to ensure it doesn't merge into other images or text. We take images for granted on the web, but there are instances when images are not available. Text browsers are the obvious instance; audio browsers for blind people are another. Obviously any text contained within an image will not be available to them. Fortunately you add the ALT parameter to the <IMG> tag. ALT accepts that text is used in place of the image where appropriate: <IMG SRC="myimage.gif" ALT="A photo of myself on holiday"> So far any visitors to your website have been trapped there. This isn't a good idea if you want them to consider ever coming back. Next week we'll see how to add links to your page to get your viewers surfing.
Petula (level60 Gnome Warlock)
Ichabod (level60 Human Warrior)
Grommoo (level37 Tauren Shaman)
Bronwyn (level34 Dwarf Priest)
World of Warcraft - Aggramar Server
|
|
|
|
| Posted 13/02/2006 14:23:06 |
|
|
286
Group: Forum Members
Last Login: 03/08/2006 08:51:13
Posts: 345,
Visits: 876
|
|
Micro Mart Diplomas Basic HTML Part 4/8: Tables
There are many instances in which information is best displayed in tabular form. Timetables, price lists, sports results and so on are all easiest to read in rows and columns. The problem is that HTML reduces multiple white space (spaces, tabs etc) to a single space. There is a container tab that allows you to preserve white space so that you can lay out text in precise columns. This is the <PRE> element (pre-formatted text). However, the trade-off of being able to line text up is that any text enclosed within the <PRE></PRE> container is displayed in a fixed font, so that each character occupies a similar amount of space and spaces and tabs are thus preserved - it doesn't look pretty. Fortunately there is a set of elements specifically designed for table layout, whose use goes beyond simple information presentation.These elements are <TABLE>, <TH>, <TR> and <TD>. The <TABLE> </TABLE> container encloses the table. Within this you first need to define your table's rows - the <TR> element indicates a new row. Following the <TR> element will be <TD> or <TH> elements. <TD> stands for 'table data' and each <TD> element marks the start of a new data cell within the current row. The text that follows the <TD> will be shown in that data cell.
Table Elements
<TH> is a variation of <TD>. Like <TD>, <TH> defines a data cell but is intended to be used as a column heading. <TH> cells are usually displayed differently than <TD> cells by the browser (<TH> data is usually bold and centered). You can alter this easily by using style sheets and you are free to use any text enhancement elements you like within <TH> or <TD> elements. In fact, the data in table cells is not limited to text - you can also include images, video clips, links and even other tables. Let's keep things simple for now though and stick with text. Look at the following table example, which uses two columns. The first contains the description of an electrical item and the second contains its price. The text following the two <TH> elements gives each column a heading whilst the actual cell data follows the <TD> elements. The <TR> elements tell the browser to start each new row. <TABLE >
<TR>
<TH >Item</TH ><TH>Price</TH>
</TR >
<TR>
<TD>Refrigerator</TD><TD>£239.99</TD>
</TR>
<TR>
<TD>Television</TD><TD>£159.99</TD>
</TR>
<TR>
<TD> Microwave</TD> <TD > £99.99 </TD>
</TR>
</TABLE> Notice also how the <TH> elements have been used in the same way as the <TD> elements. I haven't implicitly told the browser the number of rows and columns to display. It works out the number of rows via the number of <TR> elements within the <TABLE> </TABLE> container and the number of columns as the maximum number of <TH> and <TD> elements within any one row of the table. If any row contains fewer cells than the row with the maximum number, then that row will be made up to the maximum number of cells by having blank cells added to the right. You can specify how many rows and columns to display if you like by using the COLS and ROWS attributes of the <TABLE> element for example: <TABLE COLS="2" ROWS="3"> which makes your document source more readable. So far so good. Now I'll complicate things a bit by introducing cells that span more than one column or row.
Cell Spanning
Sometimes you may want a particular column or row to span multiple columns or rows, especially in headings. This can be achieved with the COLSPAN and ROWSPAN attributes of the <TD> and <TH> elements. Look at the following code:
<TABLE ROWS="2" COLS="2" BORDER="5">
<CAPTION>Simple table</CAPTION>
<TR>
<TD>Row 1, Column 1</TD><TD>Row 1, Column 2</TD>
</TR>
<TR>
<TD>Row 2, Column 1</TD> <TD>Row 2, Column 2</TD>
</TR>
</TABLE> <BR> <TABLE ROWS="2" COLS="2" BORDER="5">
<CAPTION> ROWSPAN example </CAPTION>
<TR>
<TD ROWSPAN="2">Rows 1 and 2, Column 1</TD>
<TD>Row 1, Column 2</TD>
</TR>
<TR>
<TD>Row 2, Column 2</TD>
</TR>
</TABLE> <BR> <TABLE ROWS="2" COLS="2" BORDER="5">
<CAPTION >COLSPAN example </CAPTION>
<TR>
<TD COLSPAN="2">Row 1, Columns 1 and 2</TD>
</TR>
<TR>
<TD>Row 2, Column 1</TD> <TD>Row 2, Column 2</TD>
</TR>
</TABLE> Each of the three tables contains two rows of two columns but look in particular at the second table. Notice that the first cell (first <TD> ) within the first row (first <TR> ) contains the attribute and value ROWSPAN="2" and that the second row therefore only contains one cell definition (<TD> ). This is because the first cell of the first row automatically extends to the first cell of the second row. Likewise, in the last table, the first row contains only one cell definition because the first cell spans both columns. The above example also demonstrates the optional <CAPTION></CAPTION> container. This lives within the <TABLE></TABLE> container and defines - you've guessed it - a caption. The browser will display this caption, centralised, either above or below the table. It's also possible to make your table more colourful and even use an image as its background. To colour the background of the entire table, use the BGCOLOR attribute of the <TABLE> element. For example, the following will colour the background of your entire table red: <TABLE BGCOLOR="RED"> To use an image as the background to a table, use the BACKGROUND attribute: <TABLE BACKGROUND= "myimage.gif"> The specified image will be tiled, if necessary, within the bounds of the table. The BGCOLOR and BACKGROUND attributes can also be used with the <TR>, <TD> and <TH> elements affecting the whole row or individual cells as appropriate. The setting of <TD> or <TH> takes priority over <TR>, which in turn takes priority over <TABLE>. It is therefore possible to colour precise areas of a table with the smallest amount of coding possible. Here, I've added the Micromart logo as a background to the whole table except the bottom right cell, which is overridden with a green background. <TABLE ROWS="2" COLS="2" BORDER="5" BACKGROUND="mmlogo.jpg">
<CAPTION>Simple table</CAPTION>
<TR>
<TD>Row 1, Column 1</TD>
<TD>Row 1, Column 2</TD>
</TR>
<TR>
<TD>Row 2, Column 1</TD>
<TD BGCOLOR="GREEN">Row 2, Column 2</TD>
</TR>
</TABLE> 
Foreground text colour is achieved using the COLOR attribute of the <FONT> element.
Borders And Grids As you have seen in the previous example, tables can have borders. To change its thickness, or remove it, use the BORDER attribute of the <TABLE> element. The value of BORDER is the thickness of the border in pixels with zero giving no visible border. While there's no real upper limit to the border value, anything above about 20 looks a bit odd. The BORDERCOLOR attribute allows you to change the border colour, eg: <TABLE BORDER="10" BORDERCOLOR= "red" > This (unsurprisingly) gives a nice red border. Again all this can be done with style sheets. Within the cells of a table, it's possible to control the amount of space between the cell border and the contents of the cell. This is controlled by the CELLPADDING attribute of the <TABLE> element. The value of CELLPADDING is the number of pixels that the browser will leave all around the inside of the cell border. This space is transparent so any coloured background or background image will show through it. The default value of CELLPADDING is 1. The complementary CELLSPACING controls spacing between cells. This example shows the effects of various cellspacing and cellpadding values within a two-cell table. 
If you don't want all four sides of a table's border to be displayed, you can specify precisely which are shown using the FRAME attribute of the <TABLE> element. Its values are: ABOVE - top border only
BELOW - bottom border only
HSIDES - top and bottom only
LHS - left border only
RHS - right border only
VSIDES - left and right
BOX - full border - all sides
VOID - no border
BORDER - all sides For instance, to just display the top and bottom borders of your table and not the sides, you would write: <TABLE BORDER= "5" FRAME="HSIDES"> The internal lines between cells can be controlled by the RULES attribute of the <TABLE> element. Its values are: NONE - No internal lines
ROWS - Horizontal lines only
COLS - Vertical lines only
ALL - Horizontal and vertical internal lines. To display a border to the top and bottom of your table and lines only between rows, you would write: <TABLE BORDER="5" FRAME= "HSIDES" RULES="ROWS"> So far we have simply used tables to display tabular data. However, tables are by far the most common method used for entire page layout. The most important thing you need to be able to control is the width of the table and its cells. The WIDTH attribute of the <TABLE>, <TH> and <TD> elements does this. The value of the WIDTH attribute can be expressed either in pixels (the smallest dots that make up images and text on the computer screen) or as a percentage. When used as an attribute of the <TABLE> element, WIDTH controls the width of the entire table. If you specify a width greater than the viewer's computer screen, the browser will add scroll bars automatically.
For example:
<TABLE WIDTH="500">
specifies that the table will be 500 pixels wide regardless of how the browser is sized on the viewer's computer. Scroll bars will be added if necessary.
<TABLE WIDTH="50%">
specifies that the table is half (50%) of the current width of the browser on the viewer's computer screen. As the viewer resizes the browser screen, so the table resizes to be the specified percentage of the current size of the browser. The attribute HEIGHT can also be applied to the <TABLE>, <TH> and <TD> elements and similarly uses a percentage or pixel value. If the height specified is less than that required then it's ignored. Height will only enlarge a table or cell, not reduce it. It's always a good idea to put something into a table cell even if it is just a space (i.e.: ) character. This prevents some browsers from rendering the table incorrectly, especially if an entire row or column contains nothing. Aligning You should be familiar with the standard ALIGN values of "LEFT", "RIGHT" and "CENTER". The table can be aligned relative to the browser window by using the ALIGN attribute of the <TABLE> attribute. ALIGN can also be used with <TR>, <TD> and <TH>. When used with these elements the alignment applies to the contents of the cell (all cells in the row in the case of <TR> ), relative to the walls of the cell. It's also possible to align the contents of a cell vertically relative to the cell walls. The VALIGN attribute of the <TR>, <TD> and <TH> elements achieves this. It accepts the values "BOTTOM", "MIDDLE" and "TOP". Again, when used with <TR>, VALIGN applies to all cells in that row. Now to precisely lay out your web page, all you need to do is to create a big table with zero border and as many cells as you like, aligned as appropriate and filled with text, images, whatever you like - even more tables! Although there are many ways to accurately layout a page these days, the good old table is still used on some very big sites. Just do a view source on your favourite sites and look for the <TR>s and <TD>s. Of course they will not have been coded by hand but the technique is still valid. Next time, we'll be looking at hyperlinks. See you then.
Petula (level60 Gnome Warlock)
Ichabod (level60 Human Warrior)
Grommoo (level37 Tauren Shaman)
Bronwyn (level34 Dwarf Priest)
World of Warcraft - Aggramar Server
|
|
|
|
| Posted 13/02/2006 14:27:47 |
|
|
286
Group: Forum Members
Last Login: 03/08/2006 08:51:13
Posts: 345,
Visits: 876
|
|
Diploma: Basic HTML Part 5/8: Hyperlinks
A good website is one that keeps visitors as long as possible, thereby selling more of your goods, getting your message across etc. Equally, a bad website keeps its visitors by holding them prisoner, whereas a good site will always contain links allowing them to click and continue with their surfing.Links may route the user to sites of companies with whom you have a trading relationship or maybe your friend's sites, or sites of people with similar interests. The important thing is that the visitor benefits from following these links and if they prove worthwhile the visitor may come back and visit you again. Search sites or 'portals', take this idea to extremes, providing ad hoc and customisable sets of links. They cash in by selling advertising space for businesses to benefit from the through-flow 'web traffic' - i.e. you and me. In fact the whole set of results returned from a search is in the form of links. Links are not just to other sites (although there will often be at least one external link on a site). The majority will be to other pages within your own site. You'll probably have a home page for example, with various links to pages of specific content. You will probably also want a 'home' button on each of these pages to link back to your home page. What Is A Link? So what exactly is a link? A link is a specific section of your document, usually a few words or an image. When the user positions the cursor over this area and clicks the mouse button, they are taken to a new web page. For example, clicking the mouse with the cursor over the words 'Click here for a site map' may load a web page showing your customers a map and exactly where they are in relation to the rest of your site. When an area of text is made into a link, it is coloured (usually blue) and underlined. If the user has visited the link before, it will be a different colour (usually magenta). When the 'arrow' cursor moves over a link, it changes to a 'pointing hand' indicating that the area can be clicked. You've probably already guessed that because a link is a 'clickable area' of your web page that it's created via a container tag. The <A></A> is the tag you'll need, together with its attribute HREF. The A stands for anchor and the value of the HREF attribute is the URL of the page which will be shown when the area between the <A></A> is clicked. For example: Please <A HREF="map.html">Click here</A> for a site map. The words 'click here' are contained within the <A></A> container and so become a 'hyperlink'. Clicking on these words in the browser will cause the web page 'map.html' to be displayed. I have talked about URLs previously when we used them to locate an image using the SRC attribute of the <IMG> element. The HREF attribute of the <A> element uses URLs in just the same way, except where SRC was expecting the URL of an image (i.e. a file ending in '.gif' or '.jpg'), HREF is more flexible. Here, HREF will usually be followed by the URL of an HTML document, in other words a web page. It may, however point to an image directly, in which case the image will be displayed on a blank browser screen. This is generally not a good idea though, since users must then press the 'back' button to return to the previous page. It's usually better to include the image within an HTML document, which includes a link back to the calling page and possibly to a further document. HREF can also link to other Internet resources. It could for example, link to an Adobe Acrobat (PDF) file or allow you to send an e-mail. URLS http://www.mydomain.com - This URL references a domain. The 'http' bit means HyperText Transport Protocol. This is simply the method by which web pages are accessed. Every server (servers are computers on which web pages are stored) on the Internet has a unique IP address. IP stands for Internet protocol and an IP address looks something like:
192.168.1.1.
The IP address is used to locate a server on the Internet. As you'll appreciate, IP addresses are difficult to remember so they can be referenced by a 'friendlier' domain name. Domain names are looked up automatically on a domain name server and translated into an IP address to enable the required server to be located. In the fictitious example above, the browser would attempt to locate a server called www.mydomain.com. Because we haven't specified a particular file on that server, the browser will look for the default file (web page). The default file depends on the server being accessed, but will usually be called index.html or index.htm. We can request a specific file, located on a specific server by specifying the file after the domain name such as: http://www. mydomain.co.uk/myfile.html if we want to specify a link on this page, to a file that's located in the current directory (i.e.: the same directory as the current web page), we can use a 'relative URL. A relative URL does away with the leading details and specifies the file relative to the current directory. Therefore, if our current directory was the root (top level) directory on the server www.mydomain.com, then the above example could be achieved simply by myfile.html. If the file was in a directory below the domain we could use: mydirectory/myfile.htm You can also use the DOS and Unix notation of '..' to signify the directory above the current one, so the following means show the web page called 'myfile.htm', located in the directory immediately above the current one:
../myfile.html Named Markers So far, we've referenced whole web pages to be displayed by clicking on a link. It is also possible to jump to a specific part of the current web page by using an anchor. Let's suppose you have a large web page that starts with a table of contents. Each line of the contents referred to a heading within the same page. You could make each line of the contents into a link which, when clicked, would cause the browser to jump to the relevant part of the document. To do this we need to identify a place marker within the document - in other words, the place where the link will jump to. Each marker is named individually, so you can have as many as you like within a page. To set a marker, you use the <A> element but with the NAME attribute in place of HREF. Such markers don't contain text, they simply mark a place within the document, but you must still use the </A> closing tag. To create a link to the marker, use an <A></A> container with an HREF value of the marker name preceded by a hash. For example: <HTML>
<HEAD>
<TITLE>Anchor example</TITLE>
</HEAD>
< BODY>
Click <A HREF="#endofapage">here </A> to jump to line 4 of this huge document <BR>This is line 1
<BR>This is line 2
<BR>This is line 3
<BR> <A NAME= "endofpage</A>This is line 4
</BODY>
</HTML> In this example, clicking on the word 'here' (as enclosed by the first <A></A> container), will activate the hyperlink to the marker called 'endofpage' at the start of line four. You can use any name you like for a marker. If the target line is already being displayed on the screen, then nothing will happen, otherwise the browser will move straight to the specified point. Markers can be used in conjunction with a full URL to first load a new web page and then jump to the specified position. The following example achieves this: Click <A HREF="newpage.htm#middle">here </A> to jump to the middle of another page. This would first load the HTML document called 'newpage.htm' (notice that this is a relative URL) and will then jump to a marker called 'middle'.
The TITLE attribute is a useful attribute of the anchor element. If the user pauses with the cursor over the link area, the value of the TITLE attribute appears as a tool tip to inform the user about where the link will take them. For example:
<A HREF="orderform.htm" TITLE= "Allows you to place your order online">Order form</A>
Remember that any part of your web page can be enclosed within an <A></A> container. If you contained a transparent GIF image, you could give your web page an impressive multimedia look. For example:
<A HREF="carsforsale.htm"><IMG SRC="car.grf"></A> Hopefully all this sounds quite simple, but the <A> tag encompasses the whole principle of the web. You now have enough knowledge to create a surfable website. There is one other advanced hyperlink feature, which I won't go into here but you might like to look up - image maps. These let you define areas of images as hotspots. So when the user clicks on the UK, for example on a world map, a hyperlink will take then to a UK-specific page.
Petula (level60 Gnome Warlock)
Ichabod (level60 Human Warrior)
Grommoo (level37 Tauren Shaman)
Bronwyn (level34 Dwarf Priest)
World of Warcraft - Aggramar Server
|
|
| |