đánh dấu siêu văn bản dung nội dung trang web 3 Đại học Bách khoa Hà nội... Đá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 b
Trang 11
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
Trang 2NGÔN NGỮ HTML
Trang 3HTML LÀ GÌ?
đánh dấu siêu văn bản
dung
nội dung trang web
3
Đại học Bách khoa Hà nội
Trang 4kết quả hiển thị không đúng
Trang 5HTML LÀ GÌ?
trình soạn thảo nào (word, notepad, …)
5
Đại học Bách khoa Hà nội
Trang 9THUỘC TÍNH CỦA THẺ
Trang 10THUỘC TÍNH CỦA THẺ
Trang 11TRANG WEB ĐẦU TIÊN
This is my first homepage
<b>This text is bold</b>
</body>
</html>
Đại học Bách khoa Hà nội
Trang 12HIỂN THỊ TRÊN TRÌNH DUYỆT
Trang 13HIỂN THỊ TRÊN TRÌNH DUYỆT
13
Đại học Bách khoa Hà nội
Trang 14GIẢI THÍCH
Thành phần <b>This text is bold</b>
<b> là thẻ mở
</b> là thẻ đóng tương ứng
duyệt
Trang 15 Đá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
Trang 16This is my first homepage
<b>This text is bold</b>
</body>
</html>
Trang 17MÀU NỀN TRANG WEB
This is my first homepage
<b>This text is bold</b>
</body>
</html>
Đại học Bách khoa Hà nội
Trang 20ĐOẠN VĂN, NGẮT DÒNG
<p> … </p>
Đá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”
<br>
Chèn ký tự xuống dòng
<hr>
Chèn đường kẻ ngang
Trang 21<p>Đây là paragraph 1 Căn trái.</p>
<p align="center">Đây là paragraph 2 Căn
Trang 22ĐOẠN VĂN, NGẮT DÒNG
Trang 24ĐỊNH DẠNG VĂN BẢN
<font>…</font>
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
Trang 25<font size="1" color="blue">Font chữ kích thước 1</font><br>
<font size="5" color="red">Font chữ kích thước 5</font><br>
<font face="Arial" color="green">Font chữ Arial</font><br>
</body>
</html> Đại học Bách khoa Hà nội
Trang 26ĐỊNH DẠNG VĂN BẢN
Trang 30CÁC KÝ TỰ ĐẶC BIỆT
Trang 31CHÈN HÌNH ẢNH VÀO TRANG WEB
<img src=“nguồn_ảnh”>
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
Trang 32CHÈN HÌNH ẢNH VÀO TRANG WEB
<img src="globe.png" border="1"><br>
<img src="globe.png" width="100"
height="100">
<img src="globe.jpg" alt="Ảnh địa
cầu">
Trang 37TẠO BẢNG
Sử dụng thẻ <table>…</table>
Mỗi dòng đƣợc định nghĩa bởi thẻ <tr>…</tr>
Mỗi ô đƣợc định nghĩa bởi thẻ <td>…</td>
Trang 39THẺ <TABLE>
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
Trang 40THẺ <TR>
dòng
Trang 42TẠ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ẻ <a>…</a> để tạo siêu liên kết hoặc đặt tên cho
một liên kết
trị là _blank thì mở trên một cửa sổ trình duyệt mới
Trang 43ĐẶT TÊN CHO MỘT PHẦN CỦA TRANG WEB
Sử dụng thẻ <a> với thuộc tính name
Cú pháp <a name=“tên”>…</a>
43
Đại học Bách khoa Hà nội
Trang 45VÍ DỤ
45
Đại học Bách khoa Hà nội
Trang 46SỬ DỤNG ẢNH LÀM LIÊN KẾT
<a href= http://www.google.com.vn
target=“_blank”><img src=“globe.png”></a>
Trang 47LIÊN KẾT ĐA PHƯƠNG TIỆN
<a href=“globe.png”>Hình ảnh</a><br>
<a href=“hello.wma”>Âm thanh</a><br>
<a href=“movie.avi”>Đoạn phim</a>
47
Đại học Bách khoa Hà nội
Trang 48VÍ DỤ
<a name=“muc1”>Đây là mục 1</a>
<a href=“#muc1”>Di chuyển đến mục 1</a>
Trang 49CHIA KHUNG CHO TRANG WEB
nhau, mỗi khung có thể hiển thị một trang web
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
Trang 50VÍ DỤ
Trang 51VÍ DỤ
51
Đại học Bách khoa Hà nội
Trang 52THẺ <FRAMESET>
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
Trang 53THẺ <FRAMESET>
chia cửa sổ trình duyệt thành các hàng
phân chia các khung, giá trị mặc định là 1
Không đặt trong thẻ <body>
53
Đại học Bách khoa Hà nội
Trang 54THẺ <FRAME>
khung
Thuộc tính src chỉ ra địa chỉ của trang web
kích thước của khung
phép sử dụng các thanh cuộn, có các giá trị “yes”,
“no” và “auto”
Trang 56<frame src="frameselect.htm" noresize scrolling="no">
<frame src="frame_a.htm" name="ShowFrame">
</frameset>
</frameset>
<body></body>
</html>
Trang 57<a href="frame_a.htm" target="ShowFrame">Frame A</a><br>
<a href="frame_b.htm" target="ShowFrame">Frame B</a>
Trang 58VÍ DỤ
Trang 59TẠO FORM TRÊN TRANG WEB
dụng
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
Trang 60VÍ DỤ - YAHOO
Trang 61TẠO FORM TRÊN TRANG WEB
Trang 62THẺ <INPUT>
Có các kiểu button, checkbox, radio, text,
password,…
Thuộc tính value xác định giá trị ban đầu cho đối
tƣợng
Trang 65Nam <input type="radio" name="gioitinh" value="nam">
Nu <input type="radio" name="gioitinh" value="nu">
Trang 68BÀI TẬP VỀ NHÀ
Thực hành tất cả các ví dụ đã nêu trong bài