Categories
CSS & HTML Tips

HTML5 adopted by W3C

News for the web development community: The new W3C HTML Working Group has voted to adopt the HTML5 draft specification comprising the Web Apps 1.0 and Web Forms 2.0 specifications developed and copyrighted as far by major browser companies Mozilla Foundation, Apple Inc., and Opera Software ASA under the umbrella of WHAT-WG, or Web Hypertext Application Technology Working Group, which includes Google, the Mozilla Foundation, Opera Software, Apple Inc. as its key contributing groups.

Some official infomation:

To summarise, the W3C will:

  • Adopt the WHAT-WG “HTML 5” (Web Applications 1.0 and Web Forms 2.0) as the current working draft, which will now be subject to review and development by the W3C HTML Working Group
  • Release a version of HTML which will be called “HTML 5”

The group editors will be:

What does this mean for webmasters?

  • The approved path for HTML development has shifted from XHTML 2.0 to HTML 5, indicating that HTML 5 may well not be as XML as XHTML 2.0.
  • The development process of HTML 5 is still in its early stages, and we are unlikely to see HTML 5 published before 2010.

Additional resources for HTML5

  1. WHAT-WG resources: FAQs, blogs, forums and more on HTML5.
  2. HTML5 elements and attributes remapped: including global attributes, event handling attributes and those defined in Web Applications 1.0 as well as Web Forms 2.0.
  3. HTML5, XHTML2, and the Future of the Web talks about HTML5 and XHTML2 as different means to create the future of the Web.
  4. Improve your forms using HTML5 displays the new functionalities to enhance your forms with HTML5.
  5. X/HTML 5 Versus XHTML 2: the competition and differentiation explained.
  6. (X)HTML5 Conformance Checking Service: HTML5 validator.
Categories
CSS & HTML Tips

Create your first web page – Learn XHTML and Make Web pages

Aboslutely!

If you are a total rookie in manipulating web pages, never having the chance to know how web pages work and wanting to learn about it or even trying to spin some out. Listen to this. Everything here you are told, in this naive article, is pure gold. And everything else, other than those on this site, is pure rubbish! Don’t listen to them, they are stupid.

OOOOkay, a good starter. Now let’s get down to work, assuming that you know how to navigate around the web using a computer and what are web pages.

  1. All web pages on this planet are text files, which you can create or read by any normal text editors like Windows Notepad or Notepad++. However, unlike the memo you put down as a plain text file on your computer desktop this morning, a web page needs more standardized text called HTML to tell what’s what.
  2. Open your favorite text editor, type these in just as they appear:<html>
    <head>
    <title>The Donkey Reloaded</title>
    </head>
    <body>
    <h1>The Donkey Reloaded</h1>
    <p>I have a donkey.</p>
    <h2>Donkey lazes</h2>
    <p>He is very lazy.</p>
    <h2>Donkey doodles</h2>
    <p>He once drawed a circle while he was working.</p>
    <h2>Donkey heehaws</h2>
    <p>And he seemed quite satisfied with his masterpiece.</p>
    </body>
    </html>

    Nonononono, stop copying and pasting! Do it yourself and type them onto the screen with your bare hands!
  3. Cool! Save this text file, name it whatever you please, but make sure it has the extension of .html. Now open it in your favorite browser. See, you made it! Your first web page!

So WTH does these weird-looking tags doing in there, like <html> and <p>? Follow me to investigate in them one by one below.

  • <html> : indicates that this is a HTML file, or static web page, and things followed or embraced in it are HTMLized(HTML tagged) content.
  • <head> : makes room for the head section of a HTML file.
  • <body> : makes room for the body section of a HTML file.

Up to here, we know that every web page consists of 2 essential parts, the head part and the body part, which, are indicated respectively by the <head> tag and the <body> tag.

  • <title> : indicates the title of this page that is usually displayed on the caption of the browser window.
  • <h1> : means Header 1, or the 1st header or headline that governs the overall story of the page.
  • <h2> : means Header 2, or the 2nd header that governs part of the overall story of the page.
  • <p> : indicates a paragraph, the main text flow should go in here. Web pages live with content, die with bullshit. And content goes in <p>. So it is pretty much the essence of every web page.
    Browsers render 2 paragraphs wider apart than they do with 2 lines within one paragraph. Using <p> makes your pages pretty.

In fact, there are as much as 4 more headers, namely h3, h4, h5, h6 at your control. Well-structured web pages cannot go without them. Use them wisely, so you are a good web page creator.

More things you may have noticed:

  1. None of the tags have the privilege to go without a corresponding closing tag. E.g. Every <p> has to end with a </p>. That’s right! Every tag in a web page closes in this manner, that is:
    <p>…</p>
    <h4>…</h4>
    wherein ellipsis are the placeholders of text content in between them.
  2. Certain tags can only be placed in certain tags. E.g. <title> tag can only be positioned within the <head> section, and either an error occurs or things don’t go as expected if you put it in the <body> section. It’s the same with <hx> and <p>, they are never supposed to appear in the <head> section.
  3. Tags pile up like they box(seal, or completely envelope) each other. Small boxes are boxed by medium boxes, medium boxes by big boxes, and big boxes by a single gigantic box that is <html>. There’s no such thing as:
    <h1>a header<p>a paragraph</h1> goes.</p>

This is it! You are on your way to becoming a great web designer! Cheers!