Handout HTML Codes

HTML Codes
Basic Tags
<html>  <head>  <title>MY FIRST HOMEPAGE</title> </head>  <body> </body> </html>
head section
body section
The blank lines are not necessary, browsers ignore white spaces in an HTML documents However, this makes your HTML document easier to read
Tags
<html> <head> <title> <body>
Description to indicate that the file is an HTML document includes general information about the document (keywords for search engines) identifies the title of the Web page (will be displayed in the title bar) includes the content of the Web page along with the tags needed to format that content to add background color: <body bgcolor="#0000CC"> identify the author, purpose, date created or last updated, and other information as required browser ignores it and does not display it in a Web page Bold Italic Line break (blank line) Horizontal line Headings <h1> tag for a level-one heading <h6> tag for a level-six heading align attribute values: (left, right, center, justify) <h1 align="center">WELCOME</h1>
Onesided
Twosided
<!- -comments - -> <b> <i> <br> <hr> <h1> <h6>
color attribute: <h1 style="text-align: center; color:red">WELCOME</h1> OR <h1 align="center"> <font color="#FF0000" face=verdana>WELCOME</font> </h1>
<p>
<li>
Paragraph align attribute values: (left, right, center, justify) <p align=center>hello and welcome</p> List 3 types of list: 1. Bulleted list (unordered list) <ul> with a bullet character 2. Numbered list (ordered list) <ol> with sequential numbering 3. Definition list <dl> terms <dt> with definitions <dd> Example:
<ul> <li>ONE</li> <li>TWO</li> <li>THREE</li> </ul> <ol> <li>ONE</li> <li>TWO</li> <li>THREE</li> </ol> <dl> <dt>ONE</dt> <dl>This is number one</dl> < dt >TWO</ dt > <dl>This is number two</dl> < dt >THREE</dt> <dl>This is number three</dl> </dl> ONE TWO THREE
1. ONE 2. TWO 3. THREE ONE This is number one TWO This is number two THREE This is number three
<img/>
<a>
Pictures <img src="photo.jpg" alt="my photo" border=1 height=100 width=100/> Anchor Text hyperlink: <a href="http://www.google.com">Click to visit Google.com</a> -attribute target: _blank, _parent, _self, _top target="_blank" E-mail hyperlink: <a href="mailto://me@google.com">Click to e-mail me</a> Bookmark: -need to assign ID to an element: <img id="top" src=photo.jpg/> -then use anchor tag to refer to that ID <a href="#top">Back to top</a>
Table Tags Tags <table> Description Table opening & closing table tags <table></table> table row <tr></tr> table data <td></td> o represents a cell (or column) inside the row Onesided Twosided
HTML codes for a simple table:

<table> <tr> <td>A</td> <td>B</td> <td>C</td> </tr> <tr> <td>X</td> <td>Y</td> <td>Z</td> </tr> </table>
And this is how the table looks like: A X B Y C Z
You can tell how many rows and columns are included in a table just by looking at the code. The two opening <tr> tags indicate two rows and the three opening <td> tags on each line represents three data cells (or three columns). To add another row, just start with another <tr> and so forth. Table Borders Adding a border simply involves inserting the border attribute to the opening table tag. The code would be adjusted like this:
<table border=2>
Notice the "2" represents the thickness of the border. If you had set it to "0" then there would have been no border at all. If you wanted it very thick then you could set it to 10, for example. Background and Border Colors You can change the color of a table background or border by simply adding the bordercolor or bgcolor attribute.
<table border="2" bordercolor="red" bgcolor="yellow">
Cell Spacing and Cell Padding You can increase the space within the table cells and the space between the cells by using the cellpadding and cellspacing attributes. cellspacing adjusts the space between the cells cellpadding adjusts the space within (around) the cell
<table border="2" cellspacing="10" cellpadding="3">
This is what the table would look like now:
See how setting the cellspacing attribute to "10" drastically increased the spacing between the cells, and the cellpadding attribute set to "3" added a little of space within each individual cell. Table Width You can specify the width of a table by using either a percentage or a pixel width.
<table width="100%" border="2">
Since the width is set to 100% that means the table will take up 100% of the screen and the columns in the table will be adjusted evenly. Here's what it would look like. A X B Y C Z
As mentioned, you can also set the table width using pixels instead of percentages. So instead of setting it to 100%, you could set it to 300 pixels:
<table width="300" border="2">
Column Widths Sometimes you may not always want your columns to be the same width. If this is the case, you need to set values on your table data <td> cells. Again, you can set them by using percentages or pixel widths.
<table width="300" border="2"> <tr> <td width="70%">A</td> <td>B</td> <td>C</td> </tr> <tr> <td width="70%">X</td> <td>Y</td> <td>Z</td> </tr> </table>
This is what this table would look like. A X B Y C Z
See how the column width for the first column in both rows is set to 70%. Notice there is no value set for the other 2 columns. If you do not set a value for the remaining columns, their width will automatically be adjusted to take up the remaining space (30%) and they'll share it equally. Table Height You can also set the table height by adding the height tag to the table code.
<table height="250" width="300" border="2">
Form Tags Tags <form> Description Online Form opening & closing table tags <form></form> Note that the form itself is not visible. Onesided Twosided
1. TEXT BOX
First name: <input type="text" name="firstname" size="20">
First name:
In most browsers, the width of the text field is 20 characters by default. To change it, set size to another value. 2. RADIO BUTTON
<input type="radio" name="gender"> Male <br> <input type="radio" name="gender"> Female
3. CHECKBOX
<input type="checkbox"> I have a bike <br> <input type="checkbox"> I have a car
4. DROP DOWN LIST

<select> <option>Honda</option> <option>Toyota</option> <option>Naza</option> </select>
5. SUBMIT BUTTON
<input type="submit" value="HANTAR">

Handout HTML Codes

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Handout HTML Codes

Transféré par

Droits d'auteur :

Formats disponibles

HTML Codes

<!- -comments - -> <b> <i> <br> <hr> <h1> <h6>

HTML codes for a simple table:

And this is how the table looks like: A X B Y C Z

This is what the table would look like now:

This is what this table would look like. A X B Y C Z

<table height="250" width="300" border="2">

4. DROP DOWN LIST

Vous aimerez peut-être aussi