Monday, October 31, 2011

HTML 4.01 Quick List

HTML 4.01 Quick List


HTML Quick List from W3Schools. Print it, fold it, and put it in your pocket.

HTML Basic Document

<html>
<head>
<title>Title of document goes here</title>
</head>
<body>
Visible text goes here...
</body> </html>

Heading Elements

<h1>Largest Heading</h1> <h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links

Ordinary link: <a href="http://www.example.com/">Link-text goes here</a>
Image-link: <a href="http://www.example.com/"><img src="URL" alt="Alternate Text" /></a>
Mailto link: <a href="mailto:webmaster@example.com">Send e-mail</a>A named anchor:
<a name="tips">Tips Section</a>
<a href="#tips">Jump to the Tips Section</a>

Unordered list

<ul>
  <li>Item</li>
  <li>Item</li>
</ul>

Ordered list

<ol>
  <li>First item</li>
  <li>Second item</li>
</ol>

Definition list

<dl>
  <dt>First term</dt>
    <dd>Definition</dd>
  <dt>Next term</dt>
    <dd>Definition</dd>
</dl>

Tables

<table border="1">
  <tr>
    <th>Tableheader</th>
    <th>Tableheader</th>
  </tr>
  <tr>
    <td>sometext</td>
    <td>sometext</td>
  </tr>
</table>

Iframe

<iframe src="demo_iframe.htm"></iframe>

Frames

<frameset cols="25%,75%">
  <frame src="page1.htm" />
  <frame src="page2.htm" />
</frameset>

Forms

<form action="http://www.example.com/test.asp" method="post/get"> <input type="text" name="email" size="40" maxlength="50" />
<input type="password" />
<input type="checkbox" checked="checked" />
<input type="radio" checked="checked" />
<input type="submit" value="Send" />
<input type="reset" />
<input type="hidden" />

<select>
<option>Apples</option>
<option selected="selected">Bananas</option>
<option>Cherries</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>

</form>

Entities

&lt; is the same as <
&gt; is the same as >
&#169; is the same as ©

Other Elements

<!-- This is a comment -->
<blockquote>
Text quoted from a source.
</blockquote>
<address>
Written by W3Schools.com<br />
<a href="mailto:us@example.org">Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>

Sunday, October 30, 2011

HTML Layouts

HTML Layouts


Web page layout is very important to make your website look good.
Design your webpage layout very carefully.

Website Layouts

Most websites have put their content in multiple columns (formatted like a magazine or newspaper).
Multiple columns is created by using <table> or <div> tags. Some CSS are normally also added to position elements, or to create backgrounds or colorful look for the pages.

HTML Layouts - Using Tables

The simplest way of creating layouts is by using the HTML <table> tag.
The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:

Example

<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign="top">
<td style="background-color:#FFD700;width:100px;text-align:top;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;">
Content goes here</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © 2011 W3Schools.com</td>
</tr>
</table>

</body>
</html>

The HTML code above will produce the following result:

Main Title of Web Page

Menu
HTML
CSS
JavaScript
Content goes here
Copyright © 2011 W3Schools.com
Remark Note: Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data - NOT as a layout tool!

HTML Layouts - Using Div Elements

The div element is a block level element used for grouping HTML elements.
The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:

Example

<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © 2011 W3Schools.com</div>

</div>

</body>
</html>


The HTML code above will produce the following result:

Main Title of Web Page

Menu
HTML
CSS
JavaScript
Content goes here
Copyright © 2011 W3Schools.com


HTML Layout - Useful Tips

Tip: The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file. To learn more about CSS, study our CSS tutorial.
Tip: Because advanced layouts take time to create, a quicker option is to use a template. Search Google for free website templates (these are pre-built website layouts you can use and customize).

HTML Layout Tags

TagDescription
<table>Defines a table
<div>Defines a section in a document

HTML Doctypes

HTML Doctypes


A doctype declaration refers to the rules for the markup language, so that the browsers render the content correctly.

Example

An HTML document with a doctype of HTML 4.01 Transitional:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>

HTML Different Doctypes

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.
The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.
The doctype declaration should be the very first thing in an HTML document, before the <html> tag.
Remark Tip: Always add a doctype to your pages. This helps the browsers to render the page correctly!

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font and center). Framesets are not allowed:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">


Tips and Notes

Look at our table of all HTML/XHTML elements, and which DTD each element appear in.
Use W3C's Validator to check that you have written a valid HTML / XHTML document!

HTML DOCTYPE Element

Tag Description
<!DOCTYPE> Defines the document type. This declaration goes before the <html> start tag

How to Use Styles

How to Use Styles

When a browser reads a style sheet, it will format the document according to it.
There are three ways of inserting a style sheet:
  • External style sheet
  • Internal style sheet
  • Inline styles

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the <head> section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>


Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>


Inline Styles

An inline style can be used if a unique style is to be applied to one single occurrence of an element.
To use inline styles, use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the text color and the left margin of a paragraph:
<p style="color:blue;margin-left:20px;">This is a paragraph.</p>


HTML Style Tags

Tag Description
<style> Defines style information for a document
<link /> Defines the relationship between a document and an external resource

The HTML head Element

The HTML head Element

The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.

The HTML title Element

The <title> tag defines the title of the document.
The title element is required in all HTML/XHTML documents.
The title element:
  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search-engine results
A simplified HTML document:
<html>
<head>
<title>Title of the document</title>
</head>

<body>
The content of the document......
</body>

</html>


The HTML base Element

The <base> tag specifies a default address or a default target for all links on a page:
<head>
<base href="http://www.w3schools.com/images/" />
<base target="_blank" />
</head>


The HTML link Element

The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>


The HTML style Element

The <style> tag is used to define style information for an HTML document.
Inside the style element you specify how HTML elements should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>


The HTML meta Element

The <meta> tag provides metadata about the HTML document.
The meta element will be explained in the next chapter.

The HTML script Element

The <script> tag is used to define a client-side script, such as a JavaScript.
The script element will be explained in a later chapter.

HTML head Elements

Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base /> Defines a default address or a default target for all links on a page
<link /> Defines the relationship between a document and an external resource
<meta /> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document

The HTML meta Element

The HTML meta Element

Metadata is information about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The <meta> tag always goes inside the head element.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Keywords for Search Engines

Some search engines will use the name and content attributes of the meta element to index your pages.
The following meta element defines a description of a page:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
The following meta element defines keywords for a page:
<meta name="keywords" content="HTML, CSS, XML" />
The intention of the name and content attributes is to describe the content of a page.
Remark Note: A lot of webmasters have used <meta> tags for spamming, like repeating keywords (or using wrong keywords) for higher ranking. Therefore, most search engines have stopped using

The HTML script Element

The HTML script Element

The <script> tag is used to define a client-side script, such as a JavaScript.
The script element either contains scripting statements or it points to an external script file through the src attribute.
The required type attribute specifies the MIME type of the script.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
The script below writes Hello World! to the HTML output:

Example

<script type="text/javascript">
document.write("Hello World!")
</script>

The HTML noscript Element

The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn’t support client-side scripting.
The noscript element can contain all the elements that you can find inside the body element of a normal HTML page.
The content inside the noscript element will only be displayed if scripts are not supported, or are disabled in the user’s browser:

Example

<script type="text/javascript">
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>



HTML Script Tags

Tag Description

Defines a client-side script

Defines an alternate content for users that do not support client-side scripts
Online visitors counter users online