(X)HTML and CSS Guide

Frogger · **Posted:** October 4th, 2007, 8:20 am

(X)HTML Guide

In this guide I will explain some brief yet important aspects to the language HTML. First off I want to make it clear that HTML is not a programming language. It is a Markup Language, parsed on the client-side not the server-side. Javascript and HTML work both hand in hand together called DHTML. HTML stands for Hypertext Markup Language. These file extensions are either .html or .htm.

Right now is a pretty interesting time for HTML. Since technology is getting better and browsers are improving so are the capabilities of HTML. One thing introduced in IE5 was a wonderful thing called CSS (Cascading Style Sheet). This depreciates those hard coded attributes for styling a tag and bring it to one separate language. Since IE5, css has gained many features, and now has the ability to create web layouts in a block table format with out the tables themselves. It is now being a standard today that css shall be used to layout a design and not using table tags.

So now that we've covered all that lets get to the guide!

1. Document Type

The biggest difference between HTML and XHTML is the syntax. HTML has a very lax syntax and can pretty much do what you want it to do without properly doing it. While XHTML is a very picky version of HTML. When starting a HTML web page you must first specify what type of document it is. We do this by using the <!DOCTYPE> tag.

HTML 4.01

HTML Transitional DTD
This ia a loose interpretation of parsing the HTML and is recommended for mostly all web pages.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML Strict DTD
A user shall only use this if their code syntax is correct. This is a strict interpretation of HTML parsing.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Frameset DTD
This is used when your document is using framesets.

Code: Select all

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0

XHTML Transitional DTD
This ia a loose interpretation of parsing the XHTML and is recommended for mostly all web pages.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML Strict DTD
A user shall only use this if their code syntax is correct. This is a strict interpretation of XHTML parsing.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML Frameset DTD
This is used when your document is using framesets.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

2. Header

The header area of the page is used to establish the information about the web page document. The browser does not display the header information to the user. The following tags are used in the head tag.

Base

The base element specifies a base URL for all the links in a page.
Example: <base href="http://www.url.com/" />
Link

This element defines the relationship between two linked documents. Most commonly used for linking a css file to the web page document.

Example: <link rel="stylesheet" type="text/css" href="theme.css" />
Meta

The <meta> element provides meta-information about your page, such as descriptions and keywords for search engines and refresh rates.

Example: <meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" />
Script

Defines a script, such as a JavaScript.

Example: <script type="text/javascript">document.write('Hello World!');</script>
Style

Defines a style in a document.

Example: <style type="text/css">* { padding: 0px; margin: 0px; }</style>
Title

This element defines the title of the document.

Example: <title>Hello World!</title>

3. Body

The body area of the web page document is what displays to user's screen. In the body tag it uses the tags such has <table>, <a>, <div>, <span>, ect.. Below I will cover some of the most important tags used in the body tags.

Tables

The <table> tag defines a table. Inside a <table> tag you can put table headers, table rows, table cells, and other tables.
- Table Row
  Defines a row in a table.
  
  Example: <table><tr><td></td></tr></table>
- Table Header
  
  Example: <table><tr><th></th></tr><tr><td></td></tr></table>
- Table Data
  
  Example: <table><tr><th></th></tr><tr><td></td></tr></table>

Div

The <div> tag defines a division/section in a document.

Example: <div style="color: red;">Hello World!</div>
Span

The <span> tag is used to group inline-elements in a document.

Example: <span style="color: blue;">Hello World!</span>
A (Link)

The <a> tag defines an anchor. An anchor can be used in two ways:

Example: <a href="http://www.url.com">Hello World!</a>
BR

The <br> tag inserts a single line break.

Example: Hello World!<br />Hello World!

Well that's pretty much it. I hope what I've showed you really helps your understanding in HTML or gets you at least a foundation. If you're interested more in HTML just remember google is your friend, and you're bound to find a website with a guide that's a little more extensive than mine.

CSS Guide

CSS started out in 1993 by a Japanese fellow who wanted to implement a style system. It wasn't until 1999 - 2000 where css was actually being implemented in browsers. The W3c used the fundamentals of the proposed CSS is 1993 and used it to make what is today's modern CSS.

Like most programming languages a css function is similar to creating a function in PHP.

Code: Select all

