Sample HTML Page Layout
Standard code for top of page (html,head,title)
Each piece of HTML must be opened and closed properly, even the whole page itself has a <html> and </html> that are needed
<html>
<head> - invisible section, contains meta and title information
<meta> - for search engines, left blank for now with no attributes
<title>Simple HTML Tutorial</title>
</head>
<body> - content start
Body set attributes bgcolor or background using <body bgcolor="FFFFFF"> or <body background="background.jpg">
align paragraphs using p align="(center, left, right)"
<b> or <strong> for bold, <i> or <em> for italic, <u> for underline
(CONTENT INSIDE THE body)
Tables: Open with <table>, <tr>, <td>. Close with </td>, </tr>, </table> in order. <table> is for a table, <tr> is a table row, <td> is a table data cell
<table> starts new table, applicable attributes are align="(center, left, right)", width="(width in px)", height="(height in px)", border="(border thickness in px)"
<tr> starts new table row
<td> starts new table cell, applicable attributes are align="(center, left, right)", width="(width in px)", height="(height in px)", border="(border thickness in px)", valign="(bottom, top, center)"
| Table row 1, Cell 1 | Table row 1, Cell 2 |
| Table row 2, Cell 1 | Table row 2, Cell 2 |
The code for this table:
<table align="center" width="400" height="400" border="1"> |
Product layout style
<table align="center" width="950">
<tr>
<td align="center" valign="top" width="250">
|
48 Disc Storage System (Model QSO-48)
36"Wide x 24"Deep x 72"Height
(96) Disc Holder QSO-96 (128) Disc Holder QSO-128 (256) Disc Holder QSO-256 (512) Disc Holder QSO-512
This solid Disc holder will hold all of you Jewel Case discs. CD, DVD, Blu-Ray, mini-disc adapter, etc. This system holds a total of 12 types of media and has adjustable shelves to make sure that all your favorite discs will be organized and in a safe place that will last. There are different sizes available, so make sure you pick out the right one. Also available in different colors.
|
The code for this table:
<table align="center" width="950" border="2"> <tr> <td width="250" align="center" valign="top"><a href="images/icondw.png" target="_blank"> <center> <td> <font size="5"> <b>48</b> Disc Storage System</font> (Model QSO-48) <ul> <form name="Green1">
<option value="#"> (48) Disc Holder QSO-48 - $86.00 </option> <div align="left"> <font face="Arial" size="-1" color="#ff0000" > <font face="Arial" color="#003399">Blue, </font> <font face="Arial" color="#FFFF33"><b> Yellow,</b></font> <font face="Arial" color="#006633">Green, </font> <font face="Arial" color="#ff0033"> Red, </font> <font face="Arial" color="#CCCCCC">Ivory </font><font face="Arial" color="#000000"> or Black. </tr></table> |
How to implement images:
<img src="(LINK to image)">
Here is the code used for the above image which links to google:
<a href="http://google.com" target="_blank"><img src="images/fish-tales-poster-small.jpg" border="1" alt="fish tales poster" width="297" height="325" /></a>
attributes are alt="(mouseover text)", width="(width in px)", height="(height in px)", border="(border thickness in px)"
How to make links:
<a href="(LINK)">Text for Link or Image for Link</a>
attributes are target="(_blank (opens in new page), _self (opens in the already open page), _parent, _top)"
When ALL content is put on page in a HTML editor, the </body> tag is always at the end. Nothing outside of the body tags should be visible on a page. This is why if you code the HTML, it is important to check that all the viewable page content is inside the body tags <body> and </body>
</body>
</html>
End the HTML page with the </html> tag
Benefits in coding from hand:
- Able to thoroughly check website and code for errors with minimal time
- Able to fix errors very quickly without going through prompts
- Ability to implement many features and code that cannot be done in design views
Problems in coding from hand:
- Tags are not closed (stackup can occur, stackup is multiple tags not being closed and affecting multiple parts of the page below the code which has errors)
- Tags are written in uppercase instead of lowercase (lowercase is the XHTML standard now, makes it easier for browsers to distinguish code, </BODY> = BAD, </body> = good
Benefits in using HTML editors:
- Easy navigation of page and real time page view minus active script and php content
- Even beginners can create web pages
- Some tasks are cut down drastically in time that required lengthy coding such as creating navigation menus with rollovers and large tables
- Images can be previewed easily and checked for proper fitment
Problems in using HTML editors:
- Bold tag is used as <strong> and not <b> which some designers prefer using the shorter tag <b> and also <i> instead of <em>
- Extra code is implemented somtimes that is not needed nor wanted
- Lost insight to checking the code section for errors which are not visible in the design view
- Sometimes writing the code by hand is faster than clicking through the prompts
Ending thoughts:
- Understanding HTML and using a HTML editor together has huge advantages to design
- Using just a HTML editor without understanding the code will make it very hard in the long run
- Following the guidelines on this page you should be able to create a simple website with basic professional code
- Save your document soon and often to avoid losing work!!
- Keep at it and go out and read more about Web Design or read more articles at 3Dmitchell.com