Temat: Strony WWW wstep do HTMLa

WSTP Co to jest HTML?

HTML jest "jzykiem" twojej przegldarki i jest uywany do tworzenia stron internetowych. HTML Hypertext Markup Language to jzyk programowania, przy pomocy, ktrego w plikach tekstowych (wywietlanych jako strony internetowe) mog by umieszczane teksty, grafiki, dwik, animacje, sekwencje video, linki. Jzyk ten powsta w Szwajcarii na pocztku lat 90. wynaleziony przez naukowca Tima Berners-Lee. To, co widzisz, kiedy przegldasz strony to interpretacja kodu HTML przez przegldark. Aby zobaczy kod, HTML strony w internecie, po prostu kliknij "Widok" w grnym menu przegldarki i wybierz "rdo". Jeeli chcesz robi strony internetowe, nie ma innej drogi ni HTML. Nawet, jeeli korzystasz z programu do robienia stron. Podstawowa, wiedzia na temat jzyka HTML uatwi ci ycie i ulepszy twoj stron internetow. Dobra wiadomo to ta, e HTML jest atwy do nauczenia i uycia. W cigu najbliszych lekcji od teraz nauczysz si jak zrobi swoj pierwsz stron internetow. Jzyk HTML jest przydatny, aby wystawi swoj stron w Internecie, ale rwnie do tworzenia multimedialnych prezentacji, bez koniecznoci ich umieszczania na stronach WWW. Mona wykupi miejsce na serwerze u dowolnego dostawcy usug internetowych. Mona rwnie skorzysta z darmowego serwisu internetowego, udostpniajcego miejsce na swoich serwerach.

ISTOTA JZYKA HTML

Jzyk HTML zosta opracowany tak, aby w nim mogy by umieszczane teksty, grafiki, dwik, animacje, sekwencje video, linki. Stosowanie jego polega na umieszczaniu w odpowiednim miejscu specjalnych sw bdcych swego rodzaju rozkazami, poleceniami nakazujcymi przegldarce internetowej waciwe interpretowanie tekstu, ktrego one dotycz. Polecenie HTML (nazywane rwnie: znacznikiem lub tagiem) jest specjalnym cigiem znakw objtym nawiasami ostrymi: "<" oraz ">". Znaczniki mona pisa zarwno wielkimi, jak i maymi literami. Polecenie skada si ze znacznika otwierajcego <> i zamykajcego </>. Znacznik zamykajcy zawiera ukonik (ang. slash). Wikszo polece ma charakter parzysty (zawiera znacznik otwierajcy i zamykajcy). Stosuje si te polecenia nieparzyste, np. <br> lub <hr>, a wic nie wymagajce znacznika zamykajcego. Znaczniki nie s widoczne w przegldarce, s one tylko interpretowane w celu sformatowania tekstu. Przegldarka nie wywietla znacznikw w treci dokumentw, lecz je interpretuje.

Przykad: Jeli chcemy, aby fragment tekstu zamieszczonego w dokumencie HTML-owym by wywietlany przez przegldark jako pogrubiony, musimy zastosowa odpowiedni znacznik. (...) Normalny tekst. <B>Ten tekst bdzie wywietlany jako pogrubiony.</B> Ten te jest wywietlany normaln czcionk. (...) Efekt: Normalny tekst. Ten tekst bdzie wywietlany jako pogrubiony. Ten te jest wywietlany normaln czcionk. W pracy z dokumentami HTML-owymi obowizuje zasada "jeli co zostao otwarte, to musi by zamknite". W myl tej zasady wikszo znacznikw wystpuje parami, tak jak w przykadzie powyej. W przykadzie tym par stanowi: znacznik otwierajcy <B> i zamykajcy </B>, jak wida znacznik zamykajcy rni si od otwierajcego kresk /. Pary takie stanowi pewnego rodzaju "pojemniki, ktrych zawarto ma by przez przegldark interpretowana w szczeglny, zgodny z przeznaczeniem pojemnika sposb. Tak, wic znaczniki bdc same tekstem opisuj sposb, w jaki przegldarka ma interpretowa tekst, do ktrego one si odnosz. Std te wzia si nazwa "jzyk opisu tekstu" stosowana w odniesieniu do jzyka HTML. Warto te wiedzie, e wiele znacznikw posiada atrybuty, a te za wartoci. Skadnia jest taka: <ZNACZNIK ATRYBUT="warto">. W tym miejscu naley te wyjani, e wartoci atrybutw zawsze naley umieszcza midzy cudzysowami, bez wzgldu na typ wartoci. Specyfikacja jzyka HTML kwesti t przedstawia jednoznacznie. W wielu publikacjach mona znale rne zdania na ten temat, wynika to std, e wikszo przegldarek poprawnie interpretuje wartoci atrybutw nawet jeli nie umiecimy ich w cudzysowach, ale trzeba nam wiedzie, e w kadej chwili moe si pojawi nowa wersja przegldarki cile stosujca si do specyfikacji jzyka, a wwczas dokument nasz bdzie le interpretowany. Przykad: Jeli chcesz zmieni kolor fragmentu tekstu, to masz do dyspozycji znacznik <FONT> i jego atrybut COLOR z mnstwem moliwych do zastosowania wartoci. (...) Normalny tekst.<FONT COLOR="blue">Ten tekst bdzie wywi etlany w kolorze niebieskim.</FONT> Normalny tekst. (...) Efekt: Normalny tekst. Ten tekst bdzie wywietlany w kolorze niebieskim. Normalny tekst. Wykonujc kolejne polecenia utworzysz swoj prezentacj, ktra po umieszczeniu na serwerze mogaby by Twoj stron internetow

