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 06-23-2005, 10:01 AM
  #1
Horus_Kol
Der Underlayer
 
Join Date: Jun 2002
Location: At a desk, hooked up and ready to rock
Posts: 17,605
iTrader: (0)
Horus_Kol is a name known to allHorus_Kol is a name known to allHorus_Kol is a name known to allHorus_Kol is a name known to allHorus_Kol is a name known to allHorus_Kol is a name known to all
HTML 101: pt5 - Structured Text

Part 4: Display Data - Tables and Lists

HTML has a large number of tags/elements which can be used to describe the content within them.

We’ve already seen the <p> and <span> elements back in part 2. These a contextless elements – they do not describe their content.

An example of a descriptive tag would be the <code> tag. This informs the browser (and search engine) that the contents of this element are a code example, and the browser will render it as such (usually as a fixed width font like Courier).

Quotations

Quotations are popular everywhere, it’s a way of saying “it’s not just us who think this!”.

So, you will probably want to have a quotation somewhere in your site at some point.

There are two methods for this. First the <blockquote>:

Quote:
<blockquote cite=’Anonymous’>
<p>
The quick brown fox jumped over the lazy dog.
</p>
</blockquote>
The cite attribute informs users as to the source of the quote.

Blockquotes can contain multiple paragraphs (<p> elements). Because blockquotes were (ab)used by early developers to indent text, browsers do not include quotation marks at the start or end of the element. Indentation should now be handled by CSS styling, but the quote marks are still missing.

The second type of quote (example from http://www.w3.org):

Code:
  John said, <q lang="en-us">I saw Lucy at lunch, she told me
  <q lang="en-us">Mary wants you
  to get some ice cream on your way home.</q> I think I will get
  some at Ben and Jerry's, on Gloucester Road.</q>
In this case, we have a nested quotation. The browser places the correct quote marks in place of the elements when drawing the page, so the output would look like:

Code:
  John said, "I saw Lucy at lunch, she told me 'Mary wants you
  to get some ice cream on your way home.' I think I will get some
  at Ben and Jerry's, on Gloucester Road."
Subscripts and Superscript

Code:
  H<sub>2</sub>0

  29<sup>th</sub> of January
‘Nuff said?

Abbreviations and Acronyms

Code:
  <abbr title=’Abbreviation’>abbr.</abbr>

  <acronym title=’Radio Detection and Ranging’>Radar</acronym>
As you can see, the title for both tags is the full description of the abbreviation/acronym. I’m afraid that the argument between what constitutes an abbreviation or an acronym is for the linguists to answer.

And the rest

<em> - emphasis

<strong> - stronger emphasis

<dfn> - the defining instance of something


<code> - a fragment of code

<samp> - example output from a program

<var> - definition of a variable

<kbd> - indicates text for user input


<cite> - used in conjunction with the <q> tags:

Code:
  The book by <cite>J.R.R. Tolkien</cite> begins with <q lang=’en-us’>There was a hole…</q>

Wrapping up

There are a couple more elements for controlling how text is displayed, but they don’t carry any meaning with them.

The pre-formatted text is a simple way of just having the output exactly as you wrote it in the editor:

Code:
  <pre>Multiple whitespaces will be output                       exactly as the user put it in</pre>

  <p>Whereas in this element multiple                 whitespace will be condensed back into a single space</p>
The above code will be display as:

Code:
Multiple whitespaces will be output                       exactly as the user put it in

Whereas in this element multiple whitespace will be condensed back into a single space
I think that about covers it for the 101’s – hope you’ve found all of this helpful.

Some resources:

http://www.w3.org

http://www.w3schools.com

http://www.htmlhelp.com

http://www.htmlforums.com


Once you have gotten used to web design in HTML, you should start looking at how CSS can be used to create some powerful designs.

HK
__________________
Photo Gallery: Modus InOperandi
Articles on Programming and Development (PHP/HTML/CSS, C/C++, more): RandomTweak
Mystery Website
Horus_Kol is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 01-10-2006, 06:38 PM
  #2
erisco
Catapulted
 
Join Date: Dec 2005
Location: Within the division of zero
Posts: 5,858
iTrader: (0)
erisco will become famous soon enougherisco will become famous soon enough
Code:
 H<sub>2</sub>0

  29<sup>th</sub> of January
I highlighted the incorrect closing tag, simple typo.
erisco is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 02-13-2006, 12:18 PM
  #3
okeeffemarc
Si vis pacem, para bellum
 
okeeffemarc's Avatar
 
Join Date: Jun 2002
Location: portsmouth
Posts: 1,279
iTrader: (0)
okeeffemarc is on a distinguished road
nice tatorial stuart, easy to understand
__________________
ROYAL NAVY GUNNER: IN THE BUSINESS OF DELIVERING VIOLENCE TO THE ENEMY.
okeeffemarc is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 10-11-2009, 02:36 PM
  #4
Varvino
Novice (Level 1)
 
Join Date: Oct 2009
Posts: 3
iTrader: (0)
Varvino is an unknown quantity at this point
Wow, thanks, did helped me alot! However I'm still a newb ;| xD

Sweet guide.
Varvino is offline   Add to del.icio.us Add to del.icio.us    Can you digg it?Can you digg it? Reply With Quote
Old 07-24-2010, 09:43 PM
  #5
pathmakerserves
Aspirant (Level 2)
 
Join Date: Apr 2010
Location: USA
Posts: 10
iTrader: (0)
pathmakerserves is an unknown quantity at this point
thanks for sharing! this is really a great help
pathmakerserves 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 11:33 PM.

   

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.