HTML
From WikiKnowledge
HTML, which stands for HyperText Markup Language, is a simple, extremely popular language for creating and linking documents on the Internet. It allows for pictures and text of different colors, sizes, and fonts to be viewed in a single document and for this document to link to others.
Contents |
[edit] Tags
A tag is a pair of angle brackets (<>) with some characters in between. For example, to make text bold you use the bold tag which is <b>. You also need to mark where you want the bold to stop, you do this with a closing tag. A closing tag is the same as an opening tag, except it has a forward slash (/) after the first angle bracket. So to mark where you want the bold text to stop you would use </b>. Here is a simple example:
| HTML | Result |
|---|---|
This is a sentence with some <b>bold</b> text. |
This is a sentence with some bold text. |
[edit] Attributes
Attributes are extra pieces of information that go into a tag. They come in name-value pairs. For example, to change the font of a piece of text you can use the font tag (<font>). However, this by itself won’t do anything; you need to say what part of the font you want to change and what you want to change it to. So to change the color to red you can use <font color="red">. The attribute you are changing is color and the value is red.
| HTML | Result |
|---|---|
<font color="red">This text is red.</font> |
This text is red. |
[edit] Basic Pages
A web page is nothing more then a simple text file. You can make a webpage using a simple text editor such as Notepad. A basic webpage will look like this:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
Hello World
</body>
</html>
The page starts with the html tag, and then it is divided up into two parts, head and body. The body part contains the part you see in the web browser. The head part contains information about the page. The most common information to put in there is a title, which is usually displayed in the title bar of the web browser.
To test out the webpage, copy the above text into your text editor and save the file as "WebPage.html". Then double click on the file that was saved and it should open up in your web browser with just the words Hello World.
You can then add in other tags that you learn later to make the page more interesting, for example you could make the text Hello World red and bold by using this HTML:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<font color="red"><b>Hello World</b></font>
</body>
</html>
[edit] Headings
HTML has 6 levels of headings using heading tags (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>). h1 is the bigest, while h6 is the smallest. You need to end a heading using a closing tag.
<h1>This is a heading</h1>
[edit] Presentational Elements
Some tags are used to change the style of the text, such as making it bold or underlining it. Here is a listing of some of them.
| Name | Tag | Code | Result |
|---|---|---|---|
| bold | <b> |
<b>bold text</b> | bold text |
| italic | <i> |
<i>italicized text</i> | italicized text |
| underline | <u> |
<u>underlined text</u> | underlined text |
| strikethrough | <s> or <strike> |
<s>striked out text</s> |
[edit] Lists
There are three different types of lists in HTML, ordered lists, unordered lists and definition lists. Unordered lists are lists using bullet points while an ordered list will be numbered (or can use letters, Roman numerals etc.). The definition list is used to give a list with a short description or definition.
[edit] Unordered lists
You start an unordered list using the <ul> tag and finish with a closing tag (</ul>). The items in the list are put into list item (<li>) tags.
| Code: | Gives: |
|---|---|
<ul>
<li>Point one</li>
<li>Point two</li>
<li>Point three</li>
</ul>
|
|
[edit] Ordered lists
An ordered list is similar to the unordered one except you need to use the <ol> tag instead.
| Code: | Gives: |
|---|---|
<ol>
<li>Point one</li>
<li>Point two</li>
<li>Point three</li>
</ol>
|
|
Ordered lists can take a type attribute to tell the browser how to number the list. The possible values are:
| 1 | Numbers (default) |
| A | Capital letters |
| a | Small letters |
| I | Large Roman numerals |
| i | Small Roman numerals |
So to make the list use Roman numerals you would use this code:
<ol type="i">
which would give you:
- Item 1
- Item 2
- Item 3
You can also set the value for each item in the list by using the value attribute. So for example you can start the numbering for a list at 10, and the rest of the list will automatically increase by 1 each time.
<ol>
<li value="10"> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
</ol>
|
|
[edit] Definition lists
A definition list uses three tags, <dl>, <dt> and <dd>.
| Code: | Gives: |
|---|---|
<dl>
<dt>Point one</dt>
<dd>Definition one</dd>
<dt>Point two</dt>
<dd>Definition two</dd>
<dt>Point three</dt>
<dd>Definition three</dd>
</dl>
|
|
[edit] Tables
Tables are used not only for displaying tabular data like timetables etc., they are also commonly used to layout an entire webpage. Tables are made using 3 tabs: <table>, <tr> table row, and <td> table data. Here is an example of a simple table. The border is set to 1 to make it easier to see the edges of the table.
| Code: | Gives: | ||||
|---|---|---|---|---|---|
<table border="1">
<tr>
<td>Top row, Left Column</td>
<td>Top row, Right Column</td>
</tr>
<tr>
<td>Bottom row, Left Column</td>
<td>Bottom row, Right Column</td>
</tr>
</table>
|
|
[edit] Attributes
The <table> tag can take the following attributes
| align | This can set to left, right or center. It controls where the table will be aligned on the page. |
|---|---|
| bgcolor | Controls the background color of the table. |
| border | This controls the width of the table's border in pixels. |
| cellpadding | Cellpadding puts an empty space between the contents of a cell and its edges. It can be in pixels or a percentage of the width of the table. |
| cellspacing | This controls the space between cells. It can be in pixels or a percentage of the width of the table. |
| dir | This indicates the direction of the text in the table. This can be set to ltr left to right for languages like English, or rtl right to left for languages like Arabic. |
| frame | This attribute controls the outside border of the table. It can be set to void, above, below, hsides, lhs, rhs, vsides, box or border. |
| summary | This is used to give a description of the table for browsers that are unable to display tables. |
| width | This controls the width of the table. It can be in pixels or a percentage. |
[edit] Links
Links, or hyperlinks are parts of a webpage that when clicked on bring you to another webpage. Links are made using the <a> tag. The a tag must also contain the href attribute, which tells the browser what page the link goes to. Here is a simple example:
| Code: | Gives: |
<a href="http://www.google.com" >Click here to go to Google</a> | Click here to go to Google |
The text in between the <a> tags will be the text that is clickable. You can also turn images into links simply by placing the image inside the <a> tags.
<a href="http://www.google.com" ><img src="example.gif"></a>
[edit] E-mail
You can also have the link go to an e-mail address. To go so you need to put mailto: in front of the address.
<a href="mailto:username@somewhere.com">Click here to send an e-mail</a>
When the user clicks on an e-mail link, their e-mail program should open with the address line filled in. You can also fill in other parts of the message as well. To do so you need to place a question mark (?) after the address with a list of name value pairs separated with ampersands.
<a href="mailto:username@somewhere.com?subject=Website&cc=username2@somewhere.com"> Click here to send an e-mail</a>
This link will fill in the subject line of the e-mail with "Website" and send an extra copy of the message to username2@somewhere.com. Here is a list of the properties that you can use:
| subject | This fills in the subject line. |
|---|---|
| body | Adds a message to the body of the e-mail. |
| cc | This sends a copy of the e-mail to the address given. This can be used multiple times by repeating the property for each e-mail address you want to send to. |
| bcc | This also sends a copy of the e-mail to the address given, but it does not list any other recipients. This can be used multiple times by repeating the property for each e-mail address you want to send to. |
If you need to place a space between any words you should use %20 instead of using a space.
[edit] Images
Images can be placed into webpages using the <img> tag. The <img> must contain the src attribute, which is the URL of the image you wish to insert into the page. For example, to show an image named apple.png in the images folder you would use
<img src="images/apple.png" />
[edit] Attributes
The <img> tag can take the following attributes:
| width | This controls the width of the image. It can be in pixels or a percentage. |
|---|---|
| height | This controls the height of the image. It can be in pixels or a percentage. |
| src | An image tag must contain this attribute. It is the URL of the image you want. |
| alt | This attribute contains text which describes the image in words. It will be displayed if there is a problem displaying the image. |
If you do not provide a height or width for the image then it will default to whatever the height and width of the image is. It is recommended to provide the width and height of the image even when using the default size as it will give the browser a heads up.
[edit] Forms
Forms are a way to get information from a visitor to your website and make the site more interactive. Forms are contained inside the form tag an example of which is shown below.
<form action="http://www.example.com/index.php" method="post">
| action | Note that some web browsers will only accept a URL beginning with http://. |
|---|---|
| method | This can be either set to get or post. |
The action attribute should contain the address of the page to load when the user has finished filling in the form. You also need to tell the browser how to sent the information contained in the form to the web server. There are two methods to sent the information to the server, either encoded in the URL (get) or sent in the headers (post).
[edit] Input
| text | textbox |
| submit | Submit button |
[edit] Textarea
A textarea is basically a multi line textbox.
<textarea cols="50" rows="20" name"textareaname">Some Text</textarea>
[edit] Scripts
Scripts are little programs that you can include in a web page. The most common scriptioning language is JavaScript, however other languages also exist such as VBScript. Scripts are added to a webpage inside the <script> element. Here is a very simple JavaScript program that will put the words "Hello World" on the screen.
<html>
<body>
<p>
<script type="text/javascript">
document.write("Hello World")
</script>
</p>
</body>
</html>
[edit] noscript
Although most web browsers support JavaScript, not all do, and users usually have the option to turn JavaScript off if they wish. So that a webpage can still work even when JavaScript is turned off, you can include alternative content inside <noscript> tags. The contents of the <noscript> tag is shown to the user when the script is not run.
[edit] Character entities
|   | (Non breaking space) |
| ¡ | ¡ |
| ¢ | ¢ |
| £ | £ |
| ¤ | ¤ |
| ¥ | ¥ |
| ¦ | ¦ |
| § | § |
| ¨ | ¨ |
| © | © |
| ª | ª |
| « | « |
| ¬ | ¬ |
| ­ | (Soft hyphen) |
| ® | ® |
| ¯ | ¯ |
| ° | ° |
| ± | ± |
| ² | ² |
| ³ | ³ |
| ´ | ´ |
| µ | µ |
| ¶ | ¶ |
| · | · |
| ¸ | ¸ |
| ¹ | ¹ |
| º | º |
| » | » |
| ¼ | ¼ |
| ½ | ½ |
| ¾ | ¾ |
[edit] See also
- XHTML - The successor to HTML.
- Cascading Style Sheets
- Server Side Includes
