Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM

HTML
DOWNLOAD

Wielkość: px

Rozpocząć pokaz od strony:

Download "Język (X)HTML. Podstawowe znaczniki i parametry. dr Konrad Dominas / UAM"

Aleksandra Bednarczyk
9 lat temu
Przeglądów:

1 Język (X)HTML Podstawowe znaczniki i parametry

2 Szablon dokumentu (X)HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <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>

org/1999/xhtml" xml:lang="pl" lang="pl"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2" /> <meta

3 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).

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).

4 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;

moŝna stosować np. w obrębie akapitu; <div> </div> znacznik bloku (z elementami).

5 Podstawowe znaczniki cz. 2 - blokada przełamania wiersza. Znacznik wykorzystywany do tworzenia niewielkich odstępów; indeks górny, np ; indeks dolny, np. h n ; <pre> </pre> tekst preformatowany; <hr /> pozioma linia; <!- -Komentarz- - > komentarz.

</sup> indeks górny, np. 2 10 ; <sub> </sub> indeks dolny, np.

6 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

</dd> znacznik wprowadzający definicję; Uwaga!

7 Słowniki przykład kodu i strony html <dl> <dt>pierwszy termin</dt> <dd>definicja terminu 1</dd> <dt>drugi termin</dt> <dd>definicja terminu 2</dd> <dt>trzeci termin</dt> <dd>definicja terminu 3</dd> </dl>

8 Zadanie - słowniki

9 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.

10 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>

11 Zadanie - wykazy

12 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).

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.

13 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).

Nie obsługuje przezroczystości; PNG (.png) - pozwala zapisywać z bardzo dobrą jakością zarówno ręcznie rysowane grafiki, jak i zdjęcia.

14 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.

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

15 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.).

$formatu.bmp (bitmapa); w nazwach plików lepiej nie uŝywać: wielkich liter znaków, np.: \ / : *?$

16 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.

17 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.

<a href="ścieŝka do strony#nazwa_etykiety">nazwa odsyłacza</a> Polecenie to wprowadza hiperłącze, które skieruje nas do etykiety.

18 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>

body=tekst listu Przy łączeniu elementów po adresach wstawiamy średnik, natomiast po dodatkowych elementach

Podobne dokumenty

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop Spis treści

ABC języka HTML i XHTML / Maria Sokół. wyd. 2. Gliwice, cop. 2012 Spis treści Wstęp 9 1 HTML 5 i XHTML w pytaniach i odpowiedziach 13 Co to jest HTML 5? 13 Co to jest XHTML? 15 Czy strony utworzone w HTML