P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 1 Struktura strony www w jezyku html <html > <title>tytuł strony</title> Tu wpisuje się treśd strony Cała treśd która znajduje się pomiędzy oraz (w szablonie powyżej) jest nazywana nagłówkiem dokumentu (treśd nagłówkowa). W nagłówku dokumentu powinny się znaleźd: 1. Słowny opis, co znajduje się na stronie internetowej. Tekst który tutaj się znajduje pojawi się w wyszukiwarce, po odnalezieniu przez nią strony. Kod html: <meta name="description" content="tu wpisz opis zawartości strony" /> 2. Słowa kluczowe których można użyć w wyszukiwarce sieciowej, aby odnaleźć stronę. Kod html: <meta name="keywords" content="tu wpisz wyrazy kluczowe rozdzielone przecinkami" /> 3. Deklaracja języka kodowania Kod html: <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> 4. Pomiędzy <title> oraz </title> należy wpisać tytuł, jaki będzie nosiła strona. Może on zawierać dowolny tekst, zaleca się jednak, aby nie był zbyt długi (najwyżej kilka wyrazów). Powinien on odnosić się do treści zawartych na danej stronie. Tytuł pojawia się na belce tytułowej przeglądarki internetowej (na samej górze okna programu). 5. Język strony - pozwala podać, w jakim języku jest napisana strona internetowa Kod html: <meta http-equiv="content-language" content="pl" /> 6. Autor - pozwala podać informację, kto jest autorem strony. Kod html: <meta name="author" content="tu wpisz swoje imię i nazwisko" /> 7. Adres zwrotny - pozwala podać zwrotny adres poczty elektronicznej e-mail, na który można odpowiadać. Kod html: <meta http-equiv="reply-to" content="twój adres e-mail" />
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 2 Przykładowa struktura strony WWW może wyglądad tak: <html > <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <meta name="description" content="strona gimnazjum" /> <meta name="keywords" content="gimnazjum, szkoła, edukacja" /> <meta http-equiv="content-language" content="pl" /> <meta name="author" content="jan Kowalski" /> <meta http-equiv="reply-to" content="kowalski@onet.poczta.pl" /> <title>strona główna gimnazjum</title> Tu wpisuje się treśd strony Wszystko pomiędzy oraz stanowi tzw. ciało dokumentu (treśd właściwa) treśd strony widoczną w przeglądarce. <html > To jest moja pierwsza strona internetowa W powyższym przykładzie po otworzeniu strony w przeglądarce pojawi się tam napis: To jest moja pierwsza strona internetowa
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 3 Kolor strony Jeśli chcemy ustalić kolor tła strony możemy użyć dodatkowych atrybutów dla znacznika. Atrybuty te (bgcolor="kolor" ) wpisujemy wewnątrz znacznika otwierającego. Jako kolory mozna podawać angielskie nazwy kolorów lub kod koloru RGB, np czerwony red lub #FF0000 Kod html: <body bgcolor= red > lub <body bgcolor= #FF0000 > <html > <body bgcolor= yellow > To jest moja pierwsza strona internetowa Efekt widoczny w przeglądarce: Formatowanie tekstu na stronie WWW Przeglądarki internetowe ignorują klawisz ENTER, dlatego jego użycie w edytorze w którym piszemy stronę nic nie daje, np.: <html > <body > To jest pierwsza linijka tekstu. To jest druga linijka tekstu. To jest trzecia linijka tekstu.
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 4 Wyróżniony tekst w przykładzie powyżej pomimo, że został napisany w trzech linijkach wyświetli się tak: Do łamanie wiersza - przejście do nowej linijki używamy znacznika <br>. Natomiast jeżeli chcemy pisad nowy akapit (nową myśl) używamy znacznika <p>, np. <body > To jest pierwsza linijka tekstu.<br> To jest druga linijka tekstu.<br> To jest trzecia linijka tekstu.<br> Efekt w przeglądarce: Wyróżnienie tekstu: <b> znacznik ten pozwala pogrubić (wytłuścić) część tekstu, który się wewnątrz niego znajduje tekst<b>tekst</b>tekst efekt: tekst tekst tekst To samo działanie ma znacznik <strong></strong> <u> znacznik ten pozwala podkreślić część tekstu, która się wewnątrz niego znajduje tekst<u>tekst</u>tekst efekt: tekst tekst tekst <i> znacznik ten pozwala pochylić część tekstu, która się wewnątrz niego znajduje tekst<i>tekst</i>tekst efekt: tekst tekst tekst <strike> znacznik ten pozwala przekreślić część tekstu, która się wewnątrz niego znajduje
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 5 tekst<strike>tekst</strike>tekst efekt: tekst tekst tekst Znaczniki te można stosowad razem, np. Tekst <u><i>tekst</i> <b>tekst tekst tekst tekst</b> tekst</u> tekst tekst Efekt: Tekst tekst tekst tekst tekst tekst tekst tekst tekst <body > Tekst tekst <strike>to jest tekst przekreślony</strike> tekst tekst<br> Tekst tekst <i>ten fragment jest pochylony</i>tekst tekst<br> Tekst tekst <b>ten fragment jest pogrubiony</b>tekst tekst<br> Tekst tekst <u>ten fragment jest podkreślony</u>tekst tekst<br> <strike>w tym <u>zdaniu</strike> są <b>zastosowane różne znaczniki</u> wyróżnienia</b> <i>tekstu. </i><br> Efekt w przeglądarce: <font color= kolor ></font> znacznik ten pozwala zmienić kolor części tekstu, która się wewnątrz niego znajduje Tekst <font color= red >tekst</ font >tekst efekt: Tekst tekst tekst <font size= wielkośd czionki ></font> znacznik ten pozwala zmienić wielkość czcionki części tekstu, która się wewnątrz niego znajduje Tekst <font size= 6 >tekst</ font >tekst efekt: Tekst tekst tekst <font face= nazwa czcionki ></font> znacznik ten pozwala zmienić rodzaj czcionki części tekstu, która się wewnątrz niego znajduje Tekst <font face= Monotype Corsiva >tekst</ font >tekst efekt: Tekst tekst tekst
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 6 Znaczniki te można ze sobą łączyd: <font size= 6 >To jest przykład, który jest napisany większym rozmiarem czcionki. <br></font><font face= Monotype Corsiva > <font color= red >Ta częśd jest pisana czcionką Monotype Corsiva i w kolorze czerwonym,</font><br> a ta tylko czcionką Monotype Corsiva.</font> Efekt: To jest przykład, który jest napisany większym rozmiarem czcionki. Ta część jest pisana czcionką Monotype Corsiva i w kolorze czerwonym, a ta tylko czcionką Monotype Corsiva. <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> Tekst <font color="red">tekst czerwony</font>tekst<br> Tekst <font size="6">tekst większy</font>tekst<br> Tekst <font face="castellar">tekst pisany czcionką Castellar </font>tekst<br> <font size="6">to jest przykład, który jest napisany większym rozmiarem czcionki. <br></font><font face="monotype Corsiva"> <font color="red">ta częśd jest pisana czcionką Monotype Corsiva i w kolorze czerwonym,</font><br> a ta tylko czcionką Monotype Corsiva.</font> Efekt w przeglądarce:
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 7 Do zmiany wielkości czcionki (nagłówków ) służą znaczniki od <h1></h1> do <h6></h6> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <h6>to jest nagłówek h6</h6><br> <h5>to jest nagłówek h5</h5><br> <h4>to jest nagłówek h4</h4><br> <h3>to jest nagłówek h3</h3><br> <h2>to jest nagłówek h2</h2><br> <h1>to jest nagłówek h1</h1><br> Efekt w przeglądarce: Wstawianie listy numerowanej na stronę WWW <ol></ol> znacznik tworzy listę uporządkowaną <li></li> znacznik kolejnego elementu listy <ol>lista wypunktowana <li>punkt nr 1</li> <li>punkt nr 2</li> <li>punkt nr 3</li> </ol> Efekt: 1. Punkt nr 1 2. Punkt nr 2 3. Punkt nr 3
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 8 <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <ol>lista wypunktowana <li>punkt nr 1</li> <li>punkt nr 2</li> <li>punkt nr 3</li> </ol> Efekt w przeglądarce: Wstawianie listy wypunktowanej na stronę WWW <ul></ul> znacznik tworzy listę wypunktowaną <li></li> znacznik kolejnego elementu listy <ul>lista wypunktowana <li>punkt nr 1</li> <li>punkt nr 2</li> <li>punkt nr 3</li> </ul> Efekt: Punkt nr 1 Punkt nr 2 Punkt nr 3
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 9 <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <ul>lista wypunktowana <li>punkt nr 1</li> <li>punkt nr 2</li> <li>punkt nr 3</li> </ul> Efekt w przeglądarce: Pozycjonowanie akapitów (tekstu) <p align= left > wyrównanie do lewej <p align= right > wyrównanie do prawej <p align= center >wyśrodkowanie <p align= justify > wyrównanie do obu stron
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 10 <p align="center">ten tekst jest wyśrodkowany <p align="left">ten tekst jest wyrównany do strony lewej <p align="right">ten tekst jest wyrównany do strony prawej <p align="justify">ten tekst jest wyrównany do obu stron (wyjustowany). Ten tekst jest wyrównany do obu stron (wyjustowany). Ten tekst jest wyrównany do obu stron (wyjustowany). Ten tekst jest wyrównany do obu stron (wyjustowany). Efekt w przeglądarce Wstawianie grafiki (obrazków) rozszerzenie plików graficznych powinno byd.jpg lub.gif <img src= ścieżka dostępu do obrazka/nazwa.rozszerzenie > Jeżeli chcemy na stronie umieścid przykładową grafikę której ścieżka dostępu przedstawia się tak jak poniżej, kod html będzie wyglądał następująco: <img src= D:\strona www\grafika\obrazek1.jpg >
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 11 <img src="d:\strona www\grafika\obrazek1.jpg"> Efekt w przeglądarce Jeżeli grafika znajduje się w tym samym folderze co strona to kod html wyglada nastepująca: <img src= nazwa.rozszerzenie > np. <img src= obrazek1.jpg > Jeżeli chcemy by po najechaniu myszką na obrazek pojawił się tekst należy dopisad fragment kodu: Alt= tekst widoczny po najechaniu na obrazek Np. <img src= obrazek1.jpg alt= to jest obraz Leonarda da Vinci > <img src="obrazek1.jpg" alt= To jest obraz Leonarda da Vinci >
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 12 Efekt w przegladarce Grafikę opisuje równiez atrybut border= wartośd grubośd ramki wokół obrazka. Jeżeli border równa się 0 ramki wokół obrazka nie ma. Np. <img src="obrazek1.jpg" alt= To jest obraz Leonarda da Vinci border= 4 > Widoczna ramka wokół obrazka
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 13 Ustalanie wielkości obrazka. Obrazek domyślnie wstawia się na stronę w rozmiarach rzeczywistych. Jeżeli chcemy by na stronie WWW posiadał konkretne wymiary możemy zmienid je w programie graficznym lub określid rozmiar obrazka na stronie WWW w kodzie html. width= x szerokośd podana w pikslach height= y wysokośd podana w pikslach Przykład kodu: <img src="obrazek1.jpg" width= 100 height= 141 alt= To jest obraz Leonarda da Vinci border= 0 > Pozycjonowanie obrazka atrybut align= pozycja (left lewa, right prawa) Przykład kodu: <img src="obrazek1.jpg" width= 100 height= 141 align= right alt= To jest obraz Leonarda da Vinci border= 0 > <center></center> - wyśrodkowanie obrazka np. <center><img src="obrazek1.jpg" width= 100 height= 141 alt= To jest obraz Leonarda da Vinci border= 0 ><br></center> <img src="obrazek1.jpg" width= 100 height= 141 align= right alt= To jest obraz Leonarda da Vinci border= 0 ><br> <center><img src="obrazek1.jpg" width= 100 height= 141 alt= To jest obraz Leonarda da Vinci border= 0 ></center><br> <img src="obrazek1.jpg" width= 100 height= 141 align= left alt= To jest obraz Leonarda da Vinci border= 0 ><br> Efekt w przeglądarce: Obrazek otoczony tekstem
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 14 <p align="justify"><img src="obrazek1.jpg" width="100" height="141" alt="to jest obraz Leonarda da Vinci" align="right" border="o"><img src="obrazek1.jpg" width="100" height="141" alt="to jest obraz Leonarda da Vinci" align="left" border="o">jakiś tekst. Jakiś tekst. Jakiś tekst.jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst.jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. <p align="justify"><img src="obrazek1.jpg" width="100" height="141" alt="to jest obraz Leonarda da Vinci" align="left" border="o">jakiś tekst. Jakiś tekst. Jakiś tekst.jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst.jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst.jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst.jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Jakiś tekst. Efekt w przeglądarce:
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 15 Odsyłacze do innych dokumentów. <a href= adres /nazwa.rozszerzenie > treśd odsyłacza</a> Np. <a href= http://www.onet.pl > idź do Onet</a> Jeżeli strony są w tym samym katalogu wystarczy zapis: <a href= nazwa.rozszerzenie > treśd odsyłacza</a> Np. <a href= strona2.html > idx do strony 2</a> <p><a href= strona2.html > idźdo strony 2</a> <p><a href= http://www.onet.pl > idź do Onet</a> Efekt w przegladarce: atrybut title="tekst" powoduje, że po wskazaniu odsyłacza myszką, wyświetli się tekst pomocniczy w "dymku" narzędziowym np.: <a href= http://www.onet.pl title="portal internetowy onet" > idź do Onet</a>
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 16 Obrazek jako odsyłacz: <a href= http://www.onet.pl title="portal internetowy onet" ><img src="rysunek.jpg" alt="onet.pl" border="0"></a> Tabelki <table></table> - otwarcie zamkniecie tabelki <tr></tr> - wiersz <td></td> komórka w wierszu Schemat tabelki <table> <tr> <td></td> </tr> </table> Przykład <table> <tr> <td>komórka 1 wiersz 1</td> <td>komórka 2 wiersz 1</td> </tr> <tr> <td>komórka 1 wiersz 2</td> <td>komórka 2 wiersz 2</td> </tr> </table>
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 17 Efekt w przeglądarce Do tabelki mają zastosowanie poznane wcześniej atrybuty: bgcolor, border, widtch, height. Tabelę można również wyrównad do strony lewej prawej i wyśrodkowad. Atrybuty te dla cełej tabelki stosuje się przy <table>, dla wiersza przy <tr>, a dla komórki przy <td>. Na tabelkach można opierad budowę strony WWW. <center> <table width="800" height="100" border="2"> <tr> <td >miejsce na logo </td> </tr> </table> <table width="800" height="100%" border="2"> <tr> <td width="150">menu główne<br>linki i odsyłacze</td> <td width="500">treśd właściwa</td> <td width="150">dodatkowe miejsce</td> </tr> </table> <table width="800" height="50" border="2"> <tr> <td >stopka strony: autor, aktualizacja itp</td> </tr> </table>
P r o j e k t o w a n i e s t r o n w w w w h t m l S t r o n a 18 Efekt w przeglądarce: Wyrównanie zawartości komórek i wierszy. Wyrównanie zawartości całego wiersza: <tr align= rodzaj valign= ustawienie >..</tr> Lub pojedynczej komórki: <td align= rodzaj valign= ustawienie >..</td> rodzaj "left" - wyrównanie zawartości (wiersza lub komórki) do lewej (domyślnie) "right" - wyrównanie zawartości do prawej "center" - wyśrodkowanie zawartości ustawienie "top" - ustawienie zawartości (wiersza lub komórki) na górze "bottom" - ustawienie zawartości na dole "middle" - ustawienie zawartości po środku (domyślnie)