HTML tips for a n00b

Dak · July 20, 2005

im learning how to wright html, and as an exersize im wrighting my first (offline) webpage.

its just gonna be a simple jobby explaining to my barely computer-literate family how to use the antimalware programs, what to do if they catch some malware and how to do a few piddly things like defrag the hard-drive etc.

the site itself, from a html pov, isnt going to have anything flashy in it: just a colection of text, a few links to other pages on the site and a frame up the top of every page with links to a few of the other pages, sum, umm, i forget what theyre called -- those things you link to by appending #blah on the end of the url -- basic stuff like that, no java etc, although i may chuck in a css stylesheet just for the practice.

anyway, i was wondering, does anyone have any tips? Iv looked into it on the web and i can find a whole lotta "this is how you do this" kinda stuff, but no "these are stoopid mistakes which n00bs always make" kinda stuff.

here is the last practice page i did, so you can see the (lowly) level which i have obtained.

<html>
<head>
<title>woo, i writ a webpage</title>
</head>
<!--yoooooooooooou caaaaaaaaaaan seeeee this bit -->

<body>
<body bgcolor="yellow">
ooh, look the background is yellow<br>
<p><font size=7>F'ing huge text</font></p>

la de dah, de dum de dum<br>
wurple durple<br>
<p>here are some bannannas,</p>
<img src="http://blogging.la/archives/banana-bunch_d.gif"><br>
<p>which, like the background, are <b><big>yello</big></b></p>

the end
</body>
</html>

now you know what you are working with , any tips would be appreciated.

btw, im using notepad to make the pages.

**Klaynos** · July 20, 2005

notepad good

if I where you I'd look for a html - css tutorial because css is GREAT!

For example you shouldn't use the tag anymore but use css to change font settings etc...

My one comment is that it is good practice to always include a doctype:

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

Is the one from this page, yours would be differnt from this as this is an XHTML one, if you google for html doctypes you'll probably be able to find some help on it

Dak · July 20, 2005

o ok will look into doctypes.

i heard about that 'shouldnt use ' thing, but then how do you change size within the body of the webpage?

ie, what html tag performs the function of the vb tag?

hmm... would it be possible to whack the same frame at the top of each page using a css?

i can look into how to use css myself, but im gonna do that when i get to it, whichll be the last thing i do -- i dont want to get to that point and then find i have to go back and add the frame to every page.

notepad good

I miss editpad lite... all the simplistic fun of notepad, with tabs its on my other computer, and i havent gotten round to d/lg it to this pc yet.

Icheb · July 20, 2005

im learning how to wright html' date=' and as an exersize im wrighting my first (offline) webpage.

its just gonna be a simple jobby explaining to my barely computer-literate family how to use the antimalware programs, what to do if they catch some malware and how to do a few piddly things like defrag the hard-drive etc.

the site itself, from a html pov, isnt going to have anything flashy in it: just a colection of text, a few links to other pages on the site and a frame up the top of every page with links to a few of the other pages, sum, umm, i forget what theyre called -- those things you link to by appending #blah on the end of the url -- basic stuff like that, no java etc, although i may chuck in a css stylesheet just for the practice.

