Struktura strony HTML 5
Stwórzmy teraz stronę HTML od podstaw, abyśmy mogli zobaczyć prawdziwą strukturę strony HTML. Strony HTML zaczynają się od tagu o nazwie HTML
<html></html>który jest nadrzędny dla całego dokumentu HTML. Wewnątrz dokumentu HTML znajduje się sekcja Head
<html>
<head></head>
</html>która będzie zawierać elementy używane do interakcji z przeglądarką, ustawiania tytułu, wprowadzania arkuszy CSS, ustawiania metatagów, rzeczy które tak naprawdę nie są związane z wyglądem i stylem pojedynczej strony. Dla rzeczywistej treści dokumentu będziemy mieć kolejną sekcję Body
<html>
<head></head>
<body></body>
</html>Ta struktura jest szkieletem pojedynczej strony HTML.
Rodzic o nazwie Html, który zawiera dwa elementy, Head i Body.
Przed tagiem HTML uruchamiamy dokument z czymś, co nazywa się typem dokumentu doctype. Jest to nawias, wykrzyknik, a następnie słowo doctype wskazujące, jaki jest rzeczywisty typ tego dokumentu.
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>Tak więc ten typ dokumentu będzie wskazywał jakie elementy przeglądarka ma oczekiwać w twoim dokumencie. Jeśli uwzględnisz na stronie typy elementów, które nie są znane, to większość przeglądarek zinterpretuje je przynajmniej jako elementy div, więc jeśli chcesz mieć własne nazwane elementy, będą one interpretowane w większości przypadków w nowoczesnych przeglądarkach jako element div.
Przygotujmy więc teraz działającą stronę HTML. W tej chwili mamy poprawną stronę HTML, ale nic nie jest wyświetlane w przeglądarce. Pierwszą rzeczą, którą możemy zrobić, to zacząć od sekcji Head i nadać naszemu dokumentowi tytuł – title
<!DOCTYPE html>
<html>
<head>
<title>Nasza Pierwsza Strona</title>
</head>
<body>
</body>
</html>Nie jest to bardzo przydatna strona internetowa, ale dla nas wprowadzi wiele z koncepcji. W samym ciele zacznijmy od tak zwanego znacznika h1.
H1 to nagłówek. W rzeczywistości jest ich sześć, które są zdefiniowane za pomocą HTML. H1, 2, 3, 4, 5 i 6, dla różnych poziomów. H1 jest zwykle największym z nich i jest używany do dużych elementów wizualnych na stronie, więc napiszmy go teraz
<!DOCTYPE html>
<html>
<head>
<title>Nasza Pierwsza Strona</title>
</head>
<body>
<h1>Nasza Pierwsza Strona</h1>
</body>
</html>i zobaczmy naszą stronę HTML w przeglądarce !
Kiedy wchodzimy na naszą stronę index.html, zobaczymy tutaj kilka rzeczy.
Pierwsze jest to, że określiliśmy naglówek H1, że jest częścią Body. Czyli jest na naszej stronie ale jedną z innych rzeczy, które powinieneś zauważyć, jest to, że tytuł strony jest wyświetlany na karcie. Tytuł jest ważny, to nie jest tylko zapisywanie danych, to jest coś, co jest wyświetlane użytkownikowi. Jeśli pójdziemy dalej i dodamy zakładkę do naszej strony, ta zakładka będzie mieć nazwę, która była w tytule.
A teraz, wróćmy i dodajmy znacznik akapitu tylko po to, by wyświetlić pewne informacje.
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, quisquam? Dolor recusandae perspiciatis nobis quos molestias voluptatibus ullam inventore.
</p>Dodajmy drugi akapit
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum at laudantium assumenda asperiores perferendis qui nihil! Facilis natus laboriosam blanditiis earum omnis quas eos.
</p>Teraz mamy tylko informacje strukturalne. Mamy nagłówek, a następnie kilka akapitów.
<!DOCTYPE html>
<html>
<head>
<title>Nasza Pierwsza Strona</title>
</head>
<body>
<h1>Nasza Pierwsza Strona</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut, quisquam? Dolor recusandae perspiciatis nobis quos molestias voluptatibus ullam inventore.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum at laudantium assumenda asperiores perferendis qui nihil! Facilis natus laboriosam blanditiis earum omnis quas eos.
</p>
</body>
</html>Jeśli wrócimy do przeglądarki, zobaczymy, że dzieli je na coś, co wygląda jak akapity.
Jeśli pomniejszymy to, zobaczymy, że akapity będą faktycznie zawijać tekst tak, jak można by się spodziewać po akapitach w dowolnej reprezentacji tekstowej.
Ale chcielibyśmy mieć tu więcej informacji, które mogą być interesujące. I chodźmy dalej i użyjmy innego tagu na naszej przykładowej stronie, i użyjmy tagu <i>
<p>Lorem ipsum <i>dolor sit</i> amet consectetur adipisicing elit. Aut, quisquam? Dolor recusandae perspiciatis nobis quos molestias voluptatibus ullam inventore.
</p>A następnie przejdźmy dalej i użyjmy tagu <b>
<p><b>Lorem ipsum dolor </b> sit amet, consectetur adipisicing elit. Harum at laudantium assumenda asperiores perferendis qui nihil! Facilis natus laboriosam blanditiis earum omnis quas eos.
</p> Są to więc elementy same w sobie, ale są to również informacje dla przeglądarki, które wskazują, jak sformatować tekst, w tym przypadku użyj kursywy i w tym przypadku pogrubienie tych elementów.
Przejdzmy do przegladarki i zobaczymy że używamy kursywy i pogróbienia !
W HTML5 odchodzimy od używania tagów <i> i <b>, a zamiast tego chcemy używać tych, które są bardziej wskazujące na to, co faktycznie robią, więc zamiast tagu i używam em , a zamiast b – pogrubienie, używamy strong.
<!DOCTYPE html>
<html>
<head>
<title>Nasza Pierwsza Strona</title>
</head>
<body>
<h1>Nasza Pierwsza Strona</h1>
<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>
</body>
</html>Jeśli wrócimy do witryny i odświeżymy, otrzymamy to samo formatowanie. Zatem znacznik i, jak również znacznik em, są tymi samymi instrukcjami dla przeglądarki i to jest użycie kursywy dla czcionki, a b i strong są również tymi samymi rzeczami.
Oczywiście HTML5 to język znaczników hipertekstowych.
Co mamy na myśli przez hipertekst?
Jednym z podstawowych sposobów działania sieci jest to, że witryny mogą zawierać linki do innych witryn, dzięki czemu możesz śledzić ten łańcuch informacji od witryny do witryny. To sposób, w jaki internet działa dzisiaj, a to za pomocą tagu zwanego anchor tag lub tag a dodajmy teraz ten tag i to będzie lącze do mojej strony dev-hobby.pl
<a href="https://dev-hobby.pl">Dev-hobby.pl</a><!DOCTYPE html>
<html>
<head>
<title>Nasza Pierwsza Strona</title>
</head>
<body>
<h1>Nasza Pierwsza Strona</h1>
<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>Wewnątrz tego tagu , kotwicy w właściwość o nazwie href która mówi, gdzie powinien kierować ten link, w tym przypadku po prostu do „https://dev-hobby.pl”
Przejdzmy teraz do przegladarki, Dev-hobby.pl jest teraz aktywnym linkiem. Po najechaniu myszą widzimy, że idzie do dev-hobby.pl i wyświetla się inaczej w przeglądarce, więc kiedy klikniemy na niego, przejdziemy dalej i doprowadzi nas do strony internetowej, niezależnie od tego, czy jest to strona wewnętrzna naszego projektu, czy strona zewnętrzna, tak jak zrobiliśmy to tutaj z dev-hobby.pl.
Ostatnią rzeczą, jaką zrobimy, jest zastąpienie treści nazwy naszej witryny w h1 tutaj rzeczywistym obrazem. Zamierzam to zastąpić i po prostu utworzyć tutaj obraz.
A tag obrazu będzie chciał źródło dla jakiegoś obrazu do wyświetlenia i w tym przypadku zamierzam użyć struktury folderów wewnątrz mojego projektu.
<img src="obrazki/Logo.JPG"><!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>To, co jest interesujące w tym źródle, zależy od tego, gdzie jest ten plik. Mówiąc “obrazki/Logo.JPG”, powiemy: że w naszej strukturze folderów idz do katalogu obrazki, a następnie znajdź w nim logo. Z pewnością moglibyśmy również podać pełną absolutną ścieżkę do zasobu, ale zazwyczaj jeśli korzystasz z własnych zasobów na własnej stronie internetowej, będziesz chciał, aby były to ścieżki względne w stosunku do lokalizacji, z którą masz do czynienia.
Jeśli przejdziemy teraz do przeglądarki i odświeżymy, możemy zobaczyć, że mamy obraz, który reprezentuje główną część naszej witryny, dwa akapity tekstowe, link.
Tak więc widzimy z bardzo prostym zbiorem elementów HTML, że możemy wyświetlać obrazy, formatować tekst, ustawić tytuł.
Zaczynamy więc dostrzegać, że ta struktura, ten dokument, który tworzymy, jest dokumentem, który przeglądarka zrobi dla nas na podstawie instrukcji zawartych w pliku HTML.
Jeśli coś jest nie zrozumiałe zapraszam do zobaczenia video!
Dodatek emmet
Cała zawartość kursu wideo HTML5, CSS, JavaScript, jQuery
1 comment