Vâng, mọi thứ đều rõ ràng ở đây. Bây giờ, khi bạn nhấp vào nội dung, trang mong muốn sẽ mở ra trong một cửa sổ mới. Điều này rất cần thiết, vì nếu bạn không đăng ký, người dùng sẽ rời khỏi trang của bạn. Và vì vậy, trong mọi trường hợp, anh ta sẽ vẫn ở trên đó, chỉ khi anh ta không đóng nó một cách cụ thể. Hãy cố gắng tự mình làm mọi thứ, chỉ cần làm mọi thứ trở nên đẹp đẽ bằng chính đôi tay của mình. Không cần phải sao chép và dán.

Bằng cách nào đó như thế này. Có vẻ như tôi đã nói với bạn tất cả những điều quan trọng nhất, nhưng nếu bạn muốn đi theo hướng này và học HTML và CSS để tạo các trang web, blog và thậm chí cả cửa hàng trực tuyến chuyên nghiệp thì hãy nhớ xem thử khóa học video tuyệt vời về chủ đề này. Các bài học thực sự xuất sắc và thực sự được dạy cho những người vẫn còn ít hoặc chưa quen với việc xây dựng trang web.

Vâng, điều này kết thúc bài học của chúng tôi cho ngày hôm nay. Tôi hy vọng bạn thích bài viết của tôi và sẽ rất vui nếu bạn trở thành độc giả thường xuyên của tôi. Vì vậy, đừng quên đăng ký theo dõi các cập nhật blog của tôi để không bỏ lỡ điều gì thú vị. Vâng, tôi chúc bạn thành công trong mọi nỗ lực của mình. Tạm biệt!

Trân trọng, Dmitry Kostin.

Siêu liên kết là một trong những thành phần quan trọng nhất của tài liệu HTML. Nhờ thành phần này, cũng như các liên kết thông thường, Internet rất dễ sử dụng. Chúng tôi sẽ xem xét các tùy chọn đơn giản nhất để chèn siêu liên kết, điều này sẽ giúp bạn, với tư cách là những người mới lập trình, nắm vững bài học này.

Làm cách nào để tạo siêu liên kết trong html?

Mã này sẽ chỉ hoạt động trên trang web của bạn; nó sẽ không hoạt động đối với các liên kết bên ngoài.

< a href=" *** ">***** < /a>

Ví dụ:

< a href="https://сайт/">Tạp chí Cách làm mọi thứ< /a>

Trong trình duyệt nó sẽ trông như thế này:

< a href="https://сайт/prigotovlenie-edy/368-kak-sdelat-malosolnye-ogurcy.html">Cách làm dưa chuột muối nhẹ?< /a>

Trong trình duyệt, chúng ta sẽ có thể thấy như sau:

Làm cách nào để tạo siêu liên kết trong html tới một trang bên ngoài?

Đối với các liên kết bên ngoài, mã nên được sửa đổi một chút. Để liên kết đến một trang web khác, sử dụng mã:

< a href="*** ">***** < /a>

< a href="https://vk.com/kaksdelatvse">Chúng tôi đang liên hệ “Cách thực hiện mọi việc”< /a>

Trong bài học trước, chúng ta đã xem xét các thẻ đánh dấu logic: tiêu đề, đoạn văn và tìm hiểu về cách tạo danh sách cũng như cách định dạng chúng. Bây giờ chúng ta sẽ xem cách chèn hình ảnh vào một trang và đặt kiểu cho các thành phần bằng cách sử dụng các thuộc tính. Và quan trọng hơn, chúng ta sẽ học cách tạo một trang web - chúng ta sẽ liên kết các trang html giáo dục của mình với các liên kết.

Chúng ta đã có một trang rồi, hãy tạo một trang khác: chỉ mục.html- đây là tên tiêu chuẩn của trang chính của trang web. Nếu bạn nghiêm túc định tạo một trang web thì việc nhập mã theo cách thủ công sẽ rất hữu ích. Và đối với những người lười biếng và thực tế: hãy mở trang html đào tạo trước đó trong Notepad và đặt tên: index.html (File - Save As).

Đừng quên loại tệp và mã hóa - UTF-8 (xem bài học đầu tiên về tạo trang HTML trong Notepad). Sau đó mở file index.html trong Notepad và chỉnh sửa để nó trông như thế này:

Đối với người chưa biết tin học: nhấp đúp chuột trái vào file .html sẽ mở nó trong trình duyệt chính của bạn. Để mở nó trong một trình duyệt khác, bạn cần nhấp chuột phải vào nó, chọn “Mở bằng” từ menu và chọn tên của trình duyệt. Ở đó bạn có thể chọn Notepad hoặc trình soạn thảo khác để chỉnh sửa tệp.

Bây giờ hãy xem những gì chúng ta có trong trình duyệt. Màu nền xanh nhạt của toàn bộ trang được đặt bởi thuộc tính bgcolor của thẻ Body:

Giống như nhiều thẻ, Nội dung có một số thuộc tính chỉ định một kiểu phần tử cụ thể nằm trong thẻ này. Ví dụ: màu văn bản có thể được chỉ định bằng thuộc tính văn bản. Bởi vì Nội dung là toàn bộ phần hiển thị của trang, khi đó tham số sẽ áp dụng cho toàn bộ văn bản của trang.

Để đặt màu của các thành phần riêng lẻ, chẳng hạn như đoạn P hoặc tiêu đề, bạn có thể sử dụng thuộc tính kiểu phổ quát, ví dụ:

...

Cách chèn hình ảnh

Đặt bất kỳ hình ảnh nào vào cùng thư mục với hai trang html hướng dẫn. Bản thân thư mục này có thể được gọi là Site1. Thay đổi tên của tệp hình ảnh thành img1, img2, img3, như trong ảnh chụp màn hình. Hoặc thay đổi những tên này trong mã của chúng tôi thành tên hình ảnh của bạn và nếu cần, hãy thay đổi phần mở rộng (định dạng tệp). Tôi có những bức ảnh này về người 3D, ở định dạng .jpg:

Có thể bạn đã từng nghe đến cụm từ “Thư mục gốc của trang web” - đây là thư mục (thư mục) chứa tất cả các tệp của trang web. Nó có thể chứa các thư mục khác: với hình ảnh, với các tập tin script, với các phần riêng lẻ của trang web. Để sau này không bị nhầm lẫn giữa một loạt tệp có phần mở rộng khác nhau, chẳng hạn, bạn nên tạo một thư mục riêng cho hình ảnh. Và đối với các trang web lớn - một số thư mục hình ảnh cho các phần khác nhau của nó.

Nếu hình ảnh của bạn được đặt trong một thư mục riêng, chẳng hạn như có tên “papka”, thì đường dẫn đến nó (giá trị của thuộc tính scr bắt buộc) sẽ trông như thế này: . Nếu hình ảnh của bạn không được hiển thị trong trình duyệt thì chỉ có hai lý do: đường dẫn tệp sai hoặc lỗi đánh máy đã được chỉ định. Bạn đã nhận thấy rằng phần tử Img không có thẻ đóng. Hãy xem xét các thuộc tính được áp dụng khác của thẻ Img.

Trong hình ảnh thứ hai, thuộc tính img2.jpg: alt - giá trị là văn bản hiển thị nếu trình duyệt, vì lý do nào đó, không thể hiển thị hình ảnh. Nên sử dụng thuộc tính alt và bao gồm các từ khóa trong đó. Hình ảnh thứ ba được đặt trong thẻ P và vị trí của nó ở bên phải văn bản đoạn văn được xác định bởi giá trị “right” của thuộc tính căn chỉnh, dùng để căn chỉnh hình ảnh.

Điều đáng chú ý là ngoài định dạng jpg, định dạng gif và png cũng được sử dụng trong đồ họa web. Nên học cách tối ưu hóa hình ảnh cho web và sử dụng Photoshop. Hình ảnh được tối ưu hóa, có trọng lượng nhẹ hơn sẽ làm chậm quá trình tải trang trong trình duyệt ít hơn.

Nhân tiện, bạn sẽ thấy các vết lõm (số lượng khoảng trắng khác nhau) ở đầu mỗi dòng mã - chúng không cần thiết. Điều này được thực hiện để thuận tiện về mặt trực quan giúp quản trị viên web dễ dàng chỉnh sửa tài liệu hơn trong tương lai. Nhưng nếu bạn không bỏ sót nhiều và không để dòng trống thì trang html sẽ có kích thước nhỏ hơn.

Từ liên kết: cách liên kết các trang html vào một trang web

Liên kết (siêu liên kết) - thẻ A với thuộc tính href, giá trị của nó là đường dẫn đến tệp (URL), tôi đã đặt trong các thành phần của danh sách Li mà chúng ta thấy trong ảnh chụp màn hình (thứ 2) của trang từ browser. Có ba loại liên kết: liên kết đầu tiên tới trang web nơi bạn hiện đang ở. Nếu bạn nhấp vào nó nếu bạn có kết nối Internet, bạn sẽ được đưa đến trang chính của trang web của tôi. Nếu bạn thêm “/index.html” vào URL, kết quả sẽ giống nhau.

Ví dụ: liên kết thứ hai dẫn đến một trang spravochnik.html không tồn tại, nằm trong thư mục “papka” trên trang web của tôi. Hai liên kết này có đường dẫn đầy đủ đến tài liệu mà chúng liên kết tới. Siêu liên kết thứ ba có đường dẫn tương đối. Để nó hoạt động, bạn phải có trang index.html trong cùng thư mục với trang chứa liên kết này. Trong trường hợp này, nó liên kết đến cùng một trang (với chính nó).

Những thứ kia. Các liên kết dẫn đến các trang trên các trang web khác chỉ có thể bao gồm URL đầy đủ. Và các liên kết đến các trang nội bộ của cùng một trang có thể có cả địa chỉ đầy đủ và địa chỉ tương đối. Về thuộc tính: giá trị của thuộc tính tiêu đề (đừng nhầm với thẻ) là văn bản bật lên khi bạn di chuột qua một phần tử, xem ảnh chụp màn hình thứ 2. Tiêu đề là thuộc tính chung; nó có thể được sử dụng cho cùng một hình ảnh. Thuộc tính đích có giá trị “trống” sẽ mở trang trong tab trình duyệt mới.

Bây giờ hãy kết nối hai trang giáo dục của chúng ta vào một trang web duy nhất. Hãy thêm vào cả hai trang, ngay sau thẻ Body, hai dòng như vậy (ở đây là dòng thứ 8 và thứ 9) - hai siêu liên kết:

Liên kết đầu tiên dẫn đến trang chỉ mục ngày hôm nay, liên kết còn lại dẫn đến trang giáo dục thứ hai (đối với tôi đó là formatirovanie_teksta.html, bạn có thể có bất kỳ tên nào khác). Về cơ bản, chúng tôi đã tạo một trang web gồm hai trang và các liên kết này là menu trang web. Tôi đã thêm ba khoảng trắng không ngắt giữa các liên kết để tạo dấu thụt lề nhằm phân tách các liên kết. Nhấp vào liên kết trong trình duyệt của bạn.

Siêu liên kết có thể liên kết các trang trong một trang hoặc trỏ đến bất kỳ trang nào trên Internet. Khi xây dựng liên kết tới trang của người khác, bạn phải luôn sử dụng địa chỉ tuyệt đối của trang (http://www.site.com/page.html). Nếu bạn đang tạo liên kết đến một trang trong trang web, tốt nhất bạn nên sử dụng URL tương đối (page.html, catalog/page.html). Khi tạo siêu liên kết đồ họa, hãy nhớ rằng một số người dùng có thể không truy cập được đồ họa, vì vậy hãy đảm bảo bao gồm các thành phần văn bản thích hợp.

Ví dụ:

Siêu liên kết trong một trang html

Đôi khi cần phải tạo siêu liên kết trong một trang. Ví dụ: trên trang này có các siêu liên kết ở đầu bài, cho phép bạn đi đến xem một câu hỏi cụ thể và ở cuối trang, cho phép bạn đi lên đầu trang.

Ví dụ:

siêu liên kết bưu chính

Ví dụ:

Mở trang html trong cửa sổ mới

Sử dụng thuộc tính TARGET, bạn có thể tải trang trong cửa sổ trình duyệt mới. Thuộc tính này nhằm mục đích chỉ định tên của cửa sổ. Tên cửa sổ được sử dụng cho mục đích chính thức. Để mở một trang trong cửa sổ mới, bạn cần sử dụng hằng số _blank.

Ví dụ:

Màu văn bản siêu liên kết

Các thuộc tính LINK, ALINK, VLINK chỉ định màu chữ của siêu liên kết.

Thuộc tính LINK được sử dụng để đánh dấu các siêu liên kết mà người dùng chưa truy cập.

Thủ tục theo dõi các siêu liên kết

Cần phải nói rằng thuộc tính TABINDEX có thể được sử dụng để chọn các đối tượng khác, ví dụ như hình ảnh đồ họa.

Xin chào các du khách thân mến!

Trong bài viết này, tôi sẽ chỉ cho bạn cách thêm liên kết đến trang web dưới dạng siêu liên kết đơn giản, hình ảnh và cả nút mà bạn có thể thiết lập thiết kế của riêng mình bằng cách sử dụng các kiểu CSS. Cả 3 phương án này đều được sử dụng rất thường xuyên và có tác dụng khá tốt khi được khách truy cập sử dụng.

Hãy bắt đầu từ cái đơn giản nhất và đến cái phức tạp.

Liên kết thông thường và siêu liên kết

http://site/poleznoe/kak-sdelat-ssylku-na-sait.html

Tùy chọn này có vị trí của nó, nhưng có một nhược điểm đáng kể nếu chúng ta đang nói về tính hiệu quả của một liên kết như vậy. Nó không thể nhấp vào được, tức là bạn không thể truy cập nó chỉ bằng một cú nhấp chuột đơn giản. Tùy chọn này khá khó để du khách cảm nhận.

Một điều nữa là siêu liên kết, khi được nhấp vào sẽ chuyển hướng đến một tài liệu khác trên Internet, cả nội bộ (trong cùng một trang) và bên ngoài (một trang khác). Một ví dụ về một liên kết như vậy có thể được nhìn thấy dưới đây. Hãy thử nhấp vào liên kết.

Trang chính của tài nguyên của tôi sẽ mở trong một tab mới. Để triển khai tùy chọn này, bạn phải sử dụng các công cụ của công cụ của mình hoặc viết dòng sau vào mã HTML.

Bấm vào đây

Nếu bạn có một trang web đơn giản được tạo bằng HTML thì bạn nên viết chính xác mã này trong trình chỉnh sửa trang, thay đổi địa chỉ của tôi thành địa chỉ của bạn và chỉ định điểm neo của bạn. Nó sẽ trông giống thế này.

Điều này cũng rất quan trọng, không nên ném khách ra khỏi tài nguyên mà hãy rời xa anh ta. Sử dụng thuộc tính này, bạn sẽ đảm bảo rằng khách truy cập khi nhấp vào nhiều liên kết trên một trang sẽ không rời khỏi trang hiện tại mà đồng thời sẽ mở ra nhiều trang khác. Điều này rất quan trọng nếu bạn đang quảng bá một trang web.

Bạn có thể thêm thuộc tính tiêu đề vào liên kết, đây là thẻ tiêu đề và cho phép các công cụ tìm kiếm biết liên kết dẫn đến đâu. Ngoài ra, thẻ này được hiển thị (nếu đã đăng ký) khi chúng ta trỏ vào một liên kết dưới dạng chú giải công cụ.

Khi sử dụng một công cụ, chẳng hạn như WordPress, việc thêm liên kết đến một trang web rất đơn giản mà không cần bất kỳ chỉnh sửa nào ở chế độ html. Trình chỉnh sửa bài đăng có một biểu tượng đặc biệt với biểu tượng kết nối.

Trong hình ảnh tôi đã trình bày toàn bộ quá trình thêm kết nối giữa văn bản và một trang khác.

1. Đầu tiên, chọn cụm từ bạn muốn tạo liên kết;
2. Bấm vào biểu tượng thêm kết nối;
3. Chúng tôi đặt các tham số liên kết (địa chỉ của trang mà bạn muốn chuyển hướng người dùng, cũng như tiêu đề của liên kết, nghĩa là liên kết, nếu cần).

Bạn không cần phải nhập tiêu đề liên kết vì đó sẽ là văn bản đã được chọn ở giai đoạn đầu tiên. Trong hình ảnh tôi đã hiển thị việc thêm liên kết từ các trang hiện có của trang web. Bạn có thể làm điều này, sau đó khi bạn nhấp vào một trong các mục từ danh sách, URL và tiêu đề sẽ được nhập tự động.

URL cũng có thể được nhập vào một trang web bên ngoài. Nếu cần thiết, hãy nhập địa chỉ đầy đủ (tuyệt đối) của trang. Để mở một trang trong tab mới, không cần nhập thuộc tính theo cách thủ công. Công cụ cung cấp tùy chọn này bằng cách sử dụng một hộp kiểm (xem hình trên).

Cao hơn một chút tôi đã nói về địa chỉ tuyệt đối. Điều này có nghĩa là địa chỉ đầy đủ của trang mà bạn cần chuyển hướng đến được ghi bên trong liên kết, bất kể đó là tài nguyên của chúng tôi hay tài nguyên khác.

Ngoài ra còn có địa chỉ tương đối, khi không cần thiết phải nhập địa chỉ đầy đủ. Chỉ cần nhập đường dẫn đến một số thư mục hoặc trang của trang web mà không cần chỉ định tên miền. Các liên kết như vậy chỉ hoạt động đối với các trang trong một tài nguyên. Bạn không thể tham khảo một dự án bên ngoài như thế.

Nếu bạn muốn tìm hiểu sâu hơn về quá trình tạo địa chỉ tương đối, tôi thực sự khuyên bạn nên đọc bài viết này trên một tài nguyên khác. Mọi thứ đều được bố trí rất mát mẻ ở đó.

Liên kết hình ảnh

Các liên kết ở dạng hình ảnh cũng được sử dụng rộng rãi, mặc dù chúng chỉ nên được sử dụng cho mục đích đã định. Nếu chúng tôi chỉ là các liên kết đơn giản đến các trang khác trong trang web của mình, thì tốt hơn là không nên tạo chúng bằng hình ảnh, vì không phải lúc nào bạn cũng cần nhấp vào hình ảnh để đến một trang nào đó.

Bạn nên làm điều này khi bạn muốn quảng cáo cho ai đó, chẳng hạn như khóa học video của ai đó. Trong trường hợp này, bạn cung cấp một siêu liên kết thông thường, ngay sau đó là liên kết hình ảnh. Trong trường hợp này, sẽ rõ ràng hơn là hình ảnh dẫn đến trang web của khóa học nơi bạn có thể mua nó.

Nếu chúng ta lấy chế độ html thì nguyên tắc xây dựng cấu trúc liên kết hoàn toàn giống nhau, bao gồm tất cả các thuộc tính. Sự khác biệt duy nhất là liên kết neo, trông giống như mã cho hình ảnh. Trong trường hợp trước có văn bản đơn giản.

Trong thực tế nó sẽ trông như thế này.

Như bạn có thể thấy, bên trong thẻ liên kết mở và đóng có một mã hình ảnh, mã này cũng có những đặc điểm riêng. Bạn cần bao gồm cùng một thẻ tiêu đề trong đó, cho biết đường dẫn đến hình ảnh trên máy chủ lưu trữ hoặc trên tài nguyên khác. Cũng cần chỉ định kích thước của hình ảnh (chiều rộng - chiều rộng, chiều cao - chiều cao). Và bạn chắc chắn nên bao gồm thuộc tính alt, thuộc tính này đóng vai trò mô tả hình ảnh. Nếu bạn viết ra mọi thứ thì việc tối ưu hóa hình ảnh sẽ đạt mức tương đương.

Đây là giao diện của nó ở chế độ html. Mình chia code thành 3 phần để cấu trúc link dễ hiểu hơn (hình ảnh có thể click).

Khó khăn duy nhất ở đây là nhập chính xác mã của hình ảnh, mã này được sử dụng làm điểm neo.

Nút liên kết sử dụng kiểu CSS

Nếu bạn muốn làm điều gì đó khác biệt thì tùy chọn này cũng có chỗ đứng. Hơn nữa, nó cho phép bạn thay đổi kiểu để khi bạn di chuột qua một nút, cả nút đó và màu của dòng chữ bên trong nó sẽ thay đổi. Nếu bạn chụp ảnh thì không phải lúc nào cũng có thể nhận ra điều này. Với phong cách, mọi thứ đều có thể.

Một lợi thế rất tốt khác là chúng ta có thể đặt nút ở chính giữa và nó sẽ chỉ có thể nhấp được trong khu vực của nút. Nếu chúng ta chụp một bức ảnh thì khi đặt nó vào giữa, toàn bộ chiều rộng của vùng nội dung xung quanh bức ảnh sẽ có thể nhấp vào được. Đôi khi một khiếm khuyết như vậy dẫn đến việc vô tình nhấp chuột vào hình ảnh và nói thẳng ra là gây khó chịu.

Ví dụ: tôi đã tạo một nút đơn giản dẫn đến trang chính của trang web. Bạn có thể kiểm tra chức năng của nó.

Đây là cấu trúc nút.

Nguyên tắc rất rõ ràng nên tôi sẽ đưa ra các kiểu mà tôi đã thêm vào nút liên kết này.

/* kiểu nút ở chế độ bình thường */ #button ( display: block; chiều rộng: 550px; /* chiều rộng nút */ chiều cao: 60px; /* chiều cao */ màu nền: #ff4343; /* màu nền */ văn bản- bóng: 1px 1px #800909; /* bóng văn bản */ màu: #fff; /* màu văn bản */ kiểu đường viền: rắn; /* loại đường viền nút */ chiều rộng đường viền: 1px /* độ dày đường viền nút * / border-color: #db3a3a; /* màu đường viền của nút */ cỡ chữ: 18px; /* kích thước văn bản */ chiều cao dòng: 60px /* chiều cao văn bản tuyến tính * / font-weight: normal; */ font-family: arial; /* kiểu phông chữ */ text-align: center; /* text-trang trí: none; /* thụt lề nút từ các thành phần khác trên trang */ text-transform: chữ hoa; ; /* để tất cả các chữ cái đều ở dạng in hoa. Nếu không cần thiết, hãy xóa các kiểu nút dòng */ ) /* khi di chuột */ # Button:hover ( Background-color: #f23333; font-size: 19px; )