przygotował: mgr Szymon Szewczyk PODSTAWY

Wielkość: px

Rozpocząć pokaz od strony:

Download "przygotował: mgr Szymon Szewczyk PODSTAWY"

Ignacy Anatol Owczarek
8 lat temu
Przeglądów:

1 S t r o n a 1 PODSTAWY Każdy dokument musi być w całości zawarty między znacznikami - <HTML> i </HTML> (większość znaczników musi być odwołana </...>). Dokument HTML a składa się z dwóch części: - głowy zawartej między znacznikami <HEAD> i </HEAD> - ciała zawartej między znacznikami <BODY> i </BODY> np. <HTML> <HEAD> </HEAD> <BODY></BODY> </HTML> Między znacznikami <HEAD> </HEAD> znajduje tytuł strony który musi być wpisany między znacznikami <TITLE> </TITLE> np. <HEAD> <TITLE> dowolny tytuł </TITLE> </HEAD> Między znacznikami <BODY></BODY> znajduje się właściwa część dokumentu, parametry: BGCOLOR= angielska nazwa koloru np.: <BODY BGCOLOR= blue > - niebieski kolor tła strony BACKGROUND= nazwa pliku graficznego np.: <BODY BACKGROUND= niebo.jpg > - obrazek o nazwie - niebo.jpg będzie stanowił tło strony. BGPROPERTIES=fixed obrazek stanowiący tło strony będzie nieruchomy przy przewijaniu strony (efekt znaku wodnego ) LINK= nazwa koloru kolor dotychczas nie wybieranych odsyłaczy ALINK= nazwa koloru kolor ładowanego odsyłacza VLINK= nazwa koloru kolor wcześniej odwiedzanego odsyłacza Znaczniki <FONT> </FONT> zawierają tekst który ma się pojawić na dokumencie np.: <FONT> To jest moja pierwsza strona</font> parametry: COLOR= angielska nazwa koloru - kolor czcionki np.: <FONT COLOR= green > SIZE=1...7 wielkość czcionki np.: <FONT SIZE=5> FACE= nazwa czcionki np.: <FONT FACE= Arial > polecenie - <FONT COLOR= RED SIZE=6 FACE= Times > spowoduje pojawienie się czerwonych liter o wielkości 6 pisanych czcionką Times. Znaczniki <B></B> powodują pogrubienie czcionki Znaczniki <I></I> powodują pochylenie czcionki Znaczniki <U></U> powodują podkreślenie czcionki Znacznik <BR> powoduje, że następny wyraz będzie w nowej linijce przykład <HTML> <HEAD> <TITLE> Moja strona </TITLE> </HEAD> <BODY BGCOLOR= gold > <FONT COLOR= navy SIZE=4 FACE= Tahoma > To jest dokument napisany w języku HTML</FONT><BR> <FONT COLOR= orange SIZE=2><B><I> Ta linijka będzie pogrubiona i pochylona </B></I></FONT> </BODY></HTML>

<HTML> <HEAD> </HEAD> <BODY></BODY> </HTML> Między znacznikami <HEAD> </HEAD> znajduje tytuł strony który musi być wpisany między znacznikami <TITLE> </TITLE> np.

