Kuloodporne strony internetowe. Jak poprawić elastyczność z wykorzystaniem XHTML-a i CSS
XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText...
Transcript of XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText...
XHTMLBudowa strony WWW
Wydział FizykiPolitechnika Warszawska
2019
dr inż. Marzena Sala-Tefelska
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 :)
Edytor Bluefish
Dostępny pod Linuksa i Windowsa http://bluefish.openoffice.nl/index.html
Edytor Bluefish
Dostępny pod Linuksa i Windowsa http://bluefish.openoffice.nl/index.html
Edytor Bluefish - ustawienia
Tryb języka
Edytor Bluefish - ustawienia
Kodowanie znakówang. character encoding
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)
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
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.
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
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">
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
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
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
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
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)
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
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 !
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ą
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>
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>
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
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
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
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
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.
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
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
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
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ść;}
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
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
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!)
#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
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.
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
<?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
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
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
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
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