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

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.
Nội dung trích xuất từ tài liệu:
Bài giảng Lập trình Web: Chương 2 - Trần Công Án 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 [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 [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 [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 [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 [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 [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 [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 [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 [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 [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 [ ...