0
not jut the hello world" type either... thats a little too simple
first off open up a notepad file.
Doctypes
Thanks to CodeCat
a web page always requires a <!DOCTYPE at the very top of the file.
A minimal HTML file therefore looks something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Page name</title> </head> <body> Inset whatever you want here. </body> </html>
This page uses the HTML 4.01 transitional doctype, but you can leave out the 'transitional' (i.e. 'HTML 4.01//EN') to get the strict doctype. A strict doctype permits less old and deprecated features, but it does encourage you to write correct HTML.
And for XHTML, a minimal file (using the XHTML 1.0 transitional doctype, the principle is the same) would look like this:
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Page name</title> </head> <body> Inset whatever you want here. </body> </html>
Notice the use of the additional attribute on the <html> element as well as the <?xml declaration on the first line. The <html xmlns= attribute is required for XHTML, though the xml declaration is not (but recommended nonetheless, as it specifies the encoding type for the file).
There are quite a few more doctypes and other things, which you can read all about here: http://www.w3.org/QA...d-dtd-list.html
the very basics of html is=
<html> <head> <title>Page name</title> </head> <body> Inset whatever you want here. </body> </html>
explained:
the <html> tag tell your browser that this is the start of an html page. the </html> tells the browser tht it is the end of the html page.
the info between the <head> and </head> tag is just general information about the page, this will not show within the browser window.
The <title> tag is what will be displayed in the tab or that bar across the top of the browser.
The text between the <body> and </body> tags are what will be displayed in the browser.
Other useful tags include:
<h1>this is a heading</h1>
<h2>this is a smaller heading</h2>
<h3>an even smaller heading</h3>
<h4> I'm sure you get the idea</h4>
<p>a paragraph</p>
<br>this tag (break) will move you to the next line<br>
<!-- anything in this tag (comment) will be ignored by your browser -->
Links
The following code will display a link
<a href="url">Text to be displayed</a>
This will display an image
<img src="image url" alt="caption" />
This will display an image with the ability to forward the user to another webpage when clicked on.
<a href="url"><img src="image url" alt="caption" /></a>
Table
This will create a 2x2 table
the <tr> defines a row. The <td> tag defines a cell.
<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>
(thanks to codecat)
Text formatting
There are 3 different ways of styling an element:
1. By adding a style= attribute directly to the element, and writing the CSS code in the attribute's value. This is recommended only for one-shot styles, which aren't used anywhere else, and even then you're better off using an id= attribute instead.
2. By adding an class="classname" attribute to the element, and defining a style for it in a separate style sheet. Use this when several elements may share the same styling. The CSS then refers to this class with .classname .
3. By adding an id="idname" attribute to the element. This works similar to a class, however an id name uniquely identifies a specific object and can therefore only be used once. Use this for styling individual elements rather than a set of similar ones. The CSS refers to the element with a particular id with #idname .
For options 2 and 3 (the preferred and most-used ones), you'll need to write a separate style sheet. There's two ways of doing that:
1. Write the CSS code in <style> tags, inside the page's <head>. This is called an embedded style sheet.
<head> <style type="text/css"> /* CSS code */ </style> </head>
2. Write the CSS code in a separate .css file, and then link to the .css file inside the page's head. This is called a linked style sheet. (Note: all code I write is written in XHTML and therefore uses a self-closing tag)
<head> <link rel="stylesheet" type="text/css" href="link/to/file.css" /> </head>
lists
Thanks to Prince Kassad
Unordered list:
<ul> <li>Cook delicious cookies</li> <li>Get a resupply of toxins</li> <li>Invite friends</li> </ul>
Ordered (numbered) list:
<ol> <li>Get 200 milliliters of fuel, 1 cookie and a hungry friend</li> <li>Pour the fuel over the cookie, then paint it so it looks somewhat like a cookie (use brown paint from your water color box)</li> <li>Get your hungry friend over to the kitchen</li> <li>Make him eat your special cookie</li> <li>Wait five minutes</li> </ol>
If you can think of anything else for me to add, just post.
Edited by Warbz, 29 November 2007 - 22:02.
