XHTML Budowa strony WWW

Transkrypt

1 XHTML Budowa strony WWW Wydział Fizyki Politechnika Warszawska 2019 dr inż. Marzena Sala-Tefelska

2 Założenie strony www na 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ć: Właśnie pod tym adresem będzie widoczna Wasza strona :)

3 Edytor Bluefish Dostępny pod Linuksa i Windowsa

4 Edytor Bluefish Dostępny pod Linuksa i Windowsa

5 Edytor Bluefish - ustawienia Tryb języka

6 Edytor Bluefish - ustawienia Kodowanie znaków ang. character encoding

7 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 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) Plik zawierający kod xhtml jest plikiem tekstowym

8 Struktura XHTML Zawartość pliku o nazwie index.html: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>tytuł strony</title> <meta http-equiv="content-type" content="text/html; charset=iso " > </head> <body> <p> Przykład akapitu </p> </body> </html> Zawartość strony, ciało dokumentu WWW Nagłówek

9 Struktura XHTML <?xml version="1.0" encoding="iso "?> 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 Przeglądarka odczytując kod wie, że strona jest zgodna z XML kodowanym w standardzie iso

11 Struktura XHTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " 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" " Transitional (przejściowa) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " Frameset (ramkowa) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "

13 Struktura XHTML <html xmlns=" xml:lang="en" lang="en"> 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

14 Struktura XHTML Zawartość pliku o nazwie index.html: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>tytuł strony</title> <meta http-equiv="content-type" content="text/html; charset=iso " > </head> <body> <p> Przykład akapitu </p> </body> Nagłówek Zawartość strony, ciało dokumentu WWW </html> UWAGA: Aby zrobić komentarz w kodzie należy tekst zamieścić między  np.

15 Struktura XHTML Zawartość pliku o nazwie index.html: <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title>tytuł strony</title> <meta http-equiv="content-type" content="text/html; charset=iso " > </head> <body> <p> Przykład akapitu </p> </body> Nagłówek Zawartość strony, ciało dokumentu WWW </html> UWAGA: Aby zrobić komentarz w kodzie należy tekst zamieścić między  np.

16 Struktura XHTML 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> <a> - znacznik odnośnika (link, odsyłacz do innej strony WWW lub np. do miejsca na tej samej albo innej stronie)

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

18 Struktura XHTML WAŻNE! 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 a label 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)

19 Podstawowe znaczniki/elementy body - 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ą

20 Struktura XHTML Zawartość znacznika head <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title> Strona domowa - imię i nazwisko </title> <meta http-equiv="content-type" content="text/html; charset=iso " > <meta http-equiv="reply-to" content="kubus.puchatek@pw.edu.pl"/> <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>

21 Struktura XHTML Zawartość znacznika head <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <title> Strona domowa - imię i nazwisko </title> <meta http-equiv="content-type" content="text/html; charset=iso " > <meta http-equiv="reply-to" content="kubus.puchatek@pw.edu.pl"/> <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>

22 Struktura XHTML - tabelka W znaczniku <body> <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>

23 Struktura XHTML - tabelka W znaczniku <body> <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> 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!

24 Struktura XHTML - tabelka W 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>

25 Struktura XHTML - listy Lista numerowana: <ol> <li> punkt pierwszy </li> <li> punkt drugi </li> <li> punkt trzeci </li> </ol> 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>

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

27 Style CSS Wewnętrzny arkusz stylów: W pliku index.html <head>  <style type="text/css"> kod CSS </style> </head>

28 Style CSS Wewnętrzny arkusz stylów: przykład W pliku index.html <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>

29 Style CSS Zewnętrzny arkusz stylów: W pliku index.html zamieszczamy <head> <link rel="stylesheet" href="moje_style.css" type="text/css" /> <title>strona z użyciem CSS </title>  </head>

30 Style CSS Zewnętrzny arkusz stylów: W nowym pliku o nazwie moje_style.css zakończonej.css Ogólny schemat zapisywania kodu CSS selektor { właściwość: wartość; } - można użyć dowolnej nazwy

31 Style CSS Kod CSS: body { background-color: #E6E6FA; /* background-image: url(ocean01.jpg); */ } Komentarz w CSS p, center, h1, ul, td, tr, a { font-weight: bold; font-style: italic; font-family: arial; }

32 Klasy class Klasy mogą zostać użyte do uchwycenia dowolnej liczby elementów (w tym także jednego!) Zewnętrzny arkusz stylów: Selektor poprzedzony znakiem kropki.klasa1 { color: red; text-decoration: overline; }.klasa2 { color: blue; text-decoration: underline; } W pliku index.html musi się znaleźć nazwa klasy: <p class="klasa1">to jest tekst określony klasą pierwszą</p> <p class="klasa2">to jest tekst określony klasą drugą</p>

33 Klasy class Klasy mogą zostać użyte do uchwycenia dowolnej liczby elementów (w tym także jednego!) Zewnętrzny arkusz stylów: p.klasa1 { color: red; text-decoration: overline; } p.klasa2 { color: blue; text-decoration: underline; } W pliku index.html musi się znaleźć nazwa klasy: <p class="klasa1">to jest tekst określony klasą pierwszą</p> <p class="klasa2">to jest tekst określony klasą drugą</p>

34 Identyfikatory id Identyfikatory 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!! 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. Selektor poprzedzony znakiem # #topright { color:blue; text-decoration: underline; } W pliku index.html musi się znaleźć nazwa id: <div id="topright">...zawartość... </div>

35 Element liniowy span Wyodrębnia elementy liniowe np. fragmenty tekstu, które można odpowiednio poprzez arkusz stylów zdefiniować, np. kolor, typ czcionki itd. <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.

36 Element blokowy div Wyodrębnia poszczególne bloki w układzie dokumentu, np. menu nawigacyjne, stopkę dokumentu itd. Przykład strony

37 Zawartość index.html <?xml version="1.0" encoding="iso "?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " <html xmlns=" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso " /> <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>

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

39 Przykład zdefiniowanych stylów Zewnę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 */ }

40 Przykład zdefiniowanych stylów Zewnętrzny arkusz stylów: ol { color: green; font-weight: bold; } ul { color: purple; } a:link { color: blue; } a:visited { color: navy; }

41 Przydatne strony Walidator XHTML - Walidator CSS - Tag count: Kolory: