HostSentry's Web Development Tutorial

HostSentry · #1 08-01-2007, 04:56 PM

I will do my best to cover everything most people will need to know about web development. This is the order I plan to cover things. HTML, CSS, Javascript, Perl, AJAX, PHP, CF, then ActionScript.

I'll probably have time to write one tutorial a day, so maybe in a few months this will be particularly useful. I will use this post in cooperation with the moderators to link to the location in the thread of the tutorials.

HostSentry · #2 08-01-2007, 05:47 PM

HTML 101
Tutorial #1

This tutorial will cover the basics of HTML.

Including the following "tags":

<HTML>
<HEAD>
<TITLE>
<BODY>
<HR>

=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~=~

Introduction to HTML
HTML (Hyper Text Markup Language) is the most basic step to learning how to develop web pages. Every site you have ever gone to has utilized HTML in one way or another, so it is where we will start this series of tutorials.

For the sake of these tutorials, HTML will be referred to as a client-side language. This means that HTML is executed on the client computer. This is different from a server-side language, because a server-side language is executed on the server.

It is very important to note that a properly functioning HTML page cannot be "encoded" or "encrypted". As just mentioned, HTML is processed on the client machine. So in some way or another if the page functions properly, the browser must be able to understand what it sees.

Creating an HTML document.
You need to open up a text editor. Notepad will do the trick. Once you are in your text editor, save your blank file as something ending with the .html or .htm extension. mysite.html will work fine!

To see your blank site, open up the file with your web browser.

What are Tags?
For these tutorials, tags refer to the text inside found starting the lesser than and greater than signs. <HTML>, is an example of a tag. For these tutorials, the following <A href="hi.html">, is referred to as an A tag. This is because the "word" (or letter in this case) which starts the tag is an "A". When people refer to a BODY tag, they mean anything inside of a tag that starts with "BODY".

The <HTML> Tag
As previously mentioned, <HTML> is an HTML tag. This tag is necessary for proper HTML processing. While your page may execute fine without using the <HTML> tag, it is important to follow proper syntax.

The HTML tag starts the HTML document. So when you start learning HTML make sure the first line of your page has <HTML> written at the top.

It is important to note that HTML is not case-sensitive. <html> will work just as well as <HTML>.

The <HEAD> Tag
This tag is very similar in nature to the HTML tag. It is used to help place things in appropriate locations. Like the HTML tag, it's importance is not always noticed. The HEAD tag should always follow the HTML tag when possible.

The <TITLE> Tag
This tag controls the content of the Title Bar on your browser. Your browser right now will probably say something starting with "Web Hosting Talk". Whatever you place after the TITLE tag will be displayed in the title bar accordingly.

Closing a Tag
All tags need to be closed. There are very few exceptions to this rule. The TITLE, HEAD, and HTML tag's all need to be closed.

A tag is closed by adding a / before the tag's name.
</HTML>

</TITLE>

</HEAD>

The TITLE tag must be closed directly after the information you want placed in your title bar. The HEAD tag must be closed before the next tag we will discuss (the BODY tag). The HTML tag is closed at the end of the page.

Let's Try It!
Using your previously created blank page, paste the following code into your text editor. Save the file, then refresh it in your browser!

Code:

<HTML>
<HEAD>
<TITLE>WHT RULES!</TITLE>
</HEAD>
</HTML>

You will see that the title bar clearly states "WHT RULES!".

The BODY Tag
The BODY tag is used in a similar fashion to the HEAD tag. It is used basically as a place holder. It can also be used to change the way the "body" of the page appears.

Tag Elements
For these tutorials, tag elements will refer to the information inside the tag, excluding it's name. Here is an example:
<body bgcolor="green">

In this particular example, the tag element "bgcolor" is placed inside of the BODY tag.

The Bgcolor Element
As shown previously, the bgcolor tag element will set the "background color" to whatever you provide after the equal sign. It is common for programming languages to put words in quotations. That is why we used "green".

There are a variety of built-in colors. red,blue,green,orange,pink,lightblue,black,white ... etc.
What are Hex Colors?
Hex colors refer to very specific colors. Unlike simply putting bgcolor="red", we can write it like this:
bgcolor="#FF0000" .

