Podstawy tworzenia stron WWW w HTML5

Transkrypt

Podstawy tworzenia stron WWW w HTML5
Mariusz Różycki
wersja 2013.04.10
2
Spis treści
0 Wprowadzenie
0.1 Lista zmian . . . . . . . . . . . .
0.2 O skrypcie . . . . . . . . . . . . .
0.3 Dla osób, które coś już umieją . .
0.4 Nieco teorii – protokół HTTP . .
0.5 Przydatne narzędzia . . . . . . .
0.5.1 Edytory . . . . . . . . . .
0.5.2 Przeglądarki internetowe .
1 Pierwsza strona
1.1 Automatyczne łamanie
1.2 Ręczne łamanie linii .
1.2.1 Znacznik <br>
1.2.2 Znacznik <p> .
linii
. . .
. . .
. . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
5
5
5
6
7
7
7
8
.
.
.
.
9
9
10
10
10
2 Podstawowe formatowanie tekstu
11
2.1 Znaczniki <b>, <i>, <u> . . . . . . . . . . . . . . . . . . . . . 11
2.2 Znaczniki <strong> i <em> . . . . . . . . . . . . . . . . . . . 11
3 Podstawowe elementy strony internetowej
3.1 Nagłówki . . . . . . . . . . . . . . . . . . .
3.2 Odnośniki . . . . . . . . . . . . . . . . . . .
3.3 Obrazki . . . . . . . . . . . . . . . . . . . .
3.4 Listy . . . . . . . . . . . . . . . . . . . . . .
3.4.1 Listy wypunktowane . . . . . . . . .
3.4.2 Listy numerowane . . . . . . . . . .
3.4.3 Listy wielopoziomowe . . . . . . . .
3
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
13
13
14
15
15
15
16
16
4
SPIS TREŚCI
4 Struktura dokumentu HTML5
4.1 Znaczniki <!doctype> i <html>
4.2 Ciało dokumentu . . . . . . . .
4.3 Nagłówek dokumentu . . . . .
4.3.1 Tytuł . . . . . . . . . .
4.3.2 Kodowanie znaków . . .
5 Bloki
5.1 Znacznik
5.2 Znacznik
5.3 Znacznik
5.4 Znacznik
5.5 Znacznik
5.6 Znacznik
5.7 Znacznik
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
19
20
20
20
20
20
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
21
21
21
21
21
21
21
21
6 Podstawy CSS
6.1 Kolory . . . . . . . . . . . . .
6.1.1 Kolor tła . . . . . . .
6.1.2 Kolor czcionki . . . .
6.1.3 Obramowanie . . . . .
6.2 Czcionki . . . . . . . . . . . .
6.2.1 Wygląd . . . . . . . .
6.2.2 Rozmiar . . . . . . . .
6.2.3 Znacznik <span> . . .
6.3 Marginesy . . . . . . . . . . .
6.3.1 Marginesy wewnętrzne
6.3.2 Marginesy zewnętrzne
6.4 Zewnętrzny arkusz stylu . . .
6.4.1 Selektory . . . . . . .
6.4.2 Klasy . . . . . . . . .
6.4.3 Identyfikatory . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
23
<div> . . .
<header> .
<nav> . . .
<article>
<section>
<aside> .
<footer> .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Rozdział 0
Wprowadzenie
0.1
Lista zmian
Skrypt ten nie jest kompletny i będzie powoli aktualizowany. Wszystkie
większe zmiany wprowadzane w kolejnych wersjach będą umieszczane na tej
liście. Jeżei znajdziesz w tekście jakiś błąd, napisz na [email protected].
• 2013.04.10
– poprawione listingi kodu
– uzupełnione puste sekcje rozdziału Wprowadzenie
– napisany wstęp do rozdziału Struktura dokumentu HTML5
– zmieniona numeracja rozdziałów (od zera)
• 2013.04.09
– pierwsza wersja skryptu
– ustalona wstępna struktura kursu
– napisane rozdziały 2-4
0.2
O skrypcie
Skrypt ten został przygotowany z myślą o osobach, których dotychczasowy
kontakt z tworzeniem stron WWW jest znikomy. Stąd też wszystkie zagadnienia staram się opisywać jak najdokładniej i wyjaśniać wszelkie wątpliwości.
Osoby, których wiedza na tematy tutaj opisane jest niewielka, powinny
po prostu czytać kolejno wszystkie rozdziały tego skryptu. Warto również
5
6
ROZDZIAŁ 0. WPROWADZENIE
starać się wykorzystywać zdobytą wiedzę w praktyce. Po zakończeniu każdego rozdziału można odłożyć skrypt na bok i starać się zbudować (lub w
przypadku późniejszych rozdziałów – rozbudować) własne, proste strony.
Każdy rozdział tego skryptu wymaga znajomości jedynie tego, co znajduje się przed nim – nie jest wymagana żadna dodatkowa wiedza ani szukanie informacji z innych źródeł. Mimo to czasem odnośniki do innych kursów
mogą się pojawić i, choć nie jest to konieczne, warto się z nimi zapoznać.
Korzystanie z różnych źródeł w nauce programowania i podobnych umiejętności z reguły jest dobrym pomysłem.
Należy jednak uważać przy szukaniu dodatkowych źródeł na własną rękę. Informacje zawarte w tym skrypcie zgodne są z założeniami HTML5,
podczas gdy wiele kursów w internecie wciąż bazuje na starszych specyfikacjach. O ile sam sposób pisania i ogólne założenia nie różnią się aż tak
bardzo, o tyle w szczegółach różne wersje (x)HTML różnią się od siebie na
tyle, że ich mieszanie nie jest dobrym pomysłem.
Zdaję sobie sprawę, że nie wszystkie elementy HTML5 są prawidłowo
interpretowane przez wszystkie przeglądarki. W tym skrypcie jednak skupiam się na podstawowych zagadnieniach z tego zakresu. Wszystkie nowe
wersje popularnych przeglądarek bez problemu interpretują używane tutaj
elementy tego języka.
0.3
Dla osób, które coś już umieją
Uwaga! W tej sekcji mogę odnosić się do rodziałów lub sekcji tego skryptu,
które jeszcze nie zostały napisane!
Jeżeli już wcześniej miałeś do czynienia z tworzeniem stron WWW przy
użyciu HTML, zacznij od przejrzenia spisu treści. W momencie, w którym
natkniesz się na zagadnienie, które wydaje ci się nowe – zacznij czytanie
skryptu od początku rozdziału, w którym to zagadnienie jest opisane.
Innym sposobem na rozpoczęcie pracy z tymi materiałami, w przypadku kiedy coś już umiesz, jest przeglądanie listingów kodu. Znajdują się one
wewnątrz czarnych ramek, dlatego nie powinieneś mieć problemu z ich odnalezieniem przy pobieżnym przeglądaniu skryptu. Gdy natkniesz się na
kod, którego nie rozumiesz lub nie wiesz jak będzie działał – przeczytaj od
początku sekcję, w której się on znajduje.
Niezależnie od tego, którą strategię wybierzesz, jeżeli nie miałeś wcześniej
do czynienia z HTML5, od rozdziału Struktura dokumentu HTML5 włącznie
powinieneś dokładnie zapoznawać się z całym materiałym.
Jeżeli miałeś już wcześniej kontakt z podstawami specyfikacji HTML5,
0.4. NIECO TEORII – PROTOKÓŁ HTTP
7
możesz jedynie pobieżnie przejrzeć skrypt w poszukiwaniu zagadnień, których nie znasz lub nie do końca rozumiesz. Jeżeli nic takiego tutaj nie znajdziesz, a będziesz chciał nauczyć się więcej, możesz zaczekać aż skrypt zostanie poszerzony o nowe treści. Dobrym pomysłem będzie skontaktowanie się
bezpośrednio ze mną, być może będę w stanie wskazać ci, gdzie powinieneś
udać się po więcej informacji.
0.4
Nieco teorii – protokół HTTP
Poprzednio omówiliśmy działanie sieci komputerowych. Powiedzieliśmy sobie, że dane w sieci przesyłane są za pomocą pakietów, które zawierają pewne
dane.
Dane te różnią się w zależności od tego, w jakim celu się porozumiewamy i w jakim celu. Strony internetowe również wczytywane są za pomocą
pakietów wczytywanych z serwera. Korzysta się wtedy z protokołu HTTP.
Możemy za jego pomocą przesyłać różne pliki, jednak podstawowym nośnikiem danych w tym protokole są pliki HTML.
Pliki HTML zawierają opis układu, zawartości i wyglądu strony internetowej. Mogą być dynamicznie generowane po stronie serwera, na przykład
za pomocą skryptów PHP, czy CGI.
W przypadku prostych stron internetowych nie ma jednak potrzeby stosowania tego rozwiązania. Tworzy się wtedy statyczne pliki HTML i umieszcza je na serwerze – w takiej postaci są potem wysyłane do użytkowników.
Tworzeniem takich właśnie plików będziemy się zajmować w tym kursie.
0.5
Przydatne narzędzia
Uwaga! Ta sekcja jest tylko zalążkiem, w przyszłości może pojawić się tu
więcej informacji.
0.5.1
Edytory
Aby tworzyć strony internetowe potrzebujemy jakiegoś edytora tekstowego.
Nie nada się tutaj raczej MS Word, potrzebujemy programu, który operuje
na zwykłych plikach tekstowych.
Możliwe jest tworzenie stron internetowych w Windowsowym Notatniku,
jednak jest to mało wygodne. Dobrym wyborem może być za to program
Notepad++, który co prawda nie posiada zbyt wielu opcji ułatwiających
8
ROZDZIAŁ 0. WPROWADZENIE
pisanie w HTMLu, jednak zajmuje niewiele miejsca i dla osób zaczynających
przygodę z HTML będzie wystarczający.
Dla osób pracujących na Linuksie, jednak niezbyt zapoznanych z tym
systemem, dobrym wyborem powinien być edytor tekstu wbudowany w używaną dystrybucję. Może być to Gedit, Kate, czy inne podobne.
Dla użytkowników obu tych systemów dostępne są także edytory vim
oraz emacs, są one jednak przeznaczone dla zawansowanych użytkowników
i mogą odstraszyć początkujących.
Innym dobrym edytorem, niestety płatnym, choć można z niego korzystać za darmo z pewnymi ograniczeniami, jest Sublime Text, dostępny zarówno na Windowsie jak i Linuksie.
Istnieją również rozwiązania dedykowane dla tworzenia stron WWW.
Przykładem może być NetBeans, jednak używanie go do nauki HTML to
trochę jak strzelanie do muchy z armaty. Jest to bowiem dość rozbudowane
środowisko do tworzenia aplikacji webowych i większośc jego funkcji jest
zbędnych na tym etapie.
Odradzam używanie programu Zajączek, dawniej (i obecnie w wielu polskich szkołach, niestety) bardzo popularnego. Jest on od wielu lat nierozwijany, przez to przestarzały i może sprawiać wiele problemów, szczególnie na
nowych systemach.
0.5.2
Przeglądarki internetowe
Nie jest możliwe tworzenie stron WWW bez posiadania przeglądarki internetowej. Na pewno używasz w tym momencie któregoś z dostępnych rozwiązań, nie będę więc rozpisywał się na ich temat. Na tym etapie nauki nie
potrzebujesz też używać kilku z nich.
Warto jednak pamiętać, że różne przeglądarki mogą różnie interpretować
ten sam kod. Dlatego w przyszłości może okazać się, że dobrym pomysłem
będzie zainstalowanie kilku przeglądarek i testowanie, czy strona wygląda
poprawnie na każdej z nich. Wtedy należy zaopatrzyć się nie tylko w IE,
czy twoją ulubioną przeglądarkę. Przyda się Firefox, Chrome, może nawet
Safari.
Rozdział 1
Pierwsza strona
Najprostszy plik HTML zawiera po prostu tekst, tak jak pliki TXT. Istotne
jest jednak, aby taki plik posiadał rozszerzenie .html (lub .htm), aby został
odpowiednio zinterpretowany przez przeglądarkę.
Czas otworzyć nasz edytor. Wpiszmy tam następujący tekst:
1
To jest moja pierwsza strona internetowa .
I zapiszmy go w pliku index.html. Nazwa ta jest ogólnie przyjętą nazwą
dla strony głównej i jest w pierwszej kolejności wczytywana przez serwery.
W naszym wypadku nie ma to więkzego znaczenia (nie umieszczamy strony
internetowej na serwerze), jednak lepiej przyzwyczajać się do przyjętych
zwyczajów, ponieważ może być to przydatne w przyszłości.
Teraz możemy otworzyć stworzony właśnie plik używając dowolnej przeglądarki internetowej. Typ pliku .html powinien być domyślnie skojarzony
z jedną z zainstalowanych na komputerze przeglądarek, dlatego z reguły
wystarczy dwukrotnie kliknąć na ikonę pliku.
Naszym oczom ukaże się tekst, tak jak byśmy się spodziewali, który
umieściliśmy w pliku index.html. Strona ta nie wygląda zbyt okazale czy
bogato, nie jest też zgodna ze standardami HTML, jednak pierwszy krok ku
tworzeniu stron internetowych został wykonany!
1.1
Automatyczne łamanie linii
Wróćmy do edytora. Spróbujmy umieścić więcej tekstu na naszej stronie.
1
To jest moja pierwsza strona internetowa . Wygląda nieco
ascetycznie , jednak stworzyłem ją całkiem sam i
dzięki temu nauczyłem się czegoś nowego .
9
10
ROZDZIAŁ 1. PIERWSZA STRONA
Zwróćmy uwagę, że przeglądarka domyślnie złamie linie naszego tekstu
tak, aby całość mieściła się w szerokości okna przeglądarki. Dzięki temu nie
musimy martwić się o właściwe rozmieszczenie tekstu.
1.2
Ręczne łamanie linii
Co jednak, gdybyśmy chcieli w pewnym momencie zacząć pisać od nowej
linii? Spróbujmy po prostu wstawić znak nowej linii w naszym pliku.
Okaże się, że tekst nie zostanie złamany tam, gdzie byśmy sobie tego
życzyli. Aby ręcznie złamać tekst w wybranym przez nas miejscu musimy
zastosować mechanizmy, których dostarcza nam HTML.
1.2.1
Znacznik <br>
Musimy umieścić w tekście coś, co nazywa się znacznikiem. Znacznik to
element języka HTML, który służy do opisu wyglądu logicznej struktury
dokumentu (czasem, chociaż rzadko, jej wyglądu). Znacznikiem służącym
do łamania linii jest <br> (od ang. BReak line). Spróbujmy umieścić go w
kodzie naszej strony:
1
2
To jest moja pierwsza strona internetowa . < br >
Wygląda nieco ascetycznie , jednak stworzyłem ją całkiem
sam i dzięki temu nauczyłem się czegoś nowego .
Gdy teraz otworzymy naszą stronę zauważymy, że w miejscu, gdzie umieściliśmy znacznik <br>, tekst został przeniesiony do nowej linii.
1.2.2
Znacznik <p>
Ten sposób jednak nie należy do zbytnio eleganckich. Dokument HTML z
założenia powinien służyć do opisu logicznej struktury dokumentu, a nie
jej wyglądu (do tego służą inne mechanizmy). Lepszym rozwiązaniem jest
podział tekstu na akapity.
Aby wydzielić z tekstu akapit, należy fragment tekstu umieścić między
znacznikami <p> i </p> (od ang. Paragraph). Zwróć uwagę, że te dwa znaczniki są bardzo podobne, różni je tylko znak ukośnika na początku. Nie jest to
przypadkowe. Znaczniki te występują w parach: pierwszy z nich rozpoczyna
akapit (jest znacznikiem otwierającym), drugi z nich zaś kończy akapit (jest
znacznikiem zamykającym). Większość znaczników w HTML działa właśnie
w ten sposób, jedynie nieliczne z nich występują pojedynczo i nie zawierają
znaczników zamykających (jak na przykład znacznik <br>).
Podzielmy tekst na naszej stronie na akapity:
1.2. RĘCZNE ŁAMANIE LINII
1
2
11
<p > To jest moja pierwsza strona internetowa . </ p >
<p > Wygląda nieco ascetycznie , jednak stworzyłem ją
całkiem sam i dzięki temu nauczyłem się czegoś
nowego . </ p >
Zwróć uwagę, że teraz między liniami tekstu pojawiła się niewielka przerwa. Domyślnie przeglądarki internetowe tak właśnie wyświetlają akapity.
Możemy to zmienić przy użyciu stylów, tym zajmiemy się jednak nieco później.
Style są także jednym z głównych powodów, dla których podział tekstu
na akapity jest bardziej preferowany niż ręczne łamanie linii – dają nam one
dużo większe możliwości zmiany wyglądu.
12
ROZDZIAŁ 1. PIERWSZA STRONA
Rozdział 2
Podstawowe formatowanie
tekstu
2.1
Znaczniki <b>, <i>, <u>
Przyszedł czas na lekkie urozmaicenie wyglądu naszej strony. Zaczniemy od
podstawowego formatowania tekstu. Do dyspozycji mamy kilka znaczników,
takich jak <b> (pogrubienie, od ang. Bold ), <i> (kursywa, od ang. Italics),
<u> (podkreślenie, od ang. Underline). Są to oczywiście znaczniki, które
występują w parach razem z tagami zamykającymi.
Wypróbujmy je na naszej stronie:
1
2
<p > To jest moja <b > pierwsza </ b > strona internetowa . </ p >
<p > Wygląda <i > nieco </ i > ascetycznie , jednak stworzyłem
ją całkiem sam i dzięki temu nauczyłem się czegoś
<u > nowego </ u >. </ p >
Kiedy otworzyy nową wersję naszej strony w przeglądarce, zauważymy, że
słowo „pierwsza” zostało pogrubione, „nieco” zapisane kursywą, a „nowego”
podkreślone.
Uwaga! Znaczniki można zagnieżdżać (to znaczy umieszczać jeden w drugim), ale nie należy ich krzyżować! Wszystkie znaczniki należy zamykać w
kolejności odwrotnej do ich otwarcia. Oznacza to, że zapis <b>Przykładowy
<i>krótki</b> tekst</i>, nawet jeżeli zostanie zinterpretowany przez przeglądarkę tak, jak można by się tego spodziewać, jest nieprawidłowy i nie
należy nigdy go używać!
13
14
2.2
ROZDZIAŁ 2. PODSTAWOWE FORMATOWANIE TEKSTU
Znaczniki <strong> i <em>
Tak jak wspominałem wcześniej, dokument HTML z założenia powinien
opisywać logiczną strukturę strony, a nie jej wygląd. Trzy wyżej opisane
znaczniki służą opisowi wyłącznie wyglądu. Pomimo tego, że w teorii można
ich wygląd zmienić, w praktyce nie jest to zalecane.
Dlatego istnieją dwa inne znaczniki: silny akcent (<strong>) i emfaza
(<em>, od ang. EMphasis). Domyślnie pierwszy z nich produkuje pogrubiony
tekst, a drugi kursywę, jednak ich wygląd można dowolnie modyfikować przy
użyciu stylów.
Zwróć uwagę, że nie ma podobnego znacznika produkującego podkreślenie. Nie wynika to z faktu, że twórcy przeglądarek podkreślenia nie lubią
(chociaż faktem jest, że jego nadmierne stosowanie spowalnia tempo czytania). Chodzi o to, że <strong> i <em>, nie są znacznikami pogrubienia i
podkreślenia, ale silnego i nieco słabszego akcentu. To jedynie ich domyślny
wygląd (z różnych przyczyn) odpowiada tym dwóm formatowaniom.
Rozdział 3
Podstawowe elementy strony
internetowej
3.1
Nagłówki
Warto byłoby do naszej strony dodać jakiś nagłówek. Tutaj sytuacja jest bardzo prosta. Służy do tego znacznik <h1> (od ang. Header ), który oczywiście
występuje w parze z odpowiednim nagłówkiem zamykającym. Dodajmy taki
nagłówek do naszej strony.
1
2
3
< h1 > Moja pierwsza strona </ h1 >
<u > nowego </ u >. </ p >
Kiedy odświeżymy naszą stronę zauważymy, że na samej górze pojawił się napis „Moja pierwsza strona” napisany dużo większą i pogrubioną
czcionką. Oczywiście jest to jedynie domyślny wygląd nagłówka i przy użyciu
stylów można go zmienić.
Może rodzić się pytanie, skąd ta cyfra „1” w nazwie znacznika? Odpowiedź jest bardzo prosta – ponieważ jest to nagłówek pierwszego stopnia.
HTML udostępnia aż 6 różnych stopni nagłówków od <h1> do <h6>. W
praktyce rzadko używa się ich wszystkich, nawet <h4> nie zdarza się często.
Warto jednak wiedzieć, że są.
Wykorzystajmy więc tę możliwość i podzielmy naszą stronę na kilka
podsekcji, z których każda będzie miała swój nagłówek.
1
2
< h2 >O mnie </ h2 >
15
16ROZDZIAŁ 3. PODSTAWOWE ELEMENTY STRONY INTERNETOWEJ
3
4
5
6
7
8
9
10
<p > Nazywam się Mariusz Różycki . Interesuję się
informatyką . Aby poszerzać swoją wiedzę w tej
dziedzinie , we wrześniu 2012 roku rozpocząłem studia
na Uniwersytecie Cambridge . </ p >
< h2 >O stronie </ h2 >
<u > nowego </ u >. </ p >
< h2 > Kontakt </ h2 >
<p > Mój adres e - mail to mar . rozycki@gmail . com </ p >
3.2
Odnośniki
Przydatną rzeczą do umieszczenia na stronie internetowej są odnośniki – czy
to do innych stron internetowych, czy po prostu podstron naszej własnej
strony, czasem także do innego miejsca na tej samej podstronie. Nauczmy
się je umieszczać w kodzie HTML.
Służy do tego znacznik <a> (od ang. Anchor ). Jednak samo umieszczenie
adresu innej strony między parą tych znaczników nie utworzy nam działającego odnośnika. Należy do znacznika dodać atrybut, który wskaże, gdzie
dany link ma nas przekierowywać.
Atrybuty umieszcza się wewnątrz znacznika otwierającego. Najpierw piszemy nazwę atrybutu, później znak „=”, a na końcu, w cudzysłowach,
wartość atrybutu. Atrybut odpowiadający za źródło odnośnika nazywa się
href, a jego wartość to po prostu adres strony.
Brzmieć to może jak czarna magia, ale wygląda dość prosto. Na przykład
odnośnik do strony Google.com wyglądać będzie tak:
1
<a href = " http :// google . com " > Google . com </ a >
To, co umieścimy między znacznikami, pojawi się na stronie jako odnośnik.
Pamiętać należy o dodaniu „http://” na początku adresu odnośnika. W
przeciwnym razie adres zostanie zinterpretowany jako lokalny i nie będzie
prowadził tam, gdzie byśmy sobie tego zażyczyli.
Dodajmy link do naszej strony internetowej:
1
2
< h2 >O mnie </ h2 >
3.3. OBRAZKI
3
4
5
6
7
8
9
10
17
na <a href = " http :// www . cam . ac . uk " > Uniwersytecie
Cambridge </ a >. </ p >
< h2 >O stronie </ h2 >
<u > nowego </ u >. </ p >
<p > Mój adres e - mail to mar . rozycki@gmail . com </ p >
Możemy również sprawić, żeby adres e-mail był klikalny i powodował
otwarcie okna nowej wiadomości (z wpisanym naszym adresem e-mail w polu
adresata) klienta poczty. W tym celu adres e-mail wewnątrz atrybutu href
należy poprzedzić słowem mailto z dwukropkiem na końcu (bez ukośników),
na przykład
1
<a href = " mailto : mar . rozycki@gmail . com " > Napisz do
mnie ! </ a >
Nie jest jednak zalecane umieszczanie tego typu odnośników na ogólnie
dostępnych stronach, ponieważ taki adres e-mail może zostać (i dość szybko zostanie) odczytany przez boty i umieszczony na spamlistach, przez co
dostawać będziecie mnóstwo niechcianej poczty.
3.3
Obrazki
Do uzupełnienia
3.4
Listy
Kolejnym elementem, który możemy dodać do naszej strony jest lista. Może
być wypunktowana, może być numerowana. Nauczmy się dodawać i jedne i
drugie.
3.4.1
Listy wypunktowane
Na pierwszy ogień pójdą listy wypunktowane. Nowością w tym wypadku
będzie fakt, że do jej stworzenia potrzebujemy dwóch znaczników. Pierwszy
z nich obejmuje całą listę – wszystkie jej elementy. Drugi służy do oznaczania
pojedynczych elementów.
Tym pierwszym jest <ul> (od ang. Unordered List), drugim natomiast
<li> (od ang. List Item). Lista wypunktowana w naszym kodzie wyglądać
będzie na przykład tak:
1
2
3
4
5
< ul >
< li > pierwszy element </ li >
< li > drugi element </ li >
< li > trzeci element </ li >
</ ul >
Uwaga! Chociaż nie ma obowiązku zamykania znaczników <li> (jest to
oczywiste, że tam, gdzie zaczyna się następny element listy, tam kończy się
poprzedni), to jednak polecam je zamykać. Jest to dobry zwyczaj, dokument
zapisany w ten sposób wygląda lepiej. Podobnie wcięcia elementów listy nie
są obowiązkowe (w rzeczywistości można je nawet umieścić w jednej linii),
jednak zwiększają czytelność kodu.
Dodajmy do naszej strony listę zainteresowań:
2
3
4
5
6
7
8
9
10
< h2 >O mnie </ h2 >
na <a href = " http :// www . cam . ac . uk " > Uniwersytecie
Cambridge </ a >. </ p >
<p > Oprócz informatyki mam także kilka innych
zainteresowań :
< ul >
< li > gry karciane i papierowe RPG </ li >
< li > gra na saksofonie i śpiew </ li >
< li > kaligrafia i projektowanie koszulek </ li >
</ ul >
</ p >
3.4.2
Listy numerowane
W podobny sposób tworzy się listy numerowane. Jedyną różnicą jest to, że
znacznikiem okalającym całą listę jest tym razem <ol> (od ang. Ordered
List). Element listy nadal oznaczamy znacznikiem <li>.
Wykorzystajmy listę numerowaną do rozbudowania sekcji „Kontakt”:
13
14
<p > Można skontaktować się ze mną na kilka sposobów :
3.4. LISTY
15
16
17
18
19
20
19
< ol >
< li > przez pocztę elektroniczną :
mar . rozycki@gmail . com </ li >
< li > przez telefon : +44 7899 702 723 </ li >
< li > uderzając w rynnę 3 razy </ li >
</ ol >
</ p >
3.4.3
Listy wielopoziomowe
Listy można w sobie zagnieżdżać, tworząc listy wielopoziomowe. Wystarczy
umieścić jedną listę wewnątrz drugiej.
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<p > Można skontaktować się ze mną na kilka sposobów :
< ol >
< li > przez pocztę elektroniczną </ li >
< ul >
< li > mar . rozycki@gmail . com </ li >
< li > mr ozyc ki@un derg groun d . pl </ li >
</ ul >
< li > przez telefon : +44 7899 702 723 </ li >
< li > uderzając w rynnę </ li >
< ol >
< li > najpierw 3 razy , aby zainicjować połączenie </ li >
< li > następnie 5 razy szybko , 3 wolniej i 2 szybko ,
aby wybrać mój numer telefonii rynnowej </ li >
< li > na końcu wybić wiadomość kodem Morse ’ a </ li >
</ ol >
</ ol >
</ p >
Oczywiście można mieszać różne typy list, zależnie od potrzeb. Można
też zagnieździć więcej niż 2 listy, tworząc w ten sposób listę mającą więcej
poziomów.
Rozdział 4
Struktura dokumentu
HTML5
W poprzednich rozdziałach zajmowaliśmy się jedynie treścią i układem naszej strony internetowej. Nasz dokument HTML nie zawierał niczego poza
tym, co ma znaleźć się w oknie przeglądarki. Mimo że pliki te były prawidłowo wyświetlane, to same w sobie nie były do końca poprawnie napisane.
Specyfikacja HTML, nie tylko w wersji 5, ale także w poprzednich, przewiduje dla dokumentu HTML pewną ustaloną strukturę. Warto jest się jej
trzymać, bowiem nie powstała ona bez powodu. Nie tylko porządkuje kod,
ale także daje nam pewne możliwości, które w innym przypadku są niedostępne.
Przykładowy, prosty dokument HTML zachowujący tę strukturę wygląda tak:
1
2
3
4
5
6
7
8
9
10
11
<! doctype html >
< html >
< head >
< title > Strona WWW </ title >
< meta charset = " utf -8 " >
</ head >
< body >
< h1 > Moja strona WWW </ h1 >
<p > To jest moja strona WWW </ p >
</ body >
</ html >
Przejdźmy do omówienia poszczególnych jej elementów.
21
22
ROZDZIAŁ 4. STRUKTURA DOKUMENTU HTML5
4.1
Znaczniki <!doctype> i <html>
4.2
Ciało dokumentu
4.3
Nagłówek dokumentu
4.3.1
Tytuł
4.3.2
Kodowanie znaków
Rozdział 5
Bloki
5.1
Znacznik <div>
5.2
Znacznik <header>
5.3
Znacznik <nav>
5.4
Znacznik <article>
5.5
Znacznik <section>
5.6
Znacznik <aside>
5.7
Znacznik <footer>
23
24
ROZDZIAŁ 5. BLOKI
Rozdział 6
Podstawy CSS
6.1
Kolory
6.1.1
Kolor tła
6.1.2
Kolor czcionki
6.1.3
Obramowanie
6.2
Czcionki
6.2.1
Wygląd
6.2.2
Rozmiar
6.2.3
Znacznik <span>
6.3
Marginesy
6.3.1
Marginesy wewnętrzne
6.3.2
Marginesy zewnętrzne
6.4
Zewnętrzny arkusz stylu
6.4.1
Selektory
6.4.2
Klasy
6.4.3
Identyfikatory
25

Podstawy tworzenia stron WWW w HTML5

Transkrypt

Podobne dokumenty

HTML – Podstawy języka i jego historia.

Więcej na http://www.kurshtml.boo.pl

Cel gry Plansza Rozgrywka Przygotowanie Droga Kamieni

Spis treści Wstęp Rozdział I Wokół definicji zdrowia publicznego

TWORZENIE WITRYNY INTERNETOWEJ

Premium SMS – Irlandia