Kartki Podręczniki Przewodniki Usługi

Dariusz Pietrzyk
"Zrozumieć HTML. Tworzenie stron WWW" (spis treści)

Wstęp

Dlaczego HTML?

Dla kogo jest ten podręcznik?

Jak można korzystać z podręcznika?

Źródła

Zawartość i układ podręcznika

Podziękowania i dedykacja

Część 1. Podstawy

1.1. Internet a język HTML

Internet, serwis internetowy, strona WWW

Witryna — główna strona serwisu

Strona HTML — dokument HTML wyświetlony przez przeglądarkę

1.2. Co warto wiedzieć o języku HTML?

Hipertekst — podstawa języka HTML

HTML — język opisu stron WWW

Znaczniki — podstawowe słowa języka HTML

Para znaczników — początek i koniec elementu

Znaczniki pojedyncze

Zagnieżdżanie elementów

Poprawna pisownia znaczników

Atrybuty — pomocnicze słowa języka HTML

Spacje i znaki końca akapitu

Co można zrobić za pomocą HTML-a?

1.3. Tworzenie stron WWW i dobre obyczaje

Najważniejsza jest treść

Prostota i umiar

Prawa autorskie

Standardy — współpraca w Internecie

1.4. Rozpoczynamy tworzenie strony WWW

Komputer i oprogramowanie

System operacyjny

Przeglądarka stron WWW

Edytor plików tekstowych

Edytory HTML a edytory plików tekstowych

Od czego rozpocząć tworzenie strony WWW?

Aby stworzyć plik HTML (programem "Crimson Editor")

Aby stworzyć plik HTML (programem "Notatnik")

Aby otworzyć plik HTML w przeglądarce

Aby wprowadzić zmiany w pliku HTML (programem "Crimson Editor")

Aby wprowadzić zmiany w pliku HTML (programem "Notatnik")

Część 2. Przygotowanie podstawowej struktury dokumentu HTML

2.1. Główne elementy składowe dokumentu

Wersja języka HTML i wzorzec dokumentu (DTD) — element "DOCTYPE"

Aby określić używaną wersję języka HTML

Początek i koniec dokumentu HTML (element "html")

Aby wstawić oznaczenia początku i końca dokumentu HTML (znaczniki <html> i </html>)

Nagłówek dokumentu HTML (element "head")

Aby wstawić nagłówek dokumentu HTML (znaczniki <head>
i </head>)

Treść dokumentu HTML (i strony WWW) — element "body"

Aby wstawić sekcję z treścią dokumentu HTML (znaczniki <body> i </body>)

2.2. Niezbędne elementy nagłówka dokumentu HTML

Tytuł strony (element "title")

Aby wstawić tytuł strony (znaczniki <title> i </title>)

Zestaw znaków dla języka polskiego (element "meta" typu "charset")

Aby ustalić, że używany jest zestaw znaków w standardzie ISO (ISO-8859-2)

Aby ustalić, że używany jest zestaw znaków w standardzie Windows (Windows-1250)

Część 3. Tworzenie treści strony

3.1. Główne elementy tekstowe i separatory

Akapit (element "p")

Aby wstawić akapit (znaczniki <p> i </p>)

Główny tytuł strony (element "h1")

Aby wstawić główny tytuł strony (znaczniki <h1> i </h1>)

Tytuły podrzędne na stronie (elementy "h2", "h3", "h4", "h5" i "h6")

Aby wstawić tytuł podrzędny (np. znaczniki <h2> i </h2>)

Wymuszenie przejścia do nowego wiersza (element "br")

Aby wymusić początek nowego wiersza (znacznik <br>)

Podział strony poziomą linią (element "hr")

Aby wstawić na stronie poziomą linię (znacznik <hr>)

3.2. Style — formatowanie elementów strony WWW

CSS — arkusze stylów

Wersje (poziomy) CSS

Tworzenie arkusza stylów

Aby stworzyć plik CSS (zewnętrzny arkusz stylów dla strony)

Aby podłączyć arkusz stylów do dokumentu HTML (element "link")

Aby umieścić arkusz stylów wewnątrz dokumentu HTML (element "style")

Poprawna budowa definicji stylu

3.3. Ogólne ustawienia dla strony WWW

Font (parametr "font-family")

Aby ustalić podstawowy font dla strony

Wielkość czcionki (parametr "font-size")

