Wstęp do HTML

Pierwotnie wzorem dla stron internetowych były teksty tworzone w edytorach (takich jak Word), które dzielone są na paragrafy. Do zbudowania strony wystarczały znaczniki:

• podział na paragrafy (p);
• załamanie wiersza (br);
• podkreślenia, kursywa, wytłuszczenia (u,i,b);
• nagłówki (h1,h2,...);
• linki (a);
• wyliczenia i numerowania (ul, ol, li);
• wstawienie obrazka (img);
• tablice (table, tr,th,td);
• formularze (form, input, button);

Z czasem zaczęło dominować podejście znane z programów składu drukarskiego. Strona internetowa zaczęła przypominać stronę publikacji drukowanej: podzielonej na ramki. Ustawienie ramek jest domyślnie jedna pod drugą.

<div>
<div>
 ramka 1
</div>
<div>
 ramka 2
</div>
</div>

Fragmenty tekstów w obrębie ramek można wyróżniać znacznikiem span. Na przykład:

To jest <span> wyróżniony tekst</span>

Sposób wyświetlania ramek i tekstów (span) ustawia się przy pomocy styli - czyli własności znaczników o nazwie "style"

Przykład:

<div>To jest <span style="color:red">czerwony tekst</span></div>

Używanie innych własności znaczników niż style oraz identyfikatory jest w zaniku.

Mamy przy tym dwa rodzaje własności identyfikatrów :

• identyfikator konkretnego znacznika: id
• identyfikator klasy: class

Przykład:

<div id="ramka1">To jest <span class="kolorowe_teksty" style="color:red">czerwony tekst</span></div>

Poza własnościami styli i identyfikatorów niezbędne są:

• własność href - dla znacznika <a> - określa link (URL) docelowy
• własność src dla znacznika img - określa adres grafiki
• własności związane z formularzami (action, method, type, value, name) - one będą opisane odrębnie

Style

Strybuty wyswietlania (na przykład kolor) można ustawiać za pomocą styli css. Na przykład <p style="color:red;font-weight:bold">.

Wróćmy do opisanych wcześniej ramek, aby pokazać jak za pomocą styli można określić ich atrybuty:

<div style="border: 1px solid blue;">
 ramka 1
</div>
<div style="border: 1px solid red;">
 ramka 2
</div>
<div style="border: 1px solid green;">
 ramka 3
</div>

W powyższym przykładzie opisano kolorowe obramowania. Podobnie możemy zmieniać teksty określone przez "span". Na przykład:

<span style="color:blue">
tekst niebieski
</span>

Aby ustawić je obok siebie - wykorzystuje się atrybuty szerokości i przepływu (float):

<div style="border: 1px solid;width:40%;float:left">
 ramka 1
</div>
<div style="border: 1px solid;width:40%;float:left">
 ramka 2
</div>
<div style="border: 1px solid;width:40%;float:left">
 ramka 3
</div>
<div style="clear:both;">
</div>
</div>

Aby odróżnić identyfikatory klas i znaczników poprzedza się je znakiem kropki (klasa) lub "płotka". Dzięki temu możemy zapisać style w odrębnej seksji, opisując identyfikatorami to, co chcemy zmieniać:

<style> 
 #ramka1 { background-color:yellow"; } 
 .kolorowe_teksty{font-weight:bold;} 
</style>

Język opisu styli CSS jest bardzo bogaty. Nie ma sensu uczyć się wszystkich atrybutów na pamięć - gdyż istnieje wiele dostępnych on-line podręczników.

Podręczniki CSS:

https://pl.wikibooks.org/wiki/CSS

https://www.w3schools.com/css/default.asp (angielski, z dobrym tłumaczeniem Google)

JavaScript

Trzy podstawowe elementy skryptów strony internetowej to:

• html
• style (arkusze styli - css)
• javascript

Porównując bogactwo podręczników z powyższym krótkim opisem może to wydawać się dziwne, ale naprawdę powyższe informacje wystaczą do tworzenia stron internetowych - poza formularzami i elementami zmienianymi dynamicznie. Do tego służy właśnie JavaScript. Javascript umożliwia modyfikację strony bez jej przeładowywania. Wywołanie skryptu występuje wskutek wydarzenia - na przykład załadowania strony lub kliknięcie w jakiś jej element.

Te zagadnienia będą szerzej omówione w następnej części skryptu.