HTML basics

[Merlin33069]

Tutorial 1 - HTML Begginings (An intro to html)
Tutorial 2 - Multiple lines (How to put more than one line in a document)
Tutorial 3 - Seeing colors (Font sizes and colors)
Tutorial 4 - Where is it? (A guide to HTML navigation)
Tutorial 5 - Embeding Images (How to add images to a site)
Tutorial 6 - Links and Headers (A guide to Page Headers and Links to other pages)
Tutorial 7 - Comments and the horizontal line
Tutorial 8 - Text Formatting (A list of formatting options for text)
Tutorial 9 - Intro to Tables

here, i can post the first tutorial... how it would have looked if i was going to post it on the forum...




Please do not reply to this thread directly, it would be too dificult to sift through the replies to try and find the tutorial, instead, reply to the thread called (Replies to HTML Turorial Go here)

This makes it easier on all of us


Tutorial 1

Before we start the tutorial i would like to tell you that all the codes in this tutorial, can be made without special editing software, all you need is notepad (or another text editor) and a web browser, when you write the code, save it with the extension of .htm or .html (same thing) and click it, it should open in a web browser, if you right click it you should be given either an edit option, or an open with option, which you can use to open it again with notepad...



As with most Tutorials, we will start with the Infamous "Hello World" Experiment

open a text document useing Notepad or any other Editor.

Type:

Hello World

And then click the file button, and press save as, click the drop down menu that says:

text documents (.txt)

and click on  All files (*.*)

Then in the name type:

My first webpage.htm

note the .htm on the end of the file, this lets the computer know what type of file it is, if we would have left the drop down box as (.txt) the file would have came out like .htm.txt and the computer would have thought it was a txt file.

now, if you double click on that file, a web browser should open, displaying

Hello World

for you to see.

This is the end of the Very basics to Html
Next up is a multi line file

[Merlin33069]

Tutorial 2
TOP (Contents)

Notice, i had to use code boxes, as the code in the tutorial was editing my post  

Ok, so now that we have a file that says:

Hello World

what if we wanted it to say

Hello
World

How would we get it to say that?

try typing it on two lines

Hello
World

and see what happens

the page shouldnt change at all, it should be just as if it were on one line.

How do we create a page with multiple lines? thats easy

Code:

Hello <br>
World

Code:

The <br> tag is known as the Break tag, it basically tells the browser
to break the line, the line ends here, start a new one...

so as long as we remember to put a
 tag at the end of each line, we can have a page as long as we want.

if you make a loong line, without any
 tags, then the line will cause the page to become wider, and will mean the user has to use the scroll bar at the bottom of the screen to read it all

so to fix this we use the Paragragh tag, which is <p> this tells the browser that the followin information should be as wide as possible and no wider, so if we wanted to put it into a table, it would only make it as wide as the table is

Code:

<p>
Welcome to My website My name
is Ryan and i have made this
website for the sole purpose
of entertainment
</P>

Code:

Notice the </p> tag at the end of the paragraph? this tells
 the browser that its at the end of the Paragraph, this is used for any tags that
require more than one line of code.

This is the end of tutorial two

[Merlin33069]

Tutorial 3
TOP (Contents)

In this turorial we will be adding color to our simple web page, a nice simple color should do

Mine will be green, you can choose any color, even light blue or something

So to add color to our paragraph that we had in tutorial two, all we need to add is a Font tag, this tag can be used for the font itself, the color the size and a few other properties of the text contained within.

<font Color="Green">
<p>
Welcome to My website My name
is Ryan and i have made this
website for the sole purpose
of entertainment
</P>
</font>

Ok, so in the Font tag there is a Color="Green" modifier, which tells the browser, the text between the font tags is to be green

the reason there are quotes around the color, is because you can have a multi word color, and even hex colors, so you could do

<font color="Light Blue">
<p>
Welcome to My website My name
is Ryan and i have made this
website for the sole purpose
of entertainment
</P>
</font>

This allows you more control over your color... If you want an exact color and you dont know the name of it, you can also use hex color codes. hex color codes is a kind of numbering system for colors. you could do something like:

<font color="#E42217">
<p>
Welcome to My website My name
is Ryan and i have made this
website for the sole purpose
of entertainment
</P>
</font>

The # symbol tells the browser its a color code, and not a color, you can get color codes at many sites, here is one:

http://www.computerhope.com/htmcolor.htm

Notice also that we are using the </font> tag to tell the computer where to stop using this font color.

We can change the size by using this tag

<font size="5px">
<p>
Welcome to My website My name
is Ryan and i have made this
website for the sole purpose
of entertainment
</P>
</font>

which will make the font size 5 pixels tall

you can also combine them like this:

<font color="blue" size="20px">
<p>
Welcome to My website My name
is Ryan and i have made this
website for the sole purpose
of entertainment
</P>
</font>

end tutorial 3

[Merlin33069]

Tutorial 4

Ok, the next tutorial deals with the placement of items on the website, so lets say for instance you owned the website:

www.Tutorials.com

and you had an image in:

www.tutorials.com/images/img1.jpg

