Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật

HyperText Markup Language (HTML) – Ngôn ngữ đánh dấu siêu văn bản. Bao gồm các đoạn mã chuẩn với các quy ước được thiết kế để tạo các trang Web và được hiển thị bởi các trình duyệt Web.

Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật trang 1

Trang 1

Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật trang 2

Trang 2

Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật trang 3

Trang 3

Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật trang 4

Trang 4

Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật trang 5

Trang 5

Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật trang 6

Trang 6

Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật trang 7

Trang 7

Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật trang 8

Trang 8

Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật trang 9

Trang 9

Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật trang 10

Trang 10

Tải về để xem bản đầy đủ

pdf 162 trang Danh Thịnh 10/01/2024 2520
Bạn đang xem 10 trang mẫu của tài liệu "Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật", để tải tài liệu gốc về máy hãy click vào nút Download ở trên

Tóm tắt nội dung tài liệu: Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật

Bài giảng Internet - Bài 6: Ngôn ngữ HTML - Lê Anh Nhật
6. Ngôn ngữ HTML
Lê Anh Nhật 82
6. Ngôn ngữ HTML
Tài liệu tham khảo
1. Tự học HTML và XHTML trong 24 giờ.
Lê Minh Phương
2. Những bài thực hành HTML
Đinh Xuân Lâm
3. Thiết kế quảng cáo và tiếp thị trên web HTML.
Ngọc Anh Thư Press
4. Thiết kế và xuất bản trang Web với HTML.
NXB Thống Kê
Lê Anh Nhật 83
6. Ngôn ngữ HTML
6.1. Bài Mở Đầu
1. HTML là gì?
HyperText Markup Language (HTML) – Ngôn 
ngữ đánh dấu siêu văn bản. Bao gồm các 
đoạn mã chuẩn với các quy ước được thiết 
kế để tạo các trang Web và được hiển thị bởi 
các trình duyệt Web.
Lê Anh Nhật 84
Web Page (Trang Web): Là tài liệu HTML.
Web site: Là một số các trang Web liên 
kết với nhau.
World Wide Web (www): Là dịch vụ toàn 
cầu của Internet mà HTML là nền tảng.
6. Ngôn ngữ HTML
6.1. Bài Mở Đầu
Lê Anh Nhật 85
2. Những ứng dụng của HTML
 HTML là nền tảng của World Wide Web, 
một dịch vụ toàn cầu của Internet.
 HTML để thiết kế Web trên mạng 
Internet, tạo tài liệu, gửi cáo thị... cho các 
công ty, cá nhân.
6. Ngôn ngữ HTML 
6.1. Bài Mở Đầu
Lê Anh Nhật 86
3. Trình soạn thảo trong quá trình học
 Sử dụng trình soạn thảo NotePad có sẵn 
trong Windows.
Start\Programs\Accessories\NotePad
 Hoặc một trình soạn thảo bất kỳ trong 
windows.
 FrontPage, DreamWare, Visual Studio... 
6. Ngôn ngữ HTML 
6.1. Bài Mở Đầu
Lê Anh Nhật 87
4. Những vấn đề cần quan tâm khi thiết 
kế Web
 Tổ chức tài liệu: tựa đề, tiêu đề, đoạn 
văn, đường kẻ ngang, danh sách, bảng.
 Thu ngắn văn bản.
 Bố trí hình ảnh nhỏ gọn, hợp lý.
6. Ngôn ngữ HTML 
6.1. Bài Mở Đầu
Lê Anh Nhật 88
6. Ngôn ngữ HTML 
6.2. Tạo chương trình đầu tiên
1.1 Tạo một trang Web mới.
- Mở môi trường mà bạn muốn soạn thảo tài liệu 
HTML..
- Sử dụng chương trình soạn thảo NotePad: Start -> 
Program -> Accessories -> NotePad.
•Chú ý:
+ Khi ghi tài liệu HTML vào ổ đĩa nhớ ghi đầy đủ phần 
mở rộng
+ Nếu sử dụng môi trường soạn thảo là NotePad trên 
Windows thì ghi ghi tài liệu HTML vào ổ đĩa fải chọn 
Encoding là UTF-8 để hiển thị tiếng việt. 
Lê Anh Nhật 89
1.2. Tag (thẻ) HTML là gì?
Khi moät Web browser hieån thò moät trang Wed, Web Browser seõ ñoïc
töø moät file vaên baûn ñôn giaûn vaø tìm kieám nhöõng ñoaïn maõ ñaëc
bieät hay nhöõng Tag ñöôïc ñaùnh daáu bôûi kyù hieäu .
* Tag mang thoâng tin
 String of text 
Trong đó: : tag bắt đầu.
: tag kết thúc.
* Tag roãng: 
6. Ngôn ngữ HTML 
6.2. Tạo chương trình đầu tiên
Lê Anh Nhật 90
 Ví dụ:
Chúc mừng bạn đến với HTML
Chúc bạn học tốt!
Tag
Tag
Tag kết thúc
Lê Anh Nhật 91
1.3. Cấu trúc cơ bản của một trang HTML
tiêu đề trang
Văn bản hiển thị.
Lê Anh Nhật 92
1.4. Tag chú thích.
.
 Thẻ 
Thẻ này dùng để ghi thông tin về version 
HTML áp dụng trong tài liệu web.
Thường đây là dòng đầu tiên trong file 
HTML.
Ví dụ:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 
4.0 Transitional//EN">
Lê Anh Nhật 93
1.6. Tạo trang Web đầu tiên
 Mở chương trình soạn thảo NotePad.
 Sử dụng phông đánh tiếng việt: Unicode
 Soạn thảo đoạn mã sau:
1.5. Hiển thị tài liệu trong Web Browser
Lê Anh Nhật 94
 Học tập HTML
Chúc mừng bạn đã tạo được trang web đầu 
tiên!
Lê Anh Nhật 95
 Lưu lại với tên 
“MoDau.html” (vào 
trong thư mục của 
mình), với phần 
Encoding là UTF-8.
 Lưu ý: phần mở rộng 
có thể là html hoặc 
htm đều được.
 Vào thư mục của 
mình chạy tệp HTML 
mà ta vừa tạo, xem 
kết quả nhận được.
Lê Anh Nhật 96
Lê Anh Nhật 97
6. Thực hành
Thiết kế một trang HTML giới thiệu về bản 
thân.
Lê Anh Nhật 98
Chương 2
Điều chỉnh 1 tài liệu HTML
2.1. Nạp tài liệu trong Web browse
2.1.1.Tạo sự thay đổi trong tài liệu HTML
Vào thư mục làm việc, mở tệp html của 
mình.
Mở trình soạn thảo NotePad.
Từ thực đơn File, dùng Open để mở tệp 
mình đã làm.
Từ đó thêm, bớt, sửa đổi... văn bản trong đó.
Lưu trở lại.
Lê Anh Nhật 99
2.1.2.Nạp lại tài liệu trong Web browser
 Trở lại thư mục làm việc, mở lại tệp đã sửa, 
quan sát, so sánh với trang Web đã mở lúc 
đầu về sự thay đổi.
Lê Anh Nhật 100
2.1.3. Thực hành
Đều chỉnh lại tài liệu HTML của mình, tạo một một 
trang HTML giới thiệu về một vài thành viên của 
lớp.
Lê Anh Nhật 101
2.2. 6 mức tiêu đề
2.2.1. Những tiêu đề của HTML
Tag tiêu đề:
Nội dung hiển thị
N là số nguyên từ 1 đến 6.
Ví dụ:
Tiêu đề thứ 3
 Tiêu đề nhỏ nhất
Lê Anh Nhật 102
 Để tiêu đề ở giữa:
Tiêu đề
 Để tiêu đề bên phải:
Tiêu đề
• Ví dụ
Lê Anh Nhật 103
2.2.2. Đặt những tiêu đề vào tài liệu html
 Ví dụ đoạn mã sau vào trong phần thân 
...
Tiêu đề lớn nhất
Tiêu đề lớn thứ hai
Tiêu đề thứ 3
Tiêu đề thứ 4
Tiêu đề thứ 5
Tiêu đề nhỏ nhất
Lê Anh Nhật 104
 Lưu tài liệu lại với phần mở rộng là 
htm.
 Mở thư mục làm việc để mở trang 
html của mình mới làm. Xem sự hiển 
thị 6 mức tiêu đề.
Lê Anh Nhật 105
2.2.3. Thực hành
Tạo một trang tài liệu html giới thiệu về bản 
thân, trong đó có dùng các tiêu đề để nhấn 
mạnh từng phần tài liệu.
Lê Anh Nhật 106
2.3.Chia văn bản ra thành nhiều đoạn
2.3.1. Chia đoạn trong HTML
 Tag chia đoạn: 
 Khi gặp Web browser sẽ chèn một 
dòng trống và bắt đầu một đoạn mới.
 Tag không cần tag kết thúc ().
Lê Anh Nhật 107
 2.3.1. Căn chỉnh đoạn
 Tag : align=align_type
dùng chỉ định căn đoạn mới, align_type là 
center hoặc right.
 Ví dụ:
Chữ ở giữa
Chữ bên phải
Lê Anh Nhật 108
2.3.2. Chèn các dấu chia đoạn
 Sử dụng tag để tạo một trang 
HTML, trong đó có các đoạn văn bản riêng 
biệt.
 Dùng Web browser để kiểm tra công 
việc của mình.
 Ví dụ
Lê Anh Nhật 109
2.4. Đường kẻ ngang
2.4.1. Tạo đường kẻ ngang
 Tag hard rule : chèn một đường thẳng 
trong trang html.
 Tag : đẩy văn bản xuống dòng, nhưng 
không chèn thêm dòng trống.
 Tag đoạn văn bản 
: Toàn bộ đoạn văn bản thụt vào 
ở đầu dòng.
 Ví dụ
Lê Anh Nhật 110
2.4.2. Định dạng thuộc tính cho đường kẻ.
Thuoäc tính Moâ taû
Size Thieát laäp ñoä daøy cuûa ñöôøng keû ngang
Width Taïo ñoä roäng(pixel) hay tyû leä phaàn traêm cuûa ñöôøng 
thaúng so vôùi ñoä roäng cuûa c ... i liệu của mình đã làm ở các bài trước.
Lê Anh Nhật 177
Chương 5. Trang trí cho văn bản
5.1. Mầu sắc và cẩu trúc nền
5.1.1. Cơ bản về màu sắc
 Trong một web browser, ta có thể sử dụng 
256 màu của hệ thống để tạo màu cho chữ 
hoặc nền văn bản.
 Mỗi một màu được xác định dựa trên các 
giá trị RED-GREEN-BLUE (RGB) của nó.
 R,G,B lấy giá trị từ 0 đến 255.
Lê Anh Nhật 178
 Thay vì xác định màu theo dạng tương 
tự "123,211,143" thì mỗi số xác định 
theo kiểu thập phân se được chuyển 
sang hệ 16.
 Chỉ còn số dạng: "xxyyzz", trong đó:
 xx là trị của màu Red.
 yy là trị của màu Green.
 zz là trị của màu Blue.
Lê Anh Nhật 179
 Ví dụ một số màu:
Màu có số 008000
Màu có số FFFF00
Màu có số FF0000
Màu có số 008080
Màu có số 800000
Màu có số 808080
Màu có số 00FFFF
Lê Anh Nhật 180
MAÀU VGA treân Windows
Xanh döông saùng Aqua
Xanh da trôøi Blue
Xaùm Gray
Xanh laù caây Lime
Tím than Navy
Tím ñoû purple
Traéng White
Ñen Black
Tím fuchsia
Xanh Green
Ñoû red
Vaøng yellow
Lê Anh Nhật 181
5.1.2. Màu nền cố định
• Ta điều chỉnh tag như sau:
• trong đó XXYYZZ là dạng biểu diễn thập 
lục phân của màu được chỉ định.
• Ví dụ
Lê Anh Nhật 182
 Màu của chữ và những siêu văn bản:
Ta sử dụng dạng:
<body bgcolor=#xxyyzz TEXT=#xxyyzz 
LINK=#xxyyzz VLINK=#xxyyzz>
 Trong đó: TEXT là màu chữ, LINK là màu của 
mục liên kết siêu văn bản, VLINK là màu của mục 
liên kết siêu văn bản đã xem.
 Chú ý: thứ tự của các mục trong tag 
không quan trọng.
Lê Anh Nhật 183
5.1.3. Cấu trúc nền
 Ta có thể sử dụng tệp hình ảnh nhỏ để 
làm nền cho trang web. (dạng gif, jpg)
 Chú ý:
 Kích cỡ tệp ảnh nên nhỏ.
 Chọn màu chữ và màu nền tương phản.
 Nhược điểm: thời gian nạp trang web 
