Announcement

Collapse
No announcement yet.

HTML 101: pt1 - Starting Out

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

  • HTML 101: pt1 - Starting Out

    Okay, I'm going to start from the ground-up on this, because I think it is important to get things right from the start.

    This tutorial will cover the basic skeleton, or shell, of a HTML script using the xHTML 1.1 standard from the World Web Consortium. You don’t need to read all of that for now – just know that it is there, and can be referred to. Besides, if you ever get problems you can always ask here at HTML Forums 

    Now, there isn’t anything special about the xHTML in terms of what you have to write, except for a couple of rules about capitalisation and such like.

    The biggest reason for using xHTML is that it has become the standard – nearly all modern browsers will accept xHTML and render it. However, as always, there is no guarantee that you will get exactly what you intend on all platforms, but working to a standard minimises cross-platform issues.


    An xHTML Skeleton

    Before I get to waffling any longer, here’s an xHTML skeleton:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
           "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <title></title>
      </head>
    
      <body>
    
      </body>
    </html>
    I always start from the same skeleton throughout a site, and so I keep a html file with just the above code as a template to work from.

    A simple page:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
           "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <title>Page Title</title>
      </head>
    
      <body>
        <div>
          <p>
            All text should be enclosed in a paragraph tag.
          </p>
        </div>
      </body>
    </html>
    Okay, fair enough, but what on Earth does it all mean?


    Declaration, Doctype and Encoding

    Well, the first two lines inform the browser what version of the language you are using – the idea is that the browser will then display your HTML as you intended, by utilising the same standard of code which you have written the page in.

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    This informs the browser of the XML version. The encoding attribute defines the character set you have used to code in. UTF-8 includes most alphabets around the world, including Hebrew, Cyrillic, Japanese, Chinese, and so on, making it the new standard.

    Unfortunately, the most commonly used browser (Internet Explorer v6.x) can wig out when this line is in the page code. This may be fixed in IE7 when we get hold of it but, then again, maybe not.

    It is always a good idea to check your pages in at least two or three different browsers (IE, Mozilla/Firefox and Opera are the top three PC browsers), and if you do find you're having trouble in IE, try taking this line out.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
           "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    The Doctype informs the browser of the ruleset it should follow for rendering you page’s code. Without this, the browser will revert to it’s default ruleset, and you may not get the results you were after.

    More information on Doctypes

    Again, IE could sometimes default to "debug mode" if you have the second line in the Doctype. As before, if you find you are having problems, try without:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
    The HTML Declaration

    Code:
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    It is a good idea to let the browser know what language is being used on the page. Some languages, such as Hebrew, do not flow from left-to-right, and so the browser needs to adapt to the requirements of the language. Also, if, for example, a blind user were using a speaking browser, it would need to know the correct way to pronounce the text being sent with the page.

    Every language has been given a reference code, so there is “en” for English, “de” for German (Deutsch), and so on.


    The Head Section

    Code:
      <head>
        <title>Page Title</title>
      </head>
    The basic purpose of the <head>..</head> section is to contain the information about the page.

    This includes the <title>..</title>, or any other information element, like <script> or <style>. I won’t go into too much detail here, because these elements can take up a long description, and I wouldn’t help you by summarising. There are other tutorials for all of these bits.


    The Body Section

    Code:
      <body>
        <div>
          <p>
            All text should be enclosed in a paragraph tag.
          </p>
        </div>
      </body>
    This is the place where your actual page design is done – all the text, images, tables and forms are put in between these two tags (<body>..</body>).

    The <div> element is used to block out sections of the page, while the <p>..</p> tags are used to contain paragraphs of text.

    There is a lot more that can be used to define position, colour, layout, borders, and so on – but that will take some time.

    More tutorials will be written for styling and content layout.

    Feel free to copy the skeleton for use on your own pages:

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
           "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
      <head>
        <title></title>
      </head>
    
      <body>
    
      </body>
    </html>
    Onwards to Part 2: Simple Page Layout

  • #2
    One question: XHTML 1.1 is still experimental, and when you wrote this article it was very experimental. Shouldn't you just be recommending 1.0 right now?

    Comment


    • #3
      Sorry Horus, I disagree with this tutorial entirely. Using the XML declaration puts IE into Quirk's Mode, and XHTML 1.1 is in experimental state. A simple XHTML skeleton should be more like:

      Code:
      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
      <head>
      
        <title></title>
      
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <meta http-equiv="Content-Language" content="en" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
      
      </head>
      <body>
      
      </body>
      </html>

      Comment


      • #4
        That is true cascading, but IE7-8 should have taken care of that or got it closer to what it should be.
        Have a Script or Snippet you want to share?

        WWW Standards: HTML 4.01,
        HTML 5, CSS2.1, CSS3, XHTML 1.0
        PHP Standards: PHP Standards

        Comment

        Working...
        X