Ngôn ngữ đánh dấu siêu văn bản_ HTML
Web ( World Wide Web): Mạng toàn cầu, sử dụng ngôn ngữ đánh dấu siêu văn bản ( HTML: Highper Text Markup Language) để mô tả.
Có 2 loại trang web: tĩnh và động.
Thông tin được khai báo bằng cách dùng các thẻ theo một quy luật khai.
Người dùng sử dụng các trình duyệt để đọc các thông tin.
Bùi Vũ Anh - Bài giảng HTML 08-08-2005
Nội dung Khái niệm
Bài 1 • Khái niệm cơ bản • Web (World Wide Web): Mạng toàn cầu,
• Cấu trúc trang Web sử dụng ngôn ngữ đánh dấu siêu văn bản
Ngôn ngữ
ngữ đá
đánh dấ
dấu siêu văn bả
bản (HTML – Highper Text Markup Language)
• Một số thẻ thông dụng
(Highper Text Markup Language – HTML) để mô tả nội dung.
• Một số thẻ đặc biệt
• Có 2 loại trang Web: Tĩnh và động BVA1
Ths. Bùi Vũ Anh • Cấu trúc thẻ Script
• Thông tin được khai báo bằng cách dùng
Bộ môn Tin học các thẻ theo một quy luật khai báo.
BVA5
Khoa Toán – Cơ – Tin học
[email protected] • Người dùng sử dụng các trình duyệt để
đọc các thông tin
Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 2 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 3
Trình duyệt và kịch bản Trình chủ và ngôn ngữ script Trình chủ và ngôn ngữ script…
• Internet Explorer, Nescape, FireFox… • Trình chủ (web server): Nơi cung cấp dịch • Client script không phụ thuộc vào Server
• Kịch bản (script): Có 2 loại, chạy trên máy vụ web, đặt và chạy trên máy tính script và Web server (tương đối)
chủ (server script) và máy khách – máy • Môi trường chạy trình chủ: • Có thể dùng nhiều loại client script trong
duyệt web (client script). Đó là dạng lập – Windows: IIS (Internet Information Server), cùng một trang Web nhưng không được
Apache
trình dùng để nâng cao hiệu quả, tính khai báo lẫn lộn
– Linux: Apache, JRUN, Weblogic…
năng của trang web.
• Ngôn ngữ script: ASP (Active Server
• Các hệ CSDL gắn với trang web dùng để Page), JSP (Java Server Page), Servlet,
lưu thông tin: Access, SQL Server, PHP, Perl, ASP.NET
MySQL, Oracle… – Phổ biến: VB Script và Java Script
Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 4 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 5 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 6
Bộ môn Tin học, Khoa Toán - Cơ - Tin học, Trường ĐH Khoa học Tự nhiên 1
Slide 3
BVA1 - Web tĩnh: Không kết nối CSDL, thông tin hiện lên được lưu trữ trên file text hay các file riêng biệt.
- Web động: Có kết nối tới CSDL, khi trang web được làm tươi, dữ liệu được trình bầy được đọc từ CSDL
Bui Vu Anh, 7/23/2005
BVA5 Thẻ: Tag, thường gồm 2 thẻ, thẻ mở được đặt trong < > và thẻ đóng đặt trong . Chúng có cùng tên và phần nằm trong 2 thẻ sẽ chịu tác
động của thẻ
Bui Vu Anh, 7/23/2005
Bùi Vũ Anh - Bài giảng HTML 08-08-2005
Cấu trúc trang Web Ý nghĩa các thẻ Các thẻ định dạng
• Là một file text có cấu trúc • Div: Canh lề đoạn văn bản
• Head: Thông tin không xuất hiện trên
• Tên file lưu trữ: .htm, .html, .jhtm, phtm…
trang web, mục đích cung cấp thông tin… …
• Tên thẻ không phân biệt chữ hoa/thường • Title: Tên trên thanh tiêu đề của trình
duyệt • P: Định dạng câu, sau thẻ kết thúc sẽ sang một
dòng mới, tách nhau bằng một khoảng cách
Tiêu đề … • Body: Thông tin xuất hiện trên trang web,
có thể che dấu một phần thông tin tuỳ theo …
…
…
phương thức của client script • .... : Làm nổi bật
Bùi Vũ Anh - Bài giảng HTML 08-08-2005
Ngắt dòng và đoạn Chèn bảng Chèn bảng…
BVA8 BVA9
• Dấu trắng, dấu ngắt đoạn trên trình duyệt chỉ • Table: Định dạng bảng
được tính 1 lần …
BVA10 BVA11
–Td: Khai báo cột
• Để tách đoạn, dùng thẻ p, div : Khai báo cột
BVA6 BVA7 … : Khai báo hàng
duyệt hiện đúng văn bản như đã trình bầy … • Dùng thẻ … để định dạng tiêu đề cột của
trong trang web. bảng
• Dùng thẻ … để căn đều theo
Thiết kế bảng chỉ quan tâm chiều rộng, thẻ tr
chiều rộng một dòng tiêu đề trong bảng. Thẻ này
quan tâm chiều cao, thẻ td quan tâm chiều rộng.
đặt trong thẻ
Đơn vị dùng tính theo điểm
Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 13 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 14 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 15
Danh sách Danh sách mô tả Thẻ chèn ảnh
• Không thứ tự (unorder list) •
description description1
Item 2 description title2 • Imag không có thẻ đóng, align dùng để dóng văn bản so
với ảnh, mặc định là bottom. Nếu dùng left | right, văn
description description2
• Có thứ tự (order list) …
bản sau đó cũng bị tác động (tương quan text-image)
• Ảnh có thể bị biến dạng nếu cung cấp chiều cao, rộng
description titleN
Item 1 sao tỉ lệ => Không nên chỉ chiều cao và rộng nếu không
Item 2 description descriptionN
cần thiết.
• Nếu muốn ảnh không có viền, chọn border m=0
• Danh sách sẽ đánh số thứ tự từ y (y là số, type tuỳ ý) Khi trình bầy, danh sách sẽ lùi đầu dòng theo sự • Khi không nạp được ảnh, xâu trong alt sẽ hiện thay thế
• Danh sách có thể lồng nhau nhưng không được đan chéo phân cấp • Các loại ảnh hỗ trợ: .GIF, .JPG, .PNG
Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 16 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 17 Hà Nội 08-08-2005 Bùi Vũ Anh - Bài giảng về HTML 18
Bộ môn Tin học, Khoa Toán - Cơ - Tin học, Trường ĐH Khoa học Tự nhiên 3
Slide 14
BVA6 Độ đậm đường viền, 0 tức là không có viền. Đơn vị là điểm
Bui Vu Anh, 8/2/2005
BVA7 Khoảng cách giữa các hàng và cột. Đơn vị là điểm
Bui Vu Anh, 8/2/2005
Slide 15
BVA8 Độ rộng của cột so với bảng tính theo %
Bui Vu Anh, 7/23/2005
BVA9 Dóng nội dung trong ô
Bui Vu Anh, 7/23/2005
BVA10 Kết hợp m hàng
Bui Vu Anh, 7/23/2005
BVA11 Kết hợp k cột
Bui Vu Anh, 7/23/2005
Bùi Vũ Anh - Bài giảng HTML 08-08-2005
Các ký tự đặc biệt Thẻ chèn liên kết Thẻ chèn liên kết…
BVA17
• Dấu xuống dòng: . Clear • Gắn với văn bản: … BVA16
Bookmark this URL
• Gắn với ảnh
• > (>), < (Slide 20
BVA16 URL: Universal Relate Link - địa chỉ internet, mail hay intranet
UNC: Địa chỉ mạng cục bộ
Bui Vu Anh, 7/23/2005
Slide 21
BVA17 Máy cần hỗ trợ Java Virtual Machine
Bui Vu Anh, 7/23/2005
Slide 22
BVA18 Các thẻ này dùng để khai báo dữ liệu nhằm kết nối đến kịch bản chạy trên trình chủ
Bui Vu Anh, 7/23/2005
Bùi Vũ Anh - Bài giảng HTML 08-08-2005
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ử
• Các radio phải có cùng tên, khác nhau về giá trị phía trình chủ bằng phương thức Post (trong thẻ
dụng Client Script.
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:
Newspaper Male (value là giá trị caption trên nút)
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
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)
Bùi Vũ Anh - Bài giảng HTML 08-08-2005
Thẻ form… Thẻ form… Các thẻ đặc biệt
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…
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 nhanh khi duyệt
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:
–Khai báo dòng chữ chuyển động ngang trên – Dùng thống nhất trong trang web
trang web 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