|
|
Posted by AGw. (Usenet) on 01/18/08 10:46
On Jan 17, 8:09 pm, dorayme <doraymeRidT...@optusnet.com.au> wrote the
following skeleton code:
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
> "http://www.w3.org/TR/html4/strict.dtd">
These two lines tell browsers that you're using version 4.01 Strict of
the HTML specification, which is what all new web pages should be
using (pace XHTML advocates).
> <html>
This tells the browser that the HTML code is now beginning.
> <head>
This tells the browser that what follows is the page header. All the
stuff that goes here is informational and (the "title" element aside)
is not displayed by the browser.
> <title>My sister</title>
This is the "title" element, and if you load your new skeleton page in
your browser it should be obvious what the browser does with this!
Note that if your page is bookmarked, this is what the browser will
use as the default name for the bookmark.
> <style type="text/css">
This is telling the browser that you're using CSS to set out how you
want your page to be displayed. All the CSS that you write will be
going where I'm writing this, unless you set up a separate CSS file
(which others here will no doubt explain how to do).
> </style>
And now you're telling the browser that you've stopped writing CSS,
and have gone back to writing HTML.
> </head>
And now you've told the browser that you've finished giving it header
information.
> <body>
Broadly speaking, this tag tells the browser that everything that
follows is marked-up content. Your content will therefore go where
I'm writing this.
> </body>
And now you've told the browser that you've finished giving it marked-
up content.
> </html>
And now you've told the browser that you've finished writing HTML.
Some further basic remarks:
HTML is used to mark out a document's logical structure; CSS is then
added to tell the browser how to display that document. In other
words, HTML tells the browser that (eg) "this is a paragraph", while
CSS tells it that "this paragraph is in Times New Roman, and is
blue". If you don't use CSS then browsers will use their own default
display settings, which (a) will look ugly to many people, (b) will
differ between different browser vendors, and (c) can even vary
between different versions (incl. platforms) of the same browser.
Basically, browser defaults are there as a safety net, and should
never be relied upon. Oh, and using CSS also allows you to do some
more fancy sorts of layout design that would otherwise be impossible.
An HTML document is broken down into "elements". Part of learning
HTML is to learn what elements can be nested inside other elements,
but the rules are generally pretty logical and easy to get the hang
of; to give an example, a "p" element is a paragraph, so only occurs
within the "body" element and not within the "head" element, because a
paragraph is content, and content only goes inside the body.
Elements are marked out using "tags". Some elements go in pairs, such
as the <body> and </body> tags used to mark out the beginning and end
of the body element. Others only have a single tag, such as the "img"
element. Again, you'll find it easy to learn which are which, even
though it's not always quite logical which elements get just one tag
and which ones get both an "opening tag" and a "closing tag".
Many elements also have "attributes", some of which are optional and
some of which are compulsory; for example, the "a" (for "anchor")
element is used to incorporate a link into your content, and naturally
enough requires that you use an attribute to state what the link's
destination URL is:
<p>This is just some text I'm using as a dummy paragraph. If you
include this paragraph in your skeleton code then you'll find that the
word "<a href="http://news.bbc.co.uk">link</a> is in fact a hyperlink
to the front page of the BBC News website. Note that I've done this
using the "href" attribute of the "a" element, that there is no space
on either side of the equals sign, and that the attribute's value is
enclosed in quote marks.</p>
Another very common element you'll be using is the "img" (for "image")
element, which is simply used to include an image in your content.
Here's an example:
<img src="http://www.example.invalid/photo.jpg" width="40" height="60"
alt="Text goes here for people who (for example) are using a non-
visual browser" title="If users hover their mouse pointer over your
photo and you want a tool-tip appearing with a description or other
text, then it goes here">
Obviously nothing will be displayed unless you've uploaded an image to
your web server and have corrected the URL to point to it.
Additional formatting information will be necessary to get the image
in the correct position, and to get the text shuffling around it how
you want.
Another thing your page content will probably need is one or more
headings, which can be placed in a hierarchy:
<h1>This is probably going to be the very first thing in your content,
and is roughly equivalent to the main headline on a newspaper's front
page</h1>
<p>You might then have some introductory text here.</p>
<h2>You might then have a sub-heading here; for example, about the
Republicans</h2>
<p>Then you might have some text that relates to that sub-heading; for
example, something talking about the Republican Party.</p>
<h3>You might even have a sub-sub-heading; for example, about a
particular Republican politician, or about a particular aspect of
Republican policy</h3>
<p>Naturally enough, your sub-sub-heading will have some text about
it, which will go here.</p>
<h2>You might then have another sub-heading here; for example, about
the Democrats</h2>
<p>And here goes the text that goes with the preceding sub-heading.</
p>
Note that in the above example, I've decided that a section of the
content about the Republicans is logically equivalent to a section
about the Democrats, so I've placed them at the same position on the
hierarchy; ie, I've given them both an "h2" heading element. Sub-
headings within those sections can then be given headings on the next
level down the hierarchy, which in my example is "h3". How you decide
to separate out your content is up to you, of course, although there
should really only be one "h1" heading, and generally speaking you
shouldn't really have gaps in the hierarchy (so you shouldn't jump
from "h2" to "h4", for example).
Finally, you can use comments in your code, like this:
<p>This is some content</p>
<!--This is a comment that won't be displayed in the browser-->
<p>This is some more content</p>
If you're already familiar with programming then you'll be familiar
with "commenting out", which is a handy thing to use when
experimenting with changes to your HTML.
Hope this has helped just a little bit more!
--
AGw.
[Back to original message]
|