Bước đầu với HTML
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (211.79 KB, 10 trang )
GVLT: Lâm Quang Vũ – - Lương Hán Cơ –
GVHDTH: Lương Vĩ Minh – - Trần Thị Bích Hạnh –
1
BÀI 1
HƯỚNG DẪN SỬ DỤNG HTML
BẰNG NOTEPAD
Mục lục
I. Thông tin môn học: 2
II. Cấu trúc cơ bản của một trang Web (Webpage): 2
III. Mô tả cấu trúc của một thẻ (tag) HTML: 3
IV. Một số ký tự đặc biệt trong HTML: 3
V. Định dạng trang web: 4
VI. Định dạng văn bản: 5
VII. Định dạng danh sách (List): 6
VIII. Định dạng bảng (table): 7
IX. Chèn hình ảnh (Image): 9
X. Liên kết trang web (Hyperlink): 9
XI. Bài tập : 10
2
I. Thông tin môn học:
- Công cụ để lập trình và thiết kế web: NotePad, EditPlus
- Địa chỉ website môn học:
(Hệ tại chức à 02TC Lập trình và thiết kế web1)
- FTP : 172.29.68.111 (username: tkwebv1 / passwork: tkweb)
-
II. Cấu trúc cơ bản của một trang Web (Webpage):
- Cấu trúc cơ bản của 1 trang web gồm các phần sau:
<HTML>
<Head>
<title>
</title>
</Head>
<Body>
Nội dung chính của trang web
</Body>
</HTML>
- Trong đó:
o Thẻ <Html></Html>: Định nghĩa phạm vi của văn bản HTML
o Thẻ <Head></Head>: Định nghĩa các mô tả về trang HTML. Các thông tin trong thẻ
này không được hiển thị trên màn hình cửa sổ trang web.
o Thẻ <title></title>: Mô tả tiêu đề trang web. Thông tin trong phần này sẽ hiển
thị trên thanh tiêu đề của cửa sổ trang web.
o Thẻ <Body></Body>: Xác định vùng thân của trang web. Đây là nơi chứa các thông
tin sẽ hiển thị trong trang web.
- Ví dụ:
<Html>
<Head>
<title>
Thiet ke web 1
</title>
</Head>
<Body>
Mon hoc: Thiet ke web 1
GVLT : Ths. Lam Quang Vu
Lop : 02TC
</Body>
</Html>
GVLT: Lâm Quang Vũ – - Lương Hán Cơ –
GVHDTH: Lương Vĩ Minh – - Trần Thị Bích Hạnh –
3
III. Mô tả cấu trúc của một thẻ (tag) HTML:
- Cú pháp:
C
ấ
u trúc:
<Tên_th
ẻ
[tên_tt_1 = gt1] [tên_tt_2 = gt2] …
>
D
ữ
li
ệ
u hi
ệ
n th
ị
<
/Tên_th
ẻ
>
Mô t
ả
:
Th
ẻ
m
ở
.
Th
ẻ
đóng
- Trong đó:
o tên_tt : là tên thuộc tính của thẻ.
o gt1: là giá trị của thuộc tính tương ứng.
o Một thẻ, có thể có 1 hoặc nhiều thuộc tính hoặc không có thuộc tính nào.
o Tác dụng của thẻ chỉ ảnh hưởng đến Dữ liệu hiện thị nằm trong giữa thẻ đóng và thẻ
mở của thẻ đó.
o Các thẻ HTML có thể lòng nhau được.
- Ví dụ:
<body bgcolor=red topmargin=0>
Hello world
<p>
Doan van ban co <b> Chu in dam </b>
</p>
</body>
IV. Một số ký tự đặc biệt trong HTML:
HTML Mô tả
Ký tự khoảng trắng
<
<
>
>
&
&
- BT: Viết trang web hiện thị chính xác dòng sau lên màn hình:
Function Converter(int &a, int &b) { /*<Begin convert>*/ int c; b = a; a = b; b = c; /*
<finish convert> */ }
GVLT: Lâm Quang Vũ – - Lương Hán Cơ –
GVHDTH: Lương Vĩ Minh – - Trần Thị Bích Hạnh –
4
V. Định dạng trang web:
STT Tên thuộc tính thẻ HTML Mô tả - Ví dụ
1
bgcolor
Thiết lập thuộc tính màu nền cho trang
<body
bgcolor="#800000"
></body>
<body bgcolor="red"></body>
Chú ý: Giá trị của thuộc tính bgcolor có thể là tên của màu bằng tiếng
anh (red, blue, green, …) hoặc là tổ hợp số thập lục phân của 3 màu
(đ
ỏ
, xanh lá, xanh dương) .
2
background
Thiết lập thuộc tính ảnh nền cho trang
<body
background="images/logo.PNG"
>
Giá trị của thuộc tính này đường dẫn đến một file hình ành. Chú ý đến
khái ni
ệ
n đư
ờ
ng d
ẫ
n tuy
ệ
t đ
ố
i, đư
ờ
ng d
ẫ
n tương đ
ố
i trong HTML.
3
topmargin,
leftmargin,
rightmargin,
bottommargin
Thi
ế
t l
ậ
p thu
ộ
c tính mép l
ề
trên, trái, ph
ả
i, dư
ớ
i c
ủ
a trang
<body
topmargin="0"
>
Mặc định, giá trị của các thuộc tính này khác 0.
4
<bgsound src="URL"
loop="Number">
Đặt nhạc nền cho trang
- src : đường dẫn đến file nhạc
-
loop=
-
1: l
ặ
p vô h
ạ
n
<head>
<bgsound src="music.mid" loop="-1">
</head>
- BT: Hãy viết trang web có
o màu nền là màu có tổ hợp số thập lục phân là #FFFFCC,
o topmargin = 20
o Có nội dung là : Welcome to Natural Science University
5
VI. Định dạng văn bản:
STT Tên thẻ HTML Mô tả - Ví dụ
<h1>…… </h1>
……
<h6>…… </h6>
Đ
ị
nh d
ạ
ng tiêu đ
ề
c
ỡ
1 đ
ế
n 6.
Tiêu đ
ề
1 là l
ớ
n nh
ấ
t.
<h1>
This is a heading
</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>
<h4>This is a heading</h4>
<h5>This is a heading</h5>
<h6>This is a heading</h6>
<b
>…… </b>
Đ
ị
nh d
ạ
ng ch
ữ
in đ
ậ
m
<b>
This is a bold text
</b>
<i>…… </i>
Định dạng chữ in nghiêng
<i>
This is an italic text
</i>
<p>…… </p>
Đ
ị
nh d
ạ
ng 1 đo
ạ
n văn b
ả
n
<p>
This is a paragraph
</p>
<p>This is another paragraph</p>
<br>
Xuống hàng
<p>
This
<br>
is a para
<br>
graph with line breaks
</p>
Chú ý: Th
ẻ
này không có th
ẻ
đóng
<hr>
Đường kẻ ngang
<p>This
<hr>
is a paragraph with a horizontal rule break</p>
<!
>
Ký hi
ệ
u ghi chú. N
ộ
i dung trong tag này s
ẽ
không hi
ể
n th
ị
lên trang web.
<! This is a comment >
- BT: Viết trang web có nội dung như hình sau:
6
VII. Định dạng danh sách (List):
STT Tên thẻ HTML Mô tả - Ví dụ
1
<li>Item 2</li>
Đ
ị
nh ngh
ĩa các th
ành ph
ầ
n trong danh sách
2
<ul>… </ul>
Định nghĩa danh sách không có thứ tự
<
ul>
<li>Tea</li>
<li>Coffee</li>
</ul>
3
<ol>… </ol>
Đ
ị
nh ngh
ĩa danh sách không có
đánh s
ố
th
ứ
t
ự
<ol>
<li>Tea</li>
<li>Coffee</li>
</ol>
4
<ol>
<li>Tea</li>
<ul>
<li>Have ice</li>
<li>No ice</li>
</ul>
<li>Coffee</li>
<ul>
<li>Have ice</li>
<li>No ice</li>
</ul>
</ol>
7
VIII. Định dạng bảng (table):
STT Tên thẻ HTML Mô tả - Ví dụ
1
<table>……</table>
Kh
ở
i t
ạ
o 1 b
ả
ng
2
<tr>…… </tr>
Tạo một dòng. Thẻ
<tr>
phải nằm trong thẻ
<table>
3
<th>…… </th>
Tạo một ô tiêu đề. Thẻ
<th>
phải nằm trong thẻ
<tr>
4
<td>…… </td>
Tạo một ô. Thẻ
<td>
phải nằm trong thẻ
<tr>
5
Ví d
ụ
:
<table border=1>
<tr>
<th>STT</th>
<th>Ho va ten</th>
</tr>
<tr>
<td>1</td>
<td>Lam Quang Vu</td>
</tr>
<tr>
<td>1</td>
<td>Vu Giang Nam</td>
</tr>
<tr>
<td>1</td>
<td>Le Tri Anh</td>
</tr>
</table>
STT Thuộc tính Mô tả - Ví dụ
1
Border
Thi
ế
t l
ậ
p đ
ộ
d
ầ
y c
ủ
a đư
ờ
ng k
ẻ
khung. Giá tr
ị
m
ặ
c đ
ị
nh c
ủ
a thu
ộ
c tính border (khi không
khai báo) là 0
à
Bảng không có đường kẻ khung.
2
Colspan
Thiết lập ô có độ rộng bằng bao nhiêu cột.
<table border="1">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>88352100</td>
<td>86251160</td>
</tr>
</table>
3
Rowspan
Thiết lập ô có độ cao bằng bao nhiêu dòng
<table border="1">
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
4
Cellpadding
Kho
ả
ng cách t
ừ
border đ
ế
n văn b
ả
n trong
1 ô
8
<table border="1" cellpadding="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
5
Cellspacing
Kho
ả
ng cách gi
ữ
a các ô trong m
ộ
t b
ả
ng
<table border="1" cellspacing="10">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
6
Background
Thi
ế
t l
ậ
p
ả
nh n
ề
n cho th
ẻ
<table>, <td>, <tr>
<table border="1" background="c194.jpg">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
7
Bgcolor
Thi
ế
t l
ậ
p màu n
ề
n cho th
ẻ
<table>, <td>, <tr>
<table border="1">
<tr>
<td bgcolor="blue">First</td>
<td>Row</td>
</tr>
<tr>
<td
background="cat.jpg">Second</td>
<td>Row</td>
</tr>
</table>
GVLT: Lâm Quang Vũ – - Lương Hán Cơ –
GVHDTH: Lương Vĩ Minh – - Trần Thị Bích Hạnh –
9
IX. Chèn hình ảnh (Image):
STT Tên thẻ HTML
<img>
Thẻ <img> không có thẻ đóng.4
<img src="URL" alt="Description"
width="Number" height="Number">
Mô tả giá trị của các thuộc tính của thẻ <img>
- src : đường dẫn đến file hình ảnh.
- alt : dòng chữ thay thế cho ảnh khi trình duyệt không thể hiện thị ảnh, ví dụ do sai đường dẫn
- width: Chiều dài của hình khi hiển thị.
- height : Chiều rộng của hình khi hiển thị.
Chú ý: Giá trị mặc định của 2 thuộc tính width, height là kích thước thực sự của file hình ảnh.
Ví dụ:
<body>
<img src="boat.gif" alt="Big Boat" width="45" height="45">
</body>
X. Liên kết trang web (Hyperlink):
STT Tên thẻ HTML Mô tả - Ví dụ
<a>…. </a>
Cú pháp:
<a href="url" [target="values"] [name="values"]> Text to be displayed </a>
Mô tả giá trị của các thuộc tính:
- href : Đường dẫn đến địa chỉ cần liên kết tới.
Nếu đây là liên kết đến địa chỉ email thì giá trị của thuộc tính href có dạng sau:
href = “mailto:”
Nếu đây là liên kết bên trong cùng một trang web (được định nghĩa bởi thuộc tính name của thẻ
<a>) thì giá trị của href có dạng sau: href=“#tên_name” (xem ví dụ ở dưới)
- target: Chỉ định liên kết được mở ra tại đâu. Thuộc tính target có 2 giá trị:
_blank: liên kết được mở ra trong một cửa sổ mới.
_self : liên kết được mở ra ngay tại trang hiện hành.
Giá trị mặc định của thuộc tính target (nếu không định nghĩa) là _self.
- name: Định nghĩa vị trí liên kết tới trong cùng một trang web.
Ví d
ụ
:
Liên kết đến một trang web bất kỳ
<a href=" W3Schools!</a>
Ví d
ụ
: Liên kết đến địa chỉ email:
<a href=”mailto:”>Mail to TTBHanh</a>
Ví d
ụ
:
Liên k
ế
t m
ở
ra m
ộ
t c
ử
a s
ổ
m
ớ
i
<a href=”www.fit.hcmuns.edu.vn” target=”_blank”>Go to HCMUNS homepage</a>
Ví d
ụ
:
Liên
k
ế
t n
ộ
i trong cùng m
ộ
t trang
web.
<a href="#tips">Jump to the Useful Tips Section</a>
…………………
…………………
…………………
…………………
<a name="tips">Useful Tips Section</a>
GVLT: Lâm Quang Vũ – - Lương Hán Cơ –
GVHDTH: Lương Vĩ Minh – - Trần Thị Bích Hạnh –
10
XI. Bài tập :
Sử dụng EditPlus (hoặc NotePad) để thiết kế trang web cá nhân, trình bày các thông tin sau:
• Họ và tên
• Hình cá nhân
• Địa chỉ liên lạc
• Điện thoại
• Trang web trường đang học.
• Thời khóa biểu học tập
