Tworzenie stron internetowych WWW

Zasady tworzenia stron internetowych

• Dobry projekt strony internetowej polega na tworzeniu równowagi pomiędzy elementami projektowanej strony.
• Trendy przemijają, ale dobry projekt graficzny strony jest ponadczasowy.
• Ostateczne ulepszenia zawsze poprawiają wrażenia odwiedzającego stronę internetową. Niedopracowane strony wyglądają na amatorskie.
• Na kursie poznacie techniki tworzenia i dobre zasad projektowania graficznego stron WWW.
• Zaczniemy od układu graficznego i kompozycji oraz omówimy jakie elementy powinny się znaleźć na stronie internetowej.
• Prawdopodobnie najbardziej tajemniczą częścią projektowania graficznego jest wybór koloru. Zobaczymy w jaki sposób dobierać współgrające ze sobą schematy kolorów.
• Kolejnym zagadnieniem będą tekstury. Bardzo często ten element projektu graficznego jest pomijany i niesłusznie. Tekstu wspomagają przekaz strony na wielu płaszczyznach.
• Następnie będziemy mówić o typografii, której istotność jest niezaprzeczalna szczególnie w ostatnich latach. Typografia stanowi podstawowy element projektowania graficznego.
• A na koniec porozmawiamy o ilustracjach i co powinniśmy wiedzieć na temat samych elementów graficznych podczas projektowania stron WWW.

Jak zdefiniować dobry projekt graficzny

Są dwa główne aspekty, dzięki którym większość ludzi ocenia, czy projekt graficzny strony jest dobry czy zły. Pierwszy skupia się stricte na funkcjonalności, efektywnej prezentacji informacji i wydajności. Drugi aspekt to czyste podejście estetyczne, gdzie liczy się wartość artystyczna projektowania graficznego stron internetowych. Często projektanci dają się złapać w pułapkę estetyki i zapomnieć zupełnie o użytkownikach, którzy powinni zachwycać się projektem ale być przyciągani przez zawartość samą w sobie.

Części składowe strony internetowej

• Każda strona posiada pojemnik, który może być w postaci znacznika body lub osobnego zawierającego wszystko znacznika div.
• Powinna też posiadać logo lub logotyp identyfikujący konkretnego klienta i być spójne pomiędzy pozostały materiałami promocyjnymi firmy takimi jak wizytówki, papeteria, czy broszury informacyjne.
• Esencją każdej strony jest część nawigacyjna, czyli łatwy do znalezienia i używania system powiązań między stronami. Bez względu na to, czy planujemy pozioma czy pionową nawigację powinna ona znaleźć się jak najbliżej logo.
• Dalej mamy zawartość, która jest najważniejszym elementem strony i bez niej użytkownik opuści stronę w ciągu kilku sekund. Ważne jest aby blok z główną zawartością tworzył punkt skupienia całego projektu graficznego, tak aby odwiedzający w łatwy sposób mógł prześledzić zawartość strony pod kontem informacji, jakich potrzebuje.
• Następnie jest stopka umieszczona u dołu strony, która w wyraźny sposób oddziela zawartość od dolnej krawędzi okna przeglądarki informując użytkownika o osiągnięciu końca strony.
• Ostatnim często pomijanym elementem jest przestrzeń pusta. Bez odpowiedniego użycia tej przestrzeni, układ i ilość elementów może przytłaczać i wyzwalać negatywne emocje.

Teoria siatki

• Reguła części trzecich
• System siatki 960
• Trendy

Wprowadzenie do HTML

HTML jest to język opisu struktury strony. W specyfikacji zdefiniowano określony zestaw stylów takich jak nagłówki, akapity, listy i tabele. Dodatkowo zostały zdefiniowane również pewne elementy formatowania znaków takich jak pogrubienie. Każdy taki element posiada swoją nazwę i występuje w formie znacznika. Tworząc stronę nadajemy różnym jej elementom odpowiednie etykiety.

