Урок 9. Add Images to Your Website връзка>>
Можете да добавяте изображения към уебсайта си, като използвате елемента img, и да посочите URL адреса на конкретно изображение с помощта на атрибута src. Пример за това:
<img src="https://www.freecatphotoapp.com/your-image.jpg">
Имайте предвид, че img елементите са самозатварящи се. Всички img елементи трябва да имат alt атрибут. Текстът в атрибут alt се използва за екранни четци за подобряване на достъпността и се показва, ако изображението не успее да се зареди.
Забележка: Ако изображението е чисто декоративно, използването на празен атрибут alt е най-добрата практика.
В идеалния случай атрибутът alt не трябва да съдържа специални знаци, освен ако не е необходимо.
Нека добавим атрибут alt към нашия img елемент:
<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="A business cat wearing a necktie.">
Това води до появата на изображението:
Задачата ви: Нека се опитаме да добавим изображение към нашия уебсайт:
В рамките на съществуващия основен елемент поставете елемент img преди съществуващите p елементи. Задайте атрибута src, така че да сочи към URL адреса https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg
И накрая, не забравяйте да дадете на вашия img елемент alt атрибут с приложим текст.
Урок 10. Link to External Pages with Anchor Elements
Можете да използвате a (anchor) елементи за връзка към съдържание извън вашата уеб страница. a елементите се нуждаят от уеб адрес на местоназначение, наречен href атрибут. Те също се нуждаят от текст на котва. Ето един пример:
<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
След това вашият браузър ще покаже текста, this links to freecodecamp.org като връзка, която можете да щракнете. И тази връзка ще ви отведе на уеб адреса https://www.freecodecamp.org.
Задачата ви: Създайте а елемент, който се свързва към https://www.freecatphotoapp.com и има "котешки снимки" като anchor текст.
Урок 11. Link to Internal Sections of a Page with Anchor Elements
a (anchor) елементите могат също да се използват за създаване на вътрешни връзки за прескачане към различни секции в рамките на една уеб страница.
За да създадете вътрешна връзка, присвоявате на href атрибута връзката към символ # плюс стойността на атрибута id за елемента, към който искате да свържете вътрешно, обикновено по-надолу по страницата. След това трябва да добавите същия атрибут id към елемента, към който се свързвате. Идентификаторът id е атрибут, който уникално описва даден елемент.
Пример за вътрешна anchor връзка и нейния целеви (target) елемент:
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
Когато потребителите щракнат върху връзката Contacts, те ще бъдат отведени в секцията на уеб страницата със заглавния елемент Contacts.
Задачата ви: Променете външната си връзка към вътрешна, като промените атрибута href на #footer и текста от cat photos на Jump to Bottom.
Премахнете атрибута target="_blank" от anchor tag, тъй като това кара свързаният документ да се отвори в нов раздел на прозореца.
След това добавете атрибут id със стойност на долен колонтитул към елемента <footer> в долната част на страницата.
Урок 12. Nest an Anchor Element within a Paragraph връзка>>
Можете да вмъквате връзки в други текстови елементи.
<p> Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow. </p>
Нека да опишем примера. Нормалният текст е обвит в елемента p: <p> Here's a ... for you to follow. </p>
Следва anchor element <a> (който изисква и затварящ таг </a>): <a> ... </a>
target е anchor tag атрибут, който указва къде да се отвори връзката. Стойността _blank указва за отваряне на връзката в нов раздел. href е anchor атрибут, който съдържа URL адреса на връзката: <a href="https://www.freecodecamp.org" target="_blank"> ... </a>
Текста link to www.freecodecamp.org, вътре в a елемента се нарича anchor text, и показва връзката, която трябва да се избере: <a href=" ... " target="...">link to freecodecamp.org</a>
Задачата ви: Вложете съществуващия елемент a в нов елемент p. Не създавайте нов anchor tag. Новият параграф трябва да има текст, който гласи View more cat photos, където cat photos e връзка, а останалото е обикновен текст.
Урок 13. Make Dead Links Using the Hash Symbol
Понякога искате да добавите елементи към вашия уебсайт, преди да знаете къде ще се свързват. Това също е удобно, когато променяте поведението на връзка с помощта на JavaScript, за което ще учите по-късно.
Урок 14. Turn an Image into a Link
