Hack Forums

OK, I have never really given much to this site, so I've decided now that I'm going to, in parts, teach you PHP code the way I learned it.

ALL CREDIT GOES TO homeandlearn.co.uk

ANATOMY OF A WEB PAGE

DOWNLOAD HTML EDITOR: http://www.homeandlearn.co.uk/WD/downloadEditor.html

What is a web page?
Files on your computer come with extensions. If you wrote a letter using Microsoft Word and saved it with the name "MyLetter", the software would add three letters to the file name. Because it was typed using Word, the three letters that get added to your filename are .doc. So your file name will be "MyLetter.doc" and not just "MyLetter". If you created a spreadsheet in Microsoft Excel and called it "Accounts" the Excel software will add its own three letter extension to your file name. It will add .xls. So the file name will be "Accounts.xls" and not just "Accounts". So you get a different three letter extension depending on the software you used.

These three letter extensions are very important to computers. They are used to identify the type of file it is. With a file extension, Word can recognise its own documents. It sees the letters doc and says "Ah yes, that's one of mine. I can open it." If it sees a different extension, xls for example, it says "What the heck is that?" You'll then get an error message telling you that the file type is not recognised.

Web pages have their own file extensions. Oddly there are two different extensions, a three letter file extension and four letter extension. Web pages come with the extension .htm or .html. A browser can recognise either extension. With our software, the four letter extension is used when web pages are saved. (The letters HTML, incidentally, stand for Hypertext Mark-up Language.)

When you Open up a web page with your browser, Internet Explorer for example, the browser software checks the file extension, the same check that Word and Excel makes. If it sees the .htm or .html extension it knows it's a web page and then tries to open it. (Modern browsers, though, can open up other types of files. Internet Explorer can open up your Word documents and PDF files.)

Behind the scenes, however, the thing that Internet Explorer is trying to open is really a text file that has had its extension changed from .txt to .htm. The text file though will have special symbols and words, called Tags. When the browser sees these Tags it goes to work, displaying whatever you typed and hiding the Tags from your viewers.

If all that seems a little confusing, don't worry. It will become clearer as you progress. For now, our goal is to design a first web page. So load up your web design software, and let's begin.


THE FIVE MINUTE WEBPAGE

Load up the HTML Editor you downloaded.


Click File from the menu bar
From the drop down menu, click New
When you click New, a dialogue box pops up asking you to choose your Background options.


The default is set to None. Click "Background Colour". The dialogue box changes to show you the background colour options.



Click the black down-pointing arrow just to the right of White to reveal a drop-down list of colours for your web page. Clicking the "More" button will reveal another dialogue box with a wider range of colours to choose from. For now, though, select one of the colours from the drop-down list.

Before clicking the OK button, notice that you can also set a Background Image for a web page, instead of using a coloured background. We'll explore this later.

When you have chosen your colour from the drop-down list, click the OK button. The dialogue box will close, and a rather daunting code will now be in your editor's window.



We'll explain what all that code means in a moment, but as we're designing a five minute web page, let's crack on.

The cursor will be flashing right at the top of your code. Move it down so that it's flashing on an empty line after
From the menu bar, click on Insert > Heading > H1



When you click H1 (the H stands for Heading) a pair of H1 tags will be inserted onto your page. We'll get on to what tags are soon, but for now just type something in between those pair of H1 tags:


Nearly there. Next, highlight that entire H1 line, like in the image below:



From the menu bar, click on Format > Centre. When you do, another pair of tags will be added to the start and end of those H1 tags. Your code will now look like this:


Notice the spelling of the centre tag, you Brits! It's CENTER. The American spelling "er" is used in HTML, rather than the English "re".

OK, we're done with our five minute web page. Time to see what it looks like.

Click File > Save As and save your work
Then click View > View Web Page (or click the pair of glasses on the toolbar).
Your web page should launch in your browser
Congratulations! You have designed a web page. Easy, wasn't it? Now for the slightly more difficult part of understanding what it was you actually did.

THE HTML SKELETON

In this next lesson, we're going to break down that code you inserted, and explain what it all means. To begin, let's take a look at the basic HTML skeleton. The HTML skeleton is at the heart of most web pages on the internet. It is the starting point of web design, the basic code that is fleshed out to create something new and (hopefully) wonderful.


To see this skeleton, click on File > New. When the Background Options dialogue box pops up, leave it on the default "None" and just click the OK button.


Highlight the part "Insert Your Title Here"
Click on Edit > Cut
We'll see what the Title tag does soon. But as the words "Insert Your Title Here" are not part of the basic HTML skeleton, we can chop them out. What you're left with is this:




And that is the HTML skeleton. That is what is at the heart of most page on the internet. Notice that there are two of everything: two HTML's, two Heads, two Titles, and two Body's. That is because Hypertext Mark-up Language is written in Tags, and Tags come in pairs (there are one or two tags that don't come in pairs, but most of them do).

The first pair of tags are the HTML tags. You put one HTML tag at the top, and one at the bottom:




Two things to notice there. One, that the word HTML is surrounded by angle brackets (the Less Than and Greater Than keys on your keyboard); and two that the second Tag has a forward slash before the HTML.
All your tags must be surrounded by the angle brackets < >. This tells the browser that there is some HTML code that needs executing, and that it is not to be shown on the web page. Miss an angle bracket out and it can really mess up your web page.

The first Tag tells the browser to start doing something; the second tag tells the browser to stop doing it. The stop symbol is that forward slash. So miss that out and again your web page can really be messed up.

The next pair of tags are the HEAD tags:

Again, notice that both the HEAD tags are surrounded by angle brackets, and there is a forward slash before the final one </HEAD>.
The HEAD section of HTML page is where you put special instructions for the browser. Your browser will not print directly to a web page when things are inserted into the HEAD section. For example, if you wanted to display the words "Hello World" on your page, and you typed them in between the two HEAD tags, then the Browser would just ignore them. That's because "Hello World" is direct text, and not a special instruction that the browser can understand.



The Title Tag
A special instruction your browser can understand is the TITLE tag:
The Title tag always goes in the HEAD section of the HTML skeleton. The TITLE tag doesn't do very much. And it definitely should not be confused with the name of your web page. If you saved your web page as MyFamily.html then that would have no bearing on or relationship with the TITLE tag. Whatever you type between the two TITLE tags is what appears at the very top of your browser window. And that's it, that's all it does.




Remember when we chopped out the words "Insert Your Title Here"? Well, the first of the screenshots is what will happen if you don't chop out the words "Insert Your Title Here". The second screenshot has the words "Insert Your Title Here" chopped out and replaced by "All Right - I've inserted it". The third screenshot is what happens when you have nothing at all between the two TITLE tags. You'll quite often see web pages with "Untitled" right at the top of the browser window. If you see one of these on the internet, you know the web designer has not put anything between the two TITLE tags.

The final, and most important part, of the HTML skeleton is the BODY section.

In between those two BODY tags is where you'll write most of your HTML code. Think of the BODY as the white page in Word Processing. When you type something in your word processing software, it is immediately displayed. Similarly, when you type something between the two BODY tags and then view the results in a browser, whatever you typed will be displayed. As long as it's not a tag, your browser will try to display it for you. So remember: if you want people to see it, put it between the BODY tags.

Fortunately, you won't have to type out the HTML skeleton yourself, because the software will do it all for you. But you will be making changes to the HTML skeleton, and it's important you know what it is you're amending.

So to recap, here's the important points again:

HTML is written in Tags
Tags usually come in pairs
A Tag is a word surrounded by angle brackets, e.g.: A pair of tags has as a starting Tag and an end Tag. The end Tag is preceded by a forward slash
The HTML skeleton is the foundation on which most internet pages are based
In the next lesson, we'll go through what we did to flesh out the skeleton.

Adding Colours

When we created a web page with the HTML Editor, we chose a colour from the drop down box. But you can add other colours. Try this in your Editor:

Click on File > New
The Background Options dialogue box appears
Click Background Colour
Click the "More" button
When you click the "More" button, another dialogue box appears showing a list of Web Safe colours you can use (A Web Safe colour is one that will display properly no matter what browser or computer you have - at least, that's the theory).

Click on a colour that takes your fancy.


Click OK when you're happy with your chosen colour. You will be returned to the Background Options dialogue box. Click OK.

Your new background colour will be inserted into your code. Let's examine it in more detail.

In the basic HTML skeleton, the first BODY tag was just this:


If you don't specify a colour or background image to use, the browser will use the default colour. This is usually white. Notice what our BODY tag now looks like:


When we used a magenta colour, the tag looked like this:


A modern browser will recognise a lot of colours by name. But the colour names a browser recognises differ. The Netscape browser will not recognise a lot of the colour names that Internet Explorer uses, and vice versa. In which case, the default colour will be used, and not the name you specified. However, if you use a colour code instead of a colour name your colour should display properly (If it's a Web Safe colour).

The colour code we used was this:

#FFCC00

Colour codes start with the hash symbol (#) and then have six numbers or letters. The six numbers and letters are hexadecimal values. We won't go in to Hexadecimal maths, but here's the basic meaning of the code: The first two values are how much Red you want, the second two values how much Green you want, and the final two values are how much Blue you want. The values you are allowed to use for each number or letter are 0 to 9 and A to F.

So our code reads: switch the Red full on (FF), use a lot of Green (CC), but turn the Blue full off (00).

Here's the whole line again:


Notice how the BODY tag has been extended. There's now a space after <BODY and that is followed by the word BGCOLOR and then
the code. Finally, we have the angle bracket at the end.

So an important point about tags is this: A lot of HTML tags can be extended. In other words, you can add to the basic Tag. The BODY tag is a good case in point. Not only can you extend the BODY tag by adding a background colour to it, you can also specify what colour you want the text to be on the page. Like this:


Notice where the spaces are. There's one after BODY and there's one after BGCOLOR=#FFCC00. So when you are extending a tag, remember to separate the different parts by a space.

There are a number of other ways to extend the BODY tag, which we'll meet later. Let's move on to what else was done in the five minute web page.




Web Page Headings
The Heading tag in HTML comes in seven different sizes: 1 to 7. In the editor, only sizes 1 to 4 are used. Size 1 is the biggest Heading size, and size 7 is the smallest. A heading tag is the letter "H" followed by a number 1 to 7 (You don't need to use capital letters in HTML tags, by the way, because it is not case sensitive. So use lower case, if you prefer: The browser won't care.)

In the five minute web page, we used size 1 heading tag by clicking on Insert > Heading > H1. This gave us the following:


But that is just the heading tag. We then need to type something between the pair of H1 tags. We used this as a heading:

What we're doing is telling the browser to display the words "My First Web Page". But because we've surrounded the words with a pair of tags, we're also telling the browser how to format those words. In this case, format the words with a Heading size of 1.


The final thing we did in the five minute web page was to centre the title on the page. If we didn't centre our heading, the browser would just align it on the left. First we highlighted the H1 tags, then we clicked Format > Centre. Which gave us this:

Notice that the Heading tag, and our text are now surrounded by the two CENTER tags. This is called Nesting. Here, we have nested the H1 tag inside the CENTER tag. The text itself is nested inside both of these tags.


Save your work and then click View > View Web Page to see the results, and the new colour code in action.

As an experiment, change both the H1 tags to H7 (just delete the 1's and type in a 7).


Save your work again, and then click View > View Web Page once more. See how much smaller the Heading is?

Set the Heading back to H1. On a line after the H1 and CENTER tags, type out some text, as in the image in this link:


Click here to see the HTML code in the Editor

When you have typed some sample text, save your work and then view the results. You should see that your text has gone below the heading, with some generous space between the two.

In the next part of the web design course, you'll learn how to insert an image on a page.

how to insert an image on a webpage


In the last section, you used a colour for the background. But the background does not have to be a colour; it can be an image, if you prefer. We'll see how to add an image as the background now, and then discuss image types used on the internet.

http://www.homeandlearn.co.uk/WD/backgrounds.zip <the photos you're gonna need

We'll also discuss another crucial topic to do with image files and HTML files - how they are referenced. We'll then move on to inserting images generally.

So, load up your HTML Editor, and click on File > New


From the Background Options dialogue box, click on "Background Image". The Open dialogue box appears.
Navigate to the folder on your where you downloaded and unzipped the background images, and click on one of the images.
Click OK when you get back to the Background Options dialogue box.
It should look like this:


Notice the new Tag - Background. When we wanted a coloured background for our web page, the Tag was this:


When you want a background image, instead of a background colour, the Tag is:


Before discussing file types, and how to reference images, click File > Save or File > Save As, and save your web page. Then click on View > View Web Page.




The background image you chose for your web page might not have displayed. Or even if it did, there will be a big problem if you were to put it on the internet. The problem is due to the way the image is referenced. We'll discuss that now.


Referencing image files and HTML files
If the background image didn't display, then the culprit is your HTML Editor. When you clicked on Background Options, then Background Image, you searched for an image that was either on your CD (if you order the printed course book, it comes with a CD of all the resources) or was downloaded to your own hard drive. The full path to the image file on the CD might be this:


D:\WebDesign\CD Rom Contents\HTML\Backgrounds\background1.jpg

However, if you look at the code in your HTML Editor the path has been shortened to this:


background1.jpg

The reason why the file path has been shortened is because of something called a Relative Reference. The un-shortened file path of D:\WebDesign\CD Rom Contents\HTML\Backgrounds\ background1.jpg is an Absolute Reference. We'll discuss those first.




Absolute References
Consider what would happen if you had this in your HTML code:


If you put the page on the internet, you'd have a problem. Because you're saying, "There is a folder on the D Drive called HTML. Inside this folder, there is another folder called Backgrounds. Inside the folder called Backgrounds, there is an image called background1.jpg. Please use this image as the background image for my web page."


You have used an Absolute Reference. And that's the problem. Although you will have all these folders on your D drive, somebody else viewing your web page won't. But that person's browser will try to look for all these folders. Of course it won't be able to find them, because all the folders are on your computer, and not theirs. So the background you specified to use in your web page won't be displayed to anybody else but you.

Absolute References are fine if you want to link to somebody else's web page on the internet. And you've seen this many times:


http://www.homeandlearn.co.uk
That's an absolute reference to a web page on the internet. Perfectly OK, and you'll see how to add links to web pages later. But Absolute References and not terribly practical when it comes to you own images and your own html pages. Relative References are much better.



Relative References

With Relative Referencing, the starting point is not your own computer, but the image file or HTML file itself. With Absolute Referencing, the browser starts the search for the image on the left hand side:




With Relative Referencing, the browser starts the search for the image on the right hand side:



So with a Relative reference, the browser starts looking for a file called "background1.jpg". If you just put this:


the browser will look for the file in the same folder where you saved your web page. If it's there, no problem; the browser will display the image. You don't need to add anything else, because the browser will stop searching when the image has been found. In fact, the ONLY place the browser will look is in the same folder where you saved your web page.


So with Relative Referencing, if you put all your images and web pages in the same folder, the browser will know where to find everything. And when you're asking the browser to display an image or another web page, you only need the name of the image or web page. You don't need to do this:
<BODY BACKGROUND = C:\WebPages\Backgrounds\background1.jpg>

You can just do this:


With this HTML Editor, Relative References are used. So if you create a folder on your hard drive called "Web Pages", you can save all your image and web pages into it. That way, all you images will display properly, and all the links to your web pages will work.

On a professional level, though, dumping everything into one folder is frowned upon. If you created a folder called "Web Pages" you would be expected to create other folders inside this one. A folder called "Images" to store all your image files; a folder called "Scripts" to store any external code; and a few other folders as well.


If you do that, Relative Referencing gets a little bit trickier. If you have a web page called index.html inside the "Web Pages" folder and wanted to use an image that was inside the folder called "Images", and this folder itself was in the "Web Pages" folder, you couldn't do this:

If you tried that, the image wouldn't display. That's because you haven't told the browser about that folder called "Images". You would have to do this:


The forward slash means "look for a folder called . . . that is in the same folder as the current file." In this case, look for a folder called "Images".


If you wanted to point to an image that was outside the "Web Pages" folder, then life just got even trickier still. Unfortunately, the solution is outside the scope of this beginner's book. But as a beginner, if you keep everything in the same folder - images and web pages - then this sort of relative referencing should work:

So after you create a new folder on your hard drive, start the Background image project again. Save your web page into the folder you create. And then do one important thing: copy the background images (NOT the folder) from your CD or hard drive to your newly created folder. When you've done all that, click on View > View Web Page. Your background image should now display.

Experiment with the other background images. There are 17 in all, some awful and some OK.

To sum up, then:


Your HTML Editor uses Relative Referencing
To ensure that images and web pages display correctly, create a folder on your hard drive and put all your course work into this new folder

Image Types Used On Webpages

You remember at the start of this course we talked about file extensions, and you learnt what the .html file extension was. You're now going to learn about two new file extensions: JPEG and GIF.

Just like web pages and word process document have file extensions, so too do images have file extensions. There are a wide range of file extensions used for images. The two most popular file extensions used on web pages are JPEG and GIF.




GIF Images
GIF stands for Graphics Interchange Format, and was developed by Compuserve. It uses something called a LZW compression algorithm to reduce the size of the file. The size of your images on web pages is a crucial factor for people using 56k modems (most people). A 56k modem will have a maximum download speed of 56 kilobits per second. This is about 7 kilobytes per second. If you ignore image size, and have a picture on your web page that is 700 kilobytes, it will take well over two minutes to download (56k modems rarely work at their maximum speed). Most web surfers will not wait that long for your image to download (would you?). They'll be gone long before the two minute mark.


So compressing the size of an image makes sense on the internet. If you've scanned a photo and saved it to your hard drive, take note of the file extension used. The software package you used to view the scanned image will probably give you the opportunity to save the file in another format. Saving the file as a GIF image will greatly reduce the size of the file.

There is a down side, however, in converting to a GIF. The number of colours in your image is capped at 256 colours. For realistic photos, this is not nearly enough. And although your file size is greatly reduced, so too could be the quality of your image.



JPEG Images
JPEG is the other popular image format used on web pages. It stands for Joint Photographic Experts Group, and allows you to have images with more than 256 colours. In fact, millions more. Again, your original image is compressed when you convert to a JPEG image, so some loss of quality is inevitable. If you want to show off your photos in their best light, converting to JPEG rather than GIF is the best option for the internet. The size of the file might be slightly higher, but then so will the quality.


The downside to JPEG images is that jpeg is a Loss Compression format. This means that image quality goes down (rapidly) the more times you compress and uncompress the image. GIF images, on the other hand, is a Lossless Compression format, meaning there will be no loss of quality when you compress and uncompress the image.

Another thing you can't do with JPEG images is have a transparent background. So if your image was with a black background and you wanted to get rid of that black background, you could set the black colour as a transparent colour, if you save as a GIF. With a JPEG, you're stuck with the black background. (you can also animate GIF image, which you can't do with JPEG images.)

In general, if your image is less than 256 colours, then save the image as a GIF; if the image is more than 256 colours, and quality loss is important, then save the image as a JPEG.


One last thing about JPEG images in web pages. When specifying an image in your HTML code, the "E" of JPEG goes missing. So it's this:
BACKGROUND = image1.jpg

and not this:

BACKGROUND = image1.jpeg

So let's design a web page with an image on it. We'll do this in the next lesson.

Web Page with an Image

In this lesson, we're going to design a web page with an image. Before you make a start, download the images in the link below:

http://www.homeandlearn.co.uk/WD/planets.zip

Click here to download the Images for this lesson

Once you've downloaded the images, try the following.

Create a new web page with your HTML Editor software by clicking File > New
Set the background colour to white
In between the two BODY tags, type "This image was created using Paint Shop Pro 7"
Save your web page
Copy the planet images (NOT the folder) you downloaded above to the same place where you saved your web page. To insert an image, do the following:

From the menu bar, click on Insert > Image


The Insert Image dialogue box appears.


Click the "Search for an Image" option
The Windows "Open" dialogue box pops up
Locate the folder where you saved your web page and planet images
Click the black down-pointing arrow next to "Files of Type"
To view only GIF files, click GIF option. Here, we're going to be using one of the JPEG images
Click on one of the JPEG planet images, then click Open
You will be taken back to the Insert Image dialogue box. Notice the text box at the bottom: "Use this text if image doesn't appear". Sometimes, things go wrong with web pages, and the browser cannot find the image. In that case, you can type some alternative text which will display if the image is not found.

So click inside the text box and type "Planet Image"
Then click OK
Your HTML code should now look like this:






Click on View > View Web page to see the results of your work.
What happened? You probably found that the image displayed on the right hand side, and the text on the left hand side, near the bottom of the image.

But if you look at the code, you'll see we typed the text first, then put the Image code on the line below it. So why didn't the image appear underneath the text?

The image appears to the right of the text because of one reason: HTML code does not recognise the carriage return. So when you press the enter key on your keyboard to get a new line, the HTML Editor itself knows what you mean, and what you want. But when you load the code into a browser, that new line break is not recognised. The browser thinks you want the text and the image on the same line.

With HTML code, you have to "tell" the browser that you want to start a new paragraph. If you forget, then the browser will put everything on the same line.

The way you "tell" the browser to start a new line is with either the <P> tag or the <BR> tag. The P stands for Paragraph, and the BR for Break. The difference between the two is that the <P> tag gives you double space, and the <BR> tag gives you single space.

To insert a Paragraph tag, click where you want the new paragraph to be. Then click Insert > Paragraph from the menu bar. Or click the <P> icon in the toolbar.

To insert a Break tag, click where you want the new Break to be. Then click Insert > Break from the menu bar. Or click the <BR> icon in the toolbar.


After you have inserted a <BR> or <P> tag, save your work, and then view the web page. You should see the image appear below the text. To see the ALT part of the image code in action, delete a couple of letters from the file name. Something like this:

<IMG SRC = "anet2.jpg" ALT = "Planet Image">

Save your work, and then view the web page again.


The red X signifies that an image could not be found. The ALT text we typed appears in its place. If you keep getting a red X instead of an image, make sure you image file referencing is correct (The SRC part of the IMG tag.)



In the next lesson, you'll learn all about image alignment.

NOT TILL MONDAY!!!

Damn,the tutorial was short.

nice tut man

You shouldn't be teaching anything but standard XHTML imho. HTML is VERY outdated.

None of that will validate even as HTML since you have no doctype and no charset.

By far this is the best site to learn basics:
http://www.w3schools.com/default.asp

well... it seems Omni dislikes this tut... just use the link he posted :/