HTML nie opisuje układu strony. Znaczniki opisują tylko styl elementu a nie jego wygląd.

HTML jest językiem znaczników to znaczy, że tworzenie strony polega na napisaniu treści i dodaniu odpowiednich znaczników wokół słów, zdań i całych akapitów.

Strony stworzone w HTML to pliki tekstowe, co oznacza że mogą być odczytywane przez każdy edytor tekstów. Większość znaczników ma następującą postać:

<p>Zawartość znacznika</p>

Nie wszystkie znaczniki HTML mają swój początek i koniec. Jednak w języku XHTML wszystkie znaczniki muszą mieć koniec lub zakończenie. Przykładem może być znacznik łamania wiersza:

<br />

Struktura pliku HTML

Znaczniki ogólnej struktury strony, znaczniki tytułów, nagłówków i paragrafów, znaczniki komentarzy i znaczniki list. Struktura pliku HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Tworzenie i zarządzanie stronami WWW</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="HTML, CSS, XHTML, JavaScript, PHP" />
	<meta name="description" content="Krótki opis strony. Szkolenie na temat tworzenia stron internetowych." />
</head>
<body>

</body>
</html>

Nagłówki i paragrafy

Nagłówki służą do podziału tekstu na części. W języku HTML zdefiniowanych jest sześć poziomów nagłówków:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Tworzenie i zarządzanie stronami WWW</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="HTML, CSS, XHTML, JavaScript, PHP" />
	<meta name="description" content="Szkolenie na temat tworzenia stron internetowych." />
</head>
<body>

	<h1>Tworzenie i zarządzanie stronami WWW</h1>
	
	<h2>Zasady tworzenia stron WWW</h2>
	
	<h2>Wprowadzenie do HTML</h2>
	
	<h3>Podstawy HTML</h3>
	
	<p>Akapit to podstawowy sposób dzielenia łamu na rozpoznawalne wzrokiem mniejsze fragmenty w celu zwiększenia czytelności tekstu.</p>

</body>
</html>

Listy wypunktowane i numerowane

Bardzo często używanym elementem HTML są listy. W języku zdefiniowane są listy numerowane oznaczane kolejnymi liczbami, a także listy wypunktowane oznaczone kropkami lub innymi symbolami. Przykład użycia i formatowania list:

<p>Lista wypunktowana. Zagadnienia omawiane na kursie.</p>

<ul>
	<li>HTML</li>
	<li>CSS</li>
	<li>PHP</li>
</ul>

<p>Lista numerowana. Zagadnienia omawiane na kursie.</p>

<ol>
	<li>HTML</li>
	<li>CSS</li>
	<li>PHP</li>
</ol>

<p>Formatowanie list numerowanych.</p>

<ol type="a" start="3">
	<li>HTML</li>
	<li>CSS</li>
	<li value="23">PHP</li>
</ol>

<p>Formatowanie list wypunktowanych.</p>

<ul type="circle">
	<li>HTML</li>
	<li>CSS</li>
	<li>PHP</li>
</ul>

Komentarze i hiperłącza

Istnieje możliwość wstawiania komentarzy do kodu napisanego w języku HTML:

<!-- To jest komentarz. Komentarze nie są wyświetlane w przeglądarce -->

Do utworzenia hiperłącza potrzebna jest nazwa pliku i tekst, który będzie wyróżniony przez przeglądarkę po wybraniu którego nastąpi realizacja połączenia. Do tworzenia połączeń na stronach służy znacznik kotwicy. Ścieżki podawane w odnośniku mogą być względne oraz bezwzględne. Możemy również definiować połączenia ze zdalnymi stronami. Należy pamiętać o nazwie protokołu i wielkości znaków w adresie URL:

<a href="05.html">Formatowanie list</a><br /><br />
	
<a href="archiwum/2011/luty.html">Luty 2011</a><br /><br />
	
<a href="../index.html">Ścieżka względna do pliku</a><br /><br />
	
<a href="http://allegro.pl">Allegro</a>

Znaki specjalne

Znaki specjalne w adresach URL powinny być zapisane w postaci kodu:

100 °C

Powyższy kod wyświetli się w przeglądarce jako:

100 °C

Tablice ze znakami specjalnymi:
HTML Character Sets: http://www.w3schools.com/tags/ref_charactersets.asp
HTML ISO-8859-1 Reference: https://www.w3schools.com/charsets/ref_html_8859.asp
HTML Symbol Entities Reference: https://www.w3schools.com/charsets/ref_html_symbols.asp
Special Characters in HTML: http://www.degraeve.com/reference/specialcharacters.php

Formatowanie tekstu i pliki graficzne

Za pomoca dodatkowych znaczników możemy określać styl czcionki:

<p>To jest <strong>bardzo ważny</strong> raport.</p>

<p>Formatowanie tekstu za pomocą <i>kursywy</i> oraz <b>pogrubienia</b></p>

Wstawianie pliku graficznego:

<img src="obrazek.png" width="400" height="250" alt="" /><br /><br />

<p>Plik graficzny jako hiperłącze.</p>

<a href="http://allegro.pl"><img src="obrazek.png" width="400" height="250" alt="" /></a>

Tabele

Struktura tabeli określona jest za pomocą wierszy, w których umieszczone są komórki z danymi:

<table border="1" width="500" cellpadding="5" cellspacing="0">
	<tr>
		<th>Imię</th>
		<th>Wzrost</th>
		<th>Waga</th>
		<th>Kolor oczu</th>
	</tr>
	<tr>
		<td>Alicja</td>
		<td>171</td>
		<td>57</td>
		<td>niebieski</td>
	</tr>
	<tr>
		<td>Tomek</td>
		<td>185</td>
		<td>82</td>
		<td>chabrowe</td>
	</tr>
	<tr>
		<td>Zuzanna</td>
		<td>160</td>
		<td>52</td>
		<td>brązowe</td>
	</tr>
</table>

Możliwe jest scalanie wybranych komórek zarówno w pionie jak i poziomie:

<table border="1" width="250" cellpadding="5" cellspacing="0">
	<tr>
		<th colspan="2"> </th>
		<th>Luz<br />pierścienia</th>
	</tr>
	<tr align="center">
		<th rowspan="2">Tłok</th>
		<th>Górny</th>
		<td>3mm</td>
	</tr>
	<tr align="center">
		<th>Dolny</th>
		<td>3.2mm</td>
	</tr>
</table>

Wykorzystywanie obrazów i kolorów

Format zapisu plików graficznych, kompresja, kod zapisu kolorów, tło strony.

Wprowadzenie do CSS

CSS jest swego rodzaju poprawką błedu jaki popełniono na samym początku powstawania języka HTML.

Wraz z rozwojem projektowania stron, projektanci zaczeli napotykać różne problemy. Do tworzenia bardziej zaawansowanych projektów zaczeli używać tabel, które pozwalały na rozmieszczanie zawartości w poszczególnych komórkach. Tabele jednak nigdy nie zostały zaprojektowane do takiego celu i były wysoce niewydajne.

Osadzanie tabel w tabelach. W3C postanowiło odseparować treść od formy jej prezentacji i tak powstał CSS.

Style to zestawy reguł, które za pomocą znaczników wybierających przyporządkowują im pewne atrybuty i wartości tych atrybutów. Jakich elementów dotyczą reguły CSS? Wszystkie elementy konkretnego typu, wszystkie elementy konkretnego typu, które są przypisane do konkretnej klasy, wszystkie elementy które zawarte są w innych elementach konkretnego typu lub przypisanych do konkretnej klasy, tylko konkretnego elementu, który ma przypisany niepotwarzalny identyfikator. Przykładowa reguła CSS ma postać:

p {
	color: #0c7ead;
}

Rodzaje selektorów

Klasa to zbiór reguł, które stosują się do wszystkich elementów z przypisaną nazwą klasy. W kodzie HTML definiuje się ją jako dodatkowy parametr danego znacznika:

To jest specjalnie sformatowany akapit

W pliku ze stylami CSS należy utworzyć korespondującą regułę:

.news {
	color: #0c7ead;
}

Innym typem selektora jest identyfikator, którego stosuje się tylko do jednego unikalnego elementu:

To jest unikalny element na stronie

W pliku ze stylami CSS definiujemy regułę dotyczacą tego elementu:

#lewa_kolumna{
	width: 220px;
	margin-right: 20px;
}

Osadzanie stylów

Style CSS mogą być osadzone na trzy sposoby. Inline w kodzie HTML, jako arkusz osadzony w tym samym pliku z kodem HTML lub arkusz w pliku zewnętrznym. Przykład osadzenia w linii:

<p>Akapit to podstawowy <span style="color: #0c7ead;">sposób dzielenia łamu</span> na rozpoznawalne wzrokiem mniejsze fragmenty.</p>

Przykład osadzania arkusza stylów w danym pliku:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Dziedziczenie reguł w CSS</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="HTML, CSS, XHTML, JavaScript, PHP" />
	<meta name="description" content="Szkolenie na temat tworzenia stron internetowych." />
	<style type="text/css">
		p {
			color: #0c7ead;
		}
		
		h1 {
			color: #1b5378;
		}
	</style>
</head>
<body>
	<p>Akapit tekstu...</p>
</body>
</html>

Dołączanie arkuszu stylów CSS z pliku zewnętrznego:

<head>
	<title>Tworzenie i zarządzanie stronami WWW</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

Zasady dziedziczenia właściwości

Elementy kodu HTML dziedziczą cechy elementów nadrzędnych na zasadzie kaskady, chyba że są niżej w hierarchii ponownie zdefiniowane. Przykład dziedziczenia i precyzyjnego określania elementów, których to dziedziczenie dotyczy:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Dziedziczenie reguł w CSS</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="keywords" content="HTML, CSS, XHTML, JavaScript, PHP" />
	<meta name="description" content="Szkolenie na temat tworzenia stron internetowych." />
	<style type="text/css">
		body {
			font-family: Georgia, Arial;
		}
		
		h1 {
			color: #1b5378;
		}
		
		body span {
			color: #1b5378;
		}
		
		p > span {
			color: #e3e3e3;
		}
	</style>
</head>
<body>

	<h1>Tworzenie i zarządzanie stronami WWW</h1>

	<h2>Zasady tworzenia stron WWW</h2>

	<p>Akapit to podstawowy sposób dzielenia łamu na rozpoznawalne wzrokiem mniejsze fragmenty w celu zwiększenia czytelności tekstu.</p>

	<p>Kolejny akapit <span>tekstu</span> z zastosowanym stylem</p>

	<span>Zwykły element liniowy</span>

	<p>Jeszcze jeden akapit <strong><span>tekstu</span></strong> z innym dziedziczeniem</p>
	
</body>
</html>

Możemy tutaj zaobserwować dwa rodzaje dziedziczenia.

body span {
	color: #1b5378;
}

Pierwszy stosuje regułę do najbardziej skrajnego z prawej strony wybieraka, który musi nastepować, czyli mieć swojego rodzica w postaci elementu z lewej strony ale dotyczy to rowniez elementow głebiej połozonych w kodzie które sa też dziećmi.

p > span {
	color: #e3e3e3;
}

Powyższy zapis stosuje regułę do wszystkich elementów, które są bezpośrednimi dziećmi elementu po lewej stronie.

Model pudełkowy

Po środku modelu pudełkowego jest zawartość sama w sobie. Może nią być tekst ale i plik graficzny również. Szerokość pudełka określamy dodając razem szerokość zawartości, padding który przylega do zawartości i obramowanie. Margines jest czyms innym i określa przestrzen wokół pudełka a dokładnie jak daleko od tego pudełka mogą leżeć przylegające elementy. Wszystkie te wymiary mogą być ustawione za pomoca właściwości CSS dla każdej z czterech stron pudełka. Dodatkowo właściwości border oprócz grubości i samego faktu że jest ramką moga mieć styl kreślenia i kolor kreślenia.

Najbardziej słuszną jednostką wymiarowania w modelu boxowym jest piksel ponieważ obraz wyświetlany jest w postaci pikseli, a procentowe wymiary mogą się zmieniać w zależności od widocznego obszaru okna przeglądarki.

Padding i demonstracja modelu boxowego z szarym tłem w boxie. Padding może przybierac jedną wartość czyli po równo dla każej krawędzi, dwie wartości czyli pierwsza wartość określa jednocześnie odstęp od góry i od dołu a druga wartość liczbowa określa padding po lewej i po prawej stronie. Dla zapamiętania przeciwległe boki. Numerowanie boków rozpoczynamy od górnego idąc zgodnie z ruchem wskazówek zegara czyli w prawo. Padding może mieć jeszcze trzy wartości co jest bardzo żadko używane pierwsza wartość dotyczy góry, druga wartość dotyczy lewej i prawej strony a trzecia dotyczy dołu. I na koniec możemy mieć cztery wartości po jednej na każdy bok pudełka licząc od górnej krawędzi.

Krawędzie border, border-width, border-color, border-bottom-color, border-style

Margin i odsuwanie elementów które pierwotnie zajmują całą szerokość okna przeglądarki. Również cztery parametry określające odstępy od pudełka. negatywne wartości marginesu w praktyce, widoczne szczególnie w odniesieniu do większego marginesu który już był wcześniej ustalony dla danego elementu. Dwa marginesy umieszczone bezpośrednio obok siebie znoszą się i ostateczna wartość wynosi tyle co największy z dwóch marginesów.

Projektowanie układu elementów

Element sekcji lub działu:

<div>Sekcja</div>

Służy do grupowania elementów blokowych w celu późniejszego formatowania za pomocą reguł CSS.

Pozycjonowanie elementów na stronie

Pozycjonowanie elementów blokowych odbywa się za pomocą styli CSS. Przykład różnego wzajemnego ułożenia elementów na stronie:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>Pozycjonowanie</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta name="keywords" content="projekt, html, css" />
	<meta name="description" content="Krótki opis strony" />
	<link rel="stylesheet" href="pozycjonowanie.css" type="text/css" />
</head>
<body>

<div id="piaty">piąty</div>

<div id="wrapper">
	<div id="pierwszy">pierwszy</div>
	<div id="drugi">drugi</div>
	<div id="trzeci"><div id="szosty">szósty</div>trzeci</div>
	<div id="czwarty">czwarty</div>
</div>

</body>
</html>

Zawartość pliku z arkuszem stylów CSS:

body {
	margin: 0px 0px 60px 0px;
}

#wrapper {
	width: 400px;
	margin: 0px auto;	
}

#pierwszy, #trzeci	 {
	width: 400px;
	height: 250px;
	border: 1px solid #ccc;
	position: relative;
}

#drugi {
	width: 200px;
	height: 200px;
	background-color: #ccc;
	position: relative;
	top: 20px;
	left: 40px;
}

#czwarty {
	width: 200px;
	height: 200px;
	background-color: #0c7ead;
	position: absolute;
	top: 30px;
	left: 40px;
}

#piaty {
	background-color: #ccc;
	width: 100%;
	position: fixed;
	bottom:  0px;
	z-index: 5;
	height: 100px;
}

#szosty {
	width: 100px;
	height: 100px;
	background-color: #0c7ead;
	position: absolute;
	left: -80px;
	top: 50px;
}