Bài giảng HTML - Bùi Vũ Anh

 Thẻ checkbox Thẻ radio Thẻ submit
 Dùng cho tuỳ chọn
 • Dùng cho chọn 1 trong nhiều lựa chọn ¾ Dùng chấp nhận những dữ liệu nhập trong input 
 • Quan tâm đến thuộc tính checked (true/false) khi sử phía trình chủ bằng phương thức Post (trong thẻ
 dụng Client Script. • Các radio phải có cùng tên, khác nhau về giá trị
 form) hay Get (trong QueryString)
 • Server side tham chiếu thẻ dưới dạng giá trị của thẻ •Chỉ một mục được checked, ưu tiên mục cuối 
 thông qua tên nên cần định nghĩa giá trị trước. cùng nếu cố tình check nhiều mục ¾ Chuyển các giá trị lên QueryString, khai bảo thẻ
 • Khi khai báo trùng tên, chuỗi giá trị nhận được cách • Khi tham chiếu bằng Server Script sẽ nhận form với phương thức Get; muốn Server Script lấy 
 nhau bởi dấu phảy (,) được giá trị của tuỳ chọn được chọn dữ liệu từ thẻ form, khai báo thẻ form với phương 
 thức Post
 How can you know us: Gender: 
 checked>Newspaper <input type="radio" value="M" name="rdGender" 
 checked>Male
 <input type="checkbox" value="T" name="chkTV" (value là giá trị caption trên nút)
 checked>Television Female
 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 25 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 26 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 27
 Thẻ button Thẻ reset Thẻ hidden
 •Chấp nhận những dữ liệu nhập trong các thẻ •Phục hồi dữ liệu nhập trong các thẻ input, •Tương tự thẻ text nhưng không hiển thị trên 
 input lên trình khách (nếu dùng phương thức select, textarea trang web, không cho phép người dùng nhập 
 submit(), nút sẽ gửi thẻ form lên trình chủ • Được khai báo trong thẻ form dùng để reset dữ liệu mà cần định nghĩa trước giá trị cho 
 web). Muốn tính toán trên trang web => dùng dữ liệu trên trang web nó, nhằm thực hiện mục đích tiềm ẩn.
 thẻ này
 •Thực thi phương thức Client Script 
 Ví dụ: Quay về trang trước
 <input type=“button" value=“Back" name= “Back“
 onClick=“window.history.go(-1);”>
 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 28 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 29 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 30
Bộ môn Tin học, Khoa Toán - Cơ -Tin học, Trường ĐH Khoa học Tự nhiên 5
Bùi Vũ Anh - Bài giảng HTML 08-08-2005
 Thẻ image Thẻ textarea Thẻ select
 • Hình ảnh trên trang web gắn với một chức •Nhập dữ liệu trên nhiều dòng (không giới •Chọn các phần tử trong danh sách (ListBox, 
 năng (ví dụ gắn kèm các nút submit, reset, hạn trước chiều dài lớn nhất) ComboBox)
 button). •Hạn định số dòng (rows) và cột (cols) phục • Cho chọn một (ComboBox) hoặc nhiều mục 
 vụ việc hiển thị (ListBox)
 <input type=“image" name= “imgGo” scr=“đường dẫn đến 
 file ảnh”> • Trình bầy trong bảng để căn hàng, cột •Phần tử được chọn thì thuộc tính selected 
 nhận đúng
 Description: <textarea name="txtDesc" cols="20" 
 rows="3">
 Requirement: <textarea name="txtRequire" cols="20" 
 rows="3">Please enter here ...
 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 31 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 32 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 33
 Thẻ select… Thẻ form Thẻ form…
 • Dùng để gửi dữ liệu trong trang web từ phía •Nếu không chỉ định địa chỉ (URL/UNC) cho action, 
 (Select a city) trang web chuyển đến là trang hiện tại.
 Ho Chi Minh Client lên Server
 •Phương thức Get chuyển dữ liệu trong thẻ nhập 
 Ha Noi • Post: Gửi dữ liệu lên, Get: Gửi yêu cầu lấy 
 Hue lên chuỗi QueryString (chuỗi gồm nhiều cặp tham 
 dữ liệu về số cùng với giá trị đi kèm nếu có kể từ sau dấu ?, 
 cách nhau bởi dấu &, tham số và giá trị cách nhau 
 •Thẻ form cần bao (chứa) các thẻ input cần 
 bởi dấu =)
 (Select Industry) đưa dữ liệu cho Server • Trong phương thức Post, dữ liệu được truyền trực 
 Auto • Các thẻ form không được lồng nhau vì chúng tiếp từ trang web đến trang Server Script
 Medical có hành động (action) khai báo tương ứng • Get: submit dữ liệu đến trang HTML hay Server 
 Engineering Script; Post: submit dữ liệu đến Server Script
 riêng chỉ đến một trang web
 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 34 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 35 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 36
