<html>
<!--
The html element surrounds your entire .html file - it lets your web browser
know that everything within the html element is part of the information that
goes into the webpage.
-->
<!-- -->
<!--
You use these marks (less-than, exclamation point, hyphen, hyphen)
to open a comment. Comments are invisible when the page is
actually rendered in a web browser - you won't be able to see this text
when the page loads. You use the marks below (hyphen, hyphen,
greater-than) to close them.
For the record, I recommend spacing your code like this - it makes it
much easier to read and much less confusing if you're not used to
reading it. The spaces don't turn up in the finished website, but you do
need to make sure that you don't insert any extra spaces in elements
themselves - comment tags like this are the exception because their
code is not actually parsed by the web browser while it 'renders'
your page.
-->
<head>
<!--
The head element contains your website's basic properties, like the ID3
tags in an MP3 file. This information isn't part of the page's display
within the browser window, but it does have some external data -
like what is rendered in the 'title' bar of your window.
-->
<title>Gambaro's @ Emporium - Market Fresh Seafood Every Day</title>
<!--
The title element does just that - defines the text that will appear in the
title bar of your browser. If you open this file in Internet Explorer or
Firefox, you'll see this text right up the top. :)
Most elements must be opened and closed. <open> can be closed with
the </open> element - the slash tells the browser that this is the end of
the information associated with that particular element.
-->
</head>
<body link="#FFFFFF" alink="#FFFFFF" vlink="#FFFFFF" text="#3a383a" topmargin="100">
<!--
This is where it starts to get complicated. :) The base element here is
body - it's right at the front. The rest of the text in the element are the
properties that belong to that element.
Properties modify the behaviour of the base element in some way - so
you can probably tell that this element specifies something different
about the link, alink, vlink, text, and topmargin properties.
link, alink, and vlink all relate to the colour of the text in a link tag.
Colours in HTML can be represented either with base colours
(red, white, blue, etc.) or with hexadecimal code, which is what
that scary-looking #FFFFFF is about. If you open this page in a
browser, you can see from the top bar in the table that all the links
are white - or #FFFFFF. (You could safely replace each "#FFFFFF"
with "white" and it wouldn't do a thing to your website.)
If you can't tell what I'm talking about, try replacing "#FFFFFF" with
"red". ;)
As you can probably see from the other pages, the links aren't
always white everywhere. This is because we've specified other
color properties elsewhere! I'll point them out as you read through
the code.
Another thing to look out for is that all tags have US spelling. :( So
there are color properties instead of colour properties.
text defines the colour of any text in the body that is not a link or
otherwise specified - in this case, dark grey.
topmargin specifies the number of pixels that should go between
the top of the web browser and whatever comes next - basically
it inserts a hundred pixel high no-go zone at the top of the page,
which is why the blue bar doesn't sit right at the top of the page. :)
Try changing this value to 0, or 300, instead of 100 to see what I mean.
-->
<table height="600" width="100%" align="center" valign="middle" cellspacing="0" cellpadding="0" border="0">
<!--
And one more complex again - this is a table, just like the ones in
Excel that you probably do some spreadsheeting in. :)
The great thing about tables is that they do not always have to be
visible. This page will make a lot more sense, structurally, if you
change that border value up there to border="5" and refresh in
your browser - see all the boxes formed by the lines? Those are
the cells in THIS table. There are other tables within those cells
that help to make the rest of the page look pretty and aligned. :)
height is defined in pixels, in this case 600 of them. This is the
difference in pixels between the top of the top cell and the bottom
of the bottom cell.
width can also be defined in pixels, but in this case is 100% of
browser width.
align is the horizontal alignment of the table
valign is the vertical alignment of the table
cellspacing and cellpadding are basically buffers within each
cell that stop the content from starting at the very first pixel - this
can really make pages look cramped. This particular table
doesn't need buffers because it is usually invisible.
border, as you've seen, defines the border between cells. I'd
set this one back to "0" once you've read through the whole template.
-->
<tr height="50">
<!--
Tables are coded one row at a time, and tr defines the row.
height is in pixels, but can be a percentage
-->
<td width="15%"></td>
<!--
Helpfully, td defines a cell. I don't know what they were thinking, either.
This one is empty because it defines the blank space to the left of that
top blue bar.
width is a percentage, but can be in pixels.
-->
<td width="300" bgcolor="#034168" align="left">
<!--
This cell has a few more properties - a specific width, a background colour
and a specific alignment.
-->
<font face="Tahoma, Arial, Trebuchet MS, Verdana" size="2" color="#FFFFFF">
<!--
font element defines things about the font used on the website.
face is probably what you're used to thinking about as the font type - the
name of the font. But these in "double quotes" - as you can see, you can
put multiple options in the same set of double quotes as long as you
separate them with commas.
size goes from 1 to 5 - smallest, small, medium, large, and largest respectively
color you know ;)
-->
• <a href="http://www.gambaroatemporium.com.a
<!--
Some objects are defined universally - and • are two of these.
is recognised by web browsers as "blank space" - you can write
where you'd put two spaces in this text document, and they'll
actually show up as spaces in the browser.
• is a unicode element (which is why it needs the # and the number)
and represents the largish dot you will see separating each menu item.
The <a> element is most commonly used as <a href="url">text</a>.
This is a hyperlink that references "url" and displays "text" as a clickable
link in the web browser. So this one is going to show up as "HOME" on
the site itself, and it's going to look for the page located at:
http://www.gambaroatemporium.com.au/ind
Our home page!
-->
</font>
<!--
The closing tag for the font element. This means that anything after this
tag does NOT have the stuff in the font element applied to it. :)
-->
</td>
<!--
And the close tag for the second cell's element.
-->
<td width="*" valign="middle" align="right" bgcolor="#034168">
<!-- Another cell. * is a wildcard - in width, it means 'all remaining space'. -->
<font face="Tahoma, Arial, Trebuchet MS, Verdana" size="2" color="#FFFFFF">
• <a href="http://www.gambaroatemporium.com.a
</font>
<!--
If that doesn't confuse you, I don't know what will.
It looks like a mess, but it's the same thing over and over -
a dot, and a hyperlink. The last one has more blank spaces
following it because my table buffer wasn't thick enough to
make it look pretty. ;)
-->
</td>
<td width="15%"></td>
<!-- Another empty cell to take up the rest of the row. -->
</tr>
<!-- And the closing tag for the first row element. -->
<tr>
<!-- The second row. -->
<td width="15%"></td>
<!-- Empty cell. -->
<td width="300">
<img src="images/leftbanner298by600.jpg">
</td>
<!--
This cell is the one with the picture in it - leftbanner298by600.jpg.
The img element requires a src property that defines the location
of the image. In this case, the web browser is going to look for the
image "leftbanner298by600.jpg" in the "images" folder.
Because your web browser is going to look one directory below the
current page for the images, you need to make sure that the images
directory is called "images", and that it sits along side your .html files.
-->
<td width="*" valign="top">
<!-- This is a cell opening... -->
<!-- And the next tag is another table! This is called 'nesting' -
think of it like those Russian dolls. This table sits inside the
first one, like the small babushka sits inside a larger one. :)
This table is the panel of text you'll see in your rendered page. -->
<table height="*" width="*" align="left" valign="top" cellspacing="0" cellpadding="50">
<tr>
<td valign="top">
<p>
<!-- the <p> element marks a paragraph. You can do all sorts
of things with paragraphs, as you'll see from some of the
other pages. -->
<font face="Tahoma, Arial, Trebuchet MS, Verdana" size="2" color="#3a383a">
<!-- Another font definition, which specifies how the text in the paragraph will appear. -->
THIS IS WHERE YOUR CONTENT GOES! :)
</p>
</font>
</td>
</tr>
</table>
<!-- That is the end of the table that contains your content.
If you look at a few of the other pages, you'll be able to see
how I've modified this section to get things to change.
Short of learning more about HTML, I'd just copy the contents
of a page that you think looks more or less the same, and
replace the content. Now that you know what counts as code
and what doesn't, that should be fairly simple. -->
</td>
<!-- The closing tag of the cell containing the nested table. -->
<td width="15%"></td>
<!-- Empty cell -->
</tr>
<!-- The end of the second row. -->
<-- These tags are the final row of the table - two empty cells and the blue bar across the bottom. -->
<tr height="25">
<td width="15%"></td>
<td width="300" bgcolor="#034168"></td>
<td width="*" bgcolor="#034168" align="right">
<font face="Arial" size="1" color="#b0bdce">page design © laura bailey ; l4.bailey@gmail.com </font>
</td>
<td width="15%"></td>
</tr>
<-- The end of the final row. -->
</table>
<!-- The end of the table. -->
</body>
<!--
This is the closing tag for the body element. A little further, aaaand....
-->
<!--
The last tag! :) Well done.
For the record, when you're writing a page from scratch, it's usually
safer to open and close an element at the same time, and then go
back and fill in the contents of the tag later - it keeps things
structurally sound and prevents you from forgetting to close the
element later. ;)
-->
</html>
And if that pre element doesn't work in IJ/DW, I will be Angry.
[EDIT] OF COURSE THE FUCKING PRE TAGS DON'T WORK. JHDFJDH
[EDIT]
Um, yes, and aside from getting carried away with teaching a client's new website maintainer how to code (*facemash*) today was pretty awesome. Rage bought me XKCD t-shirts, which I am struggling not to wear until Monday. I am really damn tired. I didn't get to finish everything today because I discovered that I was being asked for things that I didn't have and have to ask Isaac about on Monday before the training course. Sigh. So much for a late start. Oh well. Still going pretty well. And rediscovering a love for this song that... okay, never really went away. But anyway.
x-posted from http://cheloya.dreamwidth.org/442559.ht
Current Music: Heather Nova // Virus of the Mind
c0mment