Giáo trình Thực hành HTML - Bài 3: Liên kết và hình ảnh trong HTML

LAB HTML 3
LIÊN KẾT VÀ HÌNH ẢNH TRONG HTML
A – LÝ THUYẾT
I – TẠO LIÊN KẾT TỚI CÁC TRANG HTML KHÁC (HYPER LINK)
1 – Liên kết ngoại trang
Thẻ 
	Thẻ này có tác dụng tạo ra các liên kết tới các trang văn bản HTML khác hoặc bất kỳ một vị trí nào ngay trong chính văn bản HTML đó
href: Địa chỉ dẫn tới trang mà nó liên kết (Đường Link). Giá trị chính là đường dẫn của một File muốn truy suất vào
target: Quy định cách thức mở một văn bản HTML mới. Giá trị là _blank sẽ đưa trang mà nó liên kết hiển thị tại một tab mới trên trình duyệt
title: Thể hiện một đoạn text môt tả ngắn cho địa chỉ liên kết khi người dùng đưa chuột lên. Giá trị là một đoạn text được gõ vào mà người dùng muốn xuất hiện
name: Tên của liên kết (Thường được sử dụng trong phương pháp đánh dấu). Giá trị là một đoạn text bất kỳ thể hiện tên.
2 – Phương pháp đánh dấu nội trang
Tạo một trang HTML mới với tên là index.html có nội dung như sau:
3 – Phương pháp đánh dấu ngoại trang
Tạo một trang HTML mới với tên là index.html với nội dung như sau:
Tạo một trang HTML mới với tên là trang2.html với nội dung như sau:
II – ĐƯA HÌNH ẢNH VÀO MỘT TRANG HTML
1 – Làm việc với Thẻ IMG và các thuộc tính của nó
Thẻ 
Thẻ này có tác dụng đưa hình ảnh từ bên ngoài trang văn bản HML hiển thị vào bên trong trang
src: Thể hiện đường dẫn của ảnh. Giá trị chính là đường dẫn của bức ảnh muốn đưa vào tài liệu HTML
width: Quy định lại độ rộng của bức ảnh để đưa vào hiển thị trong văn bản HTML. Giá trị thường được sử dụng là Px
height: Quy định lại chiều cao của bức ảnh để đưa vào hiển thị trong văn bản HTML. Giá trị thường được sử dụng là Px
alt: Hiển thị một đoạn text ngắn mô tả về ảnh khi bức ảnh khi bức ảnh không xuất hiện hoặc chưa kịp tải lên. Giá trị chính là một đoạn text mô tả ngắn do người dùng đưa vào
border: Tạo đường viền bao quanh bức ảnh. Giá trị thường được sử dụng là Px chỉ định độ dầy của bức ảnh
align: Quy định vị trí của bức ảnh so với các phần tử khác nằm xung quanh nó. Các giá trị có thể sử dụng như: Left, Right
hspace: Quy định khoảng cách từ bức ảnh đến các đối tương bên ngoài nó theo chiều ngang theo chiều ngang. Giá trị thường được sử dụng là Px
vspace: Quy định khoảng cách từ bức ảnh đến các đối tương bên ngoài nó theo chiều ngang theo chiều dọc. Giá trị thường được sử dụng là Px 
B – BÀI TẬP
I – BÀI TẬP THỰC HÀNH
1 – Bài tập
Bài 1:
	Sử dụng những kiến thức đã học trong bài này và những kiến thức đã học trong các bài học trước để thiết kế một trang web tĩnh về “Thể Thao” như hình mẫu dưới đây. Chú ý xem File bài giải, Bài 1.html để công việc thiết kế được chính xác 
II – BÀI TẬP VỀ NHÀ
1 – Bài tập
Bài 1:
	Hoàn chỉnh trang web tĩnh về “Thể Thao” với các tính năng đơn giản như:
Xem nội dung chi tiết của từng chuyên mục thông qua các đường dẫn (là tiêu đề bài viết hoặc chữ chi tiết)
Menu động cho phép chuyển tới các chuyên mục tương ứng khi người dùng lựa chọn