Bài giảng Lập trình web - Chương 2: Ngôn ngữ HTML - Trần Công Án

Tóm tắt Bài giảng Lập trình web - Chương 2: Ngôn ngữ HTML - Trần Công Án: ...CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 19 [CT428] Chương 2. Ngôn ngữ HTML Định nghĩa và định dạng thành phần nội dung Danh sách (List) Ví Dụ TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 20 [CT428] Chương 2. Ngôn ngữ HTML Định nghĩa và định dạng thành phần nội dung Danh s...TML 33 [CT428] Chương 2. Ngôn ngữ HTML Định nghĩa và định dạng thành phần nội dung Hình ảnh (Image) Ví Dụ - Gán Bản Đồ Ảnh Cho Ảnh TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 34 [CT428] Chương 2. Ngôn ngữ HTML Định nghĩa và định dạng thành phần nội dung Bảng (Table) Bảng... Có nhiều phiên bản HTML, số thẻ được hỗ trợ trong từng phiên bản là khác nhau. I Hiện nay, một số thẻ định dạng không còn được hỗ trợ hoặc không khuyến khích sử dụng (basefont, font...), và được thay bằng CSS. I Phiên bản mới nhất là HTML5 (đang phát triển): I hỗ trợ đa dạng hơn loại thành phầ...