.jpg is the file extension telling the computer its an image, most of you already know that

so if we had a page in the root directory (www.tutorials.com/index.htm) for example, and we wanted to use that picture, we couldnt just type

img1.jpg, because the server hosting the website would look inside the same folder when it looks for the image, when its really on the webserver

in a folder called images for easier storage and navigation

in html you can use either relative or static paths to a file, for example, to get to the image, in the html you could type either:

images/img1.jpg

OR

http://www.tutorials.com/images/img1.jpg

where images would be the folder the server would look in for the image

Ok, so now that we know how to go forward and look for a file, how do we go backward? meaning, if a page in the Documents folder:

www.tutorials.com/documents/documents1.htm

for example, how could it get to the images folder? well, for each folder we would have to go back, we silply enter two dots (..)

this tells the server to go "up" one directory to find the file, if we have more than one set of dots, it will go up that many directories, so in

this case, we would type:

../images/img1.jpg

if we had a file in a more secluded location, such as:

www.tutorials.com/documents/secret/topsecret/sercretdocument.jpg

then we would have to count how many times it would have to go "up" to get to the root (www.tutorials.com), and thats how many set of dots we

need, in this case we need 3. so our code would now look a little like this:

../../../images/img1.jpg

if this doesnt sound very appealing to you, you can always use the static route to it, which would be to put the path in place of what we already

have, so our code would then just be:

http://www.tutorials.com/images/img1.jpg

end tutorial 4

[Merlin33069]

Tutorial 5

ok, now that we know how to find an image, we will work on adding them to the site

I think we will continue with the assumption that you owne the website:

www.Tutorials.com

you can add an image in html very easily, use the tag <img> to do so

This is not done in the same way that BBC code would be done, you have to do it like this:

Code:

<img SRC="http://www.Tutorials.com/images/img1.jpg">

This will embed the picture into the website, note that i do not know if this image exists....

if you want to work with an actual image in your html, place an image in the same folder as your html document, and use this code instead:

Code:

<img src="imagename.bmp">

where "imagename.bmp" is the name AND extension of the image you are adding to your page

so now that we know how to add an image to our site, how do we edit this image, we can either set the size of the image, or add a border, and a few other things, here is an example, all of the tags here, except src, can be removed, so you can have it to your liking

Code:

<img src="http://www.Tutorials.com/images/img1.jpg" Border="1" Width="100" height="100">

Explained:

Src= Source, the place to obtain the image from, it can be an internet site, if you put the address in, or a relative / static path (see previous turorial)

Border= Lets you add a border around your picture, default is 0

Width= The width of the picture
Height= The Height of the picture

ok there is one more we will discuss, it is simple in itself, this is know as the altenate tag, this will tell the browser what to display if one of two things happens, 1 the user doesnt want to display an image, or 2 the user hovers the mouse over the image, example:

Code:

<img src="imagename.bmp" alt="Im an image">

end tutorial 5

[Merlin33069]

Tutorial 6

Ok, this tutorial will be a little different, we are going to do links, and headings

There are 6 (six) different sizes of headings, and a heading must be surrounded by its tags, the six sizes are:

<h1>
<h2>
<h3>
<h4>
<h5>
<h6>

so to make a heading you would type this:

<h1>This is a Heading</h1>

Note that we must close off the heading tag using </h1>






In a way links work the same as images, and you can also use tutorial 3 in links (placement of items in a webserver) Meaning you can use relative

or static paths

so a link to your fictional website www.tutorials.com, would look something like this:

Code:

<a href="http://www.tutorials.com">Click Me!</a>

Note three things here, one is that this does not display the link on the website, only the words "Click Me!"

The text would display as a *normally* blue underlined link.

the second thing to note is that it uses the same format as the img tag, in that we need <a href="">

which tells the computer that its a link, and the link points here...

the third thing to notice is that you have to close the link with

Code:

</a>

otherwise we end up with the rest of the page as one big link




Before i go into the next part i want to say that "white space" meaning any area in the html that has no words, no commands or anything, is

ignored by the server, so this:

Code:

<a href="http://www.tutorials.com">Click Me!</a>

Is the same as:

Code:

<a href="http://www.tutorials.com">
Click Me!
</a>

the reason being is that we didnt put a break tag (tutorial two)


Which brings us to the next part of this tutorial, making an image a link, for the sake of you being able to read it, im going to do this on

multiple lines, so its not all mashed up and funky looking:

Code:

<a href="http://www.tutorials.com">

<img src="http://www.tutorials.com/images/img1.jpg">

</a>

all we had to do was replace "click me!" with the tag for the image

end tutorial 6
next we will do a horizontal line and comments

(a comment would be anything you want to add to a webpage *including code* that you dont want displayed in the site)

[Merlin33069]

Tutorial 7

Short tutorial:


to make a horizontal line:

 the command is simple:

Code:

<hr>

to add a comment to a webpage:

<!--- This text would not be displayed on a site --->


end tutorial 7

next will be text modifiers
(bold italic etc)

[Merlin33069]

Tutorial 8

The following tags MUST have BOTH opening and closing tags, for example, and the text goes between them!

