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
-encja
Wskazówki
Wewnątrz tekstu sformatowanego za pomocą elementu <PRE> są uwzględniane wszystkie znaki i spacje, dlatego nie ma sensu stosowanie encji;
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:
< - znak „<”;
> - 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-
cursive-
fantasy-
mono-
Przykład:
<p style=”font-family: Arial, Sans-serif;”>czcionka arial</p>
Marginesy
Atrybut style z parametrem:
margin-top: N; -górny margines;
margin-right: N; -prawy margines;
margin-bottom: N; -dolny margines;
margin-left: N; -lewy margines;
gdzie N może być wyrażone w milimetrach (mm), centymetrach (cm), pikselach (px) i punktach (pt).
Przykład:
<style=”margin-top:20pt; margin-right:0; margin-bottom: 1cm; margin-left:25mm;”>
Formatowanie tekstu
Blok cytatów (z marginesami z obu stron)
<BLOCKQUOTE>tekst</ BLOCKQUOTE>
Wyśrodkowanie tekstu: <CENTER>tekst</CENTER>
Listing programu (margines, czcionka Courier)
<LISTING>tekst</LISTING>
Formatowanie tekstu inaczej
Do znacznika <p> wprowadzamy atrybut STYLE z zawartością:
<p style=”text-align: left;”> - do lewej
<p style=”text-align: right;”> - do prawej
<p style=”text-align: center;”> - do środka
<p style=”text-align: justify;”> - wyjustowany
Atrybut STYLE to element kaskadowych arkuszy stylu
Formatowanie tekstu
Brak łamania tekstu <NOBR>tekst</NOBR>
Wstawienie łamania wewnątrz bloku <NOBR> - znacznik <WBR>...</WBR>
Tekst preformatowany (spacje i znaki nowego wiersza nie są ignorowane)
<PLAINTEXT>tekst</ PLAINTEXT>
Listy
Listy - systematyczne wyliczenia punktów
Rodzaje list
listy wypunktowane
listy numerowane
Szkielet listy wypunktowanej (unordered list): znacznik <UL>...</UL>
Szkielet listy numerowanej (ordered list): znacznik <OL>...</OL>
Punkty listy tworzy znacznik <LI>
Przykłady list
Lista wypunktowana
<P>Treść wykładu<P>
|
Lista numerowana
<P>Treść wykładu<P>
|
Linia pozioma
Poziomą linię (horizontal rule) na szerokość strony wstawia znacznik <HR>
Linia poprawia przejrzystość tekstu - oddziela logiczne fragmenty tekstu
Przykład
Tekst pierwszego fragmentu
<HR>
Tekst drugiego fragmentu
Odnośniki
Odnośnik (odsyłacz hipertekstowy, link, hiperłącze) - wyróżniony fragment tekstu lub grafiki, który posiada adres nowego dokumentu
Po kliknięciu na odnośnik zostaje załadowany dokument, na który wskazuje adres
Odnośnik tworzy znacznik:
<A>tekst odnośnika</A>
Odnośniki
Niektóre parametry odnośnika
HREF="URL" ścieżka do pliku lub URL
NAME="nazwa" definicja skoku do innej części strony
Przykład 1
<A HREF="http://www.lublin.pl">Lublin</A>
Przykład 2
<A NAME="w1">HTML</A>
<A HREF="#w1">Wykład z HTML</A>
Odnośniki do adresu e-mail
Dobry zwyczaj: adres autora strony, np.
<A HREF="mailto:autor@adres">Autor</A>
Napis MAILTO - sygnał dla przeglądarki o uruchomieniu poczty elektronicznej:
Netscape wywołuje własny moduł Mail
Explorer używa Mail and News Readers
Parametry ciała dokumentu
BGCOLOR kolor tła
BACKGROUND tło dokumentu w postaci
pliku z grafiką
TEXT kolor tekstu
LINK kolor odnośników (początkowy)
ALINK kolor odnośników aktywnych
VLINK kolor odnośników wykorzystanych
Grafika na stronie
Podstawowe formaty bitowych plików graficznych (skompresowane)
GIF
JPG (JPEG)
Znacznik do określania grafiki in-line
<IMG>
Obrazy in-line (wbudowane w dokument HTML) są traktowane jak znaki tekstu
Parametry znacznika <IMG>
SRC="URL" adres pliku graficznego
HEIGHT wysokość obrazu w pikselach
WIDTH szerokość obrazu w pikselach
HSPACE=n poziomy odstęp obrazu od reszty
dokumentu
VSPACE=n pionowy odstęp obrazu od reszty
dokumentu
Parametry znacznika <IMG>
ALT="tekst" tekst wyświetlany, gdy nie można
załadować grafiki
ALIGN wyrównanie grafiki do tekstu ("top",
"middle", "bottom", "left", "right")
BORDER=n ramka wokół obrazu (n- ilość pikseli,
n=0 - brak)
LOWSRC="URL" obraz wyświetlany
przed głównym plikiem
USEMAP="mapa" obraz jest mapą graficzną
Parametr ALIGN znacznika <IMG>
"top" - jedna linia tekstu
|
"bottom" - jedna linia tekstu u dołu obrazu, reszta niżej
|
Parametr ALIGN znacznika <IMG>
"middle" - jedna linia tekstu na wysokości środka obrazu, reszta niżej |
|
Parametr ALIGN znacznika <IMG>
"left" - tekst oblewa obraz z prawej
|
"right" - tekst oblewa obraz z lewej
|
Mapy graficzne
Mapa graficzna - obraz, w którym definiuje się obszary będące odnośnikami do innych dokumentów
Czynności przy tworzeniu mapy
utworzenie rysunku, na którym będą odnośniki
zdefiniowanie nazwy mapy:
<MAP NAME="nazwa_mapy">określenie obszaru odnośników - <AREA>
po ostatnim znaczniku <AREA> - znacznik </MAP>
wyświetlenie mapy poleceniem <IMG>
<A><IMG USEMAP="#nazwa_mapy" SRC="URL_rysunku"></A>
Parametry znacznika <AREA>
SHAPE kształt pola (RECT - prostokąt,
POLY - wielobok, CIRCLE - koło)
COORDS współrzędne względem lewego, górnego krańca obrazka,
np. dla RECT:
x_lewy, y_górny, x_prawy, y_dolny
HREF="URL" adres odnośnika
ALT="tekst" tekst wyświetlany, gdy nie
można załadować mapy
Przykład dokumentu z mapą
<HTML><BODY>
<MAP NAME="Wejście">
<AREA SHAPE=RECT COORDS="0,0,140,220"
HREF="home.htm">
</MAP>
<CENTER>
<A><IMG USEMAP="#Wejście" SRC="drzwi.jpg"
WIDTH="140" HEIGHT="220"></A>
</CENTER>
</BODY></HTML>
Widok dokumentu z mapą
Edytory map graficznych
Ręczne tworzenie map graficznych - skomplikowane
Edytory map - np. Mapedit, MapThis
1
6
Podstawy HTML
Wyszukiwarka