[Sussex] html and stuff

Wed May 7 17:51:01 UTC 2003

On Wednesday 07 May 2003 5:10 pm, Paul Turner wrote:
> I'd recomend O'Reillys "Web design in a nutshell".  It's has a good level
> of content without too much waffle.

I second that!

Rest assured that any work you do on Linux will work on Windows - the HTML 
recommendation (a scemantic distinction from "standard" that only W3C members 
actually use) has a lot more to do with how UNIX (and thus Linux) works that 
how Windows works.  

Seriously, you best bet is to use an intuitive text editor (like KATE under 
KDE) that will color code your HTML files as you create them, and a sensible 
graphics editor like the GIMP.  Pick up the book Paul suggested and get a 
handle on it.  It may take you a couple of hours to get going, but it's worth 
it in the long run!

Here's an example just to get your juices flowing - your first web page can be 
a simple as this:

<html>
	<head>
		<title>My first web page</html>
	</head>
	<body>
		<h1>My first web page</h1>
		<hr />
		<p>This is my first web page. Do you like it?</p>
		<p>I plan to make it a lot better later!</p>
	</body>
</html>

Type that lot into a text editor (notepad if you're on windows) and then save 
it as first.htm and then double click on the file - your web browser should 
fire up with this page and you can see what it looks like.  Here's some 
explanation. 

The basic concept is simple, everything is held within tags that define the 
layour of the page.  The tags here mean:

<html>
Open a html envelope to put your page in, there is one envelope per page.  
Don't get too caught up in the phrase envelope, all it means is that all your 
other html tags come between the opening and closing html tags.

<head>
This opens the "head" section of your page.  This isn't actully part of the 
page that is displayed, but it contains information about the page.

<title> 
This signifies that the text that follows it is the title of the page.  Most 
web browsers display this text in their title bar when you load the page.  

</title>
Closes the title. Anything after this tag will no longer make up part of the 
title of the page.

</head>

<body>
Ok, this is where the fun starts.  The Body of the page is the part that is 
displayed.  Everything between <body> and </body> makes up what you would 
think of as the page.

<h1> 
Opens the text-style "Heading 1".  This is just like applying a style in MS 
Word or OpenOffice.org Writer.  Heading 1 is a big, bold font in most 
browsers.  Any text following <h1> will be displayed in the Heading 1 style.  
It's worth experimenting with <h1> through to <h5>.

</h1>
Turns off the text-style "Heading 1". 

<hr />
Horizontal Rule.  Just a straight line across the page.  Notice that this tag 
has a backslash in it - this closes the tag and is logically equivalent to 
writing <hr></hr>.  You only do this with tags that won't contain any text 
element.

<p>
P is for paragraph.  Text appearing between <p> and </p> will be displayed as 
a single block with a linefeed at the end, much the same as paragraphs appear 
anywhere.  

</body>
This closes the body of the document, 

</html> 
Close the html envelope and thus the entire page.  All tags have a matching 
closing tag (as you may have noticed) or end in a backslash to close 
themselves.

... hope that helps :)

-- 
GJT
Free Software Foundation
tealeg at member.fsf.org