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ở <tên_thẻ> Bắt đầu một lệnh HTML Ví dụ <html>, <head>, <body> Thẻ đóng </tên_thẻ> Kết thúc một lệnh HTML Ví dụ </html>, </head>, </body> 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ên_thẻ>…</tên_thẻ> Tác động đến dữ liệu bên trong cặp thẻ Một số thẻ chỉ có thẻ mở <img>, <br>, <hr> 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ở <h1 align=“center”>Hello world</h1> Các thuộc tính có thể đổi vị trí cho nhau <image align=“center” src=“hello.png”> <image src=“hello.png” align=“center”> 10 Đại học Bách khoa Hà nội [...]... Đại học Bách khoa Hà nội 20 ĐOẠN VĂN, NGẮT DÒNG Paragraph Đâ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 < /html> 21 ĐOẠN VĂN, NGẮT DÒNG Đại học. .. giữa 2 thẻ Tác dụng: làm đậm nội dung khi hiển thị trên trình duyệt Đại học Bách khoa Hà nội 14 CÁC THẺ HTML CƠ BẢN … < /html> Đánh … Đánh dấu một file HTML 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 Đại học Bách khoa Hà nội...TRANG WEB ĐẦU TIÊN Title of page This is my first homepage This text is bold < /html> Đại học Bách khoa Hà nội 11 HIỂN THỊ TRÊN TRÌNH DUYỆT Đại học Bách khoa Hà nội 12 HIỂN THỊ TRÊN TRÌNH DUYỆT Đại học Bách khoa Hà nội 13 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... Arial Đại học Bách khoa Hà nội < /html> 25 ĐỊNH DẠNG VĂN BẢN Đại học Bách khoa Hà nội 26 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 Đại học Bách khoa Hà nội 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 < < <... hoặc giá trị tƣơng đối Đại học Bách khoa Hà nội 31 CHÈN HÌNH ẢNH VÀO TRANG WEB Image Image < /html> Đại học Bách khoa Hà nội 32 TẠO... … chỉ số dưới Đại học Bách khoa Hà nội 23 ĐỊ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 Đại học Bách khoa Hà nội 24 ĐỊNH DẠNG VĂN BẢN Formating Chữ đậm.... Hà nội 15 ẢNH NỀN TRANG WEB Background Image This is my first homepage This text is bold < /html> Đại học Bách khoa Hà nội 16 MÀU NỀN TRANG WEB Background Image This is my first homepage This text is bold < /html> Đại học Bách khoa Hà nội 17 ĐỀ MỤC... " " „ ' ' 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 CÁC KÝ TỰ ĐẶC BIỆT 30 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... căn chỉnh lề Đại học Bách khoa Hà nội 18 ĐỀ MỤC Đề 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 19 Đ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” ... 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 Đại học Bách khoa Hà nội 33 DANH SÁCH KHÔNG SẮP THỨ TỰ Ô tô Xe máy Tàu hỏa Đại học Bách khoa Hà nội 34 DANH SÁCH SẮP THỨ TỰ Mục 1 Mục 2 Mục 3 Đại học Bách khoa Hà nội 35 DANH SÁCH LỒNG NHAU Phương tiện đi lại Ô tô . 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. học Bách khoa Hà nội CÁC THẺ HTML CƠ BẢN < ;html& gt; … < /html& gt; Đánh dấu một file HTML <head> … </head> Đánh dấu phần đầu của file HTML <body> … </body>. 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