HTML - slajady w wordzie, HTMLW1, Narzędzia komputerowe

Język SGML

SGML (Standardized Generalized Markup Language) - międzynarodowy standard metajęzyka
Metajęzyk - język umożliwiający definiowanie nowych języków podrzędnych
Dialekty SGML-a

HTML
XML

Język HTML

HTML (Hyper Text Markup Language) - język opisu strony
Opis strony - określenie struktury strony (rodzaj nagłówka, typ czcionki itp.)
Dokument HTML jest plikiem tekstowym z poleceniami HTML o rozszerzeniu .htm lub .html
HTML został opracowany specjalnie do publikowania w sieci WWW dokumentów hipertekstowych

Język HTML

Własności HTML

łatwość przemieszczania dokumentów między różnymi platformami
niezależność od nośnika - HTML opisuje tylko strukturę tekstu, a nie jego dokładny wygląd

Wygląd tekstu zależy od:

ograniczeń technicznych
obsługiwanej wersji języka
ustawień danej przeglądarki

Podobnie wszędzie wygląda tylko czysta grafika

Standardy HTML

Język zaprojektowany w 1990 r. w instytucie CERN (Szwajcaria)
Standardy opracowuje World Wide Web Consortium (W3C)
Standard aktualnie obowiązujący:
HTML 4.0 (zatwierdzony w grudniu '97)
Mimo standardu przeglądarki traktują niektóre polecenia różnie (rozbieżność w wyglądzie stron WWW)

Edytory HTML

Tekstowe
Graficzne, np.

FrontPage
Pajączek
HomeSite
HotDog

Używanie edytorów tekstowych - lepsza kontrola nad dokumentem

Edytor FrontPage

Edytor Pajączek

Znaczniki

Znaczniki (tags) - kody w nawiasach <> opisujące sposób formatowania strony
Rodzaje znaczników:

parzyste <NAZWA> ... </ NAZWA>
nieparzyste <NAZWA> ...

Nierozpoznane znaczniki są ignorowane
Wielkość liter nie ma znaczenia
Postać komentarza

Parametry znacznika

Wpisywane po NAZWIE w nawiasach
Wartość parametru ujętą w cudzysłów podaje się po znaku '='
Przykład wstawiania parametrów
<NAZWA PAR1="wart1" PAR2="wart2"...>

Polskie znaki

Najbardziej rozpowszechnione standardy kodowania

ISO-8859-2 (Polska Norma) - zalecany
Windows 1250

Polecenie informujące przeglądarkę o standardzie kodowania (w nagłówku dokumentu), np.

<meta http-equiv="content-type" content="text/html";
charset="windows-1250">

Struktura dokumentu

Cały dokument powinien być zawarty między znacznikami
<HTML>...</HTML>
Główne części dokumentu

informacje nagłówkowe (nie wyświetlane)
<HEAD>...</HEAD>
właściwa treść (ciało) dokumentu
<BODY>...</BODY>

W nagłówku dokumentu powinna być informacja
<TITLE>Tytuł strony</TITLE>

Struktura dokumentu

<HTML>

<HEAD>

<TITLE>Tytuł strony</TITLE>

</HEAD>

<BODY>

...właściwa treść dokumentu

</BODY>

</HTML>

Tytuły podrozdziałów

Znacznik tytułu podrozdziału (header)
<Hn>...</Hn>
Cyfra n oznacza stopień tytułu (1-6)
Tytuły różnią się wielkością znaków
Np.

<H1>...</H1>

<H6>...</H6>

Akapity

Zwykły tekst - tekst bez znaczników
Przeglądarka ignoruje w tekście wielokrotne spacje, znaki ENTER itp.
Akapity rozdziela znacznik ...
Łamanie wiersza - znacznik 
Przykład
To jest akapit
A to wiersz

Linia pozioma

Poziomą linię (horizontal rule) na szerokość strony wstawia znacznik <HR>
Linia poprawia przejrzystość tekstu - oddziela logiczne fragmenty tekstu
Przykład
Tekst pierwszego fragmentu
<HR>
Tekst drugiego fragmentu

Atrybuty czcionki

tekst zwykły tekst

tekst czcionka pochyła (italic)

tekst czcionka pogrubiona (bold)

tekst podkreślenie (underlined)

<TT>tekst</TT> czcionka maszynowa

tekst wyróżnienie (zazwyczaj kursywa)

tekst wyróżnienie

(zazwyczaj pogrubienie)

<BLINK>tekst </BLINK> migotanie

tekst indeks górny

tekst indeks dolny

Parametry czcionki

Definiowanie parametrów czcionki: tekst
Parametry

COLOR kolor czcionki, np. "red" lub "#rrggbb" (odcień RGB w zapisie szesnastkowym)

SIZE rozmiar od 1 do 7 (domyślnie 3)

FACE nazwa czcionki, np. "Arial"

Przykład 
Wykład pierwszy

Dostępne kolory tekstu

Najczęściej przy definiowaniu koloru tekstu wystarczy 16 barw, rozpoznawanych przez Netscape'a i Explorera

white black silver gray
maroon red purple fuchsia
green lime olive yellow
navy blue teal aqua

Formatowanie tekstu

Blok cytatów (z marginesami z obu stron)
<BLOCKQUOTE>tekst</ BLOCKQUOTE>
Wyśrodkowanie tekstu: <CENTER>tekst</CENTER>
Listing programu (margines, czcionka Courier)
<LISTING>tekst</LISTING>

Formatowanie tekstu

Brak łamania tekstu
tekst
Wstawienie łamania wewnątrz bloku - znacznik ...
Tekst preformatowany (spacje i znaki nowego wiersza nie są ignorowane)
<PLAINTEXT>tekst</ PLAINTEXT>

Wykazy

Wykazy - systematyczne wyliczenia punktów
Rodzaje wykazów

listy wypunktowane
listy numerowane

Szkielet wykazu wypunktowanego (unordered list): znacznik <UL>...</UL>
Szkielet wykazu numerowanego (ordered list): znacznik <OL>...</OL>
Punkty wykazu tworzy znacznik <LI>

Przykłady wykazów

Lista wypunktowana

Treść wykładu
<UL>
<LI>HTML</LI>
<LI>Java Script</LI>
</UL>

Lista numerowana

Treść wykładu
<OL>
<LI>HTML</LI>
<LI>Java Script</LI>
</OL>

Odnośniki

Odnośnik (odsyłacz hipertekstowy, link, hiperłącze) - wyróżniony fragment tekstu lub grafiki, który posiada adres nowego dokumentu
Po kliknięciu na odnośnik zostaje załadowany dokument, na który wskazuje adres
Odnośnik tworzy znacznik:
<A>tekst odnośnika</A>

Odnośniki

Niektóre parametry odnośnika

HREF="URL" ścieżka do pliku lub URL
NAME="nazwa" definicja skoku do innej części strony

Przykład 1

<A HREF="http://www.lublin.pl">Lublin</A>

Przykład 2

<A NAME="w1">HTML</A>
<A HREF="#w1">Wykład z HTML</A>

Odnośniki do adresu e-mail

Dobry zwyczaj: adres autora strony, np.
<A HREF="mailto:autor@adres">Autor</A>
Napis MAILTO - sygnał dla przeglądarki o uruchomieniu poczty elektronicznej:
Netscape wywołuje własny moduł Mail
Explorer używa Mail and News Readers

Parametry ciała dokumentu

BGCOLOR kolor tła
BACKGROUND tło dokumentu w postaci
pliku z grafiką
TEXT kolor tekstu
LINK kolor odnośników (początkowy)
ALINK kolor odnośników aktywnych
VLINK kolor odnośników wykorzystanych

Grafika na stronie

Podstawowe formaty bitowych plików graficznych (skompresowane)

GIF
JPG (JPEG)

Znacznik do określania grafiki in-line
<IMG>
Obrazy in-line (wbudowane w dokument HTML) są traktowane jak znaki tekstu

Parametry znacznika <IMG>

SRC="URL" adres pliku graficznego
HEIGHT wysokość obrazu w pikselach
WIDTH szerokość obrazu w pikselach
HSPACE=n poziomy odstęp obrazu od reszty
dokumentu
VSPACE=n pionowy odstęp obrazu od reszty
dokumentu

Parametry znacznika <IMG>

ALT="tekst" tekst wyświetlany, gdy nie można
załadować grafiki
ALIGN wyrównanie grafiki do tekstu ("top",
"middle", "bottom", "left", "right")
BORDER=n ramka wokół obrazu (n- ilość pikseli,
n=0 - brak)
LOWSRC="URL" obraz wyświetlany
przed głównym plikiem
USEMAP="mapa" obraz jest mapą graficzną

Parametr ALIGN znacznika <IMG>

"top" - jedna linia tekstu
u góry obrazu, reszta niżej

"bottom" - jedna linia tekstu u dołu obrazu, reszta niżej

Parametr ALIGN znacznika <IMG>

"middle" - jedna linia tekstu na wysokości środka obrazu, reszta niżej

Parametr ALIGN znacznika <IMG>

"left" - tekst oblewa obraz z prawej

"right" - tekst oblewa obraz z lewej

Mapy graficzne

Mapa graficzna - obraz, w którym definiuje się obszary będące odnośnikami do innych dokumentów
Czynności przy tworzeniu mapy

utworzenie rysunku, na którym będą odnośniki
zdefiniowanie nazwy mapy:
<MAP NAME="nazwa_mapy">
określenie obszaru odnośników - <AREA>
po ostatnim znaczniku <AREA> - znacznik </MAP>
wyświetlenie mapy poleceniem <IMG>
<A><IMG USEMAP="#nazwa_mapy" SRC="URL_rysunku"></A>

Parametry znacznika <AREA>

SHAPE kształt pola (RECT - prostokąt,
POLY - wielobok, CIRCLE - koło)
COORDS współrzędne względem lewego, górnego krańca obrazka,
np. dla RECT:
x_lewy, y_górny, x_prawy, y_dolny
HREF="URL" adres odnośnika
ALT="tekst" tekst wyświetlany, gdy nie
można załadować mapy

Przykład dokumentu z mapą

<HTML><BODY>

<MAP NAME="Wejście">

<AREA SHAPE=RECT COORDS="0,0,140,220"

HREF="home.htm">

</MAP>

<CENTER>

<A><IMG USEMAP="#Wejście" SRC="drzwi.jpg"

WIDTH="140" HEIGHT="220"></A>

</CENTER>

</BODY></HTML>

Widok dokumentu z mapą

Edytory map graficznych

Ręczne tworzenie map graficznych - skomplikowane
Edytory map - np. Mapedit, MapThis

HTML

Wyszukiwarka

Podobne podstrony:
HTML - slajady w wordzie, HTMLW2, Narzędzia komputerowe
Labolatorium projektowania układów i systemów sterowania, Narzędzia komputerowego wspomagania projek
Szybkie operowanie tabelami w Wordzie, Dokumenty Textowe, Komputer
Komputer przenośny nowoczesne narzędzie
Narzędzia do zarządzania dyskami, Sytemy operacyjne i sieci komputerowe
Kurs HTML, Dokumenty Textowe, Komputer
Narzędzia diagnostyczne do komputera
Narzędzie do testowania pamięci w Windows Vista, KOMPUTER - SERWIS - EDUKACJA, 02 Windows Vista
W ostatnich latach komputery stały się dla człowieka nieodzownym narzędziem pracy, BHP - darmowy tra
Komputer przenośny nowoczesne narzędzie
17 Komputer to tylko kolejne narzędzie pracy
Narzędzia Montażowe Stosowane w Montażu Sieci Komputerowej
Narzędzia do napraw i testowania komputera
9 Sieci komputerowe II
ARCHITEKTURA KOMPUTEROW1A
SILNIKI GRAFICZNE W GRACH KOMPUTEROWYCH

więcej podobnych podstron