Zajęcia z budowy stron WWW

Wstęp

Serwer (komputer/program)
Przeglądarka
Adres
Protokół (http://, ftp://)

Sposoby tworzenia stron

Strony można generować na wiele sposobów:

w notatniku
w edytorze tekstowym ze wspomaganiem
w edytorze z możliwością konwersji do html
w specjalizowanym edytorze do tworzenia stron
generować automatem

Publikowanie stron

Serwer WWW (program + komputer)
Serwerem może być nawet domowy komputer
Najbardziej znane serwery-programy to Apache i IIS
Na wydziale serwerem jest np. students.mimuw.edu.pl
Nasze strony
- tworzymy na swoim koncie katalog public_html
- dajemy do niego prawo dostępu x dla wszystkich, a w katalogu do wszystkich plików prawo do czytania
- możemy tworzyć strukturę katalogów
Różnica między przeglądaniem lokalnym (file://) i przez sieć (http://)
Adres naszych stron: http://students.mimuw.edu.pl/~p130/...

Umieść na swojej stronie plik .txt, .pdf i zwykły tekst z rozszerzeniem .html. To działa! (mimo, że nie znamy jeszcze HTMLa)

Anatomia strony

<html> 
 <head> 
  <!-- Nagłówek -->
 </head> 
 <body>
  <!-- Treść strony -->
 </body> 
</html>

Znacznik to element opisu strony, jego postać to <nazwa>. Zwykle odpowiada mu znacznik zamykający o postaci </nazwa>.

Umieść na swojej stronie plik pierwsza.html zgodny ze schematem i mający w treści tekst Cześć WWW!
Obejrzyj go w przeglądarce (z http://)

Nagłówek

Nagłówek może mieć wiele elementów, my wykorzystamy trzy

Opis kodowania strony zgodnego z Polską Normą:

<meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />

Opis kodowania strony w standardzie Unicode:

<meta http-equiv="Content-type" content="text/html; charset=utf-8" />

Opis kodowania strony zgodnego ze niezalecanym standardem Windows (strony kodowane w tym standardzie świadczą o nieprofesjonaliźmie twórcy):
```
<meta http-equiv="Content-type" content="text/html; charset=win-1250" />
```
Tytuł strony
```
<title>  <title>
```

Dołączony arkusz styli

<link rel="stylesheet" href="nazwa_arkusza_stylow.css" type="text/css" />

Dopisz do swojej stronie pierwsza.html tytuł i opis kodowania
Obejrzyj stronę w przeglądarce (z http://)

Treść

HTML służy do opisu zawartości strony. Wykorzystywanie go do opisu wyglądu strony nie jest właściwe (do tego służą arkusze stylów, p. dalej).

Lista nieuporządkowana

<ul>
 <li>  <!-- Pierwszy element -->  </li>
 <li>  <!-- Drugi element -->  </li>
 <li>  <!-- ... -->  </li>
</ul>

Lista uporządkowana

<ol>
 <li>  <!-- Pierwszy element -->  </li>
 <li>  <!-- Drugi element -->  </li>
 <li>  <!-- ... -->  </li>
</ol>

Akapit
```

 

```

Odsyłacz do innej strony strony

<a href="adres_strony"> Wizualna_część_odsyłacza </a>

Wstawienie obrazka

<img src="plik_z_obrazkiem" alt="Opis" title="Tytuł" />

Tabelka

<table>
<tbody>
 <tr>
	<th>Nagł. 1</th><th>Nagł. 2</th><th>Nagł. 3</th>
 </tr>
 <tr>
	<td>dane 1.1</td><td>dane1.2</td><td>dane1.3</td>
 </tr>
 <tr>
	<td>dane 2.1</td><td>dane2.2</td><td>dane2.3</td>
 </tr>
</tbody>
</table>

Wyróżnienie tekstu
```
 Wyróżniony tekst 
```
Przejście do nowej strony
```
 
```

Dopisz do swojej stronie pierwsza.html kilka elementów strony
Obejrzyj stronę w przeglądarce (z http://) i obejrzyj jej tekst źródłowy. Wśród wstawionych elementów powinno być:

wypunktowanie
odsyłacz do strony www.mimuw.edu.pl
rysunek (dowolny)
rysunek (dowolny) będący odsyłaczem

Formatowanie - arkusze styli CSS

Formatowanie powinno być wskazane niezależnie od treści strony. Służą do tego arkusze styli CSS (Cascading style sheets).

Dodawanie styli

Style można dołączać na 3 sposoby:

do poszczególnych elementów (cieniaste)

<p style="color: sienna; margin-left: 20px">
 To jest akapit sformatowany podanym powyżej stylem
</p>

w nagłówku do całej strony (ujdzie w tłoku)

<style type="text/css">
 hr {color: sienna}
 p {margin-left: 20px}
 body {background-image: url("images/back40.gif")}
</style>

w oddzielnym pliku (to jest to!)
Do nagłówka dodajemy odwołanie do oddzielnego pliku

<link rel="stylesheet" type="text/css" href="styl.css" />

Zaś sam plik styl.css może być np. taki

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}

Postać pliku CSS

Cały plik składa się z opisów poszczególnych formatowań.

hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}

Jeden opis jest najczęściej zapisany w jednym wierszu (nie musi).

hr {color: sienna}

Pojedynczy opis składa się z selektora i samego formatowania. Selektor ma jedną z następujących postaci:

znacznika z HTMLa (np. hr)
znacznika z HTMLa i klasy (np. hr.przyklad)
samej klasy(np. .przyklad)
samego identyfikatora elementu strony, którego ma dotyczyć (np. #przyklad)

Składnia selektorów jest jeszcze bardziej rozbudowana. Odwołanie się do klasy stylu wymaga podania w dokumencie HTML podania w znaczniku słowa class z nazwą stylu, np.

<p class="przyklad" >

Formatowanie jest podawane w nawiasach klamrowych, poszczególne formaty są pooddzielane średnikami i mają postać:
nazwa-formatu dwukropek wartość.
Na przykład:

{background-color: rgb(10%,10%,10%); color: green; font-size: 2.0em}

Stwórz do swojej strony dwa arkusze styli, zawierające proste, ale różne, formatowania (np. różne kolory).

Przykładowe atrybuty wpisywane w arkuszach styli

color (kolor tekstu, np. rgb(20%,80%,30%))
background-color (kolor tła)
font-family (czcionka, np. Arial, sans-serif)
font-size (rozmiar czcionki: 1.2em)
background-color (kolor tła)

Dziedziczenie styli

Ogólnie style się dziedziczą zgodnie z hierarchią zawierania się. Wyjątkami są własności:

tła
ramki
wyświetlania
marginesów
wypełniania