HTML - wykład

HTML - formatowanie tekstu, listy wypunktowane i numerowane, tabele

I. Przygotowanie konta do tworzenia stron internetowych

Swojemu katalogowi domowemu nadaj uprawnienia rwx--x--x

W swoim katalogu domowym utwórz katalog o nazwie public_html i nadaj mu uprawnienia rwx--x--x

Plik zawierający kod źródłowy strony internetowej napisany w HTML musi być umieszczony w katalogu public_html (lub jego podkatalogach), musi mieć rozszerzenie html (lub htm) i uprawnienia rw-r--r--

Dostęp do pliku z poziomu przeglądarki internetowej:

serwer/~nazwaUżytkownika/nazwaPliku.html

ie.ae.krakow.pl/~iksiński/mojastrona.html

II. Elementy języka HTML

1. Struktura dokumentu w HTML

W kodzie języka HTML wykorzystywane są znaczniki:

Znaczniki zawarte są pomiędzy znakami < i >

Większość znaczników składa się z dwóch części: otwierający i zamykający.

W znaczniku zamykającym po znaku < występuje slash /

Struktura pliku HTML składa się z rozłącznych części, m.in.:

nagłówka (między znacznikami <HEAD> </HEAD>) zawierającego różne definicje (np. sposób kodowania znaków, słowa kluczowe, funkcje w języku skryptowym, itp.),

elementu body (<BODY> </BODY>) zawierającego definicję strony, czyli wszystko to, co ma być wyświetlone w przeglądarce.

Ustalanie koloru tekstu i tła jako przykład elementów, które można umieścić w nagłówku między znacznikami BODY:

bgcolor=”#KolorTłaSzesnastkowo”

text=”#KolorTekstuSzesnastkowo”

Numer koloru to sześć cyfr - każda oznacza poziom nasycenia RGB (czerwony, zielony, niebieski).

<body bgcolor=”#FF0000” text=”#00FF00”> - zielony tekst na czerwonym tle

Kolor można także podać w języku angielskim, np.:

2. Wybrane znaczniki:

Akapity
<P> Tekst </P> Tekst wpisany wewnątrz tych znaczników jest akapitem

Znak końca wiersza
<BR> w miejscu, gdzie wstawimy ten znacznik nastąpi przejście do nowego wiersza

Linia pozioma
<HR>

Nagłówki. jest ich sześć rodzajów, oznaczanych jako:
<H1> Tekst </H1>
...
<H6> Tekst </H6>
Tekst umieszczony wewnątrz tych znaczników jest wyróżniony, a jego wielkość zależy od poziomu nagłówka (H1 - tekst największy, H6 najmniejszy)

wypunktowane - każdy element listy zaczyna się określonym znakiem, zwykle kropką,
numerowane - każdy element listy jest numerowany kolejną liczbą począwszy od 1
Listy wypunktowane tworzy się następująco:
<UL>
<LI> element listy (dowolny tekst)
<LI> element listy
...
</UL>
Listy numerowane tworzy się identycznie. Zamiast znacznika <UL> (</UL>) należy użyć <OL> (</OL>)

Atrybuty tekstu
<i> Tekst </i>
Tekst będzie pochylony (i - italic)
<b> Tekst </b>
Tekst będzie pogrubiony (b - bold)
<u> Tekst </u>
Tekst będzie podkreślony (u - underline)

Wyrównanie akapitu
<p align="center"> Tekst </p>
Tekst jest akapitem (użyty znacznik <p>) i będzie wycentrowany
<p align="left"> Tekst </p>
Tekst jest akapitem i będzie dosunięty do lewego marginesu
<p align="right"> Tekst </p>
Tekst jest akapitem i będzie dosunięty do prawego marginesu

Parametry czcionki
<font size="4"> Tekst </font>
Tekst zostanie napisany wielkością 4
<font color="green"> Tekst </font>
Tekst będzie napisany kolorem zielonym

Tabele
Definicja tabeli jest umieszczona między znacznikami
<TABLE> </TABLE>
Znacznik otwierający może mieć parametry:
Border - grubość (w pikselach) linii rysowanych w tabeli
Frame - obwódka tabeli (border oznacza wszystkie cztery brzegi)
Rules - linie, które będą rysowane (all - między kolumnami i wierszami, rows - tylko między wierszami, cols - tylko między kolumnami, none - żadne)
<TR> </TR> znaczniki początku (końca) wiersza
<TH> tekst - nagłówek kolumny
<TD> tekst - zawartość pojedynczej komórki
Aby utworzyć komórkę, która odnosi się do kilku kolumn należy użyć atrybutu colspan:
<TH colspan="3"> Tekst - Tekst zostanie napisany w komórce, która zostanie rozciągnięta na trzy kolumny
Aby utworzyć wiersz, który odnosi się do kilku wierszy należy użyć atrybutu rowspan w identyczny sposób jak colspan.
Przykład:
W poniższym przykładzie element &nbsp oznacza spację. Należy ją wstawiać do pustej komórki tabeli.
<Table border=”1” frame=”border” rules=”all”>
<TR>
<TD align="center" colspan="3"> Nagłówek tabeli</TD>
<TR>
<TR>
<TD>&nbsp
<TD>Tytuł kolumny II
<TD> Tytuł kolumny III
<TR>
<TD> Tytuł wiersza
<TD align=”center”>2
<TD align=”center”>7
<TR>
</TABLE>
Da w przeglądarce tabelę:

Odnośniki (łącza)

- odnośniki wewnętrzne
Na stronie występuje łącze, którego kliknięcie powoduje wyświetlenie innego fragmentu tej samej strony.
Odnośnik taki składa się z dwóch części:
• łącza, które należy kliknąć, aby wyświetlić inną część strony,
• wskaźnika umieszczonego w miejscu, do którego przenoszone jest wyświetlanie po kliknięciu łącza.
Tworzenie:
Łącze, które należy kliknąć:
<A HREF="#nazwa"> Tekst </A>
Uwaga: Przed nazwą musi być #.

Tekst będzie podkreślony. Po kliknięciu tekstu wyświetlanie zostanie przemieszczone do miejsca docelowego (wskaźnika).
Wskaźnik, od którego wyświetlana będzie zawartość strony po kliknięciu łącza:
<A NAME = "nazwa">
Łącze i wskaźnik muszą mieć taką samą nazwę.

- odnośniki zewnętrzne
Na stronie występuje łącze, którego kliknięcie otwiera inną stronę o adresie wskazanym w łączu.
Tworzenie:
<A HREF="http://Adres Strony Która Ma Zostać Wyświetlona"> Tekst, który będzie podkreślony </A>
Aby strona była otwierana w nowym oknie przeglądarki, należy użyć parametru target z atrybutem _blank:
<A HREF="http://adresStrony" target="_blank"> Tekst, który będzie podkreślony </A>

Nagłówek tabeli
	Tytuł kolumny II	Tytuł kolumny III
Tytuł wiersza	2	7