Bài 1 trình bày về tài liệu HTML. Nội dung trình bày trong chương này gồm: 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 Bài 01: Tài liệu HTML Nội dung » Khái quát HTML » Tài liệu HTML » Làm việc với HTML tài liệu HTML » Công cụ HTML » Làm việc với thẻ HTML » Các quy định HTML Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 1.1 Giới thiệu HTML » HTML: (Hypertext Markup Language) Ngôn ngữ đánh dấu siêu vă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, liệu đa phương tiện trang web » File HTML: gồm thẻ HTML với nằm file html, html, xhmlt » Một trang web: HTML + CSS + Javascript » Phiên bản: 1.0, 4.1 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 1.1 Giới thiệu HTML » Trình duyệt chương trình: Tải (download): trang web 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ình duyệt => Thay đổi nội dung cần thiết Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 1.2 Tài liệu HTML Trang HML - Thẻ mô tả cấu trúc tài liệu HTML - HTML: Thẻ tài liệu html, toàn thẻ HTML - Là thẻ file HTML - Thẻ Tile: Tiêu đề trang web - Chỉ có 01 hiển thị tiêu đề trang web Lê Quang Lợi: loilequang@gmail.com - Thẻ Body: nội dung tài liệu HTML - Chỉ có chứa thẻ HTML, thể giao diện web HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 1.2 Tài liệu HTML Dạng tài liệu HTML khác Chào bạn Chào bạn Chào bạn Chú ý: - Trong tài liệu HTML có 01 thẻ: HTML, BODY, Head, Title - Có thể có nhiều thẻ khác thẻ lồng Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 1.3 Thẻ HTML » Thẻ (Tag): Quy định nội dung hiển thị tài liệu HTML » Tài liệu HTML: tạo thành từ nhiều thẻ html » Trong tài liệu HTML có nhiều thẻ khác thể nội dung • Thẻ 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 1.4 Một số thẻ » Head: Phần đầu tài liệu » Title: thể tiêu đề cho trang web » Meta: thể quy dịnh đặc biệt 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ẻ thích: - Khơng hiển thị trình duyệt - Mơ tả cho đoạn mã HTML tài liệu Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 1.4 Một số thẻ » Div: Phân chia tài liệu HTML thành phần khác => Dùng chủ yếu để thiết kế giao diện trang HMTL Ví dụ: đầu Giữa Cuối » Span: Thể nội dung dạng nhỏ, làm nhã cho thẻ input Ví dụ: Tên » Hr: dòng kẻ với độ rộng quy đinh size Ví dụ: Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 1.3 Thẻ HTML » Cú pháp thẻ Nội dung » Thẻ nằm cặp: “” Thẻ mở: , thẻ đóng “” Thẻ mở: ” » Nội dung: thể phần 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 1.3 Thẻ 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 • Kích thước, lề, vị trí, font chữ … » Sự kiện: Sự tương tác người dùng (chuột + bàn phím) » Sử dụng thẻ: • Chỉ tên thẻ, thuộc tính, nội dung thẻ • Thẻ mở phải có thẻ đóng • Thẻ có thể: bao khơng mắc xích vào nhau, • Thẻ nên viết ký tự thường (HTML5) Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 1.4 Một số thẻ => Một số thuộc tính cần lưu ý » Align, Valign: thuộc tính lề cho nội dung » Width, height: độ dài độ cao đối tượng hiển thị » ID, Class, Name: ID, lớp tên thẻ » Style: kiểu dáng thẻ » OnClick …: thuộc tính thể kiện thẻ Lê Quang Lợi: loilequang@gmail.com HTML-DHTML-Javascript CNPM-CNTT-ĐHSPKT HY 1.5 Các quy định 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ế độ suốt ◊ Qui định màu: #mã tên 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 1.6 Làm việc với tài liệu HTML » Xây dựng tài liệu khuôn dạng (Các thể bao nhau, không bao mắc xích nhau) » Sử dụng cú pháp thẻ » Kết hợp thẻ tạo nên giao diện hiển thị website » Sử dụng 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 ... < /html> Lê Quang Lợi: loilequang@gmail.com - Thẻ Body: nội dung tài liệu HTML - Chỉ có chứa thẻ HTML, thể giao diện web HTML- DHTML- Javascript CNPM-CNTT-ĐHSPKT HY 1. 2 Tài liệu HTML Dạng... lồng Lê Quang Lợi: loilequang@gmail.com HTML- DHTML- Javascript CNPM-CNTT-ĐHSPKT HY 1. 3 Thẻ HTML » Thẻ (Tag): Quy định nội dung hiển thị tài liệu HTML » Tài liệu HTML: tạo thành từ nhiều thẻ html. .. dung cần thiết Lê Quang Lợi: loilequang@gmail.com HTML- DHTML- Javascript CNPM-CNTT-ĐHSPKT HY 1. 2 Tài liệu HTML