Hex colors work very simply like this. The first 2 values refer to the color red, the second two refer to the color green, and the last to refer to the color blue. So think of it like the amount of each color is determined by the value assigned to its color places.

RRGGBB (RGB!)

The Hex color system works on base 16, not base 10. This means you do not stop counting at 10, but rather it substitutes letters for numbers. It works like this:

0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F

That list is sorted in ascending order (smaller to larger). So 5 is half as "strong" as A (10).

So to get as much red as possible, and no blue or green... we would use "FF0000".

By using google to search for "hex colors", you can see a variety of pages offering colors that you may find useful!

Dark blue could be "000050". To make a gray or white color, keep all of the colors the same strength. "909090" is an example of that.

Like the rest of the tags. The BODY tag must be closed. We close the BODY tag right before the HTML tag in most cases.

The FONT Tag
The FONT Tag is used to alter the settings of the fonts which will be displayed after the start of the tag, and before it is closed. For instance, the words "WHT Rocks" are affected by the tag around them:

Code:

<font>WHT Rocks</font>

This particular use of the font tag will do nothing, so we need to add some tag elements.

The Color Element
The color element refers to the color which will be assigned to the text contained between the start and end of the FONT tags. IE: anything between and 

Here are some examples:
This is Red!

This is also red!

This is blue!

This is also blue!

The Size Element
The size element refers to the size of the text contained in the FONT tags.

Here are some examples:
This is Size 3!

This is Size 6!

This is Size 1!

You can Mix it Up!
The order the tag elements appear in does not matter! You can have as many tag elements as you need in one tag!
This is red and size 3!

This is red and size 3 too!

... both work just the same!

The B, U, and I Tags
These tags are very simple. Similar to the way the FONT tag works, they wrap around the text you want to affect.

The B tag makes text bold
The U tag makes text underlined
The I tag makes text italicized

Here are some examples

This is bold
This is Underlined
This is Italicized!

You can place text-related tags any where!
Try this code:

Code:

<HTML>
<HEAD>
<TITLE>WHT!</title>
</HEAD>
<BODY>
<font color="#00FF00" size=7><b>Web <u>Hosting</u> <i>Talk</i></font>
<font color="#FF0000" size=2>RULES!!!</b></font>
</BODY>
</HTML>

The BR Tag
The BR tag is a rather simple tag. It lets you go down a line, or create a "line-break". Add it anywhere you want, and your text will move down a line! You can add two to make it go down two lines!

The HR Tag
The HR Tag will go down a line, then add a line horizontally across the screen, and then go down another line.

Lets Give it All A Try!
Copy the code below into your text editor and save the file. Then view it in your browser!

Code:

<HTML>
<HEAD>
<TITLE>WHT!</title>
</HEAD>
<BODY>
<font color="#FF8000" size=7><b>Web <u>Hosting</u> <i>Talk</i></font><br><hr>
<font color="#FF0000" size=6>RULES!!!</b></font>
<hr>
</BODY>
</HTML>

ChristsLittleFlock · #3 08-01-2007, 09:52 PM

Not a bad tutorial, but I just have a few gripes with it:

Every HTML document should start with a doctype, not with an html tag.
Honestly, promoting the use of font tags? *gets out the stake*, foreshame... That's all we need to keep standards outdated.

HostSentry · #4 08-01-2007, 09:57 PM

Quote:

Originally Posted by Azavia

Not a bad tutorial, but I just have a few gripes with it:

Every HTML document should start with a doctype, not with an html tag.
Honestly, promoting the use of font tags? *gets out the stake*, foreshame... That's all we need to keep standards outdated.

For the beginner I don't feel that is the case.
CSS comes later.

ChristsLittleFlock · #5 08-01-2007, 10:03 PM

I guess that's why I don't write beginner tutorials. I feel if someone is introduced to bad habbits from the start, it's going to be hard to get them to stop using them. Unfortunately most bad habbits are the easiest to introduce and thus are what most tutorials use.

No one said it had to be easy, though.

Just my 2 pesos is all.

**layer0** · #6 08-01-2007, 11:03 PM

Honestly, I would say that CSS is extremely easy and can be taught as a simple replacement for the font tags (and much more depreciated stuff).

