Podstawy HTML

Język SGML

SGML (Standardized Generalized Markup Language) - międzynarodowy standard metajęzyka

Metajęzyk - język umożliwiający definiowanie nowych języków podrzędnych

Dialekty SGML-a

-          HTML

-          XML

Język HTML

HTML (Hyper Text Markup Language) - język opisu strony

Opis strony - określenie struktury strony (rodzaj nagłówka, typ czcionki itp.)

Dokument HTML jest plikiem tekstowym z poleceniami HTML o rozszerzeniu .htm  lub .html

HTML został opracowany specjalnie do publikowania w sieci WWW dokumentów hipertekstowych

Język HTML

Własności HTML

-          łatwość przemieszczania dokumentów między różnymi platformami

-          niezależność od nośnika - HTML opisuje tylko strukturę tekstu, a nie jego dokładny wygląd

Wygląd tekstu zależy od:

-          ograniczeń technicznych

-          obsługiwanej wersji języka

-          ustawień danej przeglądarki

Podobnie wszędzie wygląda tylko czysta grafika

Standardy HTML

Język zaprojektowany w 1990 r. w instytucie CERN (Szwajcaria)

Standardy opracowuje World Wide Web Consortium (W3C)

Standard aktualnie obowiązujący:
HTML 4.0 (zatwierdzony w grudniu '97)

Mimo standardu przeglądarki traktują niektóre polecenia różnie (rozbieżność w wyglądzie stron WWW)

Edytory HTML

Tekstowe

Graficzne, np.

-          FrontPage

-          Pajączek

-          HomeSite

-          HotDog

Używanie edytorów tekstowych - lepsza kontrola nad dokumentem

Edytor FrontPage

Edytor Pajączek

Znaczniki

Znaczniki (tags) - kody w nawiasach <> opisujące sposób formatowania strony

Rodzaje znaczników:

-          parzyste <NAZWA> ... </ NAZWA>

-          nieparzyste              <NAZWA> ...

Nierozpoznane znaczniki są ignorowane

Wielkość liter nie ma znaczenia

Postać komentarza
<!-- tekst komentarza -->

Parametry znacznika

Wpisywane po NAZWIE w nawiasach

Wartość parametru ujętą w cudzysłów podaje się po znaku '='

Przykład wstawiania parametrów
<NAZWA PAR1="wart1" PAR2="wart2"...>

Polskie znaki

Najbardziej rozpowszechnione standardy kodowania

-          ISO-8859-2 (Polska Norma) - zalecany

-          Windows 1250

Polecenie informujące przeglądarkę o standardzie kodowania (w nagłówku dokumentu), np.

<meta http-equiv="content-type" content="text/html";
charset="windows-1250">

Struktura dokumentu

Cały dokument powinien być zawarty między znacznikami
<HTML>...</HTML>

Główne części dokumentu

-          informacje nagłówkowe (nie wyświetlane)
<HEAD>...</HEAD>

-          właściwa treść (ciało) dokumentu
<BODY>...</BODY>

W nagłówku dokumentu powinna być informacja
<TITLE>Tytuł strony</TITLE>

Struktura dokumentu

<HTML>

                            <HEAD>

                                          <TITLE>Tytuł strony</TITLE>

              </HEAD>

                            <BODY>

                                          ...właściwa treść dokumentu

                            </BODY>

</HTML>

Tytuły podrozdziałów

Znacznik tytułu podrozdziału (header)
<Hn>...</Hn>

Cyfra n oznacza stopień tytułu (1-6)

Tytuły różnią się wielkością znaków

Np.

              <H1>...</H1>
 

<H6>...</H6>

Akapity

Zwykły tekst - tekst bez znaczników

Przeglądarka ignoruje w tekście wielokrotne spacje, znaki ENTER itp.

Akapity rozdziela znacznik <P>...</P>

Łamanie wiersza - znacznik <BR>

Przykład
<P>To jest akapit</P>
A to wiersz<BR>

Atrybuty czcionki

<I>tekst</I>                                            czcionka pochyła (italic)

<B>tekst</B>                                            czcionka pogrubiona (bold)

<U>tekst</U>                                            podkreślenie (underlined)

<TT>tekst</TT>                              czcionka maszynowa (proporcjonalna)

<PRE>tekst</PRE> akapit czcionka maszynową

<EM>tekst</EM>              wyróżnienie (zazwyczaj kursywa)

<STRONG>tekst </STRONG> wyróżnienie (pogrubienie)

<BLINK>tekst </BLINK>               migotanie

<SUP>tekst</SUP>                                                        indeks górny

<SUB>tekst</SUB>                                                        indeks dolny

&nbsp;                                                                                     -encja

Wskazówki

1.          Wewnątrz tekstu sformatowanego za pomocą elementu <PRE> są uwzględniane wszystkie znaki i spacje, dlatego nie ma sensu stosowanie encji;

2.          Wewnątrz tekstu sformatowanego za pomocą elementu <PRE> nie można używać znaków „<” i „>”. Ich użycie zostanie potraktowane jak fragment znacznika     HTML. Można je zastąpić encjami:

v                                      &lt - znak „<”;

v                                      &gt – znam”>”

Parametry czcionki

Definiowanie parametrów czcionki: <FONT>tekst</FONT>

Parametry

COLOR                            kolor czcionki, np. "red" lub "#rrggbb" (odcień RGB w zapisie szesnastkowym)

SIZE                            rozmiar od 1 do 7 (domyślnie 3)

FACE                            nazwa czcionki, np. "Arial"

Przykład                <FONT COLOR="red" SIZE=5>
                      Wykład pierwszy</FONT>

Parametry czcionki inaczej

Do znacznika wprowadzamy atrybut STYLE z zawartością:

¨            style=”color: blue;” – kolor czcionki

¨            style=”background-color: black;” – kolor tła

¨            <p style=”background-color: blue; color: white;”>

Zmiana koloru i tła dla fragmentu tekstu:

<span style=”background-color: red; color: green;”> tekst </ span>

Atrybut STYLE to element kaskadowych arkuszy stylu

Dostępne kolory tekstu

Najczęściej przy definiowaniu koloru tekstu wystarczy 16 barw,  rozpoznawanych przez Netscape'a i Explorera

white               black                             silver                             gray                           

maroon              red                                          purple                            fuchsia

green              lime                                          olive                                          yellow

navy              blue                                          teal                                          aqua

Rozmiar czcionki

style=”font-size: Npt;”

Rozmiar czcionki jest podawany w punktach (Pt).

1 pt =1/72 cala

1 cal = 2, 54 cm

Przykład:

<p style =”font-size: 20pt;”> tekst duży</p>

Krój czcionki

Standardowe rodziny krojów czcionki:

¨                          serif

¨                          sans-serif-

¨...