Podstawy języka HTML

1. Tworzenie pliku HTML

Aby utworzyć plik html należy utworzyć plik tekstowy. Następnie otworzyć go i zapisać jako "index.htm" (zdjęcie 1).

2. Otwieranie Ľródła strony

Aby zobaczyć Ľródło pliku "index.htm" należy uruchowmić go, nacisn±ć prawy klawisz myszki i wybrać "Pokaż Ľródło"(zdjęcie 2).

3. Ramy dokumentu HTML

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<meta name="Description" content="Tu wpisz opis zawarto¶ci strony" />
<meta name="Keywords" content="Tu wpisz wyrazy kluczowe rozdzielone przecinkami" />
<title>Tu wpisz tytuł strony</title>
</head>
<body>
Tu wpisuje się tre¶ć strony(kod HTML)
</body>
</html>

4. Podstawowe znaczniki języka HTML

ZnaczenieKod HTMLPrzykład
Tekst pogrubiony<b>Tu wpisz jaki¶ tekst</b>To jest tekst pogrubiony
Koniec liniTu wpisz jaki¶ tekst<br>To jest tekst
złamany do następnej linii
Tekst pochylony<i>Tu wpisz jaki¶ tekst</i>To jest tekst pochylony
Tekst podkre¶lony<u>Tu wpisz jaki¶ tekst</u>To jest tekst podkre¶lony
Wielko¶ć czcionki<font size="tu wpisz wielko¶ć czcionki od 1 do 7">Tu wpisz jaki¶ tekst</font>To jest tekst o rozmiarze 6
Kolor tekstu<font color="tu wpisz kolor tekstu(tylko po angielsku np.blue)">Tu wpisz jaki¶ tekst</font>To jest tekst niebieski(blue)
Odsyłacz do innej strony<a href="adres strony np. http://trojkajarocin.pl">Tu wpisz tekst wyswietlany na ekranie</a>To jest link
Tekst przesuwaj±cy sie<marquee>Tu wpisz jaki¶ tekst</marquee>To jest tekst przesuwaj±cy sie
Tekst przekre¶lony<s>Tu wpisz jaki¶ tekst</s>To jest tekst przekre¶lony
Tekst migotaj±cy<blink>Tu wpisz jaki¶ tekst</blink>To jest tekst migotaj±cy
Wstawianie grafiki<img src="¶cieżka dostępu" alt="Tekst alternatywny"> 
Wyrównanie tekstu w akapicie<p align="left">Tekst wyrównany do lewej.</p>
<p align="right">Tekst wyrównany do prawej.</p>
<p align="center">Tekst wyrównany do ¶rodka.</p>
<p align="justify"">Tekst wyjustowany.</p>
 

5. Wypunktowanie oraz numerowanie

Wypunktowanie

Kod HTML:
<ul>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ul>

Efekt: Numerowanie

Kod HTML:
<ol>
<li>Punkt pierwszy</li>
<li>Punkt drugi</li>
<li>Punkt trzeci</li>
</ol>

Efekt:
  1. Punkt pierwszy
  2. Punkt drugi
  3. Punkt trzeci

6.Wykaz podstawowych kolorów

Oprócz kolorów zapisanych w systemie szesnastkowym, dostępna jest ograniczona paleta kolorów nazwanych, dla których zamiennie możemy używać ich nazwy zamiast kodu HEX:
NazwaHEXKolor
black#000000 
silver#C0C0C0 
gray#808080 
white#FFFFFF 
maroon#800000 
red#FF0000 
purple#800080 
fuchsia#FF00FF 
green#008000 
lime#00FF00 
olive#808000 
yellow#FFFF00 
navy#000080 
blue#0000FF 
teal#008080 
aqua#00FFFF 
Przykład:
KOD:
<font color="#FF0000"> Jaki¶ tam tekst czerwony!!!!!!!!</font>
Po wpisaniu takiego kodu na stronie otrzymamy:
Jaki¶ tam tekst czerwony!!!!!!!!
Przykład:
KOD:
<body bgcolor="blue">
Po wpisaniu takiego kodu otrzymamy niebieski kolor tła strony.