›
›

Giáo trình Lập trình Web - Chương 2: Ngôn ngữ HTML - Trần Công Án

pdf 68 trang huongle 3190
Download
Bạn đang xem 20 trang mẫu của tài liệu "Giáo trình Lập trình Web - Chương 2: Ngôn ngữ HTML - Trần Công Án", để tải tài liệu gốc về máy bạn click vào nút DOWNLOAD ở trên

Tài liệu đính kèm:

  • pdfgiao_trinh_lap_trinh_web_chuong_2_ngon_ngu_html_tran_cong_an.pdf

Nội dung text: Giáo trình Lập trình Web - Chương 2: Ngôn ngữ HTML - Trần Công Án

  1. CT428. Lập Trình Web Chương 2 - Ngôn Ngữ HTML Giảng viên: Trần Công Án (tcan@cit.ctu.edu.vn) Bộ môn Mạng máy tính và Truyền thông Khoa Công Nghệ Thông Tin & Truyền Thông Đại học Cần Thơ 2013 – 2014
  2. [CT428] Chương 2. Ngôn ngữ HTML Mục Tiêu Giới thiệu ngôn ngữ HTML (HyperText Markup Language), ngôn ngữ đánh dấu siêu băn bản, dùng để tạo các trang web. TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 2
  3. [CT428] Chương 2. Ngôn ngữ HTML Nội Dung Giới Thiệu HTML Công cụ tạo trang web Định nghĩa thông tin chung của trang web Định nghĩa và định dạng thành phần nội dung Kết chương XHTML (Đọc thêm) TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 3
  4. [CT428] Chương 2. Ngôn ngữ HTML Giới Thiệu HTML Ngôn Ngữ HTML Ngôn Ngữ HTML I ngôn ngữ đánh dấu, dùng để tạo các trang web I do Tim Berner Lee phát minh và được W3C đưa thành chuẩn năm 1994 I bao gồm một tập các thẻ (tag) cho phép: I định nghĩa cấu trúc trang web I định dạng các phần tử thông tin trong trang web I tạo các siêu liên kết để liên kết đến các trang web khác I liên kết các đối tượng thông tin khác (hình ảnh, âm thanh, . . . ) vào trang web TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 4
  5. [CT428] Chương 2. Ngôn ngữ HTML Giới Thiệu HTML Ngôn Ngữ HTML Thẻ (Tag) Trong HTML I Mỗi thẻ là 1 từ khóa (tên), được bao quanh bởi cặp ngoặc nhọn và không phân biệt chữ hoa/thường, ví dụ: , , I Mỗi thẻ HTML thường bao gồm 1 cặp: thẻ mở (bắt đầu định dạng) và thẻ đóng (kết thúc định dạng) I Thẻ đóng giống thẻ mở nhưng có thêm ký hiệu/ trước tên thẻ, ví dụ: , , I Văn bản cần định dạng được đặt giữa thẻ mở và thẻ đóng I Ví dụ: Đây là một đoạn văn bản I Khoảng trắng và ký tự xuống dòng sẽ bị bỏ qua TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 5
  6. [CT428] Chương 2. Ngôn ngữ HTML Giới Thiệu HTML Ngôn Ngữ HTML Thẻ (Tag) Trong HTML I Các thẻ bao gồm cặp thẻ đóng/mở được gọi là thẻ kép. I Các thẻ chỉ có thẻ mở được gọi là thẻ đơn. I Các thẻ có thể lồng nhau nhưng không được chéo nhau, ví dụ: some text, some more and more I Một số thẻ có thêm các thuộc tính: I dùng để chỉ định một số thuộc tính khác liên quan đến thẻ I nếu có, sẽ được khai báo trong thẻ mở I ví dụ: (align là 1 thuộc tính, dùng để canh lề đoạn văn bản) TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 6
  7. [CT428] Chương 2. Ngôn ngữ HTML Giới Thiệu HTML Cấu trúc một tài liệu HTML Tài Liệu HTML I là một tập tin text có chứa các thẻ HTML I còn được gọi là một trang web I có phần mở rộng là .html hoặc .htm I cú pháp sai, nếu có, thường không bị báo lỗi bởi trình duyệt mà kết quả sẽ hiển thị không đúng như mong muốn TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 7
  8. [CT428] Chương 2. Ngôn ngữ HTML Giới Thiệu HTML Cấu trúc một tài liệu HTML Cấu Trúc Một Tài Liệu HTML § ¤ The first HTML example I html: định nghĩa 1 tài liệu html Welcome to the world of I head: khai báo thông tin HTML! chung của trang web I body: chứa nội dung trang web ¦ ¥ TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 8
  9. [CT428] Chương 2. Ngôn ngữ HTML Công cụ tạo trang web Các Công Cụ Tạo Trang Web I trình soạn thảo thuần văn bản (text editor): I dùng trực tiếp thẻ HTML để tạo và trình bày trang web I phù hợp cho việc học HTML (phải nhớ các thẻ HTML) I một số chương trình thông dụng: NotePad, NotePad++ (PC), TextEdit, TextWrangler (Mac), Sublime Text (PC+Mac+Linux) I các công cụ thiết kế web chuyên nghiệp WYSIWYG: I thiết kế trang web trực quan, không cần nhớ các thẻ HTML I công cụ sẽ tự động sinh ra mã HTML tương ứng I phù hợp cho việc thiết kế web thực tế (tiết kiệm tgian, công sức) I một số công cụ: Adobe Dreamweaver, CoffeeCup (PC+Mac) TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 9
  10. [CT428] Chương 2. Ngôn ngữ HTML Công cụ tạo trang web Trình Soạn Thảo Thuần Văn Bản Text file (welcome.html) lưu hiển file:/// welcome.html thị Text editor (Sublime Text 2) Web browser (Chrome) TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 10
  11. [CT428] Chương 2. Ngôn ngữ HTML Công cụ tạo trang web Công Cụ Thiết Kế Web - Dreamweaver TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 11
  12. [CT428] Chương 2. Ngôn ngữ HTML Công cụ tạo trang web Công Cụ Thiết Kế Web - CoffeeCup TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 12
  13. [CT428] Chương 2. Ngôn ngữ HTML Công cụ tạo trang web Công Cụ Thiết Kế Web - CoffeeCup TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 13
  14. [CT428] Chương 2. Ngôn ngữ HTML Định nghĩa thông tin chung của trang web Định Nghĩa Thông Tin Chung Của Trang Web I các thẻ này được đặt trong cặp thẻ I các thẻ cơ bản: I : tiêu đề trang web (xuất hiện trên thanh tiêu đề cửa sổ trình duyệt hay tab) I : dùng để định nghĩa metadata cho trang web như bảng mã (charset), từ khóa (keywords), . . . Các thuộc tính cơ bản: I charset: bảng mã của font chữ. VD: I name: định nghĩa một metadata, kết hợp với thuộc tính content. VD: I : đ/nghĩa URL mặc định cho các liên kết trong trang web TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 14
  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 Đị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
  16. [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
  17. [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
  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) Danh Sách (List) I gồm 2 loại: Danh sách không thứ tự Danh sách có thứ tự • list item 1 1. list item 1 • list item 2 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
  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) 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 type = A type = a type = I type = i 1. item 1 A. item 1 a. item 1 I. item 1 i. item 1 2. item 2 B. item 2 b. item 2 II. item 2 ii. item 2 3. item 3 C. item 3 c. item 3 III. item 3 iii. item 3 TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 19
  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) Ví Dụ TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 20
  21. [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
  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) 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 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
  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) Ví Dụ TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 23
  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 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ẻ I liên kết tới một bookmark trong một tài liệu khác: TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 24
  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 Trong – Ví Dụ TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 25
  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 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 Liên kết đến một tập tin trên một FTP server: TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 26
  27. [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
  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) 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
  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) Ví Dụ TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 29
  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) 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
  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) 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
  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) 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
  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ụ - 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
  34. [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
  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 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
  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) 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
  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) Ví Dụ TS. Trần Công Án (Khoa CNTT&TT) [CT428] Chương 2. Ngôn ngữ HTML 37
  38. [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
  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) 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
  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) 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
  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 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
  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) 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
  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 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
  44. [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
  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 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
  46. [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
  47. [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
  48. [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
  49. [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
  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
  51. [CT428] Chương 2. Ngôn ngữ HTML Quiz Quiz 5. What is the correct HTML for creating a hyperlink? a. c. d. 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
  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
  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
  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
  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
  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
  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
  58. [CT428] Chương 2. Ngôn ngữ HTML XHTML (Đọc thêm) Cấu Trúc Một Trang XHTML 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
  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
  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
  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
  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
  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
  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
  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
  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