body {
   background-color: #fff;
   color: #000;
}

You start the function with defining either a tag, class or id. Defining a style for a tag is like shown above.

Code: Select all

.class {
   width: 100px;
   border: 1px dotted #000;
}

Code: Select all

<span class="class">Hello World!</span>

A class has a . before the name of the class and to use the class in the tag you have to use the class attribute and then the class name as the value.

Code: Select all

#id {
   width: 100%;
   background-color: c0c0c0;
   color: 111;
   font-size: 14px;
}

Code: Select all

<div id="id">Hello World!</div>

As shown above to create an id function you must include a # before the name of the id. An id can only be used once in a document. If you plan on using a style function more than once, you'll have to use a class.

You can either use in-line css, putting the css in a <style> tag or linking a css file to your web page document.

Below you'll find sample HTML and CSS code I've done up for a school project.

http://natedentzau.net/school/avtex/

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
   <title>Avtex Timeline .::. NateDentzau.Net</title>
   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
   <style type="text/css">
   <!--
      * {
         margin: 0px;
         padding: 0px;
      }

      body {
         background-color: #fff;
         font-family: "Lucida Sans", Arial, "Times New Roman", Times, sans-serif;
         font-size:13px;
         color: #000;
         padding: 5px;
      }

      #main {
         margin-left: auto;
         margin-right: auto;
         width: 800px;
      }
         #header {
            text-align: center;
            margin-bottom: 30px;
         }

         #content {
            text-align: left;
         }

            .blurb {
               margin-bottom: 70px;
            }

            .blurb img {
               float: left;
               margin: 0px 5px 5px 0px;
            }

            .blurb p {
               color: #000;
            }

            .blurb p:hover {
               color: #b03b02;
            }

         #footer {
            margin-top: 25px;
         }

            #copyright {
               text-align: center;
            }

            #w3c {
               margin-top: 10px;
               text-align: center;
            }

      img {
         border-width: 0px;
      }

      a {
         color: #b03b02;
         text-decoration: underline;
      }

      a:hover {
         text-decoration: none;
      }
   -->
   </style>
</head>

<body>
   <!-- Main Body -->

   <div id="main">
      <!-- Header -->
      <div id="header">
         <img src="images/logo.gif" alt="Avtex Timeline" />
      </div>

      <!-- Content -->
      <div id="content">
         <!-- Timeline Blurbs -->

         <div class="blurb">
            <img src="images/1920.gif" alt="1920" />
            <p>During the 1920s, the site was primarily used for agriculture with orchards along the Shenandoah River and field crops towards the inland areas.</p>

         </div>

         <div class="blurb">
            <img src="images/1930.gif" alt="1930" />
            <p>In the late 1930s plant construction was initiated with fiber manufacturing operations beginning in 1940. Over the course of 49 years, the plant was used to manufacture fibers such as rayon, polyester, and polypropylene.</p>

         </div>
         
         <div class="blurb">
            <img src="images/1940.gif" alt="1940" />
            <p>From 1940 though 1962, American Viscose owned the facility.</p>
         </div>

         <div class="blurb">
            <img src="images/1963.gif" alt="1963" />
            <p>FMC Corporation (FMC) owned the plant from 1963 until 1976. In 1976, Avtex Fibers, Inc. (Avtex) purchased the Site from FMC and continued manufacturing operations until 1989, when Avtex closed the plant and declared bankruptcy. Avtex's bankruptcy trustee currently controls the Site. FMC does not own any portion of the Site.</p>

         </div>

         <div class="blurb">
            <img src="images/1986.gif" alt="1986" />
            <p>In 1986, the U.S. Environmental Protection Agency (EPA) added the Site to its National Priorities List (NPL) of hazardous waste sites to be cleaned up under the Superfund program. Beginning in 1986, Avtex, and later FMC, conducted certain investigations and clean-up actions at the Site. Since 1989, EPA has been conducting various removal and remedial actions.</p>
         </div>

         <div class="blurb">
            <img src="images/1989.gif" alt="1989" />

            <p>In 1989, all manufacturing operations were permanently shut down.</p>
         </div>

         <div class="blurb">
            <img src="images/1997.gif" alt="1997" />
            <p>In 1997, EPA began conducting a Removal Action to demolish approximately 17 acres of buildings. As each building was demolished, EPA placed the debris into piles.</p>
         </div>

         <div class="blurb">

            <img src="images/2007.gif" alt="2007" />
            <p>Currently, building removal actions are continuing with building debris being trucked off site for disposal at EPA approved landfills. The remaining buildings are being inspected before demolition to record and document potentially hazardous building areas and materials. Areas found to be potentially hazardous will be demolished and disposed of in accordance with EPA guidelines.</p>
         </div>
      </div>

      <!-- Footer -->
      <div id="footer">
         <!-- Copyright -->
         <div id="copyright">

            &copy; 2007 <a href="http://www.natedentzau.net">Nate Dentzau</a>, All rights reserved. Information gathered from <a href="http://www.avtexfibers.com/">Avtex</a>.
         </div>

         <!-- W3C Validations -->
         <div id="w3c">
            <!-- Valid XHTML -->
            <a href="http://validator.w3.org/check?uri=referer"><img src="http://validator.w3.org/images/valid_icons/valid-xhtml11" alt="Valid XHTML 1.1" /></a>&nbsp;&nbsp;&nbsp;

            <!-- Valid CSS -->
            <a href="http://jigsaw.w3.org/css-validator/"><img src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS" /></a>
         <div>
      </div>
   </div>
