Tagi
Porozmawiajmy teraz o kilku ważnych znacznikach w HTML. Wcześniej krótko wprowadziłem pojęcie tagu div, a div to tylko część strony HTML. To taki pojemnik dla informacji strukturalnych.
<div>
<h1>Nagłówek</h1>
<p>Tekst akapitu</p>
</div>Oto kod na którym skończyliśmy.
<!DOCTYPE html>
<html>
<head>
<title>Nasza Pierwsza Strona</title>
</head>
<body>
<img src="obrazki/Logo.JPG">
<p>Lorem ipsum <em>dolor sit </em> amet consectetur adipisicing elit. Aut, quisquam? Dolor recusandae perspiciatis nobis quos molestias voluptatibus ullam inventore.
</p>
<p><strong>Lorem ipsum dolor </strong> sit amet, consectetur adipisicing elit. Harum at laudantium assumenda asperiores perferendis qui nihil! Facilis natus laboriosam blanditiis earum omnis quas eos.
</p>
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>
</body>
</html>Więc jeśli weźmiemy te pierwsze dwa elementy (znacznik img i p) i wstawimy je do div, to mówimy, że będą one trafiały gdzieś na naszą stronę i to później będzie stanowić nagłówek naszej strony i pojedynczy akapit.
<!DOCTYPE html>
<html>
<head>
<title>Nasza Pierwsza Strona</title>
</head>
<body>
<div>
<img src="obrazki/Logo.JPG">
<p>Lorem ipsum <em>dolor sit </em> amet consectetur adipisicing elit. Aut, quisquam? Dolor recusandae perspiciatis nobis quos molestias voluptatibus ullam inventore.
</p>
</div>
...Zróbmy to samo dla treści naszej strony
<!DOCTYPE html>
<html>
<head>
<title>Nasza Pierwsza Strona</title>
</head>
<body>
<div>
<img src="obrazki/Logo.JPG">
<p>Lorem ipsum <em>dolor sit </em> amet consectetur adipisicing elit. Aut, quisquam? Dolor recusandae perspiciatis nobis quos molestias voluptatibus ullam inventore.
</p>
</div>
<div>
<p><strong>Lorem ipsum dolor </strong> sit amet, consectetur adipisicing elit. Harum at laudantium assumenda asperiores perferendis qui nihil! Facilis natus laboriosam blanditiis earum omnis quas eos.
</p>
</div>
...I stwórzmy trzeci element div, który będzie reprezentował stopkę naszej strony.
<!DOCTYPE html>
<html>
<head>
<title>Nasza Pierwsza Strona</title>
</head>
<body>
<div>
<img src="obrazki/Logo.JPG">
<p>Lorem ipsum <em>dolor sit </em> amet consectetur adipisicing elit. Aut, quisquam? Dolor recusandae perspiciatis nobis quos molestias voluptatibus ullam inventore.
</p>
</div>
<div>
<p><strong>Lorem ipsum dolor </strong> sit amet, consectetur adipisicing elit. Harum at laudantium assumenda asperiores perferendis qui nihil! Facilis natus laboriosam blanditiis earum omnis quas eos.
</p>
</div>
<div>
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>
</div>
</body>
</html>Divy same w sobie nie mają żadnego interfejsu graficznego, chyba że powiemy im, aby pokolorowały się lub dodawały elementy, więc mimo że dodaliśmy elementy strukturalne, te 3 divy, nasza strona wygląda dokładnie tak samo. Mamy div, który otacza dwa elementy, następnie drugi, a następnie trzeci, którym jest stopka.
Zacznijmy więc dodawać zawartość do stopki. Mam zamiar przedstawić Ci sposób na znalezienie specjalnych znaków. HTML wspiera ideę uciekających znaków, a wszystkie zaczynają się od znaku ampresanda. W naszym przypadku użyjemy prostego znaku copy, a to będzie oznaczać symbol praw autorskich. © 2019 Mariusz
I dlatego, że byłoby to odpowiednie dla stopki umieścimy to w stopce i zamierzam pokazać tylko krótką informację o prawach autorskich.
<div>
© 2021 Mariusz
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>
</div>Są tez inne i jest ich sporo, nie będę ich oczywiście omawiał, jak na przykład gt na więcej niż i lt dla mniej niż.
> <
<div>
© 2021 Mariusz
>
<
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>
</div>A te są interesujące, ponieważ reprezentują one symbole większe lub mniejsze niż, które oczywiście nie byłyby możliwe do użycia, ponieważ potrzebujemy tych symboli większej i mniejszej niż reprezentacji ograniczników wokół każdego z elementów.
Możesz również reprezentować znaki Unicode, przedstawiając je jako liczbę. Te zaczynają się od znaku ampersand, ale zaraz potem następuje symbol funta, a następnie liczba.
Ω to byłaby reprezentacja dziesiętna lub po znaku liczby można użyć x,
Š aby wskazać, że zamierzasz podać wersję szesnastkową zawsze możemy skorzystać ze znaków Unicode.
<div>
© 2021 Mariusz
>
<
Ω
Š
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>
</div>Normalnie w HTML znacznik div reprezentuje prostokątną sekcję strony, dlatego,
gdy będziemy używać tych nagłówków, stopek i rodzaju treści naszej strony, div jest dobrym rozwiązaniem, ale czasami musimy umieć zdefiniować wbudowaną inline sekcję kodu i możemy to zrobić za pomocą czegoś zwanego Span.
Dodamy teraz znacznik span, który będzie reprezentował tylko wybrany fragment tekst, a to pozwoli nam później na stylizację lub zmianę wyglądu tylko tych znaków, które są wewnątrz tego spana.
<div>
<p><strong>Lorem ipsum dolor </strong> sit amet, consectetur adipisicing elit. Harum at laudantium assumenda asperiores perferendis
<span>qui nihil! Facilis natus laboriosam</span>
</p>
</div> Span reprezentuje kontener inline podobnie jak div reprezentuje prostokątny kontener. To są dwa podstawowe pojemniki, z których będziemy korzystać.
Ale nawet jeśli w wielu plikach HTML zobaczysz div używany do definiowania tych podziałów, to HTML5 wprowadza tak zwane tagi semantyczne. A to są tagi, które są lepiej nazwane, aby zdefiniować to, co faktycznie robią. Niektóre wyszukiwarki mogą rzeczywiście przeglądać te informacje, aby określić, jakie dane znajdują się w tych tagach.
Jeśli chodzi o formatowanie, niektóre znaczniki są sformatowane po prostu jako divy, i tak są obsługiwane, ponieważ te tagi mają znaczenie semantyczne. I użyjemy ich tutaj. Jednym z nich jest tag nagłówka <header> , który mówi o sekcji na naszej stronie, ale zamierzam ją zdefiniować, aby wszyscy wiedzieli, że jest to nagłówek strony header.
<!DOCTYPE html>
<html>
<head>
<title>Nasza Pierwsza Strona</title>
</head>
<body>
<header>
<img src="obrazki/Logo.JPG">
<p>Lorem ipsum <em>dolor sit </em> amet consectetur adipisicing elit. Aut, quisquam? Dolor recusandae perspiciatis nobis quos molestias voluptatibus ullam inventore.
</p>
</header>
...Możemy zrobić to samo tutaj na stopce <footer>.
Znowu definiujemy sekcję strony, ale nadajemy jej znaczenie semantyczne w znacznikach.
<!DOCTYPE html>
<html>
<head>
<title>Nasza Pierwsza Strona</title>
</head>
<body>
<header>
<img src="obrazki/Logo.JPG">
<p>Lorem ipsum <em>dolor sit </em> amet consectetur adipisicing elit. Aut, quisquam? Dolor recusandae perspiciatis nobis quos molestias voluptatibus ullam inventore.
</p>
</header>
<div>
<p><strong>Lorem ipsum dolor </strong> sit amet, consectetur adipisicing elit. Harum at laudantium assumenda asperiores perferendis qui nihil! Facilis natus laboriosam blanditiis earum omnis quas eos.
</p>
</div>
<footer>
© 2021 Mariusz
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>
</footer>
</body>
</html>To jest tak, że ludzie parsują go jak wyszukiwarki, urządzenia mobilne, przeglądarki mobilne i desktopowe, że mogą podejmować decyzje na ich temat, że nagłówek będzie wyglądał w określony sposób, stopka będzie wyglądać w określony sposób, lub div.
Ale możesz sobie wyobrazić wyszukiwarkę, gdzie informacje w nagłówku niekoniecznie będą opisowe, co ta witryna ma do zaoferowania, na pewno stopka może nie być, ale co jest w innej sekcji na stronie w rzeczywistości bardziej interesujące dla indeksowania pod kątem możliwości wyszukiwania.
Ostatni z tagów semantycznych, które ci pokażę, a jest ich kilka, nie będziemy ich wszystkich omawiać, jest <section>.
<!DOCTYPE html>
<html>
<head>
<title>Nasza Pierwsza Strona</title>
</head>
<body>
<header>
<img src="obrazki/Logo.JPG">
<p>Lorem ipsum <em>dolor sit </em> amet consectetur adipisicing elit. Aut, quisquam? Dolor recusandae perspiciatis nobis quos molestias voluptatibus ullam inventore.
</p>
</header>
<section>
<p><strong>Lorem ipsum dolor </strong> sit amet, consectetur adipisicing elit. Harum at laudantium assumenda asperiores perferendis qui nihil! Facilis natus laboriosam blanditiis earum omnis quas eos.
</p>
</section>
<footer>
© 2021 Mariusz
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>
</footer>
</body>
</html>A to ma na celu nadanie większego znaczenia strukturze strony. Gdyby to był silnik na blogu lub coś podobnego, możemy sobie wyobrazić, że może to być blog na blogu, to nagłówek bloga i stopka bloga są tutaj. Abyśmy wiedzieli, że będzie jakaś powtarzalność, to ponownie nadajemy semantykę lub rzeczywisty sens sekcjom na stronie.
Pokaże tobie więcej tagów, w tym inny znacznik semantyczny, który został dodany w HTML5, a jest to tag o nazwie <nav>
Jest to nowy znacznik, który reprezentuje nawigację strony internetowej, a więc niektóre osoby, które się na nią patrzą, mogą wiedzieć, że będzie to sekcja, która zapewni nawigację w witrynie.
Wewnątrz nawigacji możemy zdefiniować naprawdę w dowolnej strukturze listę linków do innych stron. W zasadzie zamierzamy zbudować tylko tę stronę indeksu, ale stwórzmy kilka linków, aby przejść do różnych stron, chociaż możemy nigdy nie zaimplementować ich w naszym prostym i małym przykładzie.
Tutaj możemy stworzyć link, która trafi na stronę główną i inne.
<nav>
<a href="/index.html">Glowna</a>
<a href="/Kontak.html">Kontakt</a>
<a href="/Onas.html">O nas</a>
</nav>Trzy bardzo standardowe strony.
Podobnie jak inne linki, które stworzyliśmy wcześniej w przeglądarce, Teraz mamy 3 nowe klikalne linki, oczywiście kontakt nie zabierze nas nigdzie, ponieważ te strony nie istnieją, ale Glowna nadal będzie nas zabierać z powrotem do tej oryginalnej strony HTML.
Teraz zamierzam wprowadzić nową koncepcję i to się nazywa lista. Istnieją dwa rodzaje list, które są dość powszechne w HTML, uporządkowana lista, która jest tak naprawdę listą numerowaną lub listą nieuporządkowaną, która jest zbiorem punktów.
Zacznijmy od uporządkowanej listy. Zaczyna się znacznikiem <ol> i kończy się tagiem </ol> i teraz dodamy pozycje do listy
<nav>
<ol>
<li><a href="/index.html">Glowna</a></li>
<li><a href="/Kontak.html">Kontakt</a></li>
<li><a href="/Onas.html">O nas</a></li>
</ol>
</nav>Ponieważ jest to uporządkowana lista, wie że każdy z elementów listy powinien być tutaj oznaczony znakiem liczbowym, przechodząc do przęglądarki można to sprawdzić, możemy zobaczyć, że jest to lista numerowana lub uporządkowana.
W naszym przypadku tak naprawdę nie chcemy uporządkowanej listy, chcemy nieuporządkowanej listy, <ul>.
<nav>
<ul>
<li><a href="/index.html">Glowna</a></li>
<li><a href="/Kontak.html">Kontakt</a></li>
<li><a href="/Onas.html">O nas</a></li>
</ul>
</nav>Ponieważ będzie to zbiór punktów, a później możemy zmienić styl w zależności od tego, jak chcemy, aby to było wyświetlane, ale użyjemy nieuporządkowanej listy, jest to dość powszechny przypadek dla wzorca nawigacyjnego.
Przejdzmy do przegladarki. I widzimy lista nie uporzadkowana domyślnie pokazuje punkty. W następnym rozdziale, gdy przejdziemy do CSSa, zobaczymy, jak to zmienić, aby wyglądało dokładnie tak, jak naprawdę tego chcemy.
Jedną rzeczą, którą należy zauważyć, jest to, że to logo tutaj, faktycznie mamy je wewnątrz znacznika img, a znacznik img zwykle ma pewne odstępy. To samo dotyczy tego znacznika akapitu, który mamy tutaj.
<header>
<img src="obrazki/Logo.JPG">
<p>Lorem ipsum <em>dolor sit </em> amet consectetur adipisicing elit. Aut, quisquam? Dolor recusandae perspiciatis nobis quos molestias voluptatibus ullam inventore.
</p>
</header>Później zamierzamy zaprojektować ładniej ten nagłówek, więc prawdopodobnie nie będzie użyteczne dołączanie znacznika img lub znacznika akapitu jako tagów,
które mają wbudowane niektóre formatowania, więc zamierzamy je przekonwertować oba do diva.
<header>
<div><img src="obrazki/Logo.JPG"></div>
<div>Lorem ipsum <em>dolor sit </em> amet consectetur adipisicing elit. Aut, quisquam? Dolor recusandae perspiciatis nobis quos molestias voluptatibus ullam inventore.
</div>
</header>Nie zmieni to znacząco ich wyglądu, ale pozwoli nam usunąć niektóre odstępy między nimi bez konieczności specjalnego formatowania później. Nie przejmuj się zbytnio tym, że jest to trochę proste i brzydkie. Zmienimy to, kiedy dojdziemy do drugiego rozdziału CSSa.
Cały kod strony.
<!DOCTYPE html>
<html>
<head>
<title>Nasza Pierwsza Strona</title>
</head>
<body>
<header>
<div><img src="obrazki/Logo.JPG"></div>
<div>Lorem ipsum <em>dolor sit </em> amet consectetur adipisicing elit. Aut, quisquam? Dolor recusandae perspiciatis nobis quos molestias voluptatibus ullam inventore.
</div>
<nav>
<ul>
<li><a href="/index.html">Glowna</a></li>
<li><a href="/Kontak.html">Kontakt</a></li>
<li><a href="/Onas.html">O nas</a></li>
</ul>
</nav>
</header>
<section>
<p><strong>Lorem ipsum dolor </strong> sit amet, consectetur adipisicing elit. Harum at laudantium assumenda asperiores perferendis qui nihil! Facilis natus laboriosam blanditiis earum omnis quas eos.
</p>
</section>
<footer>
© 2021 Mariusz
<a href="https://dev-hobby.pl">Dev-hobby.pl</a>
</footer>
</body>
</html>Jeśli coś jest nie zrozumiałe zapraszam do zobaczenia video!
Cała zawartość kursu wideo HTML5, CSS, JavaScript, jQuery