To jest ostatni rozdział z części poświęconej semantyce tekstu. Znasz już prawie wszystkie elementy HTML5 służące do oznaczania różnych typów treści tekstowej oraz umiesz je formatować w pewnym zakresie za pomocą podstawowych własności CSS.
Oprócz tego znasz też podstawowe elementy struktury dokumentu HTML, wiesz jak jest zbudowany element HTML, szczegółowo znasz konstrukcję reguły CSS i arkusza stylów, umiesz posługiwać się wybranym edytorem kodu… Krótko mówiąc, masz już bardzo solidną podstawową wiedzę na temat technik HTML5 i CSS, dzięki której czujesz się mocno i pewnie oraz na bazie której możesz dalej się rozwijać.
Ten rozdział zawiera zwięzłe podsumowanie zdobytych do tej pory wiadomości oraz przygotowanie do następnej części kursu, w której przyjmiemy odwrotną perspektywę niż do tej pory.
To znaczy, wcześniej skupiliśmy się prawie wyłącznie na elementach należących do najgłębszej warstwy treści strony internetowej – czyli służących do znakowania różnych rodzajów tekstu. Natomiast w następnej części tego kursu zaczniemy od elementów „zewnętrznych”, czyli tych, które reprezentują ogólne ramy jej budowy, takich jak nagłówek strony, pasek boczny, treść artykułu, czy stopka.
Obecna struktura katalogów
W poprzednich rozdziałach utworzyliśmy trzy strony poświęcone trzem ciekawym osobom ze świata nauki i programowania. Na podstawie każdej z nich poznaliśmy różne elementy HTML i własności CSS. Zanim przejdziemy do ich podsumowania, najpierw przypomnimy sobie dotychczasową strukturę naszej witryny. Obecnie zawiera ona następujące katalogi i pliki:
Ciekawi_ludzie css img erdos.jpg feynman.png whytheluckystiff.jpg js erdos.html feynman.html why-the-lucky-stiff.html
Do tej pory wszystkie arkusze stylów umieszczaliśmy w elemencie style w nagłówkach omawianych stron, ponieważ ułatwiało nam to ich testowanie.
Może jednak pamiętasz, że w finalnej wersji witryny arkusze stylów powinny znajdować się w zewnętrznym pliku z rozszerzeniem .css, który jest dołączony do każdej strony za pomocą elementu link.
Zewnętrzny plik CSS
Jesteśmy już na takim etapie budowy naszej witryny, że chyba nadeszła pora na rezygnację z wewnętrznych arkuszy i przeniesienie pracy do zewnętrznego arkusza stylów. W tym celu musimy pozbierać reguły CSS z poszczególnych stron i przenieść je do nowego pliku.
Aby to zrobić, utwórz w folderze css plik o nazwie style.css i wklej do niego poniższy kod CSS:
body {
min-width: 600px;
max-width: 800px;
margin: 0 auto;
padding: 10px;
line-height: 1.4;
}
a {
color: green;
text-decoration: none;
}
a:visited {
color: red;
}
a:hover {
color: navy;
}
a:active {
color: aqua;
}
h1, h2, h3 {
margin-bottom: 0;
margin-top: 30px;
}
p {
margin-top: 5px;
}
blockquote {
border-left: 6px solid green;
padding: 10px 20px;
margin-bottom: 0;
text-align: justify;
}
figcaption {
margin-left: 66px;
font-weight: bold;
font-size: 90%;
}
strong {
font-size: large;
}
em {
letter-spacing: 0.15em;
}
i[lang=en] {
color: brown;
}
mark {
background-color: pink;
}
dfn {
font-weight: bold;
}
ins {
text-decoration-style: dotted
}
u {
text-decoration-style: wavy;
text-decoration-color: red;
}
kbd {
color: red;
}
kbd samp {
color: navy;
font-style: italic;
}
kbd.kbd-short {
border: 1px solid #aaaaaa;
background-color: #fafafa;
padding: 1px 3px;
border-radius: 4px;
color: inherit;
}
.float-right {
float: right;
margin: 20px
}
.nazwisko {
color: darkgreen;
letter-spacing: 0.1em;
}
.uniwersytet {
color: darkred;
}Powyższy arkusz stylów zawiera wszystkie reguły CSS, które napisaliśmy w poprzednich rozdziałach. Kiedy wkleisz go do swojego pliku style.css, do każdej ze stron witryny dołącz go za pomocą elementu link, uprzednio usuwając z niego wewnętrzny arkusz stylów. Na przykład nagłówek dokumentu strony o Feynmanie powinien wyglądać tak:
<head>
<meta charset="utf-8">
<title>Richard Feynman</title>
<link rel="stylesheet" href="css/style.css">
</head>Wprowadź analogiczne zmiany w pozostałych dwóch stronach i sprawdź, czy po tym zabiegu wyglądają tak, jak powinny. Dodatkowo tutaj możesz pobrać całą naszą witrynę w dotychczasowym stanie w postaci archiwum ZIP.
Jej struktura katalogów wygląda teraz tak:
Ciekawi_ludzie css style.css img erdos.jpg feynman.png whytheluckystiff.jpg js erdos.html feynman.html why-the-lucky-stiff.html
Podsumowanie poznanych elementów HTML
Poniższa tabela zawiera zwięzłe zestawienie wszystkich poznanych do tej pory elementów HTML oraz kilka dodatkowych z kategorii semantyki tekstu, których nie będziemy szczegółowo omawiać (ich opisy są przedstawione pismem wytłuszczonym), ale warto wiedzieć o ich istnieniu.
Tabela 1. Zestawienie poznanych elementów HTML. Nazwy są odnośnikami do opisów w kursie
| Element HTML | Opis |
|---|---|
<!-- --> | Komentarz |
a | Łącze |
abbr | Skrót |
b | Zwrócenie uwagi czytelnika |
bdi | Tekst sformatowany w innym kierunku niż pozostała treść na stronie |
bdo | Określanie kierunku tekstu |
blockquote | Cytat blokowy |
body | Treść właściwa dokumentu |
br | Bezwarunkowe złamanie wiersza |
cite | Tytuł dzieła |
code | Kod programu |
data | Dane w formacie czytelnym dla komputera |
del | Tekst usunięty |
dfn | Definicja pojęcia |
em | Emfaza |
figcaption | Podpis schematu, diagramu, rysunku itd. |
figure | Podpis schematu, diagramu, rysunku itd. |
h1, h2, h3, h4, h5, h6 | Nagłówek tekstu |
head | Nagłówek dokumentu |
html | Element główny dokumentu |
i | Terminy, wtrącenia itd. |
img | Obraz graficzny |
ins | Tekst wstawiony |
kbd | Treść wprowadzana przez użytkownika |
link | Dołączanie dodatkowych zasobów |
mark | „Cyfrowy marker” |
meta | Metadane |
p | Akapit |
pre | Tekst preformatowany |
q | Cytat śródliniowy |
rp | Dodanie nawiasów lub innych elementów otaczających znaki ruby w adnotacji ruby |
rt | Tekst ruby w adnotacji ruby |
ruby | Adnotacja ruby |
s | Tekst przekreślony |
samp | Wynik działania programu |
script | Skrypt |
small | Tekst pisany drobnym drukiem |
span | Ogólny kontener tekstowy |
strong | Ważny tekst |
style | Arkusz stylów CSS |
sub | Indeks dolny |
sup | Indeks górny |
title | Tytuł dokumentu HTML |
u | Głównie błędy ortograficzne |
var | Zmienne i niewiadome |
wbr | Warunkowe złamanie wiersza |
Podsumowanie poznanych własności CSS
Ponadto w tym kursie poznaliśmy wiele podstawowych składników technologii CSS. Poniższa tabela zawiera ich zestawienie.
Tabela 2. Zestawienie poznanych składników technologii CSS. Nazwy są odnośnikami do opisów w kursie
| Element CSS | Opis |
!important | Podnosi ważność deklaracji |
::after | Pseudoelement dodawany za elementem |
::before | Pseudoelement dodawany przed elementem |
::first-letter | Pseudoelement odnoszący się do pierwszej litery |
::first-line | Pseudoelement odnoszący się do pierwszego wiersza |
::selection | Pseudoelement odnoszący się do tekstu zaznaczonego przez użytkownika |
:active | Pseudoklasa odnosząca się do aktywnego łącza |
:checked | Pseudoklasa odnosząca się do zaznaczonego elementu formularza |
:first-child | Pseudoklasa odnosząca się do pierwszego dziecka elementu |
:first-of-type | Pseudoklasa odnosząca się do pierwszego elementu określonego typu |
:focus | Pseudoklasa odnosząca się do aktywnego elementu |
:hover | Pseudoklasa odnosząca się do elementu najechanego kursorem |
:last-child | Pseudoklasa odnosząca się do ostatniego dziecka elementu |
:last-of-type | Pseudoklasa odnosząca się do ostatniego elementu określonego typu |
:link | Pseudoklasa odnosząca się do nieodwiedzonych łączy |
:not() | Pseudoklasa negacji |
:visited | Pseudoklasa odnosząca się do odwiedzonych łączy |
@font-face | Dyrektywa importująca font |
@import | Dyrektywa importująca arkusz stylów |
background-color | Kolor tła |
border | Deklaracja zbiorcza właściwości obramowania |
border-color | Kolor obramowania |
border-radius | Zaokrąglenie obramowania |
border-style | Styl obramowania |
border-width | Szerokość obramowania |
color | Kolor tekstu |
float | Tworzenie elementów pływających |
font | Własność zbiorcza właściwości czcionki |
font-family | Krój pisma |
font-size | Rozmiar pisma |
font-style | Styl pisma (pochyłe lub normalne) |
font-variant | Wariant czcionki (kapitaliki lub normalna) |
font-weight | Grubość pisma |
height | Wysokość |
letter-spacing | Odstęp między literami |
line-height | Wysokość wiersza |
margin | Margines |
margin-bottom | Margines dolny |
margin-left | Margines lewy |
margin-right | Margines prawy |
margin-top | Margines górny |
max-height | Maksymalna wysokość |
max-width | Maksymalna szerokość |
min-height | Minimalna wysokość |
min-width | Minimalna szerokość |
padding | Dopełnienie |
quotes | Znaki cudzysłowu |
| Selektor atrybutu | Selektor umożliwiający wybór elementu wg właściwości jego atrybutów |
| Selektor dziecka | Selektor wybierający element będący dzieckiem innego elementu |
| Selektor identyfikatora | Selektor wybierający element o określonym identyfikatorze |
| Selektor klasy | Selektor wybierający element należący do określonej klasy |
| Selektor potomka | Selektor wybierający element będący potomkiem innego elementu |
text-align | Wyrównanie tekstu |
text-decoration | Dekoracja tekstu |
text-decoration-color | Kolor dekoracji tekstu |
text-decoration-line | Linia dekoracji tekstu |
text-decoration-style | Styl dekoracji tekstu |
text-decoration-thickness | Grubość dekoracji tekstu |
vertical-align | Wyrównanie w pionie |
width | Szerokość |
Co szykuje nam przyszłość
Tematem głównym drugiej części kursu jest struktura treści dokumentu HTML. Tak jak w tej części skupiliśmy się przede wszystkim na oznaczaniu różnego rodzaju fragmentów tekstu, tak w następnej skupimy się na szerszych elementach strukturalnych, takich jak menu, paski boczne, stopka, nagłówek strony (nie mylić z nagłówkami treści h1 itd.), czy tabele, listy i formularze.
Nadal będziemy pracować nad naszą witryną o ciekawych ludziach. Na razie ma ona wiele wad – przede wszystkim trudno nawet nazwać ją witryną, bo tak naprawdę to tylko trzy nieszczególnie powiązane ze sobą strony internetowe. Nie ma menu, dzięki któremu moglibyśmy przechodzić między jej poszczególnymi stronami, nie ma formularza kontaktowego, jest pozbawiona nagłówka i stopki i w ogóle jest w bardzo surowym stanie.
W kolejnej części kursu zrobimy z tego zbioru stron kompletną, choć prostą, witrynę gotową do publikacji w internecie. Na podstawie zdobytej w trakcie jej tworzenia wiedzy będziesz w stanie zacząć tworzyć własne strony internetowe, a ograniczać Cię w tym będzie już tylko Twoja wyobraźnia i chęć dalszego zgłębiania technik i technologii sieciowych.
Jeśli tego potrzebujesz, zrób sobie krótką przerwę na kawę, herbatę, kubek mleka, czy jakikolwiek inny ulubiony napój, a następnie przejdź do kolejnego rozdziału. Miłej zabawy i powodzenia!