</body>

</html>

Nate · **Posted:** October 5th, 2007, 9:53 am

Nice guide, I was thinking of making something like this.

tau_xi · **Posted:** October 5th, 2007, 5:45 pm

I'm just wondering, what is the benefit of using XHTML over plain HTML?

Also, one of the best things about CSS is being able to host it as a separate file so you don't need to have it rewritten on every page, which saves time and space (especially when updating the CSS).

Just put this in the head section:

Code: Select all

Frogger · **Posted:** October 5th, 2007, 7:21 pm

There honestly isn't a benefit. It's just a step up from HTML, showing you know more about HTML than the average person. Plus it's being standard.. Give it a few years and HTML will be depreciated and XHTML will be standard.

Matt · **Posted:** October 6th, 2007, 5:28 am

Props on the guide, maybe throw in a little bit about PHP?

-Matt

Tom · **Posted:** October 6th, 2007, 8:43 am

http://w3schools.com/

?

Frogger · **Posted:** October 6th, 2007, 10:20 pm

Tom wrote:

http://w3schools.com/

?

I used some tidbits from w3schools.. But most of it wrote myself.

As for doing PHP, I'll doing it in a couple days.

Tru Ninja · **Posted:** October 16th, 2008, 2:41 pm

Frogger wrote:

Tom wrote:

http://w3schools.com/

?

I used some tidbits from w3schools.. But most of it wrote myself.

As for doing PHP, I'll doing it in a couple days.

That was a year ago, you lied.

nice guide though.

tru :wink:

John · **Posted:** October 17th, 2008, 11:31 am

I'd like a PHP guide.

Nice work non the less

King Gimli · **Posted:** September 11th, 2010, 1:08 am

Frogger gots mad vapors. Helpful guide! :)

Razick · **Posted:** July 9th, 2011, 12:54 pm

Quote:

I'd like a PHP guide.

That would be interesting, but PHP is a much more complicated subject. If you want to learn it... go to w3schools or buy PHP Solutions: Dynamic Web Design Made Easy (second edition). PHP Sols is very up to date and promotes good practice coding.

Razick · **Posted:** July 9th, 2011, 12:55 pm

Maybe this should be updated with a mention of HTML5? Or a separate guide...

Demon · **Posted:** November 10th, 2011, 5:34 pm

Not entirely sure about many standards which have changed since HTML5's release. I thought it was mostly addition of functionality for user-end effects.

Could be wrong. >.>

I would write wrote a PHP one, but I feel my coding etiquette would be strongly flamed by the other coders :awesome:

John · **Posted:** November 27th, 2011, 7:35 pm

Razick wrote:

Quote:

I'd like a PHP guide.

That would be interesting, but PHP is a much more complicated subject. If you want to learn it... go to w3schools or buy PHP Solutions: Dynamic Web Design Made Easy (second edition). PHP Sols is very up to date and promotes good practice coding.

Meh, compared to other languages it's pretty basic to learn

(X)HTML and CSS Guide

Who is online