Fixago · #7 08-01-2007, 11:20 PM

Quote:

Originally Posted by HostSentry

<HTML>
<HEAD>
<TITLE>
<BODY>
<HR>

Use these tags instead because most of the ones listed are obsolete:

 becomes 
 becomes 
 becomes 
 becomes 
  becomes  
<hr> becomes <hr />

And honestly, for font and underline, you wouldn't use a span tag, you would use CSS to determine the style of something. But if you had to adjust the style inline, that would be the appropriate tag semantically the wrap around something.

And all pages should include a Doctype and Character Set:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-us" dir="ltr">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

HostSentry · #8 08-06-2007, 03:01 PM

I completely agree. CSS is the way to go for the majority of that... BUT... try to explain that to a beginner.

Fixago · #9 08-06-2007, 11:32 PM

Quote:

Originally Posted by HostSentry

I completely agree. CSS is the way to go for the majority of that... BUT... try to explain that to a beginner.

Yeah, I understand that, but what angle are you looking at this from? Someone who was brought up on tables and HTML and then learned CSS, or someone who was brought up on CSS and HTML?

HTML and tables is still hard when you start, why not get them off to the right foot?

unity100 · #10 10-16-2007, 11:24 AM

CSSing is way too overhyped. there are people who even think doing an entire page layout with only css is something good and hip.

the truth is doing as such not only takes around same or more time with doing it in alternate ways like using tables and divs, but also introduces a complexity that causes mayhem in the whole page when you just move one tiny piece around.

zealotry is not good in web development. one needs to go middle route, inbetween.

and i have no idea why people find tables "hard".

**layer0** · #11 10-16-2007, 03:54 PM

Quote:

Originally Posted by unity100

CSSing is way too overhyped. there are people who even think doing an entire page layout with only css is something good and hip.

the truth is doing as such not only takes around same or more time with doing it in alternate ways like using tables and divs, but also introduces a complexity that causes mayhem in the whole page when you just move one tiny piece around.

zealotry is not good in web development. one needs to go middle route, inbetween.

and i have no idea why people find tables "hard".

A well coded CSS page will inherently load MUCH faster than the equivalent in tables.

I'm in experienced coder with both "methods" and I do find CSS to be much faster coding wise as well.

triXtyle · #12 10-29-2007, 10:50 AM

Quote:

Originally Posted by HostSentry

I completely agree. CSS is the way to go for the majority of that... BUT... try to explain that to a beginner.

I don`t know why a beginner will start learning html with notepad instead of something helpful and explainable like Dreamwaver

(my oppinion)

cheers

**astutiumRob** · #13 11-25-2007, 10:42 AM

Quote:

Originally Posted by HostSentry

The B, U, and I Tags
These tags are very simple

And *REALLY* shouldn't be used, and to even put them in a modern tutorial ...
If you must include style information in the HTML page, at least use the correct tags, strong, em etc.

JayNL · #14 11-27-2007, 08:31 AM

Quote:

Originally Posted by unity100

CSSing is way too overhyped. there are people who even think doing an entire page layout with only css is something good and hip.

It has nothing to with hip, just with web standard and regulations, page load times and a tad professionalism.

Quote:

the truth is doing as such not only takes around same or more time with doing it in alternate ways like using tables and divs, but also introduces a complexity that causes mayhem in the whole page when you just move one tiny piece around.

Then you're not experienced enough. Valid, semantic HTML looks clean, easy to read and understand and uses its tags were they are supposed to be used (hence, semantics)

Quote:

zealotry is not good in web development. one needs to go middle route, inbetween.
and i have no idea why people find tables "hard".

Tables are not hard, and just as good a part of the HTM language as any other tag/object. Its just that tables are used for displaying tabular data, not for displaying whole sites.

All your comments above are a result of inexperience. If you'd coded enough of those layouts, you'll know that semantic HTML is the (only) way to go.

Biju · #15 12-25-2007, 12:11 PM

Quote:

and i have no idea why people find tables "hard".

Its not hard, but CSS makes it much easier and more SE friendly. I think people go for looks and easy custamization.

HostSentry's Web Development Tutorial

Sponsored Links

Advertise Here

Internet Services

Web Development

Digital Marketing

Consumer Tech