Cz I. BUDOWANIE STRONY WWW Cay dokument musi by umieszczony midzy znacznikami <HTML> </HTML>. Znaczniki <HEAD> </HEAD> zawieraj informacje nagwkowe. Sama tre dokumentu ujta jest w znacznikach <BODY> </BODY>.

Konstrukcja dokumentu HTML-owego

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-type"content="text/html;charset=iso-8859-2"> <meta name="description"content="tu wpisz krtki opis strony"> <meta name="keywords"content="tu wpisz sowa kluczowe"> <title>Tu wpisz tytu strony</title> </HEAD> <BODY> Tu umie waciw tre dokumentu </BODY> </HTML>

Objanienie powyszej konstrukcji linijka po linijce: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <meta http-equiv="Content-type"content="text/html;charset=iso-8859-2">

<meta name="description"content="tu wpisz krtki opis strony"> <meta name="keywords"content="tu wpisz sowa kluczowe"> <title>Tu wpisz tytu strony</title>

wiczenie 1.
W swoim folderze imiennym np. Kacper Kowalski za folder o nazwie moja strona. Otwrz program NOTATNIK. Zapisz plik o nazwie index.html Pamitaj, aby wpisujc nazw pliku, po kropce dopisa rozszerzenie .html

W okienku: Zapisz jako typ: wybierz opcj: Wszystkie pliki

Poniewa strona internetowa skada si zwykle z kilku podstron (plikw), strona gwna caej prezentacji (skadajcej si wanie z kilku plikw) powinna mie nazw index.htm lub index.html. Uatwia to wacicielom serwerw identyfikacj gwnego pliku strony internetowej. Stosuje si te nazw default.htm lub default.html. Tworzenie strony lub prezentacji odbywa si w zwykym edytorze tekstu, np. NOTATNIK, przy uyciu polece.

wiczenie 2.
W pliku index.html wpisz nastpujcy ukad polece szkielet twojej przyszej strony Tekst wpisany na czerwono odpowiednio zamie swoim tekstem. Wpisz wg wasnego uznania pniej w kadej chwili bdziesz mg/moga poprawi.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-type"content="text/html;charset=iso-8859-2"> <meta name="description"content="tu wpisz krtki opis strony"> <meta name="keywords"content="tu wpisz sowa kluczowe"> <title>Tu wpisz tytu strony</title> </HEAD> <BODY> Tu umie waciw tre dokumentu </BODY> </HTML>

Zapisz wprowadzone zmiany w pliku (menu: Plik/Zapisz). Uruchom teraz przegldark Internet Explorer (IE). Przy pomocy polece z menu: Plik/Otwrz, odszukaj i otwrz Twj plik index.html

wiczenie 3.Tytuy
Do wstawiania tytuw su znaczniki Hn (znacznik parzysty) , gdzie n=1..6 Przykady: W ramach wiczenia wpisz przykadowe linie do swojego pliku index.html efekt powinien by taki jak pod ramk.
<H1>tekst do w yw ietlenia</H1> <H2>tekst do w yw ietlenia</H2> <H3>tekst do w yw ietlenia</H3> itd.

Tak wyglda tekst znacznika H1

Tak wyglda tekst znacznika H2
Tak wyglda tekst znacznika H3
Tak wyglda tekst znacznika H4
Tak wyglda tekst znacznika H5
Tak wyglda tekst znacznika H6

wiczenie 4. Akapit i wiersz

Aby umieci tekst naley zastosowa znacznik P (znacznik parzysty) Wpisz poniszy przykad:
<P> tekst ktry chcesz umieci </P>

tekst ktry chcesz umieci Aby przeama tekst (przenie o jeden wiersz w d) stosuje si znacznik BR (znacznik nieparzysty) Wpisz poniszy przykad:
<P> tekst ktry chcesz umieci w pierw szej linii <BR> tekst ktry chcesz umieci w drugiej linii </P>

tekst ktry chcesz umieci w pierwszej linii tekst ktry chcesz umieci w drugiej linii

wiczenie 5. Pozioma linia

