#1
  1. Cunning Linguist
    ASP High Scholar (3500 - 3999 posts)

    Join Date
    Mar 2005
    Location
    I used to live at home, now I stay at the house
    Posts
    3,580
    Rep Power
    432

    HTML, JavaScript & CSS Tutorials Thread


    Welcome to the HTML, JavaScript & CSS tutorial thread.

    This thread is open for people to write tutorials or guides on various
    aspects of client-side web programming. Please feel free to express
    your opinions [both good and bad] on the tutorials, and also to add
    some of your own [I'll add them to the TOC.]

    If you have a question about one of the tutorials and how it relates
    to an issue you are having with your site please start a new thread
    in the forum and link to the tutorial you are referring to, rather than
    posting your questions in this thread.

    Obviously we cannot guarantee that all the information and details
    in this thread are 100% accurate, that's down to the author[s] of
    the tutorials to check, so don't take all the information here as
    gospel.

    Hopefully this thread will continue to grow and be of help to many!

    --Jon.

    Comments on this post

    • nofriends agrees : good idea Chief, maybe we can add the tuts of Phoenix here also?
    Support requests via PM will be ignored!
    Route of Queue | The General FAQ Thread | HOW TO POST A QUESTION

    Perfectly Impossible - is the eagerly awaited debut release from Jayne Sarah - please buy it - it's really good!

  2. #2
  3. Cunning Linguist
    ASP High Scholar (3500 - 3999 posts)

    Join Date
    Mar 2005
    Location
    I used to live at home, now I stay at the house
    Posts
    3,580
    Rep Power
    432

    Table of contents


    1. XHTML Tutorial
      • A few pointers on XHMTL w/ CSS 2.1
    2. Transition from HTML to XHTML 1.1
      • Some XHTML equivalents to typical uses of HTML
    3. The truth about divs!
      • The importance of <div>s, <span>s and CSS selectors
    4. Thinking inside the Box
      • Guide on how to develop CSS websites or to transition from a table-based to a semantic XHTML based site
    Last edited by ChiefWigs1982; July 17th, 2006 at 07:34 AM.
  4. #3
  5. Cunning Linguist
    ASP High Scholar (3500 - 3999 posts)

    Join Date
    Mar 2005
    Location
    I used to live at home, now I stay at the house
    Posts
    3,580
    Rep Power
    432

    XHTML Tutorial


    This was originally posted by Phoenix on January 17th, 2005;
    added here by ChiefWigs1982 on July 17th, 2006.
    #########################################




    ...Seeming as we haven't really seen much in the way of XHTML w/ CSS2.1 tutorials around, I thought I'd get my head down and do one myself, for the benefit of those new to the concept of "standards compliance"

    I'll begin with a few pointers:

    Requirements

    • Don't use any WYSIWYG-only programs, such as FrontPage and FPExpress (less still, NetObjects Fusion), or IDE "Design mode", such as Visual Studio's "Web Forms Designer" or Dreamweaver's "layout mode"
    XML?
    XHTML is the HTML schema on XML, XML is a subset of the fully blown SGML. HTML is a variant of SGML.
    Confused yet?

    The XML specification has certain rules, the main ones are:
    1) XML markup is used to describe the data it contains
    2) NOT its rendering
    3) Tags must be semantic, relevant
    4) ...And must be formatted accordingly (ie: If you start a paragraph <p>, then you MUST close it with a </p>, you can't overlap tags, such as <b>bold<i>bold-italic</b>italic</i> either
    5) For cross-platform applications, tags and attributes (but not nessacerily attribute values) must be in lower case, the XHTML specifiction states everything must be in lower case (i

    Okay, so lets get started with the basics:

    Semantics
    Semantics is concerned with the meaning of words, and in this context... that the tag is representing something meaningful....

    Take the <table> element for example. Semantically, the <table> element should only be used for the display of tabular data. NOT to layout a page, I'll get into that later

    XHTML is intended to be used as a means of information exchange, a common, open format for structuring documents so that they can be read on any device with an appropriate reader in place. Therefore, the contents of XHTML documents should be platform-agnostic, kapeesh?

    You can have a lengthy graduate thesis document, or a simple paragraph page, or even a website gallery... all of these can be defined with semantic XHTML.

    Consider the graduate thesis:

    We'd have, say... a title

    The document title would be the topmost heading, so we use the <h1> tag.

    Like so:
    Code:
    <h1>My Graduate Thesis</h1>
    We are also required to make the <title> element, the child of <head> to be appropriate as well, so:
    Code:
    <html>
    <head>
       <title>My graduate thesis</title>
    </head>
    <body>
       <h1>My Graduate Thesis</h1>
    </body>
    </html>
    This makes sense so far?

    Okay, before we continue... there are differences in the way browsers are meant to handle XHTML compared to HTML, therefore, we need to tell the browser what version of HTML or XHTML we're using. Right now, I'm developing with XHTML 1.1, the latest incarnation of the standard. Note that there is no "strict", "frameset", or "transitional" variant, because this is FINAL and you're meant to stick to it. I'll explain Frames later on.

    This:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    Is a DTD, a "Doctype Declaration", it tells the agent/software, what XML/HTML scheme is in place. The URI to the w3.org is the location of the schema which a browser can download if it doesn't "understand" XHTML1.1

    We need to include the DTD at the top of the code so that its the first thing that the browser downloads.

    Moving on.... my graduate thesis would contain a list of all the pages, a "table of contents". Now, some might go "oooh! ooh! its a table of contents, so therefore, I use a table!", well no... you're wrong.

    A table of contents isn't a table in the strict sense, its more of a "list". Remember that the web is NOT the same media as print, fixed sized designs do NOT sell.

    So therefore, we use one of the 3 list elments.... <ol> <ul> and <dl>

    <ol> is the "ordered list", since its ordered the browser should display them in an ordered manner, typically its numeric and the numbering is done automatically, so this:
    [code]
    <ol>
    <li>Hello</li>
    <li>World!</li>
    </ol>
    [code]

    would be rendered as:

    Code:
    1. Hello
    2. World!
    <ul> is the "undordered list", its essentially the same as the ordered list, except that it uses bullets instead, since no specific order is implied by the list given

    Don't worry if you're wondering why you can't use the "type=""" attribute to change the "type" of the list to say... roman numerals, you do this using CSS, which I'll explain later

    <dl> and its child elements, <dt> and <dd> are used to define "title/text" pairs, these are mainly used for things such as glossaries and definition lists (hence the name... DL - Definition List)

    So anyway, now I know how to define the contents list:
    Code:
    <ol>
    <li><a href="#intro">Introduction</a></li>
    <li><a href="#xhtml">Beginning XHTML</a></li>
    </ol>
    You'll notice I've added anchor tags that link to #intro and #xhtml sections in the document

    okay, its only a short list, but you get the idea.

    Okay, so now that we've got a title and contents list, lets start with the content:

    Code:
    <h2 id="intro">Introduction</h2>
    <p>Lorem Ipsum Dolor Sit Amet</p>
    You'll notice I used <h2 id="intro"> rather than <a name="intro">, this is because the "ID" attribute replaces the "name" attribute of HTML3.02. Any "#" links tell the UA to go to that ID in the page, XHTML is so wonderful y'see

    Noteworthy:
    I'd just like to add that all tags that don't have closing pairs... such as <img src=""> and <br> are meant to be typed up diferently

    Since in XML everything needs to be closed properly, you define these tags as being "self-closing", note the following:

    HTML3.02
    Code:
    <img src="something.img">
    <br clear="both">
    in XHTML1.1
    Code:
    <img src="something.img" alt="" />
    <br />
    You'll notice the " />" at the end, this tells the UA that this tag hasn't got a closing half.

    The line-break tag also doesn't have any clear attribute anymore, this is handled by CSS now.

    Oh, and the <img /> element now has a REQUIRED attirbute, "alt=""" which tells the UA what to render if the image can't be found OR if the UA can't render the image, its "alternate text". It is NOT, I repeat, NOT. meant to be abused as a tooltip. If you want tooltips in graphical browsers, then use the title="" attribute. Only IE6 incorrectly renders alt="" as a tooltip.

    Thats it for this week!
    Tune in next time for more bores with XHTML1.1 !!

    See ya real soon kids!
    Last edited by ChiefWigs1982; July 17th, 2006 at 10:04 AM.
  6. #4
  7. Cunning Linguist
    ASP High Scholar (3500 - 3999 posts)

    Join Date
    Mar 2005
    Location
    I used to live at home, now I stay at the house
    Posts
    3,580
    Rep Power
    432

    Transition from HTML to XHTML 1.1


    This was originally posted by shamrog12 on January 19th, 2005;
    added here by ChiefWigs1982 on July 17th, 2006.
    #########################################




    When it comes to making the transition from HTML to XHTML 1.1 you will need to validate your code with the W3C's HTML Validator. My signature should have the link in it.

    Here are some XHTML equivalents to typical uses of HTML

    HTML:
    Code:
    <select name="select">
      <option value="1">first</option>
      <option value="2" selected>second</option>
      <option value="3">third</option>
      </select>
    XHTML:
    Code:
    <select name="select">
      <option value="1">first</option>
      <option value="2" selected="selected">second</option>
      <option value="3">third</option>
      </select>
    **** Notice the bold-faced differences

    ##########################################

    HTML:
    Code:
    <hr width="100%">
    XHTML:
    Code:
    <p style="border-bottom:1px solid black;width:100%;">&nbsp;</p>
    *** Using CSS there are numerous ways to achieve your horizontal line goal. This is merely one of them.

    ##########################################

    HTML:
    Code:
    <form action="whatever.asp" method="post" name="myForm">
    XHTML:
    Code:
    <form action="whatever.asp" method="post" id="myForm">
    *** The name attribute is no longer allowed in form tags, however it is still allowed in input tags and other form elements contained within a form.

    ##########################################

    HTML:
    Code:
    <td width="500">
    XHTML:
    Code:
    <td style="width:500px;">
    *** This usage of the style attribute is ok for now but you'll really want to do something like:
    Code:
    <td class="tdWid500">
    where you have defined a style named td.tdWid500 in your style sheet and assigned a width to it. This is true for width of ALL KINDS!!!

    ##########################################

    HTML:
    Code:
    <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    XHTML:
    Code:
    <body style="margin:0px;">
    *** place this style in your style sheet in the following manner:

    Code:
    body {
        margin:0px;
    }
    ##########################################

    DIV will become your friend. HTML developers complain about the <div> tag a lot and that's all going to change with the move to XHTML. Divs will help to center items and float items etc. Some examples:

    HTML:
    Code:
    <table align="center">
    XHTML:
    Code:
    <div style="margin-right:auto; margin-left:auto; text-align:center;"><table>.....</table></div>
    *** Again, placing these style in a style sheet and applying them to tags through classes is the correct way to go.

    ##########################################

    HTML:
    Code:
    <img src="myimg.jpg" align="right">
    XHTML:
    Code:
    <img src="myimg.jpg" style="float:right;" alt="myimg" />
    ##########################################

    There are numerous other differences but this should help you with some of the more common issues that appear during conversion. XHTML requires that you use proper coding techniques too so doing things like placing a <form> tag between a <tr> and <td> tag to remove the padding around the form tag will no longer work. You'll have to set the margin:0px or padding:0px in your style sheet for forms.

    Feel free to post parts of your code that you cannot get XHTML compliant. Make sure that you try to figure it out yourself first as that's the best way for you to learn!!!

    You will find that different browsers react to XHTML differently.... well, IE treats it differently. Its treatment is most obvious in the way it centers, or doesn't center, items easily. You sometimes have to machine gun the mosquito in order to get elements such as tables to be centered in IE for the PC. IE for the Mac has similar issues including an issue with body margin values in style sheets but IE for the Mac is on its way out thankfully. When you're checking your work on a Mac, look how your site works in Safari (best Apple browser) and Firefox (arguably the best browser overall).
    Last edited by ChiefWigs1982; July 17th, 2006 at 10:04 AM.
  8. #5
  9. Cunning Linguist
    ASP High Scholar (3500 - 3999 posts)

    Join Date
    Mar 2005
    Location
    I used to live at home, now I stay at the house
    Posts
    3,580
    Rep Power
    432

    The truth about divs!


    This was originally posted by Phoenix on January 19th, 2005;
    added here by ChiefWigs1982 on July 17th, 2006.
    #########################################




    More from 1337_d00d...

    The truth about divs!
    "Div" is actually slang from where I live for a "stupid person", and in my book, you're a div if you don't use divs!

    Anyway, I thought I'd explain the importance <div> and <span>

    Say you have a semantic page with absolutely NOT presentational markup whatsoever... for example, that graduate thesis:

    Here's it in full:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html>
    <head>
       <title>My graduate thesis</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <meta http-equiv="Content-Language" content="en-US" />
    </head>
    <body>
       <h1>My Graduate Thesis</h1>
     
       <h2>Contents:</h2>
       <ol>
    	  <li><a href="#intro">Introduction</a></li>
    	  <li><a href="#xhtml">Beginning XHTML</a></li>
    	  <li><a href="#misc">Misc</a></li>
    	  <li><a href="#end">Big ending...</a></li>
       </ol>
     
      <h2 id="intro">Introduction</h2>
      <p>Lorem Ipsum Dolor Sit Amet</p>
     
      <h2 id="xhtml">Beginning XHTML</h2>
      <p>Lorem Ipsum Dolor Sit Amet</p>
      <pre>&lt;html&gt;</pre>
      <p>Lorem Ipsum</p>
     
      <h2 id="misc">Misc</h2>
      <p>Lorem Ipsum Dolor Sit Amet</p>
     
      <h2 id="end">thats it really...</h2>
      <p>Lorem Ipsum Dolor Sit Amet</p>
     
      <h2 id="glossary">Glossary</h2>
      <dl>
    	 <dt><acronym title="eXtensible Hypertext Markup Language">XHTML</acronym></dt>
    	 <dd>...the best interchangable document definition language out there (PostScript doesn't count! ;) )</dd>
     
    	 <dt><acronym title="Cascading Style Sheets">CSS</acronym></dt>
    	 <dd>the most popular way to add appearance to semantic documents (not just XML, HTML, or XHTML y'know)</dd>
      </dl>
     
      <p>And some footer info</p>
    </body>
    </html>
    Hey... I never said it was a "good" thesis

    So now... we want to stylise it...

    In CSS2.1, styles are made of up 4 parts:
    a) The Selector Rule
    b) The delimeters
    c) Properties
    d) Property values

    Right now I'll be focusing on "Selector Rules"

    Selector rules, aka "selectors" or "style rules", are the bits that tell the UA (user agent) what conditions must be met for the style to be applied and to what element or node to apply the style to.

    Those of you coming from <table> backgrounds might feel a bit intimidated by CSS... wondering "a paragraph can have a background image?!? I thought only cells could!"

    Indeed, it is uncanny how something like "borders" apply to every single element

    ....But hey... this is because of backwards thinking, before with the SGML based HTML, elements were "unique" in the way the browser handled them, but now, with XML browsers, things are different

    Now... each element node you create is a "box" (even tables too!, the <table> is a box, each <tr> are horiztonal boxes inside, then with <td> boxes, all having a "3D-like" border applied, its nothing special)

    Each box has its own default padding, margins, font style, etc... all defined by the browser. With overriding CSS, you can make a <p> look like a <blockquote> and vice-versa...

    Anyway, back to selectors:

    The main ones are:

    a) ID Selector

    Code:
    #introduction {
    Use this to apply the style to the single element that has that ID attribute, only one element can have the same ID per-page...

    b) Class Selector

    Code:
    .firstparagraph
    Use this to define a style to a "class" of elements... best practice is to do this SEMANTICALLY. That is... you don't class elements according to what you want them to look like, but rather... what their purpose in the document is...

    A fully semantic XHTML document should make nothing but sense when read WITHOUT any stylesheets or javascript interactivity. This includes looking at the source code itself

    Examples of bad class names:

    Code:
    .500px
    .whiteborder
    .noborder
    .nostyle
    Good examples

    Code:
    .maincolumn
    .navbarmenu
    .mainparagraph
    .lastitem
    Note... there are RULES regarding class and ID names:

    a) NEVER begin a class or ID attribute with an underscore (I know ASP.Net does, but thats for a reason, don't copy them)
    b) It helps to keep it all lower-case! IE6 is case insensitive when it comes to classes and ID names, but the rest of the other browsers arn't.... Which is to say that if you have a <div id="Main">, IE will apply the style #main, but Mozilla, Opera, Firefox, etc... won't.
    c) If you're working with ASP.Net, be aware that it overrides the ID="" attribute of any elements set to runat="server", there are "semi-workarounds", but it helps to get ASP.Net to generate your document BEFORE you start working on stylesheets, so you can name your rules appropriately.
    d) NO SPACES!! Use either Pascal naming: lowercaseThenCapitalise, JS naming: FirstLetterIsAlwaysCapitalised, or userscores: no_need_for_capitalisation, or hyphens/dashes: again-no-need-for-capitalisation

    Combining multiple classes:

    You can give an element multiple classes, hence why you can't have spaces in class names:

    <div id="header" class="firstheader veryimportant">

    Means that the UA will apply the following rules:

    #header
    .firstheader
    .veryimportant

    You can also have a slightly different rule that only applies if the class is for a specific element

    Say you've got a .veryimportant class, you could have a

    a) very important paragraph:

    <p class="veryimportant">

    b) a very important header:

    <h1 class="veryimportant">

    You may want the very-important header to be in bold, but you'd like the paragaph to be in italic, but both in red

    ...This is also where the "cascading" effect of CSS comes into play... think of it as being similar to Object Inheritance if you're from a programming background:

    Like so:

    Code:
    .veryimportant { color: red; }
    h1.veryimportant { font-weight: bold; }
    p.veryimportant { font-style: italic; }
    note the use of "single-line" styles.... CSS ignores whitespace! (Just like Java, C, C++, C#, J#, J+++, JScript, ActionScript, etc...)

    Note, do NOT confuse the above rules with:

    Code:
    h1 .veryimportant { font-weight: bold; }
    Notice the space between the h1 and the period. The above rule tells the browser to apply the rule only to children of h1 with the class "veryimportant", rather than any h1 with the veryimportant class itself

    c) Advanced selectors:

    There's more to CSS than IDs and Classes.

    You can also apply a style straight to ALL instances of an element

    Say you want ALL paragraphs to have a blue background:

    Code:
    p {
    background: blue;
    }
    Descendant selectors are useful too... they mean that only a specicic child of a parent element will get the style

    Say we want all paragraphs who are inside <div id="main"> to have blue backgrounds, then:

    Code:
    #main p {
       background: blue;
    }
    You can extend this further...

    Say we want to give 3-level down bulleted lists a "disc" bullet image:

    Code:
    #main ul li ul li ul li {
       list-style: disc;
    }
    Which means that all <li> elements that are children of a <ul> element which is a child of a <li> which is a child of a <ul> which is a child of a <li> which is a child of a <ul> which is a child of #main will get disc bullets.

    Cool, eh?

    Unfortunatley, these are all the main selectors supported by IE6.0, there are others, but since IE6 doesn't support them, there isn't much point using them, but I'll explain them anyway:

    :hover psuedoclass

    Okay.. IE6 supports this... to an EXTENT, it only works on the <a> element, such as: a:link:hover and a:visited:hover (and a:hover, but a:link:hover is preferable)

    Using this class, you can define hover effects to any element you want, without ANY JavaScript, el neato again

    ...My fingers are tired, I'll get back to this later then

    'till then, enjoy today's appendum to "XHTML Tutorial"
    Last edited by ChiefWigs1982; July 17th, 2006 at 10:04 AM.
  10. #6
  11. Cunning Linguist
    ASP High Scholar (3500 - 3999 posts)

    Join Date
    Mar 2005
    Location
    I used to live at home, now I stay at the house
    Posts
    3,580
    Rep Power
    432

    Thinking inside the box


    This was originally posted by Phoenix on April 6th, 2005;
    added here by ChiefWigs1982 on July 17th, 2006.
    #########################################




    I've received a few PMs and related on how to develop CSS websites or to transition from a table-based to a semantic XHTML based site.

    Okay... the first mistake these people have made is being too naive or being misonformed over what they need to do.

    a) You don't develop CSS websites, because CSS is just a *part* of the whole model... you don't call them "Fuel-tank cars" just because they use fuel-tanks, do you?

    b) Whilst it's easier to transition a website when you use big main "content cells", its a LOT harder on dynamically generated pages or doesn't have a "main cell".

    My point is... if you want to learn how to create mean, lean, portable, flexible, device-independent websites you need to ditch EVERYTHING you know (or think you know) about HTML and CSS.

    First off... CSS

    CSS is NOT a tool for just changing font appearance or adding "extra, special details" to elements and controls, it's more than that... and using CSS like that is an abuse of the system.

    Second off... XHTML

    Read my XHTML tutorial here first.

    Third.... Ditching tables

    Create a new page.... with the correct XHTML DTD and appropiate <html xmlns="" xml:lang=""> attributes.

    You should have a <body> element in there somewhere too.

    Think of it in terms of "boxes".

    Every single element (they're not called "tags" anymore) creates a box.

    It helps to use a decent browser for this... I recommend Firefox with the WebDeveloper Toolbar. Get both from Mozilla.org and the Firefox Extensions site respectivly.

    Now... since each element creates a box, you can modify this box with CSS.

    Lets say we've got:

    Code:
    <p>Lorem Ipsum</p>
    In this case... all we've got is a box with some special padding, margins, and line values specified by the browser's built-in stylesheet.

    Therefore, if we override these, the <p> element becomes a boring default box...

    Try this:

    Code:
     
     p { margin: 0; padding: 0; line-height: 1.2em; }
     
     div { margin: 0; padding: 0; line-height: 1.2em; }
     
     <p>Lorem Ipsum</p>
     
     <div>Lorem Ipsum</div>
    You'll notice they're both identical.

    Now do you understand what a "box" is now?

    In Firefox, enable the WebDev toolbar and choose "Outline block level elements"

    This then shows both of the boxes you created.

    End of Part 1.


    Comments... please!
    Last edited by ChiefWigs1982; July 17th, 2006 at 10:03 AM.
  12. #7
  13. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Oct 2007
    Location
    Fort Worth, TX
    Posts
    12
    Rep Power
    0
    this is amazing info. Please allow me to ask a dumb question.

    I am hearing that using html font tags is frowned upon in the SEO world vs using CSS, which I am totally unfamiliar with. My site with Ipowerweb has a wysiwyg editor that save amateurs like myself, and I can mess with html code some.

    Do I REALLY need to learn another language? What is the benefit? What does the newer versions do that html cannot? Am I hurting myself by sticking with html?

    Thanks for any replies. And If I have posted this in the wrong place, please forgive.
  14. #8
  15. No Profile Picture
    Registered User
    ASP Explorer (0 - 99 posts)

    Join Date
    Oct 2007
    Location
    Fort Worth, TX
    Posts
    12
    Rep Power
    0
    I forgot to post my site for your entertainment/opportunity to rip it apart. Please don't laugh, but I am seriously wondering what difference css makes. I know it's basic, and flash is supposed to be worse for SEO, so since it's taken me this long to put up something presentable(IMHO), I'm not looking forward to having to take the next step. Is there a wyswyg program that does it all for you?

    sorry, need to look at forum rules. didn't realize I couldn't post the site link. Input still very welcome. thanks.

Similar Threads

  1. Including javascript in html and having it validated
    By figo in forum HTML, JavaScript And CSS Help
    Replies: 4
    Last Post: January 7th, 2007, 11:28 AM
  2. Replies: 5
    Last Post: February 4th, 2006, 08:08 PM
  3. From Form to Email
    By DaGreenStar in forum ASP Development
    Replies: 4
    Last Post: September 7th, 2004, 07:42 AM
  4. 'Object required' error
    By aliaga61 in forum ASP Development
    Replies: 2
    Last Post: January 15th, 2004, 01:19 PM

IMN logo majestic logo threadwatch logo seochat tools logo