20. Podsumowanie semantyki tekstu

> Dodaj do ulubionych
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 HTMLOpis
<!-- -->Komentarz
aŁącze
abbrSkrót
bZwrócenie uwagi czytelnika
bdiTekst sformatowany w innym kierunku niż pozostała treść na stronie
bdoOkreślanie kierunku tekstu
blockquoteCytat blokowy
bodyTreść właściwa dokumentu
brBezwarunkowe złamanie wiersza
citeTytuł dzieła
codeKod programu
dataDane w formacie czytelnym dla komputera
delTekst usunięty
dfnDefinicja pojęcia
emEmfaza
figcaptionPodpis schematu, diagramu, rysunku itd.
figurePodpis schematu, diagramu, rysunku itd.
h1, h2, h3, h4, h5, h6Nagłówek tekstu
headNagłówek dokumentu
htmlElement główny dokumentu
iTerminy, wtrącenia itd.
imgObraz graficzny
insTekst wstawiony
kbdTreść wprowadzana przez użytkownika
linkDołączanie dodatkowych zasobów
mark„Cyfrowy marker”
metaMetadane
pAkapit
preTekst preformatowany
qCytat śródliniowy
rpDodanie nawiasów lub innych elementów otaczających znaki ruby w adnotacji ruby
rtTekst ruby w adnotacji ruby
rubyAdnotacja ruby
sTekst przekreślony
sampWynik działania programu
scriptSkrypt
smallTekst pisany drobnym drukiem
spanOgólny kontener tekstowy
strongWażny tekst
styleArkusz stylów CSS
subIndeks dolny
supIndeks górny
titleTytuł dokumentu HTML
uGłównie błędy ortograficzne
varZmienne i niewiadome
wbrWarunkowe 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 CSSOpis
!importantPodnosi ważność deklaracji
::afterPseudoelement dodawany za elementem
::beforePseudoelement dodawany przed elementem
::first-letterPseudoelement odnoszący się do pierwszej litery
::first-linePseudoelement odnoszący się do pierwszego wiersza
::selectionPseudoelement odnoszący się do tekstu zaznaczonego przez użytkownika
:activePseudoklasa odnosząca się do aktywnego łącza
:checkedPseudoklasa odnosząca się do zaznaczonego elementu formularza
:first-childPseudoklasa odnosząca się do pierwszego dziecka elementu
:first-of-typePseudoklasa odnosząca się do pierwszego elementu określonego typu
:focusPseudoklasa odnosząca się do aktywnego elementu
:hoverPseudoklasa odnosząca się do elementu najechanego kursorem
:last-childPseudoklasa odnosząca się do ostatniego dziecka elementu
:last-of-typePseudoklasa odnosząca się do ostatniego elementu określonego typu
:linkPseudoklasa odnosząca się do nieodwiedzonych łączy
:not()Pseudoklasa negacji
:visitedPseudoklasa odnosząca się do odwiedzonych łączy
@font-faceDyrektywa importująca font
@importDyrektywa importująca arkusz stylów
background-colorKolor tła
borderDeklaracja zbiorcza właściwości obramowania
border-colorKolor obramowania
border-radiusZaokrąglenie obramowania
border-styleStyl obramowania
border-widthSzerokość obramowania
colorKolor tekstu
floatTworzenie elementów pływających
fontWłasność zbiorcza właściwości czcionki
font-familyKrój pisma
font-sizeRozmiar pisma
font-styleStyl pisma (pochyłe lub normalne)
font-variantWariant czcionki (kapitaliki lub normalna)
font-weightGrubość pisma
heightWysokość
letter-spacingOdstęp między literami
line-heightWysokość wiersza
marginMargines
margin-bottomMargines dolny
margin-leftMargines lewy
margin-rightMargines prawy
margin-topMargines górny
max-heightMaksymalna wysokość
max-widthMaksymalna szerokość
min-heightMinimalna wysokość
min-widthMinimalna szerokość
paddingDopełnienie
quotesZnaki cudzysłowu
Selektor atrybutuSelektor umożliwiający wybór elementu wg właściwości jego atrybutów
Selektor dzieckaSelektor wybierający element będący dzieckiem innego elementu
Selektor identyfikatoraSelektor wybierający element o określonym identyfikatorze
Selektor klasySelektor wybierający element należący do określonej klasy
Selektor potomkaSelektor wybierający element będący potomkiem innego elementu
text-alignWyrównanie tekstu
text-decorationDekoracja tekstu
text-decoration-colorKolor dekoracji tekstu
text-decoration-lineLinia dekoracji tekstu
text-decoration-styleStyl dekoracji tekstu
text-decoration-thicknessGrubość dekoracji tekstu
vertical-alignWyrównanie w pionie
widthSzerokość
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ą