Polecenie HR (znacznik nieparzysty) pozwala wywietli w dokumencie poziom lini na ca szeroko strony. Wpisz poniszy przykad:
<HR>

wiczenie 6. Wykazy
Czsto stosuje si w dokumentach wykazy wypunktowane i numerowane. Aby utworzy szkielet wykazu wypunktowanego stosuje si polecenie UL (znacznik parzysty) , a poszczeglne punkty wykazu wprowadza si poleceniem LI (znacznik parzysty) Wpisz poniszy przykad:
<UL> <LI>Uw aam, e UFO istnieje</LI> <LI>Uw aam, e pozaziemskie cyw ilizacje mog nam pomc</LI> <LI>Uw aam, e naley przygotow a si na spotkanie</LI> </UL>

Uwaam, e UFO istnieje Uwaam, e pozaziemskie cywilizacje mog nam pomc Uwaam, e naley przygotowa si na spotkanie

Gdy chcemy utworzy wykaz numerowany, wtedy zamiast UL stosujemy znacznik OL (znacznik parzysty) Wpisz poniszy przykad:
<OL> <LI>Uw aam, e UFO istnieje</LI> <LI>Uw aam, e pozaziemskie cyw ilizacje mog nam pomc</LI> <LI>Uw aam, e naley przygotow a si na spotkanie</LI> </OL>

1. Uwaam, e UFO istnieje 2. Uwaam, e pozaziemskie cywilizacje mog nam pomc 3. Uwaam, e naley przygotowa si na spotkanie

wiczenie 7. Atrybuty czcionki

W tekcie mona stosowa pogrubienia, pochylenia i podkrelenia uywajc odpowiednio znacznikw B, I, U (znaczniki parzyste). Znaczniki te powinny obejmowa formatowany fragment tekstu. Wana jest kolejno zamykania znacznikw w przypadku stosowania kilku z nich. Wpisz poniszy przykad:
<P> to jest zw yky tekst <B>a teraz pogrubiony</B> <I>teraz pochylony</I> <U>i podkrelony</U> <B><I><U>a teraz w szystkie trzy razem</U></I></B> </P>

to jest zwyky tekst a teraz pogrubiony teraz pochylony i podkrelony a teraz wszystkie trzy razem

wiczenie 8.
Umie odpowiedzi do poniszych zada na swojej stronie. Umie tytu: wiczenie 8.ODPOWIEDZI (tekst pogrubiony i pochylony) Utwrz wykaz numerowany, aby ponumerowa odpowiedzi na pytania. Poprawne odpowiedzi wyrnij pogrubieniem. Wpisany tekst z tego wiczenia oddziel od pozostaego tekstu lini poziom.

wiczenie 8.ODPOWIEDZI
1. 2. 3. 4. ABCD ABCD ABCD ABCD

Zadanie nr 1
Midzy ktrymi znacznikami umiecisz tekst, ktry ma si pojawi na pasku tytuowym? a) <body> Tekst </body> b) <title> Tekst </title> c) <head> Tekst </head> d) <html> Tekst </html>

Zadanie nr 2
Znacznik <META NAME="Keywords" CONTENT="jakie wyrazy kluczowe"> umoliwia: a) Okrela list sw, ktre najczciej wystpuj w dokumencie b) Okrela list sw, ktre nie maj zwizku ze stron c) Okrela list sw, ktre uatwiaj znalezienie tej strony przez programy wyszukujce d) Okrela list sw, ktre s zastrzeone przez t stron

Zadanie nr 3
Znacznik <META HTTP-EQUIV="content-type" CONTENT="text/html; charset=iso-8859-2">: a) Deklaruje odpowiedni stron kodow dokumentu b) Okrela maksymaln liczb sw kluczowych na stronie c) Okrela rodzaj dokumentu html d) Okrela rodzaj uywanej czcionki w dokumencie czcionka iso-8859-2

Zadanie nr 4
W jaki sposb wstawi znacznik koca wiersza? a) <p> </p> b) <br> c) <hr> d) <td>

wiczenie 9.Wizytwka
Utwrz stron o nazwie wizytwka_Nazwisko.html Umie na niej jak najadniej potrafisz, wykorzystujc poznane znaczniki HTML(postaraj si jak najwicej za kady znaczniki jest 1 pkt) nastpujce informacje: imi i nazwisko, data urodzenia, miejsce urodzenia, wzrost, waga, oczy, zainteresowania. Jeli nie chcesz umieszcza informacji rzeczywistych moesz wpisa dane fikcyjne.

Zadanie domowe:
- okreli histori Internetu - wymieni przykadowe serwisy tzw. Internetu - wymieni zmiany w wygldzie stron WWW II generacji w ostatnich latach - wskaza, dokd zmierza" Internet - wymieni wspczesne technologie zwizane- wskaza mocne i sabe strony nowych ze stronami WWW i scharakteryzowa ich technologii, wymieni przyczyny, jakie zastosowanie decyduj o zastosowaniu wanie tej