sẽ chập hơn.
Lê Anh Nhật 184
 Dạng HTML cho nền hình ảnh di chuyển 
theo khi cuốn trang web:
 Ví dụ
 Dạng sau cho một nền đứng yên:
<body background=“filename.gif" 
bgproperties = "fixed">
Lê Anh Nhật 185
 Thực hành
Thêm màu nền, ảnh nền, màu chữ vào các 
trang web của bạn.
Lê Anh Nhật 186
5.2. Trang trí cho văn bản
5.2.1. Kích cỡ phông chữ
 Tag: 
...
 trong đó N là cỡ chữ có giá trị từ 1 đến 
7.
* Giá trị Font chữ mặc định là 3
Lê Anh Nhật 187
•Moät caùch söû duïng khaùc cuûa Tag Font laø:
Doøng vaên baûn Doøng 
vaên baûn
Caùc giaù trò +N hoaëc-N cho bieát ñoä dòch chuyeån (offset) so 
vôùi kích côû phoâng hieän taïi. 
Lê Anh Nhật 188
 Ngoài ra còn có các tag:
... --------------> Chữ to.
... ----------> Chữ nhỏ.
(tag này ít dùng vì thiếu linh hoạt)
 Cách khác để sử dụng:
... ---> Dịch chuyển 
font hiện tại lên 1.
... ---> Dịch chuển font 
hiện tại xuống 2.
Lê Anh Nhật 189
 Font cơ sở:
Tag basefont không có tag đóng, nó vẫn là 
cỡ phông cơ sở cho đến khi gặp một tag 
 khác xuất hiện.
 Ví dụ
Lê Anh Nhật 190
5.2.2. Màu của phông chữ
 Ta có thể bổ sung thêm thuộc tính 
màu vào trong tag :
Có thể thay #xxyyzz bằng tên một số màu 
cơ bản: red, aqua, blue, gray, lime, 
Ví dụ
...
...
Lê Anh Nhật 191
5.2.3. Dạng phông
 text...
 Chú ý: nên sử dụng các dạng phông 
thông dụng của máy tính.
Lê Anh Nhật 192
 Ví dụ:
...
 Thực hành:
Tạo trang web riêng của bạn.
Tạo trang web của nhóm.
Lê Anh Nhật 193
5.3. Easy hard rulers
5.3.1. Độ dày của đường
 Ta đã học tag cho kết quả là một 
đường thẳng ngang màn hình.
Lê Anh Nhật 194
 Ta có thể tăng độ dày của đường với 
tham số N:
trong đó N là một số chỉ độ dày.
 Ví dụ:
Lê Anh Nhật 195
5.3.2. Độ rộng của đường
 Ta sử dụng tham số width
 Cú pháp:
hoặc 
trong đó N là số điểm của đường thẳng, 
Z% là tỉ lệ phần trăm của trang hiện hành.
Lê Anh Nhật 196
Có thể thêm tham số align="left", align="right".
để căn chỉnh đường kẻ
* Màu sắc của đường kẻ
 Ta thêm tham số color = #xxyyzz.
* Đường kẻ không có bóng
 Ta thêm từ khoá noshade sau tag hr.
 Ví dụ: 
Lê Anh Nhật 197
 Thực hành
Thêm vào trang web của bạn các đường 
thẳng vừa mới học.
Lê Anh Nhật 198
5.4. Xét thêm về sự chỉnh lề
5.4.1. Sự chỉnh lề văn bản
 ta có thể dùng tag:
 text 
vẫn có tác dụng là căn đoạn văn bản ở giữa.
Lê Anh Nhật 199
 tag xoá đi sự sắp xếp:



Lê Anh Nhật 200
5.4.2. Chỉnh lề và sắp xếp văn bản
 Còn một tag nữa cũng để chỉnh lề văn 
bản:
 text 
 text 
 text 
 Ví dụ
Lê Anh Nhật 201
5.5. Nhạc nền – Chèn video
5.5.1. Nhạc nền : định nhạc 
nền cho trang tài liệu.
 Cú pháp:
 url: chỉ định tệp tin nhạc có định dạng 
wav, au, midi.
 n: số lần lặp lại bài hát, n=-1 sẽ lặp cho 
đến đóng trang web.
Lê Anh Nhật 202
 Chú ý: tag được đặt sau 
phần .... và trước tag 
. Hoặc trong 
.....
 Ví dụ:
