TWORZENIE STRON WWW. Zasady opisu stron w języku HTML:

Transkrypt

1 TWORZENIE STRON WWW Strony WWW definiowane są za pomocą języków opisu stron. Najpopularniejszym językiem tego typu jest język HTML (Hyper Text Markup Language). Zasady opisu stron w języku HTML: - opis strony ma postać pliku tekstowego i zawiera: informacje tekstowe wyświetlane na stronie, instrukcje określające sposób wyświetlenie elementów strony WWW (tzw. znaczniki - ang. tags), odwołania do obiektów, które mają być umieszczone na stronie (grafika, aplety), odnośniki do innych zasobów. - przeglądarka stron WWW interpretuje i wyświetla plik zawierający opis strony. Metody tworzenia stron WWW: - poprzez bezpośrednią edycję plików w języku HTML, - poprzez użycie edytorów stron WWW.

2 UDOSTĘPNIANIE STRONY HTML 1. określenie praw dostępu drwx--x--x (711) dla katalogu domowego użytkownika (np. nowakj), np. $ cd ~ $ chmod utworzenie w katalogu domowym użytkownika katalogu o nazwie public_html, np. $ mkdir public_html 3. określenie praw dostępu drwxr-xr-x (755) dla katalogu public_html, np. $ cd public_html $ chmod umieszczenie (skopiowanie lub przesłanie protokołem FTP) w katalogu public_html pliku (plików) strony. Plik, który ma być wyświetlany jako pierwszy powinien mieć nazwę index.html. 5. określenie praw dostępu -rwxr-xr-x (755) dla plików znajdujących się w katalogu public_html, np. $ cd ~ $ cd public_html $ chmod 755 * 6. przeglądanie utworzonej strony jest możliwe po wpisaniu adresu w postaci np.

3 PODSTAWY JĘZYKA HTML Przykładowa strona w języku HTML (plik źródłowy) <!doctype html public "-//w3c//dtd html 4.01 transitional//en"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="description" content="jest to strona testowa"> <title>formatowanie tekstu</title> </head> <body> <h1>nagłówek 1</h1> <h2>nagłówek 2</h2> <h3>nagłówek 3</h3> <h4>nagłówek 4</h4> <h5>nagłówek 5</h5> <h6>nagłówek 6</h6> Tekst normalny<br> <b>tekst pogrubiony</b><br> <i>tekst pochyły</i><br> <u>tekst podkreślony</u><br> <hr width="100%"> Poniżej znajduje się lista: <ul> <li>opcja 1</li> <li>opcja 2</li> <li>opcja 3</li> </ul> <hr width="100%"> Poniżej znajduje się lista numerowana: <ol> <li>element 1</li> <li>element 2</li> <li>element 3</li> </ol> <hr width="100%"> Wyrównanie do lewej strony <center>centrowanie</center> <div align= right >Wyrównanie do prawej strony</div> <hr width="100%"> </body> </html>

4 Przykładowa strona w języku HTML (efekt w przeglądarce)

5 Znaczniki Identyfikacja poszczególnych elementów strony odbywa się na podstawie specjalnych znaczników. - znacznik składa się z samej nazwy lub nazwy i listy odpowiednich atrybutów, - znaczniki ujęte są w nawiasy trójkątne, - większość elementów HTML posiada znacznik otwierający i zamykający, - rozróżniamy znaczniki: strukturalne informacyjne tekstowe listy tabel formularzy pozostałe struktura znaczników: <znacznik atrybut1= wartość1 atrybut2= wartość2 > Zawartość </znacznik> np. <font color="green">to jest zielony tekst</font>

