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


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






</html>



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.


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

http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd

Struktura XHTML






</html>



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.


znaczniki

UWAGA: Aby zrobić komentarz w kodzie należy tekst zamieścić między  np. 

Struktura XHTML






</html>



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

http://www.fizyka.pw.edu.pl/

http://www.fizyka.pw.edu.pl/

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 - 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>  <tr><th><font color="green"> Nagłówek1 </font> </th><th>Nagłówek2</th></tr> </thead><tbody> <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>

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>


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>

<style type="text/css">

kod CSS

</style></head>

W pliku index.html

Style CSSWewnętrzny arkusz stylów: przykład

<head>

<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

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> </head>

W pliku index.html zamieszczamy

http://www.if.pw.edu.pl/~puk/piec_b.html

Style CSS


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


Style CSS


.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


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



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;

}



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 */}


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


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

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/

http://redwriteblue.com/tags/htmlcount.html

https://www.w3schools.com/colors/colors_names.asp

XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText...

Documents

Transcript of XHTML Budowa strony martef/pdf/prezentacja_xhtm_PTI.pdfStruktura XHTML XHTML (Extensible HyperText...