Język \(X\)HTML [tryb zgodności]

Transkrypt

Język (X)HTML
Podstawowe znaczniki
i parametry
dr Konrad Dominas / UAM
Szablon dokumentu (X)HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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="Description" content="Opis kaŜdej strony" />
<meta name="Keywords" content="Słowa kluczowe" />
<meta name="Author" content="Autor strony" />
<title>Nazwa strony</title>
</head>
<body>
Zawartość strony, tzw. content
</body>
</html>
Sekcja head i body
Sekcja head (nagłówek witryny) zawiera:
•
•
•
•
tytuł strony internetowej między znacznikami <title>…</title>;
metatagi z rozszerzeniem http-equiv (formatowanie dokumentu przez
przeglądarki internetowe) i name (metadane przetwarzane przez
wyszukiwarki internetowe, kontekst informacji);
CSS (Kaskodowe Arkusze Stylu) zewnętrzne (w postaci hiperłączy) i
wewnętrzne odnoszące się do elementów zawartych w sekcji body;
skrypty uruchamiane zarówno po stronie uŜytkownika (JavaScript,
DHTML), jak i po stronie serwera (PHP, CGI, ActiveX).
Sekcja body (treść dokumentu, zawartość) zawiera:
•
właściwą (widoczną) część dokumentu: tekst (zawartość) strony wraz z
tagami opisującymi zawartość i odnośnikami do CSS (wewnętrznych).
Podstawowe znaczniki cz. 1
… znacznik akapitu;
… przełamanie linii, koniec linii; znacznik moŜna
stosować np. w obrębie akapitu;
<div>…</div> znacznik bloku (z elementami). Elementem div
moŜna obejmować dowolne grupy znaczników, np. listy, tabele,
akapity, słowniki, itp.;
… pogrubienie tekstu;
… kursywa;
Podstawowe znaczniki cz. 2
  - blokada przełamania wiersza. Znacznik