Background Sound 
 Enjoy my sound. 
Lê Anh Nhật 203
5.5.2. Chèn Video 
Ta có thể nhúng file video (*.avi, *.mpg, 
*.mwv) vào tài liệu html, ta thêm thuộc 
tính dynscr=“filename” vào trong tag 
 Ví dụ:
Lê Anh Nhật 204
 ngữ pháp:
 <img
dynsrc=“*.avi” | ”*.mpg”
width=n height=m
start=fileopen | mouseover
loop=infinite | -1 | n align=left |
right
>
 Học viên tự tìm hiểu về các thuộc tính.
 Ví dụ
Lê Anh Nhật 205
 Ngữ pháp:
<marquee
width=“n” hight=“m”
scrolldelay=“k”
scrollamount=“i”
behavior="alternate“|slide|scroll
direction="right“ | “left”
bgcolor="#xxyyzz“
loop=-1 | j
5.5.3.Tạo một dòng chữ chạy trên màn 
hình trang web
Lê Anh Nhật 206
 Học viên tự tìm hiểu ý nghĩa các thuộc 
tính của .
 Ví dụ
Lê Anh Nhật 207
Chương 6. Bảng (Table)
6.1. Những tag cơ bản của bảng
 text 
... 
...
 text 
...
Lê Anh Nhật 208
 Ví vụ: tạo một bảng 2 hàng, 2 cột
 Hàng 1, cột 1 
 Hàng 1, cột 2 
 Hàng 2, cột 1 
 Hàng 2, cột 2 
Lê Anh Nhật 209
6.2. ...
có những thộc tính sau:
 border = n: tạo viền xung quanh bảng.
 cellpadding = N: cho biết có bao nhiêu 
khoảng trắng giữa khối bên trong phần 
tử và vách ngăn.
 cellspacing = M: Cho biết độ rộng của 
những đường bên trong bảng để chia 
các phần tử.
Lê Anh Nhật 210
 width = n | n%, height = m | m% : định 
trước kích thước rộng/cao cho bảng.
 align = left | right: Cho phép bảng dóng lề 
trái hoặc phải.
 valign = top | bottom: để chỉnh lề trên 
hoặc giữa hoặc dưới.
 bgcolor = #xxyyzz: thiết lập màu nền của 
bảng.
Lê Anh Nhật 211
 bordercolor = #xxyyzz: thiết lập màu viền 
cho bảng.
bordercolorlight = #xxyyzz : thiết lập màu 
nhạt hơn cho viền bảng 3 chiều.
bordercolordark = #xxyyzz : thiết lập màu 
đậm hơn cho viền bảng 3 chiều.
 background = "...image.gif|jpg": thiết lập 
nền cho các ô văn bản là hình ảnh với địa 
chỉ của nó.
Lê Anh Nhật 212
6.3. ... 
 Đặc tả dòng của bảng, số dòng của 
bảng bằng số phần tử trong cặp 
.... 
 Một số thuộc tính:
 align = left | center | right: để chỉnh lề 
trái/giữa/phải.
 valign = top | middle | bottom: để chỉnh 
lề trên/giữa/dưới.
Lê Anh Nhật 213
bgcolor: đặc tả màu nền của hàng.
bordercolor: đặc tả màu viền của bảng.
bordercolorlight: thiết lập màu nhạt hơn 
cho màu viền 3 chiều.
bordercolordark: thiết lập màu đậm hơn 
cho màu viền 3 chiều.
Lê Anh Nhật 214
6.4. ...
 Đại diện cho ô dữ liệu trong bảng, ô 
dữ liệu phải xuất hiện trong hàng của 
bảng.
 align = left | center | right: để chỉnh lề 
trái/giữa/phải dữ liệu trong ô.
 valign = top | middle | bottom: để chỉnh 
lề trên/giữa/dưới dữ liệu trong ô.
 width = n | n%: đặc tả độ rộng của ô.
 hight = n | n%: đặc tả chiều cao của ô.
Lê Anh Nhật 215
 colspan = N: Tạo một ô bằng N ô liền kề 
theo dòng.
 rowspan = M: Tạo một ô bằng M ô liền 
nhau theo cột.
ngoài ra còn có các thuộc tính: 
 bgcolor = #xxyyzz. 
 bordercolor = #xxyyzz. 
 bordercolorlight = #xxyyzz. 
 bordercolordark = #xxyyzz. 
 background = "...image...".
Lê Anh Nhật 216
6.5. ... 
 cũng giống tag nhưng thường 
dùng cho tiêu đề của bảng, dòng 
text... sẽ được viết chữ đậm và căn 
giữa ô.
 có những thuộc tính sau:
 align = left | center | right: để chỉnh lề 
trái/giữa/phải dữ liệu trong ô.
Lê Anh Nhật 217
valign = top | middle | bottom: để chỉnh lề 
trên/giữa/dưới dữ liệu trong ô.
 width = n | n%: đặc tả độ rộng của ô.
 hight = n | n%: đặc tả chiều cao của ô.
 nowrap: thiết lập cho những ô không 
muốn có dòng nào bị gãy để dữ liệu vừa 
khít với ô tiêu đề.
 colspan = n: đặc tả số cột của bảng mà ô 
này sẽ trộn lại thành 1. (mặc định = 1)
Lê Anh Nhật 218
 rowspan: đặc tả số hàng của bảng mà ô 
này sẽ trộn lại thành một. (mặc định=1)
 bgcolor = #xxyyzz.
 bordercolor = #xxyyzz.
 bordercolorlight = #xxyyzz.
 bordercolordark = #xxyyzz.
 background = "...image...".
Lê Anh Nhật 219
6.6. Thực hành:
 Sử dụng bảng biểu để thiết kế giao diện cho 
trang chính của web.
• Ví dụ
Lê Anh Nhật 220
Chương 7. Frame
7.1. Giới thiệu frame
Frame mở rộng khả năng hiển thị trang web 
bằng cách cho phép chia miền hiển thị thành nhiều 
vùng. Mỗi vùng như vậy được gọi là frame và có 
những đặc điểm sau:
 Nó có thể truy cập tới một URL một cách độc lập với 
các frame khác.
 Mỗi frame có thể đặt tên, dùng làm đích trong liên kết.
 Nó có thể tự thay đổi kích thước khung nhìn, hoặc có 
thể không thay đổi đối với người sử dụng.
Lê Anh Nhật 221
Lê Anh Nhật 222
* Cú pháp Frame
 Cấu trúc cơ bản:
Lê Anh Nhật 223
7.2. Thẻ Frameset
<Frameset rows = "n1, n2, ... " 
cols = "m1, m2, ..."
border = "N"
framespacing = "N"
bordercolor = #xxyyzz
frameborder = "yes/no">
 rows: chỉ chia hàng, tuỳ theo tham số.
 cols: chỉ chia cột, tuỳ theo tham số.
 border: độ dày đường viền.
 framespacing: khoảng cách các frame. 
Lê Anh Nhật 224
n1, n2, m1, m2, ...: là giá trị thuộc tính được 
tính bằng điểm hoặc phần trăm tương đối. 
Và có thể là dấu '*', frame tương ứng sẽ tự 
động điều chỉnh.
N: là độ dày tương ứng với các thuộc tính.
 frameborder: thiết lập đường viền cho 
toàn bộ tập frame, có giá trị yes hoặc no.
Lê Anh Nhật 225
Ví dụ: 
 chia thành 2 
hàng, hàng thứ nhất chiếm 30% màn hình, 
còn lại là hàng thứ 2.
 chia 3 cột, cột 
thứ 2 có độ rộng 100 điểm, các cột còn lại 
sẽ tự động phân chia.
<frameset rows = "30%, *" border=0 
framespacing = 5 frameborder = 0>: đặt 
đường viền, khoảng cách, ...
Lê Anh Nhật 226
7.3. Thẻ frame
 Cú pháp:
<frame src="URL" 
name="tên cửa sổ"
with = "N"
height = "M"
scrolling = "yes/no/auto"
frameborder = "yes/no" 
framespacing = "N"
bordercolor = #xxyyzz 
noresize >
Lê Anh Nhật 227
noresize: nếu có thuộc tính này thì người 
sử dụng không thể thay đổi kích thước 
hiển thị frame.
name: gán một tên cho một frame, nó có 
thể làm đích cho các liên kết từ các tài liệu 
khác.
with: chiều rộng frame.
height: chiều cao frame.
scrolling: đặt thuộc tính thanh cuốn.
Lê Anh Nhật 228
Ví dụ: tạo trang web có 4 frame như sau:
Lê Anh Nhật 229
 vi du ve frame...index... 
