Bài giảng Ngôn ngữ HTML - Bài 2: Văn bản trong HTML

Nội dung text: Bài giảng Ngôn ngữ HTML - Bài 2: Văn bản trong HTML

1. Lê Quang Lợi
2. 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 HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
3. 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 HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
4. 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ụ: Doạn 01 đoạn 02 » Ngắt dòng: Ví dụ: Dòng 01 dòng 02 Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
5. 2.4 Chèn các ký tự đặc biệt » 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ã Kí tự mã tên ý ngĩa Α Α Α Alpha • &Tên Β Β Β Beta Ví dụ: Γ Γ Γ Gamma Δ Δ Δ Delta Ε Ε Ε Epsilon Θ Θ Θ Theta Ι Ι Ι Iota Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
6. 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ụ: Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
7. 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 HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
8. 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 HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
9. 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 HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
10. 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 HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
11. 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ụ: Lập trình Coffee mạng máy tính Milk Phần cứng máy tính Tea Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
12. 2.5 Đa phương tiện trong HTML (HTML 5) - Chèn Audio: Ví dụ - Chèn video: - Chèn ứng dụng: Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY