Cách Chèn Liên Kết Vào Biểu Ngữ

Mục lục:

Cách Chèn Liên Kết Vào Biểu Ngữ
Cách Chèn Liên Kết Vào Biểu Ngữ

Video: Cách Chèn Liên Kết Vào Biểu Ngữ

Video: Cách Chèn Liên Kết Vào Biểu Ngữ
Video: Gmail Tech Support - Cách chèn đường link vào hình ảnh nội dung thư Gmail 2024, Có thể
Anonim

Nếu bạn có một biểu ngữ, nhưng không có mã html tạo sẵn để chèn nó vào trang, thì việc thêm liên kết bạn cần không quá khó. Ngay cả khi banner được làm bằng công nghệ flash. Các tùy chọn có thể có để tổ chức các liên kết đến biểu ngữ ở định dạng đồ họa và flash trong mã nguồn được mô tả bên dưới.

Cách chèn liên kết vào biểu ngữ
Cách chèn liên kết vào biểu ngữ

Hướng dẫn

Bước 1

Nếu banner ở một trong các định dạng đồ họa (gif, jpg, png, bmp) thì chỉ cần đặt thẻ hình ảnh bên trong thẻ liên kết là đủ. Trong ngôn ngữ đánh dấu của trang web (HTML - HyperText Markup Language - "ngôn ngữ đánh dấu siêu văn bản"), phiên bản đơn giản nhất của nó trông giống như sau: Ở đây "địa chỉ tương đối" của hình ảnh được chỉ định trong thuộc tính src. Trong phiên bản này, trình duyệt sẽ giả định rằng ảnh nằm trong cùng một thư mục trên máy chủ của bạn, nơi chính trang là nơi biểu ngữ được chèn. Nhưng tốt hơn là chỉ định một "địa chỉ tuyệt đối":

Bước 2

Có một số thuộc tính khác để thêm vào thẻ này. Hai thuộc tính sẽ cho biết kích thước biểu ngữ (chiều cao và chiều rộng). Đây là các thuộc tính tùy chọn - hình ảnh sẽ được hiển thị mà không có chúng nếu mọi thứ diễn ra tốt đẹp khi trang được tải từ máy chủ đến trình duyệt. Nhưng nếu vì lý do nào đó mà bức tranh không được tải, thì việc thiếu kích thước có thể dẫn đến thực tế là tất cả các yếu tố thiết kế khác sẽ không đúng vị trí. Thẻ kích thước sẽ trông như thế này:

Bước 3

Theo mặc định, trình duyệt vẽ một đường viền màu xanh lam xung quanh các hình ảnh liên kết. Để tránh điều này, hãy thêm thuộc tính đường viền có giá trị null vào thẻ biểu ngữ:

Bước 4

Thêm một thuộc tính nữa (tiêu đề), thuộc tính này sẽ chứa văn bản cho chú giải công cụ khi bạn di con trỏ chuột qua biểu ngữ:

Bước 5

Bạn đã chuẩn bị thẻ hình ảnh với các thuộc tính quan trọng nhất, bây giờ bạn cần đặt nó bên trong thẻ liên kết. Mỗi siêu liên kết được hình thành bởi hai thẻ - mở và đóng: Thẻ mở chứa thuộc tính href, chứa địa chỉ để gửi yêu cầu. Giữa hai thẻ liên kết này và chèn thẻ biểu ngữ: Mã HTML của biểu ngữ có liên kết đã sẵn sàng, đừng quên thay thế: - trong thuộc tính href: "https://kakprosto.ru" bằng địa chỉ liên kết của bạn đối với biểu ngữ; - trong thuộc tính src: "https://kakprosto.ru/banner.gif" cho địa chỉ của hình ảnh cho biểu ngữ; - trong thuộc tính width: "468" cho chiều rộng của biểu ngữ; - trong thuộc tính height: "60" cho chiều cao của biểu ngữ; - trong thuộc tính title: "Đó là một biểu ngữ!" văn bản bật lên cho biểu ngữ của bạn;

Bước 6

Tất cả những biểu ngữ ở trên đề cập đến biểu ngữ hình ảnh, nhưng cũng có những biểu ngữ được thực hiện bằng công nghệ flash. Để chèn liên kết vào phim flash theo cách chuẩn, bạn không chỉ cần có biểu ngữ mà còn phải có mã nguồn của nó. Ngoài ra, bạn có thể chỉnh sửa mã nguồn và sau đó biên dịch phim Flash chỉ trong một trình soạn thảo chuyên dụng - một trình soạn thảo văn bản thông thường không thích hợp cho việc này. Tuy nhiên, có một cách để giải quyết tất cả những khó khăn này, đó là giới hạn bản thân bạn trong việc chỉ chỉnh sửa HTML và CSS (Cascading Style Sheets - "trang định kiểu xếp tầng"). Ngôn ngữ CSS được sử dụng để mô tả chi tiết hơn (so với HTML) về sự xuất hiện của các phần tử trang. Với sự trợ giúp của nó, các cấu trúc nhiều lớp khá phức tạp có thể được xây dựng trên các trang. Chúng tôi sẽ sử dụng điều này bằng cách đặt biểu ngữ Flash ở lớp dưới cùng và đặt lớp có liên kết phía trên nó. Mã HTML của biểu ngữ sẽ giống như sau:

Đừng quên thay thế các thuộc tính chiều rộng và chiều cao trong đó (ở hai nơi), tên biểu ngữ banner.swf (ở hai nơi) và địa chỉ liên kết https://kakprosto.ru (ở một nơi). Và mã SCC tương ứng với mã HTML này sẽ như thế này:

div.linkedFlashContainer {vị trí: tương đối; z-index: 1; đường viền: 0px; chiều rộng: 468px; chiều cao: 60px}

a.flashLink {vị trí: tuyệt đối; chỉ số z: 2; chiều rộng: 468px; chiều cao: 60px; background: url (spacer.gif) no-repeat;}

Một hình ảnh trong suốt (có kích thước bất kỳ) được gọi là spacer

Đề xuất: