Announcement

Collapse
No announcement yet.

Learning HTML....Part 1: Startin' Out

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Learning HTML....Part 1: Startin' Out

    Hello fellow HTMLForum'ers [pardon my bad grammar],

    I decided to start out a part-by-part tutorial on web design and HTML/CSS/JavaScript coding. Later I plan to put this on a site of my own (and beat W3Schools, one day) and publish it.

    Startin' Out:


    Understanding HTML

    HTML [HyperText Markup Language] is the language of the web that shows the browser the layout of a website, and where everything goes. It is the "skeleton" of a full web application, and is essential to learn about web design.


    The HTML Acronym Broken Down:

    - HyperText: It is hyper [computer] and it is in text format
    - Markup: The use of tags, for example <html> or <style>, in the language itself
    - Language: It's a language


    A Basic HTML Document:

    A basic HTML document is composed of four things: the Doctype (explained later), the <html> declaration, the <head> section, and the <body> section.

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
    
    </head>
    <body>
    
    </body>
    </html>
    Basic HTML Document -- Broken Down:

    - DOCTYPE: This tells the browser what kind of HTML syntax you are using. Those who are coding in HTML 4.01 Strict syntax format would use that doctype, while those who use XHTML 1.0 Transitional would use that doctype. There are currently 6 "recommended" Doctypes out there, thanks to the W3C and their ending of the famed Browser Wars [don't know it, look it up, it's too hard to explain here.] I'll explain these later

    - <html> declaration: Telling the browser that this is an HTML document and it's ready to play! This is a mandatory tag, and is always placed at the very top of the doc, just below the DOCTYPE

    - <head> declaration: This explains to the browser about the HTML document. For example, you will put the title of the webpage, any CSS styles or scripts, and metadata information in here. It is also a mandatory tag, and must be placed directly below the <html> declaration

    - <body> declaration: The actual living contents of the webpage. This is what is displayed in the browser window


    Now that that's over with...what are the rules of markup?

    There are two general sets of rules for markup in the case of HTML. There are HTML syntax rules [more specifically 4.01] and there are XHTML syntax rules [XHTML explained later on.] One of the bigger things that set HTML and XHTML apart are their syntax rules, as XHTML has adopted the XML [don't worry about this language for now] syntax rules which have proven to be cleaner and easier to debug. In this tutorial you will see me using XHTML.

    HTML rules are as follows:

    -- Elements [tags] must have the "<" and ">" at the beginning and end of the tag

    -- Elements don't have to have an end (i.e. *<p>text* is okay, rather than *<p>text</p>)

    -- Empty elements (such as br or img) do not need to self-close themselves, like in XHTML [explained in the XHTML syntax rules]

    -- Attributes [extra details about an element] don't need to have quotes, but they can [for example, *<img width=50* is okay, rather than *<img width="50"*)

    -- Must have the 3 standard tags (excluding the doctype)


    XHTML Rules Are As Follows:

    -- Non-Empty Elements must have a closing tag (*<p>text</p>* only)

    -- Attributes are required to be in quotations

    -- Empty Elements need to self-close (*<img />*, not *<img>*)

    -- Must have ALL 4 standard tags (with a XHTML doctype only)



    In the next chapter, I'll explain the <!DOCTYPE> and some basic <head> information. Thanks for reading!

  • #2
    Good tutorial - I just want to pick up on one thing....

    Originally posted by cascading-style View Post
    - HyperText: It is hyper [computer] and it is in text format
    Not totally correct. Hyper in any sense means heightened - it doesn't mean that its computer text, that would, ultimately, be programming languages -> assembly code -> 1s and 0s.

    So it actually means "heightened" text - what does this mean?

    Well, go back to when it was invented. Tims Berners Lee wanted a way to share information across a network. The best way to do this (so that everybody can read it regardless of OS) is with text. However reading plain text is difficult and its hard to infer meaning from it, even by a human reading it let alone a computer!

    As a result one of his first design goals of HTML was to infer meaning in the text. The way this could be achieved was to "mark" the text (hence markup) with appropriate symbols. Hence we have P (for paragraph), H1 (for first level heading), TR (for table row), TD (for table data) and so on.

    This way a computer could parse (read) the text and order the text in priority and emphasis (thats why you're recommended to use <strong> rather than <b> and <em> rather than <i>).

    This is all part of what is known as HyperMedia and it is Tim's hope that the entire web can be based like this as it would mean that searching the Internet would become much more efficient. Its his hope that this extends to video, audio and other media (as per his original design - so far we've only done a third).

    I hope this clarifies the issue!

    Comment


    • #3
      Your the first html tutorial i've seen that actually included the meaning of "HTML", i already knew it, but i thought that was cool.

      Good guide btw,

      Comment


      • #4
        Doesn't really matter at all. I find it useless to include an explanation of the word hyper in this context into an HTML tutorial.

        Comment


        • #5
          Most books do just to clarify. Being as this is "Learning HTML Part 1", it's aimed towards beginners. Some beginners may not know what HTML even stands for but would like to. So, eh, it does matter.

          Comment

          Working...
          X