Introductory HTML, part 1

Jonny English · 19-October-03, 03:44 AM

Welcome to part 1 of 5 of my cunning plan to get Sundays off

If you've seen this before ... tough

Introduction

I've written this series of tutorials with the complete beginner in mind, so obviously it's not going to go that deep, but at the end of it you should have the concepts to produce something that is not too embarrassing.

I'm not going to cover using web page creation tools like FrontPage, or HTML editing tools like CuteHTML as not everyone will have those, instead I'll be doing it all in Notepad - which is about as basic a text editor as you can get. I'm not going to cover exotica like Java, CGI and whathaveyou either.

If you want to play along at home, you'll need a PC (obviously) with a web browser installed. I'll assume that you're using MS Internet Explorer, but if you are using Netscape or anything else, the process will be almost identical.

Remember, I'm pretty much self-taught in using HTML - if I can manage it, then so can you.

Tags

HTML is based on tags - if you've been using computers for 15 years or more, you'll remember that in the days before WYSIWYG, word processor software used tags to indicate text formatting, like {BOLD=ON} inserted before text you wanted to be printed in bold, and {BOLD=OFF} at the end of the text to be formatted.

HTML tags are very similar - for most (but not all) operations, there will be both an opening and a closing tag. It's extremely important to remember to include the closing tag, as omitting these will cause at best a lot of frustration, and at worst screw up the rest of your page.

For example, <B>Text</B> will make the text between the <B> and </B> appear in bold.

Tags can also be nested (i.e. one set of tags within another), for example <B><I>Text</I></B> will make the text appear both bold and italic.

Proper nesting is important for correct operation - <B><I>Text</I></B> is correct, <B><I>Text</B></I> is NOT.

Basic Page Creation & Layout

Well, enough theory - let's get started.