Bộ môn Tin học, Khoa Toán - Cơ -Tin học, Trường ĐH Khoa học Tự nhiên 6
Bùi Vũ Anh - Bài giảng HTML 08-08-2005
 Thẻ form… Thẻ form… Các thẻ đặc biệt
 <form name = "form1" action = "doaction.phpdoaction.php" method = "post" Khai báo thẻ form để Upload lên Server từ Client, Meta: Khai báo trong thẻ head dùng khai báo 
 onsubmit = "alert('You are about submit');"> dùng thẻ form: loại font sử dụng, tìm kiếm, xoá cache, 
 … Các input nằm ở đây …
 chuyển trang…
 <FORM ENCTYPE = “multipart/form-data” ACTION 
 •Thẻ meta với font:
 = “download.php” name = “form1” METHOD = 
 hoặc <meta http-equiv = “Content-Type” content = 
 POST onsubmit = “return doUpload();>
 “text/html; charset = UTF-8”>
 Nếu muốn hiện nội dung tiếng Việt và cho phép 
 Khi bấm Enter trong hộp Text, hành động submit cũng sẽ Ứng dụng trên Server Script muốn Upload file từ nhập dữ liệu trên thẻ input bằng tiếng Việt Unicode 
 được thực hiện và nó sẽ gọi hành động tương ứng Client lên Server đều phải khai báo thẻ này trong chuẩn UTF-8 (dùng bộ gõ Unicode), khai báo thẻ 
 (doaction)
 trang chọn file. meta như ở trên.
 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 37 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 38 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 39
 Các thẻ đặc biệt… Các thẻ đặc biệt… Các thẻ đặc biệt…
 •Thẻ meta tìm kiếm: •Tự động chuyển đến URL/UNC sau một thời • Xoá cache: 
 Cung cấp thông tin cho các Search Engine khi gian: –Trang web được nạp vào cache để truy nhập 
 trang web được đăng ký sử dụng trên internet
 <META http-equiv=refresh content="5; nhanh khi duyệt
 mạng 
 “text/html; charset = UTF-8”> URL=”>
 cục bộ dùng Proxy Server và người quản trị có
 thể xoá cache hay IP cho máy duyệt web
 <META NAME=“description” CONTENT = “Mô 
 Trang web sẽ tự động làm tươi sau 5 giây và –Muốn chủ động xoá cache => cần khai báo:
 tả”> địa chỉ được khai báo như trong URL: 
 Trong CONTENT liệt kê các từ khoá phục vụ tìm 
 kiếm 
 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 40 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 41 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 42
