Bài giảng HTML - Bài 1: Tài liệu HTML - Lê Quang Lợi

Nội dung text: Bài giảng HTML - Bài 1: Tài liệu HTML - Lê Quang Lợi

1. Lê Quang Lợi
2. Bài 01: Tài liệu HTML Nội dung » Khái quát về HTML » Tài liệu HTML » Làm việc với HTML và tài liệu HTML » Công cụ HTML » Làm việc với các thẻ HTML » Các quy định trong HTML Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
3. 1.1 Giới thiệu về HTML » HTML: (Hypertext Markup Language) Ngôn ngữ đánh dấu siêu văn bản (Text, âm thanh, viedeo, tương tác ) » HTML: Dùng thẻ (tag) để hiển thị văn bản, âm thanh, hình ảnh, các dữ liệu đa phương tiện trên trang web » File HTML: gồm các thẻ HTML với nằm trong file .html, .html, xhmlt » Một trang web: HTML + CSS + Javascript » Phiên bản: 1.0, 4.1 và hiện nay 5.0 » HTML: cho phép thiết kế giao diện trang web Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
4. 1.1 Giới thiệu về HTML » Trình duyệt là các chương trình: . Tải (download): trang web về phía máy khách (Client) . Hiển thị nội dung trang web (giao diện) Ví dụ: IE, FireFox, Chrome . » Trình soạn thảo: chương trình cho phép tạo file HTML. Ví dụ: WordPad, NotePad, ViSualStudio, Dreamweaver » Quy trình : Mở trình soạn thảo => Tạo nội dung => Ghi file .html(.html) => Chạy trên trình duyệt => Thay đổi nội dung nếu cần thiết Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
5. 1.2 Tài liệu HTML - Thẻ mô tả cấu trúc tài liệu HTML HTML - Là thẻ duy nhất trong file HTML - Thẻ Tile: Tiêu đề trang web Trang HML - Chỉ có 01 và hiển thị trên thanh tiêu đề của trang web - Thẻ Body: nội dung tài liệu HTML - Chỉ có duy nhất và chứa các thẻ HTML, thể hiện giao diện web Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
6. 1.2 Tài liệu HTML Dạng tài liệu HTML khác Chào các bạn Chào các bạn Chào các bạn Chú ý: - Trong tài liệu HTML chỉ có 01 thẻ: HTML, BODY, Head, Title - Có thể có nhiều các thẻ khác và các thẻ có thể lồng nhau Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
7. 1.3 Thẻ trong HTML » Thẻ (Tag): Quy định nội dung hiển thị trong tài liệu HTML » Tài liệu HTML: được tạo thành từ nhiều thẻ html » Trong tài liệu HTML có nhiều thẻ khác nhau thể hiện nội dung • Thẻ cơ bản: HTML, Head, Title, Meta • Thẻ văn bản: DIV,P, Heading, font, hr, br • Thẻ bảng: Table, Thead, Tbody, tfoot, tr, td • Thẻ nhập liệu: Input (text, submit, reset),Textarea, Radio • Thẻ đặc biệt: link, Script, Object, Embeded Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
8. 1.4 Một số thẻ cơ bản » Head: Phần đầu của tài liệu. » Title: thể hiện tiêu đề cho trang web » Meta: thể hiện các quy dịnh đặc biệt của trang web • Thuộc tính codepage: quy định mã chứa tài liệu HTML • UTE-F8, 65500 » HTML: Quy định nội dung tài liệu HTML » Body:thân tài liệu HTML » Thẻ chú thích: - Không hiển thị trên trình duyệt - Mô tả cho đoạn mã HTML trong tài liệu Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
9. 1.4 Một số thẻ cơ bản » Div: Phân chia tài liệu HTML thành từng phần khác nhau => Dùng chủ yếu để thiết kế giao diện trang HMTL Ví dụ: đầu Giữa Cuối » Span: Thể hiện nội dung dạng nhỏ, làm nhã cho thẻ input Ví dụ: Tên » Hr: chỉ ra dòng kẻ với độ rộng quy đinh bởi size Ví dụ: Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
10. 1.3 Thẻ trong HTML » Cú pháp thẻ Nội dung » Thẻ nằm trong cặp: “ ” . Thẻ mở: , thẻ đóng “ ” . Thẻ mở: ” » Nội dung: thể hiện phần được hiển thị » văn bản, âm thanh, hình ảnh » Thuộc tính: quy định việc hiển thị nội dung Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
11. 1.3 Thẻ trong HTML » Thuộc tính: quy định việc hiển thị nội dung • Màu nền, hình nền, hiệu ứng văn bản • Kích thước, căn lề, vị trí, font chữ » Sự kiện: Sự tương tác của người dùng (chuột + bàn phím) » Sử dụng thẻ: • Chỉ ra tên thẻ, các thuộc tính, nội dung của thẻ • Thẻ mở thì phải có thẻ đóng • Thẻ có thể: bao nhau và không được mắc xích vào nhau, • Thẻ nên viết bằng các ký tự thường (HTML5) Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
12. 1.4 Một số thẻ cơ bản => Một số thuộc tính cần lưu ý » Align, Valign: thuộc tính căn lề cho nội dung » Width, height: độ dài độ cao của đối tượng hiển thị » ID, Class, Name: ID, lớp và tên của thẻ » Style: kiểu dáng của thẻ » OnClick : các thuộc tính thể hiện sự kiện của thẻ Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
13. 1.5 Các quy định trong HTML » Màu sắc ◊ HTML Sử dụng 24 bit màu = 224 màu ◊ Red, Green, Blue làm ba màu chính + chế độ trong suốt ◊ Qui định màu: #mã hoặc tên hoặc hàm RGB Ví dụ: #FF00FF, Red, RGB(234,34,46), RGB(10%,5%,60%) » Kích thước: pt, px, in, cm, mm, pc, em,ex, % » Căn lề: Top, left, right, midde, bottom, Justify Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY
14. 1.6 Làm việc với tài liệu HTML » Xây dựng tài liệu đúng khuôn dạng (Các thể bao nhau, không bao mắc xích nhau) » Sử dụng đúng cú pháp của thẻ » Kết hợp các thẻ tạo nên giao diện hiển thị website » Sử dụng các phần mềm hỗ trợ thiết kế trang web Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY