intTypePromotion=1
ADSENSE

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

Chia sẻ: Thanh Hoa | Ngày: | Loại File: PDF | Số trang:68

88
lượt xem
5
download
 
  Download Vui lòng tải xuống để xem tài liệu đầy đủ

Bài giảng "Lập trình Web - Chương 2: Ngôn ngữ HTML" cung cấp cho người đọc các kiến thức: 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. Mời các bạn cùng tham khảo nội dung chi tiết.

Chủ đề:
Lưu

Nội dung Text: Bài giảng Lập trình Web: Chương 2 - 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) https://sites.google.com/site/tcanvn/ 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  thị   file:/// welcome.html 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
ADSENSE

CÓ THỂ BẠN MUỐN DOWNLOAD

 

Đồng bộ tài khoản
2=>2