Blog DX

Bài 3: Hình ảnh và liên kết

5 tháng 8, 2014
1. Thẻ hình ảnh

- Cú pháp: <img src="url" />

Thuộc tính Ý nghĩa
src="url" URL đến tập tin ảnh
alt="description" Định nghĩa mô tả ngắn gọn cho hình, mô tả này sẽ được hiển thị khi di chuyển chuột trên ảnh hay khi trình duyệt bị tắt chức năng duyệt ảnh
width=" "
height=" "
Đặt kích thước hình theo chiều rộng (width) và chiều cao (height)
align="top"| "middle"| "bottom"| "left"| "right"  Căn lề theo văn bản xung quanh
border=" " Đặt kích thước đường viên bao quanh ảnh
hspace=" "
vspace=" " 
Định khoảng trống xung quanh ảnh theo phía trái phải (hspace), trên dưới (vspace) (tính theo pixel)
title=" " Tiêu đề của ảnh (Khi di chuột qua ảnh sẽ hiển thị tiêu đề)

Ví dụ:

<!DOCTYPE html>
<html>
<head></head>
<body>
         <img src="https://lh4.googleusercontent.com/-pFkSZhwVbIc/AAAAAAAAAAI/AAAAAAAAAB0/JZRWK4fu3vY/s120-c/photo.jpg" border="2" alt="Nội dung khi ảnh không hiển thị" title="Tiêu đề ảnh" />
</body>
</html>
Kết quả:
Nội dung khi ảnh không hiển thị
Chú ý: Khi sử dụng thẻ <img /> nên đặt thuộc tính alt và title trong mọi trường hợp. Hai thuộc tính này có tác dụng SEO cho website, đồng thời chuẩn web mà w3c đưa ra yêu cầu mọi ảnh phải có.

2. Thẻ liên kết

- Cú pháp: <a href="url">Nội dung</a>

Thuộc tínhÝ nghĩa
href="url"URL là địa chỉ một tài liệu, hay có thể có dạng "#<LocationName>" khi liên kết đến một vị trí xác định trong trang web hiện tại.
tagert="_blank"| "_self"| "_parent"| "_top"Quy định cách mở tài liệu do URL trỏ tới:
"_blank" mở ở cửa sổ mới
"_self" mở ở của số hiện tại
"_parent" mở với frame
"_top" khác với _parent, _top mở với cả trang
name="LocationName"Đặt tên cho vị trí đặt thẻ. Thuộc tính này được sử dụng khi cần liên kết đến một vị trí trong cùng trang hiện tại.
tabindex="number"Quy định thứ tự tab cho liên kết
title=" "Tiêu đề của liên kết (Được hiển thị khi di chuột trên liên kết)

Ví dụ:
<a href="http://dxoan.blogspot.com" target="_blank" title="Blog DX"> Trang chủ</a>
Kết quả: Trang chủ
- Liên kết hình ảnh: Trong trường hợp liên kết là 1 hình ảnh, chúng ta có thể thay "Nội dung" bằng cú pháp hình ảnh
Ví dụ:
<a href="http://dxoan.blogspot.com" target="_blank" title="Thủ thuật blog">
<img src="https://lh4.googleusercontent.com/-pFkSZhwVbIc/AAAAAAAAAAI/AAAAAAAAAB0/JZRWK4fu3vY/s120-c/photo.jpg" />
</a>
Kết quả:

Đánh dấu nội trang
- Là phương pháp đánh dấu 1 vị trí bất kỳ trên website, cho phép chúng ta liên kết tới vị trí đó.
- Ví dụ trên khi chúng ta click vào “Đầu trang” thì sẽ được chuyển tới vị trí “Trang chủ”. Để sử dụng chúng ta cần đặt thuộc tính name cho vị trí cần liên kết tới, ở liên kết thứ 2 chúng ta sử dụng href=“#name_value” với name_value là giá trị của thuộc tính name.

Đánh dấu ngoại trang
- Tương tự đánh dấu nội trang, đánh dấu ngoại trang là phương pháp liên kết tới 1 vị trí nào đó tới website bên ngoài.
Ví dụ:
<a href="http://dxoan.blogspot.com#danhdau">Home </a>
Kết quả: Home

Liên kết tạo email
- Là chức năng tạo liên kết email.
Ví dụ:
<a href="mailto:abcde@gmail.com?subject=Chào bạn&body=Mình có chút thắc mắc muốn hỏi bạn">Click vào đây để gửi Email</a>
Kết quả: Click vào đây để gửi Email

- Ngoài ra có thể gửi 1 lúc tới nhiều email, mỗi email cần gửi cách nhau bởi 1 dấu "phẩy".

Không có nhận xét nào:

Đăng nhận xét