xhtml budowa strony martef/pdf/prezentacja_xhtm_pti.pdfstruktura xhtml xhtml (extensible hypertext...
TRANSCRIPT
![Page 1: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/1.jpg)
XHTMLBudowa strony WWW
Wydział FizykiPolitechnika Warszawska
2019
dr inż. Marzena Sala-Tefelska
![Page 2: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/2.jpg)
Założenie strony wwwna serwerze „student”
1. Tworzymy główny plik o nazwie index.html (plik tekstowy).
UWAGA!: Nazwa głównego pliku musi być index.html ! Dodatkowe podstrony można już nazywać dowolnie np. optyka.html, astronomia.html
2. Plik index.html, a także inne pliki muszą posiadać prawa do odczytu, jeśli ich nie mają, trzeba im je nadać
3. Tak przygotowane pliki umieszcza się w katalogu /home/www/login, login jest dla każdego przypisany
4. W katalogu /home/www/login można tworzyć podkatalogi i w nich zapisywać np. obrazki, pliki, które następnie są wyświetlane na stronie (w ten sposób zachowujemy porządek :) )
5. W pasku adresu przeglądarki internetowej należy wpisać: http://student.fizyka.pw.edu.pl/~login
Właśnie pod tym adresem będzie widoczna Wasza strona :)
![Page 3: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/3.jpg)
Edytor Bluefish
Dostępny pod Linuksa i Windowsa http://bluefish.openoffice.nl/index.html
![Page 4: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/4.jpg)
Edytor Bluefish
Dostępny pod Linuksa i Windowsa http://bluefish.openoffice.nl/index.html
![Page 5: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/5.jpg)
Edytor Bluefish - ustawienia
Tryb języka
![Page 6: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/6.jpg)
Edytor Bluefish - ustawienia
Kodowanie znakówang. character encoding
![Page 7: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/7.jpg)
Struktura XHTML
XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia stron WWW, specyfikację XHTML przygotowuje organizacja W3C (World Wide Web Consortium), która ustanawia standardy pisania i przesyłu stron WWW
Plik zawierający kod xhtml jest plikiem tekstowym
Dokumenty XHTML są zgodne ze składnią XML (ang. Extensible Markup Language - rozszerzalny język znaczników – uniwersalny język znaczników przeznaczony do reprezentowania różnych danych w strukturalizowany sposób)
![Page 8: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/8.jpg)
Struktura XHTML
<?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" xml:lang="en" lang="en">
<head><title>Tytuł strony</title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" > </head>
<body><p> Przykład akapitu </p></body>
</html>
Zawartość pliku o nazwie index.html:
Zawartość strony, ciało dokumentu WWW
Nagłówek
![Page 9: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/9.jpg)
Struktura XHTML
<?xml version="1.0" encoding="iso-8859-2"?>
Każda strona w języku XHTML musi zaczynać się od określenia wersji języka XML (tutaj mamy wersję 1.0) i sposobu kodowania znaków.
Dla języka polskiego mamy iso-8859-2.
Przeglądarka odczytując kod wie, że strona jest zgodna z XML kodowanym w standardzie iso-8859-2.
![Page 10: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/10.jpg)
Struktura XHTML
<?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" xml:lang="en" lang="en">
<head><title>Tytuł strony</title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" > </head>
<body><p> Przykład akapitu </p></body>
</html>
Zawartość pliku o nazwie index.html:
Zawartość strony, ciało dokumentu WWW
Nagłówek
![Page 11: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/11.jpg)
Struktura XHTML
Dokumenty XHTML muszą spełniać ograniczenia podane w DTD (ang. Document Type Definition - definicja typu dokumentu). Obowiązkowo musi pojawić się deklaracja typu dokumentu przed elementem podstawowym czyli html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
W języku XHTML 1.0 są trzy wersje DTD:
Strict (ścisła) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional (przejściowa) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset (ramkowa) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
![Page 12: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/12.jpg)
Struktura XHTML
<?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" xml:lang="en" lang="en">
<head><title>Tytuł strony</title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" > </head>
<body><p> Przykład akapitu </p></body>
</html>
Zawartość pliku o nazwie index.html:
Zawartość strony, ciało dokumentu WWW
Nagłówek
![Page 13: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/13.jpg)
Struktura XHTML
Elementem podstawowym w dokumencie musi być html.
Element ten musi zawierać deklarację xmlns identyfikującą przestrzeń nazw XHTML, która stanowi zbiór nazw używanych w dokumencie jako typy elementów i nazwy atrybutów.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
znaczniki
![Page 14: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/14.jpg)
UWAGA: Aby zrobić komentarz w kodzie należy tekst zamieścić między <!-- --> np. <!-- jakiś komentarz -->
Struktura XHTML
<?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" xml:lang="en" lang="en">
<head><title>Tytuł strony</title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" > </head>
<body><p> Przykład akapitu </p></body>
</html>
Zawartość pliku o nazwie index.html:
Zawartość strony, ciało dokumentu WWW
Nagłówek
![Page 15: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/15.jpg)
UWAGA: Aby zrobić komentarz w kodzie należy tekst zamieścić między <!-- --> np. <!-- jakiś komentarz -->
Struktura XHTML
<?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" xml:lang="en" lang="en">
<head><title>Tytuł strony</title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" > </head>
<body><p> Przykład akapitu </p></body>
</html>
Zawartość pliku o nazwie index.html:
Zawartość strony, ciało dokumentu WWW
Nagłówek
![Page 16: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/16.jpg)
Znaczniki to zdefiniowane nazwy – składnia języka xhtml.
Znaczniki zapisuje się wewnątrz nawiasów ostrokątnych < >
np. <p> - znacznik akapitu
Każdy znacznik po otwarciu należy zamknąć poprzez </p>:
np. <p> tekst </p>
Struktura XHTML
<a> - znacznik odnośnika (link, odsyłacz do innej strony WWW lub np. do miejsca na tej samej albo innej stronie)
![Page 17: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/17.jpg)
Struktura XHTML
Znaczniki XHTML mogą mieć jeszcze atrybuty, które zmieniają ich właściwości
np. atrybut href do znacznika <a> , który określa adres innej strony
<a href =”http://www.fizyka.pw.edu.pl”> Wydział Fizyki </a>
W tej sytuacji po naciśnięciu na tekst Wydział Fizyki przejdziemy na stronę wydziału
Znacznik img odpowiada za wyświetlanie obrazków. Ma wiele atrybutów, a jednym z nich jest src (czyli source – źródło obrazka). Zastosujemy obrazek jako odnośnik do innej strony:
<a href =”http://www.fizyka.pw.edu.pl” target="_blank"> <img src=”obrazki/logoWF.png” width=”120” height=”60” alt=”Wydział Fizyki” border=”0”/></a>
Dodatkowo zastosowaliśmy atrybuty: target, width, height, alt, border
![Page 18: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/18.jpg)
Struktura XHTML
1. Znaczniki należy zamykać w kolejności odwrotnej do ich otwierania:<p> tekst <b> teskt2 </b> </p>
2. Nazwy znaczników i atrybutów obowiązkowo muszą być pisane małymi literami
3. Wartości atrybutów muszą być ujęte w cudzysłowy<td rowspan = ”3”>
4. Puste znaczniki np. znacznik przerwy lub linii poziomej muszą mieć znacznik zamykający albo ich znacznik otwierający musi się kończyć na /><br/> <br/><hr></hr> lub <hr/>
5. Nie można zagnieżdżać (umieszczać jeden w drugim) następujących znaczników:
a – nie może zawierać innych elementów alabel – nie może zawierać innych elementów label (do formularza)form – nie może zawierać innych elementów form (do formularza)pre – nie może zawierać elementów: img, object, big, small, sub, sup (do formularza)button – nie może zawierać elementów: input, select, textarea, label, button, form, fieldset, iframe, isindex (do formularza)
WAŻNE !
![Page 19: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/19.jpg)
Podstawowe znaczniki/elementybody - definiuje zawartość strony WWW
b - pogrubiony tekst
head - określa nagłówek strony
h1 - rozmiar nagłówka h1, h2, h3, h4, h5, h6
ul - określa listę zwykłą
li - określa element listy
ol - określa listę numerowaną
img - określa grafikę
p - określa akapit
table - określa tabelę
td - określa komórki tabeli
th - określa tytuł kolumny
tr - określa wiersz tabeli
hr - określa linię poziomą
![Page 20: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/20.jpg)
Struktura XHTML
Zawartość znacznika head
<?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" xml:lang="en" lang="en">
<head><title> Strona domowa - imię i nazwisko </title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" > <meta http-equiv="reply-to" content="[email protected]"/><meta name="description" content="Moja strona domowa" /><meta name="keywords" content="Stu milowy las, miód, pszczółki" /> <meta name="author" content="Kubuś Puchatek" /> <meta name="copyright" content="Kubuś Puchatek" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
</body>
</html>
![Page 21: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/21.jpg)
Struktura XHTML
Zawartość znacznika head
<?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" xml:lang="en" lang="en">
<head><title> Strona domowa - imię i nazwisko </title><meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" > <meta http-equiv="reply-to" content="[email protected]"/><meta name="description" content="Moja strona domowa" /><meta name="keywords" content="Stu milowy las, miód, pszczółki" /> <meta name="author" content="Kubuś Puchatek" /> <meta name="copyright" content="Kubuś Puchatek" />
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
</body>
</html>
![Page 22: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/22.jpg)
Struktura XHTML - tabelka
<table border="2"><tr><td> pierwszy wiersz (rząd), pierwsza komórka </td><td> pierwszy wiersz (rząd), druga komórka </td></tr><tr><td> drugi wiersz (rząd), pierwsza komórka </td><td> drugi wiersz (rząd), druga komórka </td></tr></table>
W znaczniku <body>
http://www.if.pw.edu.pl/~puk/cztery.html
![Page 23: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/23.jpg)
Struktura XHTML - tabelka
UWAGA: zalecane jest żeby formatowanie tabel (czyli wysokość, szerokość, tło, etc.) przenosić do CSS.
Należy dodatkowo pamiętać, że atrybutu width można używać w znacznikach table, img, td, etc., natomiast atrybutu height można używać w znacznikach img, td, etc. ale bez znacznika table!
<table border="4" style="border-color:purple; border-style:dashed;"> <thead> <!-- thead - znacznik nagłówka --> <tr><th><font color="green"> Nagłówek1 </font> </th><th>Nagłówek2</th></tr> </thead><tbody> <!-- dane tabeli --><tr><td> pierwszy wiersz (rząd), pierwsza komórka </td><td> pierwszy wiersz (rząd), druga komórka </td></tr><tr><td> drugi wiersz (rząd), pierwsza komórka </td><td> drugi wiersz (rząd), druga komórka </td></tr></tbody></table>
W znaczniku <body>
http://www.if.pw.edu.pl/~puk/cztery.html
![Page 24: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/24.jpg)
Struktura XHTML - tabelkaW znaczniku <body>
<table border="2"><tr><td colspan="2"> pierwsza komórka i druga komórka połączone</td></tr><tr><td> drugi wiersz (rząd), pierwsza komórka </td><td> <img src="lodka.gif" width="100" alt="lodka" /> </td></tr><tr><td rowspan="3"> połączone 3 wiersze (rzędy) </td><td> wiersz </td></tr><tr><td> wiersz </td></tr><tr><td> wiersz </td></tr></table>
http://www.if.pw.edu.pl/~puk/cztery.html
![Page 25: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/25.jpg)
Struktura XHTML - listy
<ol><li> punkt pierwszy </li><li> punkt drugi </li><li> punkt trzeci </li></ol>
Lista numerowana:
Lista zwykła – punktowa:
<ul><li> punkt pierwszy
<ul><li>podpunkt pierwszy</li><li>podpunkt drugi</li></ul>
</li><li> punkt drugi </li><li> punkt trzeci </li></ul>
http://www.if.pw.edu.pl/~puk/piec.html
![Page 26: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/26.jpg)
Style CSS
CSS - Cascading Style Sheets (z ang. Kaskadowe Arkusze Stylów)
CSS jest ściśle powiązany z językiem opisu struktury dokumentów takich jak (X)HTML. CSS daje możliwość globalnego zarządzania formą prezentacji całej witryny internetowej.
UWAGA: Część poleceń stylów może nie być interpretowana/obsługiwana przez niektóre przeglądarki. Oczywiście strona wyświetli się, ale może brakować jakiegoś elementu stylu.
Zatem najlepiej sprawdzić efekty pracy w najbardziej popularnych przeglądarkach: Firefox, Opera, Google Chrome czy też Internet Explorer
Za pomocą języka (X)HTML wstawia się znaczniki do kodu źródłowego strony, a następnie dzięki CSS można nadać im potem określony sposób wyświetlania.
![Page 27: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/27.jpg)
Style CSSWewnętrzny arkusz stylów:
<head><!-- definiujemy kaskadowe arkusze stylów: -->
<style type="text/css">
kod CSS
</style></head>
W pliku index.html
http://www.if.pw.edu.pl/~puk/piec.html
![Page 28: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/28.jpg)
Style CSSWewnętrzny arkusz stylów: przykład
<head><!-- definiujemy kaskadowe arkusze stylów: -->
<style type="text/css">
body{background-color: #E6E6FA; /* background-image: url(ocean01.jpg); */ }
p, center, h1, ul, td, tr, a{font-weight: bold;font-style: italic;font-family: arial;}
</style></head>
W pliku index.html
http://www.if.pw.edu.pl/~puk/piec.html
![Page 29: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/29.jpg)
Style CSS
Zewnętrzny arkusz stylów:
<head>
<link rel="stylesheet" href="moje_style.css" type="text/css" />
<title>Strona z użyciem CSS </title> <!--wyświetla się na górze przeglądarki --></head>
W pliku index.html zamieszczamy
http://www.if.pw.edu.pl/~puk/piec_b.html
![Page 30: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/30.jpg)
Style CSS
Zewnętrzny arkusz stylów:
W nowym pliku o nazwie moje_style.css - można użyć dowolnej nazwy zakończonej .css
Ogólny schemat zapisywania kodu CSS
selektor{ właściwość: wartość;}
![Page 31: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/31.jpg)
body{background-color: #E6E6FA; /* background-image: url(ocean01.jpg); */ }
p, center, h1, ul, td, tr, a{font-weight: bold;font-style: italic;font-family: arial;}
Kod CSS:
Komentarz w CSS
http://www.if.pw.edu.pl/~puk/piec_b.html
Style CSS
![Page 32: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/32.jpg)
Zewnętrzny arkusz stylów:
.klasa1 {color: red;text-decoration: overline; }
.klasa2 {color: blue; text-decoration: underline;}
Selektor poprzedzony znakiem kropki
<p class="klasa1">To jest tekst określony klasą pierwszą</p><p class="klasa2">To jest tekst określony klasą drugą</p>
W pliku index.html musi się znaleźć nazwa klasy:
Klasy mogą zostać użyte do uchwycenia dowolnej liczby elementów (w tym także jednego!)
Klasy class
![Page 33: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/33.jpg)
p.klasa1 {color: red;text-decoration: overline; }
p.klasa2 {color: blue; text-decoration: underline;}
<p class="klasa1">To jest tekst określony klasą pierwszą</p><p class="klasa2">To jest tekst określony klasą drugą</p>
W pliku index.html musi się znaleźć nazwa klasy:
Klasy class
Zewnętrzny arkusz stylów:
Klasy mogą zostać użyte do uchwycenia dowolnej liczby elementów (w tym także jednego!)
![Page 34: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/34.jpg)
#topright{
color:blue;text-decoration: underline;
}
<div id="topright">...zawartość... </div>
W pliku index.html musi się znaleźć nazwa id:
Identyfikatory idIdentyfikatory stosuje się do uchwycenia tylko jednego elementu – w sposób unikalny. W kodzie xhtml nie mogą istnieć elementy o takim samej wartości atrybutu id !!
Selektor poprzedzony znakiem #
„Element posiadający unikalny identyfikator może zostać użyty do różnorodnych celów - przede wszystkim jako sposób linkowania do konkretnych części dokumentu (kotwica nawigacyjna), jako uchwyt dla skryptów JS oraz do ostylowania konkretnego elementu w CSS.” https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
![Page 35: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/35.jpg)
Element liniowy span
<p> To jest przykładowy tekst. <span class=”tekst1”> A ten jest napisany w kolorze czerwonym. </span> To jest przykładowy tekst.
W pliku style.css należy dodać
.tekst1{ color: red;}
To jest przykładowy tekst. A ten jest napisany w kolorze czerwonym. To jest przykładowy tekst.
Wyodrębnia elementy liniowe np. fragmenty tekstu, które można odpowiednio poprzez arkusz stylów zdefiniować, np. kolor, typ czcionki itd.
![Page 36: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/36.jpg)
Element blokowy div
Wyodrębnia poszczególne bloki w układzie dokumentu, np. menu nawigacyjne, stopkę dokumentu itd.
Przykład strony
http://www.kurshtml.edu.pl/css/wstep,szablon.html
http://www.kurshtml.edu.pl/css/staly_szablon,szablon.html
![Page 37: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/37.jpg)
<?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" xml:lang="en" lang="en">
<head><meta http-equiv="content-type" content="text/html; charset=ISO-8859-2" />
<link rel="stylesheet" href="mojeStyle.css" type="text/css" />
<title>Strona </title> </head>
<body>
<div id="top"><div id="TYTUL">Tytuł strony</div><div id="MENU">Menu nawigacyjne</div><div id="TRESC">Treść strony</div><div id="STOPKA">Stopka</div>
</div>
</body>
</html>
Zawartość index.html
http://www.kurshtml.edu.pl/css/wstep,szablon.html
http://www.kurshtml.edu.pl/css/staly_szablon,szablon.html
![Page 38: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/38.jpg)
Zawartość mojeStyle.css
html, body {background-color: #FFFAFA;color: #000;margin: 0;padding: 0;text-align: center;
}
#top {width: 780px;margin-left: auto;margin-right: auto;text-align: left;
}
#TYTUL {background-color: #D2B48C;
}
#MENU {width: 150px;float: left;overflow: hidden;background-color: #FFEFD5;
}
#TRESC {width: 630px;float: left;overflow: hidden;background-color: #F5DEB3;
}
#STOPKA {clear: both;width: 100%;background-color: #F4A460;
}
http://www.kurshtml.edu.pl/css/wstep,szablon.html
http://www.kurshtml.edu.pl/css/staly_szablon,szablon.html
![Page 39: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/39.jpg)
Przykład zdefiniowanych stylówZewnętrzny arkusz stylów:
table{width: 70%;border: 4px;border-color: green;border-style: dotted;background-color: #B0C4DE; }
td /* do obramowania wewnętrznego */{border: 1px; border-color: black;border-style: solid;color: navy; /* kolor czcionki w tabeli */}
http://www.if.pw.edu.pl/~puk/piec_b.html
![Page 40: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/40.jpg)
Przykład zdefiniowanych stylówZewnętrzny arkusz stylów:
ol{ color: green; font-weight: bold;}
ul{ color: purple; }
a:link{ color: blue; }a:visited{ color: navy; }
http://www.if.pw.edu.pl/~puk/piec_b.html
![Page 41: XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText Markup Language - rozszerzalny język znaczników hipertekstowych) - język do tworzenia](https://reader033.vdocuments.site/reader033/viewer/2022050115/5f4bfc70ab80685cc23e0948/html5/thumbnails/41.jpg)
Przydatne strony
Walidator XHTML - http://validator.w3.org/
Walidator CSS - http://jigsaw.w3.org/css-validator/
Tag count: http://redwriteblue.com/tags/htmlcount.html
Kolory: https://www.w3schools.com/colors/colors_names.asp