Go Back  HTML Forums - Free Webmaster Forums and Help Forums > WEBSITE DEVELOPMENT > All Around Tutorials
User Name:
Password:
 

Reply
Thread Tools   Display Modes
  View First Unread
 
Old 04-10-2010, 11:05 PM
  #1
cascading-style
Super Deity (Level 18)
 
cascading-style's Avatar
 
Join Date: Dec 2009
Location: The U.S.
Posts: 1,032
iTrader: (0)
cascading-style will become famous soon enough
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.
__________________
Regards,
Cascading-Style

I'm here again... been taking trips across the net, learning a variety of things OTHER than web design. I hope I can be active once more, but I don't know for sure if I'll even remember to come here... heh
cascading-style is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 06-29-2010, 01:13 PM
  #2
Takforce
Adept (Level 5)
 
Join Date: Jun 2010
Posts: 46
iTrader: (0)
Takforce is an unknown quantity at this point
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!
Takforce is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 04-19-2011, 12:50 AM
  #3
regal
Champion (Level 13)
 
regal's Avatar
 
Join Date: Oct 2005
Location: PA
Posts: 246
iTrader: (0)
regal is an unknown quantity at this point
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
__________________
"Ability will enable a man to get to the top, but character will keep him from falling" - Fortune.
regal is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Reply
KEEP TABS
SPONSORS
 
Boxedart

 
 


 
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
  
 
 
 



 
  POSTING RULES
 
 
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Thread Tools
Display Modes

Forum Jump

 

All times are GMT -5. The time now is 01:40 AM.

   

Mascot team created by Drawshop.com | Web Hosting

Powered by vBulletin® Version 3.6.7
Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.

Server Monitoring by ENIACmonitor 0.01
HTMLforums.com © Big Resources, Inc. Web Design by BoxedArt.com
vRewrite 1.5 beta SEOed URLs completed by Tech Help Forum and Chalo Na.