6 Deklaracja typu dokumentu Deklaracja typu dokumentu (ang. Document Type Definition) określa standard użytego na stronie języka opisowego. deklaracja typu musi się pojawić na samym początku strony, możliwe jest podanie adresu URL do zastosowanego DTD. Dla języka HTML w wersji 4.01 istnieją trzy różne wersje deklaracji DTD: <!doctype html public "-//w3c//dtd html 4.01//en" " Strict DTD (ścisły), dla stron napisanych zgodnie z deklarowanym standardem i nie dopuszczający innych znaczników niż opisane w standardzie. <!doctype html public "-//w3c//dtd html 4.01 transitional//en" " Transitional DTD (przejściowy), dla stron napisanych zgodnie z deklarowanym standardem 4.01 i dopuszczający inne znaczniki, np. niezalecane przez organizację W3C. <!doctype html public "-//w3c//dtd html 4.01 frameset//en" " Frames DTD (dla ramek), dla stron napisanych zgodnie z deklarowanym standardem i dopuszczający inne znaczniki - stosowany gdy strona zawiera ramki.

7 Znaczniki strukturalne budowa strony - znacznik otwierający i zamykający dokument HTML: <html>... </html> - znacznik otwierający i zamykający nagłówek strony: <head>... </head> - znacznik otwierający i zamykający zawartość strony: <body>... </body> Przykładowo: <html> <head> <title>tytuł strony</title> </head> <body> To jest moja strona </body> </html>

8 Znacznik meta - szczegółowa informacja o zawartości dokumentu. Atrybuty: http-equiv zmienne systemowe name zmienne użytkownika content zawartość zmiennej <meta http-equiv= content-type content=... > - rodzaj dokumentu i strona kodowa <meta name= author content=... > autor dokumentu <meta name= keywords content=... > słowa kluczowe reprezentujące treści zawarte w dokumencie <meta name= description content=... > krótki opis zawartości dokumentu <title>...</title> tytuł dokumentu Przykład: <meta http-equiv="content-type" content="text/html; charset=iso "> <meta name="keywords" content="koty, psy, porady, hodowla"> <meta name="author" content="jan Nowak"> <title>strona domowa Jana Nowaka</title>

9 Podstawowe znaczniki tekstowe - formatowanie tekstu <b>...</b> - pogrubienie tekstu, np. <b>tekst pogubiony</b> <i>...</i> - pochylenie tekstu, np. <i>tekst pochylony</i> <u>...</u> - podkreślenie tekstu, np. <u>tekst podkreślony</u> <center>...</center> - wyśrodkowanie tekstu, np. <center>tekst na środku strony</center> <p>...</p> - nowy akapit (paragraf) tekstu, np. <p>to jest oddzielny paragraf tekstu</p> <font face= nazwa czcionki >... </font> - określenie rodzaju wyświetlanej czcionki (np. Times New Roman, Courier, Arial, Verdana, Tahoma), np. <font face= Arial >Tekst pisany Arialem</font> Dodatkowe atrybuty znacznika <font>: color=... kolor czcionki size=... rozmiar czcionki (od 1 do 7)

10 Przykładowo: <font face= Arial color= red size= 5 > Duży czerwony napis pisany czcionką Arial </font> <h1>...</h1> - nagłówek tekstu pierwszego poziomu, np. <h1>rozdział 1</h1>... <h1>rozdział 2</h1> <h2>...</h2> - nagłówek tekstu drugiego poziomu, np. <h2>rozdział 1.1</h2>... <h2>rozdział 1.2</h2> <! > - komentarz nie wyświetlany na stronie, np.  <br> - znacznik końca wiersza <hr> - pozioma linia (używana najczęściej jako element rozdzielający fragmenty tekstu), np. <hr width= 80% > Łączenie znaczników Przykładowo kod: <p><b><u>adam</u></b> <font face= Arial > dziś ma </font><i>urodziny</i></p> będzie wyglądać: Adam dziś ma urodziny

11 Znaczniki list Lista wypunktowana: <ul> <li>punkt pierwszy</li> <li>punkt drugi</li> <li>punkt trzeci</li> </ul> dodatkowy atrybut znacznika <ul>: type=... kształt znaku wypunktowania (disc, circle, square) Lista ponumerowana: <ol> <li>element pierwszy</li> <li>element drugi</li> <li>element trzeci</li> </ol> dodatkowy atrybut znacznika <ol>: type=... - styl numeracji listy (1 cyfry arabskie, A duże litery, a małe litery, I duże cyfry rzymskie, i małe cyfry rzymskie)

