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
na przykład:
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:
Np.:
<HTML>
<HEAD>
<BODY>
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 /
<HTML> </HTML>
<HEAD> </HEAD>
<P> </P>
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).
Przykład:
<body bgcolor=”#FF0000” text=”#00FF00”> - zielony tekst na czerwonym tle
#000000 - czarny
#FFFFFF - biały
Kolor można także podać w języku angielskim, np.:
bgcolor = ”red”
text = ”green”
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)
Listy
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   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> 
<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ę:
Nagłówek tabeli |
|||
|
Tytuł kolumny II |
Tytuł kolumny III |
|
Tytuł wiersza |
2 |
7 |
|
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>
Komentarze
<!--
Tu jest komentarz
-->
3