Embed Size (px)
Citation preview
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 > <head> <title>tytuł strony</title> </head> <body> Tu wpisuje się treśd strony </body> </html> Cała treśd która znajduje się pomiędzy <head> oraz </head> (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 > <head>
<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="[email protected]" />
<title>Strona główna gimnazjum</title> </head> <body> Tu wpisuje się treśd strony </body> </html> Wszystko pomiędzy <body> oraz </body> stanowi tzw. ciało dokumentu (treśd właściwa) – treśd strony widoczną w przeglądarce. <html > <head> <title>moja strona</title> </head> <body> To jest moja pierwsza strona internetowa </body> </html> 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 <body>.
Atrybuty te (bgcolor="kolor" ) wpisujemy wewnątrz znacznika otwierającego <body>. 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 > <head> <title>moja strona</title> </head> <body bgcolor=”yellow”> To jest moja pierwsza strona internetowa </body> </html> 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 > <head> <title>moja strona</title> </head> <body > To jest pierwsza linijka tekstu. To jest druga linijka tekstu. To jest trzecia linijka tekstu. </body> </html>
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.
<title>moja strona</title> </head> <body > To jest pierwsza linijka tekstu.<br> To jest druga linijka tekstu.<br> To jest trzecia linijka tekstu.<br> </body> </html> 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 Przykład kodu html:
<title>moja strona</title> </head> <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> </body> </html> 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.
Przykład kodu html:
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2"> <title>moja strona</title> </head> <body> 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> </body> </html> 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>
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2"> <title>moja strona</title> </head> <body> <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> </body> </html> 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
Przykład kodu html:
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2"> <title>moja strona</title> </head> <body> <ol>Lista wypunktowana <li>Punkt nr 1</li> <li>Punkt nr 2</li> <li>Punkt nr 3</li> </ol>
</body> </html>
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
Przykład kodu html:
<html> <head> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2"> <title>moja strona</title> </head> <body> <ul>Lista wypunktowana <li>Punkt nr 1</li> <li>Punkt nr 2</li> <li>Punkt nr 3</li> </ul>
</body> </html> 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
Przykład kodu html:
<html>
<head>
<title>moja strona</title>
</head>
<body>
<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).
</body>
</html>
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
Przykład kodu html:
<html>
<head>
<title>moja strona</title>
</head>
<body>
<img src="D:\strona www\grafika\obrazek1.jpg">
</body>
</html>
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 ” > Przykład kodu html:
<html>
<head>
<title>moja strona</title>
</head>
<body>
<img src="obrazek1.jpg" alt=”To jest obraz Leonarda da Vinci ”>
</body>
</html>
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>
Przykład kodu html:
<html>
<head>
<title>moja strona</title>
</head>
<body>
<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>
</body>
</html>
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
Przykład kodu html: <html> <head> <title>moja strona</title> </head> <body> <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. </body> </html> 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> Przykład kodu html: <html> <head> <title>moja strona</title> </head> <body> <p><a href=”strona2.html”> idźdo strony 2</a> <p><a href=”http://www.onet.pl”> idź do Onet</a> </body> </html> 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. Przykład kodu html: <html> <head> <title>moja strona</title> </head> <body> <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> </body> </html>
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)
