Announcement

Collapse
No announcement yet.

Learning HTML....Part 2: <!DOCTYPE> and <head> information

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

  • Learning HTML....Part 2: <!DOCTYPE> and <head> information

    DOCTYPES and some basic <head> information

    DOCTYPES

    As mentioned earlier, I told you that the Doctype of an HTML document tells the browser what to expect from the webpage in terms of syntax. There are three kinds of Doctype: Transitional, Strict, and Frameset.

    - Transitional: Allows room for some syntax flaws in the language (whether HTML or XHTML.) This is used by beginning developers still getting a grasp on 100% correct syntax

    - Strict: Allows no room for error in syntax. Although most browsers now are pretty forgiving even with this Doctype, passing validation [W3C validator explained when we get a bit deeper into coding] with Strict is a good idea so that you know your syntax is valid

    - Frameset: Not recommended anymore. Frames are an ancient method that has been long replaced by containers (<div>'s, explained later) and should no longer be used. If you wish to read more about them, you can Google 'em. Since I wasn't a web developer around the time they were used more, I don't know enough about them


    Each Doctype looks like this:

    HTML Transitional:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                          "http://www.w3.org/TR/html4/loose.dtd">
    HTML Strict:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                          "http:/www.w3.org/TR/html4/strict.dtd">
    XHTML Transitional:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    XHTML Strict:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    Some Basic <head> Information

    <title></title> -- The Title of your webpage, this is a short (max should be about 120 characters so that it fits on the browser) is displayed in the web browser bar, just right of the favicon of that browser (for example the Firefox or IE logo.)

    metadata: <meta http-equiv="" content="" /> -- This version of metadata (http-equiv) is used to explain the character set, language, style and script type of the web page

    metadata: <meta name="" content="" /> -- This version of metadata (name) is used primarily for keywords and description of your webpage (SEO [Search Engine Optimization] is a key part in getting your site out there, these two tags are of extreme importance in that]

    <link href="your-style.css" rel="Stylesheet" type="text/css" /> -- Linking to an external stylesheet(s) to format your codes in CSS. Don't know about CSS? It's explained later in this tutorial

    <link href="favicon.ico" rel="Shortcut Icon" /> -- Linking to a Favorite Icon (favicon) .ICO file that is a small 16x16 image that you can use, maybe a company logo, for example. If you go to YouTube.com, it's their white/red icon, you can see it in your browser right next to the title of the webpage

    <script type="text/javascript" src="your-scripts.js"></script> -- Linking to an external JavaScript file

    <script type="text/javascript"></script> -- Adding inline scripts (JavaScript primarily) to your webpage

    <style type="text/css"></style> -- Adding inline styles in CSS to your webpage


    Now that you have some basic <head> information done, let's test out an HTML document, shall we? Open up your text editor (download Notepad++ here and type (or copy/paste) this code into it:

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
                          "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en-US">
    <head>
    
      <title>My Very First HTML Page!</title>
      
      <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
      <meta http-equiv="Content-Language" content="en-US">
      <meta http-equiv="Content-Style-Type" content="text/css">
      <meta http-equiv="Content-Script-Type" content="text/javascript">
      
    </head>
    <body>
    
    </body>
    </html>
    Now, save the file (if you're using Notepad++ just press CTRL + S) and save it as myfirstwebpage.html in any folder you wish. Now, open up your file manager and find the .html file we just made. Double-click it. Your webpage should open in your default web browser. Congratulations! You've made your first webpage. For those who are using Notepad++, you can remember the shortcut keys for each browser. IE users can simply press ctrl+alt+shift+i, Firefox is ctrl+alt+shift+x, Chrome is ctrl+alt+shift+r, and Safari is ctrl+alt+shift+f.

    MAC USERS: Notepad++ is Extremely hard to download and I don't know how to do it. So, in this tutorial, all I can advise you to do is use that TextEdit program (or Dreamweaver, if you have it) to edit your HTML files for now. The Windows OS is more suited for web development, and Macs can tend to confuse you. If you have a Windows computer, use it -- it will make the process much, much simpler.

  • #2
    Thanks for all this information, I really appreciate you explaining this. It has really helped me understand it is what im reading. I'm extremely new to html and css coding so this explained a good portion of what i'm looking at. Keep up the good work!

    Comment


    • #3
      With HTML5 on the way, DOCTYPE has become even easier. All you need to use is:
      <!DOCTYPE html>

      No more needing to remember the other doctype forms

      Comment

      Working...
      X