Showing posts with label Html. Show all posts
Showing posts with label Html. Show all posts

Friday, 2 March 2012

Website Layouts


Website Layouts

Most websites have put their content in multiple columns (formatted like a magazine or newspaper).
Multiple columns are 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>

Try it yourself »
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>

Try it yourself »
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

Posted by at No comments:
Labels:

HTML Basic Document



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>
Posted by at No comments:
Labels:

Sorted by Hex Value


Sorted by Hex Value

Color NameHEXColorShadesMix
Black #000000 ShadesMix
Navy #000080 ShadesMix
DarkBlue #00008B ShadesMix
MediumBlue #0000CD ShadesMix
Blue #0000FF ShadesMix
DarkGreen #006400 ShadesMix
Green #008000 ShadesMix
Teal #008080 ShadesMix
DarkCyan #008B8B ShadesMix
DeepSkyBlue #00BFFF ShadesMix
DarkTurquoise #00CED1 ShadesMix
MediumSpringGreen #00FA9A ShadesMix
Lime #00FF00 ShadesMix
SpringGreen #00FF7F ShadesMix
Aqua #00FFFF ShadesMix
Cyan #00FFFF ShadesMix
MidnightBlue #191970 ShadesMix
DodgerBlue #1E90FF ShadesMix
LightSeaGreen #20B2AA ShadesMix
ForestGreen #228B22 ShadesMix
SeaGreen #2E8B57 ShadesMix
DarkSlateGray #2F4F4F ShadesMix
DarkSlateGrey #2F4F4F ShadesMix
LimeGreen #32CD32 ShadesMix
MediumSeaGreen #3CB371 ShadesMix
Turquoise #40E0D0 ShadesMix
RoyalBlue #4169E1 ShadesMix
SteelBlue #4682B4 ShadesMix
DarkSlateBlue #483D8B ShadesMix
MediumTurquoise #48D1CC ShadesMix
Indigo  #4B0082 ShadesMix
DarkOliveGreen #556B2F ShadesMix
CadetBlue #5F9EA0 ShadesMix
CornflowerBlue #6495ED ShadesMix
MediumAquaMarine #66CDAA ShadesMix
DimGray #696969 ShadesMix
DimGrey #696969 ShadesMix
SlateBlue #6A5ACD ShadesMix
OliveDrab #6B8E23 ShadesMix
SlateGray #708090 ShadesMix
SlateGrey #708090 ShadesMix
LightSlateGray #778899 ShadesMix
LightSlateGrey #778899 ShadesMix
MediumSlateBlue #7B68EE ShadesMix
LawnGreen #7CFC00 ShadesMix
Chartreuse #7FFF00 ShadesMix
Aquamarine #7FFFD4 ShadesMix
Maroon #800000 ShadesMix
Purple #800080 ShadesMix
Olive #808000 ShadesMix
Gray #808080 ShadesMix
Grey #808080 ShadesMix
SkyBlue #87CEEB ShadesMix
LightSkyBlue #87CEFA ShadesMix
BlueViolet #8A2BE2 ShadesMix
DarkRed #8B0000 ShadesMix
DarkMagenta #8B008B ShadesMix
SaddleBrown #8B4513 ShadesMix
DarkSeaGreen #8FBC8F ShadesMix
LightGreen #90EE90 ShadesMix
MediumPurple #9370D8 ShadesMix
DarkViolet #9400D3 ShadesMix
PaleGreen #98FB98 ShadesMix
DarkOrchid #9932CC ShadesMix
YellowGreen #9ACD32 ShadesMix
Sienna #A0522D ShadesMix
Brown #A52A2A ShadesMix
DarkGray #A9A9A9 ShadesMix
DarkGrey #A9A9A9 ShadesMix
LightBlue #ADD8E6 ShadesMix
GreenYellow #ADFF2F ShadesMix
PaleTurquoise #AFEEEE ShadesMix
LightSteelBlue #B0C4DE ShadesMix
PowderBlue #B0E0E6 ShadesMix
FireBrick #B22222 ShadesMix
DarkGoldenRod #B8860B ShadesMix
MediumOrchid #BA55D3 ShadesMix
RosyBrown #BC8F8F ShadesMix
DarkKhaki #BDB76B ShadesMix
Silver #C0C0C0 ShadesMix
MediumVioletRed #C71585 ShadesMix
IndianRed  #CD5C5C ShadesMix
Peru #CD853F ShadesMix
Chocolate #D2691E ShadesMix
Tan #D2B48C ShadesMix
LightGray #D3D3D3 ShadesMix
LightGrey #D3D3D3 ShadesMix
PaleVioletRed #D87093 ShadesMix
Thistle #D8BFD8 ShadesMix
Orchid #DA70D6 ShadesMix
GoldenRod #DAA520 ShadesMix
Crimson #DC143C ShadesMix
Gainsboro #DCDCDC ShadesMix
Plum #DDA0DD ShadesMix
BurlyWood #DEB887 ShadesMix
LightCyan #E0FFFF ShadesMix
Lavender #E6E6FA ShadesMix
DarkSalmon #E9967A ShadesMix
Violet #EE82EE ShadesMix
PaleGoldenRod #EEE8AA ShadesMix
LightCoral #F08080 ShadesMix
Khaki #F0E68C ShadesMix
AliceBlue #F0F8FF ShadesMix
HoneyDew #F0FFF0 ShadesMix
Azure #F0FFFF ShadesMix
SandyBrown #F4A460 ShadesMix
Wheat #F5DEB3 ShadesMix
Beige #F5F5DC ShadesMix
WhiteSmoke #F5F5F5 ShadesMix
MintCream #F5FFFA ShadesMix
GhostWhite #F8F8FF ShadesMix
Salmon #FA8072 ShadesMix
AntiqueWhite #FAEBD7 ShadesMix
Linen #FAF0E6 ShadesMix
LightGoldenRodYellow #FAFAD2 ShadesMix
OldLace #FDF5E6 ShadesMix
Red #FF0000 ShadesMix
Fuchsia #FF00FF ShadesMix
Magenta #FF00FF ShadesMix
DeepPink #FF1493 ShadesMix
OrangeRed #FF4500 ShadesMix
Tomato #FF6347 ShadesMix
HotPink #FF69B4 ShadesMix
Coral #FF7F50 ShadesMix
Darkorange #FF8C00 ShadesMix
LightSalmon #FFA07A ShadesMix
Orange #FFA500 ShadesMix
LightPink #FFB6C1 ShadesMix
Pink #FFC0CB ShadesMix
Gold #FFD700 ShadesMix
PeachPuff #FFDAB9 ShadesMix
NavajoWhite #FFDEAD ShadesMix
Moccasin #FFE4B5 ShadesMix
Bisque #FFE4C4 ShadesMix
MistyRose #FFE4E1 ShadesMix
BlanchedAlmond #FFEBCD ShadesMix
PapayaWhip #FFEFD5 ShadesMix
LavenderBlush #FFF0F5 ShadesMix
SeaShell #FFF5EE ShadesMix
Cornsilk #FFF8DC ShadesMix
LemonChiffon #FFFACD ShadesMix
FloralWhite #FFFAF0 ShadesMix
Snow #FFFAFA ShadesMix
Yellow #FFFF00 ShadesMix
LightYellow #FFFFE0 ShadesMix
Ivory #FFFFF0 ShadesMix
White #FFFFFF ShadesMix
Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)