Lekcja 1:.Powtórka. <head> <title>kurs HTML</title> </head> <body> to jest tresc... </body>

Wielkość: px

Rozpocząć pokaz od strony:

Download "Lekcja 1:.Powtórka. <head> <title>kurs HTML</title> </head> <body> to jest tresc... </body>"

Kamila Staniszewska
8 lat temu
Przeglądów:

1 Lekcja 1:.Pwtórka I Dkument pdzielny jest na dwie sekcje - head (nagłówek) i bdy (część główna dkumentu). W nagłówku, pmiędzy znacznikami <head> </head> umieszcza się infrmacje, które nie są widczne na strnie, takie jak tytuł strny, pis (widczny np. w wyszukiwarce Ggle), słwa kluczwe, system kdwania znaków itp. W części 'głównej', pmiędzy znacznikami <bdy> </bdy> znajduje się natmiast cała treść strny widczna dla sób przeglądających naszą witrynę. <html> <head> <title>kurs HTML</title> </head> <bdy> t jest tresc... </bdy> </html> Znacznik bdy ma klika atrybutów pzwalających wpływać na wygląd strny m.in. bgclr kreślający klr tła strny. D atrybutu bgclr mżna np. przypisać angielskie nazwy klrów (red, green, yellw, silver itp.): <html> <head> <title>kurs HTML</title> </head> <bdy bgclr='red'> t jest tresc... </bdy>

w wyszukiwarce Ggle), słwa kluczwe, system kdwania znaków itp.

2 II D przekazania przęglądarce plecenia wyświetlenia tekstu jak sbneg paragrafu (akapitu) służy para znaczników (twierający i zamykający) D znacznika paragrafu (akapitu) mżna np. ddać atrybut align(wyrównywanie). Przybiera n m.in. wartści: left - wyrównanie d lewej strny right - wyrównanie d prawej strny center - wycentrwanie w pzimie justify - wyrównanie d prawej i d lewej strny Atrybut wraz z wartścią jaką przyjmuje wprwadzamy d znacznika twierajaceg. Wartść atrybutu przypisujemy za pmcą znaku równści (=). Zaleca się umieszczanie wartści atrybutu wewnątrz cudzysłwu. T jest tekst wyrównany d prawej strny III Znaczniki frmatujące tekst zmieniają jeg wygląd. y <fnt> </fnt> kilka atrybutów, z pśród których mżna wyróżnić: clr - kreśla klr tekstu zawarteg między znacznikami : <fnt clr='green'> przykładwy tekst </fnt> face - rdzaj czcinki (należy pamiętać, że wybrana czcinka musi znajdwać się na kmputerze sby, która gląda naszą strnę - najbezpieczniej stswać czcinki najczęściej występujące np. Arial, Verdana, TimesNewRman): <fnt face='arial'> przykładwy tekst </fnt> size - wielkść czcinki (liczby z przedziału 1-7): <fnt size='1'> przykładwy tekst </fnt> Atrybuty mżna łączyć ze sbą w ramach jedneg znacznika : <fnt face='verdana' size='7' clr='blue'> przykładwy tekst </fnt> Inne znaczniki frmatujące t np.: Pgrubienie tekstu między znacznikami (bld): . Pchylenie tekstu między znacznikami (kursywa): tekst 1 tekst 2 tekst 3

wartści: left - wyrównanie d lewej strny right - wyrównanie d prawej strny center - wycentrwanie w pzimie justify - wyrównanie d prawej i d lewej strny Atrybut wraz z wartścią jaką przyjmuje

