bài giảng HTML

Ngôn ngữ HTML cơ bản
Page: 1
Lab 01:
Thiết kế & lập trình Web 1 – PHP & MySQL
01 March 2013
Nguyễn Đức – ndhuy@ fit.hcmus.edu.vn

University of Science, HCMC
1 Mục tiêu
Hướng dẫn sinh viên sử dụng công cụ lập trình như Notepad++ và làm quen với các tag cở bản của
ngôn ngữ HTML trong việc thiết kế trang Web.
2 Qui định bài thực hành và định dạng nộp bài

‐ Thời gian thực hiện: 4 tiết
‐ Mỗi bài tập sẽ được lưu theo định dạng sau: <MSSV>_<Mã bài tập>.html
‐ Ví dụ: MSSV = 1234567, bài tập 01 định dạng nộp bài làm là 1234567_01.html
‐ Công cụ sử dụng để lập trình là Notepad++, EditPlus, Sublime Text 2
‐ Link download:
o NotePad++: http://notepad-plus-plus.org/download/v6.3.html
o EditPlus: http://www.editplus.com/download.html (có phí)
o Sublime Text 2: http://www.sublimetext.com/2
‐ Yêu cầu:
o Cấc phần bài tập được qui định trong mục 10.
o Các trường hợp không lưu theo dúng qui định và sử dụng không đúng công cụ để làm
bài sẽ không được chấp nhận.
3 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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> </title>
</head>
<body>
</body>
</html>
Page: 2
Page: 3
‐ Trong đó:
o Thẻ <!DOCTYPE… >: Qui định phần định dạng dữ liệu của tài liệu HTML
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ẻ <meta …/>: trong trường hợp này thẻ Meta được dùng để định dạng chuẩn mã hiển
thị dữ liệu là bộ mã UNICODE (để hiển thị tiếng Việt).
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ụ:
o Soạn nội dung file web1.htm bằng Notepad++
Page: 4
Page: 5
o Kết quả hiển thị trên trên trình duyết web Internet Explorer (IE)
Lưu ý: Khi soạn thảo nội dung một file HTML trên Notepad++
‐ Lưu file dưới phần mở rộng (đuôi) là .html hoặc .htm trước. Hoặc chọn menu
Language  HTML.
‐ Trong quá trình soạn thảo code, sử dụng tổ hợp phím Ctrl + Spacebar để hiển thị các từ khóa tự
động.
‐ Lưu nội dung file trước khi Deploy trên trình duyệt web.
‐ Deploy file HTML trên trình duyệt web:
o Trình duyệt IE: menu Run  lauch in IE
o Trình duyệt Firefox: menu Run  lauch in Firefox
4 Mô tả cấu trúc của một thẻ (tag) HTML:

4.1 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.
Page: 6
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ụ:
4.2 Một số ký tự đặc biệt trong HTML:

Mã HTML Mô tả
Khoản cách trắng
< <
> >
& &
© ©
® ®
Bài tập 01:

o Viết code HTML để tạo ra trang Web hiển thị được nội dung như sau
Function Converter(int &a, int &b) { /*<Begin convert>*/ int c; b = a; a = b; b = c; /*

<finish convert> */ }
GVLT: Lâm Quang Vũ – lqvu@fit.hcmus.edu.vn
GVHDTH: Lương Vĩ Minh – lvminh@fit.hcmus.edu.vn - Trần Thị Bích Hạnh – ttbhanh@fit.hcmus.edu.vn
Page: 7
5 Định dạng trang web:

5.1 Thẻ bgcolor Thiết lập thuộc tính màu nền cho trang
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) .
5.2 Thẻ background Thiết lập thuộc tính ảnh nền cho trang
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.
5.3 Cá thẻ 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
Mặc định, giá trị của các thuộc tính này khác 0.
Bài tập 02:
o Hãy thiết kế trang web hiển thị nội dung theo yêu cầu sau:
 Màu nền là màu có tổ hợp số thập lục phân là #FFFFCC,

 topmargin = 20
 Có nội dung là: Welcome to University of Science
Page: 8
6 Định dạng văn bản:

6.1 Định dạng tiêu đề cỡ 1 đến 6. Tiêu đề 1 là lớn nhất.
Kết quả hiển thị trên trình duyệt IE
6.2 Thẻ <b>…… </b> Định dạng chữ in đậm
6.3 Thẻ <i>…… </i> Định dạng chữ in nghiêng
6.4 Thẻ <p>…… </p> Định dạng 1 đoạn văn bản
6.5 Thẻ <br> Xuống hàng
Chú ý: Thẻ này không có thẻ đóng

Page: 9
6.6 Thẻ <hr> Đường kẻ ngang
6.7 Thẻ <!‐‐ ‐‐> Ký hiệu ghi chú. Nội dung trong tag này sẽ không hiển thị lên trang web.
Bài tập 03:

o Thiết kế trang Web có nội dung hiển thị như hình bên dưới
Thông số màu nền là: #7DBEFF

Page: 10
7 Định dạng danh sách (List):

7.1 Thẻ <li> … </li> Định nghĩa các thành
phần trong danh sách
7.2 Thẻ <ul> … </ul> Định nghĩa danh

