Podstawy tworzenia stron WWW w języku HTML, wrzut na chomika listopad, Informatyka -all, INFORMATYKA-all, Informatyka-20 września 2004

WSTĘP

Strony WWW tworzone są w języku HTML, zwanym językiem znaczników hipertekstowych (ang. Hyper Text Markup Language). Tworzenie stron WWW polega na wprowadzaniu znaczników w wybranym edytorze, a następnie generowaniu kodów źródłowych w przeglądarce. Strony WWW można tworzyć zarówno w edytorze tekstowym (np. notatnik, edit z DOS'a, Microsoft Word) jak i w edytorze graficznym (np. FrontPage Express, Edytor Znaczników HTML).
Przy tworzeniu stron WWW musimy pamiętać o trzech zasadach:
- wszystkie nazwy, rozszerzenia piszemy zawsze małymi literami;
- w nazwach plików nie używamy spacji;
- nazwy plików piszemy bez polskich liter;

Jak utworzyć stronę WWW w języku HTML?
Aby utworzyć stronę w języku HTML należy zapisać jej kod w postaci znaczników w edytorze tekstowym (np. Notatniku), plik zapisać z rozszerzeniem. htm lub. html,
a następnie otworzyć plik w przeglądarce internetowej.

STRUKTURA PLIKU

Struktura pliku w języku HTML ma następujący wygląd:

<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>

<BODY>
</BODY>
</HTML>

CZĘŚĆ NAGŁÓWKOWA

Pomiędzy znacznikami nagłówkowymi <HEAD> </HEAD> umieszcza się dodatkowo:
- <TITLE> Nasza pierwsza strona </TITLE>. Tekst umieszczony pomiędzy tymi znacznikami będzie wyświetlony na pasku tytułowym przeglądarki.
- <META>, znacznik służący do definiowania strony kodowej. Nie posiada znacznika zamykającego.

Znaczenie znacznika META:
- <META http-equiv="content-type" content="text/html; charset=iso-8859-2"> Znacznik informujący przeglądarkę o obsłudze polskich znaków.
- <META NAME="Keywords" CONTENT="wyrazy"> Znacznik powodujący szybsze i łatwiejsze wyszukanie naszej strony w przeglądarce.
- <META NAME="Description" CONTENT="opis"> Znacznik wyświetlający "opis" strony po znalezieniu jej przez wyszukiwarkę.
- <META NAME="Author" CONTENT="dane osoby"> Znacznik informujący o autorze strony.
- <META NAME="Generator" CONTENT="edytor"> Znacznik ten informuje w jakim edytorze została utworzona strona.
- <META NAME="Language" CONTENT="pl"> Znacznik informuje w jakim języku została utworzona strona.

Przykład 1.
<HTML>
<HEAD>
<TITLE> Nasza pierwsza strona </TITLE>
<META name="language" content="pl">
</HEAD>
<BODY>
:
:
</BODY>
</HTML>

CIAŁO

W części <BODY> </BODY> umieszczamy tekst, rysunki i inne obiekty graficzne - wszystko to, co ma pojawić się na stronie.
Przykładowe użycie znacznika <BODY>:
1. <body bgcolor="należy podać kolor"> zmiana koloru tła;
2. <body background="nazwa pliku z rozszerzeniem"> obrazek ustawiony jako tło;
3. <body leftmargin="szerokość w pikselach"> ustalenie lewego marginesu;
4. <body topmargin="szerokość w pikselach"> ustalenie górnego marginesu;
5. <body rightmargin="szerokość w pikselach"> ustalenie prawego marginesu;

CZĘSTO UŻYWANE ZNACZNIKI

Pomiędzy <BODY> </BODY> umieszcza się różne znaczniki. Oto niektóre z nich.
- <P> paragraf </P>
- <BR> oznacza przejście do następnego wiersza (linii). Nie ma znacznika zamykającego.
- <B> pogrubienie </B>
- <I> kursywa </I>
- <U> podkreślenie </U>
- <STRIKE> przekreślenie </STRIKE>
- <MARQUEE> wędrujący tekst </MARQUEE>
- <SUP> indeks górny </SUP>
- <SUB> indeks dolny </SUB>
- <TT> stała szerokość niezależna od rzeczywistej szerokości czcionki </TT>
- <BIG> powiększenie </BIG>
- <SMALL> pomniejszenie </SMALL>
- <CITE> cytat </CITE>
- <EM> rodzaj pochylenia </EM>
- <Font> czcionka </FONT>
- <Font color="kolor"> tekst </FONT>
- <Font size="wielkość"> tekst </FONT>
- <Font face="krój czcionki"> tekst </FONT>

Przykład 2. Wyświetlenie tekstu o określonym kolorze, kroju i rozmiarze czcionki.
<Font color="red" face="Tahoma" size="3"> tekst </Font>

GRAFIKA

Chcąc wstawić do strony obrazek, należy użyć znacznika:

<IMG SRC="nazwa obrazka z rozszerzeniem">

Znacznik ten nie ma znacznika zamykającego. Zaleca się, aby pliki graficzne zapisywane były jako pliki typu GIF lub JPEG.

RODZAJ WYRÓWNANIA

ALIGN="left" - wyrównanie do lewej strony
ALIGN="right" - wyrównanie do prawej strony
ALIGN="center - wyśrodkowanie
ALIGN="justify" - wyjustowanie

Przykład 3 Wstawienie dowolnego rysunku i umieszczenie go na środku strony.
<P Align="center"> <img src="rysunek1.gif">

LINKI, czyli łącza hipertekstowe

Link, inaczej łącze hipertekstowe czy odsyłacz, jest to wyróżniony w pewien sposób obiekt (tekst, rysunek), po wybraniu którego zostanie otworzony inny dokument.
Do tworzenia hiperłącza do innego dokumentu służy następujący znacznik:

<A HREF="obiekt"> treść hiperłącza </A>

gdzie obiekt oznacza nazwę lub adres URL pliku, który ma zostać otwarty przez przeglądarkę, a treść hiperłącza to tekst lub rysunek aktywizujący hiperłącze.

Przykład 4
<A HREF="stronka1.htm"> POWRÓT</A>
Po kliknięciu na POWRÓT do okna przeglądarki zostanie załadowany dokument stronka1.

Przykład 5
<A HREF="http://republika.pl/sp45sc"> Wyszukaj</A>
Po kliknięciu na Wyszukaj w oknie przeglądarki pojawi się oficjalna strona Szkoły Podstawowej nr 45 w Sosnowcu.

Przykład 6
<A HREF="http://republika.pl/sp45sc"> <IMG SRC="lala.jpg"></A>
W tym przypadku strona Szkoły Podstawowej nr 45 w Sosnowcu, będzie aktywowana po kliknięciu na rysunek lala.jpg.

Przykład 7 Użycie opcji TARGET spowoduje, że dokument zostanie wyświetlony np. w nowym oknie przeglądarki.

<A HREF="stronka1.htm" TARGET="_blank"></A>

Przykład 8 Tworzenie odsyłacza do poczty elektronicznej (skrzynki e-mail):

<A HREF="mailto:adres@e_mail"> E-mail <A>

Przykład 9 Tworzenie odsyłacza do obrazka:

<A Href="mailto:adres@e_mail"> <IMG SRC="skrzynka.jpg"> </A>

TABELE

Tabele używamy po to, aby odpowiednio pooddzielać poszczególne części strony.

Definicja tabeli wygląda następująco: <TABLE> </Table>.

Definicja tabeli z wierszem <TR> </TR> i kolumną <TD> </TD>:

<TABLE> <TR> <TD> </TD> </TR> </TABLE>.

Przykład 10 Przykładowa tabela składająca się z trzech wierszy i dwóch kolumn:

<TABLE>
<tr>
<td> Kolumna1 w wierszu1 </td>
<td> Kolumna2 w wierszu1 </td>
</tr>
<tr>
<td>Kolumna1 w wierszu2 </td>
<td>Kolumna2 w wierszu2 </td>
</tr>
<tr>
<td>Kolumna1 w wierszu3 </td>
<td>Kolumna2 w wierszu3 </td>
</tr>
</table>

Dodatkowe możliwości tabeli.

- Parametr BACKGROUND definiuje obrazek, który ma zostać umieszczony jako tło tabeli.

Przykład 11. <TABLE BACKGROUND="tlo.gif">

- Parametr BGCOLOR oznacza kolor tła tabeli.

Przykład 12. <TABLE BGCOLOR="red">

- Parametr BORDER oznacza obramowanie, natomiast BORDERCOLOR oznacza jej kolor.

Przykład 13. <TABLE BORDER=2 BORDERCOLOR="yellow">

- Parametr CELLPADDING definiuje odstęp pomiędzy tekstem, a ramką komórki, natomiast parametr CELLSPACING definiuje jej grubość.

Przykład 14. <TABLE CELLPADDING="10" CELLSPACING="5">

- Szerokość tabeli definiujemy poprzez parametr WIDTH, który może przyjmować wartość wyrażoną w procentach (WIDTH=75%) lub pikselach (WIDTH=400).

Przykład 15. <TABLE WIDTH=400>

PUBLIKACJA STRONY W INTERNECIE

Aby nasza strona była dostępna dla innych należy umieścić ją na serwerze WWW. Do tego celu najczęściej wykorzystuje się protokół FTP i odpowiednie oprogramowanie klienta FTP. Przed rozpoczęciem przesyłania należy zgromadzić następujące dane: adres serwera, identyfikator użytkownika oraz hasło dostępu.

POWODZENIA.