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.
AMBIENT/
Chủ đề:
Nội dung Text: 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
- [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
- [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
- [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
- [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ự 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
- [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
- [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
Thêm vào BST
Báo xấu
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
