O HTML

Transkrypt

O HTML

HTML
! HTML jest skrótem od Hyper Text Markup Language.
O HTML
Jest to kolejny język opisu strony dotyczący
dokumentów tekstowych. Pojęcie „opis strony”
wywodzi się z tradycyjnej typografii i oznacza reguły
ustalania wyglądu tekstu: wielkość nagłówków, typy
czcionek, marginesy, interlinie.
! HTML został zdefiniowany w SGML - Standard
Generalized Markup Language. Przy pomocy SGML
można tworzyć tzw. DTD (Document Type
Definition).
! Język HTML został opracowany specjalnie dla
publikowania dokumentów WWW
R. Robert Gajewski
omklnx.il.pw.edu.pl/~rgajewski
www.il.pw.edu.pl/~rg
[email protected]
2
04
Dokumenty HTML (1)
Dokumenty HTML (2)
! Dokumenty HTML można przygotowywać za pomocą
! Dostępne są także programy dokonujące konwersji
zwykłego edytora tekstowego. Jest to jednak żmudne
zajęcie, ponieważ trzeba znać polecenia i wpisywać
je ręcznie.
! Zadanie ułatwiają specjalistyczne edytory HTML.
! Oferta obejmuje zarówno proste edytory oferujące
jedynie wybrane polecenia HTML jak i edytory z
cechami prawdziwego WYSIWYG (What You See Is
What You Get).
(przekształcające tekst z formatu edytora do formatu
HTML).
! Po co więc uczyć się języka HTML?
3
04
©2004 R. Robert ‘RoG@j’ Gajewski
!
!
edytory stanowią jedynie pomoc przy wpisywaniu
wbudowane w edytory możliwości pozostają w tyle za
możliwościami przeglądarek
! Odtwarzaniem dokumentów HTML zajmują się
przeglądarki.
4
04
Dokumenty HTML (3)
Dokumenty HTML (4)
! Kod źródłowy dokumentu HTML składa się ze
! Znacznik zamykający różni się od otwierającego
zwykłego tekstu ASCII jaki można wczytać i obrabiać
w dowolnym edytorze.
! Wyróżnienie wybranego urywka tekstu odbywa się za
pomocą ściśle określonych kodów ujętych w nawiasy
klamrowe zwanych znacznikami (tags).
! Większość z nich służy do zaznaczania obszarów
tekstu. Obszar ten rozciąga się od znacznika
otwierającego poprzez właściwy tekst aż do
odpowiadającego mu znacznika zamykającego.
5
04
jedynie ukośną kreską postawioną przed nazwą:
<H1>
nagłówek pierwszego poziomu (header)
</H1>
! Para składająca się ze znacznika otwierającego i
zamykającego nazywana jest również blokiem
(container). Niektóre znaczniki występują pojedynczo
- nie wymagają zamknięcia!
6
04
1
Szkielet dokumentu
Najprostsza strona
! Niektóre znaczniki są obowiązkowe, gdyż tworzą
! Najprostsza i kompletna definicja strony HTML to:
<HTML>
<HEAD>
<TITLE>...</TITLE>
</HEAD>
<BODY>
...
</BODY>
</HTML>
niejako szkielet każdego dokumentu HTML.
!
!
!
!
cały dokument zawarty jest pomiędzy znacznikami
<HTML>…</HTML>
poza tym w każdym dokumencie występuje obszar
nagłówka, który oznaczony jest przez <HEAD> i może
zawierać metainformacje
wewnątrz tego obszaru za pomocą <TITLE> nadaje
się tytuł
właściwa zawartość dokumentu jest pomiędzy
znacznikami <BODY>
7
04
8
04
Formatowanie (1)
Formatowanie (2)
! HTML jest językiem bezformatowym, co oznacza,
! Akapitów nie wolno zagnieżdżać, dopuszczalne jest
więc opuszczanie znaczników zamykających </P>.
Przeglądarka automatycznie zamyka poprzedni
akapit, gdy rozpoczyna nowy.
! Odradza się używania tego typu uproszczeń, ze
względu na to, że w pewnych wypadkach mogą
wystąpić efekty uboczne.
że ignorowane są przejścia do nowego wiersza i
wielokrotne spacje spacje, zaś wymaganą strukturę
nadajemy dokumentowi za pomocą kilku specjalnych
znaczników:
!
!
!
!
akapit <P> (paragraph)
przejście do nowego wiersza <BR>
tekst wstępnie sformatowany <PRE>
pozioma linia <HR>
9
04
10
04
Formatowanie (3)
Formatowanie (4)
! Atrybuty pisma takich jak rodzaj i wielkość czcionki
! Do bezpośredniego wyróżniania znacznikiem
określa się w dokumentach HTML pośrednio poprzez
określenie funkcji danego fragmentu tekstu w
dokumencie.
! Do wyróżniania całych akapitów służą:
!
!
!
11
04
typu czcionki przewidziane są:
<I> pismo pochyłe, kursywa
<B> pismo pogrubione,
! <U> pismo podkreślone
! <TT> pismo maszynowe
! <SUP> i <SUB> superscript i subscript
!
!
<H1> do <H6> dla nagłówków rozmaitych poziomów
<BLOCKQUOTE> dla cytatów
<ADDRESS> dla adresów mailowych
12
04
2
Wyliczenia (1)
Wyliczenia (2)
! Do bezpośredniego wyróżniania znacznikiem
! Przeglądarka automatycznie dodaje przed
typu czcionki przewidziane są:
pozycją listy wcięcie i stawia przed nią znak
wyliczenia (bullet).
! Przed każdą zagnieżdżoną listą przeglądarka
dodaje kolejne wcięcie.
! W listach uporządkowanych kolejne pozycje
są automatycznie numerowane.
<I> pismo pochyłe, kursywa
! <B> pismo pogrubione,
! <U> pismo podkreślone
! <TT> pismo maszynowe
! <SUP> i <SUB> superscript i subscript
!
13
04
14
04
Odsyłacze hipertekstowe (1)
! Odsyłacze hipertekstowe (hyperlinks) tworzy się za
! W przypadku dłuższych dokumentów celowe jest
przedstawienie na początku ich struktury i
poprowadzenie do każdego z takich punktów
odsyłacza.
! W tym celu należy:
pomocą znacznika <A> (anchor - kotwica).
! Stanowią one prosty i skuteczny element
interaktywny.
! Dzięki odsyłaczom hipertekstowym można
wykonywać skoki do innych miejsc tekstu w danym
pliku, innych dokumentów znajdujących się na
dowolnym serwerze WWW a nawet ściągać
(download) pliki.
15
04
!
!
16
04
zaznaczyć miejsca tekstu, do których ma nastąpić
przeskok (cel skoku definiowany jest parametrem
NAME)
potrzebny jest także rozkaz skoku definiowany
parametrem HREF (hypertext reference)
! Przypisując parametrowi NAME pewną wartość
! Przy użyciu parametru HREF można podawać nie
definiujemy „zakotwiczenie”, do którego będzie się
można odwoływać, jeśli tę samą wartość nadamy
parametrowi HREF w etykiecie skoku.
tylko zakotwiczenia w aktywnym dokumencie.
! Można podawać również nazwy plików innych stron
HTML (podkatalogi nie są oddzielone od siebie
backslashem lecz zwykłym ukośnikiem.
<A HREF=”gajowy”>Burzliwy życiorys
Gajowego</A>
...
<A NAME=”gajowy”></A>
<H1>Narodziny Gajowego…</H1>
17
04
<A HREF=”WROGOWIE.HTM”>Wrogowie </A>
<A HREF=”../INNI/PRZYJ.HTM”>Przyjaciele</A>
<A HREF=”http://www.faico.net”>DiDa</A>
18
04
3
URL (1)
URL (2)
! Głównym zadaniem przeglądarek jest
! Kompletny URL obiektu składa się z następujących
informacji:
udostępnianie zasobów znajdujących się na
dowolnym podłączonym do Internetu
serwerze w jakimkolwiek punkcie świata.
! Do jednoznacznej identyfikacji takiego
określonego obiektu służy tzw. URL (Uniform
Resource Locator - jednolity lokalizator
zasobów).
19
04
!
!
!
!
! W przeciwieństwie do konwencji DOS’owych nazwy
plików w innych systemach rozróżniają małe i duże
litery (case-sensitive)
20
04
Grafika (1)
Grafika (2)
! Z pomocą znacznika <IMG> możemy
! Nazwy obrazów, które mają być przetransmitowane i
wyświetlone podawane są za pośrednictwem
parametru SRC znacznika IMG (względna nazwa
pliku odnosi się do katalogu, w którym znajduje się
aktualna strona HTML)
wbudowywać obrazy bezpośrednio w
strukturę stronicy HTML.
! Obrazy choć wpasowują się idealnie w
dokument HTML nie stanowią integralnej
części strony ale istnieją na serwerze WWW
jako oddzielne pliki w formacie GIF lub JPEG.
21
04
<IMG SRC=”../INNI/GAJOWY.GIF”>
! Znacznik IMG jest w obrębie dokumentu traktowany
podobnie jak element tekstowy (nie generuje
przejścia do nowej linii bądź zmiany akapitu).
22
04
Tabele (1)
Tabele (2)
! Tabele są znakomitym instrumentem do
! Jeśli nie zadeklarowano inaczej szerokość
formatowania wyglądu ekranu. Do ich definicji służą
znaczniki <TABLE>, <TR>, <TD> i <TH>.
!
!
!
!
23
04
protokół transmisji (http:, ftp:, news:, gopher:,
telnet:)
nazwa serwera: port
ścieżka dostępu
nazwa pliku
kolumny określana jest automatycznie i
dostosowuje się do najszerszej wartości w
kolumnie.
! Jeśli szerokość okna przeglądarki nie
wystarcza dla całej tabeli zawartość
najszerszych komórek jest umieszczana w
kilku wierszach.
Całość definicji tabeli zawarta jest między znacznikami
<TABLE>...</TABLE>. Jeśli chcemy, by komórki
tabeli były obramowane dodajemy parametr
<BORDER>.
Znacznik <TR> definiuje wiersz tabeli (table row)
Komórkę tabeli definiuje <TD> (table data)
Specjalny rodzaj komórek definiuje <TH> (table
header) - komórki te są drukowane czcionką
pogrubioną.
24
04
4

O HTML

Transkrypt

Podobne dokumenty

Algorytmy i programy

Historia komputerów

Porty, interfejsy, kontrolery…

Działanie systemu operacyjnego

Struktury danych: Drzewa

Języki programowania

Fotofestiwal 2012