3 Pdkreśnie tekstu między znacznikami: tekst 1 tekst 2 tekst 3 Znaczniki frmatujące mgą występwać razem np. wprwadzenie znaczników: tekst 2 zmusi przeglądarkę internetwą d wyświetlenia tekstu pchylneg i jedncześnie pgrubineg. IV Istnieją znaczniki 'pjedyncze', nie mające elementu 'zamykająceg'. Zaliczamy d nich dwa znaczniki 'rzdzielające': który wymusza przejście d nwej linii, <hr> który również wymusza przejście d nwej linii, wstawiając ddatkw linię rzdzielająca (takieg znacznika użyt np. u góry teg tekstu za słwami 'Znaczniki rzdzielające'). y tekst1 tekst2 V Odsyłacze twrzy się używając znaczników: <a></a> Pmiędzy nimi mżna umieścić dwlny tekst lub grafikę ( wstawianiu grafiki zbacz w następnej lekcji) np.: <a>strna systematyce nieparzystkpytnych</a> Znacznik <a> psiada kilka atrybutów, z których najważniejsze t: href definiuje adres pdstrny lub strny internetwej, którą przeglądarka ma wyświetlić, p kliknięciu na link. target kreśla w jaki spsób przeglądarka ma twrzyć strnę mże przybierać różne wartści najważniejsze t dmyślny '_self' (w tym samym knie, czyli zastąpić nwą strną strnę którą glądamy) i '_blank' (twrzyć strnę w nwym knie). Umieszczny na strnie głównej (index.html) link (dsyłacz) d pdstrny pświęcnej ktm będzie wyglądał następując: <a href='kty/kty.html'>strna ktach</a> Twrząc linki (dsyłacze) d strn 'bcych' nie pdaje się ścieżek ale pełny adres strny, np.:

IV Istnieją znaczniki 'pjedyncze', nie mające elementu 'zamykająceg'.

4 <a href=' główna UŁ</a> Wróćmy d atrybutu target, zapis: <a href=' target='_self'> strna główna UŁ twrzy się w tym samym knie</a> spwduje wyświetlenie strny strny UAM w tym samym knie, a kd: <a href=' target='_blank'> strna główna UŁ twrzy się w nwym knie</a> wyświetli ją w nwym knie (lub zakladce). Innym zastswaniem znacznika <a></a> jest wysyłanie pczty na pdany adres e- mail, za pmcą zainstalwaneg na kmputerze prgramu pcztweg. Składnia wygląda następując: <a href='mailt:dwlny@adres'>dwlny tekst</a> VI Znacznik brazka t: <img> W języku HTML znacznik ten nie psiada znacznika zamykająceg. Atrybuty src - adres brazka Ot przykład kdu wyświetlająceg zdjęcie, w tym przypadku pbrane ze strny plft.cm: <img src=' width - szerkść brazka height - wyskść brazka Krzystając z tych atrybutów mżna zmienić rzmiary <img src=' width='550px'> Na kniec jeszcze spsób zapisania linku (dnśnika) w pstaci brazka: <a href=' <img src=' </a> Lekcja 2:.Plskie znaki Plskie znaki Należy więc jeszcze dpwiedni przekdwać, c nazywa się knwersją. Mżna t zrbić "ręcznie", chćby w Windwswym Ntatniku, uzywając plecenia Edycja Zamień. Wtedy jednak trzeba wiedzieć jaki znak jakim zastąpić. Mżna się psiłkwać w tym wypadku pniższą tabelą:

Innym zastswaniem znacznika <a></a> jest wysyłanie pczty na pdany adres e- mail, za pmcą zainstalwaneg na kmputerze prgramu pcztweg.

5 Znak Windws ˇ Ć Ę Ł Ń Ó Znak ISO Ą Ć Ę Ł Ń Ó Ś Ż Ż Ź ± ą ć ę ł ń ó ć ę ł ń ó ś ż Ľ ż ź Tak ręczna zamiana znaków, nawet przy użyciu plecenia "Zamień" jest jednak dść uciążliwa. Lepiej użyć jakiegś prgramu, który zrbi t za nas. Istnieje wiele takich prgramów, a niektóre są ferwane w internecie bezpłatnie, (np. "Ognki"). P dknaniu knwersji należy zapisać zmiany w pliku, ile czywiście prgram teg nie zrbił teg autmatycznie. Lekcja 2:Listy wypunktwane i numerwane

Istnieje wiele takich prgramów, a niektóre są ferwane w internecie bezpłatnie, (np. "Ognki").