12 Odsyłacze do innych zasobów (HREF) Podstawowe pojęcia Odsyłacz (odnośnik) - HREF - Hypertext Reference Hipertekst - tekst zawierający odsyłacze do innych zasobów Adres URL (Uniform Resource Locator) - Uniwersalny identyfikator Zasobów Budowa adresu URL: protokół:// adres_serwera/katalog/plik protokół - metoda dostępu do zasobu (ftp, http, https, file) Przykłady adresów URL: ftp://kinga.cyf-kr.edu.pl/mirror/spis.txt Znaczniki odsyłaczy <a href= >...</a> odsyłacz do adresów absolutnych (np. ), np. <a href= >Wizard</a> <a href=...plik.html >...</a> odsyłacz do adresów relatywnych (adres relatywny określa położenie pliku względem bieżącej strony, np. wydzialy.html,../biblioteka/opis.html ), np. <a href=../zadania.html >Zadania do zrobienia</a>

13 <a href="#nazwa">...</a> odsyłacz do innych miejsc na tej samej stronie, np. <a href="#poczatek">początek strony</a> Uwaga ten odsyłacz wymaga zdefiniowania w dokumencie etykiety w postaci: <a name="poczatek"></a> <a href="mailto:adres_mailowy">...</a> odsyłacz uruchamiający program pocztowy, np. <a href= mailto:nowakj@wp.pl >Napisz do mnie</a> odsyłacz w formie obrazu (pliku graficznego), np. <a href= > <img src= images/uczelnia.jpg ></a> <a href="adres URL" target= _blank >...</a> odsyłacz uruchamiający podany adres w nowym oknie przeglądarki, np. <a href= target= _blank >Onet</a> Pliki graficzne (obrazy) w dokumentach HTML <img src= adres URL > znacznik wstawiający na stronę plik graficzny (standardowe formaty plików to: gif, jpg, bmp, png) ze wskazanego miejsca, np. <img src="grafika/zdjecie1.jpg">

14 dodatkowe atrybuty znacznika <img>: alt= tekst tekst pojawiający się zamiast obrazka jeżeli brak możliwości jego wyświetlenia (również tekst w dymku ), align=... umiejscowienie grafiki (np. left, right,top itd.), width=... szerokość grafiki (w pikselach), height=... wysokość grafiki (w pikselach), vspace=... odległość grafiki od innych elementów (pionowa), hspace=... odległość grafiki od innych elementów (pozioma), border=... wielkość otaczającej grafikę ramki (obramowania). Przykładowo: <img src="aparat.jpg" alt="zdjęcie - Kyocera Finecam S3R" align="left" width="90" height="75" vspace="5" hspace="30" border="3">

15 Znaczniki tabel <table>... </table> znaczniki definiujące tabelę <tr>... </tr> znacznik definiujący wiersz <td>... </td> znacznik definiujący komórkę (kolumnę) w wierszu dodatkowe atrybuty znacznika <table>: border=... wielkość obramowania tabeli, width=... szerokość tabeli (piksele lub procenty), height=... wysokość tabeli (piksele lub procenty), cellspacing=... odległość między komórkami, cellpadding=... marginesy dla komórek, align=... - wyrównanie tabeli, bgcolor=... - kolor tła tabeli. dodatkowe atrybuty znacznika <td>: align=... poziome wyrównanie danych w komórkach, valign=... pionowe wyrównanie danych w komórkach, width=... szerokość komórki, bgcolor=... kolor tła komórki, rowspan=... łączenie kilku komórek (pionowe), colspan=... łączenie kilku komórek (poziome).

16 Przykładowa tabela: <table border= 1 width="100%" align= center cellpadding= 5 height= 200 > <tr> <td align= right > Ala </td> <td align= center > Ewa </td> </tr> <tr> <td valign= top > Adam </td> <td valign= bottom > Jurek </td> </tr> <tr> <td colspan= 2 bgcolor= gray align= center > Roman </td> </tr> </table>

17 Programy do tworzenia stron WWW 1. Notatnik 2. vi

18 3. Pajączek Macromedia Dreamweaver -