HTML/XHTML. dr Beata Kuźmińska-Sołśnia

Podobne dokumenty
HTML (HyperText Markup Language) hipertekstowy język znaczników

HTML (HyperText Markup Language)

Hyper Text Markup Language

Programowanie WEB PODSTAWY HTML

Języki programowania wysokiego poziomu. HTML cz.2.

TWORZENIE STRON WWW. Zasady opisu stron w języku HTML:

Cel ogólny lekcji: Wprowadzenie dodatkowych znaczników. Wprowadzenie odsyłacza, tabeli, listy numerowanej i wypunktowanej.

Przedmiot: Grafika komputerowa i projektowanie stron WWW

zmiana koloru tła <body bgcolor = kolor > tło obrazkowe <body background= ścieżka dostępu do obrazka >

Odsyłacze. Style nagłówkowe

Zaawansowana Pracownia Komputerowa - Ćwiczenia. Krzysztof Miernik

Wprowadzenie do języka HTML

używane skróty: HTTP - protokół do transferu tekstu, hipertekstu, zbiorów binarnych URL - jednolity lokalizator zasobów

Tworzenie stron internetowych w kodzie HTML Cz 5

Tworzenie stron internetowych w oparciu o język HTML

Podstawowe znaczniki języka HTML.

WITRYNY I APLIKACJE INTERNETOWE

HTML cd. Ramki, tabelki

Wykład 1: HTML (XHTML) Michał Drabik

Język HTML i podstawy CSS

Edukacja na odległość

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

Tabela z komórkami nagłówkowymi (wyróżnionymi)

Struktura języka HTML ZNACZNIKI. Oto bardzo prosta strona WWW wyświetlona w przeglądarce: A tak wygląda kod źródłowy takiej strony:

Przy wstawianiu znacznika zamykającego nie przepisujemy już atrybutów.

PROGRAMOWANIE. WNPiD UAM, Programowanie, inż. Piotr Jabłoński

Justyna Klimczyk Nauczyciel informatyki Gimnazjum im. Władysława Stanisława Reymonta w Kleszczowie

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH TABELE I FORMULARZE

<html> </html> <body> </body> <p> [</p>] <br> <html> <head> </head> <body> </body> </html> Materiały dydaktyczne 1/5

XHTML Budowa strony WWW

Tabele. Przykład 15a.htm. <HTML><HEAD><TITLE> Cennik</TITLE></HEAD><BODY><H3>Cennik</H3> <TABLE BORDER="1"> <TR>

Programowanie internetowe

Akademia Techniczno-Humanistyczna w Bielsku-Białej

Format HTML. Wybrane działy Informatyki Stosowanej. Definicja i przeznaczenie Struktura dokumentu Znaczniki Formularze i komponenty

Źródła. cript/1.5/reference/ Ruby on Rails: AJAX: ssays/archives/

Po zakończeniu rozważań na temat World Wide Web, poznaniu zasad organizacji witryn WWW, przeczytaniu kilkudziesięciu stron i poznaniu wielu nowych

HTML podstawowe polecenia

XHTML - Extensible Hypertext Markup Language, czyli Rozszerzalny Hipertekstowy Język Oznaczania.

Strony WWW - podstawy języka HTML

Specyfikacja techniczna dot. mailingów HTML

Wybrane znaczniki HTML

przygotował: mgr Szymon Szewczyk PODSTAWY

Kurs HTML 4.01 TI 312[01]

STRONY INTERNETOWE mgr inż. Adrian Zapała

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

2 Podstawy tworzenia stron internetowych

Wykład 2 TINT. XHTML tabele i ramki. Zofia Kruczkiewicz

Tworzenie Stron Internetowych. odcinek 5

Wprowadzenie do HTML, CSS, JavaScript, PHP. Kurs

Oczywiście występują także znaczniki, bez ich odpowiednika kończącego, np. <BR>

Informatyka i Ekonometria Informatyka ekonomiczna Ćwiczenia Usługi sieciowe. Tworzenie serwisów internetowych.

Politechnika Gdańska Wydział Elektrotechniki i Automatyki Kierunek: Automatyka i Robotyka Studia stacjonarne I stopnia: rok I, semestr II

HTML kurs podstawowy. nagłówek, linia pozioma, obraz, img, ramka, div, tabela, tabel, lista

Atrybuty znaczników HTML

Witryny i aplikacje internetowe

HTML umożliwia zapis treści dokumentu i równocześnie opis jego układu graficznego.

Wykład 2 Tabele i ramki 1. Tabele 1.1. Podstawy budowy tabel na stronach WWW

Podstawy (X)HTML i CSS

Witryna internetowa. Należy unikać w nazwach plików używania polskich znaków.

O stronach www, html itp..

I. Formatowanie tekstu i wygląd strony

Cel ogólny lekcji: Wprowadzenie do tworzenia stron WWW w języku HTML. Wprowadzenie pojęć: strona WWW, język HTML, dokument HTML.

Podstawy HTML. Tworzenie stron internetowych. Tomasz Piłka. Ucz się, jak gdybyś miał żyć wiecznie, żyj jak gdybyś miał umrzeć jutro

Podstawy HTML i CSS. Wydział Matematyki, Informatyki i Ekonometrii Uniwersytet Zielonogórski

ECDL/ICDL Web Editing Moduł S6 Sylabus - wersja 2.0

Elementarz HTML i CSS

Moduł IV Internet Tworzenie stron www

Young Programmer: HTML+PHP. Dr inż. Małgorzata Janik, Zajęcia #2

Za pomocą atrybutu ROWS moŝemy dokonać podziału ekranu w poziomie. Odpowiedni kod powinien wyglądać następująco:

2. Projektowanie stron WWW podstawowe informacje

za pomocą: definiujemy:

Zakres treści Czas. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

URL:

O HTML. R. Robert Gajewski omklnx.il.pw.edu.pl/~rgajewski

[ HTML ] Tabele. 1. Tabela, wiersze i kolumny

HTML 1. Gimnazjum nr 1 w Barcinie gimbarcin.pl

Podstawy HTML. 2. Komendy ujęte są w nawiasy ostre - < > i występują najczęściej parami.

HTML. HTML(ang. HyperTextMarkupLanguage, pol. hipertekstowy język znaczników) język wykorzystywany do tworzenia stron internetowych

Specyfikacja mailingu GG Network

Ćwiczenie 1 Deklarowanie metainformacji.

Spis treści CZĘŚĆ I JĘZYK SIECI 17. Wstęp 13. Rozdział 1 Wprowadzenie do HTML5 19. Rozdział 2 Znajomość znaczników HTML5 37

e r T i H M r e n L T n

Podstawy języka HTML (HyperText Markup Language)

Podstawy technologii WWW

LABORATORIUM 2 WSTĘP DO SIECI TELEINFORMATYCZNYCH. PODSTAWY JĘZYKA HTML (HyperText Markup Language)

Uwaga: znaczniki <body> </body> nie powinny byd umieszczane na stronie zawierającej ramki, w ramach FRAMESET.

Zawartość specyfikacji:

Języki programowania wysokiego poziomu. HTML cz.1.

Plan dzisiejszego wykładu. Narzędzia informatyczne w językoznawstwie. XML - Definicja. Zalety XML

rk HTML 4 a 5 różnice

Systemy internetowe HTML

5-6. Struktura dokumentu html. 2 Określenie charakteru i tematyki strony. Rodzaje witryn. Projekt graficzny witryny. Opracowanie skryptów

HTML jak zrobić prostą stronę www

Tworzenie stron internetowych w kodzie HTML Cz 7

Programy dedykowane do edycji stron internetowych dzielą się na dwa rodzaje:

Pierwsza strona internetowa

Języki programowania wysokiego poziomu WWW

Laboratorium 1: Szablon strony w HTML5

Danuta ROZPŁOCH-NOWAKOWSKA Strona Moduł 4. Przykład 1. Przykład 2. HTML 4.01 Transitional).

Transkrypt:

HTML/XHTML dr Beata Kuźmińska-Sołśnia

HTML (ang. Hypertext Markup Language) hipertekstowy język znaczników HTML pozwala na formatowanie tekstu, kreślenie linii, dołączanie grafiki, dźwięków i filmów wideo oraz zachowanie całości w zbiorach tekstowych ASCII Język HTML bazuje na znacznikach (ang. tags) Przeglądarka interpretuje znaczniki języka HTML i pokazuje sformatowany już dokument na ekranie Dokumenty HTML mogą zawierać połączenia (ang. links) do innych dokumentów

