Làm thế nào để tạo liên kết trong HTML?

Mục lục:

Làm thế nào để tạo liên kết trong HTML?
Làm thế nào để tạo liên kết trong HTML?
Anonim

Trang web, blog, trang web - những khái niệm đã quá quen thuộc trong thời đại chúng ta. Với sự phát triển của Internet, các trang web lưu trữ các trang web đã trở nên vô cùng phổ biến và điều này không có gì đáng ngạc nhiên: đối với một số người, có trang web riêng là một điều cần thiết, đối với những người khác thì đó là một thú vui giải trí. Trong trường hợp đầu tiên, chúng ta thường nói về các công ty, tập đoàn, doanh nhân tư nhân, khi họ quảng cáo bất kỳ sản phẩm hoặc dịch vụ nào có nhu cầu. Thứ hai là về các blogger.

Bên cạnh đó, có những người dùng Internet chỉ đơn giản là tìm kiếm thông tin, đọc blog, xem video, v.v.

Để tạo một trang web chất lượng, có rất nhiều lựa chọn. Chúng tôi sẽ tập trung vào lập trình web thông qua HTML.

HTML là gì

HTML là viết tắt của Hyper Text Mark-Up Language. Được dịch từ tiếng Anh, điều này có nghĩa là "Ngôn ngữ Đánh dấu Siêu văn bản".

Nói cách khác, HTML là một tập hợp mã mà bạn có thể tạo các thành phần chính của trang web, khung của nó, nhưcách các từ được tạo thành câu.

Mã HTML được viết riêng bằng các chữ cái Latinh và được gọi là thẻ và mỗi mã được đặt trong dấu ngoặc nhọn. Một số thẻ được ghép nối, một số thẻ chưa được ghép nối.

Ghép nối có nghĩa là chúng phải được sử dụng theo cặp mà không bị lỗi. Ví dụ: thẻ mở cho biết vị trí bắt đầu trên một trang web và thẻ đóng cho biết vị trí dừng. Cái sau khác với cái trước bởi sự hiện diện của một ký tự gạch chéo sau dấu ngoặc nhọn mở. Ví dụ:là thẻ mở,là thẻ đóng.

Các thẻ chưa ghép nối không cần đối tác.

Nhiều thẻ có thể có các thuộc tính - các phần tử bổ sung mang lại cho nó một số ý nghĩa cụ thể hơn. Ví dụ: thẻ.

thiết kế web
thiết kế web

Nơi HTML được sử dụng

Cách hiểu cổ điển về nơi cần HTML là xây dựng trang web.

Trong thực tế, điều này có thể là đủ, vì HTML cho phép bạn tạo các thành phần chính của trang web, menu (bao gồm cả các menu nhiều cấp), đặt nền, chèn văn bản, hình ảnh, âm thanh, video, chỉnh sửa phông chữ và nhiều hơn nữa.

Tuy nhiên, có những ngôn ngữ khác cho phép bạn thêm các yếu tố thú vị và thường cần thiết hơn vào trang web:

  • CSS thiết lập kiểu cho toàn bộ trang web mà không cần phải liên tục chỉ định các đặc điểm kiểu của các phần tử riêng lẻ bằng cách sử dụng các thẻ - ví dụ: màu và phông chữ của văn bản.
  • Ngôn ngữ script cho phép bạn phát triển và nhúng các chương trình nhỏ (script) trên trang web, từnhững thứ mang tính thẩm mỹ tầm thường (thay đổi màu của liên kết khi di chuột qua) và kết thúc bằng những thứ có chức năng (thu thập địa chỉ email, số điện thoại của khách hàng).
  • Với PHP, bạn có thể phát triển sổ lưu bút hoặc hệ thống bình luận của riêng mình.

Ngoài ra HTML còn được sử dụng trong việc tạo email để phân phối.

danh sách gửi thư internet
danh sách gửi thư internet

Liên kết là gì

Chúng cho phép bạn điều hướng đến một trang web khác, cả bên trong trang web và bên ngoài.

Các liên kết HTML thường được sử dụng:

  • Để truy cập tài nguyên web bên ngoài.
  • Để di chuyển qua các trang trong trang web.
  • Để truy cập google biểu mẫu.