<frame scrolling="no" name="frame_title" noresize="yes" 
src="frame_title.html">
<frame scrolling="yes" name="frame_content" 
src="frame_content.html">
<frame scrolling="yes" name="frame_Main" 
src="frame_Main.html">
<frame scrolling="no" name="frame_AboutMe" 
noresize="yes" src="frame_AboutMe.html">
Xin lỗi, trình duyệt không trợ giúp 
frame
Tệp "frame_index.html"
Lê Anh Nhật 230
<!-- khai báo hiển thị liên kết đến frame_Mail.html ở cửa sổ bên 
phải -->
vi du ve frame...content...
MỤC LỤC
<a 
href="Frame_html.html#Cấu_trúc_trang_web">Cấu 
trúc trang web
Tệp "frame_content.html"
Lê Anh Nhật 231
7.4. Thực hành tự do
Lê Anh Nhật 232
Lê Anh Nhật 233
Chương 8. FORM
8.1. Form
Form cho phép bạn nhận thông tin hay phản hồi từ người 
dùng. 
Tạo Form:
 Action = “URL”> 
 yêu cầu thông tin bằng một trong nhiều 
cách khác nhau
: nhận giá trị trị Post hoặc Get 
Lê Anh Nhật 234
8.2. Trường văn bản và các thuộc tính.
<TextArea Name = “name” Rows = number 
Cols = number Wrap = >
Text..
Cho phép người dùng nhập nhiều dòng văn bản vào Form 
với số dòng và số cột cần hiển thị.
Text: Hướng dẫn người sử dụng nhập dữ liệu.
Value: OFF (giá trị mặc định) nếu không dùng Wrap.
Lê Anh Nhật 235
8.3. Text Box.
<Input Type = Text Name = “Text_name” 
Size =number MaxLength= number>
Cho phép người dùng nhập một đoạn văn bản có 
chiều dài Size và chiều dài tối đa cho đoạn văn 
bản là MaxLength (Size < MaxLength)
Lê Anh Nhật 236
8.4. Password
<Input Type = Password Name = “name” 
Size =number MaxLength= number>
Khi nhập dữ liệu vào thì các ký tự được dấu đi 
và thay vào đó là những ký tự “*” hay “x” tuỳ 
thuộc vào trình duyệt.
Lê Anh Nhật 237
8.5. Check Box
<Input Type = CheckBox Name = “name” 
Value = “giá trị”> String
Tuỳ chọn này được dùng khi có nhiều giá trị cho 
một tuỳ chọn.
Muốn xác định trạng thái mặc định của checkBox 
là đánh dấu hoặc không đánh dấu thì thêm một 
trong hai giá trị: Checked hoặc UnChecked
String: Là xâu thông báo lựa chọn.
Lê Anh Nhật 238
8.6. Radio Button
<Input Type = Radio Name = “name”
Value = “giá trị”> String
Cho phép người dùng lựa chọn trong các tuỳ 
chọn được định trước. 
Thuộc tính Name phải giống nhau và thuộc tính 
Value phải khác nhau
Lê Anh Nhật 239
8.7. Trường Hidden.
<Input Type = Hidden Name = “name” 
Value = “giá trị”> 
Được thiết kế để truyền (ngầm) giá trị đến 
Web Server và Script. Giá trị truyền 
thường là một từ khoá, giá trị kiểm tra 
hay một chuỗi bất kỳ
Lê Anh Nhật 240
8.8. Submit Button.
Dùng để chuyển dữ liệu trên Form mà người sử
dụng đã nhập sang một trang mới.
String: Là dòng chữ ghi trên nút, nếu không có 
Value thì mặt định là Submit ghi trên nút 
Lê Anh Nhật 241
8.9. Reset Button.
Dùng để xoá dữ liệu trên Form mà người sử
dụng đã nhập, khởi động lại cho các phần tử
trên Form.
String: Là dòng chữ ghi trên nút, nếu không có 
Value thì mặt định là Reset ghi trên nút 
Lê Anh Nhật 242
8.10. ComboBox và ListBox.
Multiple >
String
 String
 String
.
-: Định nghĩa một phần tử trong danh 
sách.
-Multiple: Cho phép người dùng chọn cùng một lúc 
nhiều giá trị. 

File đính kèm:

  • pdfbai_giang_internet_bai_6_ngon_ngu_html_le_anh_nhat.pdf