Cách tạo danh sách, chèn liên kết, hình ảnh và bản đồ liên kết trong HTML

  Nguyễn Dương       17 tháng 4, 2019
lượt xem

1. Tạo danh sách cho trang web

- Để tạo danh sách ta dùng thẻ có cấu trúc như sau:
+ Dạng đánh số
<ol>
     <li> Nội dung mục số 1 </li>
     <li> Nội dung mục số 2 </li>
     .............................................
     <li> Nội dung mục số n </li>
</ol>

+ Dạng không đánh số
<ul>
     <li> Nội dung mục số 1 </li>
     <li> Nội dung mục số 2 </li>
     .............................................
     <li> Nội dung mục số n </li>
</ul>
- Nội dung của các mục trong danh sách có thể là một danh sách khác.
Ví dụ mình tạo bố cục một trang về ship hàng và đặt tên file là ship hàng chính hãng.html



Kết quả:

2. Đường dẫn (Link)

- Đường dẫn tuyệt đối là đường dẫn chính xác từ gốc tới đích.
Ví dụ: D:\Ảnh\Trâm Anh 9 phút.mp4
           http://shiphangviettrung.com/bang-gia1
- Đường dẫn tương đối là đường dẫn dựa trên vị trí hiện tại của tài liệu, theo cấu trúc như sau:
./ : Vị trí của tài liệu cần chèn đường dẫn ở cùng thư mục với file đang khai báo. 
Ví dụ: 
../ Vị trí của tài liệu cần chèn đường dẫn ở thư mục mẹ của file đang khai báo.

3. Siêu liên kết

Siêu liên kết dùng để liên kết các tài liệu HTML với nhau. Tức nghĩa là người dùng có thể truy cập từ tài liệu HTML này sang tài liệu HTML khác.
Cấu trúc siêu liên kết có dạng như sau:
<a href="đường dẫn đến tài liệu khác"> văn bản liên kết </a>
Ví dụ mình chèn 1 đường dẫn vào mục Dịch vụ ship hàng từ nước ANH như sau:



Tiếp theo mình sẽ tạo ra một file html tên là ship hàng Anh.html. Trong file này mình sẽ chèn một đường dẫn quay trở về trang chủ.



Kết quả
Tại trang chủ bạn sẽ thấy mục Dịch vụ ship hàng từ nước Anh chuyển thành màu xanh. Khi bạn click vào đó thì trình duyệt sẽ chuyển đến file ship hàng Anh.html

Tại file ship hàng Anh.html, khi bạn click vào dòng Quay lại trang chủ thì trình duyệt sẽ chuyển về giao diện của file ship hàng chính hãng.html




4. Chèn hình ảnh vào tài liệu HTML

Thẻ chèn hình ảnh có cấu trúc như sau: 
<img src="đường dẫn tới hình ảnh" />
Ví dụ mình chèn <img src="ảnh quy trình đặt hàng.jpg" /> vào trên phần danh sách. Máy sẽ lấy file ảnh có tên ảnh quy trình đặt hàng.jpg ở cùng thư mục với file html để chèn vào trang web.



Kết quả:

5. Tạo bản đồ siêu liên kết trên hình ảnh

Ta dùng thẻ sau để tạo bản đồ siêu liên kết trên hình ảnh
<img src="đường dẫn tới hình ảnh" usemap="#tên bản đồ" />
<map name="tên bản đồ">
          <area shape="rect" coords="x1,y1,x2,y2" href="đường dẫn" />
          <area shape="circle" coords="x,y,z" href="đường dẫn" />
</map>
- Tên bản đồ là do bạn tự đặt.
<area shape="rectcoords="x1,y1,x2,y2href="đường dẫn" /> dùng để chèn liên kết vào hình chữ nhật. x1y1 là tọa đồ điểm đầu. x2y2 là tọa độ điểm cuối. x là khoảng cách từ mép trái đến điểm, y là khoảng cách từ mép trên đến điểm. Tọa độ gốc là điểm trên cùng bên trái, x=0 và y=0.



<area shape="circlecoords="x,y,rhref="đường dẫn" /> dùng để chèn liên kết vào hình tròn. xy là tọa độ của tâm hình tròn, r là bán kính.
- Đơn vị đo khoảng cách là pixel (px)
Ví dụ mình sẽ chèn link của trang Taobao vào hình con pokemon cầm kính lúp trong cái ảnh quy trình đặt hàng mà mình vừa chèn. 
Mình đã đo tọa độ điểm đầu là 18 - 54, điểm cuối là 111 - 174. Bạn có thể dùng phần mềm đo ảnh hoặc lên các trang chỉnh sửa ảnh online để đo.



Kết quả: Khi click vào hình con pokemon cầm kính lúp thì trình duyệt sẽ chuyển đến trang Taobao. 



 - Bạn có thể click chuột phải để mở trong tab mới


Rất đơn giản đúng không nào. ^^
Hãy đóng góp ý kiến của bạn vào phần bình luận bên dưới để mình hoàn thiện các bài viết hơn nhé. ^^
logoblog

Bài viết liên quan

Nhận xét bài viết

Có một câu nói mà mình rất thích đó là: "Những gì chúng ta biết trong ngày hôm nay, ngày hôm sau sẽ lỗi thời. Nếu ngừng học tập thì chúng ta sẽ ngừng phát triển".
Con người ta muốn biết, muốn hiểu, muốn thành công thì phải học, học thật nhiều, học suốt đời.

Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để mọi người cùng thảo luận nhé!

Lưu ý không spam link dưới mọi hình thức

Bạn có thể bình luận bằng 3 chế độ:
- Tài khoản Gmail
- Ẩn danh
- Tên tự tạo

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

Đăng nhận xét