2 S t r o n a 2 WSTAWIANIE GRAFIKI <IMG> umożliwia wstawienie na stronę www obrazka w formacie GIF lub JPG PARAMETRY: ALIGN= top, middle, bottom wyrównanie grafiki ALT= jakiś tekst będzie pojawiać się napis przy kursorze po najechaniu na obrazek BORDER=50 kreślenie linii wokół obrazka, obramowanie można zlikwidować wpisując BORDER=0 HEIGHT=200 wysokość obrazka podawana w pikselach WIDTH=400 szerokość obrazka podawana w pikselach SRC parametr ten jest konieczny, określa plik graficzny który ma być wyświetlony np.: <IMG SRC= obrazek.jpg > ale jeżeli obrazki znajdują się w katalogu należy podać do niego ścieżkę dostępu np.: <IMG SRC=../zdjęcia/obrazek.jpg > - plik obrazek.jpg znajduje się w katalogu - zdjęcia Za pomocą polecenia (IMG DYNSRC= nazwa pliku > można wstawiać filmiki mpg i avi. Wstawianie obiektu media (animacje) Za pomocą znacznika <EMBED> możemy osadzić na stronie animacje, sekwencje wideo np. <body> <embed src="goovi1mv.avi"> Parametry: SRC źródło dla obiektu, HEIGHT wysokość przydzielona dla okienka, WIDTH szerokość przydzielona dla okienka, <HR> wstawia poziomą linię WSTAWIANIE LINII POZIOMEJ PARAMETRY: COLOR= nazwa angielska kolor linii NOSHADE wyłączenie cienia, który jest domyślnie włączony SIZE= grubość linii WIDTH=300 długość linii Wyrównanie testu, grafiki <CENTER></CENTER> - wyśrodkowanie <LEFT></LEFT> - do lewej <RIGHT></RIGHT> - do prawj

szerokość obrazka podawana w pikselach SRC parametr ten jest konieczny, określa plik graficzny który ma być wyświetlony np.: <IMG SRC= obrazek.

3 S t r o n a 3 Znacznik <BGSOUND> - dźwięk. Dzięki BGSOUND można uszczęśliwić odwiedzających daną stronę muzyką odgrywaną w tle. Dźwięk musi być zapisany w formacie WAV lub MIDI. np. <head></head> <body><bgsound src= chorus.wav loop=3> Parametr LOOP określa, ile razy plik będzie odtworzony. LOOP=INFINITE pętla nieskończona. LISTY Wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego <UL> <LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt </UL> Parametry: <UL TYPE=disc> <UL TYPE=circle> <UL TYPE=square> Wykaz uporządkowany - służy do sporządzenia wykazu numerowanego <OL> <LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt </OL> Parametr TYPE=n pozwala określić typ numerowania listy <OL TYPE=A> numerowanie według wielkich liter <OL TYPE=a> numerowanie według małych liter <OL TYPE=I> numerowanie według wielkich liczebników rzymskich <OL TYPE=i> numerowanie według małych liczebników rzymskich <OL TYPE=1> numerowanie według liczebników arabskich Efekt Marquee czyli przewijający się tekst Marquee to znacznik blokowy w HTML pozwalający na animację tekstu. <marquee direction="left" scrollamount="2" scrolldelay="1" >Przykład działania efektu Marquee. </marquee> Parametry: behavior - tryb przesuwania się tekstu na ekranie (scroll, slide, alternate) bgcolor - kolor tła znacznika direction - kierunek przesuwania się tekstu (left, right, up, down) loop - ilość powtórzeń scrollamount=" " - skok o X pikseli scrolldelay=" " - opóźnienie tekstu

LISTY Wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego <UL> <LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt </UL> Parametry: <UL TYPE=disc> <UL TYPE=circle> <UL TYPE=square>

4 S t r o n a 4 TABELA <TABLE> </TABLE> - między tymi dwoma znacznikami znajduje się cała zawartość tabeli. Tabela składa się z wierszy zawartych między znacznikami <TR> </TR>. A w każdym wierszu może znajdować się dowolna ilość komórek zawartych między znacznikami <TD> </TD>. np.: <TABLE> <TR> <TD> </TD><TD> </TD><TD> </TD> </TR> <TR> <TD> </TD><TD> </TD><TD> </TD> </TR> </TABLE> Parametry: - to jest tabela składająca się z dwóch wierszy w każdym znajdują się 3 komórki background= nazwa pliku graficznego jako tło tabeli obrazek np. <table background= niebo.gif > bgcolor= nazwa angielska koloru kolor tła np. <tabla bgcolor= blue > border=1.8 grubość lini obramowania np. <table border=5> bordercolor= nazwa angielska koloru kolor obramowania np. <table bordercolor= green > bordercolordark= nazwa angielska koloru ciemny kolor obramowania z efektem 3D bordrcolorlight= nazwa angielska koloru jasny kolor obramowania z efektem 3D width= szerokość komórek height= wysokość komórek cellpadding= wartość liczbowa określa odstęp między brzegiem komórki, a jej zawartością align wyrównanie zawartości komórek: align=left, align=right, align=center Do znacznika <TD> też odnosi się większość z powyższych parametrów, dzięki temu możemy formatować wygląd pojedynczych komórek background bgcolor bodercolor bordercolordark width height

: <TABLE> <TR> <TD> </TD><TD> </TD><TD> </TD> </TR> <TR> <TD> </TD><TD> </TD><TD> </TD> </TR> </TABLE> Parametry: - to jest tabela składająca się z dwóch wierszy w każdym znajdują się 3 komórki

5 S t r o n a 5 Zastosowanie tzw. kotwic wewnątrz tekstu. Jeżeli tworzony dokument (strona) w HTML u jest dosyć duży możemy w jego obrębie stworzyć odsyłacze odnoszące się do fragmentów tekstu (np. rozdziałów) - przykład: <head> </head> <body><font> <a href="#rozdział 1">Skok do rodziału 1</a><BR> <a href="#rozdział 2">Skok do rodziału 2</a><BR> </font><br><br> <a name="rozdział 1">Rozdział 1</a><BR><BR> <a name="rozdział 2">Rozdział 2</a><BR><BR> RAMKI - <frameset> To są aktywne odnośniki do przykładowego rozdziału 1 i 2 To jest tzw. Kotwica do której zostanie wykonany skok To jest tzw. Kotwica do której zostanie wykonany skok Przykład podziału strony w HTML u na tzw. RAMKI polecenie <frameset>. Muszą być utworzone co najmniej 3 strony, jedna z nich będzie stroną startową - zwyczajowo nazywana INDEX i będzie zawierać tylko polecenie <frameset>. Dwie pozostałe będą się ładować po uruchomieniu pliku INDEX do odpowiednich części okna. INDEX <frameset cols="20%,*" border=0> <frame name="ramka 1" src="lewa.html"> <frame name="ramka 2" src="prawa.html"> </frameset> Frameset cols podział na kolumny Frameset rows podział na wiersze Border=0 brak obramowania ramek (można zmienić na 1) 20%,* oznacza, że na RAMKĘ 1 będzie przypadać 20% szerokości strony, a reszta na RAMKĘ 2 można dowolnie zmieniać np. 40%,* LEWA <head></head> <body bgcolor="green">

1</a><BR><BR> <a name="rozdział 2">Rozdział 2</a><BR><BR> RAMKI - <frameset> To są aktywne odnośniki do przykładowego rozdziału 1 i 2 To jest tzw. Kotwica do której zostanie wykonany skok To jest tzw.

6 S t r o n a 6 <table border=3 bgcolor="lime" align="center"> <tr><td><a href="strona1.html" target="ramka 2">STRONA1</a></td></tr> <tr><td><a href="strona2.html" target="ramka 2">STRONA2</a></td></tr> <tr><td><a href="strona3.html" target="ramka 2">STRONA3</a></td></tr> <tr><td><a href="strona4.html" target="ramka 2">STRONA4</a></td></tr> </table> PRAWA <head></head> <body bgcolor="red"> MAPY Poniżej widać obrazek z mapą odsyłaczy. Gdy Czytelnik przesunie kursor myszki nad zaznaczone prostokąty, kursor przyjmie postać "rączki", sygnalizującej istnienie odsyłacza. A oto pełna treść polecenia: <IMG SRC="odsylacz.gif " USEMAP="#mapa1"> <MAP NAME ="mapa1"> <AREA SHAPE=RECT COORDS="1, 1, 50, 50" HREF="1.html"> <AREA SHAPE=RECT COORDS="51, 1, 100, 50" HREF="2.html"> <AREA SHAPE=RECT COORDS="1, 51, 51, 100" HREF="3.html"> <AREA SHAPE=RECT COORDS="51, 51, 100, 100" HREF="4.html"> </MAP> Pierwszy wiersz polecenia przywołuje obrazek. USEMAP informuje przeglądarkę, że obrazek "odsylacz.gif" jest mapowany, i że mapa nosi nazwę "mapa1". Drugi wiersz zapoczątkowuje definicję mapy. Wiersze 3-6 wprowadzają cztery kolejne fragmenty mapy odsyłaczy, odpowiadające prostokątom na rysunku. SHAPE=RECT mówi, że chodzi tutaj o prostokąty (RECT=rectangle). COORDS informuje o współrzędnych, przy czym pierwsze dwie liczby w wierszu podają lewy górny róg prostokąta, a następne dwa - prawy dolny. Warto unikać nakładania na siebie obszarów map, choć przeglądarka akceptuje nakładanie. HREF= stanowi przywołanie jakiegoś dokumentu HTML. Ostatni wiersz stanowi zakończenie definicji mapy. Oprócz prostokątów (kwadratów) możemy tworzyć mapy z użyciem okręgów i obszarów nieregularnych. W przypadku okręgu stosujemy polecenie: <AREA SHAPE=CIRCLE COORDS=" 25, 25, 19" HREF="dokument.html"> Proszę zwrócić uwagę na SHAPE=CIRCLE oraz przykładowe liczby 25,25,19. Pierwsze dwie liczby informują o położeniu środka okręgu, ostatnia - o długości promienia.

html" target="ramka 2">STRONA4</a></td></tr> </table> PRAWA <head></head> <body bgcolor="red"> MAPY Poniżej widać obrazek z mapą odsyłaczy.

Podobne dokumenty

zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >

zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka > tytuł dokumentu treść dokumentu