Ngơn ngữ HTML Giảng viên: Hồng Văn Hiệp Bộ mơn: Kỹ Thuật máy tính Viện CNTT-TT – ĐH Bách Khoa Hà Nội Email: hiephv@soict.hut.edu.vn Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt NGƠN NGỮ HTML  HTML gì?  Các thẻ HTML Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt HTML LÀ GÌ? Text Markup Language – Ngôn ngữ đánh dấu siêu văn  Đƣợc sử dụng để tạo nên trang web  Trình duyệt đọc file HTML để hiển thị nội dung  Là file văn có chứa thẻ (tag) nội dung trang web  Hyper Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt HTML LÀ GÌ?  Các thẻ đƣợc sử dụng để định dạng liệu, quy định cách thức hiển thị nội dung trang web  HTML không phân biệt chữ hoa hay chữ thƣờng  HTML không báo lỗi cú pháp, sai cú pháp kết hiển thị không Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt HTML LÀ GÌ?  Một file HTML phải có phần mở rộng htm html  File HTML đƣợc tạo chƣơng trình soạn thảo (word, notepad, …) Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt CÁC THẺ TRONG HTML  Đƣợc sử dụng để đánh dấu thành phần HTML  Có nhiều kiểu thẻ, kiểu thẻ có tác dụng khác  Có loại: thẻ đóng thẻ mở Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt CÚ PHÁP THẺ  Thẻ mở   Bắt đầu lệnh HTML  Ví dụ , ,  Thẻ đóng   Kết thúc lệnh HTML  Ví dụ , , Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt CÚ PHÁP THẺ  Thẻ đóng thẻ mở thƣờng liền với  …  Tác  Một động đến liệu bên cặp thẻ số thẻ có thẻ mở  , , Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt THUỘC TÍNH CỦA THẺ  Mỗi thẻ có nhiều thuộc tính  Mỗi thuộc tính có tên thuộc tính giá trị, giá trị đƣợc đặt dấu “”  Cú pháp  Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt THUỘC TÍNH CỦA THẺ  Thuộc  Hello world thuộc tính đổi vị trí cho   Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 10 THẺ Xác định trang web đƣợc hiển thị khung  Thuộc tính src địa trang web  Thuộc tính noresize khơng cho phép thay đổi kích thƣớc khung  Thuộc tính scrolling cho phép khơng cho phép sử dụng cuộn, có giá trị “yes”, “no” “auto”  Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 54 VÍ DỤ - MAINFRAME.HTM Main Frame Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 55 VÍ DỤ - MAINFRAME2.HTML Main Frame Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 56 VÍ DỤ - FRAMESELECT.HTM Select Frame Frame A Frame B Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 57 VÍ DỤ Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 58 TẠO FORM TRÊN TRANG WEB Form đƣợc sử dụng để nhập thông tin ngƣời sử dụng  Một form chứa nhiều thành phần  Mỗi thành phần cho phép ngƣời sử dụng nhập thông tin dạng khác nhƣ nhập văn bản, lựa chọn, đánh dấu  Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 59 VÍ DỤ - YAHOO Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 60 TẠO FORM TRÊN TRANG WEB Sử dụng thẻ …  Cú pháp  …  Mỗi thẻ xác định dạng nhập liệu Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 61 THẺ  Thuộc tính type xác định kiểu nhập liệu kiểu button, checkbox, radio, text, password,…  Có Thuộc tính name đặt tên cho đối tƣợng  Thuộc tính value xác định giá trị ban đầu cho đối tƣợng  Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 62 NHẬP DỮ LIỆU VĂN BẢN TextField Ho ten: Dia chi: Mat khau: Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 63 NHẬP DỮ LIỆU VĂN BẢN Vi du ve TextArea Chao cac ban Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 64 LỰA CHỌN, ĐÁNH DẤU Option Gioi tinh: Nam Nu So thich: Doc sach Xem phim Nghe nhac Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 65 DANH SÁCH LỰA CHỌN Volvo Saab Fiat Audi Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 66 ĐẶT CHÚ THÍCH VÀO TRONG HTML Hello world Chào bạn Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 67 BÀI TẬP VỀ NHÀ Thực hành tất ví dụ nêu  Đọc trƣớc JavaScript  Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 68 ...NGƠN NGỮ HTML  HTML gì?  Các thẻ HTML Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt HTML LÀ GÌ? Text Markup Language – Ngơn ngữ đánh dấu siêu văn... thị trình duyệt  Đại học Bách khoa Hà nội CuuDuongThanCong.com https://fb.com/tailieudientucntt 14 CÁC THẺ HTML CƠ BẢN  … < /html>  Đánh  …  Đánh  dấu file HTML. .. https://fb.com/tailieudientucntt CÚ PHÁP THẺ  Thẻ mở   Bắt đầu lệnh HTML  Ví dụ , ,  Thẻ đóng   Kết thúc lệnh HTML  Ví dụ < /html> , , Đại học Bách khoa Hà nội CuuDuongThanCong.com