HTML

Transkrypt

HTML

Technologie informacyjne
Mechatronika PWSW
W4 -24.XI
Pakiet Office – edytor
HTML
Superaplikacja biurowa – MS- OFFICE
Microsoft Office to pakiet aplikacji biurowych wyprodukowany przez firmę
Microsoft.
Popularny - powszechnie wykorzystywany w firmach i przez zwykłych
użytkownikow domowych.
Programy składające się na Microsoft Office są przeznaczone na platformę
Microsoft Windows oraz Apple Mac OS X, mogą zostać uruchomione na
innych systemach (GNU/Linux, FreeBSD itp.)
wersje: starsze,
XP, 2003, 2007, 2010
2
W skład pakietu MS Office Basic wchodzą:
− Microsoft Word (edytor tekstu)
− MicrosoA Excel (arkusz kalkulacyjny)
− MicrosoA PowerPoint (tworzenie prezentacji multimedialnej)
− MicrosoA Oﬃce Picture Manager (przeglądarka obrazow, prosta edycja zdjęć)
Ponadto:
− MicrosoA Outlook (program pocztowy, kalendarz).
− MicrosoA Access (tworzenie i obsługa baz danych)
− MicrosoA OneNote (robienie notatek, dodawany od wersji 2003)
− MicrosoA Publisher (tworzenie publikacji prasowych)
− MicrosoA Visio (edytor schematów)
− MicrosoA Oﬃce SharePoint Designer (poprzednio FrontPage; tworzenie i edycja stron
WWW)
− MicrosoA Project (zarządzanie harmonogramem projektów)
i inne
nawet
Microsoft Office Communicator (Komunikator internetowy)
3
MS Powerpoint
Krótko możliwości (przećwiczymy na laboratorium)
Widoki: slajd, sortowanie slajdów, notatki, wyświetlenie
prezentacji
Podstawowe elementy slajdu:
- tekst
- grafika (obrazy, wykresy, schematy organizacyjne, równania matemat.)
- dźwięk
Możliwości:
- sterowanie tempem
- efekty wizualne (animacje, przejścia slajdów)
4
EDYTORY TEKSTU - wprowadzenie
Podział edytorów
tekstu ASCII
dokumentu redagowanego
• NC-edit
• Notatnik
• vi - unix
• MS WordPad (Write)
• MS Word
• WordPerfect
inne
• Write
• WordStar
• ChiWriter
• TAG
• Tech
• Works
• AmiPro
• Open Office
5
Pośrednictwo użytkownika edytora MS Word
♦ składowe okna:
• menu operacji
• paski narzędzi
• pasek stanu
• menu podręczne
♦ możliwości:
• praca z wieloma dokumentami równocześnie (menu Okno)
• podział okna (dokumentu) na dwie części
WYSIWYG (what you see is what you get)
„masz to co widzisz”
6
♦ podział logiczny:
sekcje
- wygląd stron
akapity (paragrafy) - wygląd fragmentów stron (nowy wiersz)
obiekty (rysunki, wzory, wykresy, tabele, pola tekstowe)
znaki
operacje: Wstaw
⇒ Znak podziału
⇒ Sekcji
Wstaw ⇒
Obiekt |
Rysunek | Pole
tekstowe
Enter
- koniec akapitu
sekcja 1
sekcja 2
sekcja 3
Z
naki
7
♦ podział redakcyjny:
• strony
• wiersze
Istota:
• automatyczny podział tekstu na
strony
• automatyczny podział tekstu na
wiersze
Ale podział na sekcje nie jest
automatyczny !
8
Układ strony
Najważniejsze opcje:
- Rozmiar
- Orientacja
- Marginesy – proponowane/niestandardowe
Podgląd wydruku w ikonie Office w lewym
górnym rogu ekranu
9
AKAPIT - 1 lub więcej wierszy stanowiących całość logiczną,
zakończony znakiem końca akapitu.
ŁAMANIE WIERSZY odbywa się AUTOMATYCZNE !!!
Naciśnięcie ENTER wymusza zmianę wiersza a więc jest
początkiem nowego akapitu.
AKAPIT posiada zawsze całkowitą liczbę wierszy (jeden
lub więcej).
Niewskazane
• wiele spacji
• puste akapity jako odstępy (wykonywać
przez parametry akapitu – odstęp przed i
po)
10
Położenie
akapitów
wcięcie 1-go
wiersza
marginesy strony
wcięcie
prawostronne
wcięcie
lewostronne
odstęp po
sumuje się
odstęp przed
Tylko tak robimy –
przez parametry
akapitu – Format
Akapit
11
Odstępy wewnątrz akapitu
- spacja
- NORMALNA
- NIEROZDZIELAJĄCA (CRTL+SHIFT + SPACJA)
- tabulatory (większe odstępy)
- kolumny
- tabela
ENTER – koniec akapitu (można usuwać)
SHIFT+ENTER – wymuszone złamanie akapitu
12
Formatowanie czcionki – łatwe ale....
x2 - indeksy górne i dolne
Λ∞ ♦  ω α - Wstaw symbol
italicc
itali
13
Nawigacja w dokumencie
♦ typowa:
• myszka + paski przewijania
• klawiatura - o znak, wiersz, akapit, ekran, pocz./koniec
Klawisze
← →
↓ ↑
CTRL+ → CTRL+ ←
Home/End
CTRL+ ↓/CTRL+↑
PgDn/PgUp
CRTL+Home CTRL+End
Skok kursora
o znak
o wiersz
o słowo w prawo, lewo
na początek/koniec wiersza
o akapit
o ekran
początek/koniec dokumentu
♦ inne możliwości:
• skok do specyficznego miejsca (wiersz, strona, sekcja, obiekt)
menu Edycja ⇒ Przejdź do, makroklawisz Ctrl-G (ang. go to), klawisz
funkcyjny F5
14
Ważniejsze operacje
Zaznaczanie i operacje edycyjne
♦ typowe:
• wprowadzanie + usuwanie + przemieszczanie + kopiowanie
bezpośrednio + schowek
znaki, wycinki
♦ tryb wstawiania/zastępowania:
• przycisk w pasku stanu
• klawisz Insert (zmiana trybu wstawianie-zastępowanie)
Techniki - schowek - przeciąganie
Kasowanie znaków (Delete, Backspace)
15
Widoki dokumentu
• widok normalny – wpisywanie, edycja i wstępne formatowanie
• widok wydruku – podgląd w ikonie Office
wszystkie szczegóły wyglądu stron dokumentu
wstawianie i rozmieszczanie obiektów
edycja nagłówków i stopek
ustawiania marginesów
ustawianie układu kolumnowego
• podgląd wydruku
• widok konspektu - wielopoziomowe listy wyliczane
Widoczność znaków niedrukowanych
- narzędzie
¶
widzimy znaki reprezentujące zmiany wiersza,
spacje, tabulatory, wymuszone zakończenia strony,
sekcji itp.
16
Sprawdzanie poprawności pisowni i gramatyki
♦ na bieżąco:
• Narzędzia ⇒ Opcje ⇒ Pisownia i gramatyka
•Menu Recenzja w Office 2007
♦ jednorazowo:
• Narzędzia ⇒ Pisownia i gramatyka
• przycisk paska narzędzi
• F7
• kolejno:
propozycje zmiany wyrazu
ręczna edycja wyrazu
rezygnacja ze zmiany
Dzielenie wyrazów na sylaby na prawym marginesie:
Menu Narzędzia – Język – Dzielenie wyrazów (lub Układ strony! w Office2007)
F4 - powtarzanie ostatniej operacji (przydatne)
malarz formatów
17
Szukanie i zastępowanie
♦ operacje:
• Edycja Znajdź
• Edycja Zamień
lub
lub
Ctrl-F (ang. Find)
Ctrl-H (ang. cHange)
Narzędzia główne
Wstawianie obiektów (grafika i inne)
menu Wstawianie
18
Tworzenie i wykorzystanie stylów do formatowania
Styl – nazwany zestaw parametrów dla akapitu – właściwości akapitu – wcięcia
odstępy itp., czcionka- wielkość, krój itd., obramowania, język itp.)
• ułatwia jednolite formatowanie
• tylko dla stylów Nagłówek możliwe utworzenie spisu treści
Style (okienko stylów)
- nowy styl,
- modyfikacja
- dodawanie do meny szybkich stylów
Równania matematyczne
Wstaw⇒ Obiekt⇒Microsoft Equation 3.0,
Bezpośrednio dostępne w Office 2007 w menu Wstawianie
Dodatkowe
narzędzie,
pasek
elementów
najczęściej
występujących w równaniach, rozwijane narzędzia paska.
Uwaga: Najpierw wybierać strukturę (np. ułamek, indeksy) a
potem w odpowiednie pola wstawiać obiekty z klawiatury lub z
paska
1 2
x −1 = ∑ xo ∫∫ xdx
2
20
Obramowania i cieniowania
Elementy które można obramować:
• Znaki
• Słowa
• Dłuższy akapit
• Tabele
• Rysunki
• Strona
21
Tabele
Sposoby wstawiania tabeli:
· lub menu Wstawianie/Tabela ⇒ Wstaw tabelę
Narzędzie Rysuj tabelę (tabele o strukturze nierównomiernej)
komórki scalone
Poruszanie się po tabeli – klawisze nawigacyjne, TAB, SHIFT+TAB,
klikanie myszką
22
Inne możliwości
Tabulatory – standardowe i własne (odstępy poziome i wyrównanie)
TABULATOR – pozycja, do której wykonać można skok poziomy
poprzez użycie klawisza tabulacji TAB, zastępuje użycie wielu spacji
(co nie jest zalecane)
Pozycje tabulatorów widoczne na linijce górnej
Typy tabulatorów:
• Wyrównanie do lewej
• Wyrównanie do prawej
• Wyrównanie do środka
• Dziesiętny (dla liczb) – wyrównanie do kropki lub przecinka dziesiętnego
Nazwisko
Kowalski
Nowak
Malinowski
Data
10.10.1999
1.11.1987
2.02.1988
Cecha
wysoki
niski
średni
Premia
1500,00
1456.50
50,90
Powielenie tabulatorów dla nowego - wstawianego akapitu
23
Podział na sekcje
Podział dokumentu na sekcje umożliwia:
• Zróżnicowanie liczby kolumn gazetowych
•
Zróżnicowanie formatowania strony (czasem potrzebna 1
strona poziomo, obrócona o 90o)
• Zróżnicowanie nagłówków i stopek (np. dla rozdziałów)
Podział na sekcje:
• 1 sposób – wstawianie znaków końca sekcji (menu Układ strony
– znaki podziału)
• 2 sposób – zaznaczenie fragmentu tekstu i ustalenie liczby
kolumn – podział automatyczny
Znak podziału kolumny – Układ strony/kolumny
24
Listy – Narzędzia główne/ Akapit – ikony dla list
•
•
wyliczanie
numerowanie (w tym konspekty numerowane – lista
wielopoziomowa)
Nagłówki i stopki – menu Wstawianie (tytuł rozdziału, numer
strony) – zróżnicowane dla sekcji
Numery stron – menu Wstawianie - Numer strony
Spisy treści – KONIECZNY STYL NAGŁÓWKOWY! DLA AKAPITÓW
TYTUŁOWYCH (Nagłówek1, Nagłówek2..)
Menu Odwołanie - Indeks i spisy
25
Inne możliwości:
• Tezaurus – synonimy,
• Tłumaczenie
• Przypisy
• Recenzja (śledź zmiany) – poprawki widoczne lub nie
26
Strony WWW (World Wide Web)
Mosaic – pierwsza przeglądarka 1993
• Internet Explorer
• Opera
• Firefox(Mozilla)
• Safari
• Chrome(Google)
HTML
HTML (ang. HyperText Markup Language, pol.
hipertekstowy język znaczników) – język wykorzystywany
do tworzenia stron internetowych
HTML – kod źródłowy języka, można bezpośrednio
pisać korzystając z edytora tekstu nieformatowanego
(ASCII) np. Notatnik – zapis w pliku z rozszerzeniem
htm lub html
HTML
• zdefiniowanie sposobu wizualnej prezentacji
dokumentu w przeglądarce internetowej,
• osadzanie ciągów instrukcji języków skryptowych,
wpływających na zachowanie przeglądarek lub innych
parserów HTML.
Dynamiczny HTML lub DHTML (ang. Dynamic
HyperText Markup Language, dynamiczny hipertekstowy
język znaczników)
• techniki służące do dynamicznej zmiany treści,
wyglądu, zachowania dokumentu HTML w
przeglądarce
• umożliwiające interakcję strony WWW z
użytkownikiem i stosowanie efektów wizualnych
• plik HTML - tekst nieformatowany – małe pliki
łatwe do przesyłu w sieci
Znaczniki (tagi) – postać ogólna
<ZNACZNIK atrybuty> zawartość </ZNACZNIK>
atrybuty są opcjonalne (niekonieczne)
PODSTAWOWA STRUKTURA dokumentu HTML
konfiguracja
treść
strony
<HTML>
<HEAD>
<TITLE> Tytuł w nagłówku okna </TITLE>
</HEAD>
<BODY>
Tu są elementy pojawiające się na stronie
</BODY>
</HTML>
Przykład
<A href="jakiś_adres"> Onet </A>
nazwa
atrybutu
znacznik
otwierający
wartość
atrybutu
zawartość
znacznik
zamykający
Znaczniki podstawowe (jest ich ok. 80)
Strukturalne, np .
H1 – nagłówek
P – akapit
TABLE - tabela
DIV, SPAN - grupujące
Prezentacyjne – określające formę – np.
B – pogrubienie
I – italic
Hiperłącza (kotwice)
A
Zagnieżdżanie znaczników
<P> Tekst1<B><I> Tekst2 </I> Tekst 3</B></P>
Tekst1
Tekst2
Tekst3
<TD><IMG src="obraz.jpg" /></TD>
obrazek w komórce tabeli
Znaczniki elementów pustych
<ZNACZNIK />
przykładowo:
<BR /> wymuszona zmiana wiersza
<IMG /> grafika
<INPUT /> pole formularza
można pisać:
<BR> </BR> lub <BR/>
lecz zgodnie z XHTML powinno być:
<BR />
ze spacją
Wybrane znaczniki …
Akapit tekstowy - znacznik <P> Przykłady:
<P align="center"> Tytuł </P>
<P align="left"> Tytuł2 </P>
wybór kroju, koloru, rozmiaru czcionki przez atrybut
style i jego cechy – o tym za chwilę
Dawniej określał to znacznik <FONT> ale niezalecany dla nowszych
standardów HTML
Akapity nagłówkowe określonych gotowych stylów
<H1> Nagłówek pierwszy </H1>
<H2> Nagłówek drugi </H2>
<H3> Nagłówek trzeci </H3>
<H4> Nagłówek czwarty</H4>
<H5> Nagłówek piąty</H5>
<H6> Nagłówek szósty</H6>
Linie poziome
znacznik HR
pusty – nie ma znacznika zamykającego
<HR SIZE="7" WIDTH="400" COLOR="yellow" />
<HR SIZE="8" WIDTH="100" ALIGN=left COLOR="navy" />
white aqua silver gray blue
fuchsia lime red teal olive yellow maroon navy
Kolory
Oprócz nazw ang. można podawać 3 dwupozycyjne liczby w
układzie szesnastkowym (cyfry 0123456789ABCDEF),
określające nasycenie składowych RGB (red, green, blue)
od 00 (minimum) do FF (maksimum = 25510)
np.
#17AACF
R G B
czyli np. #00FF00 to zielony
Styl czcionki
<B> tekst </B>
<I> tekst </I>
<U> tekst </U>
pogrubiona
kursywa
podkreślona
Stosuje się tylko lokalnie, np. wewnątrz akapitu
dla krótkiego fragmentu tekstu
<P>Litwo, <B> Ojczyzno </B> moja</P>
tylko jedno słowo pogrubione
Kolor tła strony – jako atrybut znacznika BODY
<BODY BGCOLOR="nazwa koloru">
poprawniej:
<BODY style="background-color:nazwa koloru">
motywy lub obrazek w tle strony można
zdefiniować innymi parametrami stylu dla BODY
– o tym za chwilę
Tabele
<TABLE BORDER="1">
….
<TR>…</TR> znacznik wiersza
<TD>…</TD> znacznik kolumny
</TABLE>
Przykład:
<TABLE BORDER="1">
<TR> <TD> AA </TD> <TD> AB </TD></TR>
<TR> <TD> BA </TD> <TD> BB </TD> </TR>
<TR> <TD> CA </TD> <TD> CB </TD> </TR>
</TABLE>
Lista wypunktowana
<UL>
<LI> tekst punktu pierwszego </LI>
<LI> tekst punktu drugiego </LI>
<LI> tekst punktu trzeciego </LI>
</UL>
Lista numerowana
<OL>
<LI> tekst punktu pierwszego </LI>
<LI> tekst punktu drugiego </LI>
<LI> tekst punktu trzeciego </LI>
</OL>
Przykład
<ol>
<li>Punkt 1.</li>
<li>Punkt 2.
<ul>
<li>Podpunkt 1.</li>
<li>Podpunkt 2.</li>
</ul>
</li>
</ol>
efekt
1. Punkt 1.
2. Punkt 2.
• Podpunkt 1.
• Podpunkt 2.
Grafika
znacznik IMG
<IMG SRC="ścieżka_do_pliku/nazwa_pliku" />
<IMG border="0" src="email_7.gif" width="55" height="45" />
<IMG SRC="OBRAZY/plik.jpg" HEIGHT="80" />
folder podrzędny
względem tego, w
którym jest plik
HTML
Odsyłacze (link – hiperłącze)
Odsyłaczem jest konstrukcja, która wskazuje pewien adres (zakładka na tej
samej stronie, inna strona, inny adres URL) i pozwala skoczyć do niego za
pomocą kliknięcia na niej myszką.
<A HREF= "adres " >
Tekst (lub obrazek), który należy kliknąć
</A>
Np.
<A HREF= " http://www.wp.pl" > Wirtualna Polska </A>
<A HREF="http://www.microsoft.com/poland/”> Możesz
zaglądnąć pod ten adres </A>
<A HREF="./reklama.htm"> <IMG SRC="reklama.jpg" >
</A>
Formularze
<FORM>
<SELECT name="Typy" multiple="multiple">
<OPTION selected="selected">Rock and roll</OPTION>
<OPTION>Jazz</OPTION>
<OPTION>Blues</OPTION>
ta
</SELECT>
sama
nazwa
<INPUT type="RADIO" name="wybor" value="p" />Podstawowe
<INPUT type="RADIO" name="wybor" value="s" />Średnie
<INPUT type="RADIO" name="wybor" value="w" />Wyższe
Wpisz tekst:<INPUT type="text" name="T1" size="20"/>
<INPUT type="submit" value="OK" name="B1" />
<INPUT type="reset" value="Reset" name="B2" />
cd. …
<INPUT TYPE="CHECKBOX" NAME="ok" VALUE="B" /> OK
<TEXTAREA NAME="TEKST" ROWS="5" COLS="20">
MIEJSCE NA WIĘKSZY TEKST
</TEXTAREA><BR />
</FORM>
efekt…
Dla obsługi danych wpisanych do formularzy
(np. ich wysłanie na serwer w celu zapisu czy
też analizy) konieczne jest zastosowanie
specjalnych metod
Przykład dokumentu HTML
<HTML>
<HEAD>
<TITLE> Moja strona </TITLE>
</HEAD>
<BODY bgcolor="gray">
<H1> To jest moja strona </H1>
<HR size="2" align=left color="navy" />
<TABLE BORDER="3">
</TABLE>
<UL>
<LI> <A HREF='http://www.onet.pl>Onet</A>
<LI> <A HREF='http://www.google.pl>GOOGLE</A>
<LI> <A HREF='http://www.interia.pl>Interia</A>
</UL>
</BODY>
</HTML>
HEAD
tabela
lista
hiperłączy
BODY
CSS – arkusze stylów
opiera się na zasadzie określania cech elementy dzięki
atrybutowi style
<ZNACZNIK style="cecha:wartość"> ...
Styl może mieć wiele cech, np.:
<P style="font-size:20px;color:blue"> ...
<TABLE style=" background-color:#ff0000; border:2px solid red;"> ...
cechy stylu oddzielamy średnikami
Przykładowe cechy stylów
Opis
Styl
Przykładowa wartość
background-color
kolor tła
#ff0000 albo rgb(255,0,0)
blue
background-image
adres tła graficznego
url('rys1.gif ')
border-color
kolor ramki
red
border-style
styl i wygląd obramowania
dotted
dashed
solid
border
wiele cech obramowania
2px solid yellow
color
kolor tekstu
yellow
#669933
font-family
rodzaj oraz rodzina czcionki
Arial sans-serif
font-size
wielkość czcionki
14px
2cm
font-style
styl czcionki
italic
font-weight
grubość (waga) czcionki
bold lighter
height
wysokość elementu
10px
3mm
width
szerokość elementu
odległość od lewej (górnej)
krawędzi
100px
10cm
3mm
position
określenie współrzędnych
elementu
fixed relative
margin
odległości od zewnętrznego 3px 3px 10px 20px
elementu
margin-top
margin-bottom
margin-left
margin-right
każdy margines osobno
text-align
wyrównanie poziome tekstu left center justify
text-decoration
wygląd tekstu
underline
vertical-align
wyrównanie w pionie
top bottom
padding
oddalenie wewnętrznego
elementu
left
top
5cm
definiowany element
element
wewnętrzny
element
zewnętrzny
Przykład zastosowania margin i padding
<DIV style="border:1px solid red; width:600px;background-color:yellow;">
<DIV style=" border:1px solid black; margin:20px 20px 20px 20px;padding: 100px 10px
100px 30px;text-align:center;background-color:grey;" >
<P style="background-color:green;">Tekst w komórce</P>
</DIV>
</DIV>
Obejrzeć efekt w
przeglądarce
Sposoby definicji stylów znaczników
1 sposób: bezpośrednio w elemencie
<P style="color:red"> To jest tekst </P>
To jest tekst
2 sposób: w bloku HEAD wewnątrz znacznika <STYLE>
<HTML><HEAD><TITLE>Indeks: elementy</TITLE>
<STYLE type="text/css">
p {font-size: 44px;}
table {background-color:#ff0000;}
</STYLE>
</HEAD>
<BODY>
<P> To jest tekst 1</P>
<TABLE> <TR><TD>AAA</TD></TR></TABLE>
</BODY></HTML>
dla akapitów
dla tabel
Można zestaw cech nazwać – jest to tzw. klasa – i
stosować atrybut class dla różnych znaczników
. (kropka)
.czerwony {background-color:#ff0000;}
</STYLE>
zastosowania
klasy
</HEAD>
<BODY>
<TABLE class="czerwony"><TR><TD>A</TD><TD>B</TD></TR></TABLE>
<P class="czerwony"> Tekst </P>
</BODY></HTML>
A
Tekst
B
tabela
akapit
Przykład2:
<style type="text/css">
body, td, p {font: 14px helvetica, sans-serif; border:2px solid red}
table {border:2px solid black;}
.gruby {font: bold 18px helvetica, sans-serif;}
</style>
i dalej..
<TABLE>
<TR><TD>A</TD><TD>B</TD></TR>
</TABLE>
<p class="gruby"> tekst akapitu </p>
A
B
tekst akapitu
Można też stosować identyfikatory znaczników
#
#maly {font-size:10px;}
#duzy {font-size:30px;}
</STYLE>
</HEAD>
<BODY>
<P id="maly"> Tekst 1 </P>
<P id="duzy"> Tekst 2 </P>
</BODY></HTML>
Tekst 1
Tekst 2
3 sposób: W osobnym pliku robimy definicje stylów
Plik style.css
p {font-size: 44px;}
.czerwony {background-color:#ff0000;}
Plik index.html
<LINK rel=stylesheet href="style.css" type="text/css" />
</HEAD>
<BODY>
<TABLE class="czerwony">
<TR><TD>AAA</TD></TR></TABLE>
</BODY></HTML>
Przykład skryptu HTML z arkuszem stylów
<HTML>
<HEAD>
<TITLE> Moja strona </TITLE>
<link rel=stylesheet href="style.css" type="text/css">
</HEAD>
<BODY>
plik style.css
<H1> To jest moja strona </H1>
body{ background-color:gray}
table{border-width:3px;}
<HR size="2" align=left color="navy">
.lista {font-size:20px}
<TABLE>
</TABLE>
<UL class="lista">
<LI> <A HREF='http://www.onet.pl>Onet</A> </LI>
<LI> <A HREF='http://www.google.pl>GOOGLE</A> </LI>
<LI> <A HREF='http://www.interia.pl>INTERIA</A> </LI>
</UL>
</BODY>
</HTML>
Javascript
JavaScript jest to interpretowany, zorientowany
obiektowo, skryptowy język programowania.
JavaScript jest oddzielnym językiem (nie jest
uproszczoną wersją Javy).
Może być osadzany w dokumentach HTML.
Javascript jest łatwy w nauce i pozwala na pewne
„zdynamizowanie” stron internetowych.
Przeglądarka IExplorer pyta o zezwolenie na wykonanie
skryptu.
Wstawienie skryptu do dokumentu HTML
Skrypty JavaScript są zagnieżdżane w dokumentach
HTML. Skrypt JavaScript umieszczane są między
znacznikami <SCRIPT> i </SCRIPT>.
<SCRIPT LANGUAGE="JavaScript">
treść skryptu
</SCRIPT>
<HTML><HEAD></HEAD>
<BODY>
treść skryptu 1
</SCRIPT>
treść skryptu 2
</SCRIPT>
</BODY></HTML>
Może istnieć wiele skryptów naprzemiennie z
pozostałym kodem HTML
Aby tworzyć działające skrypty JavaScript
wymagane są:
- jakaś metoda wprowadzania i
przechowania danych (liczb, tekstów)
- jakieś instrukcje, które umożliwią
obliczenia wyników
- jakieś metody pokazania wyniku
Wykorzystanie skryptu Javascript w dokumencie HTML
<HTML><HEAD></HEAD>
<BODY>
// obiekt document i jego metoda write - wypisanie tekstu
document.write ("To jest zwykły tekst");
// wysyłamy też znacznik HTML
document.write ("<BR />");
x=5; //nadajemy wartość zmiennej
y=13; //nadajemy wartość zmiennej
wynik=13; //nadajemy wartość zmiennej (obliczenie)
// ... i wyświetlamy jej wartość
document.write("Wartość <I>wyniku</I> : "+wynik);
</SCRIPT>
<P> a to już akapit poza skryptem</P>
</BODY></HTML>

HTML

Transkrypt

Podobne dokumenty

Wprowadzenie do języka html

TWORZENIE WITRYNY INTERNETOWEJ

HTML

budowa strony www w html

Konspekt - Budowa i struktura dokumentu HTML

Tagi HTML Przykład Rozwiązaniem zadania powinien być program

Zapisz do PDF - MissZmyslow.pl

Projekty - Politechnika Wrocławska