pdf68 trang | Chia sẻ: havih72 | Lượt xem: 382 | Lượt tải: 1download
Nội dung tài liệu Bài giảng Lập trình web - Chương 2: Ngôn ngữ HTML - Trần Công Án, để tải tài liệu về máy bạn click vào nút DOWNLOAD ở trên
g 2. Ngôn ngữ HTML 14
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Định nghĩa thành phần nội dung cơ bản
Định Nghĩa Thành Phần Nội Dung Cơ Bản
I . . . (heading): các đề mục từ 1 (cao nhất) đến 6
(thấp nhất).
I (paragraph): định nghĩa 1 đoạn
I (line break): xuống dòng trong cùng paragraph
I (horizontal line): vẽ 1 đường ngang
I 
Thuộc tính align (=left/right/center): dùng để canh lề cho các phần tử
(element) của các thẻ này.
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 15
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Định nghĩa thành phần nội dung cơ bản
Ví Dụ
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 16
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Các thẻ định dạng văn bản
Các Thẻ Định Dạng Văn Bản
I , : đậm
I , : nghiêng
I : gạch dưới
I , : chữ nhỏ/to
I , : gạch giữa
I : chỉ số trên
I : chỉ số dưới
I : giữ định dạng giống
phần soạn thảo
I các ký tự đặc biệt:  
(khoảng trắng), < (<), >
(>), & (&), " (”)
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 17
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Danh sách (List)
Danh Sách (List)
I gồm 2 loại:
Danh sách không thứ tự
• list item 1
• list item 2
Danh sách có thứ tự
1. list item 1
2. list item 2
I các thẻ dùng để tạo danh sách:
I (unordered list): tạo một danh sách không thứ tự
I (ordered list): tạo một danh sách có thứ tự
I (list item): tạo một mục/phần tử trong danh sách
I các danh sách có thể lồng nhau tạo thành danh sách nhiều cấp
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 18
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Danh sách (List)
Các Thuộc Tính Của Danh Sách
I type (, ): chỉ định kiểu của ký hiệu đánh dấu/số cho
các phần tử trong danh sách
I giá trị cho : disc (•), circle (◦), square ()
I giá trị cho : 1, A, a, I, i
I start (): chỉ định giá trị bắt đầu cho danh sách
type = 1
1. item 1
2. item 2
3. item 3
type = A
A. item 1
B. item 2
C. item 3
type = a
a. item 1
b. item 2
c. item 3
type = I
I. item 1
II. item 2
III. item 3
type = i
i. item 1
ii. item 2
iii. item 3
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 19
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Danh sách (List)
Ví Dụ
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 20
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Danh sách (List)
Danh Sách Các Định Nghĩa (Definition List)
I Danh sách các định nghĩa có dạng như sau:
HTML
. a makeup language for creating web pages
HTTP
. an application protocol for the web service
I Các thẻ dùng để tạo danh sách các định nghĩa:
I (definition list): tạo danh sách cách định nghĩa
I (definition term): tạo một khái niệm/từ khóa
I (definition): định nghĩa của khái niệm/từ khóa
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 21
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Liên kết (Hyperlink)
Tạo Liên Kết
I Liên kết là một từ, nhóm từ, hay hình ảnh mà khi ta click vào sẽ
cho phép chuyển đến một trang web (hay một nguồn tài nguyên)
khác.
I Thẻ tạo liên kết có cú pháp như sau:
đại diện cho l/kết
I thuộc tính href dùng để chi định địa chỉ trang web cần liên kết
I URL có thể là một địa chỉ tuyệt đối hay tương đối (xem Ch1)
I thuộc tính taget dùng để chỉ định nơi sẽ mở tài liệu liên kết:
I _self: mở trong cùng cửa sổ/tab (mặc nhiên)
I _blank: mở trong cửa sổ/tab mới
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 22
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Liên kết (Hyperlink)
Ví Dụ
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 23
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Liên kết (Hyperlink)
Liên Kết Trong
I là một liên kết tới một vị trí bên trong một trang web
I vị trí đó phải được “đánh dấu” (bookmark/anchor) bằng thẻ 
với thuộc tính name: 
I liên kết trong tới một vị trí đã được đánh dấu trong cùng tài liệu:
đại diện cho lkết 
I liên kết tới một bookmark trong một tài liệu khác:
đại diện cho lkết 
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 24
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Liên kết (Hyperlink)
Liên Kết Trong – Ví Dụ
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 25
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Liên kết (Hyperlink)
Liên Kết Đến Các Dịch Vụ Khác
I Một liên kết có thể liên kết đến một nguồn tài nguyên khác ngoài
dịch vụ WWW.
I Sử dụng cú pháp URL dành cho dịch vụ tương ứng. Ví dụ:
I Liên kết đến dịch vụ email (mail client mặc định trên hệ thống):
đại diện cho lkết
I Liên kết đến một tập tin trên một FTP server:
đại diện cho lkết
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 26
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Liên kết (Hyperlink)
Liên Kết Đến Các Dịch Vụ Khác - Ví Dụ
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 27
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Hình ảnh (Image)
Hình Ảnh (Image)
I Để hiển thị hình ảnh trong một trang web, ta dùng thẻ :
I src: chỉ định URL của hình ảnh
I alt: text sẽ được hiển thị thay thế hình ảnh nếu có lỗi khi tải hình
ảnh, hoặc text sẽ hiển thị như là một tooltip
I width: chỉ định chiều rộng (ngang) của hình ảnh (pixel)
I height: chỉ định chiều cao của hình ảnh (pixel)
I Hình ảnh sẽ được chèn inline (nằm chung) với text trong
paragraph.
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 28
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Hình ảnh (Image)
Ví Dụ
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 29
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Hình ảnh (Image)
Bài Tập
Tạo một trang web có cấu trúc
và định dạng tương tự như sau,
trong đó:
I hình ảnh: figures/bird.jpg
I kích thước hình: rộng 100px
I email: link tới địa chỉ email
của SV
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 30
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Hình ảnh (Image)
Hình Ảnh Dùng Làm Liên Kết
I Sử dụng hình ảnh để làm
liên kết: Đặt thẻ 
bên trong cặp thẻ .
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 31
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Hình ảnh (Image)
Bản Đồ Ảnh (Image Map)
I Một hình ảnh có thể được chia thành nhiều vùng (area) để tạo liên
kết trên từng vùng
I Tạo một bản đồ ảnh (map, là tập hợp của nhiều vùng):
định nghĩa các vùng
I Định nghĩa một vùng:
I shape = {rect, circle, poly}, coords: tọa độ các điểm ĐN vùng
I Khai báo sử dụng bản đồ ảnh cho một hình ảnh:
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 32
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Hình ảnh (Image)
Ví Dụ - Tạo Vùng Cho Ảnh
I 
I GIMP
I Adobe Dreamweaver
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 33
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Hình ảnh (Image)
Ví Dụ - Gán Bản Đồ Ảnh Cho Ảnh
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 34
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Bảng (Table)
Bảng (Table)
I Tạo bảng: 
I border: kích thước (width) của đường viền table
I width: độ rộng của table (theo px hoặc %)
I cellpadding: khoảng cách từ nội dung đến đường viền của ô (cell)
I cellspacing: khoảng cách giữa các ô
I Tạo hàng (row) trong table: định nghĩa các ô
I Tạo ô (cell) trong một hàng: nội dung ô
I Tạo ô tiêu đề (header) cho table (= cell + đậm): 
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 35
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Bảng (Table)
Bảng (Table)
I Định dạng cột: 
I Một số thuộc tính có thể dùng với các thẻ của table:
I align: canh lề (left/right/center)
I bgcolor: màu nền (tên màu hoặc mã màu)
I Một số thẻ thường dùng khác để tạo table:
I : tiêu đề của table
I : nhóm các hàng là tiêu đề của table
I : nhóm các hàng là footer của table
I : nhóm các hàng là nội dung của table
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 36
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Bảng (Table)
Ví Dụ
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 37
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Bảng (Table)
Gộp (Merge) Các Ô Trong Table
I gộp các ô cùng cột:
I gộp các ô cùng dòng:
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 38
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Biểu mẫu (Form)
Biểu Mẫu (Form)
I dùng để thu thập dữ liệu của người sử dụng web
I thường k/hợp với một n/ngữ lập trình để xử lý dữ liệu nhập vào:
I client-side: JavaScript, VBScript (ít sử dụng)
I server-side: PHP, APS(.NET), JSP, . . .
I các thành phần cơ bản trong biểu mẫu: text fields, text areas,
drop-down lists, radio buttons, checkboxes, buttons, . . .
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 39
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Biểu mẫu (Form)
Tạo Biểu Mẫu
I Tạo một biểu mẫu (BM):
các tphần của BM
I name: tên của BM, dùng để tham chiếu đến form để truy xuất DL
trong form
I action: tác vụ cần thực hiện khi một submit button được nhấn,
thường là:
I submit dữ liệu lên server để xử lý (server-side)
I gọi một hàm JavaScript để xử lý tại browser (client-side)
I Một số các thuộc tính khác liên quan đến việc submit dữ liệu lên
server hoặc nhận kết quả trả về, sẽ được giới thiệu sau.
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 40
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Biểu mẫu (Form)
Các Thành Phần Nhập Liệu Cơ Bản
I thẻ cho phép tạo một số t/phần cơ bản để nhập liệu:
I name: tên của input, dùng để tham chiếu đến input
I type: loại input, bao gồm các loại cơ bản sau:
I text: text field
I password : dùng để nhập password
I radio/checkbox : chọn một/một số các giá trị từ danh sách
I button/reset: nút submit/reset biểu mẫu
I file: tạo 1 nút Browse... để chọn file
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 41
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Biểu mẫu (Form)
Các Thành Phần Nhập Liệu Cơ Bản
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 42
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Biểu mẫu (Form)
Một Số Thành Phần Nhập Liệu Khác
I Text area: dùng nhập liệu 1 đoạn text
nội dung
I rows: chiều cao của textarea (hàng)
I cols: chiều rộng của textarea (số ký tự)
I Drop-down list: chọn 1 trong các giá trị từ danh sách “thả xuống”
các mục chọn
I name: tên của drop-down list
I tạo mục chọn: text
I Hidden field (field ẩn): có thể gán và truy xuất giá trị nhưng không hiển
thị trên trang web: 
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 43
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Biểu mẫu (Form)
Một Số Thành Phần Nhập Liệu Khác
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 44
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Định dạng nâng cao (Advanced formatting)
Định Dạng Trang Web Nâng Cao
I Màu nền: 
I Ảnh nền: 
I Định font chữ:
I cho cả trang web: 
I cho 1 đoạn: dùng thẻ 
I face: tên kiểu chữ
I size: kích thước, từ 1 đến 7 (mặc nhiên: 3)
I color: màu chữ
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 45
[CT428] Chương 2. Ngôn ngữ HTML
Định nghĩa và định dạng thành phần nội dung
Định dạng nâng cao (Advanced formatting)
Định Dạng Trang Web Nâng Cao
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 46
[CT428] Chương 2. Ngôn ngữ HTML
Kết chương
Kết Chương
I HTML là một ngôn ngữ định dạng văn bản, dùng để tạo các trang
web.
I Có nhiều phiên bản HTML, số thẻ được hỗ trợ trong từng phiên
bản là khác nhau.
I Hiện nay, một số thẻ định dạng không còn được hỗ trợ hoặc không
khuyến khích sử dụng (basefont, font...), và được thay bằng CSS.
I Phiên bản mới nhất là HTML5 (đang phát triển):
I hỗ trợ đa dạng hơn loại thành phần của nội dung trang web
I bổ sung thêm nhiều tags mang tính chất ngữ nghĩa (semantic)
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 47
[CT428] Chương 2. Ngôn ngữ HTML
Kết chương
Kết Chương
I Mỗi trình duyệt cũng có thể hỗ trợ khác nhau đối với một số thẻ.
I Cần tham khảo sự hỗ trợ của trình duyệt đối với các thẻ khi tạo
trang web.
I Địa chỉ tham khảo:
I  (official)
(http: // www. w3. org/ community/ webed/ wiki/ Main_ Page )
I  (recommended)
I 
I 
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 48
[CT428] Chương 2. Ngôn ngữ HTML
Quiz
Quiz
1. What does HTML stand for?
a. Hyperlinks and Text Markup Language
b. Home Tool Markup Language
c. Hyper Text Markup Language
2. Who is making the Web standards?
a. The World Wide Web Consortium
b. Mozilla
c. Microsoft
d. Google
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 50
[CT428] Chương 2. Ngôn ngữ HTML
Quiz
Quiz
3. Choose the correct HTML tag for the largest heading
a. 
b. 
c. 
d. 
4. Choose the correct HTML tag to make a text bold
a. 
b. 
c. 
d. 
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 51
[CT428] Chương 2. Ngôn ngữ HTML
Quiz
Quiz
5. What is the correct HTML for creating a hyperlink?
a. 
b. W3Schools.com
c. W3Schools.com
d. W3Schools
6. How can you create an e-mail link?
a. xxx@yyy
b. 
c. 
d. 
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 52
[CT428] Chương 2. Ngôn ngữ HTML
Quiz
Quiz
7. How can you open a link in a new browser window?
a. 
b. 
c. 
8. Which of these tags are all table tags?
a. , , 
b. , , 
c. , , 
d. , , 
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 53
[CT428] Chương 2. Ngôn ngữ HTML
Quiz
Quiz
9. What is the correct HTML for inserting an image?
a. 
b. 
c. 
d. image.gif
10. Why should you add alternative text to your images?
a. So the user can save the image using the text as a name
b. So the users can get an idea of what the image is before it loads
c. In case the user wishes to load a different picture
d. So the users can get an idea of what the image is in case the browser
fails to load the image
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 54
[CT428] Chương 2. Ngôn ngữ HTML
Quiz
Quiz
11. To seperate single list items use?
a. 
b. 
c. 
12. When making bulleted lists you have what options?
a. triangle, square, circle
b. square, disc, polygon
c. disc, circle, square
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 55
[CT428] Chương 2. Ngôn ngữ HTML
Quiz
Quiz
13. What are the fields that allows the visitor to enter information
called?
a. Meta tags
b. Form fields
c. Meta fields
14. The value setting of a text field defines what?
a. The length of the field
b. If the value entered is a proper value
c. What will appear in the field as the default value
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 56
[CT428] Chương 2. Ngôn ngữ HTML
Quiz
Quiz
15. Which field can hold information that does not show?
a. Text field
b. Hidden field
c. Frame field
16. Password fields are similar to what?
a. Hidden fields except text show as “*”
b. Text fields except text show as “*”
c. Text area except text show as “*”
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 57
[CT428] Chương 2. Ngôn ngữ HTML
XHTML (Đọc thêm)
XHTML Là Gì?
I viết tắt của eXtensible HyperText Markup Language
I là sự kết hợp giữa XML và HTML (được xem là 1 ứng dụng của
XML)
I gần như giống hoàn toàn với HTML 4.01
I chặt chẽ và rõ ràng hơn HTML
⇒ đảm bảo cho các trang web có cấu trúc chặt chẽ, đúng qui cách
⇒ kết quả hiển thị trang web trên các trình duyệt khác nhau sẽ nhất
quán và chính xác hơn
I được khuyến nghị bởi W3C và được hỗ trợ bởi hầu hết browser
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 58
[CT428] Chương 2. Ngôn ngữ HTML
XHTML (Đọc thêm)
Cấu Trúc Một Trang XHTML
 
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"">
Title of the web page
Body of the page
 
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 59
[CT428] Chương 2. Ngôn ngữ HTML
XHTML (Đọc thêm)
Cấu Trúc Một Trang XHTML
I khai báo DOCTYPE là bắt buộc:
I profile: Strict hoặc Transitional hoặc Frameset.
I profile_DTD: URL của DTD tương ứng với profile.
I khai báo XML namespace trong thẻ là bắt buộc
I các thẻ , , và là bắt buộc phải có
I phải là root của trang web
I khai báo bảng mã, nếu có, phải sử dụng khai báo của XML:
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 60
[CT428] Chương 2. Ngôn ngữ HTML
XHTML (Đọc thêm)
Các Loại XHTML DOCTYPE
I Strict: “-//W3C//DTD XHTML 1.0 Strict//EN”
I Không được sử dụng các tags “quá hạn” (deprecated) (ref. W3C).
I DTD: “”
I Transitional: “-//W3C//DTD XHTML 1.0 Transitional//EN”
I Các tags “quá hạn” có thể được sử dụng.
I DTD: “ . . /xhtml1-transitional.dtd”
I Frameset: “-//W3C//DTD XHTML 1.0 Frameset//EN”
I Giống Transitional profile nhưng có hỗ trợ frame và framesets.
I DTD: “”
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 61
[CT428] Chương 2. Ngôn ngữ HTML
XHTML (Đọc thêm)
Một Số Qui Tắc Của XHTML
I Các thành phần (thẻ) phải lồng nhau đúng cấu trúc:
I Bold & italic text: No
I Bold & italic text: Yes
I Tất cả các thẻ phải được đóng, kế cả thẻ đơn:
I : No
I : Yes
I , : No
I , : Yes
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 62
[CT428] Chương 2. Ngôn ngữ HTML
XHTML (Đọc thêm)
Một Số Qui Tắc Của XHTML
I Tên các thẻ và thuộc tính phải được viết thường:
I , : No
I , : Yes
I Giá trị các thuộc tính phải đặt trong cặp dấu ”
I Không được viết tắt giá trị các thuộc tính:
I , : No
I , : Yes
HTML validator
 ; 
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 63
[CT428] Chương 2. Ngôn ngữ HTML
XHTML (Đọc thêm)
Quiz
Quiz
1. What does XHTML stand for?
a. EXtensible HyperText Markup Language
b. EXtreme HyperText Markup Language
c. EXtensible HyperText Marking Language
d. EXtra Hyperlinks and Text Markup Language
2. XML and HTML will be replaced by XHTML
a. True
b. False
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 64
[CT428] Chương 2. Ngôn ngữ HTML
XHTML (Đọc thêm)
Quiz
Quiz
3. Is this correct XHTML?
Coffee
Tea
Black tea
Green tea
Milk
a. true
b. false
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 65
[CT428] Chương 2. Ngôn ngữ HTML
XHTML (Đọc thêm)
Quiz
Quiz
4. What elements are mandatory in an XHTML document?
a. doctype, html, head, and body
b. doctype, html and body
c. doctype, html, head, body, and title
5. What are the different DTDs in XHTML?
a. Strict, Transitional, Loose, Frameset
b. Strict, Transitional, Loose
c. Strict, Transitional, Frameset
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 66
[CT428] Chương 2. Ngôn ngữ HTML
XHTML (Đọc thêm)
Quiz
Quiz
6. XHTML documents must be “well-formed”
a. False
b. True
7. What XHTML code is “well-formed”?
a. A short paragraph
b. A short paragraph
c. A short paragraph
8. All XHTML tags and attributes must be in lower case
a. False
b. True
TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 67

File đính kèm:

  • pdfbai_giang_lap_trinh_web_chuong_2_ngon_ngu_html_tran_cong_an.pdf