Microsoft PowerPoint - XHTML_1_znaczniki

Transkrypt

Znacznik HTML jest specjalnym ciągiem znaków objętym nawiasami
kątowymi.
Schemat zapisu znacznika:
<znacznik_otwierający atrybut> </ znacznik_zamykający>
przykład
<p> </ p>
p - od paragraph służy do wstawiania interlinii
między akapitami tekstu
znacznik otwierający może zawierać atrybut, który umieszczamy wewnątrz
nawiasu kątowego
przykład
<p id=”identyfikator”> </p>
• nazwy znaczników oraz atrybuty wpisujemy małymi literami
• odwołując się do nazwy pliku, wpisujemy jego nazwę dokładnie tak jak ona wygląda
• wartości atrybutów wpisujemy używając cudzysłowu
• znaczniki zamykające nigdy nie zawierają dodatkowych parametrów
znaczniki, z nielicznymi wyjątkami, występują w parach
wyjątki w XHTML:
<br />
<hr />
<img />
<meta />
<link />
<base />
bezpośrednio przed znakiem / dodaj spację
spacje:
<znacznik_otwierający atrybut=”wartość_atrybutu”>
</ znacznik_zamykający>
tu nie ma spacji
tu jest spacja
tu nie ma spacji
Kilka zasad:
nigdy nie krzyżuj znaczników
<p> coś tam <em> coś tam </em> </p>
zawsze zamykaj wszystkie znaczniki
wpisując znaczniki i atrybuty, zawsze używaj małych liter
używaj cudzysłowów dla wszystkich atrybutów <table border=”1”>
Polecany szkielet dokumentu
Cały dokument powinien być objęty parą znaczników
<html> </html>
Między nimi powinna zaś się znaleźć para znaczników
<head> </head>
która stanowi ramy dla informacji nagłówkowych.
Pozostałe informacje powinny być objęte znacznikami
<body> </body>
Wygląda to następująco:
<html>
<head>
informacje nagłówkowe
</head>
<body>
właściwa treść (ciało) dokumentu
</body>
</html>
Taki szkielet dokumentu jest "bezpieczny" i nie niesie ze
sobą ryzyka jakichś niespodzianek.
Struktura dokumentu
Określamy zgodność ze specyfikacją
pierwszy wpis to prolog – określa wersję języka XML oraz sposób
kodowania znaków:
<?xml version=”1.0 ” encoding=”iso-8859-2”?>
określamy rodzaj używanego do tworzenia strony języka:
<!DOCTYPE html PUBLIC ”-//W3W//DTD XHTML 1.0 Strict//EN”
”http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>
przygotowaliśmy stronę wykorzystującą wyłącznie język XHTML i
ściśle trzymamy się zaleceń specyfikacji.
Uwaga: wielkie litery w deklaracji DTD (Document Type Definition) są
konieczne!
Ramy dokumentu XHTML
<html xmlns=„http://www.w3.org/1999/xhtml” xml:lang=”pl”
lang=”pl”>
</html>
dodatkowe argumenty służą do określenia znaczenia poszczególnych
znaczników wykorzystywanych w kodzie strony
Nagłówek strony
określa para znaczników
<head>
tu są elementy ważne dla konstrukcji strony
</head>
mamy więc :
<html xmlns=„http://www.w3.org/1999/xhtml” xml:lang=”pl” lang=”pl”>
<head>
</head>
</html>
Jakie informacje umieszczamy w nagłówku strony
<head></head>:
czyli wewnątrz znacznika
polskie znaki – standard to ISO 8859-2
stosujemy edytor z modułem konwersji „w locie” (np. kED) !
wstawiamy w sposób tradycyjny tzn. w formacie Windows 1250 a potem
konwersja za pomocą programów-konwertorów
jeśli na stronie używamy języków kilku krajów to stosujemy Unicode
(http://www.unicode.org). Stosuje się UTF-7, UTF-8 lub UTF-16 tzn. format
7-, 8- lub 16-bitowy.
jeśli korzystamy ze strony kodowej ISO 8859-2 to piszemy:
<meta http-equiv=”Content-Type” content=”text/html;
charset=iso-8859-2” />
jeśli korzystamy ze strony kodowej Windows 1250 to piszemy:
<meta http-equiv=”Content-Type” content=”text/html;
charset=windows-1250” />
jeśli korzystamy ze strony kodowej Unicode UTF-8 to piszemy:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” />
tytuł dokumentu
znacznik:
<title>nazwa mojej strony</title>
wstawia tytuł strony widoczny na pasku tytułu przeglądarki
słowa kluczowe i opis strony
wyszukiwarki znajdują strony w Internecie korzystając z tytułu strony, słów
kluczowych (keywords) i opisu strony (description)
znaczniki:
<meta name=”keywords” content=”słowa kluczowe rozdzielone przecinkami ” />
<meta name=”description” content=”krótki opis strony” />
jedno, dwa zdania na temat zawartości strony, które
pojawią się jako wynik szukania. Na ich podstawie
internauta decyduje czy strona jest warta odwiedzenia
inne elementy nagłówka
te, które nie pojawiają się na stronie i maja charakter czysto informacyjny
informacje o autorze strony
<meta name=”author” content=”Twoje nazwisko” />
lub
<meta name=”copyright” content=”nazwisko osoby majacej prawa
autorskie do strony” />
informacje o narzędziu użytym do tworzenia strony
<meta name=”generator” content=”kED” />
informacje o języku strony
<meta name=”language” content=”pl” />
możemy wprowadzić i inne informacje, ale musimy zachować strukturę
znacznika, czyli
<meta name=” ” content=” ” />
tu wpisujemy
nazwę atrybutu
tu wpisujemy
wartość atrybutu
znacznik <meta /> z atrybutem http-equiv
np.
aby odświeżać dokument co x sekund
<meta http-equiv=”refresh” content=”x ” />
aby przenieść internautę po upływie x sekund pod nowy adres zadeklarowany w
sekcji url .
Zastosowanie: zmieniliśmy adres naszej strony ale chcemy zachować jej fanów
więc pod starym adresem umieszczamy plik indeks.html z deklaracją:
<meta http-equiv=”refresh” content=”x: url=http://www.adres.pl” />
aby podać adres autora witryny
<meta http-equiv=”reply-to” content=”adres autora ” />
aby podać datę wykonania strony
<meta http-equiv=”creation-date” content=”data wykonania ” />
znacznik <base />
określa bazowy adres dla dokumentu i wszystkich odnośników znajdujących się w
jego treści (przydatne przy zmianie adresu strony)
<base href=”http://www.adres.pl />
znacznik <link />
możemy dzięki niemu np. dołączyć zewnętrzny arkusz stylów
<link rel=”stylesheet” href=”nazwa.css” type=”text/css” />
możemy też dołączyć w ten sposób zewnętrzny plik zawierający JavaScript np.
plik skrypt.js
Przydatne gdy ten skrypt jest wykonywany na każdej stronie naszej witryny
komentarze
nie wyświetlają się na stronie, maja nam pomagać, np. w edycji strony
<! - - tu wpisuję komentarz do mojej strony- - >
mamy więc :
<html xmlns=„http://www.w3.org/1999/xhtml” xml:lang=”pl” lang=”pl”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=
iso-8859-2” />
<meta name=”keywords” content=”słowa kluczowe rozdzielone przecinkami ” />
<meta name=”description” content=”krótki opis strony” />
<meta name=”copyright” content=”Twoje nazwisko” />
<meta name=”author” content=”Twoje nazwisko” />
<title>nazwa mojej strony</title>
<link rel=”stylesheet” href=”nazwa.css” type=”text/css” />
</head>
</html>
zaczynamy bawić się programem kED 2.1.4.0
instalujemy program i uruchamiamy go
na pasku narzędzi odszukujemy przycisk Utwórz nowy plik , klikamy
strzałkę z jego lewej strony i wybieramy szablon tworzonego dokumentu
np. XHTML 1.0 Strict
teraz wprowadzamy swoje poprawki do wyświetlonej treści i dopisujemy
co trzeba w miejscach, gdzie występują kwadratowe nawiasy (usuwamy
zarówno te nawiasy jak i ich zawartość)
jeśli ręcznie dopisujemy znaczniki to program nam pomaga:
po wpisaniu pełnego znacznika otwierającego automatycznie doda znacznik
zamykający
wyświetli okno z podpowiedziami dotyczącymi dostępnych atrybutów
po wpisaniu nazwy atrybutu automatycznie wstawi cudzysłów
To co używamy w ciele dokumentu czyli wewnątrz znacznika
<body> </body>
Elementy służące do prezentacji tekstu to:
nagłówki
akapity
cytaty
indeksy górne i dolne
znaczniki łamania wiersza
poziome linie
znacznik <div> </div>
służą one do nadania poszczególnym elementom określonej formy
(dokładne formatowanie takiego elementu jest oddzielone od języka
XHTML i weszło w skład CSS)
nagłówki
W dokumentach często wprowadzamy nagłówki.
Służy do tego polecenie
<hx> </hx>
Znak h oznacza heading, natomiast x to stopień nagłówka
(mamy sześć stopni).
Stopień 1, czyli <h1> </h1>, definiuje największy nagłówek
Stopień 6, czyli <h6> </h6>, definiuje nagłówek najmniejszy
Uwaga: znaczniki w przeglądarce WWW nie są wyświetlane. Są one
jedynie interpretowane, tzn. pozwalają "w locie" formatować tekst.
Wprowadźmy nagłówki za pomocą poleceń h1, h2 itd.
<body>
<h1>Tytuł
<h2>Tytuł
<h3>Tytuł
<h4>Tytuł
<h5>Tytuł
<h6>Tytuł
</body>
stopnia
stopnia
stopnia
stopnia
stopnia
stopnia
pierwszego</h1>
drugiego</h2>
trzeciego</h3>
czwartego</h4>
piątego</h5>
szóstego</h6>
I efekt:
Tytuł stopnia pierwszego
Tytuł stopnia drugiego
Tytuł stopnia trzeciego
Tytuł stopnia czwartego
Tytuł stopnia piątego
Tytuł stopnia szóstego
Akapit i wiersz
Gdybyśmy wpisali dłuższy fragment tekstu, rozdzielając w
edytorze akapity za pomocą klawisza Enter,
przeglądarka zignoruje znaki końca wierszy i akapitów w edytorze
i wyświetli jednolity blok tekstu.
Aby rozdzielić akapity, należy posłużyć się poleceniem
<p> tu wpisuję treść akapitu </p>
(p = paragraph)
Strona może zawierać dowolną liczbę akapitów, a każdy z nich jest
oddzielony od pozostałych pustym wierszem. Przerwa ta jest
automatycznie wstawiana przez przeglądarkę – do jej kontroli musimy
użyć CSS.
Aby wprowadzić wcięcie pierwszego wiersza akapitu też musimy użyć
CSS.
Nie nadużywaj możliwości tworzenia wielu akapitów W praktyce
internauta przegląda tylko zawartość dwóch pierwszych ekranów
monitora.
Jeśli publikujemy dużą ilość tekstu, lepiej podzielić go na kilka
części
Przykład:
<p>To jest treść pierwszego akapitu</p>
<p>To jest treść drugiego akapitu</p>
Rezultat:
To jest treść pierwszego akapitu
To jest treść drugiego akapitu
Cytaty
aby zacytować większy fragment tekstu w kodzie strony używamy
znacznika
<blockquote>
tu wpisujemy treść cytatu -- ten tekst będzie nieznacznie wcięty w
porównaniu do pozostałych akapitów
</blockquote>
Aby cytować wewnątrz bloku tekstu stosujemy znacznik
<q> tu wpisujemy treść cytatu </q>
ten tekst będzie ujęty w cudzysłów
do obu znaczników można dodać atrybut cite – pozwala on na określenie
adresu strony, z której pochodzi cytowany tekst, np.
<blockquote cite=”http://onet.pl”>
</blockquote>
Indeks górny i dolny
możemy wymusić prezentację fragmentu tekstu jako indeksu
górnego
lub
dolnego
<sup> </sup>
<sub> </sub>
np.
<p>E=mc<sup>2</sup></p>
<p>E=mc<sub>2</sub></p>
E=mc2
E=mc2
Łamanie wierszy
Niekiedy zdarza się, że chcemy przełamać tekst, nie wprowadzając
przy tym znaku końca akapitu. Możemy wówczas zastosować
pojedyncze polecenie <br />, które przenosi tekst o jeden wiersz
w dół, lecz nie wprowadza dodatkowej interlinii.
Przykład:
To jest pierwszy wiersz< br />To jest drugi wiersz< br />
To jest trzeci wiersz< br />
Rezultat:
To jest pierwszy wiersz
To jest drugi wiersz
To jest trzeci wiersz
Wyróżnienie tekstu
aby pogrubić tekst
<strong> </strong>
aby pochylić tekst
<em> </em>
aby zastosować czcionkę o stałej szerokości
<code> </code>
Twarda spacja
przeglądarka ignoruje wielokrotne znaki spacji wpisywane z
klawiatury i wyświetli tylko jeden znak spacji
Aby wymusić dodatkową spację musimy wstawić znak twardej spacji
&nbsp
Przykład:
To jest tekst normalny
<strong>To jest tekst pogrubiony</strong>
<em>To jest tekst pochylony</em>
Rezultat:
To jest tekst normalny
To jest tekst pogrubiony
To jest tekst pochylony
Znacznik DIV
element <div > </div> jest odpowiedzialny za grupowanie
znaczników
dzięki temu elementowi można tworzyć warstwy w dokumencie
XHTML i pracować na nich
oraz
rozciągać działanie zdefiniowanego za pomocą CSS stylu na
większą liczbę znaczników
<div>
<p>pierwszy blok tekstu</p>
<p> drugi blok teksty</p>
<h1>nagłówek stopnia pierwszego</h1>
</div>
będzie później
Pozioma linia
Często spotykanym elementem jest pozioma linia, którą
wstawiamy za pomocą polecenia
<hr> (ang. horizontal rule).
Pozwala ono wyświetlić w dokumencie poziomą linię, na
szerokość całej strony czy bloku, rozdzielając nią logiczne
fragmenty tekstu, dzięki czemu strona jest bardziej
przejrzysta.
Przykład:
<hr>
Rezultat:
Formatowanie tekstu za pomocą edytora kED
wprowadzasz nazwę znacznika, np. <p
naciskasz spację
edytor podpowie Ci jaki atrybut powinien być następny
po wprowadzeniu kompletnego znacznika otwierającego edytor doda
automatycznie znacznik zamykający
kursor pozostanie pomiędzy znacznikiem otwierającym a zamykającym
– możesz więc zacząć wprowadzać tekst
inny sposób
wprowadzasz tekst
zaznaczysz go
na pasku narzędzi klikniesz potrzebny znacznik np. akapit
dodawanie twardej spacji: naciśnij klawisze Ctrl+spacja
jeśli potrzebnego znacznika nie ma na pasku narzędzi, to
po wprowadzeniu i oznaczeniu formatowanego tekstu kliknij zakładkę
Ściąga (lewa kolumna)
na liście odszukaj potrzebny znacznik i zaznacz go (kliknięcie lewym
przyciskiem myszy)
kliknij przycisk Wstaw całość
listy
Na stronach WWW powszechnie stosuje się listy (ang. list).
Są to po prostu systematyczne wyliczenia jakichś punktów, które w
przeciwieństwie do tekstu o charakterze opisowym w
skondensowany sposób prezentują jakąś myśl czy zespół zagadnień.
Mamy trzy rodzaje list
1. listy punktowane
2. listy numerowane
3. listy definicji
Lista wypunktowana
Aby utworzyć szkielet listy wypunktowanej, należy użyć polecenia
<ul> </ul> (ang. unordered list)
Poszczególne punkty listy wprowadzamy dalej za pomocą
polecenia
<li> </li>
Przykład:
<p>Dlaczego zajmuję się UFO?</p>
<ul>
<li>Uważam, że UFO istnieje</li>
<li>Uważam, że pozaziemskie cywilizacje mogą nam
pomóc</li>
<li>Uważam, że należy się przygotować na spotkanie</li>
</ul>
Rezultat:
Dlaczego zajmuję się UFO?
•Uważam, że UFO istnieje
•Uważam, że pozaziemskie cywilizacje mogą nam pomóc
•Uważam, że należy się przygotować na spotkanie
Lista numerowana
Gdy chcemy utworzyć wykaz numerowany, wówczas stosujemy parę
wskaźników
<ol> </ol> (ang. ordered list)
oraz <li> </li>
Uzyskamy wówczas listę numerowaną za pomocą liczeb arabskich
Przykład:
<p>Dlaczego zajmuję się UFO?</p>
<ol>
<li>Uważam, że UFO istnieje</li>
<li>Uważam, że pozaziemskie cywilizacje mogą nam
pomóc</li>
<li>Uważam, że należy się przygotować na spotkanie</li>
</ol>
Rezultat:
Dlaczego zajmuję się UFO?
1.Uważam, że UFO istnieje
2.Uważam, że pozaziemskie cywilizacje mogą nam pomóc
3.Uważam, że należy się przygotować na spotkanie
lista definicji
stosowane znaczniki
<dl> </dl>
<dt> </dt>
<dd> </dd>
Przykład:
<dl>
<dt>Słowo definiowane</dt>
<dd>opis słowa definiowanego</dd>
<dt>Kolejne słowo definiowane</dt>
<dd>opis kolejnego słowa definiowanego</dd>
<dt>Jeszcze jedno słowo definiowane</dt>
<dd>opis nowego słowa definiowanego</dd>
<dt>Ostatnie słowo definiowane</dt>
<dd>opis ostatniego słowa definiowanego</dd>
</dl>
Rezultat:
Słowo definiowane
opis słowa definiowanego
Kolejne słowo definiowane
opis kolejnego słowa definiowanego
Jeszcze jedno słowo definiowane
opis nowego słowa definiowanego
Ostatnie słowo definiowane
opis ostatniego słowa definiowanego
listy zagnieżdżone
chcemy np. umieścić listę zawierającą podpunkty
Zagnieżdżenie polega na umieszczeniu wewnątrz jednego elementu
innego znacznika, np. w liście umieszczamy jeszcze jedną listę
Przykład:
<ol>
<li>Produkty mleczne
<ul>
<li>mleko 3,2%</li>
<li>jogurt malinowy</li>
<li>śmietanka do kawy</li>
</ul>
</li>
<li>Owoce
<ul>
<li>jabłka</li>
<li>cytrusy
<ul>
<li>pomarańcze</li>
<li>mandarynki</li>
</ul>
</li>
<li>brzoskwinie</li>
<ul>
</li>
</ol>
Rezultat:
1. Produkty mleczne
o mleko 3,2%
o jogurt malinowy
o śmietanka do kawy
2. Owoce
o jabłka
o cytrusy
pomarańcze
mandarynki
o brzoskwinie
Tworzenie list za pomocą edytora kED
W przypadku list wypunktowanych i numerowanych wystarczy
wprowadzić wszystkie pozycje listy
zaznaczyć je
kliknąć odpowiedni przycisk na pasku narzędzi
W przypadku list zagnieżdżonych lub definicji należy wprowadzić
strukturę list ręcznie, czyli
wpisujemy odpowiednie znaczniki otwierające (znaczniki
zamykające – dodawane są automatycznie)
musimy pamiętać o zasadach zagnieżdżania
Grafika na stronie www
Strony WWW zawierają zwykle grafikę, która bardzo urozmaica ich
czytanie - pod warunkiem oczywiście, że korzystamy z graficznego
systemu operacyjnego.
Niektórzy autorzy stron tak się zatracają w ozdabianiu stron, że
zapominają o przepustowości łączy internetowych.
Gdy czytelnik strony nie wyłączy w swojej przeglądarce funkcji
wczytywania grafiki, może stracić dużo czasu i nerwów, oczekując
na wczytanie tak spreparowanej strony.
Warto z umiarem stosować graficzne ozdobniki, zwłaszcza gdy nie
niosą żadnych istotnych treści.
Na stronach WWW są stosowane trzy podstawowe
formaty bitowych plików graficznych
GIF, JPG (JPEG) i PNG
które są z założenia skompresowane (często nawet
dziesięciokrotnie w stosunku do innych popularnych
formatów), a więc zajmują znacznie mniej miejsca niż
grafiki w innych formatach.
Dzięki temu transmisja strony trwa znacznie krócej.
GIF (ang. Graphics Interchange Format)
to format pliku graficznego z kompresją bezstratną
stworzony w 1987 roku przez firmę CompuServe. Pliki
tego typu są powszechnie używane na stronach WWW,
gdyż pozwalają na tworzenie animacji z paletą 256
kolorów i dwustanową przezroczystością.
Wadą formatu GIF jest brak możliwości zapisu plików
graficznych w formacie True color. Wady tej pozbawiony
jest konkurencyjny format PNG
JPEG (wym. dżej-peg lub jotpeg)
to standard kompresji statycznych obrazów rastrowych,
przeznaczony głównie do przetwarzania obrazów
naturalnych (zdjęć satelitarnych, pejzaży, portretów itp.),
charakteryzujących się płynnymi przejściami barw oraz
brakiem lub małą ilością ostrych krawędzi i drobnych detali.
Motywacją do powstania tego standardu było ujednolicenie
algorytmów kompresji obrazów monochromatycznych i
kolorowych.
Algorytm kompresji używany przez JPEG jest algorytmem
stratnym, tzn. w czasie jego wykonywania tracona jest
bezpowrotnie część pierwotnej informacji.
PNG (ang. Portable Network Graphics) to format
plików graficznych oraz system bezstratnej
kompresji danych graficznych.
PNG został opracowany jako następca GIF w 1995
roku.
Grafikę możemy wprowadzić za pomocą polecenia:
<img />
które posiada atrybuty src i alt
src określa źródło czyli obrazek jaki chcemy wstawić
alt definiuje alternatywny tekst dla przeglądarek nieobsługujących
grafiki bądź dla przeglądarek, w których użytkownik wyłączył
wyświetlanie grafiki
<img src="nazwa_pliku" alt="nazwa alternatywna” />
unix (linux) rozróżnia wielkość liter !! a 95% serwerów internetowych
to maszyny uniksowe
nazwy powinny być więc wpisywane dokładnie tak jak nazwano plik,
np. jest różnica między plikami
psinka.jpg i Psinka.jpg
Przykład:
<img src=„psinka.jpg" alt=„Psinka w tulipanach” />
nazwy plików nie powinny zawierać polskich znaków oraz spacji
jeżeli chcemy aby plik miał nazwę dwuczłonową, to zamiast spacji
używamy znaku podkreślenia _
Oreślenie wielkości obrazka
width i
height
<img src=”psinka.jpg" alt=”Psinka w tulipanach”
height=”64” width=”94” />
Osadzanie grafiki za pomocą edytora kED
Umieszczasz kursor w odpowiednim miejscu dokumentu i klikam
odpowiednią ikonę na pasku narzędzi
w nowym okienku wybierasz nazwę obrazka z listy
wypełniam pole Opis(alt)
wypełniam pole Opis(title) – opis pojawiający się w postaci
chmurki
wypełniam pola szerokość i wysokość
naciskam przycisk wstaw
Warto utworzyć sobie katalog, w którym będziesz przechowywać pliki
tworzonej strony
W najprostszym przypadku, gdy obrazek znajduje się w tym
samym katalogu co dokument, wystarczy podać jego nazwę.
Gdy grafiki gromadzimy na serwerze w odrębnym katalogu,
konieczne jest podanie ścieżki dostępu.
Przykład:
<img src="../podkatalog/grafika.jpg "alt="nazwa
alternatywna">

Microsoft PowerPoint - XHTML_1_znaczniki

Transkrypt

Podobne dokumenty

Wiesław BABIK

Kolejny problem z Flash Image Rotator Odp:Kolejny

Lekcja 3: Nawigacja na stronie

Temat 2: Tabela jako szablon strony Zadanie 4: