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.
Zośka <B> Ala ma kota </B> idzie Czcionka pogrubiona Zośka <B> Ala ma kota </B> idzie Znacznik końcowy Znacznik początkowy
<I>Ala ma kota </I> Czcionka pochylona <I>Ala ma kota </I>
Czcionka podkreślona <U> </U>
<STRIKE> </STRIKE> Czcionka przekreślona <STRIKE> </STRIKE>
<SUP> </SUP> Superskrypt (indeks górny) <SUP> </SUP> Przykład !! Y=AX2+BX+C Y=AX<SUP>2</SUP>+BX+C
H2SO4 <SUB> </SUB> Subskrypt (indeks dolny) <SUB> </SUB> Przykład !! H2SO4 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>
<FONT SIZE="x"> dfg</FONT> Wielkość czcionki <FONT SIZE="x"> dfg</FONT> x = 1 - 7
<FONT FACE="nazwa_kroju">a </FONT> Zmiana kroju czcionki <FONT FACE="nazwa_kroju">a </FONT> Przykładowe nazwy kroju czcionki : Arial Times New Roman Book Antiqua Haettenschweiler itd
Poszczególne tytuły różnią się <H1> </H1> - pierwszego stopnia <H2> </H2> <H3> </H3> Poszczególne tytuły różnią się wielkością czcionki !! <H4> </H4> <H5> </H5> <H6> </H6>
<P> </P> Znacznik akapitu Znacznik podstawowy , następne slajdy pokażą jego modyfikacje.
<P ALIGN=LEFT> </P> Wyrównanie akapitu do lewego marginesu (domyślne ustawienie) <P ALIGN=LEFT> </P>
<P ALIGN=RIGHT> </P> Wyrównanie akapitu do prawego marginesu <P ALIGN=RIGHT> </P>
<P ALIGN=CENTER> </P> Wyśrodkowanie akapitu <P ALIGN=CENTER> </P>
<P ALIGN=JUSTIFY> </P> Wyjustowanie akapitu <P ALIGN=JUSTIFY> </P>
Znacznik końca wiersza <BR>
<HR> Pozioma linia 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>
długość - 50% szerokości strony 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 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ą.
<A HREF="miejsce_docelowe"> Tekst, na którym należy kliknąć 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 – index.html PLIK NR 2 – ala.html PLIK NR 3 – kot.html
<A HREF="ala.html">Ala</A> STRONA GŁÓWNA index.html <A HREF="ala.html">Ala</A> <A HREF="kot.html">Kot</A> <A HREF="index.html">Strona główna</A> <A HREF="index.html">Strona główna</A> <A HREF="kot.html">Kot</A> STRONA NR 2 ala.html STRONA NR 3 kot.html <A HREF="ala.html">Ala</A>
<img src="plik_graficzny"> 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
<IMG SRC="ala.gif" WIDTH=200 HEIGHT=50> Wielkość obrazka możemy regulować za pomocą parametrów : HEIGHT (wysokość) WIDTH (szerokość) <IMG SRC="ala.gif" WIDTH=200 HEIGHT=50>
<MARQUEE>Ala ma kota.</MARQUEE> Animacja Marquee Minimalna definicja Marquee ma postać <MARQUEE>Ala ma kota.</MARQUEE>
BEHAVIOR=SLIDE powoduje, że tekst 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>
<LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt 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
<LI>Pierwszy punkt <LI>Drugi punkt <LI>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: Pierwszy punkt Drugi punkt Trzeci punkt
<UL TYPE=square> <LI>Pierwszy punkt <LI>Drugi punkt <LI>Trzeci punkt </UL> Przykład: Pierwszy punkt Drugi punkt Trzeci punkt
<LI>Pierwszy punkt <LI>Drugi punkt <LI>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: Pierwszy punkt Drugi punkt Trzeci punkt
<OL TYPE=A> - numerowanie według 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
Tabele Ogólne ramy tabeli <TABLE> </TABLE> Koniec tabeli Początek tabeli
Wiersz tabeli <TR> </TR> Koniec wiersza Początek wiersza
<TD> </TD> Komórka w wierszu <TD> </TD> Koniec komórki Początek komórki
Powyższa tabela nie zawiera obramowania !! Przykładowa tabela <TABLE> <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 !!
Przeglądarka wyświetli tabelę tak jak widać poniżej 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> <TR> <TD>aa</TD> <TD>bb</TD> <TD>cc</TD> </TR> <TD>dd</TD><TD>ee</TD><TD>ff</TD> <TR><TD>gg</TD><TD>hh</TD><TD>ii</TD></TR> </TABLE>