The following sites are used as reference for this:
http://www.tizag.com/htmlT/htmlattributes.php
http://www.w3schools.com/
http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341
Quick List of html stuff from w3schools
Every page should have at least the following four elements:
* html – start <html> and end </html> of every web page
* head - scripting and formatting go here
* title – goes into the head element
* body - the content
* XHTML needs standard stuff as well
Table (td) Element
DIV Element
SSI
Forms
HTML CSS style reference
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>
<br /> - line break
<hr> - horizontal line
Comments
<!– This is a comment –>
Hyper Links
<a href=”http://www.w3schools.com/”>Visit W3Schools!</a>
Anchors
Anchor – <a name=”tips”>Useful Tips Section</a>
Refernce – <a href=”http://www.w3schools.com/html_links.asp#tips”>Jump to the Useful Tips Section</a>
Images
<img src=”boat.gif” alt=”Big Boat”>
More image stuff including image maps
Colours
Information on colour mapping etc here. HTML colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex #00). The highest value is 255 (hex #FF).
Table Element (td)
The basic way to create columns on a page is to use the table HTML element (td), the example code creates coumns that automatically resize:
<table border=”0″ width=”100%” cellpadding=”10″>
<tr>
<td width=”20%” valign=”top”>
This is the left navigation
</td>
<td width=”60%” valign=”top”>
This is the main content
</td>
<td width=”20%” valign=”top”>
This just some interesting stuff on the left hand side
</td>
</tr>
</table>
<tr> is used to create rows
<td> is used to create cells
<table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr> </table> A non-breaking space can be input in an empty cell so that it appears OK ( ) Other useful tags are: <th> - table header <caption> - table caption Useful examples here
DIV Tag
The div is used define different sections within a page, this allows formating to be (easily) applied to that section. Could therefore use CSS to define formating for a section. In some cases it is easier to use the DIV tag instead of putting everything in a table. NOTE- SHOULDN’T REALLY USE ALIGN ATRIBUTE IN THE DIV TAG
<div id=”menu” align=”right” >
<a href=”">HOME</a> |
<a href=”">CONTACT</a> |
<a href=”">ABOUT</a> |
<a href=”">LINKS</a>
</div>
<div id=”content” align=”left” >
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
<h5 >Content Article Number Two</h5>
<p>Here’s another content article right here.</p>
</div>
CSS Positioning can be used to specify exactly elements should go
SSI – Server Side Includes
To save me having to update the same header on every page when I change something, I will use SSI to reference the page with the right info. While I could type everything here, the following reference is useful instead.
File Includes
<!–#include file=”included.html” –> - used when the file I’m including is in the same directory
<!–#include virtual=”/directory/included.html” –> - used when the file isn’t in the same directory
Date/Time Includes
<!–#config timefmt=”%a” –> <!–#echo var=”DATE_LOCAL” –>
<!–#echo var=”DATE_LOCAL” –> - This never changes, it the other part that determines what is displayed!
The first part can have a range of arguments, these are displayed using e.g. <!–#config timefmt=”%A, %B %d, %Y” –> There’s 21 options arguments here.
File Attribute Includes
The links provide more information on what’s available but the most useful are:
<!–#echo var=”Document_Name” –>
Returns the name of the document.
Returns the path to the document plus its name.
Returns when the document was last posted to the server.
<form>
First name:
<input type="text" name="firstname">
<br>
Last name:
<input type="text" name="lastname">
</form>
<form>
<input type="radio" name="sex" value="male"> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>
<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike">
<br>
I have a car:
<input type="checkbox" name="vehicle" value="Car">
<br>
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane">
</form>
Action Attribute & Submit Button – Following example will send information to file html_form_submit.asp
<form name="input" action="html_form_submit.asp" method="get"> Username: <input type="text" name="user"> <input type="submit" value="Submit"> </form> Can also do drop down boxes: <form action=""> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> </form> Head Element This provides information about the document Can only have the following: <base> - defines base URL for all pages <link> - defines a resource reference <meta> - defines meta info, has been abused in the past and not a great way getting listed on search engines. Could still use: <meta name="description" content="descrption of content"> <meta name="keywords" content="list of keywords"> <title> - document title <style> <script> XHTML Mandatory Elements The following are mandatory elements, DOCTYPE defintion can vary but what's below is appropriate when using CSS for presentation. XHTML can be validated automatically here <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>Title goes here</title> </head> <body> </body> </html> CSS The CSS syntax is made up of three parts: a selector, a property and a value. The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces are separated by a colon, and surrounded by curly braces. If you wish to specify more than one property, you must separate each property with a semicolon. e.g body {color: black} p {text-align:center;color:red}