anyway, i was wondering, does anyone have any tips? Iv looked into it on the web and i can find a whole lotta "this is how you do this" kinda stuff, but no "these are stoopid mistakes which n00bs always make" kinda stuff.[/quote']

- Don't use frames.

- Always enclose attributes with ", for example size="7".

- Don't use frames.

- Java != Javascript

And don't learn CSS if you just started with HTML. Get your head around HTML first and then you can still catch on with CSS, otherwise it would makes things unnecessarily complicated to understand. Doctypes are also not important for beginners.

Dak · July 20, 2005

i think ill leave java for now. thatll come later.

why not frames?

so, am i right in thinking that the bit at the top of each SFN page (home|forum index|user cp etc) is a table, not a frame yeah?

Icheb · July 20, 2005

That's a table, yes.

Oh, and it's "write", not "wright" .

**Klaynos** · July 20, 2005

o ok will look into doctypes.

i heard about that 'shouldnt use ' thing' date=' but then how [i']do[/i] you change size within the body of the webpage?

ie, what html tag performs the function of the vb tag?

hmm... would it be possible to whack the same frame at the top of each page using a css?

i can look into how to use css myself, but im gonna do that when i get to it, whichll be the last thing i do -- i dont want to get to that point and then find i have to go back and add the frame to every page.

I miss editpad lite... all the simplistic fun of notepad, with tabs its on my other computer, and i havent gotten round to d/lg it to this pc yet.

http://www.scintilla.org/SciTE.html scite, an AMAZING text editor, if you look around their site you can find out how to turn on tabed browsing (not done by default which is rather annoying)

tabbar.visible
tabbar.hide.one Setting tabbar.visible to 1 makes the tab bar visible at start up on Windows. The buffers property must be set to a value greater than 1 for this option to work. Setting tabbar.hide.one to 1 hides the tab bar until there is more than one tab. Works on Windows and GTK+ 2.x but not GTK+ 1.x.

from their online documentation

My points where ment to be best to start how you mean to go on :s but I fully accept Icheb's points.

ed84c · July 20, 2005

Use dreamweaver, or ACE HTML (the latter is free download)

DO NOT use notepad, mainly because it wont change colour when youve typed in a correct code and hence is a lot more difficult to find the errors.

Learn a little CSS code, not much.

Cap'n Refsmmat · July 20, 2005

Run over to http://validator.w3.org, upload your HTML, and see what it tells you. Mostly it's "Don't use , use CSS!!!" but there are a few important things it can fix for you.

Dak · August 17, 2005

Cheers cap'n; i was just looking for the validator, and i could only find the validate-online pages one.

Okeydokums, a question:

I wanted to to use the <abbr> tag to put some extra info about a term in, but the extra info was too long.

It basically read something like

blah blah blah <abbr title="Most Recently Used: For example, 'documents' in the start menu. Not actually anything to do with spyware/adware, but some people dont like them, so Ad-Aware finds and removes them. So dont worry if Ad-Aware finds some MRUs">MRUs</abbr> blah blah blah

what is shown on mouse-over, is

Most Recently Used: For example, 'documents' in the st...

Is there any tag that i could use that will show long bits of text on mouse-over?

Nevermore · August 17, 2005

Rember to use <TD> For a new line

Dak · August 17, 2005

What, in the midst of the abbr title?

Anyhoo, is a new line. <td>, for undisclosed reasons, is the begining of a table cell (i keep calling it <tc>).

Phospholipid · August 17, 2005

Here's a tag that no one ever desiced to learn:

<hr noshade> It creates a line but without the shading.

Dak · August 17, 2005

Just checked a few pages at the validator.

Oh dear.

well, it looks ok... guess i better fix a few of the errors tho.

**Klaynos** · August 17, 2005

Here's a tag that no one ever desiced to learn:

<hr noshade> It creates a line but without the shading.

You mena <hr noshade="noshade" /> don't you

</nitpicking>

Dak if I where you I would get used to the basics then worry about validation.

I'd also recomend trying to learn xhtml, as the last version of html has already been released it's the way forward, and imo it's genrally easier to learn these things before getting used to one of them... But html will still be around for a long time...

Dak · August 17, 2005

Im gonna buff-up my knowledge of HTML, and practice making a few webpages with different layouts, to try and get the hang of it.

What would you reccomend doing after that: learning CSS or learning XHTML?

I was thinking CSS.

**Klaynos** · August 17, 2005

css, in xhtml lots more things are done through css instead of html tags it's so much easier to have an understanding of css first.

Dak · August 18, 2005

So why shouldnt i use frames again?

I was thinking of this for the navigation bar that will be at the top of each page:

<HTML>
<head>
<title>ZoneAlarm</title>
</head>

<body bgcolor="#FAEBD7">

<!-- top bit! -->

<iframe src="navipannel.htm" width="100%" frameborder="0"> </iframe>

<!-- /top bit --><br><br><BR>


<font size=7>ZoneAlarm</font><br>
By Zone Labs<br>

blah blah blah etc

certainly seems easyer to maintain and change than whaching in the HTML for the navigation bar on every single page.

At the moment its this:

<HTML>
<head>
<title>ZoneAlarm</title>
</head>

<body bgcolor="#FAEBD7">

<!-- top bit! -->

<p align="right"><a href="sitemap.htm">sitemap</a>|<a href="help.htm">help</a></p>
<font size="1">Navipanel: hover curser over a link to get a more detailed description</font>
<table bgcolor="aqua" border="1" rules="none">
 <tr>
   <td><a href="home.htm"><abbr title="main navigation page">home</abbr></a>|<a href="suspect malware.htm"><abbr title="I think the computers infected with malware!">HELP!</abbr></a>|<a href="malware.htm"><abbr title="what is malware?">malware</abbr></a>|<a href="dont panic.htm"><abbr title="one of the anti-malware programs has done something!">HELP!</accr></a>|<a href="mothly tasks.htm"><abbr title="what to do monthly to maintain your PC">monthly tasks</abbr></a>|<a href="installed programs.htm"><abbr title="Your installed anti-malware programs">installed programs</abbr></a>|<a href="links.htm"><abbr title="links">links</a></abbr></td>
 </tr>
</table>

<!-- /top bit --><br><br><BR>


<font size=7>ZoneAlarm</font><br>
By Zone Labs<br>

blah blah blah etc

Which means that to change it, id have to edit every single page :eek:

**Klaynos** · August 18, 2005

that is what server side includes are for...

http://www.google.co.uk/search?q=why+not+to+use+frames+html&sourceid=mozilla-search&start=0&start=0&ie=utf-8&oe=utf-8&client=firefox&rls=org.mozilla:en-GB:unofficial

Dak · August 18, 2005

Heh, should use google more. I guess i see why frames are bad.

From the looks of it, SSI isnt something that i could do with my offline webpage, tho.

**Klaynos** · August 18, 2005

not unless you've got some webserver software installed :s I used it for a time, most of my pages now have some form of dynamic content so I do it all with php :s

Sayonara · August 18, 2005

I wanted to to use the <abbr> tag to put some extra info about a term in' date=' but the extra info was too long.
It basically read something like

blah blah blah <abbr title="Most Recently Used: For example, 'documents' in the start menu. Not actually anything to do with spyware/adware, but some people dont like them, so Ad-Aware finds and removes them. So dont worry if Ad-Aware finds some MRUs">MRUs</abbr> blah blah blah

Is there any tag that i could use that will show long bits of text on mouse-over?[/quote']

You should only use the abbreviation tag for expanding an abbreviation.

If you want to provide definitions, use a definition list.

This takes the form:

<dl> 

<dt>Name of thing to define 1</dt>

<dd>The definition of the thing 1</dd>

<dt>Name of thing to define 2</dt>

<dd>The definition of the thing 2</dd>

<dt>Name of thing to define 3</dt>

<dd>The definition of the thing 3</dd>

</dl>

the tree · August 18, 2005

This takes the form:
<dl>

<dt>Name of thing to define 1</dt>

<dd>The definition of the thing 1</dd>

</dl>

It's worth noting that definition lists allow for more than one definition per term.

<dl>
<dt>Left</dt>
 <dd>Past tense and past participle of leave</dd>
 <dd>Of, relating to, directed toward, or located on the left side.</dd>
 <dd>Of or belonging to the political or intellectual left.</dd>
<dt>Right</dt>
 <dd>In accordance with fact, reason, or truth; correct</dd>
 <dd>Of, relating to, directed toward, or located on the right side.</dd>
 <dd>Of or belonging to the political or intellectual right.</dd>
</dl>

Dak · August 18, 2005

cheers, but I wanted a definition/expansion that popped-up on mouse-over, and was otherwise hidden.

I'll have a look around the w3school tutorials tomorrow. iv got a feeling it might be possible with the mouseover attribute thingy.

Sayonara · August 18, 2005

You could define a CSS class for a <dl /> that (a) makes it appear as a box with "normal" HTML content, but also (b) makes it invisible. Then use some javascript to reveal it on mouseover. That's how these things are normally done.

You get a customisable pop-over effect that is easily updated, and your code remains beautifully clean.

Sign In

HTML tips for a n00b

Recommended Posts

Dak

Klaynos

Dak

Icheb

Dak

Icheb

Klaynos

ed84c

Cap'n Refsmmat

Dak

Nevermore

Dak

Phospholipid

Dak

Klaynos

Dak

Klaynos

Dak

Klaynos

Dak

Klaynos

Sayonara

the tree

Dak

Sayonara

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity

Important Information