Bài giảng HTML-DHTML-Javascript - Bài 02: Văn bản trong HTML - Lê Quang Lợi

Lê Quang Lợi 
Bài 02: Văn bản trong HTML 
Nội dung 
» Các thẻ văn bản 
» Các thẻ đặc biệt trong văn bản 
» Chèn ký tự đặc biệt 
» Danh sách trong văn bản 
» Chèn hình ảnh 
» Chèn âm thanh 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
2.1 Văn bản trong HTML 
» Văn bản được trình bày bởi các thẻ thể hiện văn bản 
» Văn bản: 
• Các ký tự văn bản: đoạn khối, danh sách câu  
• Hình ảnh: Các hình ảnh, lưu đồ, biểu đồ, ảnh nền 
• Đa phương tiện Multimedia: Video, audio, 
» Làm việc: 
 Tạo văn bản: tiêu đề, ý, khối(đoạn)  
 Tạo hiệu ứng qua các thẻ 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
2.1.1 Các thẻ thể hiện văn bản 
» Tiêu đề văn bản: Heading H1, H2, H3, H4, H5, H6 
 Ví dụ: Tiêu đề H3 
» Đoạn văn bản: thẻ chia văn bản thành các đoạn khác nhau 
 nội dung đoạn 
Ví dụ: 
» Ngắt dòng: 
 Ví dụ: Dòng 01 dòng 02 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
 Doạn 01 
 đoạn 02 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
» Thể hiện văn bản cần có các ký tự đánh dấu đặc biệt 
» Các ký tự , “ ,”  trùng với các ký tự HTML sử dụng 
» Quy tắc chèn: 
• &mã 
• &Tên 
Ví dụ: 
Kí tự mã tên ý ngĩa 
Α Α Α Alpha 
Β Β Β Beta 
Γ Γ Γ Gamma 
Δ Δ Δ Delta 
Ε Ε Ε Epsilon 
Θ Θ Θ Theta 
Ι Ι Ι Iota 
2.4 Chèn các ký tự đặc biệt 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
2.3 Chèn hình ảnh 
» Ảnh nền cho toàn bộ tài liệu HTML trong thẻ Body 
bgColor: thể hiện màu nền cho trang 
 Ví dụ: 
» Ảnh nền cho thẻ: CSS/Style 
 Thể hiện ảnh nền cho toàn bộ thẻ 
 background-image:url(myimg.jpg): Ảnh nền 
 background-color: thể hiện màu nền 
Ví dụ: 
2.1.2 Thẻ thể hiện hiệu ứng văn bản 
» Thẻ font: quy định font chữ có thẻ 
• face=“tenfont” 
• Color: thể hiện màu chữ 
• Style: thể hiện kiểu chữ 
Ví dụ: Mau do 
» Cỡ chữ béo: , , ,  
» Các thẻ khác: , , , ,  
» Căn lề văn bản 
- Align: left/right/center/justify 
- Valign: top/bottom/midde 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
2.3 Chèn hình ảnh 
» Hình ảnh là một thành phần trong văn bản 
» Hình ảnh được hỗ trợ trong HTML: GIF, JPG, PNG 
» Thẻ IMG: 
• src: chỉ ra nguồn bức ảnh cần hiển thị 
• Width, heigth: độ rộng, độ cao 
• Border: đường viền cho bức ảnh 
Ví dụ: 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
2.4 Làm việc với danh sách 
» Danh sách thể hiện một phần trong tài liệu HTML 
» Thể hiện các đối tượng cùng một nhóm (chung tính chất) 
» Phân loại: 
 Loại có thứ tự (ol): thể hiện trình tự của các phần tử 
 Loại không có thứ tự(ul): các phần tử là như nhau 
» Cấu trúc: gồm thẻ ol hoặc ul và các phần tử li 
Ví dụ: 
 Khoa CNTT 
 Khoa Điện - điện tử 
 Khoa Cơ khí 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
2.4.1 Danh sách có thứ tự 
» Các phần tử trình bày một cách có tứ tự 
» Thẻ định nghĩa danh sách 
» Thẻ Định nghĩa phần tử trong danh sách 
» Thuộc tính type=“A/a/I/ 1” kiểu dấu thứ tự 
Ví dụ 
 Tea 
 Coffee 
 Milk 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
2.4.2 Danh sách không có thứ tự 
» Các phần tử trình bày một cách có tứ tự 
» Thẻ định nghĩa danh sách 
» Thẻ Định nghĩa phần tử trong danh sách 
 Ví dụ: 
 Coffee 
 Milk 
 Tea 
 Lập trình 
 mạng máy tính 
 Phần cứng máy tính 
Lê Quang Lợi: loilequang@gmail.com CNPM-CNTT-ĐHSPKT HY HTML-DHTML-Javascript 
2.5 Đa phương tiện trong HTML (HTML 5) 
 - Chèn Audio: 
 Ví dụ 
- Chèn video: 
- Chèn ứng dụng: