 Basic Tagging, included is basic HTML Commands / tags |
|
|
|
|
  |
 Feb 28 2006, 04:13 AM
Post
#1
|
|
|
Super Member  Group: Members Posts: 220 Joined: 6-September 04 Member No.: 1,035  |
The HTML tag
Although not currently required by all clients, the <html> tag signals the point where text should start being interpreted as HTML code. It's probably a good idea to include it in all your documents now, so you don't have to go back to your files and add it later. The <html> tag is usually placed on the first line of your document. At the end of your document you should close with the </html> tag. The head tag Just like the header of a memo, the head of an HTML document contains special information, like its title. The head of a document is demarcated by <head> and </head> respectively. For the purposes of this class, only the title tag, below, should be included in the document head. A typical head section might look like CODE <html> <head> <title>My First HTML Document</title> </head> Titles A title tag allows you to specify a Document Title in your browser window. When people make hotlists, this title is what they see in their list after they add your document. The format is: CODE <title>My First HTML Document</title> Remember, the title usually doesn't appear in the document itself, but in a title box or bar at the top of the window. The body tag Like you might expect, the body tags <body> and </body> define the beginning and end of the bulk of your document. All your text, images, and links will be in the body of the document. The body should start after the head. A typical page might begin like CODE <html> <head> <title>My First HTML Document</title> </head> <body> Headers There are up to six levels of headers that can be used in your document, h1 through h6. Header 1 is the largest header and they get progressively smaller through header 6. Below are each of the six headers and how they usually appear in relation to one another. CODE <h1>This is a header 1 tag</h1> This is a header 1 tag <h2>This is a header 2 tag</h2> This is a header 2 tag <h3>This is a header 3 tag</h3> This is a header 3 tag <h4>This is a header 4 tag</h4> This is a header 4 tag <h5>This is a header 5 tag</h5> This is a header 5 tag <h6>This is a header 6 tag</h6> This is a header 6 tag Headers, as you notice, not only vary in size, they are also bold and have a blank line inserted before and after them. It's important to use headers only for headings, not just to make text bold (we cover the bold tag later). Paragraphs In HTML, a paragraph tag <p> should be put at the end of every paragraph of "normal" text (normal being defined as not already having a tag associated with it). CODE <p> causes a line break and adds a trailing blank line <br> causes a line break with no trailing blank line As a convenience to yourself and others who might have to edit your HTML documents, it's a very good idea to put two or three blank lines between paragraphs to facilitate editing. Blockquote The blockquote tag indents the text (both on the left and right) inside the tags. The blockquote tag looks like this: CODE <blockquote>...</blockquote> and displays like this: Blockquoted text is often used for indenting big blocks of text such as quotations. The text will be indented until the ending tag is encountered. Again, note that the text here is indented on both the left and the right margins. Center You can center text, images, and headings with the center tag: CODE <center>This is a centered sentence</center> This is a centered sentence. The center tag automatically inserts a line break after the closing center tag. Horizontal Rule To separate sections in a document, you can insert a horizontal rule tag <hr>. A horizontal rule is displayed as follows: Addresses The <address> tag normally appears at the end of a document and is used most frequently to mark information on contacting the author or institution that has supplied this information. Anything contained within the address tag appears in italics. The address tag is another example of a logical tag, and although it currently does nothing but make text appear in italics, this could change as HTML code advances. Here is an example of how an address might appear: CODE <address> Introduction to HTML / joe schmo/ joe_schmo@blah.com </address> And it would appear as: Introduction to HTML / joe schmo / joe_schmo@blah.com Comments It is possible to include comments in a source HTML document that do not appear when seen through a browser. This is most useful for giving warnings and special instructions to future editors of your document. Comments take the form: CODE <!-----This comment will not appear in the browser-----> The comment can even break lines CODE <!----This comment won't be seen by anyone either even though it's broken between lines---> Strike-through Should you want it, there is a strike-through tag which displays text with a strike. CODE <strike>This is struck through text</strike> displays as This is struck through text Special Characters Finally, if you often use the characters which make up HTML tags (such as < >, and &), or you use special characters not in the ascii standard, you will have to use special tags. Here are the codes: CODE á .... á â .... â æ .... æ à .... à & .... & å .... å ã .... ã ä .... ä ç .... ç é .... é ê .... ê è .... è ð .... ð ë .... ë > .... > í .... í î .... î ì .... ì ï .... ï < .... < ñ .... ñ ó .... ó ô .... ô ò .... ò ø .... ø õ .... õ ö .... ö " .... " ß .... ß þ .... þ ú .... ú û .... û ù .... ù ü .... ü ý .... ý ÿ .... ÿ Preformatted text The preformatted text tag allows you to include text in your document that normally remains in a fixed-width font and retains the spaces, lines, and tabs of your source document. In other words, it leaves your text as it appears initially or just as you typed it in. Most clients collapse multiple spaces into one space, even tabs are collapsed to one space. The only way to circumvent this is to use the preformatted tag. Visually, preformatted text looks like a courier font. CODE <pre>this is an example of a preformatted text tag</pre> And this is how it displays: this is an example of a preformatted text tag Boldface and Italics You can add emphasis to text by using the boldface and italic tags or the emphasis and strong tags. There is an underline tag as well, but most people don't use it since text that is linked is often underlined. The potential for confusion and the archaic nature of underlining in general make it a poor marker for emphasis. When using these tags, you usually cannot (and probably should not) have text that is both boldface and italics; the last tag encountered is usually the tag that is displayed. For example, if you had a boldface tag followed immediately by an italic tag, the tagged word would appear in italics. CODE Physical tags This is a <b>boldface</b> tag. This is how boldfacing appears. This is an <i>italic</i> tag. This is how italics appear. Logical tags This is a <strong>strongly emphasized</strong> tag. This is a strongly emphasized tag. This is an <em>emphasized</em> tag. This is an emphasized tag. There is a subtle distinction between the above "physical" tags which merely change the displayed font, and "logical" styles which are used (or eventually will be) to make types of emphasis client specific (for instance, using the <em> tag would make text red). While either style is fine, be aware that differences in these two kinds of tags may be more apparent with advances in HTML. Lists There is an easy way in HTML to have numbered, unnumbered, and definition lists. In addition, you can nest lists within lists. When using lists, you have no control over the amount of space between the bullet or list number, HTML automatically does this for you. Neither (as yet) do you have control over what type of bullet will be used as each browser is different. Unnumbered lists Unnumbered lists are started with the <ul> tag, followed by the actual list items, which are marked with the <li> tag. The list is ended with the ending tag </ul>. For example, here is an unnumbered list with three items: CODE <ul> <li> list item 1 <li> list item 2 <li> list item 3 </ul> Here is how that list would display: * list item 1 * list item 2 * list item 3 Numbered lists CODE Here is the same list using a numbered list format: <ol> <li> list item 1 <li> list item 2 <li> list item 3 </ol> Here is how that list would display: 1. list item 1 2. list item 2 3. list item 3 Definition lists Definition lists allow you to indent without necessarily having to use bullets. CODE <dl> <dt> This is a term <dd> This is a definition <dd> And yet another definition <dt> Another term <dd> Another definition </dl> And here is how this would be displayed This is a term This is a definition. And yet another definition. Another term Another definition Nested lists Finally, here is a nested list within an unnumbered list (we could just have easily had a nested list within a numbered list). CODE <ul> <li> list item 1 <ul> <li> nested item 1 <li> nested item 2 </ul> <li> list item 2 <ul> <li> nested item 1 <li> nested item 2 </ul> <li> list item 3 <ul> <li> nested item 1 <li> nested item 2 </ul> </ul> Here is how that list would display: * list item 1 o nested item 1 o nested item 2 * list item 2 o nested item 1 o nested item 2 * list item 3 o nested item 1 o nested item 2 Font Commands Font Face Examples: CODE <font face="Arial">Arial</font> <font face="Cooper">Cooper</font> <font face="Times">Times</font> <font face="Broadway">Broadway</font> Font Size Examples: CODE <font size="1">1</font>, <font size="2">2</font <font size="3">3</font> <font size="4">4</font> <font size="5">5</font> <font size="6">6</font> <font size="7">7</font> Text Formatting: CODE <b>Bold</b> <strong>Strong</strong> <i>Italic</i> <u>Underline</u> <strike>Strike Through</strike> <em>emphasis</em> <sup>Super Script</sup> <sub>Sub Script</sub> Font Colors: CODE <font color="#FF0000">Red</font> <font color="#00FF00">Green</font> <font color="#0000FF">Blue</font> <font color="#000000">Black</font> Hope you find this useful it is the most commonly used html tags in my opinion. any question feel free to ask. This is courtesy of various websites and books that I have viewed over the years and is in a compilation ms word doc that i have on my computer at all times. edited to add code tags and Font commands..dont know how i missed those lol This post has been edited by Trystim: Feb 28 2006, 04:33 AM |
 |
 
|
|
Feb 28 2006, 04:16 AM
Post
#2
|
|
|
Advanced Member Group: Members Posts: 121 Joined: 27-April 05 Member No.: 6,270 |
Very nice, but you forgot the <font> family. Like the <font face="Chiller"> or <font size=13> or <font color=#552244>. This is pretty good for any beginners in html.
|
|
|
|
|
Feb 28 2006, 04:30 AM
Post
#3
|
|
|
A computer once beat me at chess, but it was no match for me at kick boxing.  Group: [MODERATOR] Posts: 4,083 Joined: 24-July 05 From: Linix, DOS and Windows…the good, the bad and the ugly Member No.: 9,787  |
QUOTE(Damann @ Feb 27 2006, 09:16 PM)  Very nice, but you forgot the <font> family. Like the <font face="Chiller"> or <font size=13> or <font color=#552244>. This is pretty good for any beginners in html. The Font tag is 'deprecated' in newer versions of (x)html. With the use of Cascading Style Sheets, they are no longer required and, in fact, are no longer supported in the W3C Standards. Only older browsers will recognize them. They are most often replaced with a named span tag or by specifying a class for specific instances where you want to alter the Font or size of text. More information is available at the w3schools web site. link here |
|
|
|
|
Feb 28 2006, 04:36 AM
Post
#4
|
|
|
Super Member Group: Members Posts: 220 Joined: 6-September 04 Member No.: 1,035 |
believe it or not i still use the [code]<font size="#" color="chartreuse" family="arial">text</font> I myself haven't gotten into CSS although i should
|
|
|
|
|
Feb 28 2006, 04:40 AM
Post
#5
|
|
|
Member [Level 1] Group: Members Posts: 59 Joined: 25-February 06 From: Calgary Canada Member No.: 19,146 |
QUOTE(Damann @ Feb 27 2006, 09:16 PM) Very nice, but you forgot the <font> family. Like the <font face="Chiller"> or <font size=13> or <font color=#552244>. This is pretty good for any beginners in html. That stuff is more appropriate in a CSS tutorial, not HTML. I guess I could start one |
|
|
|
|
Feb 28 2006, 05:04 AM
Post
#6
|
|
|
Group: Members Posts: 1,161 Joined: 9-May 05 From: Brisbane, QLD Member No.: 6,818 |
QUOTE(jlhaslip @ Feb 28 2006, 02:30 PM) Only older browsers will recognize them. That's not true actually - there's plenty of sites out there that work in modern browsers that still use font tags. |
|
|
|
|
Feb 28 2006, 05:27 AM
Post
#7
|
|
|
$p4m 0n j00 $h4m3 m3 0nc3 $p4m 0n m3 $h4m3 m3 7\/\/1c3 Group: [HOSTED] Posts: 6,563 Joined: 21-September 04 From: 9r33|\| 399$ 4|\|D 5P4/\/\ Member No.: 1,218  |
true the most people use the old ways of html cuz some don't vaildate their coding mostly non business sites, but a quite a few business sites still use the old coding, but in the basics of xhtml are same with a few exceptions but still a good tutorial overall.
|
|
|