this is a list of text formatting tags, each one will format text in a specific way, if there is one you dont understand, play around with it a

little bit...

Code:

<b>
-bold text

<big>
-big text

<em>
-emphasized text

<i>
-italic text

<small>
-small text

<strong>
-strong text

<sub>
-subscripted text

<sup>
-superscripted text

<ins>
-inserted text

<del>
-deleted text

<code>  
-computer code text

<kbd>
-keyboard text

<samp>
-sample computer code

<tt>
-teletype text

<var>
-a variable

<pre>
-preformatted text

<abbr>
-an abbreviation

<acronym>
-an acronym

<address>
-an address element

<bdo>
-the text direction

<blockquote>
-a long quotation

<q>
-a short quotation

<cite>
-a citation

<dfn>
-a definition term

end tutorial 8

This is the last one for a while, the next will be tables

[Merlin33069]

Tutorial 9

Welcome to the next tutorial, this tutorial is on HTML tables, this will be a quick tutorial




NOTE for this turorial, i am replacing all < and > with { and  } repaectively, this will alieviate the need to use

the code tags, and should make the tutorial easier to read, if you wish to use the code, remember that you

replace all the { with < and all the } with >

got it?



I would like to start off with the non breaking space.

Because you can have as much "white space" as described abive, in an html document, any place where there

is more than one 'space', meaning a space bar key, lol, so if you wanted to use more than one space, you

would have to use a non breaking space:

Code:

$nbsp;

yes, all six letters make up the non breaking space, another use of this space, it will NOT wrap in a page, and

therefor is useful to keep alignments and such




Ok, the reason for having a short tutorial on non breaking spaces is because an empty cell in a table (a cell is

ONE block, so for instance, block 3,4 third over fourth down), IF the table has borders, it does not display the

empty cell very well, so by adding a non breaking space to any enmpty cell, this problem is fixed, as it is no

longer empty, (an empty cell will not display borders, as for why, i have no clue)

To start the creation of a table, you use the table tag:   {table}, this tells the browser that the table is

starting, you can add several modifiers to this tag, such as width and border. explained now

{table border="1" width="50%"}

The border tells the browser how many pixels wide the boder should be, you can use 0 (zero) to not display

table borders

The width can either be in % or PX the percentage tells the browser that the table should be 50% as wide as

the open browser window, where as the PX tells the browser it should be 50 pixels wide, no matter how wide

the window is, this can cause the table to go off the side of the screen in some instances




So now that we can tell the browser we have a table, how do we put data in it?

The main pieces of a table, are the Table Rows, and table Data, {tr} and {td} respectively

{tr} Tells the browser to add a new row

{td} tells the browser to add a new column in that row

Note that it is always good practice to close these tags after the data



So a simple table would look like this:

{table}
{tr}

{td}
Ryan
{/td}

{td}
Timmons
{/td}

{/tr}
{tr}

{td}
Mike
{/td}

{td}
Osborne
{/td}

{/tr}
{/table}

Which would display like:

Ryan	Timmons
Mike	Osborne

we can add a border around a table by changing the table tag like this:

{table border="1"} where 1 is the width of the table


ok, so, now lets show this without all the whitespace, meaning, lets rewrite this code so that it takes up as litle

room as possible:


{table}{tr}{td}
Ryan
{/td}{td}
Timmons
{/td}{/tr}{tr}{td}
Mike
{/td}{td}
Osborne
{/td}{/tr}{/table}

This is about as small as we can make the code, and still keep it somewhat organized, it will display the same.

Ok, so now we can make a table, you can put pretty much any other html inside the table, including other

tables (that looks odd)

so for instance, we can put a link in:


{table}{tr}{td}
{a href="http://www.ryan.com"}Ryan{/a}
{/td}{td}
Timmons
{/td}{/tr}{tr}{td}
{a href="http://www.mike.com"}Mike{/a}
{/td}{td}
Osborne
{/td}{/tr}{/table}


you can add font, links, and anything else you really wish to add

Dont forget to close table tags, as seen above, Also remember that you do NOT need to include additions to

tags in the closing table tag..... example

YOU DO NOT NEED TO DO THIS:


{table border="0"}{tr}{td}
{a href="http://www.ryan.com"}Ryan{/a}
{/td}{td}
Timmons
{/td}{/tr}{tr}{td}
{a href="http://www.mike.com"}Mike{/a}
{/td}{td}
Osborne
{/td}{/tr}{/table border="0"}


the {/table border="0"} is just a waste of time, unless you copy and paste tags, then dont waste the time to

take it out, either way, how you organize code is up to you.





End Intro to Tables


Next Will be code organization

[45rod]

Nice tutorial....thanks helps with the basic knowledge....I use html but can't play with it.

[Merlin33069]

why cant you play with it?

is there a reason or you just dont have the time?

[45rod]

No! I have time it is just that I don't understand all the html codes properly

[Merlin33069]

Ah, I think this is the place to ask for some assistance then. even if im not around to help or dont know the answer im sure someone can come up with a good one, if your looking to learn, the basics are here, i do want to rewrite these tutorials soon though.....