Cách tạo liên kết với KompoZer

Khả năng tạo liên kết trong tài liệu đưa bạn đến một tài liệu khác, có lẽ trên mạng nửa chừng trên toàn cầu, được cho là lý do quan trọng nhất mà World Wide Web được phát minh. Các liên kết này, được gọi là siêu liên kết, là "H" trong HTML - Ngôn ngữ đánh dấu siêu văn bản. Nếu không có siêu liên kết, trang web sẽ không hữu ích lắm. Sẽ không có công cụ tìm kiếm, phương tiện truyền thông xã hội hoặc quảng cáo biểu ngữ (ok, hầu hết chúng ta có thể đứng để xem những quảng cáo đó).

Khi bạn đang tạo trang web của riêng mình, bạn sẽ muốn tạo siêu liên kết và KompoZer có các công cụ giúp bạn dễ dàng thêm liên kết thuộc bất kỳ loại nào. Trang mẫu được mô tả trong hướng dẫn này sẽ chứa các liên kết đến các trang web khác trong bốn danh mục, đến các phần khác của cùng một trang web và để bắt đầu một thông báo email. Tôi sẽ bắt đầu với một tiêu đề và bốn tiêu đề H3 cho mỗi thể loại. Trên trang tiếp theo, chúng tôi sẽ thêm một số liên kết.

01/05

Tạo một siêu liên kết với KompoZer

Tạo một siêu liên kết với KompoZer. Ảnh chụp màn hình lịch sự Jon Morin

Các công cụ siêu liên kết của KompoZer được truy cập bằng cách nhấp vào nút Liên kết trên thanh công cụ. Để tạo siêu liên kết:

  1. Đặt con trỏ của bạn trên trang mà bạn muốn siêu kết nối xuất hiện.
  2. Nhấp vào nút Liên kết trên thanh công cụ. Hộp thoại Thuộc tính liên kết sẽ xuất hiện.
  3. Trường đầu tiên bạn cần điền vào là hộp văn bản liên kết. Nhập văn bản bạn muốn xuất hiện trên trang cho siêu kết nối của bạn.
  4. Trường thứ hai bạn cần điền vào là hộp Vị trí liên kết. Nhập URL của trang mà siêu liên kết của bạn sẽ đưa người dùng khi được nhấp. Bạn nên sao chép và dán URL từ thanh địa chỉ của trình duyệt. Bạn ít có khả năng mắc sai lầm theo cách này và bạn biết đấy, ít nhất là tại thời điểm tạo liên kết của bạn, trang đó vẫn còn và liên kết đó không bị hỏng.
  5. Kích OK và hộp thoại Link Properties sẽ đóng lại. Liên kết của bạn bây giờ sẽ xuất hiện trên trang của bạn.

Trên hầu hết các trình duyệt, siêu liên kết sẽ xuất hiện trong văn bản được gạch dưới màu xanh theo mặc định. Bạn có thể áp dụng phong cách của riêng bạn cho các siêu liên kết với KompoZer, nhưng hiện tại, chúng tôi sẽ gắn kết với siêu liên kết cơ bản. Bạn nên xem trước trang của mình trong trình duyệt web và nhấp vào các liên kết để đảm bảo rằng chúng hoạt động.

02 trên 05

Tạo một liên kết Anchor với KompoZer

Tạo một liên kết Anchor với KompoZer. Ảnh chụp màn hình lịch sự Jon Morin

Có một loại siêu liên kết khác đưa bạn đến một phần khác của cùng một trang web khi được nhấp. Loại siêu liên kết này được gọi là liên kết anchor và vùng của trang mà bạn được đưa đến khi bạn nhấp vào liên kết đó được gọi là neo. Nếu bạn đã từng sử dụng liên kết "trở lại đầu trang" ở cuối trang web, bạn đang nhấp vào liên kết đến một liên kết.

KompoZer cho phép bạn tạo các neo mà bạn có thể liên kết bằng cách sử dụng công cụ Neo trên thanh công cụ.

  1. Nhấp vào khu vực của trang nơi bạn muốn neo. Đó là, nơi bạn muốn người xem trang được đưa đến khi một liên kết neo được nhấp vào. Đối với ví dụ này, tôi đã nhấp ngay trước "F" trong tiêu đề Nhạc yêu thích.
  2. Nhấp vào nút Neo trên thanh công cụ. Hộp thoại Anchor Properties được đặt tên xuất hiện.
  3. Mỗi liên kết trên một trang cần một tên duy nhất. Đối với neo này, tôi đã sử dụng tên "âm nhạc".
  4. Nhấp vào OK, và bạn sẽ thấy, và biểu tượng neo xuất hiện tại chỗ mà bạn muốn neo. Biểu tượng này sẽ không xuất hiện trên trang web của bạn, nó chỉ là cách KompoZer hiển thị cho bạn nơi neo của bạn.
  5. Lặp lại quy trình cho bất kỳ khu vực nào khác của trang nơi bạn muốn người dùng có thể chuyển sang. Nếu bạn có nhiều văn bản trên trang được phân tách bằng các tiêu đề hoặc một số dải phân cách hợp lý khác, thì các neo là một cách dễ dàng điều hướng một trang.

Tiếp theo, chúng tôi sẽ tạo các liên kết đưa người đọc đến các neo bạn đã tạo.

03 trên 05

Tạo điều hướng trang với KompoZer

Tạo điều hướng trang với KompoZer. Ảnh chụp màn hình lịch sự Jon Morin

Bây giờ bạn có các neo trên trang của mình, hãy tạo các liên kết sẽ được sử dụng làm lối tắt cho các neo đó. Đối với hướng dẫn này, tôi đã tạo một bảng 1 hàng, 4 cột bên dưới tiêu đề trên cùng của trang. Mỗi ô bảng chứa cùng một văn bản như một trong các tiêu đề danh mục được sử dụng để tách các liên kết trên trang. Chúng tôi sẽ làm cho văn bản trong mỗi ô trong bảng này là một liên kết đến neo tương ứng.

04/05

Tạo siêu liên kết đến các neo bằng KompoZer

Tạo siêu liên kết đến các neo bằng KompoZer. Ảnh chụp màn hình lịch sự Jon Morin

Bây giờ chúng ta có neo của chúng tôi tại chỗ và văn bản mà chúng tôi sẽ sử dụng để điều hướng trang được nhập, chúng tôi có thể biến những đoạn văn bản thuần túy đó thành liên kết. Chúng tôi sẽ sử dụng nút Liên kết một lần nữa, nhưng lần này nó sẽ hoạt động hơi khác một chút.

  1. Chọn văn bản bạn muốn chuyển thành liên kết. Trong ví dụ này, tôi đã chọn văn bản “Âm nhạc yêu thích” nằm trong ô bảng đầu tiên dọc theo đầu trang.
  2. Nhấp vào nút Liên kết trên thanh công cụ. Hộp thoại Thuộc tính liên kết sẽ mở ra.
  3. Trong trường hợp này, chúng tôi đã chọn văn bản trước khi chúng tôi nhấp vào nút Liên kết, do đó phần Liên kết văn bản của cửa sổ đã được điền và không thể chỉnh sửa được. Nhấp vào mũi tên xuống trong phần Vị trí liên kết. Bạn sẽ thấy một danh sách các neo mà bạn đã tạo trong các bước trước đó. Trong ví dụ này, tôi chọn #music anchor.
  4. Nhấp vào OK. Văn bản "Âm nhạc yêu thích" trong thanh điều hướng chuyển thành liên kết sẽ khiến người xem chuyển đến phần đó trên trang khi được nhấp.

Bạn sẽ nhận thấy rằng mỗi neo được đặt tên trong trình đơn thả xuống có một dấu "#" ở phía trước nó. Đây là cách bạn sẽ tạo một liên kết đến một neo trong HTML. Dấu "#" ở phía trước tên neo cho trình duyệt biết liên kết này đưa bạn đến một địa điểm khác trên cùng một trang.

05/05

Tạo một siêu liên kết từ hình ảnh với KompoZer

Tạo Một Siêu Liên Kết Từ Một Hình ảnh Với KompoZer. Ảnh chụp màn hình lịch sự Jon Morin

Bạn có biết rằng bạn có thể tạo liên kết từ hình ảnh cũng như văn bản không? KompoZer cho phép bạn thực hiện việc này chỉ bằng một vài cú nhấp chuột. Ở đây tôi đã chèn một hình ảnh biểu tượng nhỏ hiển thị mũi tên hướng lên trên và văn bản “TOP” ở cuối trang. Tôi sẽ sử dụng hình ảnh này như một liên kết để nhảy trở lại đầu trang.

  1. Nhấp chuột phải vào hình ảnh và chọn Thuộc tính hình ảnh và liên kết từ nhãn ngữ cảnh. Hộp thoại Image Properties sẽ mở ra.
  2. Trên tab Vị trí, bạn sẽ thấy tên tệp của hình ảnh và chế độ xem hình thu nhỏ đã được điền. Bạn nên nhập một số văn bản trong hộp Văn bản thay thế. Đây là những gì xuất hiện khi bạn di chuyển chuột qua hình ảnh và cũng có nội dung được đọc bởi trình đọc màn hình khi một người khiếm thị đọc trang web.
  3. Nhấp vào tab Liên kết. Ở đây bạn có thể chọn một neo từ trình đơn, giống như chúng tôi đã làm với các liên kết anchor. Trong thực tế, hình ảnh này đang được sử dụng như một liên kết anchor. Tôi đã chọn liên kết #Links_Of_Interest sẽ đưa chúng tôi trở lại đầu trang.
  4. Nhấp vào OK. Hình ảnh hiện liên kết trở lại đầu trang khi được nhấp.