Materiał edukacyjny z ćwiczeniami i projektem na ocenę – klasa 2 liceum, 3 jednostki lekcyjne
Strona internetowa to plik tekstowy, w którym za pomocą specjalnego języka opisano elementy strony i jej wygląd. Tym językiem jest HTML (ang. HyperText Markup Language) – opisuje on strukturę i zawartość strony za pomocą znaczników, zwanych też tagami. Plik strony zapisanej w HTML ma rozszerzenie html lub htm. Zbiór powiązanych ze sobą stron internetowych, między którymi przechodzimy za pomocą hiperłączy (linków), nazywamy serwisem lub witryną internetową.
Do napisania strony potrzebny jest zwykły edytor tekstu (np. Notepad++, Visual Studio Code) oraz przeglądarka internetowa, w której uruchamiamy i testujemy tworzoną stronę.
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Tytuł strony WWW</title>
</head>
<body>
</body>
</html><head> i </head>) zawiera informacje dla przeglądarki: tytuł strony, kodowanie znaków, słowa kluczowe dla wyszukiwarek, style i skrypty – tych danych zwykle nie widać na stronie (wyjątkiem jest tytuł, widoczny na karcie przeglądarki). Część BODY określa całą zawartość widoczną w przeglądarce: teksty, zdjęcia, tabele, linki.
Znaczniki HTML działają podobnie do nawiasów w matematyce: jeśli je otworzymy, musimy je też zamknąć. Większość znaczników występuje więc w parach: znacznik otwierający i znacznik zamykający (ten drugi ma dodatkowo znak /). Możliwości znacznika można rozszerzyć za pomocą atrybutów, zapisywanych wewnątrz znacznika otwierającego, których wartości ujmujemy w cudzysłów.
Podstawowym znacznikiem tworzącym hiperłącze (link) do innej strony jest znacznik <a>. Adres strony docelowej podajemy w atrybucie href:
<a href="https://www.oi.edu.pl/" target="_blank">Strona Olimpiady Informatycznej</a>Atrybut target="_blank" powoduje, że strona docelowa otworzy się w nowej karcie przeglądarki. Znacznika <a> można też użyć do utworzenia linku do adresu e-mail (href="mailto:[email protected]") lub numeru telefonu (href="tel:123456789").
mailto do swojego (szkolnego) adresu e-mail.
W języku HTML przewidziano sześć poziomów nagłówków, oznaczanych znacznikami od <h1> do <h6> – im niższy numer, tym większą czcionką wyświetlany jest tekst. Do dzielenia tekstu na akapity służy znacznik <p> (można mu dodać atrybut align, ustalający wyrównanie tekstu). Znacznik <br> pozwala złamać wiersz (przenieść tekst do nowej linii), a <hr> wstawia linię poziomą oddzielającą fragmenty strony – oba te znaczniki są puste, czyli występują pojedynczo, bez pary zamykającej.
| Cel | Znaczniki |
|---|---|
| Nagłówki (6 poziomów) | <h1> … <h6> |
| Akapit | <p></p> |
| Nowa linia / linia pozioma | <br> / <hr> |
| Lista uporządkowana / nieuporządkowana | <ol> / <ul>, elementy: <li> |
| Tabela / wiersz / nagłówek komórki / komórka | <table> / <tr> / <th> / <td> |
Listy tworzymy znacznikiem <ol> (lista numerowana) lub <ul> (lista wypunktowana); każdy element listy zapisujemy między znacznikami <li>. Obraz umieszczamy znacznikiem <img> (znacznikiem pustym), podając ścieżkę do pliku graficznego w atrybucie src oraz opis alternatywny w atrybucie alt – rozmiar obrazu można ustalić atrybutami width i height:
<img src="zdjecia/piramida1.jpg" alt="Piramida Cheopsa" width="350" height="650">Ścieżka dostępu do pliku (czyli adres wskazujący jego położenie) może być względna (prowadzi do pliku względem miejsca, w którym znajduje się plik strony, np. zdjecia/piramida1.jpg) lub bezwzględna (pełna ścieżka od katalogu głównego dysku). W kodzie strony najlepiej stosować ścieżki względne.
Tabelę tworzymy znacznikiem <table>: wiersze definiujemy znacznikiem <tr>, a komórki w wierszu – znacznikiem <td> (lub <th>, jeśli chcemy wyróżnić nagłówek tabeli). Sąsiednie komórki można scalać atrybutami colspan (scalanie w poziomie) i rowspan (scalanie w pionie).
<th>).
<img>, korzystając ze ścieżki względnej i pamiętając o atrybucie alt.
Kolor elementów strony opisujemy zwykle w modelu RGB – jako mieszankę trzech barw podstawowych: czerwonej (red), zielonej (green) i niebieskiej (blue), każdej w zakresie 0–255. Kolor w tym modelu możemy zapisać na dwa sposoby: w trybie RGB, np. rgb(124, 252, 0), albo w trybie szesnastkowym (heksadecymalnym), np. #7cfc00. Kolor (oraz inne cechy elementu, np. rozmiar czcionki) możemy ustawić wprost w znaczniku, korzystając z atrybutu style:
<p style="color:#7cfc00;">Zielony tekst</p>
<h1 style="font-size:8vw;">Nagłówek o skalowanej czcionce</h1>Jednostka vw oznacza procent szerokości okna przeglądarki (a vh – procent jej wysokości), dzięki czemu rozmiar czcionki automatycznie dostosowuje się do wielkości ekranu.
Aby nie powtarzać stylów w każdym znaczniku z osobna, style zapisuje się zwykle w oddzielnym pliku – kaskadowym arkuszu stylów (ang. Cascading Style Sheets, w skrócie CSS). Dzięki temu jakakolwiek zmiana wyglądu elementów strony wymaga edycji tylko w jednym miejscu. Plik CSS podłączamy do strony HTML w części HEAD za pomocą znacznika <link>:
<link rel="stylesheet" href="style.css"><h1>–<h6>, znacznik <title> z trafnym tytułem strony, znacznik <meta> z atrybutem description oraz opisy obrazów w atrybucie alt znacznika <img>.
Strony, które poprawnie wyświetlają się na różnych urządzeniach (komputerach, tabletach, smartfonach o różnej wielkości ekranu), nazywamy responsywnymi. Jednym ze sposobów zapewnienia responsywności obrazu jest ustawienie w stylu maksymalnej szerokości równej 100% oraz automatycznej wysokości:
<img src="zdjecie.jpg" style="max-width:100%; height:auto;">Bardziej zaawansowanym rozwiązaniem jest znacznik <picture>, który – w zależności od szerokości okna przeglądarki (atrybut media w zagnieżdżonych znacznikach <source>) – wyświetla różne wersje tego samego obrazu, przygotowane wcześniej w kilku rozmiarach.
Standardem staje się także dbanie o dostępność cyfrową stron – ich dostosowanie do potrzeb osób z różnymi ograniczeniami (np. wzroku, słuchu, ruchu), zgodnie z wytycznymi WCAG 2.1. Popularnymi przykładami dostosowania są opcje zmiany wielkości tekstu i wersje kontrastowe kolorystyki strony, a także stosowanie znacznika <strong> (wyróżnienie tekstu odczytywane też przez czytniki ekranu) obok wizualnie podobnego <b>.
<link>. W pliku CSS ustaw kolor tła strony oraz krój i kolor czcionki (możesz na razie skorzystać z prostych reguł, np. body { background-color: …; font-family: …; }).
style z wartością max-width:100%; height:auto;, aby stał się responsywny. Zmień szerokość okna przeglądarki i sprawdź, jak zachowuje się obraz.
Podsumowaniem działu jest samodzielne zaprojektowanie i wykonanie własnej, kilkustronicowej witryny internetowej na dowolny temat (np. o swoim hobby, ulubionym miejscu, szkole, klubie sportowym).
.html) połączonych ze sobą hiperłączami,<!DOCTYPE html>, <head> z <title> i <meta charset="UTF-8">, <body>),alt, umieszczone w osobnym podfolderze i wstawione za pomocą ścieżki względnej,style z max-width:100% lub znacznik <picture>),<link>, ustalający spójną kolorystykę (podaj użyte kolory w formacie RGB lub szesnastkowym) i krój czcionki na wszystkich podstronach,| Kryterium | Punkty |
|---|---|
| Poprawna struktura HTML wszystkich podstron | 2 |
| Nagłówki, akapity, lista i tabela | 2 |
| Obrazy (ścieżki, atrybut alt, folder na zdjęcia) | 2 |
| Zewnętrzny arkusz CSS – kolorystyka i czcionka | 2 |
| Responsywność co najmniej jednego elementu | 1 |
| Hiperłącza (wewnętrzne między podstronami i zewnętrzne) | 1 |
| Razem | 10 |
.zip (nazwa: imię_nazwisko_projekt) i prześlij go w wyznaczonym terminie zgodnie z ustaleniami nauczyciela.
html lub htm, opisany za pomocą znaczników języka HTML.<a href="…">; nagłówki – <h1>–<h6>; listy – <ol>/<ul>; tabele – <table>, <tr>, <th>, <td>; obrazy – <img src="…" alt="…">.<link>.meta description oraz atrybuty alt obrazów.