View and vote on the article here: HEAD Commands: a Quick Guide
HEAD Commands: a Quick Guide| Category | | | Summary | | | Body | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]
<html xmlns="http://www.w3.org/1999/xhtml]
<head>
<title><HEAD> Commands: a Quick Guide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="head,commands,no,pr0n]
<meta name="description" content="Quick Guide about HTML Head commands, no pr0n!]
<meta name="author" content="purefreak]
<meta name="copyright" content="Copyright © 2005 Everybody>
</head>
<body>
<table width="580" border="0" bgcolor="#FFFFCC]
<style type="text/css]
<!--
.style1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
-->
</style>
<tr>
<td>
<strong>[/url]<HEAD> Commands: </strong>a Quick Guide
by purefreak
<hr />
I'm not sure how many people still code their websites in "raw" HTML, but seeing as we actually have a section for it here in the CAU Knowledge Bank, I decided to write a few tutorials on the subject. So here's a bottoms up to old school.
<strong>.:Index</strong>
- Basic Head
- The <Head> command does...
- List of Head Elements
- Title
- Meta
- Authors
- Keywords
- Description
- Copyrite
- http-equiv
- Base
- Isindex
- Link
- Object
- Style
- Conclusion
<strong>.:Basic Head</strong>
Head commands are not a escential part of a page, seeing as the page should work just fine without it, but it is very handy. <table width="580" border="0" bgcolor="#FFFFCC]
<tr>
<td height="82]<p class="style1]<html>
<body>
This is a stupid example
</body>
</html> </td>
</tr>
</table> </td>
</tr>
The output for this will simply be: "This is a stupid example". Obviously.
So it works, but chances are nobody's really going to pick up on your site when Googling for "randomness", so lets fix that right up.
.:top
<strong>.:The HEAD command</strong> mainly <strong>does</strong> 4 things<strong>: </strong>
- <strong>Contains information regarding the page (document)</strong>
The information contained within your Head section doesn't appear in a browser window when the page is viewed. The data is mainly used to assist search engines and simular services with page descriptions, base domains and some other crap not really taken as display content.
- <strong>Set the browser up to correctly handle the page</strong>
Like defining links to external pages and calling external programs or plugins.
- Divide your page into 2 distinct sections or parts
err.. The HEAD part and the BODY part.
- <strong>Gets loaded first</strong>
So what ever you put in here, will get loaded first by the browser. Helpfull when running Javascripts ect.
.:top
<strong>.:List of Head Elements</strong> that can be used with todays XHTML and HTML 4 standards:
- Title
- Meta
- Base
- Isindex
- Link
- Object
- Script
- Style
I'll go through some of these next.
.:top
<strong>.:Title</strong>
This is almost always present in webpages. The <title> tags, defines the page (document)'s Title, which is normally displayed in the Browser application's window titlebar. In the old days you could use multiple <title> tags, allowing for simulated animation in the title bar ect. But yeah, those were the old days... *sobs*
Example:
<table width="580" border="0" bgcolor="#FFFFCC]
<tr>
<td height="149]<p class="style1]<html>
<strong><head></strong>
<strong><title>&lt;</strong>HEAD<strong>&gt; </strong>Commands: a Quick Guide<strong></title></strong>
<strong></head></strong>
<p class="style1] <body>
This is a slightly less stupid example
</body>
</html></td>
</tr>
</table>
<Samp>*note* the "<strong>&lt;</strong>" and "<strong>&gt;</strong>" elements allows us to print "<" and ">" without it being read as part of the html code.
</Samp>
.:top
<strong>.:Meta</strong>
This is where hidden information about our page (document) is added. Browsers can retrieve header information from these and Search engines can use the information conveyed by the meta elements for categorizing and indexing documents in their databasis.
Multiple Meta elements can be included in the Head, but I'm only going to mention those that are not frwoned upon by the W3C and XHTML standards.
<strong>="Author"</strong>
Defines the author of the page (document).
<strong>="Keywords"</strong>
This gives search engines some muffin crud to work with. When ever you search for terms listed within this element, you should find your page somewhere in the results. Well... suposedly.
<strong>="description"</strong>
Defines a description to your page, this is some times listed with search results as a short summary of your page.
<strong>="copyright"</strong>
Provides Copyright information to search engines ect.
<strong>http-equiv=""</strong>
When ever a client gets sent a page (document) with HTTP protocol, numerous HTTP header fields gets sent with it. This primarily informs the client about the content that is being sent. You can add some HTTP headers with the http-equiv element. Browsers will treat the information in your http-equiv elements as if they were coming directly from the server.
Example of meta tags in use:
<table width="580" border="0" bgcolor="#FFFFCC]
<tr>
<td height="302]<p class="style1]<html>
<strong><head></strong>
<p class="style1] <strong><title></strong>&lt;HEAD&gt; Commands: a Quick Guide<strong></title></strong>
<p class="style1] <strong><meta</strong> name="author" content="purefreak"<strong>></strong>
<strong><meta</strong> name="keywords" content="Head,commands,no,pr0n"<strong>></strong>
<strong><meta</strong> name="description" content="quick guide about Head commands"<strong>></strong>
<strong><meta</strong> name="copyright" content="Copyright © 2005 Everybody"<strong>></strong>
<strong><meta</strong> http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"<strong>></strong>
<p class="style1] <strong></head></strong>
<span class="style1] <body>
lalala dum tee w000t!!
</body>
</html> </span> </td>
</tr>
</table>
.:top
<strong>.:Base</strong>
This instructs Browsers about the URL path of our page (document). This is used as a basis for all src and href attributes.
But it should be said that most modern browsers automatically defines your site's base URL, allowing you to still benifit from this element without actually implamenting it.
If you were to set your Base element like so:
<table width="580" border="0" bgcolor="#FFFFCC]
<tr>
<td><p class="style1]<strong><Base</strong> href="http://knowledge-bank.cauniversity.org/"<strong>></strong> </td>
</tr>
</table>
You would be able to simply enter a link as: ?file=kb.php&cat1=Web_design&cat2=Html
and it will automaticly be resolved to:
http://knowledge-bank.cauniversity.org/?file=kb.php&cat1=Web_design&cat2=Html
.:top
<strong>.:Isindex</strong>
Mostly replaced by the input element, but still accepted. Modern day browsers simply render this as a text field sandwitched between two <hr> tags. What ever you put into this space is then sent to the server, that should be handled by a cgi script of some sorts, that can responsd accordingly.
.:top
<strong>.:Link</strong>
This should definatly not be mistaken as the <a href> tag, also sometimes called a link element.
This serves as a place for the page (document) to establish links with external pages, like seperate style sheets or font definitions.
I haven't really seen this element used alot, mainly due to a lack of browser support, but with the release of IE6 and now Firefox, this will hopefully change.
Example of usage:
<table width="580" border="0" bgcolor="#FFFFCC]
<tr>
<td class="style1]<strong><link</strong> rel="stylesheet" type="text/css" href="muffincrud.css"<strong>></strong></td>
</tr>
</table>
.:top
<strong>.:Object</strong>
This tells browsers to render or load datatypes that aren't supported by it. If a browser is told to load some external program, like a java app or some sort of plugin maybe, the informartion about what should be rendered will be contained in the object element.
With HTML 4 specifications, browsers are allowed to load alternative content if the primary content is unavailable.
Example:
<table width="580" border="0" bgcolor="#FFFFCC]
<tr>
<td class="style1]<strong><Object</strong> id="receivehead" classid="clsid:83A83BF0-A4FF-C619A81E881D"<strong>></strong>
<Param name="srcStart" value="/mouth.gif">
<Param name="frameCount" value="10">
<Param name="loop" value="1">
<Param name="fps" value"20">
<strong></Object></strong></td>
</tr>
</table>
.:top
<strong>.:Style</strong>
This holds your page (document)'s style sheet rules. Multiple styles are allowed in the Head area.
Example:
<table width="580" border="0" bgcolor="#FFFFCC]
<tr>
<td class="style1]<strong><Style</strong> type="text/css"<strong>></strong>
<!--
Header {font-size:12pt; text-transform:capitalize}
Content {font-size:9pt}
-->
<strong></Style></strong></td>
</tr>
</table>
.:top
<strong>.:Conclusion</strong>
Well.. thats it. I can't really think of anything else to say. Remember that this should be read only as a quick guide or referance.
To finish off, I'll show you a final example of a page with a somewhat bloated Head:
<table width="580" border="0" bgcolor="#FFFFCC]
<tr>
<td><p class="style1]<html>
<strong><head></strong>
<p class="style1] <strong><title></strong>&lt;HEAD&gt; Commands: a Quick Guide<strong></title></strong>
<p class="style1] <strong><meta</strong> name="author" content="purefreak"<strong>></strong>
<strong><meta</strong> name="keywords" content="Head,commands,no,pr0n"<strong>></strong>
<strong><meta</strong> name="description" content="quick guide about Head commands, NO pr0n!"<strong>></strong>
<strong><meta</strong> name="copyright" content="Copyright © 2005 Everybody"<strong>></strong>
<strong><meta</strong> http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"<strong>></strong>
<p class="style1] <strong><Base</strong> href="http://knowledge-bank.cauniversity.org/"<strong>></strong>
<strong><link</strong> rel="stylesheet" type="text/css" href="muffincrud.css"<strong>></strong>
<p class="style1] <strong><Object</strong> id="receivehead" classid="clsid:83A83BF0-A4FF-C619A81E881D"<strong>></strong>
<Param name="srcStart" value="/mouth.gif">
<Param name="frameCount" value="10">
<Param name="loop" value="1">
<Param name="fps" value"20">
<strong></Object></strong>
<p class="style1] <strong> <Style</strong> type="text/css"<strong>></strong>
<!--
Header {font-size:12pt; text-transform:capitalize}
Content {font-size:9pt}
-->
<strong></Style></strong>
<p class="style1] <strong></head></strong>
<p class="style1] <body>
Check out the CAU Knowledge Bank!
</body>
</html></td>
</tr>
</table>
<hr>
Written by <strong>[url=http://www.cyberarmy.net/%7Epurefreak]purefreak</strong> (17 March 2005)
<strong>PuRe FreaK </strong> is a Member Of<strong> Knowledge-Bank Tutorial Writers </strong>
Edited by frraaz
</body>
</html>
|
|
This article was imported from the CyberArmy University site. (original author: purefreak)
There are no replies to this post yet.
|