 |
|
Katalog Marzena Łyczko-Łuczak Informatyka, Artykuły Podstawy tworzenia stron WWW w języku HTML
 Podstawy tworzenia stron WWW w języku HTMLWSTĘPStrony 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.
Opracowanie: Marzena Łyczko-Łuczak Wyświetleń: 10235
Uwaga! Wszystkie materiały opublikowane na stronach Profesor.pl są chronione prawem autorskim, publikowanie bez pisemnej zgody firmy Edgard zabronione. |