Giáo trình Ngôn ngữ HTML

1 Giảng viên: Hoà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 Ngôn ngữ HTML Đại học Bách khoa Hà nội NGÔN NGỮ HTML HTML là gì? Các thẻ trong HTML. 2 Đại học Bách khoa Hà nội HTML LÀ GÌ? Hyper Text Markup Language – Ngôn ngữ đánh dấu siêu văn bản Đƣợc sử dụng để tạo nên các trang web Trình duyệt đọc file HTML để hiển thị nội dung Là một file văn bản có chứa các thẻ (tag) và nội dung trang web 3 Đại học Bách khoa Hà nội HTML LÀ GÌ? Các thẻ đƣợc sử dụng để định dạng dữ 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, nếu sai cú pháp kết quả hiển thị không đúng. 4 Đại học Bách khoa Hà nội HTML LÀ GÌ? Một file HTML phải có phần mở rộng là htm hoặc html  File HTML có thể đƣợc tạo bởi bất kỳ chƣơng trình soạn thảo nào (word, notepad, ) 5 Đại học Bách khoa Hà nội CÁC THẺ TRONG HTML Đƣợc sử dụng để đánh dấu các thành phần của HTML Có nhiều kiểu thẻ, mỗi kiểu thẻ có tác dụng khác nhau Có 2 loại: thẻ đóng và thẻ mở 6 Đại học Bách khoa Hà nội CÚ PHÁP THẺ Thẻ mở  Bắt đầu một lệnh HTML Ví dụ , , Thẻ đóng  Kết thúc một lệnh HTML Ví dụ , , 7 Đại học Bách khoa Hà nội CÚ PHÁP THẺ Thẻ đóng và thẻ mở thƣờng đi liền với nhau  Tác động đến dữ liệu bên trong cặp thẻ Một số thẻ chỉ có thẻ mở , , 8 Đại học Bách khoa Hà nội THUỘC TÍNH CỦA THẺ Mỗi thẻ có thể có 1 hoặc nhiều thuộc tính Mỗi thuộc tính có tên thuộc tính và giá trị, giá trị đƣợc đặt trong dấu “” Cú pháp <tên_thẻ tên_TT1=“giá_trị1” tên_TT2=“giá_trị2” > 9 Đại học Bách khoa Hà nội THUỘC TÍNH CỦA THẺ Thuộc tính đƣợc viết trong thẻ mở Hello world Các thuộc tính có thể đổi vị trí cho nhau   10 Đại học Bách khoa Hà nội TRANG WEB ĐẦU TIÊN 11 Title of page This is my first homepage. This text is bold Đại học Bách khoa Hà nội HIỂN THỊ TRÊN TRÌNH DUYỆT 12 Đại học Bách khoa Hà nội HIỂN THỊ TRÊN TRÌNH DUYỆT 13 Đại học Bách khoa Hà nội GIẢI THÍCH Thành phần This text is bold  là thẻ mở  là thẻ đóng tƣơng ứng Nội dung của thành phần nằm giữa 2 thẻ Tác dụng: làm đậm nội dung khi hiển thị trên trình duyệt 14 Đại học Bách khoa Hà nội CÁC THẺ HTML CƠ BẢN  Đánh dấu một file HTML  Đánh dấu phần đầu của file HTML  Đánh dấu phần nội dung đƣợc hiển thị Thuộc tính bgcolor xác định màu nền của trang web Thuộc tính background xác định ảnh nền trang web 15 Đại học Bách khoa Hà nội ẢNH NỀN TRANG WEB 16 Background Image This is my first homepage. This text is bold Đại học Bách khoa Hà nội MÀU NỀN TRANG WEB 17 Background Image This is my first homepage. This text is bold Đại học Bách khoa Hà nội ĐỀ MỤC  Đƣợc sử dụng với các thẻ từ đến  có kích thƣớc lớn nhất  có kích thƣớc nhỏ nhất  Tự động thêm một dòng trống trƣớc và sau đề mục  Thuộc tính  align=“left”, “right”, “center”, “justify” căn chỉnh lề 18 Đại học Bách khoa Hà nội ĐỀ MỤC 19 Đề mục mức 1 Đề mục mức 2 Đề mục mức 3 Đề mục mức 4 Đề mục mức 5 Đề mục mức 6 Đại học Bách khoa Hà nội ĐOẠN VĂN, NGẮT DÒNG  Đánh dấu một đoạn văn bản Tự động thêm một dòng trống trƣớc và sau đoạn Thuộc tính align căn lề cho đoạn văn bản, giá trị mặc định là “left”  Chèn ký tự xuống dòng  Chèn đƣờng kẻ ngang 20 Đại học Bách khoa Hà nội ĐOẠN VĂN, NGẮT DÒNG 21 Paragraph <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Đây là paragraph 1. Căn trái. Đây là paragraph 2. Căn giữa. Đây là paragraph 3. Căn phải. Dòng 1 Dòng 2 Đại học Bách khoa Hà nội ĐOẠN VĂN, NGẮT DÒNG 22 Đại học Bách khoa Hà nội ĐỊNH DẠNG VĂN BẢN  chữ đậm  chữ nghiêng  chữ gạch chân  chữ to  chữ nhỏ  chỉ số trên  chỉ số dưới 23 Đại học Bách khoa Hà nội ĐỊNH DẠNG VĂN BẢN  Chọn font chữ cho văn bản Thuộc tính face xác định kiểu font Thuộc tính size xác định kích thƣớc Thuộc tính color xác định màu sắc 24 Đại học Bách khoa Hà nội ĐỊNH DẠNG VĂN BẢN 25 Formating Chữ đậm. Chữ nghiêng. Chữ gạch chân. Chữ to. Chữ nhỏ. Chỉ số trên. Chỉ số dưới. Font chữ kích thước 1 Font chữ kích thước 5 Font chữ Arial Đại học Bách khoa Hà nội ĐỊNH DẠNG VĂN BẢN 26 Đại học Bách khoa Hà nội CÁC KÝ TỰ ĐẶC BIỆT  Không nhập trực tiếp đƣợc từ bàn phím  Trùng với các thẻ HTML, không đƣợc hiển thị trên màn hình  Sử dụng các ký hiệu đƣợc quy định để chèn vào trang web 27 Đại học Bách khoa Hà nội CÁC KÝ TỰ ĐẶC BIỆT Ký tự Tên ký hiệu Số hiệu     < < < > > > & & & “ " " „ ' ' 28 Đại học Bách khoa Hà nội CÁC KÝ TỰ ĐẶC BIỆT Ký tự Tên ký hiệu Số hiệu ¢ ¢ ¢ £ £ £ ¥ ¥ ¥ € € € § § § © © © ® ® ® × × × ÷ ÷ ÷ 29 Đại học Bách khoa Hà nội 30 CÁC KÝ TỰ ĐẶC BIỆT CHÈN HÌNH ẢNH VÀO TRANG WEB  Thuộc tính src chỉ ra vị trí chứa ảnh, có thể là trên máy có trang web hoặc trên máy khác đƣợc nối mạng Thuộc tính alt chỉ ra hƣớng dẫn trong trƣờng hợp không hiển thị đƣợc ảnh. Thuộc tính border tạo khung cho ảnh Thuộc tính height, width xác định chiều cao và chiều rộng ảnh Có thể theo giá trị tuyệt đối hoặc giá trị tƣơng đối 31 Đại học Bách khoa Hà nội CHÈN HÌNH ẢNH VÀO TRANG WEB 32 Image <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Image <img src="globe.png" width="100" height="100"> <img src="globe.jpg" alt="Ảnh địa cầu"> Đại học Bách khoa Hà nội TẠO DANH SÁCH  Danh sách không sắp thứ tự  Danh sách sắp thứ tự  Các danh sách có thể lồng nhau 33 Đại học Bách khoa Hà nội DANH SÁCH KHÔNG SẮP THỨ TỰ Ô tô Xe máy Tàu hỏa 34 Đại học Bách khoa Hà nội DANH SÁCH SẮP THỨ TỰ Mục 1 Mục 2 Mục 3 35 Đại học Bách khoa Hà nội DANH SÁCH LỒNG NHAU Phương tiện đi lại Ô tô Xe máy Sở thích Bóng đá Bóng bàn 36 Đại học Bách khoa Hà nội TẠO BẢNG  Sử dụng thẻ  Mỗi dòng đƣợc định nghĩa bởi thẻ  Mỗi ô đƣợc định nghĩa bởi thẻ  Tiêu đề của dòng hoặc cột đƣợc định nghĩa bởi thẻ  Dữ liệu trong các ô có thể là văn bản, hình ảnh, hoặc một bảng khác. 37 Đại học Bách khoa Hà nội TẠO BẢNG Thứ 2 Thứ 3 Thứ 4 Toán Lý Hóa 38 Đại học Bách khoa Hà nội THẺ  Thuộc tính border xác định độ dày đƣờng kẻ của bảng  Thuộc tính align căn lề cho bảng  Thuộc tính background xác định ảnh nền  Thuộc tính bgcolor xác định màu nền  Thuộc tính height, width xác định chiều cao và chiều rộng bảng  Thuộc tính cellspacing xác định khoảng cách giữa các ô  Thuộc tính cellpadding xác định khoảng cách giữa dữ liệu và các cạnh của ô 39 Đại học Bách khoa Hà nội THẺ  Thuộc tính align căn lề cho các ô trong cùng dòng  Thuộc tính valign căn lề theo chiều dọc  Thuộc tính bgcolor xác định màu nền cho dòng 40 Đại học Bách khoa Hà nội THẺ ,  Thuộc tính align, valign căn lề cho dữ liệu theo chiều ngang và chiều dọc  Thuộc tính background, bgcolor xác định ảnh nền và màu nền cho ô dữ liệu  Thuộc tính height, width xác định chiều cao và chiều dài của ô  Thuộc tính rowspan xác định phạm vi mở rộng của ô theo hàng  Thuộc tính colspan xác định phạm vi mở rộng của ô theo cột 41 Đại học Bách khoa Hà nội TẠO SIÊU LIÊN KẾT (HYPERLINK)  Mục đích để liên kết đến các trang web khác hoặc các phần trong cùng trang web  Sử dụng thẻ để tạo siêu liên kết hoặc đặt tên cho một liên kết  Thuộc tính href chỉ ra địa chỉ của trang web cần liên kết đến  Thêm #tên trong địa chỉ để liên kết đến các phần trong trang web  Thuộc tính target xác định nơi mà trang web đƣợc mở. Nếu có giá trị là _blank thì mở trên một cửa sổ trình duyệt mới. 42 Đại học Bách khoa Hà nội ĐẶT TÊN CHO MỘT PHẦN CỦA TRANG WEB  Sử dụng thẻ với thuộc tính name  Cú pháp 43 Đại học Bách khoa Hà nội VÍ DỤ Trang web 1 Liên kết đến trang web 2 44 Trang web 2 Liên kết đến trang web 1 Đại học Bách khoa Hà nội VÍ DỤ 45 Đại học Bách khoa Hà nội SỬ DỤNG ẢNH LÀM LIÊN KẾT <a href= target=“_blank”> 46 Đại học Bách khoa Hà nội LIÊN KẾT ĐA PHƢƠNG TIỆN Hình ảnh Âm thanh Đoạn phim 47 Đại học Bách khoa Hà nội VÍ DỤ  Đặt tên cho một phần của trang Đây là mục 1  Tạo liên kết đến phần đã được đặt tên Di chuyển đến mục 1 48 Đại học Bách khoa Hà nội CHIA KHUNG CHO TRANG WEB  Chia cửa sổ trình duyệt thành các khung khác nhau, mỗi khung có thể hiển thị một trang web.  Chia thành các trang lựa chọn và trang nội dung, mỗi mục trên trang lựa chọn liên kết đến một trang nội dung. 49 Đại học Bách khoa Hà nội VÍ DỤ 50 Đại học Bách khoa Hà nội VÍ DỤ 51 Đại học Bách khoa Hà nội THẺ  Chia cửa sổ trình duyệt thành các khung  Thuộc tính cols chia thành các cột  Xác định độ rộng cột theo giá trị tuyệt đối hoặc giá trị tƣơng đối  Các cột cách nhau bởi dấu phẩy “,”  Ví dụ : 52 Đại học Bách khoa Hà nội THẺ  Thuộc tính rows giống nhƣ thuộc tính cols nhƣng chia cửa sổ trình duyệt thành các hàng  Thuộc tính border xác định độ dày đƣờng kẻ phân chia các khung, giá trị mặc định là 1  Không đặt trong thẻ 53 Đại học Bách khoa Hà nội THẺ  Xác định trang web đƣợc hiển thị trong một khung.  Thuộc tính src chỉ ra địa chỉ của trang web.  Thuộc tính noresize không cho phép thay đổi kích thƣớc của khung.  Thuộc tính scrolling cho phép hoặc không cho phép sử dụng các thanh cuộn, có các giá trị “yes”, “no” và “auto” 54 Đại học Bách khoa Hà nội VÍ DỤ - MAINFRAME.HTM Main Frame 55 Đại học Bách khoa Hà nội VÍ DỤ - MAINFRAME2.HTML Main Frame 56 Đại học Bách khoa Hà nội VÍ DỤ - FRAMESELECT.HTM Select Frame Frame A Frame B 57 Đại học Bách khoa Hà nội VÍ DỤ 58 Đại học Bách khoa Hà nội TẠO FORM TRÊN TRANG WEB  Form đƣợc sử dụng để nhập thông tin về 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 ở các dạng khác nhau nhƣ nhập văn bản, lựa chọn, đánh dấu 59 Đại học Bách khoa Hà nội VÍ DỤ - YAHOO 60 Đại học Bách khoa Hà nội TẠO FORM TRÊN TRANG WEB  Sử dụng thẻ  Cú pháp  Mỗi thẻ xác định một dạng nhập dữ liệu. 61 Đại học Bách khoa Hà nội THẺ  Thuộc tính type xác định kiểu nhập dữ liệu Có các kiểu button, checkbox, radio, text, password,  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 62 Đại học Bách khoa Hà nội NHẬP DỮ LIỆU VĂN BẢN TextField Ho ten: <input type="text" name="hoten"> Dia chi: <input type="text" name="diachi" value="Ha Noi"> Mat khau: <input type="password" name="matkhau"> 63 Đại học Bách khoa Hà nội NHẬP DỮ LIỆU VĂN BẢN Vi du ve TextArea <textarea cols="50" rows="10"> Chao cac ban. 64 Đại học Bách khoa Hà nội LỰA CHỌN, ĐÁNH DẤU Option Gioi tinh: Nam Nu So thich: <input type="checkbox" name="sothich" value="docsach">Doc sach <input type="checkbox" name="sothich" value="xemphim">Xem phim <input type="checkbox" name="sothich" value="nghenhac">Nghe nhac 65 Đại học Bách khoa Hà nội DANH SÁCH LỰA CHỌN Volvo Saab <option value="fiat" selected="selected">Fiat Audi 66 Đại học Bách khoa Hà nội ĐẶT CHÚ THÍCH VÀO TRONG HTML Hello world <!-- Đây là dòng chú thích --> Chào các bạn. 67 Đại học Bách khoa Hà nội BÀI TẬP VỀ NHÀ  Thực hành tất cả các ví dụ đã nêu trong bài  Đọc trƣớc về JavaScript 68 Đại học Bách khoa Hà nội