A.Purczyński

HTML

HTML

HyperText Markup Language
Hipertekstowy język znacznikowy

Język HTML jest językiem skryptowym¹ przeznaczonym do zapisu dokumentów w sieci WWW, tzw. Wszechnicy Wiedzy Wszelakiej (ang. World Wide Web). Sieć WWW (protokół HTTP) i podwaliny pod HTML zaprojektował Tim(othy) Berners-Lee (ur. 1955) w roku 1990 wraz z zespołem, pracując w CERN (Europejskim Laboratorium Fizyki Cząstek w Szwajcarii).

Podstawowe terminy Internetu
Adres IP (ang. Address Internet Protocol)
Unikalny adreskomputera w postaci czterech liczb bajtowych (0-255) oddzielonych kropkami, np. 2.5.234.255
DNS (ang. Domain Name System)
System nazw identyfikujących komputer w sieci
Domena (ang. Domain)
Część adresu określająca serwer (np. w adresie
http://www.pur.l.pl
domeną jest
l.pl
FTP (ang. File Transfer Protocol)
Protokół sieciowy do pobierania plików z serwera
HTTP (ang. HyperText Transfer Protocol)
Protokół sieciowy do przeglądania stron WWW
Link (ang. Link)
Odsyłacz (łącznik) do innego miejsca w sieci
PPP (ang. Point to Point Protocol)
Protokół do łączenia z Internetem komputerów wyposażonych w modem poprzez linię telefoniczną
TCP/IP (ang. Transmission Control Protocol/Internet Protocol)
Dwa podstawowe protokóły sieci do przesyłu danych w pakietach
URL (ang. Uniform Resource Locator)
Ujednolicony standard adresowania zasobów sieci Internet. Ma składnię dwuczęściową (1:2)
protokoł:miejsce/nazwa_obiektu, np. http://www.zasoby.com/index.html

Dokument HTML

HTML jest językiem znaczników tworzących multimedialny dokument złożony z tekstu, grafiki, dźwięków i hiperłączników do innych dokumentów. Na podstawie tych znaczników dokument przedstawia program nazywany przeglądarką (ang. browser). HTML jest odmianą języka SGML (ang. Standard Generalized Markup Language) stanowiącego międzynarodową normę kodowania tekstu (ISO).

Ogólna postać znacznika

<TAG parameter="wartość"> zapis </TAG>

TAG - znacznik może mieć parametry o różnych wartościach i zamknięcie /TAG wyznaczające zakres jego działania. Każdy znacznik jest ujęty w nawiasy kątowe.

Znaczniki tekstowe

<P>Angielskie słowo paragraph oznacza po polsku akapit, który stanowi wyodrębniony blok tekstu złożony zwykle z kilku zdań Blok ten jest wyraźnie wyodrębniony przez odsunięcie wierszy początkowego i ostatniego od pozostałego tekstu. Podział taki ma na celu ułatwienie czytelnikowi przyswajania wywodów autora. Zdania zawarte w akapicie powinny łączyć się w logiczną całość. Dla zaznaczenia logicznych powiązań między zdaniami dobrze jest stosować takie wyrażenia jak: tak więc, zatem, następnie, wobec tego, mianowicie, jednakże itp.</P>

<B>tekst pogrubiony </B>
<I>kursywa</I>
<TT>czcionka o stałej szerokości</TT>
<U>tekst podkreślony</U>

Aby rozpocząć od nowego wiersza należy użyć znacznika <BR>. Nie ma on znacznika zamykającego.

Struktura dokumentu

<HTML>
  <HEAD>
    <!-- Część pierwsza - nagłówek -->
    <TITLE>Tytuł</TITLE>
  </HEAD>
  <BODY>
    <!-- Część druga - korpus -->
  </BODY>
</HTML>

Prolog

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

Dodatkowe elementy bloku HEAD

<HEAD>
<META HTTP-EQUIV="Content-type" content="text/HTML;charset=windows-1250">
<META NAME="author" content="">
<META NAME="description" content="">
<META NAME="keywords" content="">
<META NAME="Generator" CONTENT="meh-(c)A.Purczyński">
<META NAME="Language" CONTENT="pl">
<TITLE></TITLE>
</HEAD>

Wprowadzanie rysunków

<IMG SRC="upadek.gif">

Znaczniki do tworzenia tablic

NazwiskoImięWiek
KaczmarekJan88
NowakEwa100

<TABLE BORDER="1" WIDTH="60%">
<TR><TH>Nazwisko</TH><TH>Imię>/TH<TH>Wiek</TH></TR>
<TR><TD>Kaczmarek</TD><TD>Jan</TD><TD>88</TD></TR>
<TR><TD>Nowak</TD><TD>Ewa</TD><TD>100</TD></TR>
</TABLE>

Listy wyliczeniowe numerowane i z punktorami graficznymi

Przykłady list wyliczeniowych

  1. Element 1
  2. Element 2
  3. Element 3

Zapis w/w listy:
<OL TYPE=1>
<LI>Element 1</LI>
<LI>Element 2</LI>
<LI>Element 3</LI>
</OL>

  1. Element 1
  2. Element 2
  3. Element 3

Zapis w/w listy:
<OL TYPE=A>
<LI>Element 1</LI>
<LI>Element 2</LI>
<LI>Element 3</LI>
</OL>

  1. Element 1
  2. Element 2
  3. Element 3

Zapis w/w listy:
<OL TYPE=a>
<LI>Element 1</LI>
<LI>Element 2</LI>
<LI>Element 3</LI>
</OL>

  1. Element 1
  2. Element 2
  3. Element 3

Zapis w/w listy:
<OL TYPE=I>
<LI>Element 1</LI>
<LI>Element 2</LI>
<LI>Element 3</LI>
</OL>

  • element;
  • element;
  • element.

Zapis w/w listy:
<UL TYPE=square>
<LI>element</LI>
<LI>element</LI>
<LI>element</LI>
</UL>

  • element;
  • element;
  • element.

Zapis w/w listy:
<UL TYPE=disc>
<LI>element</LI>
<LI>element</LI>
<LI>element</LI>
</UL>

  • element;
  • element;
  • element.

Zapis w/w listy:
<UL TYPE=circle>
<LI>element</LI>
<LI>element</LI>
<LI>element</LI>
</UL>

1 termin
1 definicja
2 termin
2 definicja
Zapis w/w listy:
<DL>
<DT>1 termin</DT>
<DD>1 definicja</DD>
<DT>2 termin</DT>
<DD>2 definicja</DD>
</DL>

Dodatkowe znaczniki formatujące zapis

<PRE> ... tekst ... </PRE> - tekst jest pokazywany w przeglądarce zuwzględnieniem wszystkich odstępów i tabulacji. Stosowanie tego znacznika jest szczególnie przydatnedo przedstawiania np. zapisów źródłowych programów.

<DIV> ... tekst ... </DIV> - znacznik ten pozwala formatować wydzielone nim bloki tekstu. Przykładowo:

  • <DIV align="center"> - wypośrodkowanie;
  • <DIV align="left"> - wyrównanie do lewego marginesu;
  • <DIV align="right"> - wyrównanie do prawego marginesu.

<!-- ... komentarz ... --> - znacznik pozwala dołączyć komentarze do dokumentu HTML, które nie są wyświetlane przez przeglądarkę.

Odsyłacze hipertekstowe

Odsyłacze hipertekstowe <A> anchor </A>
1Do oznaczonych miejsc w dokumencie<A HREF="#nazwa"> Nazwa miejsca </A>
Oznaczenie miejsca:
<A NAME="nazwa"> </A>
2Do innych dokumentów na tym samym serwerze<A HREF="dokument.html"> Dokument </A>
3Do dokumentów na dowolnym serwerze<A HREF="http://www.pur.l.pl/szachy.html"> Historia </A>
4Do pobierania plików nie obsługiwanych przez przeglądarkę<A HREF="plik.zip"> Zagadnienia </A>
5Do konta poczty elektronicznej<A HREF="mailto:puran@put.poznan.pl"> e-mail </A>

Także rysunek może pełnić rolę odsyłacza. Wystarczy kliknąć na rysunku, aby otworzyć edytor Meh.

< A href="meh.html"><IMG SRC="meha.gif"></A>

Ramki

<FRAMESET cols="20%,*">
  <FRAME src="spis.htm" name="ramka1">
  <FRAMESET rows="10%,*">
    <FRAME src="tytul.htm" name="ramka2">
    <FRAME src="zapis.htm" name="ramka3">
  </FRAMESET>
</FRAMESET>

Podział ekranu na niezależnie pokazywane obszary ilustruje tablica:

                    
                                                                                        
        
        
        
        
        
        
        
        
        

CSS

CSS

Cascading Style Sheet
Kaskadowe arkusze stylów

Kaskadowe arkusze stylów są standaryzowane przez konsorcjum W3C, które udostępnia ich specyfikację na stronie www.w3.org .

Zapis stylu i rodzaje selektorów

Zapis stylu składa się z elementów:

Selektor { cecha1: wartość; cecha2: wartość; ...}

Rodzaje selektorów:

  • Proste - są odpowiednikami znaczników, np.: H1 {color: sienna}

    Wykorzystanie selektora prostego

    .
  • Uniwersalne - obejmują grupy znaczników, np: BODY albo *.
  • Potomka - wyznaczają specyficzny styl w ramach innego (ang. span - rozpiętość), np.:H1 span{font-size:8pt}.
    <H1> Wykorzystanie <SPAN> stylu potomka </SPAN></H1>

    Wykorzystanie stylu potomka

  • Identyfikatory ID - także pozwalają nadawać indywidualny styl zdefiniowanym wcześniej selektorom, np: #purpura {color: purple}
    <H1 ID="purpura"> Wykorzystanie identyfikatora stylu </H1>

    Wykorzystanie identyfikatora stylu

  • Klasy - nadaje styl klasie selektorów oznaczonych nazwą, np; H1.nazwa {color: green}
    <H1 class="nazwa"> Zastosowanie stylu klasy </H1>

    Zastosowanie stylu klasy

  • Pseudoklasy
    • A:link - styl odsyłacza;
    • A:visited - styl odsyłacza po wykorzystaniu;
    • A:hover - styl odsyłacza zmienia wygląd po nasunięciu kursora na odsyłacz;
    • A:active - określa wygląd odsyłacza po kliknięciu ale przed zwolnieniem przycisku;
    • A:focus - określa wygląd wybranego z listy odsyłacza.
  • Pseudoelementy, np.:
    • P:first-letter {color: red; font-size: 30pt} - inicjał
    • P:first-line {color: red; font-size: 10pt} - styl pierwszej linijki akapitu;
    • P:before {content:"START"; color: yellow} - stały tekst przed akapitem;
    • P:after {content:"KONIEC"; color: yellow} - stały tekst po akapicie.

Uwaga: Selektory mogą być grupowane, np.: DIV, P {color: blue}.

Hierarchia znaczników i dziedziczenie stylów

Przykład hierarchii znaczników w dokumencie HTML
HTML
/\
HEADBODY
 /|\
 PTABLEDIV
 || 
 ULTR 
  |\
  THTD

Użyte w dokumencie jako selektory znaczniki stojące niżej w hierarchii dziedziczą styl od selektorów będących wyżej w hierarhii.

Osadzanie stylów w dokumencie i kaskadowość

  1. Definicja stylu przypisana do znacznika (stosowane rzadko),np.:
    <H2 style="color: red; font-size: 12pt"> Nagłówek formatowany przez CSS </H2>

    Nagłówek formatowany przez CSS

  2. Definicja stylu dla całego dokumentu, np.:
    <HEAD>
    ......
    <STYLE type="text/CSS">
    H2 {color: red; font-size: 14pt}
    </STYLE>
    </HEAD>

    <BODY>
    <H2> Zastosowanie </H2>
    ......
    </BODY>

    Zastosowanie

  3. Przypisanie do dokumentu HTML zewnętrznego pliku zawierającego opis stylów (plik.css):
    <LINK HREF="plik.css" REL="stylesheet" type="text/CSS">
    Parametr HREF² określa cel skoku dla odsyłacza.
    Parametr REL określa relację od HREF do znacznika <A> (kotwicy).
  4. Import zewnętrznego arkusza stylów - pozwala na ujednolicenie wyglądu dokumentów znajdujących się na różnych serwerach:
    <STYLE>
    <!--
    @import url("http://www.put.poznan.pl/~puran/ap.css")
    -->
    </STYLE>
    Uwaga: Nie wszystkie przeglądarki akceptują i poprawnie interpretują tego rodzaju polecenie.

¹Skrypt (ang. script) jest to zestaw jawnie zapisanych umownych poleceń kolejno wykonywanych przez inny program.

²HREF (ang. hipertext reference).