Aby ustalić wielkość czcionki dla tekstu podstawowego strony

Wyzerowanie marginesów (parametry "margin" i "padding")

Aby wyzerować marginesy wszystkich elementów strony

Marginesy boczne (parametry "margin-left" i "margin-right")

Aby ustalić boczne marginesy dla strony

Kolor tekstu (parametr "color")

Aby ustalić kolor tekstu dla całej strony

Kolor tła (parametr "background-color")

Aby ustalić kolor tła dla strony

Grafika w tle strony (parametr "background-image")

Aby umieścić grafikę jako tło strony

3.4. Formatowanie akapitów

Odstęp przed akapitem (parametr "margin-top")

Aby ustalić odstęp przed akapitem

Wcięcie pierwszego wiersza akapitu (parametr "text-indent")

Aby ustalić wielkość wcięcia pierwszego wiersza akapitu

Odstępy między wierszami (parametr "line-height")

Aby ustalić odstęp między wierszami akapitu

Wyrównanie w poziomie (parametr "text-align")

Aby wyjustować (wyrównać do obu marginesów) tekst akapitu

3.5. Formatowanie tytułów

Wielkość czcionki (parametr "font-size")

Aby ustalić wielkość czcionki dla tytułu

Pismo pogrubione (parametr "font-weight")

Aby użyć pisma pogrubionego

Pismo pochylone (parametr "font-style")

Aby użyć pisma pochylonego

Odstępy przed i po tytule (parametry "margin-top" i "margin-bottom")

Aby ustalić odstępy przed i po tytule

Wyśrodkowanie tytułu (parametr "text-align")

Aby wyśrodkować tytuł

Tło dla tytułu (parametr "background-color")

Aby użyć osobnego tła dla tytułu

Tytuł pisany tylko wielkimi literami (parametr "text-transform")

Aby tytuł był pisany tylko wielkimi literami

3.6. Inne przydatne elementy tekstowe

Wyróżnienie (element "em")

Aby użyć wyróżnienia (znaczniki <em> i </em>)

Mocne wyróżnienie (element "strong")

Aby użyć mocnego wyróżnienia (znaczniki <strong>
i </strong>)

Indeks górny (np. w jednostkach miary) — element "sup"

Aby zastosować indeks górny (znaczniki <sup> i </sup>)

Indeks dolny (np. we wzorach chemicznych) — element "sub"

Aby zastosować indeks dolny (znaczniki <sub> i </sub>)

Tekst o ustalonych wcięciach (np. poezja) — element "pre"

Aby zachować ustalone wcięcia i podział na wiersze (znaczniki <pre> i </pre>)

Dłuższe cytaty (element "blockquote")

Aby wstawić cytat obejmujący jeden lub więcej akapitów (znaczniki <blockquote> i </blockquote>)

Krótkie cytaty (element "q")

Aby wstawić cytat wewnątrz akapitu (znaczniki <q> i </q>)

Oznaczenie autora lub źródła cytatu (element "cite")

Aby oznaczyć źródło cytatu (znaczniki <cite> i </cite>)

Oznaczenie pojęcia definiowanego w tekście (element "dfn")

Aby oznaczyć definiowane pojęcie (znaczniki <dfn> i </dfn>)

Oznaczenie akronimu (np. USA) — element "acronym"

Aby oznaczyć akronim (znaczniki <acronym> i </acronym>)

Oznaczenie użytego skrótu (element "abbr")

Aby oznaczyć skrót (znaczniki <abbr> i </abbr>)

3.7. Klasy — odmiany stylów i style niestandardowe

Styl niestandardowy "uwaga" (przykład tworzenia i użycia własnego stylu)

Aby utworzyć styl niestandardowy (konstrukcja ".nazwa_klasy { ... }")

Aby zastosować styl niestandardowy (atrybut "class")

Elementy poszerzające możliwości wykorzystywania klas — "div" i "span"

Aby wydzielić sekcję strony za pomocą elementu "div"

Aby wydzielić kilka wyrazów za pomocą elementu "span"

Możliwości tworzenia złożonych układów stron

3.8. Listy (wypunktowane, numerowane i definicji)

Wypunktowanie (lista nienumerowana) — element "ul"

Aby wstawić wypunktowanie (znaczniki <ul> i </ul>)

Aby zmienić znak wypunktowania (parametr "list-style-type")

Aby wstawić własny znak wypunktowania (parametr "list-style-image")

