Adblock breaks this site

TDD's Web Design series: Part 1 - The xHTML Tags.

Discussion in 'Guides' started by TDD, Apr 23, 2008.

Thread Tools

Thread Tools

  • Thread ID:
Page 1 of 2
  1. TDD

    TDD Web Design Expert
    Do Not Trade

    Joined:
    Nov 20, 2005
    Posts:
    3,191
    Referrals:
    2
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    Alright kids, let's have some fun with xHTML and CSS Designing, this will be a series that will eventually teach you all how to make a full blown site.

    Part 1 - The basic Markup and Tags

    Contrary to what everyone else has been posting, I will show you the proper way to markup your xHTML document:

    HTML:
    <!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
    Now let's examine what we have here...

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    This tells the browser what version of (x)HTML we are using, this is important so that it will render 'properly' for that version and this way you are less likely to need to rely on that browser's error checking.

    HTML:
    <html xmlns="http://www.w3.org/1999/xhtml">
    Beginning of the xHTML document.

    HTML:
    <head>
    This is the beggining of the HEADER, this is to contain purely information, there is to be NOTHING in here for the end user, it is purely for browsers/bots to view, Document title, stylesheet linking, meta tags, etc. go in this area.

    HTML:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    This sets the default language for this document to unicode 8.

    HTML:
    <title>Untitled Document</title>
    This is where you'd put your document title, it goes inside the tag, so you'd replace "Untitled Document" with something like "TDD is a fucking god".

    HTML:
    </head>
    This closes the header, it is VITAL to close ALL open tags, there are exceptions to this rule though, when it comes to self-closing tags, but we'll get to that later.

    HTML:
    <body>