wykorzystywany do tworzenia niewielkich odstępów;
… indeks górny, np. 210;
… indeks dolny, np. hn;
<pre>…</pre> tekst preformatowany;
<hr /> pozioma linia;
<!- -Komentarz- - > komentarz.
Słowniki
<dl>…</dl> znacznik wprowadzający słownik;
<dt>…</dt> znacznik wprowadzający termin definiowany;
<dd>…</dd> znacznik wprowadzający definicję;
Uwaga!!!
Wszystkie znaczniki dt i dd muszą być objęte jedną parą znacznika dl
Słowniki – przykład kodu i strony html
<dl>
<dt>Pierwszy termin</dt>
<dd>Definicja terminu 1</dd>
<dt>Drugi termin</dt>
<dt>Trzeci termin</dt>
</dl>
Zadanie - słowniki
Wykaz wypunktowany i numerowany
<ul>…</ul> znacznik wprowadzający listę wypunktowaną;
<ol>…</ol> znacznik wprowadzający listę numerowaną;
<li>…</li> znacznik wprowadzający poszczególne punktu
zarówno dla ul, jak i ol.
Uwaga!!!
Wszystkie znaczniki li muszą być objęte jedną parą znaczników ul
(w przypadku wykazu wypunktowanego) lub ol (w przypadku listy
numerowanej). MoŜliwe jest zagnieŜdŜanie list.
Wykazy – listy wypunktowane i
numerowane. Przykład.
<ul>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ul>
-----------------------------------------<ol>
<li>Pierwszy punkt</li>
<li>Drugi punkt</li>
<li>Trzeci punkt</li>
</ol>
Zadanie - wykazy
Wklejenie grafiki
<img src="ścieŜka względna" alt="opis obrazka" border="0" />
gdzie:
•
•
•
•
img src – image source (źródło obrazu);
ścieŜka względna – dostęp do obrazu, np.:
Grafika/naglowek_strony.jpg (jeśli plik naglowek_strony.jpg znajduje się w
folderze Grafika a strona internetowa w folderze głównym np. Moja strona
WWW;
../Grafika/naglowek_strony.jpg (jeśli plik naglowek_strony.jpg znajduje się w
folderze Grafika a strona internetowa w podfolderze np. Aktualnosci;
border – obramowanie obrazka, standardowo uŜywa się 0, chyba Ŝe chcemy, aby
nasze grafiki miały obramowanie (jest to obecnie popularne a do tego
niefunkcjonalne);
alt – opis obrazka, np. UAM Poznań. Zawsze naleŜy stosować opis ze względu na
przeglądarki działające tylko w środowisku tekstowym oraz zgodność semantyczną
(wyszukiwarki grafik oraz programy dla osób niewidomych).
Wklejanie grafiki – formaty grafik
Formaty graficzne interpretowane przez przeglądarki:
•
•
•
GIF (.gif) - dla rysunków składających się z mniej niŜ 256 kolorów,
np. przyciski menu i inne "ręcznie" rysowane ozdobniki. Format ten
obsługuje przezroczystość;
JPG (.jpg; .jpeg; .JPG; .JPEG) - dla zdjęć wielokolorowych. Nie
obsługuje przezroczystości;
PNG (.png) - pozwala zapisywać z bardzo dobrą jakością zarówno
ręcznie rysowane grafiki, jak i zdjęcia. Obsługuje kompresję oraz
zarówno pełną przezroczystość, jak i półprzezroczystość. Niestety
zwłaszcza ta ostatnia własność moŜe nie być interpretowana
przez starsze przeglądarki (np. MSIE 6.0).
Wklejanie grafiki – programy graficzne
Programy graficzne przydatne przy obróbce grafiki:
•
•
•
VSO Image Resizer – prosty w obsłudze, darmowy program,
pozwalający na kompresję plików graficznych. Program stosowany
do kompresji całych folderów graficznych lub pojedynczych plików;
program w j. polskim;
IrafanView – prosta, darmowa przeglądarka plików graficznych
pozwalająca zarówno na konwersję plików (niestety
pojedynczych), jak i prostego formatowania plików (zmiana
kolorów, efekty specjalne, itp.); po zainstalowaniu odpowiedniej
nakładki program w j. polskim;
GIMP – zaawansowany, darmowy program graficzny pozwalający
na tworzenie zaawansowanych projektów graficznych równieŜ na
potrzeby stron internetowych; program w j. polskim.
Wklejanie grafiki – uwagi
Pamiętaj
•
•
•
•
pod Ŝadnym pozorem nie uŜywaj ścieŜek bezwzględnych np.
C:\www\katalog2\katalog2a\plik.gif, zawsze ścieŜki względne np.
../Grafika/naglowek_strony.jpg;
pliki graficzne zawsze powinny być skompresowane, nie powinny
przekraczać kilkudziesięciu kilobajtów;
nie uŜywaj formatu .BMP (bitmapa);
w nazwach plików lepiej nie uŜywać:
wielkich liter
znaków, np.: \ / : * ? " < > |
spacji (jeśli musisz, w zamian uŜywaj podkreślnika "_")
polskich liter (ą, ć, ę, ł, ń... itd.).
Odsyłacze
<a href="ścieŜka względna" title="dymek narzędziowy">
nazwa odsyłacza</a>
•
•
•
a href – polecenie wstawiające odsyłacz;
title – dymek narzędziowy wykorzystywany przy mapach stron lub odsyłaczy w
formie grafiki;
nazwa odsyłacza – tzw. etykieta nawigacyjna, np. Onet.pl.
<a target="_blank href="ścieŜka względna">nazwa odsyłacza</a>
•
polecenie target pozwala odtworzyć stronę w nowym oknie przeglądarki, jest
to szczególnie przydatne przy hiperłączach obrazkowych.
Etykiety
<a name="nazwa_etykiety">fragment kodu</a>
Polecenie to definiuje miejsce w tekście (fragment kodu HTML) do
którego będziemy się odnosić.
• nazwa_etykiety – dowolna wprowadzona przez nas nazwa;
zamiast spacji stosuje się podkreślnik „_”.
<a href="ścieŜka do strony#nazwa_etykiety">nazwa odsyłacza</a>
Polecenie to wprowadza hiperłącze, które skieruje nas do etykiety.
Odsyłacze lokalne wykorzystywane są np. do polecenia „wróć”
pozwalającego przy duŜych tekstach powrócić do początku strony.
Polecenie „wróć” definiowane jest przez polecenie a href, natomiast
miejsce gdzie mamy się przenieść przez polecenie a name.
Odsyłacze pocztowe i obrazkowe
<a href="mailto:adres pocztowy">nazwa odsyłacza</a>
<a href="mailto:adres pocztowy?subject=tytuł listu">nazwa odsyłacza</a>
•
?subject=tytuł listu
•
?cc=adres kopii
•
?bcc=ukryta kopia
•
?body=tekst listu
Przy łączeniu elementów po adresach wstawiamy średnik, natomiast po dodatkowych
elementach znak &
Odsyłacz obrazkowy
<a href="ścieŜka względna"><img src="ścieŜka względna" border="0" alt="opis
obrazka" /></a>

Język \(X\)HTML [tryb zgodności]

Transkrypt

Podobne dokumenty

Lectio prima - Konrad Dominas

Język w regionie – region w języku II - Instytut Filologii Polskiej

Zgłoszenie wyjazdu studenta za granicę

QU MHVLH ]LPD