Một liên kết đến nguồn trong HTML cũng thường được chỉ ra, đặc biệt là khi sao chép tài liệu từ trang khác, bạn phải chỉ định tác giả. Nếu không, việc sao chép mà không có ghi công có thể thuộc các định nghĩa vi phạm bản quyền, ăn cắp nội dung và phản tác dụng. Ngoài ra, việc sử dụng các tài liệu vay mượn, không độc đáo sẽ làm giảm hiệu suất SEO và việc chỉ ra một liên kết đến nguồn làm giảm rủi ro.

Các loại liên kết

Theo nghĩa cổ điển, liên kết là địa chỉ của tài nguyên web mà bạn có thể truy cập bằng cách nhấp vào nó.

các loại liên kết
các loại liên kết

Bên cạnh đó, còn có các siêu liên kết: văn bản và hình ảnh. Trong những trường hợp này, liên kết HTML bị "ẩn" dưới một số câu (từ) hoặc hình ảnh và để theo dõi nó, bạn cần nhấp vào văn bản hoặc hình ảnh.

Các loại liên kết khác:

  • Unvisited - một liên kết chưa được nhấp vào trong một phiên cụ thể. Ví dụ: nếu bạn nhấp vào liên kết này vào ngày hôm qua, sau đó tắt máy tính của bạn và bật lại vào hôm nay, thì bây giờ liên kết không được truy cập lại vì một phiên mới đã bắt đầu.
  • Đang hoạt động - ở trạng thái này, liên kết được lưu trong một thời gian rất ngắn: khoảng thời gian từ khi nhấp vào liên kết đến khi nhấp vào liên kết.
  • Đã truy cập - một liên kết đã được truy cập ít nhất một lần trong một phiên.

Đối với các liên kết văn bản thông thường, những liên kết được truy cập có xu hướng thay đổi màu sắc trừ khi được chỉ định khác.

Hình ảnh siêu liên kết không thay đổi hình thức của nó, cho dù nó có được truy cập hay không.

Cách chèn liên kết thông thường

Nhiều tài nguyên web coi địa chỉ trang web như một liên kết, ngay lập tức làm cho nó có thể nhấp được và tô màu nó bằng màu sắc. Ví dụ: nếu địa chỉ được gửi bằng tin nhắn hoặc qua e-mail, nhấp vào địa chỉ đó, bạn có thể truy cập trang web.

Trong trường hợp tự tạo trang web bằng HTML, bạn phải chèn liên kết bằng thẻ đặc biệt. Nó sẽ giống như thế này: địa chỉ trang web. Văn bản liên kết trong HTML phải được chỉ định đầy đủ, với giao thức.

Cách chèn siêu liên kết văn bản

Trước đó, người ta đã nói rằng một siêu liên kết văn bản thực hiện chức năng tương tự như một liên kết thông thường, nhưng trông thẩm mỹ hơn: thay vì địa chỉ trang web, thường dài không cần thiết, một từ hoặc cụm từ được chỉ định. Ví dụ, trong câu "Tìm kiếm thông tin ở đây", bạn có thể ẩn liên kết trongtừ "đây". Nó sẽ được đánh dấu và nhấp vào nó sẽ đưa người dùng đến trang web mong muốn.

chèn một siêu liên kết
chèn một siêu liên kết

Cách tạo liên kết HTML đã được thảo luận trước đó. Bạn có thể chèn một siêu liên kết văn bản bằng cách sử dụng cùng một thẻ. Sự khác biệt duy nhất là bạn cần chỉ định văn bản giữa các thẻ mà liên kết sẽ bị ẩn dưới đó: văn bản hiển thị.

Cách chèn siêu liên kết hình ảnh

Ở đây phức tạp hơn một chút. Chúng tôi sử dụng cùng một thẻ, nhưng thay vì văn bản, bạn cần chỉ định đường dẫn đến hình ảnh.

Đường dẫn là vị trí của hình ảnh. Nếu ảnh (ảnh) được đặt trên một dịch vụ chia sẻ tệp, thì bạn cần chỉ định tất cả các thư mục dọc theo đường dẫn đến ảnh thông qua một dấu gạch chéo. Bạn cũng có thể bao gồm một liên kết đến một hình ảnh nếu có thể.

Để gắn thẻ

ngoài src, các thuộc tính khác cũng có thể áp dụng, cho phép bạn điều chỉnh chiều cao, chiều rộng và vị trí của hình ảnh và hơn thế nữa. Một số người trong số họ:

  • Src - chỉ định đường dẫn đến hình ảnh.
  • Lowsrc - giống với thuộc tính trước đó, nhưng được chỉ định cho hình ảnh chất lượng thấp.
  • Chiều cao - chiều cao hình ảnh.
  • Width - chiều rộng của nó.
  • Alt - mô tả hình ảnh. Khi bạn di chuột qua ảnh hoặc ảnh, văn bản được chỉ định trong thuộc tính này sẽ bật lên.
  • Border - xác định độ dày của đường viền xung quanh hình ảnh.

Các thuộc tính được chỉ định sau thẻ và được bao gồm trongthành phần của nó. Thuộc tính phải được theo sau bởi giá trị của nó. Ví dụ: đối với các thuộc tính "height" hoặc "width" (chiều cao, chiều rộng) chỉ định chiều cao của hình ảnh trên trang web. Đơn vị đo lường là pixel, trừ khi có quy định khác.

Nó sẽ như thế này: <a href="địa chỉ trang web"

. Các thuộc tính này sẽ giúp đặt kích thước phù hợp cho hình ảnh. Đường viền giúp tạo một đường viền vô hình xung quanh hình ảnh.

theo một liên kết
theo một liên kết

Các thuộc tính trên áp dụng riêng cho thẻ chèn hình ảnh. Ví dụ:.

Liên kết cố định là gì

Tạo liên kết neo là một kỹ năng rất hữu ích. Thường thì cần phải bố trí một trang web với một khối văn bản dài hoặc với một số tiểu mục trên một trang. Trong trường hợp này, bạn có thể bắt đầu ngay lập tức với danh sách các liên kết đến các phần phụ của văn bản hoặc trang web và khi nhấp vào chúng, người dùng sẽ chuyển thẳng đến phần được yêu cầu.

Tạo liên kết cố định sẽ yêu cầu sử dụng nhiều thẻ thuộc tính hơn các loại liên kết khác.

liên kết neo
liên kết neo

Trước tiên, bạn cần đặt giá trị tổng thể cho từng khối thông tin hoặc tiểu mục của văn bản bằng cách sử dụng thuộc tính top, sau đó liên kết nó với liên kết tương ứng.

Các tính năng của chúng mở rộng hơn, do đó, trước tiên bạn nên thành thạo việc tạo các liên kết đơn giản hơn, sau đó chuyển sang hình thành các liên kết cố định.

Mẹo

Vị trí của các khối thông tin khác nhau trên một trang web
Vị trí của các khối thông tin khác nhau trên một trang web

Trợ giúp từ những người có kinh nghiệmlập trình viên:

  • Bạn có thể làm cho nó để thông tin về một liên kết được hiển thị khi di chuột trong HTML. Đối với điều này, thuộc tính alt, mà chúng tôi cũng sử dụng cho các phần tử đồ họa, có thể hữu ích.
  • Có thể tạo danh sách các liên kết bằng HTML. Đặc biệt, điều này có thể hữu ích cho các liên kết cố định, cũng như khi bạn cần lập danh sách các tài nguyên web có thể được theo sau bởi một liên kết trực tiếp từ trang web hiện tại.
  • Với sự trợ giúp của CSS và JavaScript, cũng như một số hàm HTML, bạn có thể tạo một thiết kế liên kết văn bản và siêu liên kết khác với thông thường. Ví dụ: khi bạn di chuột qua một liên kết, liên kết đó có thể thay đổi màu và trở về liên kết trước đó khi con trỏ rời khỏi liên kết đó. Điều này có thể được thực hiện với một tập lệnh JavaScript tùy chỉnh. Ngoài ra, màu liên kết có thể được đặt thành màu khác ngoài màu xanh lam đối với trường hợp không truy cập hoặc màu tím đối với trường hợp đã truy cập. Đây là công việc của CSS.
  • Không lạm dụng liên kết. Một trang web có nhiều liên kết không phù hợp trông cẩu thả và cẩu thả.
  • Đảm bảo rằng người dùng hiểu rằng siêu liên kết với hình ảnh thực sự là một hình ảnh chứ không chỉ là một hình ảnh.

Kết

Rất dễ dàng để liên kết đến một trang trong HTML. Điều quan trọng là phải tuân theo tất cả các điểm chính của ngôn ngữ này, vì ngay cả một sai sót nhỏ cũng có thể dẫn đến thực tế là sẽ không có kết quả và mã sẽ không hoạt động.

Đề xuất: