20. Podsumowanie semantyki tekstu

> Dodaj do ulubionych |
Share
Lisek

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ść
Diabeł nad kotłem

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!

Mężczyzna z filiżanką