Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
1
Dokument HTML jest zwykłym
plikiem tekstowym, w którym znajdują się polecenia HTML.
2
Polecenie (znacznik, tag) HTML
jest specjalnym ciągiem znaków objętym nawiasami ostrymi.
3
Znacznik pojedyńczy <BR>
4
Znacznik podwójny Zośka <B> Ala ma kota </B> idzie
Znacznik początkowy Znacznik końcowy
5
ZNACZNIKI OSNOWY DOKUMENTU
6
<HTML> - znacznik rozpoczynający
dokument HTML </HTML> - znacznik kończący dokument HTML
7
<HEAD> - znacznik rozpoczynający
sekcję nagłówkową dokumentu </HEAD> - znacznik kończący sekcję nagłówkową dokumentu
8
<BODY> - znacznik rozpoczynający
treść (ciało) dokumentu </BODY> - znacznik kończący treść (ciało) dokumentu
9
<TITLE> - znacznik rozpoczynający
tytuł strony </TITLE> - znacznik kończący tytuł strony Przykład – jak to należy zapisywać. <TITLE>Tytuł strony</TITLE>
10
Standardowa osnowa dokumentu HTML
11
<HTML> <HEAD> <meta http-equiv="content-type" content="text/html; charset=iso "> <TITLE>Ala ma kota ???</TITLE> </HEAD> <BODY> właściwa treść (ciało) dokumentu </BODY> </HTML>
12
Podstawowe znaczniki HTML.
13
Zośka <B> Ala ma kota </B> idzie
Czcionka pogrubiona Zośka <B> Ala ma kota </B> idzie Znacznik końcowy Znacznik początkowy
14
<I>Ala ma kota </I>
Czcionka pochylona <I>Ala ma kota </I>
15
Czcionka podkreślona <U> </U>
16
<STRIKE> </STRIKE>
Czcionka przekreślona <STRIKE> </STRIKE>
17
<SUP> </SUP>
Superskrypt (indeks górny) <SUP> </SUP> Przykład !! Y=AX2+BX+C Y=AX<SUP>2</SUP>+BX+C
18
H2SO4 <SUB> </SUB>
Subskrypt (indeks dolny) <SUB> </SUB> Przykład !! H2SO4 H<SUB>2</SUB>SO<SUB>4</SUB>
19
Kolory czcionki <FONT COLOR="nazwa_koloru">a</FONT> UWAGA ! NAZWA KOLORU W JĘZYKU ANGIELSKIM !!! <FONT COLOR="RED"> ala </FONT>
20
<FONT SIZE="x"> dfg</FONT>
Wielkość czcionki <FONT SIZE="x"> dfg</FONT> x = 1 - 7
21
<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
22
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>
23
<P> </P> Znacznik akapitu
Znacznik podstawowy , następne slajdy pokażą jego modyfikacje.
24
<P ALIGN=LEFT> </P>
Wyrównanie akapitu do lewego marginesu (domyślne ustawienie) <P ALIGN=LEFT> </P>
25
<P ALIGN=RIGHT> </P>
Wyrównanie akapitu do prawego marginesu <P ALIGN=RIGHT> </P>
26
<P ALIGN=CENTER> </P>
Wyśrodkowanie akapitu <P ALIGN=CENTER> </P>
27
<P ALIGN=JUSTIFY> </P>
Wyjustowanie akapitu <P ALIGN=JUSTIFY> </P>
28
Znacznik końca wiersza
<BR>
29
<HR> Pozioma linia Długość linii od lewego marginesu do
prawego marginesu Znacznik podstawowy , na następnych slajdach pokażemy jego modyfikacje.
30
Pozioma linia o grubości 5 pikseli
<HR SIZE=5>
31
Linia o długości 300 pikseli
<HR WIDTH=300>
32
długość - 50% szerokości strony
Pozioma linia : długość - 50% szerokości strony <HR WIDTH=50%>
33
Pozioma linia o kolorze czerwonym
<hr color="red">
34
Wyśrodkowanie na stronie
wskazanego elementu, np. tekst lub obrazek. <CENTER> </CENTER>
35
<!-- ... --> 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.
36
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ą.
37
<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 ??
38
Miejsce docelowe – inna strona internetowa
<A HREF=" Polska</A> <A HREF=" ma kota ?</A>
39
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 – ala.html PLIK NR – kot.html
40
<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>
41
<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
42
<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>
43
<MARQUEE>Ala ma kota.</MARQUEE>
Animacja Marquee Minimalna definicja Marquee ma postać <MARQUEE>Ala ma kota.</MARQUEE>
44
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ę.
45
BEHAVIOR=ALTERNATE powoduje,
że tekst wyrusza od pierwszego brzegu, dociera do drugiego i "odbija się", powracając w kierunku pierwszego.
46
Przykład ! <MARQUEE BEHAVIOR=ALTERNATE > Ala ma kota! </MARQUEE>
47
<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
48
<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
49
<UL TYPE=circle> <LI>Pierwszy punkt <LI>Drugi punkt
<LI>Trzeci punkt </UL> Przykład: Pierwszy punkt Drugi punkt Trzeci punkt
50
<UL TYPE=square> <LI>Pierwszy punkt <LI>Drugi punkt
<LI>Trzeci punkt </UL> Przykład: Pierwszy punkt Drugi punkt Trzeci punkt
51
<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
52
<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
53
<OL TYPE=i> - numerowanie według
małych liczebników rzymskich <OL TYPE=1> - numerowanie według liczebników arabskich
54
Tabele Ogólne ramy tabeli <TABLE> </TABLE> Koniec tabeli Początek tabeli
55
Wiersz tabeli <TR> </TR> Koniec wiersza Początek wiersza
56
<TD> </TD>
Komórka w wierszu <TD> </TD> Koniec komórki Początek komórki
57
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 !!
58
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
59
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 !
61
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>
Podobne prezentacje
