Charnwood Sunday Football League

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 2:09 pm Post subject: HTML - Beginners Guide To

Welcome to the area where you can learn all you need to, about HTML!

Now, the first thing I ask you all to remember is that I have never written any "tutorials" or similar before... so please bear with me as much as possible.

Okay, first question that is always asked when a complete learner takes up HTML is, "What does it stand for?".

The answer is Hyper Text Mark-Up Language.

Now to start the actual "tutorial" on HTML, I will be posting each part of it individually... you will see what I mean when I get going! Smile

_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 2:44 pm Post subject:

Okay... first thing to establish is that I am going to teach this on the understanding that everyone will be using "Notepad" (or the equivalent on your PC/Laptop... WYSIWYG or whatever you have!).

If you have never used Notepad before, you should find it by going into your "Start" menu (very bottom-left of your monitor usually). You then go to "All Programs" followed by "Accessories". In there you should see "Notepad" (or your equivalent text editor).

*** If you do not understand what to open or where from, then reply and I will help you best I can ***

Next thing to do is to create a folder somewhere on your C: drive -- Call it "my web". We will be putting ALL of our saved work in this new folder! -- If you are not sure how to do this, then just ask and I'll do a "walk-through" guide for you.

Assuming you have found and opened your Notepad, it will be completely blank - ready for you to start typing stuff into it!

So... the first thing we need to introduce are the "tags" that we use when writing HTML. These "Tags" tell the computer what to do and/or where to put things so you can see them as a "normal" page when you look at it on the internet!

Tags are opened and almost all of them must be closed (only a few exceptions).

The first tag that we need to enter is the one telling the computer what type of page you are creating: So,

Type in the following -- Never enter what I write in brackets '(' ')':

<html> (This tells the computer that you creating a web page)

</html> (This tells the computer that the web page you are creating has finished. The '/' sign tells the computer to "close" that tag)

Anything we put between these "tags" is what we will be wanting to show as our web page.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 3:11 pm Post subject:

Now we have told the computer what we are doing with this document, we can start "filling the gaps".

So, between those tags you will need to write in a couple more:

<head>
</head> (again, notice the '/' immediately after the '<'? We must put this in to close the tag)

** Whenever we want to "close" a tag, you must the '/' immediately after the '<' at the start.

Do not put anything between them for now - we will cover that in the "advanced" part of this tutorial.

So right now, you should be seeing this:

<html>

<head>
</head>

</html>

Onto the next part...
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Celtic_Steve · Posted: Thu Dec 13, 2007 3:11 pm Post subject:

This is gonna be a loooonnnnng thread! Wink

_________________
http://www.loughboroughceltic.co.uk

RefSec · Posted: Thu Dec 13, 2007 3:23 pm Post subject:

It's alright for you, Celtic Steve!! I'm a total beginner and find it somewhat confusing, but at least I have found my notepad!!
_________________
I know I'm rubbish, that's why I'm doing your match!

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 3:34 pm Post subject:

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 3:50 pm Post subject:

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 4:16 pm Post subject:

Now we have the "core" of the web page -- Personally, whenever I create a new web page, I always code these first. This just ensures that I have not made a basic error at the start of any page, and leaves me free to concentrate on the actual content of the web page.....

And talking about the actual content... Smile

... We are now ready to put our first bit of code into the web page that we will be able to physically SEE when we look at the page!

Whenever we want to add something to the page that anyone can see on the web page, you must put the information between the relevant tags (see below for first example). ALL content that is to be seen on your web page MUST be placed between the <body> and </body> tags!

So, the first tag I will introduce is one that is extremely common -- it is used to start and end a paragraph:

 and are the tags used for this.

So, for example, we want to say "Hello!" on the web page for all to see... you would do this by entering the following:

Hello!

You should now have the following on your Notepad*:

<html>
<head>
</head>
<body>
Hello!
</body>
</html>

NOW SAVE THIS FILE AS "index.html"... remember, we created a new folder before starting this tutorial (called "my web" on your C: drive)... put this file in that folder -- This will create the first web page! Once saved, you can if you want to, open this file from Windows Explorer (or the equivalent on your computer). You should see that it does NOT open in Notepad!! It opens as a Internet Page... and you should also see the "Hello!" written in as well. If not, go over what I have written and amend anything not quite right. - If you're still struggling, then post any questions here.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 5:56 pm Post subject:

Ok, now we have written something on our web page... so what do we do with what we have just written??? - How do we move it to where we want it to be?

Well... to get the text where you want it, you will need to format it. Many tags in HTML can be formatted by using what is called an attribute. Attributes help us format all sorts of things.

An example of an attribute for the tag would be "align"... you can choose 1 of 3 options:

To "left-align" the text: (Although the text etc is automatically aligned to the left, so if something is to be on the left then you don't really need the "align" attribute at all!)

To align the text in the centre: (NOTE: the American-English spelling in HTML? This is the same throughout... it will always be the American spelling NOT the English spelling).

To align the text on the far right: 

So let's look at what we've just done.
We've added the attribute... okay - notice how we added it? We opened the tag as normal, we put in the 'p' as normal, and then instead of closing the tag, we added the attribute by leaving a single space between the 'p' and the name of the attribute (in this example -- 'align'), we then entered what action we wanted from the attribute (ie: "left" / "center" / "right"), then we closed the tag because we formatted it how we wanted it.

See the next post for more details on "attributes"
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 6:05 pm Post subject:

Attributes provide us with more control over HTML. It allows us to format something. This allows us to format everything in a way we want, to place things and to determine how we want them to look on our web page.

When we want to use an attribute, we need to put an '=' sign immediately after the name of the attribute (eg: align=).
We then must enter the action we want it to take inside speechmarks (eg: align="right")

A very important note to remember is that we put attributes in the opening tag only -- you never put attributes in any of the closing tags.

We will be coming across a few of these whilst in the beginner's tutorial, however we will concentrate more on them in the 'Advanced HTML' tutorial.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 6:31 pm Post subject:

Now we have a little grasp on that, we can move on to some other tags. Below is a little list of the opening and closing tags, and a very short description of what they do for us, followed by an example:

NOTE: If there is no closing tag, then I will only put the "opening" tag.

---------------------------------------------------------------------------------

(1) This is a "line break". Fairly self-explanatory... it shifts whatever is after this tag onto the very next line on the page.

Example: Whatever happens, you should know.... that I'm always there for you!

This will look like:

Whatever happens, you should know....
that I'm always there for you!

(2) This makes the text bold!

Example: I absolutely live for football!

This will look like:

I absolutely live for football!

.... get the gist of it?

Other tags similar to those above are as follows:

 and These are used when you want to underline some text!

 and These are used to make the text Italic style!

Okay... that's enough of that for now!! Let's move on -- again, I will be going over many more things, but they will be in the "advanced tutorial"... this beginners tutorial is just so you get used to coding HTML. The extra's will come a bit later!
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 6:39 pm Post subject:

Right... now a little test to see whether you understand what's been said so far!

I want you to look at the following code and imagine what the page would look like if you looking at a Internet Page.

<html>
<head>
</head>
<body>
WELCOME TO MY FIRST WEB PAGE!
I think I understand the basics now, and managed to write this page! How pleased am I?? 
Come back soon ya hear!
</body>
</html>

Not sure if you're right or not? Well, open a NEW Notepad* file and write/copy this code into that file. Save it as "example1.html" in the folder we created right at the start of this tutorial. Now open the file we just saved from Windows Explorer (or your equivalent) and.......??? Was it like you imagined?
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 6:55 pm Post subject:

Now let's move on to the <h> tags....

These allow us to put things in bigger writing, a "headline" if you will.

There are 6 different types of <h> tags that you can use, and each one is a different size to that of the others. The list is:

<h1> This is the largest size
<h2>
<h3>
<h4>
<h5>
<h6> This is the smallest size

ALL of the above 6 tags are closed by </h>

Ok, we know the different <h> tags available to us... so what do they look like?

One way to find out! Create a new file in Notepad*, and enter/copy the following code:

<html>
<head>
</head>
<body>
<h1>My First Header</h>
<h2>My Second Header</h>
<h3>Third One</h>
<h4>Fourth One</h>
<h5>Fifth Header</h>
<h6>Smallest of the 6 available</h>

This is some normal text for you to compare the text and header sizes against!
</body>
</html>

Spot the differences! ok.. so we know how to write things, we can emphasise the writing (making it bold, underlined and italic) and we now know how to make headers.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 7:33 pm Post subject:

The next thing I want to cover are the "special" characters.

I won't get into it too deeply but HTML is coded in ASCII characters. This is a limited set of characters including ten digits (0 - 9), some punctuation marks and upper/lower-case English letters (which also partially explains why HTML can be run off any text editor on any type of machine running an Operating System).

Every now and again, you may want to add something to your webpage that is not a "standard" ASCII character.

Examples of what you may want to use, and the code you will have to use for them are as follows:

For the "registered trademark" symbol (the letter R inside a circle), you need to enter this code: ®
For the "Copyright" symbol (the letter C inside a circle), you need to enter this code: ©
For the "ampersand" symbol (&), you need to enter this code: &
For a non-breaking space (same as hitting the "spacebar" on your keyboard), you need to enter this code:  
A "non-breaking space" comes in handy because if you entered 100 spaces between 2 words in your webpage, it would only acknowledge 1 of them... the other 99 are not "rendered" (they are ignored!). So if we wanted 5 spaces between 2 words, we would use the spacebar for the first space, followed by 4 " " to give us the 5 spaces that we wanted! -- More on this later!)
For the '<' symbol, you need to enter this code: <
For the '>' symbol, you need to enter this code: >

