You are on page 1of 9

1.

HTML <address>
<address>
Written by Jon Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

2. Thuc tnh style:


<p><i><b style="color:red">Mu </b></i></p>
<p style="text-align:justify">Canh u</p>

3. CSS Box Model:


p{
border:1px solid black;
padding:10px;
margin:30px;
}

4. HTML Link
4.1 Target attribute
Target Value

Description

_blank

Opens the linked document in a new window or tab

_self

Opens the linked document in the same frame as it was clicked (this i

_parent

Opens the linked document in the parent frame

_top

Opens the linked document in the full body of the window

framename

Opens the linked document in a named frame

4.2 Image as a Link


<a href="default.asp">
<img src="smiley.gif" alt="HTMLtutorial" style="width:42px;height:42px;b
order:0">
</a>

5. HTML Image
5.1 Syntax
<img src="url" alt="some_text">

5.2 The alt attribute


<img src="html5.gif" alt="The official HTML5 Icon">

5.3 Image in another folder


<img src="/images/html5.gif" alt="HTML5Icon" style="width:128px;height:128p
x">

5.3 Image on Another Server


<img src="http://www.w3schools.com/images/w3schools_green.jpg">

5.4 Animated Image


<img src="programming.gif" alt="ComputerMan" style="width:48px;height:48p
x">

5.5 Image map


<img src="planets.gif" alt="Planets" usemap="#planetmap" style="width:145p
x;height:126px">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

6. HTML Tables:
6.1 Defining HTML tables:
<tr>: hng
<td>: ct thng
<th>: ct heading
V d:
<table style="width:100%">
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>

6.2 HTML Table with border attribute:


-

To add border, use CSS Border property

<style>
table, th, td {
border: 1px solid black;
}
</style>

7. HTML Form
7.1 <form> Element
<form>
.
form elements
.
</form>

7.1 <input> Element


a. Text Input:
<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

b. Radio Button Input:


<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>

c. The Submit Button:


<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>

<input type="submit" value="Submit">


</form>

d. Grouping with <fieldset>:


<form action="action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit"></fieldset>
</form>

e. <select> Element (Drop-Down List):


<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

f. <textarea> Element:
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>

g. <button> Element:
<button type="button" onclick="alert('Hello World!')">Click Me!</button>

Notes: Button dont need to be put in the <form> </form>


h. <password> Input:
<form action=>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>

i. <checkbox> Input:
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>

j. HTML5 Input Type - Number


Color
Date
Datetime
Datetime-local
Email
Month
Number
Range
Search
Tel
Time
URL
Week
<form>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">
</form>

k. <date> Input:
<form>
Birthday:
<input type="date" name="bday">
</form>

l. <color> Input:
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>

m. <time> Input:
<form>
Select a time:
<input type="time" name="usr_time">
</form>

n. The disabled Attribute:


<form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

o.

You might also like