Jest to język hipertekstowego znakowania. Podstawowymi jego cegiełkami są znaczniki, czyli informacje, zawarte w nawiasach kątowych<>- definiują one elementy strony lub sposób ich formatowania Piki zawierające odpowiednie polecenia języka HTML znaczniki są plikami tekstowymi i mają następujące rozszerzenia.htm plik tekstowy zawierający kod HTML, czasami też kod JavaScript.html plik tekstowy zawierający kod HTML, czasami też kod JavaScript.shtml plik tekstowy zawierający kod HTML oraz instrukcje SSI pliki takie są przetwarzane przez serwer przed wysłaniem do przeglądarki.php pliki testowe zawierające kod HTML połączony ze skryptami PHP.cgi pliki tekstowe zawierające skrypty napisane w Perlu bądź Shellu często połączone z kodem HTML.pl pliki tekstowe zawierające skrypty napisane w Perlu często połączone z kodem HTML.css pliki tekstowe zawierające zewnętrzne arkusze stylów CSS.js pliki tekstowe zawierające skrypty napisane w języku JavaScript

HTML opracowano w latach 80-tych przez Tima Bernersa-Lee fizyka z Europejskiego Ośrodka Badań Jądrowych CERN w Szwajcarii Formalną definicję języka napisano w metajęzyku, czyli języku służącym do opisywania innych języków, nazywanych Standardized General Markup Language (SGML) 1993 CERN przekazuje prace nad dalszym rozwojem HTML konsorcjum W3C 1993 wprowadzono wersję języka 1.0, a w grudniu 1997 4.0. 1999 wersja 4.01 do dziś używana (uproszczenie specyfikacji wielu atrybutom) 2000 wersja 1.0XHTML zaprzestanie rozwijania języka HTML jako standardu Skupienie uwagi na XHTML i XML

2000 rok- organizacja World Wide Web Consortium (W3C) ogłosiła pierwszą wersja XHTML (Extensible Hypertest Markup Language) oraz, że HTML nie jest już obowiązującym standardem Przeglądarki internetowe współpracują z różnymi, niekompatybilnymi wersjami HTML (strona może być wyświetlana w różny sposób) XHTML zmienia to, wprowadzając standard oparty na terminologii XML XHTML jest standardem stosowanym przy przesyłaniu danych do telefonów współpracujących z internetem, palmtopów i innych urządzeń bezprzewodowych, w celu wyświetlania oraz interaktywnego przeglądania tych danych Dokumenty HTML - zawierają informacje o swojej strukturze, jak i o cechach prezentacji, o użytych czcionkach lub kolorach. XHTML - stosuje formularze stylów, które oddzielają elementy formatujące od opisujących strukturę dokumentu

XML (extensible Marcup Language) służy do strukturyzacji danych. Dysponuje zbiorem reguł, służących do formatowania ustrukturyzowanych danych w postaci czytelnych plików tekstowych XML wygląda podobnie do HTML stosuje znaczniki, elementy i atrybuty; HTML definiuje funkcjonalność poszczególnych elementów i atrybutów, XML używa znaczników wyłącznie do oddzielania fragmentów danych Pliki XML są plikami tekstowymi, choć nie służą do bezpośredniego czytania XML jest w swojej konstrukcji przejrzysty XML to rodzina technologii, która definiuje szkielet wszystkich dokumentów powstałych na jej podstawie XHTML ma wiele cech wspólnych z HTML, ale stosuje składnię XML i nadaje jej konkretne znaczenie składnia XML określa <p> jako element, XHTML nadaje mu znaczenie: <p> oznacza akapit XML jest dostępny bezpłatnie, jest niezależny od platformy i szeroko rozwijany

XHTML następca HTML, stosuje składnię oraz reguły XML Istotna terminologia: element istnieją 2 typy: niepuste np. <pre> ten tekst się wyświetli </pre> puste - np. <br/> znacznik otwierający składa się z nazwy elementu objętej nawiasami trójkątnymi <pre> ; zamykający </pre> atrybut rodzaj parametru danego elementu składa się z par nazwa-wartość <a href= http://www.onet.pl >strona Politechniki Radomskiej</a> <img src= obraz.jpg />

