Results 1 to 15 of 15
  1. #1
    Join Date
    Mar 2007
    Location
    Phoenix, AZ, United State
    Posts
    1,525

    HostSentry's Web Development Tutorial

    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.
    drew@slicie.com - Vertical Scaling Servers
    30 Minute Backups - Pay for what you use

  2. #2
    Join Date
    Mar 2007
    Location
    Phoenix, AZ, United State
    Posts
    1,525

    Html 101

    HTML 101
    Tutorial #1


    This tutorial will cover the basics of HTML.

    Including the following "tags":
    • <HTML>
    • <HEAD>
    • <TITLE>
    • <BODY>
    • <FONT>
    • <B>
    • <I>
    • <U>
    • <BR>
    • <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 <font> and </font>

    Here are some examples:
    • <font color="red">This is Red!</font>
    • <font color="#FF0000">This is also red!</font>
    • <font color="blue">This is blue!</font>
    • <font color="#00FF00">This is also blue!</font>
    The Size Element
    The size element refers to the size of the text contained in the FONT tags.

    Here are some examples:
    • <font size="3">This is Size 3!</font>
    • <font size="6">This is Size 6!</font>
    • <font size="1">This is Size 1!</font>
    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!
    • <font size="3" color="red">This is red and size 3!</font>
    • <font color="red" size="3">This is red and size 3 too!</font>
    ... 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.
    1. The B tag makes text bold
    2. The U tag makes text underlined
    3. The I tag makes text italicized
    Here are some examples
    • <b>This is bold</b>
    • <u>This is Underlined</u>
    • <i>This is Italicized!</i>
    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>
    drew@slicie.com - Vertical Scaling Servers
    30 Minute Backups - Pay for what you use

  3. #3
    Join Date
    Jan 2005
    Location
    USA
    Posts
    1,379
    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.

  4. #4
    Join Date
    Mar 2007
    Location
    Phoenix, AZ, United State
    Posts
    1,525
    Quote Originally Posted by Azavia View Post
    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.
    drew@slicie.com - Vertical Scaling Servers
    30 Minute Backups - Pay for what you use

  5. #5
    Join Date
    Jan 2005
    Location
    USA
    Posts
    1,379
    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.

  6. #6
    Join Date
    Dec 2004
    Location
    New York, NY
    Posts
    10,710
    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).

  7. #7
    Join Date
    Apr 2006
    Posts
    562
    Quote Originally Posted by HostSentry View Post
    • <HTML>
    • <HEAD>
    • <TITLE>
    • <BODY>
    • <FONT>
    • <B>
    • <I>
    • <U>
    • <BR>
    • <HR>
    Use these tags instead because most of the ones listed are obsolete:

    • <font> becomes <span>
    • <b> becomes <strong>
    • <i> becomes <em>
    • <u> becomes <span>
    • <br> becomes <br />
    • <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" />

  8. #8
    Join Date
    Mar 2007
    Location
    Phoenix, AZ, United State
    Posts
    1,525
    I completely agree. CSS is the way to go for the majority of that... BUT... try to explain that to a beginner.
    drew@slicie.com - Vertical Scaling Servers
    30 Minute Backups - Pay for what you use

  9. #9
    Join Date
    Apr 2006
    Posts
    562
    Quote Originally Posted by HostSentry View Post
    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?

  10. #10
    Join Date
    Nov 2003
    Location
    Amidst several dimensions
    Posts
    4,324
    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".

  11. #11
    Join Date
    Dec 2004
    Location
    New York, NY
    Posts
    10,710
    Quote Originally Posted by unity100 View Post
    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.

  12. #12
    Quote Originally Posted by HostSentry View Post
    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

  13. #13
    Join Date
    Jul 2002
    Location
    London, United Kingdom
    Posts
    4,455
    Quote Originally Posted by HostSentry View Post
    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.

  14. #14
    Join Date
    Aug 2005
    Posts
    3,587
    Quote Originally Posted by unity100 View Post
    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.

    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)

    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.

  15. #15
    Join Date
    Sep 2004
    Location
    Chennai , India
    Posts
    4,632
    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •