Łukasz Sokołowski: /* Znaki specjalne */

2017-09-21T14:38:17Z

Znaki specjalne

New page

== 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.<br />
<br />
HTML nie opisuje układu strony. Znaczniki opisują tylko styl elementu a nie jego wygląd.<br />
<br />
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.<br />
<br />
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ć:

<pre>
<p>Zawartość znacznika</p>
</pre>

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:

<pre>
<br />
</pre>

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

<pre>
<!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>
</pre>

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

<pre>
<!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>
</pre>

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

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

== Komentarze i hiperłącza ==
Istnieje możliwość wstawiania komentarzy do kodu napisanego w języku HTML:

<pre>

</pre>

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:

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

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

100 &#176;C

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

100 °C

Tablice ze znakami specjalnymi:<br />
HTML Character Sets: http://www.w3schools.com/tags/ref_charactersets.asp<br />
HTML ISO-8859-1 Reference: https://www.w3schools.com/charsets/ref_html_8859.asp<br />
HTML Symbol Entities Reference: https://www.w3schools.com/charsets/ref_html_symbols.asp<br />
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:

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

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

Wstawianie pliku graficznego:

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

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

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

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

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

== 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.<br />
<br />
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.<br />
<br />
Osadzanie tabel w tabelach. W3C postanowiło odseparować treść od formy jej prezentacji i tak powstał CSS.<br />
<br />
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ć:

<pre>
p {
color: #0c7ead;
}
</pre>

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

<p class="news">To jest specjalnie sformatowany akapit</p>

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

<pre>
.news {
color: #0c7ead;
}
</pre>

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

<p id="lewa_kolumna">To jest unikalny element na stronie</p>

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

<pre>
#lewa_kolumna{
width: 220px;
margin-right: 20px;
}
</pre>

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

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

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

<pre>
<!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>
</pre>

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

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

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

<pre>
<!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>
</pre>

Możemy tutaj zaobserwować dwa rodzaje dziedziczenia.

<pre>
body span {
color: #1b5378;
}
</pre>

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.

<pre>
p > span {
color: #e3e3e3;
}
</pre>

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.<br />
<br />
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.<br />
<br />
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.<br />
<br />
Krawędzie border, border-width, border-color, border-bottom-color, border-style<br />
<br />
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:

<pre>
<div>Sekcja</div>
</pre>

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:

<pre>
<!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>
</pre>

Zawartość pliku z arkuszem stylów CSS:

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

[[Category:HTML]]
[[Category:CSS]]

Tworzenie stron internetowych WWW - Revision history

Łukasz Sokołowski: /* Znaki specjalne */