Get Timers Now!
WebSpider
$7,027
X
 
 May 10 - 02:39:14
-1
Help
7 Watchers
Page:  1 2 3 4 [ > - >>> ]
Marios XHTML Crash Course v2.0 Started by: Mario on Oct 23, '07 01:20
Many of you are likely familiar with this course's predecessor as the definitive guide to using XHTML in the forums. Due to an unfortunate series of events, that guide is no longer with us (RUP RUP). Motivated by lack of sleep, boredom, and a slight overdose of starbucks doubleshot Espresso, I have chosen to write a second version of this guide. While I don't claim to be an expert in this area (only because I try to hide the fact that I am a genius), I certify that the contents of this guide are 100% valid XHTML 1.1 (in fact, more so than this site.)

Learning Objectives:
  • How to effectively and correctly make sue of the a, blockquote, br, code, em, strong, ul, ol, and li XHTML tags.
  • How XHTML came to be.
  • Why XHTML?


Skip to the "XHTML Tags" section to avoid reading my boring rant.

In the early days of the internet, or rather the world wide web, there was chaos; HTML, or Hypertext Markup Language, was created by a man called Tim Berners-Lee (also creator of the WWW and founder of the w3c). The purpose of HTML was simple: to provide a centralized means of storing information that allowed for logically linking documents to one another. This linking is what we know as "hypertext", or more commonly, hyperlinks. The World World Wide Web quickly grew beyond anything Tim had ever imagined. While HTML was sufficient for Berner's original intentions, it was not suited to the growing uses that were being demanded of it. As a result, different browsers began supporting different extensions to HTML. Most of these extensions only worked in a particular browser. This caused what is now referred to as "the browser wars", which is beyond the scope of this BRIEF history.


In these same early years, web developers had little respect for HTML. It was often coded poorly. Rather than force people to learn the language, browsers became able to parse poorly-coded websites. Sometime before the turn of the century, XML (eXtensible Markup Language) was born. Unlike HTML, XML is not, as the name might imply, a markup language; it is a standard that sets forth rules for markup languages. When the XML standard was applied to HTML, XHTML resulted. XHTML is much more strict than regular HTML. As an example, consider the line break tag, which in XHTML, would be <br>. Since XML requires that all tags be closed, the <br> tag is <br /> in XHTML.


Rather than use the old and familiar HTML, I have, in an effort to provide for the future and promote cross-compatibility, chosen to support ONLY XHTML-friendly tags.

XHTML Tags

  • a: anchor/hyperlink

    example: <a href="www.google.com" title="This tooltip will show on mouse over">Name of link</a>

    Name of link


    Note: in most cases, you do not need to use this tag.  If you put http:// in front of something, it is assumed to be a hyperlink and the HTML will be added for you.

  • blockquote: Used to quote an entire block of text (as opposed to a single line.).  Syntax: <blockquote cite=" cite for the quote">quote here</blockquote>



    This is a blockquote.

    I said all this crap...

    and now I am quoting me.


  • br: line break.  Forums, profiles, and mobmail have always done this for you, but if you want to insert your own, the syntax is: <br />
  • code: Used to format code. Any text in code tags will have a monospace font. <code>code here</code>

    #include <iostream>
    int main() {
        std::cout << "BOO!" << std::endl;
        return 0;
    }

  • em: italics example: <em>italics</em>
  • strong: bold example: <strong>bold</strong>
  • ul, li, and ol: ul and ol are unorderd list, and ordered list.  ul is used in this post.


    Example of an unordered list:
    <ul>
    <li>List item</li>
    <li>List item</li>
    <li>List item</li>
    </ul>

  • Note: pre tags are also supported.



Tables

Tables are not supported, and never will be. If you need a table-like layout, use <code> tags instead.

Long Posts

If you plan on spending more than a half hour writing a post, write the post in notepad, then copy it over to the game to avoid losing your post if you are logged out.

The previous version of this post provided a foundation for this revised version. Many thanks to out to webspider for Caching this for us.
 
Report Post Tip
Appendix A - Colored Hyperlinks

Many of you may have noticed that some people are able to create hyperlinks that have color. They are utilizing the Cascading Style Sheets (CSS) that are built into MafiaReturns. CSS allows you to format websites to look a certain way. I'm not goiing to cover actual CSS in this post, since you can't write your own (you cannot use the style attribute). However, you can use the XHTML class attribute to alter the way your links look.

Actually using this technique is a lot simpler than it sounds. You start off with a normal anchor/hyperlink tag, but you add Class="CLASSNAME" inside of it.


Note: If you use this technique in your profile quotes you must make sure that the C in Class= is capitalized or it will not work.



Example :  <a href="http://www.google.com/" class="six">Goes to google!</a>
Goes to google!



You can also combine the class names to achieve multiple effects.



Example :  <a href="http://www.google.com/" class="six cool">Goes to google!</a>
Goes to google!




These are the CSS class names you have access to that will change the way your links look. Just use them in place of six in the example above.
CLASS = two

CLASS = three

CLASS = four

CLASS = five

CLASS = six

CLASS = seven

CLASS = eight

CLASS = nine

CLASS = ten

CLASS = eleven

CLASS = mike

CLASS = coder

CLASS = developer

CLASS = menuitem

CLASS = right

CLASS = left

CLASS = msg

CLASS = cool

CLASS = teq
Reply by: RealityGone at Jun 23, '08 17:16
Report Post Tip
uhhh... hm. for people who dont know what the heck their doing, just view the page source, find the text your looking for that surrounds some words, copy and paste it, and then change the key words, and bingbamboom, you have a cool profile
Reply by: telkin2 at Jul 19, '08 14:53
Report Post Tip
you mean that this things we can use them in our profile??? what about pictures?
Reply by: kspr at Aug 22, '08 05:43
Report Post Tip
Ive got the hyperlink and the letters written in but how do i get it on to my profile. I coped and pasted it but you cant go into it, its just like I wrote something.
Reply by: Hellboy at Oct 26, '08 18:12
Report Post Tip
If you still want to know, message me.
Reply by: Adamines at Oct 28, '08 02:40
Report Post Tip
So colours work like <mike>this?</mike>
Reply by: Sammy_Galione at Dec 10, '08 10:55
Report Post Tip
No. I sugggest rereading RealityGone's post ;).
Reply by: oniruaLoiraM at Dec 10, '08 22:45
Report Post Tip
Hmmm the coulored things to make it colourful dont work for me i copy and paste it to see if it works and its just white and when i click it it goes to a 404 error page and i have changed the C on class to make it capitalized anyone know whats wrong ?
Reply by: DeathKnight at Dec 24, '08 13:48
Report Post Tip
I did the Class "ten cool" thing and I know everything is typed right but it is still white and not what it's supposed to look like. Does anyone know what happened?
Reply by: AJMan_3 at Dec 24, '08 13:55
Report Post Tip
Like the most helpful topic on the entire game lol
Reply by: Communist_Cav at Jan 01, '09 18:58
Report Post Tip



Like the most helpful topic on the entire game lol



You make me feel so loved.
Reply by: oniruaLoiraM at Jan 03, '09 18:04
Report Post Tip
Something that may save some of you a few headaches: These tags are CASE SENSETIVE.


In other words if you use "Strong" instead of "strong" you will find that your text comes out as:

Like this


instead of

Like this


Also a big thank you to you guys for this thread; it explains things clearly and concisely
Reply by: Diamond_Jim at Jan 06, '09 10:51
Report Post Tip
thanks
i learned something !
Reply by: Tig4two at Jan 07, '09 08:59
Report Post Tip
It's kind of easy once you make the link things a few times. I just keep forgetting to put a = between cool="
Reply by: AJMan_4 at Jan 08, '09 18:48
Report Post Tip
Thanks Mario this this thread helped me alot.
Reply by: Hellboy at Jan 18, '09 10:05
Report Post Tip
Very nice work...
Reply by: squid at Jan 21, '09 13:37
Report Post Tip
Very useful thread! Great that you are using XHTML also.


One note I would like to add to this is that all XHTML tag names and attribute definitions (such as class="blah") should always be lower case.


Standards compliant Slips ;)
Reply by: Slips at Feb 11, '09 08:00
Report Post Tip

Nice post

Reply by: DeathAngel at Feb 17, '09 15:30
Report Post Tip
It seems the hyperlink code doesnt work...it tried to take you to mafiareturns.com/news(insert origional desiried hyperlink)


ive even tried to copy your google one straight from your post to test it and it goes the same thing.
Reply by: Ranwolf at Mar 06, '09 21:29
Report Post Tip

Post Reply |  View All Threads Page:  1 2 3 4 [ > - >>> ]
Help
Replying to: Marios XHTML Crash Course v2.0
Compose Body:

@Mention Notifications: On More info
How much do you want to tip for this post?

Minimum $20,000

(NaN)
G2
G1
L
H
D
C
Private Conversations
0 PLAYERS IN CHANNEL