XHTML uwzględnia wielkość liter, wszystkie znaczniki muszą być pisane małymi literami Każdy niepusty element XHTML musi mieć znacznik zamykający Puste elementy nie mają znacznika zamykającego; zapisujemy w inny sposób: przed trójkątnym nawiasem zamykającym> dodajemy ukośnik / - np. <br/> Wartości atrybutów zawsze muszą być umieszczone w cudzysłowach np. <td align= center /> Atrybuty niemające oczywistej wartości muszą mieć przypisaną pewną konkretną wartość

JavaScript to technika programowania, ma podobną składnię do języka Java, ale możliwości obu się różnią Java jest ogólnym, obiektowo zorientowanym językiem programowania, dającym takie możliwości jak programowanie sieciowe, użycie grafiki czy wielowątkowość JavaScript jest językiem skryptowym, nie ma możliwości Javy, potrafi współpracować z przeglądarkami i XHTML Zastosowanie elementu script polega na wprowadzeniu programu JavaScript pomiędzy znacznik otwierający <script> a znacznik zamykający </script>

Edytory tekstowe (np. eezhtml, HomeSite, KeD2) pozwalają na bezpośrednią pracę z kodem HTML, a także dysponują odpowiednim wsparciem dla programistów; wyposażone są w szereg kreatorów, pomagających generować duże części kodu oraz odpowiednie moduły konwertujące znaki narodowe stosowane w danej stronie Edytory graficzne (MS FrontPage) są bardziej wymagające wobec sprzętu. Programy oferują wiele kreatorów gotowych szablonów, mających pomóc w pracy nad stron. Wadą jest ograniczona kontrola kodu strony

Podstawą funkcjonowania stron WWW jest protokół HTTP, którego używa przeglądarka i serwer. Zasada działania - Gdy chcemy obejrzeć dokument pod podanym adresem URL, wysyłamy do serwera tzw. żądanie HTTP zawierające lokalizację zasobu oraz garść informacji o nas samych. Serwer odnajduje lub generuje (np. przy pomocy PHP) odpowiedni dokument i odsyła wszystko jako odpowiedź HTTP. Przeglądarka odbiera wszystko i rozpoczyna działanie. Protokół jest stosowany zarówno do pobierania kodu HTML strony, jak i znajdujących się na niej obrazków, ściągania plików i innych danych multimedialnych. Rodzaj pobieranej zawartości jest określany przez nagłówki. Skrypty PHP zawsze pracują po stronie serwera, generując odpowiedzi HTTP na przychodzące do niego żądania.

Służy do "postawienia" domowego serwera na naszym komputerze. Aplikacja jest w pełni darmowa i w języku polskim. Krasnal jest znanym pakietem wykorzystywanym przez programistów do testowania swoich stron WWW Po zainstalowaniu Krasnal-a wystarczy w przeglądarce wpisać swoje IP lokalne, bądź http://localhost i wczyta się strona z naszego domowego serwera Oto narzędzia wchodzące w skład pakietu Krasnal: Apache; PHP + SQLite; PHP; MySQL; ActivePerl; phpmyadmin; Zend; Optimizer; CesarFTP; WebAlizer; Free SMTP Server; SQLiteManager

<!DOCTYPE html public "-//organizacja//dtd html wersja//język" ścieżka dostępu do pliku dtd"> Definicje szczegółowe <!DOCTYPE html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/rec-html4/strict.dtd"> <!DOCTYPE html public "-//w3c//dtd html 4.01transitional//en" "http://www.w3.org/tr/rec-html4/loose.dtd"> <!DOCTYPE html public "-//w3c//dtd html 4.01 frameset//en" "http://www.w3.org/tr/rec-html4/frameset.dtd">

