 |
||||
Kartki
 |
Podręczniki
|
Przewodniki | Usługi
|
|
|
|
||||
| Kartki
|
Podręczniki
|
Przewodniki | Usługi
|
|
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 WWW — 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 ( )
Myślnik (—)
Wielokropek (…)
Znak "copyright" (©)
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