Strony internetowe tworzone są z wykorzystaniem języka HTML. Język ten wykorzystuje specjalne znaczniki zwane tagami, które przeplatają się ze zwykłym tekstem. Strony internetowe zapisywane są w postaci dokumentów HTML.
Do przeglądania stron internetowych służą specjalne programy zwane przeglądarkami internetowymi. Najbardziej popularne obecnie przeglądarki internetowe to na przykład: Chrome, Firefox czy Edge. System operacyjny Windows 10 dostarczany jest wraz z przeglądarką Edge. Pozostałe przeglądarki udostępniane są za darmo i można je zainstalować po pobraniu z Internetu.
Dokumenty HTML można tworzyć i edytować w programach do edycji tekstów czyli w tak zwanych edytorach tekstów. Mogą to być na przykład: aplikacja Notatnik dostępna w systemie operacyjnym Windows lub darmowy program Notepad++ dostępny do pobrania w Internecie.
Dokumenty HTML mogą być otwierane i przeglądane na różnych typach urządzeń takich jak np. komputery, tablety, smartfony. Urządzenia te muszą mieć zainstalowaną aplikację do przeglądania stron intenetowych.
W celu wyświetlenia dokumentu HTML należy uruchomić przeglądarkę internetową, a następnie wpisać adres WWW strony internetowej. W momencie otwarcia strony, jej zawartość jest tłumaczona przez przeglądarkę. W trakcie tej interpretacji dokonywana jest zamiana znaczników na elementy tworzące układ i wygląd strony.
Dokument HTML posiada zdefiniowany układ i powinien zawierać kilka podstawowych znaczników.
Dokument rozpoczyna się znacznikiem:
<!DOCTYPE html>
który informuje przeglądarkę, że jest to strona internetowa, która będzie wczytana i wyświetlona po wcześniejszej zamianie znaczników HTML na zrozumiałą treść.
Dalej występuje para znaczników informująca o użyciu języka HTML:
<html> </html>
Pomiędzy znacznikami
Większość znaczników występuje parami i posiadają tzw. tag otwierający i zamykający jak np.
Pomiędzy znacznikiem otwierającym i zamykającym mogą występować inne znaczniki lub zwykły tekst.
Znaczniki lub pary znaczników mogą być umieszczane obok siebie:
lub też mogą być umieszczone wewnątrz innych:
Nagłówki służą do definiowania tytułów i poprawiają czytelność strony poprzez ich wyróżnienie. Tytuły w dokumentach HTML tworzone są poprzez użycie znaczników:
pomiędzy, którymi umieszczana jest treść tytułu.
Wartości od 1 do 6 definiują ważność tytułów. Nagłówki oznaczone z wykorzystaniem znacznika <h1></h1> mają największą wagę oraz są najbardziej wyróżnione.
Tekst tworzący treść strony umieszcza się pomiędzy znacznikami
Przykładowo poniższy kod HTML:
<html>
<head>
</head>
<body>
</body>
</html>
Na powyższym przykładzie widać, że przeglądarka nie wyświetla wprost znaczników HTML. Tworzą one strukturę dokumentu oraz modyfikują sposób wyświetlania zawartości strony.
Jeżeli istnieje potrzeba dodania większej ilości tekstu, którego część zaczyna się od nowej linii, to w miejscach, gdzie ma być wyświetlona nowa linia, należy użyć znacznika
Tekst 1
Tekst 2
Przeglądarka wyświetli wtedy:
Tekst 1
Tekst 2
Dłuższe teksty dzieli się na akapity którym reprezentowane w języku HTML poprzez znaczniki paragrafu:
W celu pogrupowania i wypunktowania treści w dokumentach HTML istnieje możliwość użycia tak zwanej listy. Jest kilka rodzajów list różniących się sposobem wyświetlania pozycji listy.
W liście uporządkowanej każda jej pozycja poprzedzona jest numerem lub literą. Kolejne pozycje listy posiadają numery o jeden większe od poprzedniej pozycji lub kolejne litery alfabetu.
Przykład:
Europa
Azja
Australia
W celu utworzenia listy uporządkowanej wykorzystywane są znaczniki:
Pozycje listy zawarte są pomiędzy znacznikami:
Pozycje listy nieuporządkowanej poprzedzone są kropką lub innym znakiem wypunktowania jak np.:
Europa
Azja
Australia
Lista nieuporządkowana (wypunktowana) tworzona jest przy pomocy znaczników:
a każda pozycja tej listy zawarta jest pomiędzy znacznikami:
podobnie jak w przypadku listy uporządkowanej
Treść prezentowana przez stronę internetową powinna być przedstawiona w sposób czytelny i estetyczny. Tekst może posiadać wyróżnienia, różną czcionkę, kolor obramowanie. W celu zmiany części tych atrybutów, zastosować można kilka podstawowych tagów.
Efekt pogrubienia uzyskać można poprzez zastosowanie znaczników:
lub
Tekst znajdujący się pomiędzy powyższymi znacznikami zostanie pogrubiony.
Podobnie jak w przypadku pogrubienia tekstu również i tutaj zmiana sposobu wyświetlania tekstu uzyskiwana jest przy pomocy dwóch rodzajów znaczników:
lub
Tekst znajdujący się pomiędzy powyższymi znacznikami zostanie pochylony.
Istnieje możliwość wyróżnienia tekstu (z wykorzystaniem domyślnie żółtego koloru) przy pomocy pary znaczników:
Przykład: To jest tekst podświetlony
Znaczniki formatujące sposób wyświetlania tekstu można łączyć.
Przykładowo po zastosowaniu znaczników:
tekst znajdujący się pomiędzy nimi zostanie podświetlony, pochylony i pogrubiony
Oprócz opisanych wcześniej znaczników zmieniających wygląd tekstu, w dokumentach HTML używane są tak zwane style. Obecnie każda strona internetowa używa wielu rozbudowanych styli choć istnieje możliwość utworzenia strony bez nich np. w celach edukacyjnych lub testowych. Poza tekstem style wykorzystywane są do formatowania innych elementów strony jak na przykład tabel, tła, odstępów, marginesów, obramowań i innych.
Style powiązane są z elementami dokumentu HTML zmieniając ich wygląd.
Można je dodawać wykorzystując poniższe metody:
atrybut
poprzez zawarcie ich pomiędzy tagami
umieszczając je w osobnym pliku CSS związanym z dokumentem HTML
Elementy strony HTML posiadają tak zwane atrybuty, a jednym z nich jest atrybut style który umożliwia zastosowanie stylu. Przykładowo styl powiązany z poniższym tagiem paragrafu zmienia kolor wyświetlanego w jego ramach tekstu.
Jeden element dokumentu HTML może posiadać więcej niż jeden atrybut jednak atrybuty nie mogą istnieć w oderwaniu od elementów.
Atrybut
Na poniższym przykładzie utworzone zostały trzy akapity posiadające różny kolor tekstu.
Styl może być złożony i określać wiele cech takich jak na przykład kolor i wielkość tekstu, czcionka, kolor tła, marginesy. Poszczególne cechy oddzielone są średnikami tworząc ciąg par typu właściwość + wartość.
Tworząc styl zawsze należy określić jaki element ma posiadać zmieniony wygląd (właściwość):
Jak wcześniej wspominano istnieje możliwość zmiany nie tylko koloru tekstu czy tła. Poniższa tabela zawiera przykładowe style.
W dokumentach HTML można tworzyć tabele. Sposób wyświetlania w nich danych nie różni się od innych tabel znanych z życia codziennego.
Przykładem tabeli może być rozkład jazdy linii autobusowej.
Pierwszy wiersz jest wierszem nagłówka. W kolejnych wierszach przedstawione są czasy odjazdu dla poszczególnych godzin. Kolumna pierwsza zawiera kolejne godziny, druga czasy odjazdu w dni powszednie, trzecia w sobota a czwarta w niedziele i święta.
Poniżej znajduje się przykładowa tabela z rozkładem jazdy skróconym do godziny 11.
Grafika 8. Tabela HTML wyświetlona w przeglądarce
Pierwszym z nich jest sekcja:
która określa, gdzie rozpoczyna się i kończy tabela.
Drugą parą elementów jest:
służąca to utworzenia wiersza.
Tworzony jest on wewnątrz elementów:
Tabela może mieć wiele wierszy. W tym przypadku jest ich siedem plus wiersz nagłówka.
Wewnątrz każdego wiersza tworzone są komórki przy pomocy par elementów:
wewnątrz których umieszczany jest tekst jaki ma się wyświetlić.
Wiersz może mieć wiele komórek.
W celu dodania formatów można użyć poniższych stylów:
Odsyłacze inaczej zwane linkami, umożliwiają przechodzenie pomiędzy różnymi stronami. Linki łączą strony internetowe ze sobą umożliwiając przechodzenie pomiędzy nimi. Obecnie większość stron internetowych posiada odsyłacze.
Linki są powszechnie wykorzystywane w Internecie. Przykładowo wyszukując jakieś treści, wyszukiwarka internetowa zwraca linki do stron internetowych.
Aby utworzyć link w dokumencie HTML należy użyć elementu
przykładowo:
wyświetlone zostanie w przeglądarce jako:
Następna strona
Atrybut href określa stronę, do której nastąpi przejście po kliknięciu linka.
Najczęściej jako wartość atrybutu podawany jest tak zwany adres URL strony w Internecie, do której przekierowuje link. Może być to jednak również sekcja na tej samej stronie, do której zostanie ona przewinięta.
Atrybut
Budując witrynę internetową może zaistnieć potrzeba utworzenia linku przekierowującego do innej strony internetowej jednak w ramach tej samej witryny i znajdującej się fizycznie w tym samym folderze co strona, z której następuje przekierowanie. W celu utworzenia takiego linku jako wartość atrybutu można podać jedynie nazwę i rozszerzenie pliku strony, do której ma nastąpić przekierowanie.
Chcąc utworzyć przekierowanie do strony w Internecie należy podać jej pełen adres, który najczęściej rozpoczyna się od:
Obrazy są częstym elementem stron internetowych.
W celu dodania obrazu do strony internetowej należy użyć elementu
źródło – wskazanie na plik graficzny jaki ma zostać wyświetlony
style – styl określający właściwości obrazu
Atrybut
Obrazy najczęściej zapisywane są w plikach, w formacie JPG, PNG lub GIF Format oznacza sposób zapisu obrazu i najłatwiej można go odczytać analizując rozszerzenie pliku. Rozszerzenia nazw plików są najczęściej trzyliterowe oraz dodawane do nazwy pliku po kropce.
W przypadku gdy plik z obrazem znajduje się w tym samym folderze co plik strony internetowej, to jako źródło można podać jego nazwę z rozszerzeniem, tj. na przykład:
We wcześniejszych punktach wspominano, że style są bardzo często wykorzystywane z różnymi elementami HTML.
Podobnie jest w przypadku elementu
Styl dla obrazu najczęściej będzie posiadać zdefiniowane:
szerokość, np.
wysokość, np.
obramowanie, np.