Na poprzedniej lekcji zapoznaliśmy się bliżej z elementami HTML. W tym artykule dodamy do naszego elementu atrybutu. Na początek odpowiedzmy sobie na podstawowe pytania:  Czym są ? Jak z nich korzystać ?

Czym są atrybuty elementu HTML ?

Dzięki atrybutom możemy dostarczy naszej przeglądarce dodatkowych informacji na temat naszego elementu HTML, składają się z nazwy oraz wartości: nazwa_atrybutu=”wartość_atrybutu”

Jak z nich korzystać ?

Atrybuty dodajemy tylko do znacznika otwierającego, możemy umieścić w nim więcej niż jeden atrybut, trzeba jedynie oddzielić je spacjami. Kolejność atrybutów nie ma znaczenia.

Poznamy nowy element HTML, hiperłącza czyli link:
<a>Link</a> – nasz element składa się z znacznika otwierającego i zamykającego oraz zawartości wyróżnionej pomarańczowym kolorem, ale nadal nie wiemy gdzie nasz link ma przekierowywać. Aby dodać tę informację musimy wykorzystać atrybut o nazwie href oraz dodać jego wartość czyli nasz link do strony. Wspomnę tylko, że nazwy znaczników powinny być pisane małymi literami.
Dodajmy nasz pierwszy link do głównej strony bloga webprogramming.pl. Oto jak powinie wyglądać nasz kod:

<a href="http://webprogramming.pl">Link</a>

Oczywiście nasz element dodajemy do body:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <a href="http://programistawkwadrans.pl">Link</a>
  </body>
</html>

Przykład naszego linku: Link

Aktualnie nasz link będzie otwierany w naszej aktualnej karcie. Jeśli chcemy aby otwierał się w nowej karcie musimy dodać kolejny atrybut do naszego elementu o nazwie target oraz wartości _blank całość prezentuje się następująco:

<a href="http://programistawkwadrans.pl" target="_blank">Link do strony programistawkwadrans.pl</a>

Przykład naszego linku: Link do strony programistawkwadrans.pl

Dodajemy obrazek do naszej strony

Element dzięki któremu możemy dodać obrazek ma nazwę <img>, jest to znacznik „pusty” ponieważ posiada tylko znacznik otwierający. Aby dodać do naszej strony obrazek będziemy potrzebowali rozszerzyć nasz element o atrybut o nazwie src którego wartością będzie adres naszego obrazka.

<img src="http://programistawkwadrans.pl/wp-content/uploads/2019/03/demo.jpg?x13741">

Element dodajemy do naszej sekcji body:

<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <img src="http://programistawkwadrans.pl/wp-content/uploads/2019/03/demo.jpg?x13741">
  </body>
</html>

Zobaczmy jak wygląda nasz kod w przeglądarce:

 

Jak widzimy nasze zdjęcie zostało wyświetlone 🙂

Dodajmy drugi atrybut do naszego elementu a mianowicie „alt„. Definiuje tekst alternatywny gdy element nie może być wyświetlony(obrazek został usunięty, link nie jest poprawny).
Tekst alternatywny jest czytany przez specjalne programy dla osób z problemami wzroku, jako normalny tekst na stronie. Dlatego, ważne jest odpowiednie formułowanie zawartości atrybutu ALT.

<img src="http://programistawkwadrans.pl/wp-content/uploads/2019/03/nieistniejacy obrazek.jpg?x13741" alt="Aletrnetywny tesks :)">

Jak widzimy nasz teks jest wyświetlany koło nieistniejącego obrazka. Wyświetlana grafika dodawana jest automatycznie przez przeglądarkę internetową w tym wypadku „Chrome”. Informuje nas, że w tym miejscu powinien być wyświetlony jakiś obrazek ale niestety nie został on znaleziony.

Zadanie

Stwórz stronę na której będzie zamieszczony obrazek będący jednocześnie linkiem do strony: http://programistawkwadrans.pl. Dokładniej mówiąc po kliknięciu w obrazek ma otworzyć nam nową kartę z naszą główną stroną http://programistawkwadrans.pl