</body>
    this is where all the information that gets shown to the user is placed.

    HTML:
    </html>
    This is the end of the HTML document, there should be nothing after this closing tag.

    now that we've got a little explanation about what each of these does, let me tell you other HTML Tags that will aid you in this course (I won't explain them all, just the ones you'll more than likely use):

    (There will be people who will probably try to argue that i have left out styling attributes in this, but that is for good reason, you DO NOT style the page in the HTML document, you do that in a seperate CSS file that I will explain in the next part)

    HTML:
    <h1></h1>
    Heading #1 - this is the most important heading in the document, do not confuse this with the header though.

    HTML:
    <h2></h2>
    Second most important heading.

    (these tags go down to <h6>)

    HTML:
    <b></b>
    This is to format the text inside this tag as bold, it has since been deprecated for
    HTML:
    <strong></strong>
    so we will be using <strong>

    HTML:
    <i></i>
    Used to make text italic, again, it's better to use
    HTML:
    <em></em>
    (emphasis) so we'll use that.

    HTML:
    <a href="" target=""></a>
    Anchor(link) tag, this is used to define a link on the webpage to the location (href) you choose, by putting the destination inside the "" in href="", target is for telling the browser to do things like open in a new window (target="_blank") etc, you can also use it to link to a specific part of the document through IDs, but i'll explain this later.

    HTML:
    <p></p>
    Paragraph tag, this is what your body text should be inside, it sorts the content into paragraphs... logical amirite?

    HTML:
    <br />
    Break tag, this tells the browser to now go to the next 'line' in the document. This is also our first SELF CLOSING tag.

    HTML:
    <blockquote></blockquote>
    If the tag isn't self explanitory enough, it's used for quotes and shit.

    HTML:
    <ul></ul>
    Unordered List, this is probably the second most valuable tool in the web design arsenal when it comes to CSS Design, it can be used for virtually anything.

    HTML:
    <ol></ol>
    Ordered List (numbered).

    HTML:
    <li></li>
    This is used INSIDE the <ul> and <ol> tag, as it is a LIST ITEM (li), this tells the browser everything inside it is grouped.

    HTML:
    <dl></dl>
    definition list... very tiny chance you'll use it.

    HTML:
    <div></div>
    This is the most valuable design tool for CSS Design, it is an entirely empty tag, perfect for styling for any job.

    HTML:
    <img src="" alt="" />
    This is our second SELF-CLOSING tag, see how the end is "/>" instead of ">" this closes itself. src="" tells the browser where the source(src) of the image file is relative to the HTML file, the alternate(alt) text for read-aloud browsers is kept inside alt="", this is a web standard and a requirement in ALL xHTML documents, you MUST include an ALTernate description.

    I'd mention forms, but we won't go into that in the near future, they are tricky bastards.

    What NOT to use:
    HTML:
    <table></table>
    use this tag for ANYTHING other than non-tabular data and you are not worthy of the internet (yes Cruel__Machine, that means you!).

    HTML:
    <frame></frame>
    Frames are useless faggotry, do not use them, there is no need to, they simply cause pain for the end user that is uneeded. same goes for <iFrame></iFrame>

    Well, there's our first installment of TDD's web design tutorial, tune in next time for some more info on how to do shit right.

    Ps: I should probably also mention that in xHTML you always use lowercase tags, not uppercase.
     
    TDD, Apr 23, 2008
    #1
  2. Clank

    Clank Guru
    Banned

    Joined:
    Mar 21, 2008
    Posts:
    1,608
    Referrals:
    2
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    This is really quite detailed for a short guide. Thanks for this.
    (First post ftw.)
     
    Clank, Apr 23, 2008
    #2
  3. Phil

    Phil Ex-Mod
    ♥ Will Love Govind Forever ♥
    Do Not Trade

    Joined:
    Jan 21, 2007
    Posts:
    2,210
    Referrals:
    6
    Sythe Gold:
    5
    TDD's Web Design series: Part 1 - The xHTML Tags.
    Thanks a lot Mat, you be useful :):)
     
    Phil, Apr 23, 2008
    #3
  4. TDD

    TDD Web Design Expert
    Do Not Trade

    Joined:
    Nov 20, 2005
    Posts:
    3,191
    Referrals:
    2
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    barely touched the surface of what i'll teach everyone.
     
    TDD, Apr 23, 2008
    #4
  5. MDS

    MDS Forum Addict
    Banned

    Joined:
    Mar 25, 2008
    Posts:
    276
    Referrals:
    0
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    awesome guide, i have been looking to learn some html. thanks and i cant wait to see more :D
     
    MDS, Apr 23, 2008
    #5
  6. Deacon Frost

    Deacon Frost Grand Master
    Banned

    Joined:
    Jan 30, 2007
    Posts:
    2,905
    Referrals:
    3
    Sythe Gold:
    57
    TDD's Web Design series: Part 1 - The xHTML Tags.
    Bitchin! I'll just refer anyone who reads mine to your guides :p
     
    Deacon Frost, Apr 23, 2008
    #6
  7. Faskist

    Faskist Tuxhead
    Banned

    Joined:
    Apr 25, 2005
    Posts:
    1,869
    Referrals:
    0
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    RAGE that you didn't mention the difference between standards mode and quirks mode.
     
    Faskist, Apr 23, 2008
    #7
  8. gtr4life

    gtr4life Apprentice
    Banned

    Joined:
    Jun 13, 2007
    Posts:
    646
    Referrals:
    0
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    thx man! this is so useful!!! :)
     
    gtr4life, Apr 23, 2008
    #8
  9. TDD

    TDD Web Design Expert
    Do Not Trade

    Joined:
    Nov 20, 2005
    Posts:
    3,191
    Referrals:
    2
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    pfffft
     
    TDD, Apr 23, 2008
    #9
  10. Byrdman--1-7

    Byrdman--1-7 Member
    Banned

    Joined:
    May 1, 2008
    Posts:
    59
    Referrals:
    0
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    Nicely made guide
     
    Byrdman--1-7, May 1, 2008
    #10
  11. Clank

    Clank Guru
    Banned

    Joined:
    Mar 21, 2008
    Posts:
    1,608
    Referrals:
    2
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    ^ Oooh, glad to hear it. Can you check my guide on HTML? Maybe provide some editing?
     
    Clank, May 4, 2008
    #11
  12. Nullware

    Nullware Guru

    Joined:
    Jan 30, 2007
    Posts:
    1,761
    Referrals:
    4
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    I think you probably mean "for ANYTHING other than tabular data".
     
    Nullware, May 6, 2008
    #12
  13. TDD

    TDD Web Design Expert
    Do Not Trade

    Joined:
    Nov 20, 2005
    Posts:
    3,191
    Referrals:
    2
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    ahaha whoops :D
     
    TDD, May 6, 2008
    #13
  14. Ryan

    Ryan Hopeless Romantic
    Banned

    Joined:
    Mar 14, 2006
    Posts:
    2,946
    Referrals:
    31
    Sythe Gold:
    56
    TDD's Web Design series: Part 1 - The xHTML Tags.
    Tables ftw. Don't listen to TDD :p

    (Inside Joke)
     
    Ryan, May 6, 2008
    #14
  15. The Dark

    The Dark Guru
    Banned

    Joined:
    Jan 21, 2007
    Posts:
    1,601
    Referrals:
    0
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    Only thing i don't understand about webdesign is why look at a load of jumbled code when you can see it in something like Dreamweaver?
    Answer me that, and i'm going to learn it the code way.

    'Answer me that' not meant in the sence that you can't answer it, just really looking for an excuse to learn it the code way.
     
    The Dark, May 11, 2008
    #15
  16. ssj_ion

    ssj_ion Guest

    Referrals:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    thanks man it helped alot but there could hav been alot more
     
    ssj_ion, May 17, 2008
    #16
  17. HackMyWorld

    HackMyWorld Active Member
    Banned

    Joined:
    Jul 26, 2008
    Posts:
    134
    Referrals:
    1
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    Thanks man , you included a lot without making it messy :D
     
    HackMyWorld, Jul 27, 2008
    #17
  18. NINJA YETI

    NINJA YETI Guest

    Referrals:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    Thanks for this It's showed me a lot.
     
    NINJA YETI, Jul 28, 2008
    #18
  19. wcer2552

    wcer2552 Guru
    $25 USD Donor

    Joined:
    Feb 23, 2008
    Posts:
    1,462
    Referrals:
    0
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    wow thanks a lot for this helped a lot
     
    wcer2552, Aug 4, 2008
    #19
  20. StanRoy

    StanRoy Forum Addict
    Banned

    Joined:
    Aug 4, 2007
    Posts:
    381
    Referrals:
    0
    Sythe Gold:
    0
    TDD's Web Design series: Part 1 - The xHTML Tags.
    cool, some i already knew from looking at the code in dreamweaver.
     
    StanRoy, Aug 12, 2008
    #20
Page 1 of 2
< TDD's Web Design Series - Part 4, basic navigation | >


 
 
Adblock breaks this site