Dokument HTML jest zwykym plikiem tekstowym w ktrym
- Slides: 61
Dokument HTML jest zwykłym plikiem tekstowym, w którym znajdują się polecenia HTML.
Polecenie (znacznik, tag) HTML jest specjalnym ciągiem znaków objętym nawiasami ostrymi.
Znacznik pojedyńczy <BR>
Znacznik podwójny Zośka <B> Ala ma kota </B> idzie Znacznik początkowy Znacznik końcowy
ZNACZNIKI OSNOWY DOKUMENTU
<HTML> - znacznik rozpoczynający dokument HTML </HTML> - znacznik kończący dokument HTML
<HEAD> - znacznik rozpoczynający sekcję nagłówkową dokumentu </HEAD> - znacznik kończący sekcję nagłówkową dokumentu
<BODY> - znacznik rozpoczynający treść (ciało) dokumentu </BODY> - znacznik kończący treść (ciało) dokumentu
<TITLE> - znacznik rozpoczynający tytuł strony </TITLE> - znacznik kończący tytuł strony Przykład – jak to należy zapisywać. <TITLE>Tytuł strony</TITLE>
Standardowa osnowa dokumentu HTML
<HTML> <HEAD> <meta http-equiv="content-type" content="text/html; charset=iso-8859 -2"> <TITLE>Ala ma kota ? ? ? </TITLE> </HEAD> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML>
Podstawowe znaczniki HTML.
Czcionka pogrubiona Zośka <B> Ala ma kota </B> idzie Znacznik końcowy Znacznik początkowy
Czcionka pochylona <I>Ala ma kota </I>
Czcionka podkreślona <U> </U>
Czcionka przekreślona <STRIKE> </STRIKE>
Superskrypt (indeks górny) <SUP> </SUP> Przykład !! Y=AX 2+BX+C Y=AX<SUP>2</SUP>+BX+C
Subskrypt (indeks dolny) <SUB> </SUB> Przykład !! H 2 SO 4 H<SUB>2</SUB>SO<SUB>4</SUB>
Kolory czcionki <FONT COLOR="nazwa_koloru">a</FONT> UWAGA ! NAZWA KOLORU W JĘZYKU ANGIELSKIM !!! <FONT COLOR="RED"> ala </FONT>
Wielkość czcionki <FONT SIZE="x"> dfg</FONT> x=1 -7
Zmiana kroju czcionki <FONT FACE="nazwa_kroju">a </FONT> Przykładowe nazwy kroju czcionki : Arial Times New Roman Book Antiqua Haettenschweiler itd
Tytuł <H 1> </H 1> - pierwszego stopnia <H 2> </H 2> <H 3> </H 3> <H 4> </H 4> <H 5> </H 5> <H 6> </H 6> Poszczególne tytuły różnią się wielkością czcionki !!
Znacznik akapitu <P> </P> Znacznik podstawowy , następne slajdy pokażą jego modyfikacje.
Wyrównanie akapitu do lewego marginesu (domyślne ustawienie) <P ALIGN=LEFT> </P>
Wyrównanie akapitu do prawego marginesu <P ALIGN=RIGHT> </P>
Wyśrodkowanie akapitu <P ALIGN=CENTER> </P>
Wyjustowanie akapitu <P ALIGN=JUSTIFY> </P>
Znacznik końca wiersza <BR>
Pozioma linia <HR> Długość linii od lewego marginesu do prawego marginesu Znacznik podstawowy , na następnych slajdach pokażemy jego modyfikacje.
Pozioma linia o grubości 5 pikseli <HR SIZE=5>
Linia o długości 300 pikseli <HR WIDTH=300>
Pozioma linia : długość - 50% szerokości strony <HR WIDTH=50%>
Pozioma linia o kolorze czerwonym <hr color="red">
Wyśrodkowanie na stronie wskazanego elementu, np. tekst lub obrazek. <CENTER> </CENTER>
Komentarz <!--. . . --> Polecenie pozwala wstawiać do dokumentu (zamiast kropek) komentarz autora. Treść komentarza nie będzie wyświetlana na ekranie, ale stanowi dodatkową informację dla samego autora lub osoby czytającej, gdy zajrzy do źródła dokumentu.
Odsyłacze (hiperłącza, łącza hipertekstowe, odnośniki) Odsyłaczem jest konstrukcja, która wskazuje pewne miejsce w Internecie i pozwala skoczyć do niego za pomocą kliknięcia na niej myszką.
Konstrukcja hiperłącza <A HREF="miejsce_docelowe"> Tekst, na którym należy kliknąć </A> Pytanie !!! Co wyświetli przeglądarka internetowa ? ? ? Co to znaczy miejsce docelowe ? ?
Miejsce docelowe – inna strona internetowa <A HREF="http: //www. wp. pl">Wirtualna Polska</A> <A HREF="http: //www. onet. pl">Ala ma kota ? </A>
Miejsce docelowe – inny plik naszej strony internetowej Uwaga !!! NASZA STRONA SKŁADA SIĘ Z TRZECH PLIKÓW. PLIK STRONY GŁÓWNEJ – PLIK NR 2 – PLIK NR 3 – index. html ala. html kot. html
</A > a< Al na "> głó w ml. ht Str on a ala =" l"> EF ex. htm ind /A a< wn HR EF =" głó <A HREF="kot. html">Kot</A> <A HREF="ala. html">Ala</A> > <A > na /A ro St > l" t< Ko tm. h STRONA NR 2 ala. html "> ml ex ht nd ot. "k i =" EF F= HR HR E HR <A <A <A /A > STRONA GŁÓWNA index. html STRONA NR 3 kot. html
Wstawianie grafiki do dokumentu <img src="plik_graficzny"> plik_graficzny – pełna nazwa pliku graficznego (jakikolwiek błąd obraz nie będzie wyświetlony) Przykład !!! ala. jpg ; kot. gif
Wielkość obrazka możemy regulować za pomocą parametrów : HEIGHT (wysokość) WIDTH (szerokość) <IMG SRC="ala. gif" WIDTH=200 HEIGHT=50>
Animacja Marquee Minimalna definicja Marquee ma postać <MARQUEE>Ala ma kota. </MARQUEE>
Tekst może się poruszać na trzy sposoby: BEHAVIOR=SCROLL powoduje, że tekst porusza się od jednego brzegu strony w kierunku drugiego, znika za nim i wypływa ponownie zza pierwszego brzegu. BEHAVIOR=SLIDE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i zatrzymuje się.
BEHAVIOR=ALTERNATE powoduje, że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego.
Przykład ! <MARQUEE BEHAVIOR=ALTERNATE > Ala ma kota! </MARQUEE>
Wykazy Wykaz nieuporządkowany - służy do sporządzenia wykazu nienumerowanego <UL> <LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt </UL> Przykład • Pierwszy punkt • Drugi punkt • Trzeci punkt
Lista nieuporządkowana może dodatkowo zawierać definicję symbolu graficznego <UL TYPE=disc> <LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt </UL> Przykład: • Pierwszy punkt • Drugi punkt • Trzeci punkt
<UL TYPE=circle> <LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt </UL> Przykład: o. Pierwszy punkt o. Drugi punkt o. Trzeci punkt
<UL TYPE=square> <LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt </UL> Przykład: §Pierwszy punkt §Drugi punkt §Trzeci punkt
Wykaz uporządkowany - służy do sporządzenia wykazu numerowanego <OL> <LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt </OL> Przykład: 1. Pierwszy punkt 2. Drugi punkt 3. Trzeci punkt
Parametr TYPE=n pozwala określić typ numerowania listy <OL TYPE=A> - numerowanie według <OL wielkich liter TYPE=a> - numerowanie według małych liter 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
Tabele Ogólne ramy tabeli <TABLE> Początek tabeli </TABLE> Koniec tabeli
Wiersz tabeli <TR> Początek wiersza </TR> Koniec wiersza
Komórka w wierszu <TD> Początek komórki </TD> Koniec komórki
<TABLE> Przykładowa tabela <TR><TD>aa</TD><TD>bb</TD><TD>cc</TD></TR> <TR><TD>dd</TD><TD>ee</TD><TD>ff</TD></TR> <TR><TD>gg</TD><TD>hh</TD><TD>ii</TD></TR> </TABLE> Uwaga !!! Powyższa tabela nie zawiera obramowania !!
UWAGA !!! Przeglądarka wyświetli tabelę tak jak widać poniżej aa bb cc dd ee ff gg hh ii
Przykładowa tabela nr 2 <TABLE BORDER> <TR><TD>aa</TD><TD>bb</TD><TD>cc</TD></TR> <TR><TD>dd</TD><TD>ee</TD><TD>ff</TD></TR> <TR><TD>gg</TD><TD>hh</TD><TD>ii</TD></TR> </TABLE> Uwaga !!! Ta tabela zawiera już obramowanie !
Różne sposoby zapisu tabeli w języku HTML <TABLE BORDER> <TD>aa</TD> <TD>bb</TD> <TD>cc</TD> </TR> <TD>dd</TD><TD>ee</TD><TD>ff</TD> </TR> <TR><TD>gg</TD><TD>hh</TD><TD>ii</TD></TR> </TABLE>