Aby ustalić odstęp pomiędzy listą a poprzedzającym ją akapitem (parametr "margin-top")

Aby ustalić wielkość odstępów pomiędzy pozycjami listy (parametr "margin-top")

Wyliczenie (lista uporządkowana) — element "ol"

Aby wstawić wyliczenie (znaczniki <ol> i </ol>)

Aby punkty wyliczenia były oznaczane małymi literami alfabetu (parametr "list-style-type")

Słowniczek (lista definicji) — element "dl"

Aby wstawić listę definicji (znaczniki <dl> i </dl>)

3.9. Hiperłącza (linki)

Połączenie z inną stroną WWW wewnątrz serwisu (konstrukcja typu: <a href="strona.html">...</a>)

Aby wstawić połączenie z inną stroną w serwisie

Połączenie z wybranym miejscem strony (konstrukcja typu <a href="#zakladka">...</a>)

Aby utworzyć zakładkę w wybranym miejscu strony (konstrukcja typu: <a name="zakladka">...</a>)

Aby wstawić połączenie z wybranym miejscem na stronie

Połączenie z innym serwisem (konstrukcja typu: <a href="http://www.serwis">...</a>)

Aby wstawić połączenie z innym serwisem

Połączenie z plikiem (konstrukcja typu: <a href="plik.txt">...</a>)

Aby wstawić połączenie z plikiem

Połączenie ze skrzynką poczty elektronicznej (konstrukcja typu: <a href="mailto:nowak@poczta">...</a>)

Aby wstawić połączenie ze skrzynką poczty elektronicznej

Sposób wyświetlania linków

Aby ustalić sposób wyświetlania linków

Podpowiedź o zawartości strony docelowej (atrybut "title")

Aby dodać podpowiedź o zawartości strony docelowej

Skróty klawiszowe dla linków (atrybut "accesskey")

Aby przypisać do linku skrót klawiszowy

3.10. Tabele

Wstawianie tabeli (element "table" oraz elementy "tr", "th" i "td")

Aby wstawić tabelę

Aby wstawić tytuły kolumn tabeli (znaczniki <th> i </th>)

Aby wyświetlić obramowanie dla tabeli i jej komórek (parametr "border")

Aby ustalić odstępy przed i po tabeli oraz wielkość czcionki dla zawartości tabeli

Aby ustalić szerokość tabeli (parametr "width")

Marginesy wewnątrz komórek

Aby ustalić wielkość wewnętrznych marginesów komórki (CSS, parametr "padding")

Aby ustalić wielkość wewnętrznych marginesów komórki (HTML, atrybut "cellpadding")

Inne możliwości formatowania zawartości komórek

Aby zmienić kolor tła dla komórek nagłówkowych (parametr "background")

Aby wyśrodkować w poziomie zawartość wybranej komórki (atrybut "align")

Aby wyrównać zawartość wybranej komórki w pionie (atrybut "valign")

Wspólny nagłówek dla kilku kolumn lub wierszy

Aby ustalić wspólny nagłówek dla kilku kolumn

Tytuł lub podpis tabeli — element "caption"

Aby wstawić tytuł lub podpis tabeli (znaczniki <caption>
i </caption>)

Streszczenie zawartości tabeli (atrybut "summary")

Aby wstawić streszczenie zawartości tabeli

3.11. Grafika

Wstawianie grafiki (element "img")

Aby wstawić graficzny element strony

Tekst zastępczy dla grafiki (atrybut "alt")

Aby wstawić tekst zastępczy

Tekst opływający ilustrację (parametr "float")

Aby uzyskać efekt tekstu opływającego ilustrację

Ramka wokół ilustracji (parametr "border")

Aby wstawić ramkę wokół ilustracji

Wyśrodkowanie ilustracji względem bocznych marginesów strony

Aby wyśrodkować ilustrację

Wymiary obrazka (atrybuty "width" i "height")

Aby podać wymiary wyświetlanej grafiki

Grafika jako element uruchamiający link

Aby użyć grafiki jako linku

3.12. Komentarze oraz znaki specjalne

Komentarze

Aby umieścić komentarz w pliku HTML (znaczniki <!-- oraz -->)

Aby umieścić komentarz w pliku CSS (znaczniki /* oraz */)

Znaki specjalne

Twarda spacja (&nbsp;)

Myślnik (&mdash;)

Wielokropek (&hellip;)

Znak "copyright" (&copy;)

Część 4. Udostępnianie strony WWW w Internecie

4.1. Umieszczanie serwisu na serwerze WWW

Zakładanie konta na serwerze WWW

Aby założyć konto na serwerze WWW

Umieszczanie zawartości serwisu na serwerze WWW

Aby umieścić pliki serwisu na serwerze WWW

Sprawdzanie poprawności strony WWW

Sprawdzanie poprawności linków

4.2. Udostępnianie serwisu WWW poprzez wyszukiwarki i katalogi

Wyszukiwarki

Aby zarejestrować serwis w wyszukiwarce

Katalogi tematyczne stron WWW

4.3. Współdziałanie strony WWW z wyszukiwarkami

Roboty indeksujące

Aby wybrana strona nie była indeksowana przez roboty

Krótki opis zawartości strony (element "meta/description")

Aby podać krótki opis zawartości strony

Słowa kluczowe (element "meta/keywords")

Aby podać słowa kluczowe związane z treścią strony

Część 5. Jak to działa?

5.1. Obraz — ekran monitora i pliki graficzne

Piksel — najmniejszy składnik obrazu

Rozdzielczość ekranu monitora

Wielkość piksela

Jednostki rozdzielczości obrazu — dpi oraz ppi

Jednostki używane w języku HTML

Piksel (px)

Procent (%)

Punkt (pt)

Jednostka "em"

Cal (in), centymetr (cm), milimetr (mm)

Kolory

Barwy składowe — system RGB

Kodowanie barw składowych

Kodowanie kolorów w języku HTML

Palety kolorów

Bezpieczna paleta kolorów

Określanie kolorów za pomocą nazw

Formaty plików graficznych

PNG

JPEG/JPG

GIF

5.2. Marginesy i ramki wokół elementów strony WWW

5.3. Katalogi i pliki

Ścieżki dostępu do plików

Ścieżka względna do pliku w katalogu podrzędnym

Ścieżka względna do pliku w katalogu nadrzędnym

Ścieżka bezwzględna do pliku

Wskazówki dotyczące nazw katalogów i plików

Nie używaj polskich znaków

Zamiast spacji używaj znaku podkreślenia (czyli "_")

Używaj tylko liter, cyfr i znaków podkreślenia

Nie używaj wielkich liter

Używaj nazw znaczących

Używaj jak najkrótszych nazw

Plik index.html

Rozszerzenie w nazwach plików HTML

5.4. Czytelność i przejrzystość tekstu

Używanie fontów przez przeglądarki

Czcionka a font

Fonty szeryfowe (grupa "serif")

Fonty bezszeryfowe (grupa "sans-serif")

Fonty o stałej szerokości znaków (grupa "monospace")

Fonty zaprojektowane dla tekstów wyświetlanych na ekranie monitora

Jakiego fontu użyje przeglądarka?

Formatowanie tekstu

Jak użytkownik dociera do konkretnej informacji na stronie WWW?

Jednolitość formatowania jednakowych elementów strony

Wyróżnienia

Marginesy i odstępy, czyli tzw. światło

Tło

Strony WWW a osoby z wadami wzroku

5.5. Polskie znaki w Internecie

Klawiatura a zestaw znaków

ISO — standardowe zestawy znaków

ISO-8859-2 a Windows-1250

Określanie zestawu znaków w nagłówku dokumentu HTML

Domyślny zestaw znaków dla stron internetowych

Jak uzyskać w MS Windows znaki z zestawu ISO-8859-2?

Konwerter

Edytor z wbudowanym konwerterem

Sterownik klawiatury

Półautomatyczna zamiana wybranych znaków

Kody polskich znaków w zestawie ISO-8859-2

Część 6. Dodatki

6.1. Programy wspomagające tworzenie stron WWW

Wybrane programy

Źródła przydatnych programów

6.2. Znaki specjalne

Znaki interpunkcyjne

Cudzysłowy

Symbole walut

Prawa autorskie i znaki handlowe

Jednostki

Potęgi i ułamki

Operatory matematyczne

Inne

6.3. Atrybuty i elementy języka HTML wychodzące z użycia

Atrybuty

Elementy

6.4. Elementy, atrybuty i parametry w kolejnych wersjach języka

Elementy HTML

Atrybuty HTML

Parametry CSS

6.5. Słownik skrótów

6.6. Bibliografia

6.7. Indeks rzeczowy