Open up Windows Explorer & create a new folder (i.e. right click in a folder where you want to keep this project & select 'New' - 'Folder'. Give the folder and appropriate name like 'Jon is an HTML God' ... ahem ... 'HTML Tutorial'.

Open that folder, and create a new text document (right click & select 'New' - 'Text document'). Name it 'index.htm' - you will probably be prompted to confirm that you want to change the file extension - don't worry, just do it.

Double click on the file, and all being well, your browser will open & display the page. At this point it will be completely blank.
(The reason for naming the file 'index.htm' is that is one of the default page names browsers look for when accessing a site. You can use any name you like for the file, but this does mean there's more for people to type in (& get wrong) when accessing your site, once it's published. Compare "www.ivegota.com" and "www.ivegota.com/lovelybunchofcoconuts.htm" for example).

To start editing your page, either select 'Source' from the 'View' menu in your browser, or right click & select 'View Source'. This should open a crude looking application - welcome to the joys of Notepad !

You'll see that the file is completely empty, so let's start putting something in there.

Whack in the following:

<HTML>

<HEAD>
<TITLE>My Web Page</TITLE>
</HEAD>

<BODY>
<H2>My Web Page</H2>
W00T!
</BODY>

</HTML>

A quick explanation of what all this does is probably in order at this point:

<HTML> and </HTML> tags confirm to your browser that, yes, this is an HTML document;
The <TITLE> and </TITLE> tags allow you to put a page name in the title bar of the browser (these tags must be contained within the heading section of the document, i.e. between <HEAD> and </HEAD>;
<BODY> and </BODY> indicate the main section of the document - this is where the bulk of your HTML code with be going;
<H2> and </H2> indicate that the browser should display the tagged text in the second size level of the built in heading function; and
W00T! is self explanatory...
Save the HTML (select 'Save' from the 'File' menu), then go back to your browser.

Click the 'Refresh' button, or press F5 so see the results of your efforts ... perhaps 'LAME!" would have been better than 'W00T!' Don't worry we'll be making it look pretty RSN.

White Space/Layout

At this point it's worth saying something about the proper layout of HTML text files, principally the amount of white space you use around your tags. Consider these two examples of a table containing hyperlinked pictures (we'll come on to tables, pictures & hyperlinks later):

<TABLE WIDTH=100%>
<TR>
<TD ALIGN=CENTER>
<A HREF="Gre1.gif"><IMG SRC="Gre1_thumb.gif"></A>
<A HREF="Gre2.gif"><IMG SRC="Gre2_thumb.gif"></A>
<A HREF="Gre3.gif"><IMG SRC="Gre3_thumb.gif"></A>
</TD>
</TR>
<TR>
<TD ALIGN=CENTER>
<A HREF="Yel1.gif"><IMG SRC="Yel1_thumb.gif"></A>
<A HREF="Yel2.gif"><IMG SRC="Yel2_thumb.gif"></A>
<A HREF="Yel3.gif"><IMG SRC="Yel3_thumb.gif"></A>
</TD>
</TR>
</TABLE>

<TABLE WIDTH=100%><TR><TD ALIGN=CENTER><A HREF="Gre1.gif"><IMG SRC="Gre1_thumb.gif"></A><A HREF="Gre2.gif"><IMG SRC="Gre2_thumb.gif"></A><A HREF="Gre3.gif"><IMG SRC="Gre3_thumb.gif"></A></TD> </TR><TR><TD ALIGN=CENTER><A HREF="Yel1.gif"><IMG SRC="Yel1_thumb.gif""></A><A HREF="Yel2.gif"><IMG SRC="Yel2_thumb.gif""></A><A HREF="Yel3.gif"><IMG SRC="Yel3_thumb.gif""></A></TD></TR></TABLE>

Both will have exactly the same effect, but which is easier to understand, bugfix & maintain? You should be saying "the first one !" btw. If you want to make yourself indispensable by writing intractable code, then go for it - but don't do it while you're learning unless you want to make it much harder on yourself.

Time to pretty it all up a bit...

Backgrounds

A background is an easy way to make your pages look a bit more interesting. To add a plain background colour, add the BGCOLOR attribute to the opening BODY tag, e.g.
<BODY BGCOLOR=color>
Where "color" can be:
A Hex value, e.g. #000000 (White), #FFFFFF (black), #FF0000 (red), #FF8000 (orange), #FFFF00 (yellow), #808000 (darker yellow), #00FF00 (green), #008000 (darker green), #0000FF (blue), or any shade - experiment !; or
A named color, like RED, BLUE, WHITE, BLACK, for example.
So, to have a plain blue background, your BODY tag needs to be:
<BODY BGCOLOR=BLUE>
or
<BODY BGCOLOR=#0000FF>.

As a flat colour can be a bit dull, consider using a background image instead.
The image you choose should be fairly conservative, and not distract from the text & images you are going to put over it. It should be broadly the same colour all over (again to avoid obscuring your text), small (in terms of filesize) to aid loading speed, and preferably capable of being tiled without leaving ugly joins.

To add an image as the background, you need to add the BACKGROUND attribute to the opening BODY tag, e.g.
<BODY BACKGROUND="filename">
where "filename" is the name of the image file (complete with extension, e.g. .JPG, .GIF, and so on), and the path if it's not in the same directory as the index.htm file. To use the attached background file (bg.gif), the BODY tag should be:
<BODY BACKGROUND="images/bg.gif">
if your image file is stored in a subdirectory called images, or
<BODY BACKGROUND="bg.gif">
if the image file is in the same directory as the index.htm file. This is the option I'm going for in the tutorial, so amend your opening BODY tag to this, and save the HTML file.

Download the attached bg.gif file into the same directory as your index.htm file, then go back to the browser window with your page in it & refresh.
OK, so it's not that much better, but you get the idea. Find something more exotic if you want.

It is also possible to add background sounds to your pages, but personally I HATE sounds on websites !!!
If you really have to do it, add a BGSOUND attribute to the opening BODY tag, e.g.
<BODY BGSOUND SRC="filename" LOOP=n>
where "filename" is the name, extension (and path, if required) of the sound file (e.g. a .WAV file), and "n" is the number of times you want it to play.

Text Fonts & Colours

To change the font text is displayed in, use the <FONT> tag with the FACE attribute. For example, if you want to display all of the text on the page so far in the Arial face (a good standard choice, and better than the default IMO), the BODY section of your HTML should be amended to:

<BODY>
<FONT FACE=ARIAL>
<H2>My Web Page</H2>
W00T!
</FONT>
</BODY>

Note the </FONT> tag, and its position.

The FONT tag also allows you to change the colour of the text, via its' COLOR attribute. For example, <FONT COLOR=GREEN> changes the text color to green. The COLOR attribute can be combined with the previous FONT tag, e.g.:
<FONT FACE=ARIAL COLOR=GREEN>

Do this now, and save your HTML text file, and then refresh your browser. Looks pretty ugly, doesn't it ? This shows how colour selection is extremely important in webpage design. Remove the COLOR=GREEN attribute from the HTML text file if, like me, you can't stand it.

Another thing the FONT tag can do is to alter the size of the text, via the SIZE attribute. If you're playing along at home, change the <FONT FACE=ARIAL> tag to <FONT FACE=ARIAL SIZE=2>. Save & refresh & note the effect on the "W00T!" text. Note also the way it has no effect on the "My Web Page" text.
SIZE values can be any integer (whole number) from 1 to 5.

Text Alignment

If you look at your page so far, I'm sure you'll agree that it looks unbalanced with the text off to the left hand side (which is the default).
To move it to the right, use the <ALIGN=RIGHT> tag, with it's corresponding closing tag </ALIGN>.

Moving it to the centre is slightly different: you need to use the <CENTER> tag, which has the </CENTER> closing tag.
This is the option I'm going for in the tutorial, so amend your text file to insert the tags nested within the existing FONT tags, e.g.:
<FONT FACE=ARIAL SIZE=2>
<CENTER>
<H2>My Web Page</H2>
W00T!
</CENTER>
</FONT>

Headings

I've already touched on this above: HTML allows you to use a number of preset heading styles, theoretically saving you time by not having to faff about with <FONT SIZE=n> tags.

The heading styles are:
<H1>heading text</H1> (the largest), down to
<H5>heading text</H5> (the smallest).

Rulers

The final step for today is to insert a ruler into the page, which provides a useful way of dividing the page up into logical sections.

The tag to do this takes the form:
<HR SIZE=2 COLOR=#000000 WIDTH=100%>

Insert this under the <H2> tags, then save & refresh.

If you've been paying attention, you'll know what the SIZE and COLOR attributes are doing; the WIDTH attribute is self explanatory, and the percentage should be too. Try experimenting with it, and also what happens when you omit the % symbol.

Note that this is an example of a tag that doesn't have a corresponding closing tag.
Another is the <P> (new paragraph) tag. Insert one of these in front of the W00T! to improve the spacing.

Other Text Formatting Styles

Other text styles you may find useful are listed below, this is only a small number of the total available:

<B>text</B> Bold face
<I>text</I> Italics
<U>text</U> Underlined
<SUP>text</SUP> Superscript
<SUB>text</SUB> Subscript

Your homework is to experiment with these, and find some more !

Summary

OK, so your "site" doesn't look much yet, but I've spent long enough on this installment already !
We haven't really done a lot here today, but like I said at the beginning, I am aiming this at beginners.

In case you've got really confused, I've attached the HTML file as it should look so far.

In part two, I'll be covering lists & tables.

Supporting Files (right click & select 'Save As'):
bg.gif
index.htm

Edit: whoops, fouled the path up ... ok now

drwho · 19-October-03, 04:28 AM

ehh, old style jon!
I haven't seen someone use a header tags ( <H2> some text </H2> ) in like 3 years...
anyway what i wanted to say was.... font size isn't limited to any integer (whole number) from 1 to 5.

proof:

<font size="14"> some text </font> which would result in your text being this size

OMFG_dude_WTF · 19-October-03, 08:35 AM

Good post Jonny.

Very basic html tutorial, not to mention old school like drwho said, but yet very effective when layed out with with some nice graphics.

I am not trying to take over your post dude, just thought I'd help out a little, since I am the "Pro HTML Hoe" of Pimprig at the moment.

Here is just a little help on an outdated tag. This one is more up to date for aligning sections of your pages.

The <CENTER> tag has far been depreciated and although it still works great, it has an extreme limiting properties and most WAP devices browsers I have used do not support this tag anymore.

By using the <DIV> tag you can get the same results with more options and the ability to control it with dynamic html, JS or other languages if you choose to. <DIV ALIGN="center"> will give you the same result as the <CENTER> tag.

The <DIV> tells the browser to treat whatever is between the tags to act like a layer. The "align" attribute just tells it how-where to line up. There are a few more attributes to use in it, but this is just a basic "hint" to you guys that there is a better way to align sections.

I used to use the <CENTER> a lot on my pages, but then found out the headache of having to redo each tag to a <DIV> when I wanted a more a precise alignment.
It also helps on having to change the alignment later on, by changing the attributes in the <DIV> tag.

If you want to center whatever is bettween the tags you type:
<DIV ALIGN="center">Your text, images, or whatever you want here.</DIV>
If you want to align everything to the right on whatever is bettween the tags you type:
<DIV ALIGN="right">Your text, images, or whatever you want here.</DIV>
Change it to left if needed but it is rarely used since browser defaults always align to the left if no tag is specified.

I have never used a WYSIWYG editor of any kind and never will unless it can read my exact thoughts LOL.. I have always used Notepad, and nothing else. I just get more satisfaction out of doing it the real way, not to mention a more precise layout for when I need to edit the page I want. And if you write the whole page you know where everything is at already if editing is needed. Searching for a string really sucks.

My sig is pure HTML and graphics only, and all the files needed to make the intial load is only around 50k. As you browse the links you will then download again. This type of sig is significantly smaller than using FLASH, which requires that you download the entire file when you load the forum page.

Hope this helps some of you.

Lord Dragon · 19-October-03, 11:26 AM

Jonny, i can't download your files.

Jonny English · 19-October-03, 12:57 PM

Quote:


	Originally posted by Lord Dragon Jonny, i can't download your files.

Oops ... let's try again:

bg.gif

index.htm

Thanks for the heads up LD

... don't expect too much though!

Lord Dragon · 19-October-03, 09:33 PM

I realize they are not that important but you went to the effort to post them.

I look foward to seeing the rest of the tutorial, maybe I'll get off my a$$ and finally do something with http://lorddragon.net/, any suggestions would be helpful. I was thinking of a links page, a picture page and software download (freeware, of course).

19-October-03, 03:44 AM		#1 (permalink)
Jonny English Etiquette & English Gentleman	Introductory HTML, part 1 Welcome to part 1 of 5 of my cunning plan to get Sundays off If you've seen this before ... tough Introduction I've written this series of tutorials with the complete beginner in mind, so obviously it's not going to go that deep, but at the end of it you should have the concepts to produce something that is not too embarrassing. I'm not going to cover using web page creation tools like FrontPage, or HTML editing tools like CuteHTML as not everyone will have those, instead I'll be doing it all in Notepad - which is about as basic a text editor as you can get. I'm not going to cover exotica like Java, CGI and whathaveyou either. If you want to play along at home, you'll need a PC (obviously) with a web browser installed. I'll assume that you're using MS Internet Explorer, but if you are using Netscape or anything else, the process will be almost identical. Remember, I'm pretty much self-taught in using HTML - if I can manage it, then so can you. Tags HTML is based on tags - if you've been using computers for 15 years or more, you'll remember that in the days before WYSIWYG, word processor software used tags to indicate text formatting, like {BOLD=ON} inserted before text you wanted to be printed in bold, and {BOLD=OFF} at the end of the text to be formatted. HTML tags are very similar - for most (but not all) operations, there will be both an opening and a closing tag. It's extremely important to remember to include the closing tag, as omitting these will cause at best a lot of frustration, and at worst screw up the rest of your page. For example, <B>Text</B> will make the text between the <B> and </B> appear in bold. Tags can also be nested (i.e. one set of tags within another), for example <B><I>Text</I></B> will make the text appear both bold and italic. Proper nesting is important for correct operation - <B><I>Text</I></B> is correct, <B><I>Text</B></I> is NOT. Basic Page Creation & Layout Well, enough theory - let's get started. Open up Windows Explorer & create a new folder (i.e. right click in a folder where you want to keep this project & select 'New' - 'Folder'. Give the folder and appropriate name like 'Jon is an HTML God' ... ahem ... 'HTML Tutorial'. Open that folder, and create a new text document (right click & select 'New' - 'Text document'). Name it 'index.htm' - you will probably be prompted to confirm that you want to change the file extension - don't worry, just do it. Double click on the file, and all being well, your browser will open & display the page. At this point it will be completely blank. (The reason for naming the file 'index.htm' is that is one of the default page names browsers look for when accessing a site. You can use any name you like for the file, but this does mean there's more for people to type in (& get wrong) when accessing your site, once it's published. Compare "www.ivegota.com" and "www.ivegota.com/lovelybunchofcoconuts.htm" for example). To start editing your page, either select 'Source' from the 'View' menu in your browser, or right click & select 'View Source'. This should open a crude looking application - welcome to the joys of Notepad ! You'll see that the file is completely empty, so let's start putting something in there. Whack in the following: <HTML> <HEAD> <TITLE>My Web Page</TITLE> </HEAD> <BODY> <H2>My Web Page</H2> W00T! </BODY> </HTML> A quick explanation of what all this does is probably in order at this point: <HTML> and </HTML> tags confirm to your browser that, yes, this is an HTML document; The <TITLE> and </TITLE> tags allow you to put a page name in the title bar of the browser (these tags must be contained within the heading section of the document, i.e. between <HEAD> and </HEAD>; <BODY> and </BODY> indicate the main section of the document - this is where the bulk of your HTML code with be going; <H2> and </H2> indicate that the browser should display the tagged text in the second size level of the built in heading function; and W00T! is self explanatory... Save the HTML (select 'Save' from the 'File' menu), then go back to your browser. Click the 'Refresh' button, or press F5 so see the results of your efforts ... perhaps 'LAME!" would have been better than 'W00T!' Don't worry we'll be making it look pretty RSN. White Space/Layout At this point it's worth saying something about the proper layout of HTML text files, principally the amount of white space you use around your tags. Consider these two examples of a table containing hyperlinked pictures (we'll come on to tables, pictures & hyperlinks later): <TABLE WIDTH=100%> <TR> <TD ALIGN=CENTER> <A HREF="Gre1.gif"><IMG SRC="Gre1_thumb.gif"></A> <A HREF="Gre2.gif"><IMG SRC="Gre2_thumb.gif"></A> <A HREF="Gre3.gif"><IMG SRC="Gre3_thumb.gif"></A> </TD> </TR> <TR> <TD ALIGN=CENTER> <A HREF="Yel1.gif"><IMG SRC="Yel1_thumb.gif"></A> <A HREF="Yel2.gif"><IMG SRC="Yel2_thumb.gif"></A> <A HREF="Yel3.gif"><IMG SRC="Yel3_thumb.gif"></A> </TD> </TR> </TABLE> <TABLE WIDTH=100%><TR><TD ALIGN=CENTER><A HREF="Gre1.gif"><IMG SRC="Gre1_thumb.gif"></A><A HREF="Gre2.gif"><IMG SRC="Gre2_thumb.gif"></A><A HREF="Gre3.gif"><IMG SRC="Gre3_thumb.gif"></A></TD> </TR><TR><TD ALIGN=CENTER><A HREF="Yel1.gif"><IMG SRC="Yel1_thumb.gif""></A><A HREF="Yel2.gif"><IMG SRC="Yel2_thumb.gif""></A><A HREF="Yel3.gif"><IMG SRC="Yel3_thumb.gif""></A></TD></TR></TABLE> Both will have exactly the same effect, but which is easier to understand, bugfix & maintain? You should be saying "the first one !" btw. If you want to make yourself indispensable by writing intractable code, then go for it - but don't do it while you're learning unless you want to make it much harder on yourself. Time to pretty it all up a bit... Backgrounds A background is an easy way to make your pages look a bit more interesting. To add a plain background colour, add the BGCOLOR attribute to the opening BODY tag, e.g. <BODY BGCOLOR=color> Where "color" can be: A Hex value, e.g. #000000 (White), #FFFFFF (black), #FF0000 (red), #FF8000 (orange), #FFFF00 (yellow), #808000 (darker yellow), #00FF00 (green), #008000 (darker green), #0000FF (blue), or any shade - experiment !; or A named color, like RED, BLUE, WHITE, BLACK, for example. So, to have a plain blue background, your BODY tag needs to be: <BODY BGCOLOR=BLUE> or <BODY BGCOLOR=#0000FF>. As a flat colour can be a bit dull, consider using a background image instead. The image you choose should be fairly conservative, and not distract from the text & images you are going to put over it. It should be broadly the same colour all over (again to avoid obscuring your text), small (in terms of filesize) to aid loading speed, and preferably capable of being tiled without leaving ugly joins. To add an image as the background, you need to add the BACKGROUND attribute to the opening BODY tag, e.g. <BODY BACKGROUND="filename"> where "filename" is the name of the image file (complete with extension, e.g. .JPG, .GIF, and so on), and the path if it's not in the same directory as the index.htm file. To use the attached background file (bg.gif), the BODY tag should be: <BODY BACKGROUND="images/bg.gif"> if your image file is stored in a subdirectory called images, or <BODY BACKGROUND="bg.gif"> if the image file is in the same directory as the index.htm file. This is the option I'm going for in the tutorial, so amend your opening BODY tag to this, and save the HTML file. Download the attached bg.gif file into the same directory as your index.htm file, then go back to the browser window with your page in it & refresh. OK, so it's not that much better, but you get the idea. Find something more exotic if you want. It is also possible to add background sounds to your pages, but personally I HATE sounds on websites !!! If you really have to do it, add a BGSOUND attribute to the opening BODY tag, e.g. <BODY BGSOUND SRC="filename" LOOP=n> where "filename" is the name, extension (and path, if required) of the sound file (e.g. a .WAV file), and "n" is the number of times you want it to play. Text Fonts & Colours To change the font text is displayed in, use the <FONT> tag with the FACE attribute. For example, if you want to display all of the text on the page so far in the Arial face (a good standard choice, and better than the default IMO), the BODY section of your HTML should be amended to: <BODY> <FONT FACE=ARIAL> <H2>My Web Page</H2> W00T! </FONT> </BODY> Note the </FONT> tag, and its position. The FONT tag also allows you to change the colour of the text, via its' COLOR attribute. For example, <FONT COLOR=GREEN> changes the text color to green. The COLOR attribute can be combined with the previous FONT tag, e.g.: <FONT FACE=ARIAL COLOR=GREEN> Do this now, and save your HTML text file, and then refresh your browser. Looks pretty ugly, doesn't it ? This shows how colour selection is extremely important in webpage design. Remove the COLOR=GREEN attribute from the HTML text file if, like me, you can't stand it. Another thing the FONT tag can do is to alter the size of the text, via the SIZE attribute. If you're playing along at home, change the <FONT FACE=ARIAL> tag to <FONT FACE=ARIAL SIZE=2>. Save & refresh & note the effect on the "W00T!" text. Note also the way it has no effect on the "My Web Page" text. SIZE values can be any integer (whole number) from 1 to 5. Text Alignment If you look at your page so far, I'm sure you'll agree that it looks unbalanced with the text off to the left hand side (which is the default). To move it to the right, use the <ALIGN=RIGHT> tag, with it's corresponding closing tag </ALIGN>. Moving it to the centre is slightly different: you need to use the <CENTER> tag, which has the </CENTER> closing tag. This is the option I'm going for in the tutorial, so amend your text file to insert the tags nested within the existing FONT tags, e.g.: <FONT FACE=ARIAL SIZE=2> <CENTER> <H2>My Web Page</H2> W00T! </CENTER> </FONT> Headings I've already touched on this above: HTML allows you to use a number of preset heading styles, theoretically saving you time by not having to faff about with <FONT SIZE=n> tags. The heading styles are: <H1>heading text</H1> (the largest), down to <H5>heading text</H5> (the smallest). Rulers The final step for today is to insert a ruler into the page, which provides a useful way of dividing the page up into logical sections. The tag to do this takes the form: <HR SIZE=2 COLOR=#000000 WIDTH=100%> Insert this under the <H2> tags, then save & refresh. If you've been paying attention, you'll know what the SIZE and COLOR attributes are doing; the WIDTH attribute is self explanatory, and the percentage should be too. Try experimenting with it, and also what happens when you omit the % symbol. Note that this is an example of a tag that doesn't have a corresponding closing tag. Another is the <P> (new paragraph) tag. Insert one of these in front of the W00T! to improve the spacing. Other Text Formatting Styles Other text styles you may find useful are listed below, this is only a small number of the total available: <B>text</B> Bold face <I>text</I> Italics <U>text</U> Underlined <SUP>text</SUP> Superscript <SUB>text</SUB> Subscript Your homework is to experiment with these, and find some more ! Summary OK, so your "site" doesn't look much yet, but I've spent long enough on this installment already ! We haven't really done a lot here today, but like I said at the beginning, I am aiming this at beginners. In case you've got really confused, I've attached the HTML file as it should look so far. In part two, I'll be covering lists & tables. Supporting Files (right click & select 'Save As'): bg.gif index.htm Edit: whoops, fouled the path up ... ok now Last edited by Jonny English; 19-October-03 at 12:59 PM.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
anyone know HTML?	Peters_Princess	Anything Goes	5	22-November-04 11:13 PM
Introductory HTML - last one	Jonny English	Daily Disturbance	0	08-November-03 04:57 AM
Introductory HTML, part 4	Jonny English	Daily Disturbance	0	04-November-03 03:50 AM
Introductory HTML pt 3	Jonny English	Daily Disturbance	1	02-November-03 05:52 PM
Introductory HTML, part 2	Jonny English	Daily Disturbance	0	26-October-03 03:15 AM

19-October-03, 04:28 AM		#2 (permalink)
drwho Apex Master Tech Apprentice	ehh, old style jon! I haven't seen someone use a header tags ( <H2> some text </H2> ) in like 3 years... anyway what i wanted to say was.... font size isn't limited to any integer (whole number) from 1 to 5. proof: <font size="14"> some text </font> which would result in your text being this size

19-October-03, 08:35 AM		#3 (permalink)
OMFG_dude_WTF Pro HTML Hoe	Good post Jonny. Very basic html tutorial, not to mention old school like drwho said, but yet very effective when layed out with with some nice graphics. I am not trying to take over your post dude, just thought I'd help out a little, since I am the "Pro HTML Hoe" of Pimprig at the moment. Here is just a little help on an outdated tag. This one is more up to date for aligning sections of your pages. The <CENTER> tag has far been depreciated and although it still works great, it has an extreme limiting properties and most WAP devices browsers I have used do not support this tag anymore. By using the <DIV> tag you can get the same results with more options and the ability to control it with dynamic html, JS or other languages if you choose to. <DIV ALIGN="center"> will give you the same result as the <CENTER> tag. The <DIV> tells the browser to treat whatever is between the tags to act like a layer. The "align" attribute just tells it how-where to line up. There are a few more attributes to use in it, but this is just a basic "hint" to you guys that there is a better way to align sections. I used to use the <CENTER> a lot on my pages, but then found out the headache of having to redo each tag to a <DIV> when I wanted a more a precise alignment. It also helps on having to change the alignment later on, by changing the attributes in the <DIV> tag. If you want to center whatever is bettween the tags you type: <DIV ALIGN="center">Your text, images, or whatever you want here.</DIV> If you want to align everything to the right on whatever is bettween the tags you type: <DIV ALIGN="right">Your text, images, or whatever you want here.</DIV> Change it to left if needed but it is rarely used since browser defaults always align to the left if no tag is specified. I have never used a WYSIWYG editor of any kind and never will unless it can read my exact thoughts LOL.. I have always used Notepad, and nothing else. I just get more satisfaction out of doing it the real way, not to mention a more precise layout for when I need to edit the page I want. And if you write the whole page you know where everything is at already if editing is needed. Searching for a string really sucks. My sig is pure HTML and graphics only, and all the files needed to make the intial load is only around 50k. As you browse the links you will then download again. This type of sig is significantly smaller than using FLASH, which requires that you download the entire file when you load the forum page. Hope this helps some of you.

19-October-03, 11:26 AM		#4 (permalink)
Lord Dragon Apex Master Tech	Jonny, i can't download your files.

19-October-03, 09:33 PM		#6 (permalink)
Lord Dragon Apex Master Tech	I realize they are not that important but you went to the effort to post them. I look foward to seeing the rest of the tutorial, maybe I'll get off my a$$ and finally do something with http://lorddragon.net/, any suggestions would be helpful. I was thinking of a links page, a picture page and software download (freeware, of course).