Have you noticed any patterns in that lot above? - That's right, every code for the above symbols start with the '&' symbol and ends with ';' (semi-colon) sign!
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 7:45 pm Post subject:

Next thing to look at is using the and tags.

An example of something that is "superscript", is say 3². The figure "2" is superscripted. A better example may be when writing a date down: you would see it as... 13^th Dec. 07 -- The 'th' after "13" is superscripted. You would be using the and tags for this.

An example of something subscripted would be: 3₂ - Note now that the "2" is subscripted (below the line). The tags for subscript is and 

So, "superscripted" means it is slightly above the normal line of text, whilst "subscripted" means it is slightly lower than the normal line of text.

Feel free to play around with these to get used to them! You will usually only use these tags when making scientific or mathematical pages, but when you do use them, you'll find you use them quite a lot. Smile

_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Dec 13, 2007 8:06 pm Post subject:

Next thing to look at is how to make lists.

Ok, there are different types of lists... we'll look at the "Unordered List" first:

An unordered list is simply a list of items that are in no particular order whatsoever (ie: they are not numbered, like 1. 2. 3....). This list will be "bulleted" (circle or square bullets -- depends on what you want).

Try entering this code into a new Notepad* page (DON'T FORGET the usual starting tags first, like <html><head><body> etc etc!!!)

<ul><li type="disc">Point One
<li type="circle">Point Two
<li type="square">Point Three</ul>

If you used the tag <ul> with the type inside it (eg: <ul type="square"> ) then all of the points would be square bullets.

Notice that the "<li>" tag does not need closing?

And let's compare the above UNordered list with the code below, which is for an ORDERED list:

<ol type="1"><li>Point One
<li>Point Two
<li>Point Three</ol>

This list would just look like this:
1. Point One
2. Point Two
3. Point Three

But why stop there?!? Why should we start at 1? What if we want to start the numbering in the list at 53? Well, you simply add a little to the code - see below:

<ol type="1" start="53"><li>Point One
<li>Point Two
<li>Point Three</ol>

This would show like this:

53. Point One
54. Point Two
55. Point Three

Notice the difference? There is another type of list, but for now, this will do. I'll give you till tomorrow to digest this, but tomorrow I'll be carrying on at the same pace! If you do not understand any part of what has already been posted in this thread, then just ask... explain what it is that you're having trouble with, and what you're trying to get and I will explain in a "walk-through" for you.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Fri Dec 14, 2007 11:08 am Post subject:

When making "ordered lists", you do not have to numbers as the list points (so you do not have to have 1. 2. 3. 4. etc).

You can change the list type by adding the following code:

<ol type="a"> (This shows the last as alphabetical points.)

A few different types you could use are:

Option 1: <ol type="1"> (This is a numeric list)
Option 2: <ol type="a"> (This is a alphabetical list)
Option 3: <ol type="i"> (This is a roman-pointed list

The above codes would look like this:

Option 1:
1.
2.
3.

Option 2:
a.
b.
c.

Option 3:
i.
ii.
iii.

This is useful for when we want to make lists within another list!

Example:

1. Point 1
2. Point 2
3. Point 3
a. Part 'a' of Point 3
b. Part 'b' of Point 3
c. Part 'c' of Point 3
4.
5.
6.
i. Part (i) of Point 6
ii. Part (ii) of Point 6
iii. Part (iii) of Point 6
7.
8.
9.

This is possible to do by something called "nesting" the lists. Basically, by putting another list in one you have already started -- Example could be:

<ol type="1">
<li>Point 1 only
<li>Point 2 only
<li>Point 3 only
<ol type="a">
<li>Part 'a' of Point 3
<li>Part 'b' of Point 3
<li>Part 'c' of Point 3
</ol>
</ol>

See how we put a second list (the code in green) inside the first list (the code in blue)? We can do that as much as we want, as long as we remember to close every list we created.

If you wanted a mixture of bullet and numerical fields when making a list, again you simply "nest" one list inside of the other -- it doesn't matter whether it is an "unordered" or "ordered" list... see below for an example:

<ol type="1" start="10">
<li>We'll start this list by having the first field as the number 10!
<li>This will be field number 11....
<li>This will be 12; We will be putting bullet fields after here... watch out for the code!
<ul type="circle">
<li>Circle Point 1 of number 12 in the MAIN list
<li>Circle Point 2 of number 12 in the MAIN list
<li>Circle Point 3 of number 12 in the MAIN list
</ul>
</ol>

I suggest you try these lists out for a while to get used to them... they come in quite handy! Smile

When you are happy enough with these lists, please go to the next post. If you unsure of anything then reply to this thread and I will happily create a "walk-through" for you.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Tue Dec 18, 2007 1:23 pm Post subject:

Ok, on we go!

Next thing I want to to introduce are links -- making basic links to another site or to another page in your own site.

Before I go over what to do, a brief description of what they are may help you.
Links are areas on a website that you can click. Once clicked, an action occurs. Links are normally easy to find as they are usually different colour text than that of the other text in that page. Also, they are usually underlined as well as being another colour.

Example:
Hi there! Want to visit our website?

Another example is in my signature (below every post I make on this forum!) -- notice the different colour of the link compared to the normal text?

The link in the above example would be the words "our website" -- pretty easy to tell the difference, compared to the other (normal) text in that sentence. (Above is an example and when clicked, will NOT take you to another website... it is for show purposes ONLY).

You can make links using either text or images. When making links, they need to be placed in your main content area (in other words... between the <body> and </body> tags!).

You can make links that take you to another website, to another page on your own website or (as you may have seen every now and then) you can make links to a different part on the same page you're looking at.

Ok... first one to look at is the basic link to take you to another website:

For this we need to use the <a> and </a> tags. The "a" refers to "anchor". All <a> tags must have an attribute called "HREF" - or HyperText Reference, with only 1 exception (which will be covered in the "Advanced HTML" tutorials).

An example of a link tag would be:

<a href="http://www.google.com/">Click Here To Go To Google</a>

Let's dissect the code above -- I have put it in 3 different colours already to help us follow what we're doing.

1: The code in blue first: We have created the link tag by putting "<a " to start.
We then followed that with "href=" -- This enables us to enter a "URL" (website location/address).
After the "href=" we entered the URL that we want people to go to should they decide to click on this link. In this example, you will be taken to Google's homepage. As with all attributes, you must put the "action" within speechmarks ( ".... action you want it to take ...." ).
After closing the speechmarks, we want to close the opening tag by putting in the '>' immediately after the last speechmark.

2. The Code in green next: This is what will appear as the "link" to people looking at your web page. So, if they wanted to go to Google from this page, they would only see the words "Click Here To Go To Google". Once they click on that link, it will automatically take them away from your website and on to Google's website.

3. The code in red is just closing the tag, to say we have finished making the link. This means that whatever you put in afterwards will not be classed as a link by your browser.

I will go through the "website address" or "URL" a little later on, for those that want to know what the "http://" means, and why always best practice to put this in front of the "www."

See the next post for making a link to a page on your own website.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Tue Dec 18, 2007 1:52 pm Post subject:

Now we move on to making a link that will take us from the current page (ie: the one you are looking at right now), to another page on your own website.

To start with, you will need to create 2 blank web pages. -- Make sure you create them in the folder we created right at the very start of this tutorial.

Remember that to make a blank web page, you just to open Notepad* and write/copy this code:
<html>
<head>
</head>
<body>

</body>
</html>

Save 1 blank webpage as "Page1.txt" and the other as "Page2.txt".

Done? Good. Now we can make a link from one of our pages to another page of ours.

So, open/go to "Page1.txt" and enter/copy the following code in between the <body> and </body> tags.

Welcome to the page where I created my first link! 

Some normal text just so you can recognise the usual colour and font of normal text! 

And now for the link... Why not visit our <a href="Page2.html">other page</a> to see what's really going on! Try it now!

Once you have entered this code between the <body> and </body> tags, you can save the file as "Page1.html".

Now go back to Notepad* because we will now be wanting to work with "Page2.txt". Once you have that file ready, write/copy the following code, again between the <body> and </body> tags:

 

Congratulations!!! 
You have just successfully created a link from your first page to this page. 

<a href="Page1.html">Click Here To Go Back To Page 1!</a>

Now save this file as "Page2.html" (in the same folder don't forget!!). If it's is not in the same folder, the link will not work as the "pathway" is not correct. -- More on that in the more advanced tutorials.

Don't forget... the idea of these beginners' guides are to get you used to coding HTML! - I will go through many more items with you later on, in the advanced tutorials. - Just be patient and get used to the coding first.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Tue Dec 18, 2007 2:47 pm Post subject:

Now we have done the basic links on web pages (again, more to follow on all of these topics in the advanced tutorials!!), we can move swiftly on to craeting tables.

Tables can be used for many things, and people tended to use them to help with positioning things on their page. The table tags are deprecated and are expected not to be used in a few years time... and considering how time flies by, it's best to use tables for they were really meant for! Tabular data.

Say you wanted to create a table that has a header row (where your titles would go), and 2 data rows (where you will put the information). Smaller tables are exempt from the following advice, but when creating large tables, you will find it a lot easier to draw the table you want (exactly to how many columns and rows you intend to use).
Once you have drawn the table on a piece of paper, you can work out how many columns and rows you will be entering - this will be in the advanced tutorials section in lots of detail! But for now, we'll make just a small table:

The first thing to remember when working with tables, is that you always work from top-left to top-right, through to bottom-left to bottom-right.

Welcome To Our Forum - We hope you enjoy yourself Guest!