Basic Codes HTML

Basic Codes HTML

Here is the basic form of the HTML language

<html>
<body>

Here goes the content of our website (Logo, banner, navigation buttons, text, images)

</body>
</html>

BIG NOTE: When you open a command you have only two brackets. What you open you must close by adding a slash to the tag. Anything you type in your HTML document must be between the two tags for the tag to take effect.

<body></body>

In the body section, you can set the default of background image, background color, font color, link…

Background = That is the image background for default
Bgcolor = That is the color default for the background
text = That is the color default of the font you want to have
Hyperlink = That is the color of the link that you did not click yet.

Example: <body background="http://www.vietfun.com/background1.gif" bgcolor="ffffff" text="8000FF" link="8000FF">

TEXT STYLE

Bold <B> Some Text</B> you will see: Some Text
Italic <I>Some Text</I> you will see: Some Text
Center <center>Some Text</center> you will see centred text
Underline <U>Some Text</U> you will see: Some Text
Font Color <font color="FF0000">Some Text</font> you will see: Some Text

Font Size <font size=+1>Some Text</font> (You can increase the number, as big the number is, as big the text you will see.)

Font Face <font face="Comic Sans MS">Some Text</font> you will see: Some Text (With the font face, you have to type exactly the font face name that available in your computer. If other people have that type of font, it will display the face of that font. If other people did not have that font face, it will display the default fonts of the browser)

Note: You can add more than 2 tags together.

Example:

<B><I><font size=+2 face="Comic Sans MS">Some Text</font></I></B> you will see: Some Text

Horizontal line: <HR> you will see:

(You can custom your line with the size or how width it is too)
Example: <hr size=5 width=75%> you will see:

Center Text or Image: <center>Some Thing/ or image link</center> you will see:

Some Thing

Paragraphs: You can use <p> some thing </p> for paragraph and <br> for changing line

List and Bullets

<ul>
<li> Some Thing</li>
<li> Some Thing Else</li>
</ul>

and you will see:

Hyperlink

<a href="http://www.vietfun.com">VietFun Home</a>

and you will see: VietFun Home

Add Image:

<img src="http://www.canoefoundation.org.uk/cf/assets/Image/Yellow%20Duck.jpg" alt="Here is the text display when the Image not load yet" border=0>

and you will see:

Explanation of Table Tags

<TABLE>...</TABLE>  

Encloses the table. The TABLE tag has the following variable attributes:

"BORDER=" Specifies the thickness of the border around the table. When using a table to control a page's layout, the border is usually set to zero.

"CELLPADDING=" Defines spacing within cells.

"CELLSPACING=" Defines spacing between cells.

"WIDTH=" Specifies the width of a table; typically given as a percentage of the total browser window space available.
<TR>...</TR>  

Specifies a table row within a table. You may define default attributes for the entire row. These are:

"ALIGN=" (either LEFT, CENTER, or RIGHT)

"VALIGN=" (either TOP, MIDDLE, or BOTTOM)

"BGCOLOR=" Sets the background color of a table row (see
Lesson 1 for more information on choosing colours).

"WIDTH=" Specifies the width of a row; typically given as a percentage of the total space available.
<TD>...</TD>  

Specifies a table data within the table row. The attributes for table data are:

"ALIGN=" (either LEFT, CENTER, or RIGHT)

"VALIGN=" (either TOP, MIDDLE, or BOTTOM)

"BGCOLOR=" Sets the background color of the TABLE cell (see Lesson 1 for more information on choosing colours).

"WIDTH=" Specifies the width of a table row. Typically given as a percentage of the available space.

Tables

Table is a special way to custom your web page. To set the table, you need to start with command <table> and end with </table>.

<tr> stands for row and <td> stands for column.

Example: A table with 2 rows and 3 columns.

<table>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>

<tr>
<td>Fourth</td>
<td>Fifth</td>
<td>Sixth</td>
</tr>
</table>

You will see:

First Second Third
Fourth Fifth Sixth

Table with border

You can also custom the border of table.

Example: A table with 2 rows and 3 columns, and table border = 1

<table border=1>
<tr>
<td>First</td>
<td>Second</td>
<td>Third</td>
</tr>

<tr>
<td>Fourth</td>
<td>Fifth</td>
<td>Sixth</td>
</tr>
</table>

You will see:

First Second Third
Fourth Fifth Sixth

Table with column width

You can also custom the width size of the table

<table border=1>
<tr>
<td width=120>First</td>
<td width=130>Second</td>
<td width=140>Third</td>
</tr>

<tr>
<td width=120>Fourth</td>
<td width=130>Fifth</td>
<td width=140>Sixth</td>
</tr>
</table>

You will see:

First Second Third
Fourth Fifth Sixth

Table with background colour

You can also custom the background color of table, columns or rows.

<table border=1 bgcolor="EEADB8">
<tr>
<td width=120>First</td>
<td width=130 bgcolor="FFFF00">Second</td>
<td width=140>Third</td>
</tr>

<tr>
<td width=120>Fourth</td>
<td width=130 bgcolor="FFFF00">Fifth</td>
<td width=140>Sixth</td>
</tr>
</table>

You will see:

First Second Third
Fourth Fifth Sixth

Wyszukiwarka

Podobne podstrony:
HTML
Ramki w HTML
kurs html rozdział II
3 ABAP 4 6 Basic Functions
Amadeus Basic Podręcznik szkoleniowy
Basic Shed
BASIC MALTESE GRAMMAR AND DIC (G Falzon)
basic model
Basic Radiation Physics
BASIC MILITARY REQUIREMENTS 24
Bogucki D, html i rozne prace, Prezentacja maturalna
HTML, PJWSTK, 0sem, MUL
zajęcia HTML
BASIC MILITARY REQUIREMENTS 19
Arduino Basic Reference
Basic AC Generators and Motors

więcej podobnych podstron