6 D stwrzenia listy wypunktwanej służą znaczniki: <ul> <li></li> </ul> Np. wprwadzenie kdu: <ul> <li>biegaj± p ł±ce</li> <li>zbieraj± midek</li> <li> pi± snem zimwym w zimie</li> </ul> spwduje wyświetlenie listy złżnej z trzech punktów. Wygląd listy mżna zmienić za pmcą następujących parametrów znacznika <ul>: type - kreśla jakich znaczników należy używać d znaczania pszczególnych pzycji. Atrybut ten jest niezalecany - zamiast nieg pwinn się stswać dpwiednie plecenie kaskadwych arkuszy stylów CSS. Atrybut ten mże mieć następujące wartści: disc - wypełnine kółk: circle - puste w śrdku kółk: square - wypełniny kwadrat: <ul type="disc"> <li>element 1</li> <li>element 2</li> </ul> Drugim typem listy jest lista numerwana. Twrzy się ją pdbnie jak listę punktów, z tą różnicą, że zamiast znacznika <ul> używa się <l>: Misie dzielimy na: <l> <li>misie plarne, które bywaj± białe</li> <li>misie brunatne</li> <li>misie czarne, czyli Baribale</li>

Wygląd listy mżna zmienić za pmcą następujących parametrów znacznika <ul>: type - kreśla jakich znaczników należy używać d znaczania pszczególnych pzycji.

7 <li>misie szare, czyli Grizzly</li> </l> Wygląd tej listy mżna mdyfikwać za pmcą następujących parametrów znacznika <l>: type - kreśla spsób numerwania listy. Pdbnie jak przy znaczniku <ul>, atrybut ten Dstępne są następujące wartści dla teg atrybutu: 1 - wyliczanie z użyciem liczb arabskich: A - wyliczanie z użyciem dużych liter alfabetu: a - wyliczanie z użyciem małych liter alfabetu: I - wyliczanie z użyciem liczb rzymskich pisanych dużymi literami: <l type="a"> <li>element 1</li> <li>element 2</li> </l> Wykaz numerwany z pdaniem pczątkweg numeru <l start="5"> <li>element 1</li> <li>element 2</li> </l> Listy mżna czywiście zagnieżdżać, przy czym mżna mieszać pszczególne rdzaje list: <l> <li>pzycja 1 <ul> <li>pdpzycja 1.1</li> <li>pdpzycja 1.2</li> </ul></li> <li>pzycja 2 <ul> <li>pdpzycja 2.1</li> <li>pdpzycja 2.2</li> </ul></li> </l>

użyciem małych liter alfabetu: I - wyliczanie z użyciem liczb rzymskich pisanych dużymi literami: <l type="a"> <li>element 1</li> <li>element 2</li> </l> Wykaz numerwany z pdaniem pczątkweg numeru <l

8 Zadanie 1 Wpisz pwyższe przykłady w Ntatniku. Nadaj rzszerzenie html. Pkaż zadanie prwadzącemu. Zadanie 2 Stwórz strnę zawierającą tytuł strny, różne style i klry czcinek, paragrafy różnie wyrównane, brazek, dnśnik d innej strny www raz mżliwść wysłania maila, dnśnik d innej strny będący brazkiem, listy wypunktwane w różnych stylach, listy numerwane w różnych stylach raz zaczynające się d różnych liczb, przynajmniej dwie pdstrny. Pkaż zadanie prwadzącemu.

dnśnik d innej strny www raz mżliwść wysłania maila, dnśnik d innej strny będący brazkiem, listy wypunktwane w

Podobne dokumenty

WPROWADZENIE Kurs DO WIT INTERNETU WSISIZ Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT

WPROWADZENIE Kurs DO WIT INTERNETU WSISIZ Wyższa Szkoła Informatyki Stosowanej i Zarządzania WIT Serwis WWW Definicja? Ogólna - zbiór infrmacji ujętych w specyficzną frmę dkumenty HTML sieć dnśników - publikwany w sieci Internet (WWW) Infrmatyczna - zbiór plików tekstwych HTML - umieszczny na serwerze

Lekcja 1:.Powtórka. <head> <title>kurs HTML</title> </head> <body> <p>to jest tresc...</p> </body>