Znaczniki Html

Zacznijmy więc od zrozumienia prostoty znaczników.

Dla naszych przykładów używam edytora Visual Studio Code, aby pisać zwykłe stare pliki tekstowe. Mogę używać Notatnika, mogę używać Sublime lub Brackets lub Atom lub dowolnego edytora, w tym Visual Studio.

Robimy proste pliki, które możemy hostować jako małe witryny, nie ma znaczenia jakich narzędzi używamy. Ja lubię używać Visual Studio Code. A więc mamy otwarty edytor dodajmy nowy plik nazwimy go index.html. Kiedy mamy do czynienia ze znacznikami, tak naprawdę mówimy tylko o tworzeniu hierarchii elementów.
Stwórzmy w tym miejscu nie tylko HTML, tylko kilka znaczników.

<kot>Witaj</kot>

Więc niektóre z podstaw znaczników są takie, że możemy mieć element, a element jest nazwą obiektu i jest otoczony dwoma nawiasami kątowymi, i w tym przypadku stanowi to początek tej struktury. Aby zakończyć element, to samo jest otoczony dwoma nawiasami kątowymi, z tą samą nazwą, którą mamy tutaj, ale zaczniemy od ukośnika przed nim. Oznacza to, że jest to końcowa część tego, co nazywa się elementem, a potem wszystko w środku jest po prostu treścią tego elementu.

A ponadto możemy mieć to, co nazywane jest rodzeństwem i są to elementy, które są na tym samym poziomie, jak siostry lub bracia innych elementów. Zróbmy to.

<pies></pies>

Tak więc w przypadku elementu pies możemy nie mieć żadnej treści i chociaż jest całkowicie poprawne pozostawienie początkowej i końcowej części elementu tuż obok siebie, niektóre elementy obsługują tak zwane samo zamykające się znaczniki i to kończy element.

</pies>

Oznacza to, że jest to obiekt, ale jest to obiekt, który nie zawiera w sobie żadnej zawartości. To prosty, atomowy element. W większości przypadków zamiast mieć dowolną treść, znaczniki będą miały hierarchiczną relację lub rodzicielską relację podrzędną.

<kot>
   </pies>
</kot>

W tym przypadku kot jest elementem nadrzędnym elementu pies, a pies jest elementem potomnym elementu kot, a więc mamy prosty związek rodzicielski.
I tak można budować hierarchie, jeden rodzic ma dziecko, ma inne dziecko, ma kolejne dziecko i jest całkiem uzasadnione, aby napisać.

<kot>
   </pies>
   <kon>Witaj Świecie</kon> 
   …
</kot>

I tak w tym przypadku Kot jako rodzic ma wiele dzieci.

A to tylko niektóre z podstawowych cech samego znacznika, ale tak naprawdę mówimy o HTML jako języku znaczników, hipertekstowym języku znaczników.
Zamiast tych naszych elementów używajmy elementów, które są rzeczywistymi elementami znaczników HTML, więc zamierzam zmienić rodzica najwyższego poziomu na div. Element div to podstawowa jednostka w języku HTML, która mówi, że jest to część mojej strony internetowej.

Wewnątrz tego elementu div na stronie HTML może znajdować się tag obrazu <img>, a także tag akapitu. <p> P jest dla akapitu. Tak więc w HTML możemy mieć te elementy atomowe, a obraz jest zawsze atomowy, nigdy nie ma powiązanej z nim treści, a następnie znaczniki akapitu, które mogą mieć dowolną treść.

W tym przypadku mam kawałek tekstu, który zostanie pokazany w akapicie. A więc chodzi o najprostszy kawałek znaczników, jaki moglibyśmy mieć w HTML-u. Możemy mieć część tej zawartości tego akapitu zawiniętą w swój własny element.

Na przykład, możemy otoczyć świat tagiem b lub elementem b, jak to często jest znane, <b>Swiat</b> i to będzie wskazówką, jak chcemy sformatować świat i w tym przypadku to byłoby pogrubienie tego tekstu. Tak więc w przypadku treści z HTML używamy elementów do otaczania lub oznaczania różnych części znaczników, aby przeglądarka wiedziała, co z nimi zrobić.

Same elementy mogą również posiadać tzw. Atrybuty, które są zwykle fragmentami informacji, zwykle są to pary informacje typu nazwa wartość, które znajdują się wewnątrz samych znaczników elementów. Mogę więc zdefiniować, że ten element div ma id = „gora”, a następnie obraz może mieć atrybut zwany źródłem, który wskazuje na rzeczywistą lokalizację źródłową obrazu.

</img src=https://dev-hobby.pl/obrazki/logo.gif>
<img src="https://dev-hobby.pl/uploads/netCoreKurs-570x350.jpg"/>

Poszczególne elementy mogą mieć więcej niż jeden atrybut, jeśli to konieczne, i tak jak w przypadku tagów graficznych, możemy mieć drugi atrybut, który definiuje alternatywną reprezentację tego obrazu dla widzów, którzy mają wyłączone obrazy.

</img src=https://dev-hobby.pl/obrazki/logo.gif alt=”Logo Strony” />

Teraz, jeśli przyszedłeś tutaj z pewną wcześniejszą znajomością języków znaczników, takich jak XML, to chcesz zachować ostrożność przy zrozumieniu tego znacznika. Ponieważ w przypadku XML istnieją pewne reguły wokół XML. XML został opracowany po HTML i jest nieco bardziej uporządkowany niż HTML.

HTML ma pewne specyficzne cechy, które sprawiają, że jest nieco trudniejszy do przeanalizowania niż czysty XML, więc jeśli pochodzisz ze świata XML, musisz zdać sobie sprawę, że w przeciwieństwie do XML, znacznik tutaj w HTML nie rozróżnia wielkości liter, dlatego tworzenie tagu img dużymi literami dla tagu obrazu jest całkowicie poprawne. <IMG Większość ludzi używa małych liter, ale nie jest to wymagane.

Istnieje również pojęcie, że możemy mieć samozamykający się znacznik, taki jaki mamy w obrazie, ale nie wszystkie elementy go obsługują. Istnieją znaczniki takie jak skrypt i akapit oraz div, które muszą kończyć się pełnym elementem zamykającym.

I są pewne elementy, takie jak tag obrazu, który nie może mieć własnej zawartości.
Nigdy nie ma dzieci. W HTMLu będziesz musiał poznać te wyjątki i żyć z nimi. Żyjemy z nimi, nie możemy tego po prostu zmienić, ponieważ mamy przeglądarki, które istnieją już lata wstecz, które obsługują istniejące witryny internetowe, które opierają się na tych regułach. Jest to jedna z osobliwości rozwoju sieci, która może być trochę bolesna. Zacznijmy budować naszą pierwszą stronę HTML,
teraz, gdy przyjrzeliśmy się pewnym podstawom rzeczywistego znacznika.

<div id="gora">
   <img src="https://dev-hobby.pl/uploads/netCoreKurs-570x350.jpg" alt="Logo Strony" />
   <p>Witaj <b>Świecie</b></p>
</di>

Jeśli coś jest nie zrozumiałe zapraszam do zobaczenia video!

Cała zawartość kursu wideo HTML5, CSS, JavaScript, jQuery