sách không có thứ tự
7.3 Thẻ <ol>… </ol> Định nghĩa danh sách không

có đánh số thứ tự
Ví dụ tổng hợp:
Page: 11
8 Định dạng bảng (table):

8.1 Thẻ <table>……</table> Khởi tạo 1 bảng
8.2 Thẻ <tr>…… </tr> Tạo một dòng. Thẻ <tr> phải nằm trong thẻ <table>
8.3 Thẻ <th>…… </th> Tạo một ô tiêu đề. Thẻ <th> phải nằm trong thẻ <tr>
8.4 Thẻ <td>…… </td> Tạo một ô. Thẻ <td> phải nằm trong thẻ <tr>
Ví dụ:
Page: 12
8.5 Thuộc tính 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ôngkhai báo) là 0 là Bảng không có đường kẻ khung.
Page: 13
8.6 Thuộc tính Colspan Thiết lập ô có độ rộng bằng bao nhiêu cột.
8.7 Thuộc tính Rowspan Thiết lập ô có độ cao bằng bao nhiêu dòng
Page: 14
8.8 Thuộc tính Cellpadding Khoảng cách từ border đến văn bản trong 1 ô
8.9 Thuộc tính Cellspacing Khoảng cách giữa các ô trong một bảng
Page: 15
8.10 Thuộc tính Background Thiết lập ảnh nền cho thẻ <table>, <td>, <tr>
8.11 Thuộc tính Bgcolor Thiết lập màu nền cho thẻ <table>, <td>, <tr>
9 Chèn hình ảnh (Image):

Thẻ <img> không có thẻ đóng
Cú pháp:
<img src="URL" alt="Description" width="Number"
height="Number">
Page: 16
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ụ:
10 Liên kết trang web (Hyperlink):

Thẻ <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.
o 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:youremail@yahoo.com”
o 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ị:
o _blank: liên kết được mở ra trong một cửa sổ mới.
o _self : liên kết được mở ra ngay tại trang hiện hành.
o 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.
Page: 17
Page: 18
Ví dụ: Liên kết đến một trang web bất kỳ
Ví dụ: Liên kết đến địa chỉ email:
Ví dụ: Liên kết mở ra một cửa sổ mới
Ví dụ: Liên kết nội trong cùng một trang web.

Page: 19
11 Bài tập
Làm các bài tập 01, 02 và 03 của các đề mục ở phía trên
Bài tập 04
Tạo file file html trong thư mục webroot có nội dung như sau:
Page: 20
Bài tập 05:
Page: 21
Bài tập 06
Page: 22
Bài tập 07:
Page: 23
Bài tập 08:
Page: 24
Bài tập 09:
Page: 25
Bài tập 10:
Page: 26
Bài tập 11:
Bài tập 12:
Page: 27
Bài tập 13:
Tìm một tấm hình trên máy hay trên mạng, sau đó Rename lại thành Forest.jpg và chép vào thư
mục images
Page: 28
Bài tập 14
Page: 29
Bài tập 15
Page: 30
Bài tập 16
Page: 31
Bài tập 17
Page: 32

bài giảng HTML

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

bài giảng HTML

Uploaded by

Copyright:

Available Formats

Ngôn ngữ HTML cơ bản

Nguyễn Đức – ndhuy@ fit.hcmus.edu.vn

2 Qui định bài thực hành và định dạng nộp bài

3 Cấu trúc cơ bản của một trang Web (WebPage)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

4 Mô tả cấu trúc của một thẻ (tag) HTML:

4.2 Một số ký tự đặc biệt trong HTML:

Bài tập 01:

Function Converter(int &a, int &b) { /*<Begin convert>*/ int c; b = a; a = b; b = c; /*

5 Định dạng trang web:

 Màu nền là màu có tổ hợp số thập lục phân là #FFFFCC,

6 Định dạng văn bản:

Kết quả hiển thị trên trình duyệt IE

6.2 Thẻ <b>…… </b> Định dạng chữ in đậm

6.3 Thẻ <i>…… </i> Định dạng chữ in nghiêng

6.4 Thẻ <p>…… </p> Định dạng 1 đoạn văn bản

6.5 Thẻ <br> Xuống hàng

Chú ý: Thẻ này không có thẻ đóng

6.6 Thẻ <hr> Đường kẻ ngang

Bài tập 03:

Thông số màu nền là: #7DBEFF

7 Định dạng danh sách (List):

7.2 Thẻ <ul> … </ul> Định nghĩa danh

7.3 Thẻ <ol>… </ol> Định nghĩa danh sách không

8 Định dạng bảng (table):

9 Chèn hình ảnh (Image):

Mô tả giá trị của các thuộc tính của thẻ <img>

10 Liên kết trang web (Hyperlink):

Ví dụ: Liên kết đến một trang web bất kỳ

Ví dụ: Liên kết đến địa chỉ email:

Ví dụ: Liên kết mở ra một cửa sổ mới

Ví dụ: Liên kết nội trong cùng một trang web.

Bài tập 05:

Bài tập 07:

Bài tập 08:

Bài tập 09:

Bài tập 10:

Bài tập 11:

Bài tập 12:

Bài tập 13:

You might also like

Function Converter(int &a, int &b) { /<Begin convert>/ int c; b = a; a = b; b = c; /*