Bộ môn Tin học, Khoa Toán - Cơ -Tin học, Trường ĐH Khoa học Tự nhiên 7
Bùi Vũ Anh - Bài giảng HTML 08-08-2005
 Các thẻ đặc biệt… Các thẻ đặc biệt… Các thẻ đặc biệt…
 •Thẻ marquee: <marquee •Thẻ style
 –Quảng cáo, gây sự chú ý… direction=up scrolldelay=2 scrollamount=1 width=100% – Định dạng các nội dung trình bầy
 style="filter:wave(add=5, phase=1, freq=5, strength=20);">
 –Khai báo dòng chữ chuyển động ngang trên – Dùng thống nhất trong trang web
 trang web 
 Hà Nội Huế ĐàNẵng Sài Gòn – Định nghĩa trong phần head
 width = 100%> –Sử dụng bằng tham số class trong P, DIV…
 xâu chữ
 Direction: up, down, back, right
 Scrolldelay: giây chờ
 Scrollamount: Số ký tựởmỗi lần chuyển động
 Dùng nhiều dòng thì ngắt dòng bằng 
 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 43 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 44 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 45
 Các thẻ đặc biệt… Các thẻ đặc biệt… Các thẻ đặc biệt…
 Các thuộc tính:
 Khai báo Định nghĩa chung để dùng lại font-family : Danh sách tên font border-top, border-bottom, border-left, 
 – Ghi thành file .css font-size: kích thước (px), border-right: 1px solid #CCCCCC
 border: 1px #7885AF solid 
 font-weight: bold, italic, underline 
 .text_normal – Chèn vào trang web muốn sử dụng style border-color: black black #7885AF; 
 { COLOR : #6666FF; margin-top, margin-bottom, border-style: solid; 
 margin-left:1px ! Important border-top-width, border-bottom-width, 
 Sử dụng: Khai báo trong thẻ head và dùng giống như đã được khai báo 
 FONT-SIZE : 12px; margin-right : K/cách đến biên của trang border-left-width, border-right-width: Độ 
 TEXT-DECORATION : none; } trong trang web đậm biên 
 .bg padding-left, padding-right, padding-top, cursor: hand -> hình chuột
 { COLOR : #000000; } padding-bottom: K/cách đến lề ô filter: BlendTrans(Duration=2) -> lọc
 xâu chữ height, width: chiều cao, rộng clip: rect( );
 text-align: left, right, center …
 Tuỳ theo các đối tượng sẽ có các thuộc 
 Sử dụng text-decoration: none tính khác
 xâu chữ vertical-align: middle, top, bottom
 background-color, color: #_ _ _ _ _ _
 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 46 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 47 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 48
Bộ môn Tin học, Khoa Toán - Cơ -Tin học, Trường ĐH Khoa học Tự nhiên 8
Bùi Vũ Anh - Bài giảng HTML 08-08-2005
 Thẻ script JavaScript VBScript
 •Kiểm soát các hành động của người dùng • Khai báo phương thức dùng cú pháp lập trình của • Khai báo phương thức dùng cú pháp lập trình của 
 • Khai báo và sử dụng các phương thức, thuộc tính của JavaApplet Visual Basic for Application
 Client Script. Ví dụ 2 loại script
 // khai báo biến ; biến không cần khai báo kiểu
 // code Function Tên(tham số):kiểu trả lại Function Tên(tham số) as Kiểu trả lại
 { Begin
 // khai báo biến ; Dim biến as kiểu
 // câu lệnh ; câu lệnh
 # code
 // phát biểu điều kiện ; phát biểu điều kiện
 … …
 Các script có thể để bất kỳ đâu nhưng nên để trong thẻ head } End
 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 49 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 50 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 51
 Tổng kết
 •Giới thiệu về ngôn ngữ HTML
 • Các thẻ mô tả cơ bản tạo nên trang web tĩnh
 • Các thẻ phục vụ việc nhập dữ liệu
 • Các thẻ đặc biệt dùng tăng tuỳ chọn cho 
 trang web
 •Thẻ nhúng phần lập trình trong trang web
 Bài tập: Tạo trang web cá nhân minh hoạ việc 
 sử dụng các thẻ đã học.
 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 52
Bộ môn Tin học, Khoa Toán - Cơ -Tin học, Trường ĐH Khoa học Tự nhiên 9