Struktura dokumentu

<!doctype html>

<html>

        <head>

               <meta charset="UTF-8">

               <title>...</title>

        </head>

        <body>

               ...

        </body>

</html>

Tytuł strony

<head>
        <title>Tytuł strony</title>
</head>

Wyrazy kluczowe

<head>
        <meta name="Keywords" content="wyraz1, wyraz2, wyraz3..." />
</head>

Język strony

<head>
        <meta http-equiv="Content-Language" content="język" />
</head>

Autor strony

<head>
        <meta name="Author" content="Tu wpisz swoje imię i nazwisko" />
</head>

Opis zawartości strony

<head>
        <meta name="Description" content="Tu podaj opis twojej strony" />
</head>

Cache

<head>
        <meta http-equiv="Expires" content="0" />
        <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate" />
        <meta http-equiv="Cache-Control" content="post-check=0, pre-check=0" />
        <meta http-equiv="Pragma" content="no-cache" />
</head>

Polecenia wstawione w treści nagłówkowej dokumentu w większości przypadków teoretycznie zabezpieczają stronę przed przechowywaniem w tzw. cache-u przeglądarki, czyli pamięci podręcznej. Cache-owanie polega na zapisywaniu dokumentów HTML, obrazków i innych elementów strony na dysku lokalnym użytkownika podczas pierwszej wizyty. Normalnie, jeśli odwiedzimy taką stronę ponownie, wczyta się dużo szybciej, ponieważ dane zostaną pobrane z dysku twardego, a nie z Internetu. Lecz w pewnych przypadkach możemy chcieć, aby treść dokumentu nie była w ten sposób przechowywana, lecz za każdym razem wczytywana bezpośrednio z Internetu (np. jeśli strona jest często aktualizowana lub nie chcemy by była zapisywana na dysku użytkownika). Wtedy przydatne okazują się te właśnie polecenia. Niestety przegladarki często po prostu ignorują powyższe polecenia, a więc całkowitej pewności nie będzie raczej nigdy :-(

 Obrazek

  1. Zwykły (domyślnie):
<img src="/ścieżka dostępu" alt="Tekst alternatywny" />

 <img width=”500” height=”420” src=”obrazek.jpg”/>

 

ODSYŁACZE

<a href="/względna ścieżka dostępu">opis</a>

Do adresu internetowego
<a href="http://adres strony">opis</a>

 <a href="/adres"><img src="/ścieżka dostępu do obrazka" alt="tekst alternatywny" /></a>

 

KOLOR tła lub czcionki

 <body bgcolor="kolor">...</body> lub <font color="kolor">...</font>

TEXT

 <H1> .. </H1> - nagłówki od h1 do h6 = wielkość nagłówka
<b>...</b> - pogrubienie
<i>...</i> - pochylenie
<u>...</u> - podkreślenie

 

<p>...</p> - akapit
<center>...</center>
<br /> - koniec linii

<hr /> - pozioma linia

 

 

Nagłówek i treść

Kolor tekstu strony

<body text="kolor">...</body>

Kolor tła strony

<body bgcolor="kolor">...</body>

Tło obrazkowe

<body background="ścieżka dostępu do obrazka">...</body>

lub

<body background="ścieżka dostępu do obrazka" bgproperties="fixed">...</body>

Kolor odsyłaczy

<body link="kolor nowych" vlink="kolor odwiedzonych" alink="kolor aktywnych">...</body>
 

 

Wyróżnienie

  1. Zwykłe (emfaza)

<em>...</em>

  1. Mocne (mocna emfaza)

<strong>...</strong>

Indeks

  1. Indeks górny

<sup>...</sup>

  1. Indeks dolny

<sub>...</sub>

 

Czcionka

<font>...</font>

Wielkość czcionki

<font size="n">...</font>

Kolor czcionki

<font color="kolor">...</font>

Czcionka koloru "black" Czcionka koloru "silver" Czcionka koloru "gray" Czcionka koloru "white" Czcionka koloru "maroon" Czcionka koloru "red" Czcionka koloru "purple" Czcionka koloru "fuchsia" Czcionka koloru "green" Czcionka koloru "lime" Czcionka koloru "olive" Czcionka koloru "yellow" Czcionka koloru "navy" Czcionka koloru "blue" Czcionka koloru "teal" Czcionka koloru "aqua" Czcionka koloru "#800af0"

Rodzaj czcionki

<font face="rodzaj">...</font>

Czcionka bazowa

<basefont size="rozmiar" color="kolor" face="rodzaj" />

Czcionka powiększona i pomniejszona

  1. Czcionka powiększona
<big>...</big>
  1. Czcionka pomniejszona
<small>...</small>
 

 TABELE

<table>
<tr>
    <td>...</td>    <td>...</td>
</tr>
<tr>
    <td>...</td>    <td>...</td>
</tr>
</table>

Jest to najprostsza tabela, gdzie:

<table>...</table>
    jest znacznikiem tabeli
<tr>...</tr>
    jest znacznikiem wiersza
<td>...</td>
    jest znacznikiem pojedynczej komórki

W miejsce kropek należy wpisać treść poszczególnych komórek tabeli.

Powyższe polecenia tworzą tabelę, złożoną z dwóch kolumn i dwóch wierszy (razem cztery komórki). Jeśli to konieczne, możliwe jest dodanie nowych kolumn (poprzez wpisanie dodatkowych znaczników <td>...</td>) lub wierszy (znaczniki <tr>...</tr>). Należy przy tym zauważyć, że komórki tabeli (<td>...</td>) znajdują się wewnątrz znacznków wierszy (<tr>...</tr>)! Liczba komórek w każdym wierszu powinna być taka sama.

Wyrównanie tabeli

<table align="rodzaj">...</table>

gdzie jako "rodzaj" należy wpisać:

    "left" - wyrównanie tabeli do lewej strony (domyślnie), względem otaczającego tekstu
    "right" - wyrównanie tabeli do prawej strony, względem otaczającego tekstu
    "center" - wyśrodkowanie tabeli

Obramowanie

<table border="x">...</table>
gdzie "x" oznacza grubość zewnętrznej ramki tabeli (w pikselach).

Wymiary

Wymiary całej tabeli
<table width="x" height="y">...</table>
lub
<table width="x%" height="y%">...</table>


Wymiary pojedynczej komórki
<table>
<tr>
    <td width="x" height="y">...</td>
</tr>
</table>
lub
<table>
<tr>
    <td width="x%" height="y%">...</td>
</tr>
</table>

We wszystkich przypadkach "x" oznacza szerokość w pikselach, a "x%" szerokość w procentach całego ekranu lub względem wymiarów elementu nadrzędnego.
Analogicznie "y" oraz "y%" oznaczają wysokość.