Thứ Tư, 17 tháng 4, 2013

Chèn liên kết và hình ảnh vào trang web

Như ta đã nói ở bài "HTML là gì ? " và "Siêu văn bản là gì ?" thì một trang html có thể chứa những liên kết ( link ) mà từ những liên kết này, người dùng đang đọc tài liệu này có truy cập đến các tài liệu liên quan khác một cách dễ dàng và nhanh chóng. Ở bài này, mình sẽ hướng dẫn các bạn cách chèn link vào trang html khi soạn thảo.

1, Đưa hình ảnh vào trang html.

- Để đưa hình ảnh vào trang html ta dùng thẻ <img> với cú pháp cơ bản như sau:

    <img src="Liên kết đến ảnh " >

- Đây là một thẻ không có thẻ đóng và nó có một sô thuộc tính sau:


  • Width: Chiều rộng của ảnh sẽ hiển thị trên trình duyệt ( tính bằng pixel hoặc % so với chiều rộng toàn trang web )

  • Height: Chiều cao mà ảnh sẽ hiển thị trên trình duyệt.

  • Border (Đường biên hay đường viền) :Thuộc tính này quy định độ dày của đường biên bao quanh ảnh ( tính bằng pixel ). Nếu không có thuộc tính này, ảnh sẽ không có đường biên bao quanh.

  • Alt : Tiêu đề cho ảnh, khi bạn rê chuột vào ảnh, tiêu đề của ảnh sẽ hiện ra. Tuy nhiên "alt" không có tác dụng trong một số trình duyệt, vì vậy để chắc ăn, bạn nên dùng thuộc tính sau.

  • Title : Tương tự như "Alt".


- Vậy cú pháp đầy đủ để đưa một bức ảnh vào trang html là:

     <img src="Dường dẫn đến ảnh" width="Độ rộng" height="chiều dài" border="độ dày" title="Tiêu đề ảnh" >

Cái này tùy vào ý thích của bạn.

2, Chèn liên kết

- Để chèn một liên kết vào trang web, ta sử dụng thẻ <a> với cú pháp như sau:

  <a href="Liên kết cần chèn" target="  "> Text </a>

- Khi bạn sử dụng thẻ này ta có một số chú ý sau:

  • Liên kết đến một trang web nào đó phải có http:// đi trước.

  • Thuộc tính target sẽ xác định xem liên kết của bạn sẽ được mở ở đâu khi kích hoạt. Giá trị thường dùng là "new" - Mở trong một tab mới. Nếu không có thuộc tính này, liên kết sẽ được mở trên trang hiện tại.

  • Trên trình duyệt sẽ chỉ hiển thị đoạn "text", đoạn text này sẽ đại diện cho liên kết, khi bạn click vào "text", liên kết sẽ được mở.

  • Bạn có thể thay thế đoạn text bằng một bức ảnh theo cú pháp sau:


         <a href="liên kết" target="new"><img src="link ảnh"></a>

3, Liên kết gửi Email

- Ở phần trước, khi bạn click vào một liên kết, bạn sẽ được đưa đến một trang tài liệu hoặc một trang web. Nhưng giả sử một người đọc bài viết của bạn, và họ muốn liên hệ với bạn để trao đổi thêm. Lúc này, bạn nên để lại một "dấu vết" để giúp họ liên hệ với bạn.

- Tạo mailto: <a href="mailto:Địa chỉ email của bạn"> text </a>

- Khi người dùng click vào dòng text, họ sẽ được đưa đến trang gửi email, khi họ đăng nhập vào email của họ, thì email của bạn sẽ được đặt sẵn trong phần Email đích.

VD: Bạn hãy thử click vào liên kết dưới sẽ thấy rõ hơn kết quả:

Liên hệ

Trên đây là một số điểm cơ bản về các liên kết trong một trang web.

Cám ơn các bạn đã theo dõi ^^.

 

0 nhận xét:

Đăng nhận xét