HTML Tutorial
Results 1 to 9 of 9

Thread: HTML Tutorial

  1. #1
    Senior Member
    Join Date
    Nov 2001
    Location
    Ireland
    Posts
    735

    HTML Tutorial

    *Another* programming(ish) text I wrote. I might as well share it with the world.


    Easy HTML by Jethro
    -------------------------------

    HTML Programming. I use the term "programming" lightly hre in this case
    because some people would argue that HTML is not a programming
    language, it is a formatting language. This is true, but I don't want
    to call HTML Formatting.

    HTML stands for Hyper-text Markup Language (stupid name, I know) and it
    is the main structure behind all websites. To take a look at what HTML
    looks like before we start, go to any website you want and then (in
    Microsoft Internet Explorer) click View > Source. See all <HTML><HEAD>
    stuff? That, is HTML!

    If you have no knowledge of HTML (which I am assuming you don't) this
    will all look like gibberish. But believe me, it's real easy once you
    get the hang of it.

    In this tutorial I will be taking you through the beginnings of your
    first HTML page.

    *************************************
    Note: A great resource for anyone interested in learning HTML (and web
    design in general) is HTMLGoodies (http://www.htmlgoodies.com). A
    college lecturer called Joe Burns started it up, then Internet.com
    bought it and now a guy called "Curtis" owns it. It's a great resource
    and they also have a fantastic newsletter. Just thought I'd give it a
    quick mention.
    *************************************

    HTML works in <tags>. These are commands inside the "more than" and
    "less than" brackets: > and <. All open <tags> have to be closed: </tags>.
    Of course there are a few exceptions to this rule, which we will encounter.
    Here is a really basic HTML page.

    ************** firstpage.html *******************

    <HTML><HEAD>

    <TITLE>My first HTML webpage</TITLE>
    </HEAD>
    <BODY>
    <H1>Big Writing</H1>
    <H2>Smaller Writing</H2>
    <h3>Smaller Still...</h3>
    <h4>You get the idea!</H4>
    </BODY></HTML>

    **************************************************

    Save that as firstpage.html (.html or .htm are the default extensions for HTML
    pages, original aren't they? ) and open it in your web browser.
    Double-clicking it will probably do that for you.

    Here's what it does:

    +++++++++++++++
    <HTML>...</HTML> - This tag opens a HTML page. You put
    this at the start of every HTML page you make. you don't have to, but
    it's best that you do.
    +++++++++++++++
    <HEAD>...</HEAD> - Notice the way I put the HEAD tag on
    the same line as the HTML tag. I wanted to show you that you an do
    this, but you don't have to. HTML is a very slack language, not like
    one of the regular languages like C++. Inside the <HEAD> and </HEAD>
    tags goes the TITLE, any METAS (we will talk about these later) and a
    few other things which are a bit advanced for this tutorials like CSS
    Stylesheets and JavaScripts...etc
    +++++++++++++++
    - This is a comment. In every language,
    there are comments/remarks and HTML is no exception. The HTML
    interpreter (aka, your browser) will ignore anything put in these
    comments so the only people who can see them are the people who look
    at your source code. Why add them, I hear you ask? You decide.
    +++++++++++++++
    <BODY>...</BODY> - This is the main body of the webpage.
    Most of your stuff goes in here, like your text, your images, links,
    whatever.
    +++++++++++++++
    <h1>...</h1> - This puts the writing really big. H1
    through to H6 are different sizes of text. H1 being the biggest, H6
    being the smallest.
    +++++++++++++++

    ********************************************
    Note: As you can see, HTML is not cAsE-sEnsItIvE either, so <h1> is
    the same as <H1> and <body> is the same as <BodY>!
    Note #2: To tweak a tag you can add attributes to some of them. Attributes
    come in the format <tag attribute="value">. Different tags supports different
    attributes, some of which we will be covering shortly. </closing> tags never
    take
    attributes, even if the <opening> tags do.
    ********************************************

    Here is another example of a basic HTML page. In this example, I will
    be including links, images, background color and tweaking the font.

    ******************** secondpage.html *************************

    <HTML>
    <HEAD>
    <TITLE>Page #2</TITLE>
    </HEAD>
    <BODY BGCOLOR="red">
    <p align=center><font color="white" size=5 face="Verdana">
    Welcome to Page #2</font></P>
    <p align=center>
    <font color="black" size=4 face="Comic Sans MS">Created by Me</font></p>
    <p align=center>
    <font color="blue" size=2 face="Terminal">For you!</font></p>
    <HR>
    [img]image1.jpg[/img]

    [img]image2.jpg[/img]

    <hr>
    <a href="firstpage.html" title="Click it!">Click here to go the First
    Page</a>

    [img]image3.jpg[/img]
    </BODY></HTML>

    ***************************************************************

    Horrible Page isn't it? A lot of new stuff there, *sigh*, here we
    go
    +++++++++++++++++++++++++
    <BODY BGCOLOR="red">...</BODY> - We have already learnt the BODY tag,
    now we learn BGCOLOR, one of BODY's many attributes. This changes the
    background of the webpage to whatever value you give it. I think it's
    pretty easy to spot that substituting "red" for "blue" would result
    in a blue background. Another of BODY's attributes is BACKGROUND.
    This is if you want to use an image as the background. For example:
    <BODY BACKGROUND="image1.jpg"> would use "image1.jpg" as the
    background.
    +++++++++++++++++++++++++
    <p align=center>...</P> - The

    tag starts a new

    aragraph. The
    align attribute aligns the text left, right or center.
    +++++++++++++++++++++++++
    <font color="white" size=5 face="Verdana">...</font> - This changes the
    font. We are using three attributes here: color, size and face.
    "color" changes the color of the font, size changes the size of the
    font face changes the actual "font" of the text. There are only a
    handful of different types of font faces you are meant to use, just
    because a font is installed on your computer, doesn't mean it's
    installed on everyone's though. Here is a list of a few common ones:

    o Times New Roman o Arial
    o Comic Sans MS o Tahoma
    o Fixedsys o Verdana
    +++++++++++++++++++++++++
    ... - This is one of the no-attribute one-letter text-formatting
    tags. There are four of these to my knowledge. Here's a list:

    o ... - This puts the text in bold
    o <U>...</U> - This puts the text in underline
    o ... - This puts the text in italics
    o <S>...</S> - This puts a line ("strike-though")through the text
    +++++++++++++++++++++++++
    <HR> - This puts a HoRizontal line in the webpage to divide it. <HR>
    is one of the exceptions to the </closing> tag rule. It tags no
    closing tag.
    +++++++++++++++++++++++++
    [img]image1.jpg[/img] - This inserts
    an IMaGe. The src attribute specifies the image to include. If the
    image isn't found it will give you the horrible square with the X
    thing in it. The alt attribute is a message which pops up when you
    hover over the image (it appears in a yellow box which disappears
    after you move your cursor away from it). The border attribute
    specifies the border width. 0 is the default. So why add it you say?
    Well, when an image is included in an <A> tag (explained below) it is
    given an ugly blue border which border=0 gets rid of (makes it look
    more crisp, in my opinion).
    +++++++++++++++++++++++++

    - Line break. Another no </closing> tag. This just goes to the
    next line, directly under whatever was before it.
    +++++++++++++++++++++++++
    ... - This is called
    a hyperlink and this is how webpages are linked together, how you
    get from one page to the other. A stands for Anchor (link) and
    href stands for Hypertext REFerence, another stupid name. Basically
    the href attribute tells the browser where to go when you click
    on the link and the title attribute (no-one really uses this much
    but I just decided to add it anyway) acts much like the ALT
    attribute in the IMG tag. Another small pop-up box-messagey
    thing. I don't like it, but maybe you do. You can put anything
    in an Text Here tag. For example you have it
    a text link, like the first example, or you can even put an image
    in between the two tags, like in the second example, or you can
    put a mixture of both.
    ++++++++++++++++++++++++

    And that's that. Now remember, this is a very basic tutorial. I will
    release a more advanced HTML tutorial, covering layers, CSS, frames,
    tables and all that messy stuff.

    Have fun coding,
    Jethro

    ******** EOF **************

  2. #2
    Banned
    Join Date
    Jun 2002
    Posts
    40
    excellent work.. i'm sure this will help many people wanting to learn HTML

  3. #3
    Senior Member
    Join Date
    Feb 2002
    Posts
    856
    Nice tutorial. It reminds me, I need to start working on my site again.
    The site you gave the link for looks good too.
    For the wages of sin is death, but the free gift of God is eternal life in Christ Jesus our Lord.
    (Romans 6:23, WEB)

  4. #4
    Senior Member
    Join Date
    Apr 2002
    Posts
    324
    Good job Jethro!
    \"I may not agree with what you say, but I will defend to the death your right to say it.\"
    Sir Winston Churchill.

  5. #5
    Antionline Quitter..Srsly
    Join Date
    Aug 2001
    Posts
    457
    Nice one ...short and to the point.....maybe u can make a second part to it teaching tables and such
    \"\"A weak mind is like a microscope, which magnifies trifling things but cannot receive great ones.\" G.K. Chesterton, 19th-century English essayist and poet\"

  6. #6
    Jaded Network Admin nebulus200's Avatar
    Join Date
    Jun 2002
    Posts
    1,356
    It is always helpful to have reference sites to help you figure out things, just wanted to pass along a couple that I use for the enjoyment of others.

    http://developer.netscape.com/evange...s/references/, references for HTML, javascript and alot more.

    http://www.htmlgoodies.com/tutors/html_ref.html, a pretty good quicky reference for HTML.
    There is only one constant, one universal, it is the only real truth: causality. Action. Reaction. Cause and effect...There is no escape from it, we are forever slaves to it. Our only hope, our only peace is to understand it, to understand the 'why'. 'Why' is what separates us from them, you from me. 'Why' is the only real social power, without it you are powerless.

    (Merovingian - Matrix Reloaded)

  7. #7
    Antionline Quitter..Srsly
    Join Date
    Aug 2001
    Posts
    457
    another great HTML tutorial can be found at http://darren.halpin.users.btopenwor...tml/index.html
    \"\"A weak mind is like a microscope, which magnifies trifling things but cannot receive great ones.\" G.K. Chesterton, 19th-century English essayist and poet\"

  8. #8
    Member
    Join Date
    Jun 2002
    Posts
    77
    Jethro if you keep making so many good tutorial so fast we wont have time to learn all that stuf, Great tutorial
    BTW your c++ tut was also great.

  9. #9
    Senior Member
    Join Date
    Nov 2001
    Location
    Ireland
    Posts
    735
    Thanks, everybody. Yeah, I think I have to write a tutorial on the more boring parts of HTML, tables, frames...etc.
    Thanks to everyone who replied.

Posting Permissions

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

 Security News

     Patches

       Security Trends

         How-To

           Buying Guides