Standardy kodowe dla danych języków i części świata Dla naszego kraju ISO 8859-2 strona kodowa działająca na wszystkich platformach systemowych: Windows, Unix Linux, MacOS Jak uzyskać poprawną stronę kodową: Skorzystać z edytora z wbudowanym modułem do konwersji znaków Wstawianie polskich znaków w sposób tradycyjny, czyli w formacie Windows-1250, a następnie konwertowanie za pomocą specjalnych programów Instalacja w systemie Windows czcionek systemowych zgodnych z ISO 8859-2 oraz odpowiedniej nakładki na klawiaturę (http://www.ogonki.agh.edu.pl/) <meta http-equiv= Content-Type" content="text/htm; charset=iso-8859-2"/>

XHTML ma większe wymagania pod względem struktury i zawartości niż HTML Nagłówek dokumentu XHTML Na początku mogą się znajdować definicje trzech składników: XML DOCTYPE Przestrzeń nazw

Deklaracja informuje o użytym w dokumencie standardzie XML i sposobie kodowania znaków jest opcjonalna (z odczytaniem mogą mieć problem starsze przeglądarki) Musi pojawić się na początku dokumentu, w pierwszej linii, bez chociażby jednej spacji poprzedzającej; nie odpowiada jej żadna deklaracja zamykająca Informuje, że dokument jest zgodny ze specyfikacją XML, określa schemat kodowania znaków oraz to, czy w innych dokumentach znajdują się zapisy dotyczące danego dokumentu

Ma trzy atrybuty: version wskazuje wersję, z którą dokument jest zgodny encoding wskazuje format użyty do kodowania dokumentu standalone ma charakter opcjonalny i może mieć przypisane tylko dwie wartości: yes lub no, określa, czy treść dokumentu zależy od innych dokumentów zapisanych w XML Przykład <?xml version = 1.0 encoding = UTF-8 standalone = yes?>

Deklaracja DOCTYPE wskazuje definicję typu dokumentu (Document Type Definition DTD), która specyfikuje elementy, atrybuty oraz zależności zachodzące między nimi Aby określić, co może być elementem html, DTD zawiera następujące wyrażenie: <!ELEMENT html(head,body)> - definiuje ono element html, jako składający się tylko z dwóch elementów: head i body Wyrażenia, które określają zależności pomiędzy grupami elementów są definiowane za pomocą deklaracji ENTITY <!ENTITY % heading H1 H2 H3 H4 H5H H6 > Składowe dokumentu, takie jak pliki graficzne, które mają nie być interpretowane przez XML, należy poprzedzić deklaracją NOTATION <!NOTATION gif SYSTEM image.gif > Można użyć jednej ze standardowych definicji typów danych

Na deklarację DOCTYPE składa się 5 składowych: 1. Nagłówek rozpoczyna się znakiem <!, wskazującym, że jest to deklaracja XML oraz słowo kluczowe DOCTYPE 2. Typ dokumentu, w przypadku XHTML musi to być html 3. Następnym słowem może być PUBLIC, oznaczające, że DTD jest dostępne publicznie, albo w przeciwnym wypadku słowo SYSTEM 4. Identyfikator DTD, np. -//W3C//DTD XHTML 1.0 Strict//EN 5. URL danego DTD, np. http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd Przykład <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd > Trzy publiczne rodzaje DTD wprowadzają różne warianty dokumentów: ścisły (strict), przejściowy (transitional) i z ramkami (frameset)

Znacznik <html> musi być pierwszym znacznikiem; jego atrybut xmlns definuje tzw. przestrzeń nazw XML danego dokumentu np.: <html xmlns = http://www.w3.org/1999/xhtml > Dla innych rodzajów dokumentów, takich jak MathML, DTD oraz przestrzeń nazw będzie inna, np.: <?xml version = 1.0 encoding = UTF-8?> <!DOCTYPE math PUBLIC -//W3C//DTD MathML 2.0//EN http://www.w3.org/tr/m<mathml/dtd/mathml2.dtd> <mm 1 xmlns = http://www.w3.org/1999/math/mathml > W dokumentach można korzystać z kilku przestrzeni nazw: Dokument zaczyna się standardowo, zawiera jednak drugą deklarację przestrzeni nazw Alternatywą jest zdefiniowanie nazw przestrzeni w znaczniku <html> i odwoływanie się do elementów z użyciem deklaratora odpowiedniej przestrzeni

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

Znacznik <html> oraz </html> wskazują, że dany dokument oznakowany został w HTML lub XHTML. Są one wymagane przez przeglądarki nieobsługujące deklaracji DOCTYPE Znacznik <html> powinien być zaraz po deklaracji DOCTYPE, a zamykający </html> musi być ostatnim znacznikiem dokumentu Przykład <?xml version = 1.0 encoding = ISO-8859-2?> <!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 >. </html>

<html> <head> <title>tytuł strony</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-2"> <meta http-equiv="creation-date" content="2012-03-14"> <meta http-equiv="reply-to" content="adres autora"> <meta http-equiv="content-language" content="pl"> <meta name="keywords" content="słowa kluczowe"> <meta name="description" content="opis zawartości witryny"> <meta name="author" content="autor strony"> <meta name="generator" content="nazwa edytora"> </head> <body> </body> </html> treść strony

Na stronie W3C pod adresem http://validator.w3.org można sprawdzić, czy został on napisany zgodnie ze standardem

Element p służy do oznaczania, że dany napis tworzy jeden akapit. Jeżeli określimy, że dany napis tworzy akapit będzie zgodny ze specyfikacją DTD <p> Witamy na stronie www </p> Inne elementy akapitu: address używa się go do oznaczania adresów, które zazwyczaj wyświetlane są kursywą, pre skrót od formatowany wstępnie (pre-formatted); zazwyczaj jest używany do oznaczania kodów źródłowych i wyświetlany czcionką proporcjonalną ze zwiększoną interlinią

Nagłówki <h1> nagłówek stopnia pierwszego </h1> <h6> </h6> Łamanie linii - <br/> znacznik nowego wiersza Wstawianie linii poziomej - <hr/> Atrybuty dla <HR>: size grubość linii w pikselach; wartość domyślna to 2 (size= 2 ) color kolor linii width długość linii w poziomie w pikselach lub % szerokości strony width = 200 30% align wyrównanie linii (align = left right center ) noshade linia rysowana bez cienia (noshade = noshade ) przykład <hr width = 50% size = 3 align = left />

Uwaga - ścisła specyfikacja XHTML uznaje atrybuty określające kolor i czcionki za przestarzałe, zakładając użycie kaskadowych arkuszy stylów Kolor definiuje się za pomocą modelu RGB, wszystkie trzy składowe muszą być opisane liczbą w systemie szesnastkowym pomiędzy 0 a FF, czyli odpowiednio 0 i 255 w systemie dziesiętnym Określenie koloru tła dokumentu <body bgcolor= #FF0000 >, dobrze ograniczyć się do palety kolorów bezpiecznych i opisać liczbami 00,33,66,99,CC lub FF Np. #33FF66

Za pomocą 4 atrybutów już zdezaktualizowanych text określa kolor całego tekstu (z wyjątkiem odsyłaczy, które mogą mieć inny kolor) link odsyłacze jeszcze nieużyte alink odsyłacze aktywne, które użytkownik wybiera vlink odsyłacze użyte Przykład <body text = 000000 link = #00FF00 alink = #0000FF vlink = #33CC99 >

Zdezaktualizowany element font Atrybuty: color kolor tekstu face rodzaj czcionki; można załączyć listę czcionek uszeregowanych w kolejności występowania size wielkość czcionki, zawiera się w wartościach od 1 do 7 (wartość domyślna 3); rozmiar względny np. +1 basefont domyślna czcionka dokumentu Przykład: <font color = #6633CC face = Halvetica, Arial, Myriad size = +1 >

<B> tekst pogrubiony <I> tekst pochylony <U> tekst podkreślony <STRIKE> tekst przekreślony <BIG> powiększenie rozmiaru czcionki <SMALL> pomniejszenie rozmiaru czcionki <SUB> indeks dolny <SUP> indeks górny

<ol> </ol> listy numerowane, a każdy element listy rozpoczyna się od znacznika <li> <ul></ul> listy wypunktowane, a każdy element listy rozpoczyna się od znacznika <li> <dl></dl> listy definicji, <dt> </dt> definiuje pojęcie, a znacznik <dd> </dd> definicję ATRYBUTY type: disc kropka square kwadrat circle puste kółko przykład <ul type= disc > <ol type = a value = 3 > <li> raz </li> <li>trzecia litera </li> <li> dwa </li> <li> czwarta litera </li> </ul> </ol>

URL skrót Uniform Resource Locator (jednolity identyfikator zasobów); identyfikuje dokument lub miejsce w aktualnym dokumencie, które ma być wyświetlone przez przeglądarkę URL składa się z 4 części: identyfikatora protokołu określa sposób transmisji danych nazwy serwera nazwy katalogu na serwerze nazwy pliku Zakłada się, że nazwa pliku XHTML ma rozszerzenie.html lub.htm Para znaczników <a> i </a> (skrót od ang. anchor)

Względny URL używany, gdy chcemy się odnieść do innego dokumentu na tym samym serwerze lub innego miejsca w bieżącym dokumencie (wystarczy podać nazwę, jeśli znajduje się w tym samym katalogu, w przeciwnym wypadku należy dołączyć katalog oraz nazwę) znaki../ oznaczają katalog nadrzędny Względny URL serwera w przypadku utworzenia odsyłacza względem katalogu głównego danego serwera, a nie względem położenia dokumentu wtedy zaczynamy od znaku (/), który sygnalizuje, że adres ten zawiera odniesienie do katalogu głównego serwera <a href = /index.html > odsyłacz do strony indeksu</a> Bezwzględny używany, gdy chcemy utworzyć odsyłacz do dokumentu na innym serwerze tzw. adres pełny (składa się ze wszystkich czterech części adresu: protokołu, nazwy serwera, katalogu oraz pliku)

Oznaczamy miejsce, do którego utworzymy odsyłacz <a name = tablety >urządzenia mobilne</a> nazwa odsyłacza <a href = #tablety >zastosowanie tabletów</a> Oznaczamy miejsce, do którego utworzymy odsyłacz <a href = mailto:beata.kuzminska-sols@pr.radom.pl >napisz</a>

<a href="strona.html"> Kliknij, aby zobaczyć stronę </a> Odsyłacze mogą odnosić się do następujących miejsc: Dokumenty html, txt <a href= plik.html > </a> Odsyłacz obrazkowy <a href="adres"> <img src="ścieżka dostępu do obrazka > </a> Adresu URL <a href="http://adres strony">opis</a> Adresy FTP <a href="ftp://ftp.adres">opis</a> Adresy e-mail <a href="mailto:adres e-mail">opis</a> Adresy grup dyskusyjnych <a href="news:nazwa grupy">opis</a> Komunikator internetowy <a href="gg:numer">opis</a> <a href="tlen://chat użytkownik ">opis</a> <a href="skype:użytkownik">opis</a> Deklaracja kotwicy <a name= etykieta >Fragment początkowy</a> tekstu dokumentu... <a href= #etykieta > przejście do fragmentu początkowego </a>.

Do tworzenia tabeli potrzebne są następujące elementy: element caption nadający tytuł tabeli znaczniki otwierający <table> oraz zamykający </table> (zawiera wszystkie informacje dotyczące tabeli) element tr definiuje wiersz w tabeli element th definiuje komórki nagłówkowe element td definiuje pojedyncze komórki Preferowaną metodą formatowania tabel w XHTML jest używanie arkuszy stylów

<TABLE></TABLE> tabela Atrybuty border = x pikseli dodanie obramowań cellspacing = x pikseli odpowiada za wolny obszar między komórkami cellpadding = x pikseli odpowiada wolny obszar między krawędziami komórki a zawartością align = left right center justify sposób wyrównania tabeli, komórek w poziomie zawartości komórek dodatkowo-char valign = top middle bottom baseline pionowe wyrównanie zawartości komórek bgcolor = kolor zmienia tło tabelki bordercolor = kolor kolor krawędzi background = obrazek.gif ustawia określony plik graficzny jako t ło tabeli width = x procenty lub piksele szerokość tabeli w procentach względem szerokości strony lub w pikselach height = procenty lub piksele szerokość tabeli w procentach względem wysokości strony lub w pikselach colspan i rowspan znacznika <td> - służą do łączenia komórek leżących w sąsiednich kolumnach lub wierszach

XHTML wprowadza dodatkowe opcje formatowania, pozwalające na zaznaczenie niektórych krawędzi Atrybuty frame i rules Wartości atrybutu frame void brak krawędzi above górna krawędź tabeli; below dolna krawędź border krawędź dookoła komórek hside górna i dolna krawędź tabeli lhs lewa krawędź tabeli; rhs prawa krawędź tabeli vsides prawa i lewa krawędź tabeli Wartości atrybutu rules none brak linii wewnętrznej rows poziome linie między wierszami cols pionowe linie między kolumnami all krawędzie każdej komórki groups krawędzie pomiędzy grupami wierszy lub kolumn zdefiniowanych za pomocą elementów thead, tfoot oraz tbody

Możliwość oznaczania różnych obszarów tabeli, które później mogą być traktowane jako pojedyncze elementy i łatwo formatowane Oznaczanie obszarów tabeli dokonuje się za pomocą elementów thead, tfoot i tbody, umieszczając je wewnątrz elementu table Para znaczników <thead> i </thead> obejmuje część tabeli zawierającą nagłówki Znaczniki <tfoot> i </tfoot> obejmują stopkę tabeli Znaczniki <tbody> i </tbody> obejmują główną część tabeli Kolejność elementów znacznik otwierający tabelę <table> znaczniki definiujące nagłówek otwierające <thead> <tr> <th> i zamykające znacznik definiujący stopkę otwierające <tfoot> <tr> <td> i zamykające Zawartość (body) tabeli otwierające <tbody> <tr> <td> i zamykające Element colgroup umożliwia zdefiniowanie grupy kolumn wewnątrz tabeli Powinny być zdefiniowane na początku definicji tabeli <caption> <caption> <table border = 2 > <colgroup span = 1 bgcolor = EEEEEE ></colgroup> <colgroup span = 6 bgcolor = BBBBBB > </colgroup>

znacznik <img src= nazwa obrazka.jpg > umieszczenie na stronie grafiki Atrybut: align =(right, left, top, bottom, middle) width (szerokość), height (wysokość) definiują rozmiar ilustracji w trakcie wyświetlania border, vspace (vertical space) i hspace (horizontal space) <alt> tekst alternatywny przykład <img src= logo.jpg align=right alt= tekst, który się pojawi >

Definicja obszarów Element area służy do zdefiniowania omawianych obszarów. Wszystkie elementy muszą być zawarte w elemencie map <map id= telefony </map> Atrybut id służy do zidentyfikowania danej mapy i połączenia jej z konkretnym rysunkiem w dokumencie Definicję map zazwyczaj umieszcza się na początku dokumentu, zaraz po rozpoczęciu sekcji <body> Aktywacja mapy Połączenie mapy z rysunkiem Zastosowanie elementu usemap do elementu img <img src = rysunek.png width = 698 height = 872 alt = telefony usemap= #telefony /> Przykładowy kod

Definiowanie prostokątów: Element area dla prostokąta: <area shape = rect coords = 0,800,150,872 href = home.html alt = strona główna /> atrybut shape określa kształt obszaru, w tym przypadku prostokąt atrybut coords podaje współrzędne lewego górnego rogu i prawego dolnego rogu atrybut href zawiera adres miejsca przeznaczenia za pomocą atrybutu alt określamy tekst, który jest wyświetlany, gdy wskaźnik myszki znajduje się nad zdefiniowanym obrazem Definiowanie kół <area shape = circle coords = 360,580,180 href = nokia.html alt = telefon nokia /> Definiowanie wielokątów definiujemy pozycję wszystkich rogów <area shape = poly coords = 110,0,400,0,0,400,200,370 href = samsung.html alt = telefon samsung /> Definiowanie obszaru domyślnego atrybutowi shape przypisujemy wartość default, jeśli nie chcemy żeby była reakcja można określić atrybut nohref: <area shape = default nohref = nohref alt = telefony komórkowe />

<body> <p> <map id = telefony > <area shape = circle coords = 360,580,180 href = nokia.html alt = telefon nokia /> <area shape = poly coords = 110,0,400,0,0,400,200,370 href = samsung.html alt = telefon samsung /> <area shape = rect coords = 0,800,150,872 href = home.html alt = strona główna /> <area shape = default nohref = nohref alt = telefony komórkowe /> </map> <img src = rysunek.png width = 698 height = 872 alt = telefony usemap= #telefony /> <p> </body>

spacja nierozdzielająca & & " < < > >