Учене на HTML част 15: Урок Как да направите връзки в HTML
Със сигурност вече сте запознатитерминът "връзка", защото на различни уебсайтове можете да намерите връзки под формата на текст или изображения. Въпросът е как да създадете връзка в HTML документ? За да отговоря на този въпрос, в тази статия ще обясня как да вмъкна линк към HTML документ и други въпроси, свързани с връзката.
Връзката се използва като връзка между едностраница с друга страница. По-ясно е, че използването на връзки в HTML е за свързване на HTML документа към друга страница, която е адресът на местоназначението. Връзката е текст или изображение, свързано с определен адрес. За да разберете по-добре материала "Връзка", помислете за обяснението по-долу:
а. Използване на <a> тага
Използването на връзки в HTML документи се обозначава сизползването на елементи на котва, а именно сдвоени маркери <a> …… </a>. В браузърите връзките обикновено са маркирани със син текст, който има подчертано. Ако щракнете върху текст или изображение, което съдържа връзка, тогава пътят на връзката ще бъде отворен или в самия раздел, или в нов раздел. Атрибутите, съдържащи се в <a> тага, са както следва:
| атрибут | функция |
| HREF | Указва местоположението на документа за местоназначение |
| идентификатор | Линкове за стилове на връзки (CSS) или маркирайте местоположенията на страница |
| Hreflang | Показва използвания език |
| тип | Дайте бележки за вида на съдържанието на целевия документ |
| релса | Опишете връзката на текущия документ с документа на местоназначение |
| оборот | Опишете връзката между целевия документ и оригиналния документ |
| набор от знаци | Указва характера на кодирането на уеб документа |
| заглавие | Предоставя заглавието на връзка в подсказката |
Ето един прост пример за използване на връзки в HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<p>Anda sedang belajar HTML di blog <a href="https://www.nesabamedia.com">Nesaba Media</a></p>
</body>
</html>След като стартирате HTML кода по-горе в браузъра, той ще се появи, както е показано по-долу:
б. Id атрибут
Атрибутът href в тага <a> се използва задекларирайте направо файл. Пътят на HTML назначение в тага <a> може да бъде последван от атрибута id, който се използва за отвеждане на четеца до определена част от документа.
За да улесните разбирането, опитайте да напишете "#about" на атрибута href на връзката и напишете атрибута id = "about" на <p> тага. Примери за писане на код можете да видите по-долу:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<p>Klik <a href="#tentang">Tentang</a> untuk mengetahui informasi mengenai Nesaba Media</p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p id="tentang">Nesabamedia.com merupakan seputar tutorial komputer, internet dan jaringan komputer.</p>
</body>
</html>Резултатите в браузъра ще бъдат такива:
Умишлено използвах много тагове заулеснява разбирането на функцията на този атрибут. Когато щракнете върху връзката „Относно“, веднага ще бъдете насочени към тази част от изречението „Nesabamedia.com е за компютърни уроци .........“.
в. Атрибут на заглавието
След това, ако използвате атрибута заглавие,тогава съдържанието на заглавието ще се покаже като подсказка, която ще се появи, ако задържите курсора на мишката върху връзката. Ето пример за писане в HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Link Di HTML</title>
</head>
<body>
<a href="https://id.wikipedia.org/wiki/Soekarno">Biografi</a>
</body>
</html>След като стартирате горния код, ще видите екран като този по-долу, когато задържите курсора върху връзката Биография:
г. Разлики във външни и локални връзки
Външните връзки се използват за отваряне на уеб страниципребиваващи в друг уебсайт (различен домейн), обикновено последван от написване на пълния адрес на пътя към местоназначението с секцията „http: //“. Ето пример за писане и използване в HTML:
<!DOCTYPE html>
<html>
<head>
<title>External Link</title>
</head>
<body>
<p>Untuk mengetahui informasi lengkap mengenai Bill Gates, klik <a href="https://en.wikipedia.org/wiki/Bill_Gates">Biografi</a></p>
</body>
</html>След като HTML кодът се стартира в браузъра, той ще изглежда по-долу:
За разлика от локалната връзка, използвана за отваряне на уеб страница на същия уебсайт или корен на документ. Например адресът на вашия уебсайт www.nesabamedia.com и на уебсайта има страница с име belajarpiano.html, Ако искате да направите линк към тази страница, не е необходимо да пишете пълния URL адрес като www.nesabamedia.com/belajarpiano.html в атрибута href, просто напишете belajarpiano.html само. Примери за писане, както е посочено по-долу:
<!DOCTYPE html>
<html>
<head>
<title>Local Link</title>
</head>
<body>
<p>Klik <a href="belajarpiano.html">link ini</a> untuk membaca tutorial belajar piano yang benar</p>
</body>
</html>Друг пример като този, да предположим, че имаме папка, наречена Научете HTML, Вътре в папката има 2 html файла и 2 папки, всяка от които има 1 html файл. За да бъде ясно, структурата на папките изглежда така:
И така, ето, да кажем, че съм в моментаредактирайте файла, наречен webku.html и искам да направя връзка, която води към страницата на my story.html, така че просто трябва да напиша HTML кода така:
<a href="cinta/kisahku.html">Ако приемем, че все още редактирам файла ми web.html, но този път искам да създам връзка, която сочи към моята страница в кариерата, html, HTML кодът ще бъде такъв:
<a href="bisnis/karirku.html">Все още редактирам файла ми web.html. Ако искам да създам връзка, която сочи към страницата post.html, HTML кодът е такъв:
<a href="posting.html">Използвайки локални връзки, не е необходимо да пишете изцяло адреса на страницата, на която искате да отидете.
Правене на снимки като връзки
Има моменти, когато искаме да направим изображение катовръзки за специфични нужди, като например създаване на бутон, който води до друга страница, където бутонът е направен от изображения. Примери за HTML код можете да видите по-долу:
<!DOCTYPE html>
<html>
<head>
<title>Gambar sebagai Link</title>
</head>
<body>
<p>Klik tombol dibawah ini jika anda ingin membaca halaman posting.<br>
<a href="posting.html"><img src="/images/tombol.jpg" alt="halaman posting"></a>
</p>
</body>
</html>След като стартирате HTML кода по-горе в браузъра, след това изглежда по-долу:
Когато щракнете върху изображението на бутона, ще го направитепренасочени към страницата post.html. О, да, за писане <img scr = "адрес на снимката" ... уверете се, че е правилно, ако греши картината няма да се появи. В HTML кода по-горе, файл tombol.jpg Сложих го в една папка с html файла, така че току-що написах <img src = "button.jpg" ... няма нужда да пишете пълния адрес на файла с изображения. И за html файла го кръстих gambar.html докато изображението, което нарекох бутона.
Ако разбирате концепцията за локални връзки, за която говорих преди, няма да се объркате на тази стъпка.
г. Целеви атрибут на връзката
Целевият атрибут се използва за уточняване илиукажете как се показва път към местоназначението след щракване на връзката дали е отворен в текущия раздел / прозорец или в нов раздел / прозорец. Следните са стойностите в целевите атрибути, които можете да използвате:
| атрибут | функция |
| _ празно | Отворете уеб страницата на местоназначението в нов раздел или прозорец |
| _self | Отворете уеб страницата на местоназначението в текущия раздел или прозорец (по подразбиране) |
| _parent | Отворете уеб страницата на местоназначението в родителската рамка |
| _горен | Отваря целевата уеб страница в отворения раздел или прозорец, анулирайки всички кадри |
Имайте предвид, в HTML5, като използвате „_parent“и „_top“ е оттеглен, тъй като уебсайтът вече не се пише въз основа на рамки или набори от рамки. Освен тези два атрибута се използват рядко. Ако не посочите целеви атрибут в линка, по подразбиране целевата уеб страница ще се отвори в раздела или прозореца, който в момента е отворен ("_ себе си").
Следва пример за писане на код и използване на атрибута target = "_ blank" в HTML:
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Target _blank</title>
</head>
<body>
Baca selengkapnya mengenai tutorial HTML hanya di <a href="https://www.nesabamedia.com" target="_blank">Nesaba Media</a>
</body>
</html>След като стартирате горния код в браузъра, той ще се появи, както е показано по-долу:
Това е ръководството за това как да направите връзка в HTML заеднообяснение на таговете и атрибутите, свързани с връзки в HTML. Следващият материал, който трябва да научите, е как да добавяте изображения в HTML.
