Podstawowe Elementy HTML Kurs HTML5/CSS3 Cz.2

Podstawowe Elementy HTML Kurs HTML5/CSS3 Cz.2
obrazek kurs html5 css3 cz2

Witaj, to jest już kolejna lekcja poświęcona kursu nauki tworzenia stron WWW. Dzisiaj poznamy wiele przydatnych tagów m.in paragrafy tekstu, nagłówki, obrazki dodatkowo przedstawię przydatne praktyki podczas kodowania stron HTML5.

Nagłówek

Pierwszy element jaki poznamy, który umieszcza się na stronie WWW jest Element <h1> wraz z tagiem zamykającym <h1>. W HTML mamy 6 rodzajów nagłówków. Różnią się one tylko wielkością oraz odstępem. Definiujemy je literą h, cyfra oznacza wielkość nagłówka. Cyfra która stoi obok litery h to wielkość. Nagłówki numerujemy od 1 do 6. Nagłówek h1 to największy, nagłówek h6 jest najmniejszy.

<h1>Nagłówek 1</h1>
<h2>Nagłówek 2</h2>
<h3>Nagłówek 3</h3>
<h4>Nagłówek 4</h4>
<h5>Nagłówek 5</h5>
<h6>Nagłówek 6</h6>

W przeglądarce powinieneś ujrzeć taki widok:

Nagłówek 1

Nagłówek 2

Nagłówek 3

Nagłówek 4

Nagłówek 5
Nagłówek 6

Element <p> (paragraf)

Element <p> jest określany jako paragraf tekst. Jeżeli na stronie chcemy umieścić jakiś tekst, najczęściej umieszczamy go w elemencie <p>.

<p>To jest pragraf tekstu</p>

To jest paragraf tekstu

Element <a> link

Element <a> służy do przekierowań pomiędzy stronami lub podstronami, nawet do poszczególnych sekcjach na stronie. Element <a> posiada atrybut href=”” Czyli gdzie ma się udać przeglądarka gdy ktoś kliknie link. Ten temat rozszerzymy wkrótce.

<a href="https://google.com" target="_blank">Google</a>

Google

Element <img> Zdjęcie

Tag <img> definiuje zdjęcie. Czyli jaki obrazek ma zostać wyświetlony. Nie ma on tagu zamykającego <img>. Może on przyjmować różne atrybuty np. src=””. Który określa ścieżkę do obrazka. Może to być także link. alt=”” Czyli jaki tekst ma zostać wyświetlony gdy obrazek nie może zostać wyświetlony. Formaty obrazka który może być wyświetlany: jpg, jpeg, png, gif.

<img src="google.png" alt="google">

Google

Tak będzie wyglądał tag gdy nie zostanie załadowany obrazek. Warto umieszczać atrybut alt bo to jest przydatne dla czytników ekranu oraz dla pozycji twojej strony w przeglądarce. Możesz podać link bezpośrednio do obrazka bezpośrednio z przeglądarki. W moim przypadku trzeba pamiętaj aby plik strony i plik obrazka znajdował się w tym samym folderze.

Tag <br>

Tag ten służy do łamania linii. Nie warto przesadzać z nim i nie stosować tam gdzie popadnie i jest taka potrzeba. Do tego mogą służyć inne znaczniki HTML. Gdy użyjemy tagu <br> będzie to wyglądać tak jak w przykładzie niżej.

<p>To <br> jest <br> tekst </p>

To
jest
tekst

Mała praktyka w kodowaniu

Do zapisywaniu tagów używaj małych liter.
<p> prawidłowo
<P> nieprawidłowo
Pamiętaj zawsze o zamykaniu tagów. Bo jeżeli popełnisz ten błąd możesz się trochę zdziwić rezultatem w przeglądarce.

Pamiętaj także o zamykaniu cudzysłowach tekstu np. gdy definiujesz ścieżkę obrazka lub linku.

Atrybuty HTML

Znaczniki w HTML mogą również posiadać atrybuty. Które służą do nadania im dodatkowych informacji np. źródło.
Atrybuty HTML posiadają również wartości np. <img src=”google.png”>
Google.png jest wartością atrybutu src znacznika img

Atrybut Lang

Tag HTML ma również wartości np. jedną z nich jest lang. Gdzie wpisujemy język w jakim piszemy zawartość strony. Gdy piszemy stronę po polsku wartość atrybutu lang jest równy pl. Dla strony pisanej po angielsku(Amerykańskim) jest równy en-US.

atrybut lang w tagu html

To wszystko co przygotowałem na dziś, mam nadzieję że coś się nauczyłeś i umiesz zrobić linki do stron, wstawić obrazek, czy umieścić paragraf tekstu na stronie. Czekaj na kolejne moje materiały. Zapisz się na newsletter i zobacz to czego nie zobaczysz na blogu.

Dodaj komentarz