Z pewnością czasami zadajesz sobie pytanie, jak skonstruowana jest strona internetowa, którą obecnie przeglądasz. Co nadaje kolor, jak ustalane są rozmiary poszczególnych elementów? Jak tworzy się nagłówki, akapity i inne składniki? Postaram się wyjaśnić Ci, jak kształtować strony internetowe, jak budować ich podstawowy szkielet, który można w dalszym czasie rozbudować.
Zacznijmy od podstaw HTML. Co to właściwie jest?
Po to, żeby strona internetowa została stworzona używany jest standardowy język znaczników, który nosi nazwę HTML (HyperText Markup Language). Jego głównym cel opisuje strukturę oraz zawartości witryny internetowej poprzez zdefiniowanie różnorodnych elementów, takich jak nagłówki, akapity, obrazy, formularze, tabele i wiele innych.
HTML bazuje na tagach, które są umieszczane w kodzie źródłowym strony internetowej. Każdy tag HTML reprezentuje inny element strony i zawiera atrybuty, które określają charakterystyki danego elementu, takie jak wielkość czcionki, kolor tekstu, adres URL obrazu itp.
W połączeniu z innymi językami, takimi jak CSS (Cascading Style Sheets) oraz JavaScript, HTML powoduje, że utworzona strona internetowa jest dynamiczna i interaktywna.
Strona internetowa HTML – schemat
Stronę internetową porównywana jest do człowieka. Kręgosłup i głowa to są główne części. Kręgosłup pełni rolę łącznika a głowa to główne centrum, w którym dowodzi się. Strona internetowa HTML składa się również z dwóch części. Nadają one konstrukcję naszej stronie www. Są to head – głowa i body – ciało.
Plik „head” na stronie internetowej to sekcja kodu HTML znajdująca się w sekcji <head> </head> wewnątrz kodu strony internetowej. Ten plik zawiera informacje o stronie, takie jak:
- tytuł strony (który pojawia się na pasku tytułu przeglądarki)
- metadane dotyczące strony, takie jak opis, słowa kluczowe, autor, język, kodowanie znaków, itp.
- linki do arkuszy stylów CSS, które określają wygląd strony
- linki do skryptów JavaScript, które zapewniają interaktywność i funkcjonalność na stronie.
Plik „head” jest bardzo ważnym elementem każdej strony internetowej. Dostarcza on podstawowych informacji o stronie, które są używane przez przeglądarki internetowe, wyszukiwarki i inne narzędzia do indeksowania stron.
Plik „body” jest jedną z sekcji kodu źródłowego strony internetowej. Zawiera on treść wyświetlaną na stronie. W HTML, plik „body” to kontener, który zawiera całą zawartość widoczną na stronie internetowej, taką jak tekst, obrazy, multimedia i inne elementy.
W praktyce, plik „body” definiuje obszar strony internetowej, w którym pojawiają się wszystkie widoczne elementy dla użytkownika. Ten plik umieść w dokumencie HTML między znacznikami <body> a </body>.
Przykładowo, jeśli chcesz dodać tekst do strony internetowej, umieść ten tekst między znacznikami <body> a </body>. Oto przykład:
W tym przykładzie, tekst „Witaj na mojej stronie internetowej!” i „Tutaj znajdziesz wiele interesujących informacji.” jest umieszczony w pliku „body” między znacznikami <body> a </body>.
W naszym przykładzie pojawił się znacznik <!DOCTYPE html>. Co to jest?
<!DOCTYPE html>” to instrukcja definiująca typ dokumentu HTML. Umieszcza się ją w jednej z pierwszych linii kodu w dokumentach HTML, aby poinformować przeglądarkę internetową o rodzaju dokumentu HTML, z którym ma do czynienia.
Dokumenty HTML mogą przyjmować różne typy, takie jak HTML 4.01, XHTML 1.0, HTML5 itp. Wpisanie <!DOCTYPE html> oznacza, że dokument jest w formacie HTML5.
Dodanie tej linii kodu do dokumentu HTML jest kluczowe, ponieważ zapewnia poprawną interpretację dokumentu przez przeglądarki internetowe i jego wyświetlanie zgodnie z oczekiwaniami. Brak deklaracji typu dokumentu może skutkować nieprawidłową interpretacją dokumentu przez przeglądarkę, co może prowadzić do problemów z wyświetlaniem strony.
Po kolejnym znaczniku jakim jest head, należy koniecznie użyc: meta charset=”utf-8″ i title.
meta charset=”utf-8″ to deklaracja kodowania znaków używanego w dokumencie HTML. Oznacza to, że znaki w dokumencie będą kodowane w standardzie Unicode, który obejmuje większość znaków używanych w różnych językach, w tym polskim, angielskim, chińskim itp.
Jeżeli w dokumencie HTML nie zostanie określona deklaracja kodowania, przeglądarka internetowa może niepoprawnie wyświetlać pewne znaki, zwłaszcza te, które nie należą do standardowego zestawu znaków ASCII. Dlatego istotne jest, aby deklaracja kodowania znaków była zawsze uwzględniona w kodzie HTML.
Element „title” na stronie internetowej stanowi jedną z meta informacji, zawierającą zwięzły opis strony, który pojawia się na pasku tytułowym przeglądarki. To kluczowy element z perspektywy SEO, pomagając użytkownikom zrozumieć, czego mogą się spodziewać po otwarciu strony.
Co więcej, element „title” jest także wykorzystywany przez wyszukiwarki internetowe do indeksowania strony oraz określania jej zawartości. Dlatego tak ważne jest, aby zawierał kluczowe słowa opisujące treść strony.
Przykładowe użycie elementu „title” na stronie internetowej może prezentować się następująco:”
W tym przykładzie, „Przykładowa strona internetowa” to nazwa strony, a „Witaj na naszej stronie” to krótki opis strony, który pojawi się na pasku tytułowym przeglądarki.
Następnie, w naszym przykładzie, pojawia się znacznik <body>. Element 'body’ to jedna z kluczowych części strony internetowej, która zawiera treść widoczną dla użytkownika. Konkretnie, element 'body’ definiuje obszar, w którym znajduje się zawartość strony, takie jak tekst, obrazy, filmy, linki, formularze oraz wiele innych elementów.
W języku HTML, element 'body’ definiuje się za pomocą znacznika <body>, który umieszcza się w sekcji <html>. Praktycznie każda strona internetowa musi zawierać ten element, ponieważ to tutaj wyświetlana jest cała zawartość strony.
Element 'body’ umożliwia również wykorzystanie stylów CSS, co pozwala kontrolować wygląd i układ elementów na stronie. Na przykład, można określić tło, czcionkę, marginesy, wyrównanie oraz wiele innych atrybutów stylu, które mają wpływ na wygląd i rozmieszczenie treści na stronie.
Element HTML – definicja dzięki, której zrozumiesz kod źródłowy HTML
Element HTML to podstawowy składnik, który posiada strona internetowa. Określa on strukturę i zawartość dokumentu w języku HTML. Element HTML składa się z tagu początkowego, zawartości i tagu końcowego (np. <p> to tag początkowy, a </p> to tag końcowy elementu paragrafu).
Tagi HTML określają, jakie dane lub treści mają być wyświetlane na stronie internetowej, takie jak nagłówki, paragrafy, obrazy, filmy, listy, tabele i wiele innych.
Przykładem elementu HTML może być:
<p>To jest przykładowy paragraf</p>
W tym przykładzie tag <p> określa początek elementu paragrafu, a tag </p> określa jego koniec. Zawartość pomiędzy tymi tagami to tekst, który będzie wyświetlany na stronie internetowej jako paragraf.
Zawartością elementów mogą być atrybuty. Jednym z przykładów jest href.
Atrybut href w hiperłączu oznacza adres URL (Uniform Resource Locator) strony internetowej lub innych zasobów internetowych, do których prowadzi hiperłącze.
W praktyce, dodając atrybut href do elementu <a> (ang. anchor – kotwica), możesz stworzyć hiperłącze, które po kliknięciu przenosi użytkownika do wskazanego adresu URL. Na przykład:
<a href=”https://www.example.com”>Kliknij mnie</a>
Powoduje utworzenie hiperłącza z tekstem „Kliknij mnie”, które przenosi użytkownika do strony internetowej https://www.example.com, gdy zostanie kliknięte.
Atrybut href jest podstawowym elementem tworzenia interaktywnych i dynamicznych stron internetowych, umożliwiając łączenie stron i przenoszenie użytkowników między różnymi zasobami w Internecie.
Należy również wspomnieć o elementach zagnieżdżonych.
Elementy zagnieżdżone na stronie internetowej to te, które znajdują się wewnątrz innych elementów, na przykład wewnątrz divów, tabel, lub innych kontenerów.
Przykładowe elementy zagnieżdżone mogą obejmować:
- Tekst i obrazy – na przykład, obraz może być umieszczony wewnątrz tekstu lub tekst może być umieszczony wewnątrz obrazu.
- Formularze – elementy formularza, takie jak pola tekstowe, przyciski i listy rozwijane, mogą być zagnieżdżone wewnątrz kontenerów formularza.
- Tabele – komórki tabeli mogą zawierać inne elementy, takie jak obrazy lub przyciski.
- Akordeony i karty – elementy te składają się z nagłówków i treści zagnieżdżonych wewnątrz nich.
- Listy – listy mogą zawierać elementy zagnieżdżone, takie jak listy wypunktowane lub numerowane.
- Menu nawigacyjne – elementy menu mogą mieć podmenu, które zawierają kolejne elementy.
Zagnieżdżanie elementów jest powszechną techniką używaną w projektowaniu stron internetowych, aby pomóc w organizowaniu i układaniu zawartości.
Oto kilka podstawowych znaczników HTML:
Znacznik nagłówka:
<h1>To jest nagłówek pierwszego poziomu</h1>
Znacznik paragrafu:
<p>To jest przykładowy paragraf.</p>
Znacznik odnośnika:
<a href=”https://www.example.com”>To jest link do strony internetowej</a>
Znacznik obrazka:
<img src=”obrazek.jpg” alt=”Opis obrazka”>
Znacznik listy nieuporządkowanej:
Znacznik listy uporządkowanej:
Znacznik formularza:
To tylko kilka przykładów podstawowych znaczników HTML, istnieje wiele innych, które służą różnym celom i umożliwiają tworzenie różnych elementów na stronie internetowej.
Definicja struktury CSS
Struktura CSS (Cascading Style Sheets) to zestaw reguł i deklaracji, które definiują sposób prezentacji elementów HTML lub XML. CSS umożliwia oddzielenie stylu od zawartości, dzięki czemu można łatwo zmienić wygląd strony internetowej bez zmieniania samego kodu HTML.
CSS składa się z kilku elementów:
- Selektorów – umożliwiają określenie, na jakie elementy HTML lub XML będą miały wpływ reguły CSS.
- Deklaracji – określają, jakie style mają być zastosowane na wybrane elementy, np. kolor, rozmiar, czcionka, tło itp.
- Właściwości – to atrybuty określające styl elementów HTML, np. color, font-size, background-color.
- Wartości – określają wartość właściwości, np. kolor czcionki może być czarny lub czerwony.
Struktura CSS (Cascading Style Sheets) odgrywa kluczową rolę na stronach internetowych. Jej głównym celem jest nadanie estetycznego wyglądu i wyróżnienia różnych elementów, takich jak nagłówki, tekst, tła, listy i wiele innych. Dzięki CSS, możliwe jest tworzenie atrakcyjnych i spersonalizowanych projektów stron, które przyciągają uwagę i poprawiają czytelność zawartości.
Ponadto, CSS może być wykorzystywane do stworzenia wersji drukowanych stron internetowych, które prezentują się inaczej niż ich wersje online. Dzięki temu, treść na wydrukowanej stronie może być zoptymalizowana pod kątem druku, co sprawia, że dokumenty są czytelniejsze i bardziej przejrzyste w formie papierowej.
CSS działa na zasadzie kaskadowania, co oznacza, że reguły stylu mogą być zastosowane na różnych poziomach i są dziedziczone przez elementy potomne. Pozwala to na skuteczne zarządzanie wyglądem strony oraz jednoczesne utrzymanie spójności w projekcie.
Podsumowując, struktura CSS jest niezwykle ważna na stronach internetowych, umożliwiając upiększenie i wyróżnienie różnych elementów oraz tworzenie różnic pomiędzy wersjami drukowanymi a wersjami online.
Formatowanie strony internetowej HTML przy użyciu CSS
Szablon strony CSS określa sposób prezentacji strony internetowej, w tym styl czcionek, kolory, tła, marginesy i układ elementów. Z drugiej strony, struktura strony HTML określa sposób organizacji zawartości na stronie, w tym nagłówki, paragrafy, listy i linki.
Strona internetowa HTML – przykładowa struktura, która może zostać sformatowana przy użyciu CSS:
W powyższym przykładzie użyto elementów HTML, takich jak <header>, <nav>, <main>, <section>, <footer> itp. Strona ta jest podzielona na sekcje, z nagłówkiem, menu nawigacyjnym, głównym treścią i stopką. Każda sekcja zawiera odpowiednie elementy, takie jak nagłówki, akapity i listy.
Aby sformatować tę stronę przy użyciu CSS, możemy utworzyć plik style.css i dodać do niego odpowiednie reguły. Na przykład, poniższe reguły określają kolor tła, styl czcionki i marginesy dla nagłówka strony:
header {
background-color: #333;
color: #fff;
font-family: Arial, sans-serif;
margin-bottom: 20px;
padding: 10px;
}
Podobne reguły mogą być zdefiniowane dla innych elementów strony, takich jak menu nawigacyjne, sekcje i stopka.
Kod źródłowy strony. Sprawdź to!
Aby sprawdzić kod źródłowy strony internetowej, należy wykonać następujące kroki:
- Otwórz stronę internetową, której kod chcesz sprawdzić, w przeglądarce internetowej.
- Kliknij prawym przyciskiem myszy na dowolne puste miejsce na stronie.
- Z menu kontekstowego wybierz opcję „Wyświetl kod źródłowy” lub „Wyświetl źródło strony”.
- Otworzy się edytor kodu, w którym możesz zobaczyć HTML, CSS i JavaScript użyte na stronie.
Możesz również skorzystać z klawiatury, używając skrótu klawiaturowego Ctrl+U (dla przeglądarek na systemie Windows lub Linux) lub Command+Option+U (dla przeglądarek na systemie Mac).
Pamiętaj, że kod źródłowy strony internetowej może być różny w zależności od trybu pracy przeglądarki. Na przykład, jeśli przeglądarka ma włączony tryb oszczędzania energii lub blokowania reklam, to niektóre elementy strony mogą zostać ukryte lub zastąpione innymi elementami.
Podsumowanie
Strona internetowa w HTML jest stosunkowo prosta do stworzenia. Poniżej przedstawiam podsumowanie kroków, które należy wykonać, aby stworzyć prostą stronę internetową:
- Na początek należy utworzyć plik HTML i nazwać go z rozszerzeniem .html (np. index.html).
- W pliku HTML należy dodać podstawową strukturę HTML, w tym elementy takie jak <html>, <head> i <body>.
- W sekcji <head> należy dodać elementy takie jak <title>, które określa tytuł strony, oraz <meta>, które opisuje treść strony dla wyszukiwarek.
- W sekcji <body> należy umieścić treść strony, korzystając z różnych elementów HTML, takich jak <h1> do <h6>, <p>, <ul>, <ol>, <img>, <a> itd.
- Aby strona była responsywna, należy dodać reguły stylów CSS, które określają wygląd elementów na stronie w zależności od wielkości ekranu.
- Po stworzeniu strony internetowej, należy ją opublikować na serwerze, aby była dostępna dla użytkowników.
To tylko podstawy tworzenia stron internetowych w HTML. Aby dowiedzieć się więcej, można przeczytać dokumentację HTML i CSS lub wziąć udział w kursie programowania webowego.