GŁÓWNY SPIS TRESCI

Co to jest HTML?

HTML (ang. HyperText Markup Language) – hipertekstowy język znaczników, wykorzystywany do tworzenia stron internetowych.

Przykładowy dokument HTML5

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>...</title>
</head>
<body>
...
</body>
</html>
Pusta strona - zakodowana w UTF-8 (poprawnie wyświetla polskie znaki)
Aby pobrać naciskamy prawy klawisz myszy i Zapisz element docelowy jako...

Nagłówki

Nagłówki tworzymy używając elementów od <h1> do <h6>.
<h1>Nagłówek</h1>
<h2>Nagłówek</h2>
<h3>Nagłówek</h3>
<h4>Nagłówek</h4>
<h5>Nagłówek</h5>
<h6>Nagłówek</h6>

Akapit, paragraf

<p>Przykładowy akapit</p>

Nowa linia

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</br>

Pogrubienie

<b> Ten tekst zostanie pogrubiony </b>

Pochylenie

<i> Ten tekst zostanie pochylony </i>

Podkreślenie

<u> Ten tekst zostanie podkreślony </u>

Lista numerowana

<ol>
<li>element listy</li>
<li>element listy</li>
</ol>
  1. element listy
  2. element listy

Lista nieuporządkowana

<ul>
<li>element listy</li>
<li>element listy</li>
</ul>

Linki

wewnętrzne - prowadzą na strony wewnętrzne, znajdujące się w folderze, domenie

<a href="kr.html">Karta rowerowa</a>
Karta rowerowa

zewnętrzne - prowadzą na strony zewnętrzne, znajdujące się na innych domenach

<a href="http://www.allegro.pl">Allegro</a>
Allegro

Obrazki

<img src="obrazek.jpg">

Tabele

<table>
<tr>
<td>1 wiersz 1 kolumna</td>
<td>1 wiersz 2 kolumna</td>
</tr>
<tr>
<td>2 wiersz 1 kolumna</td>
<td>2 wiersz 2 kolumna</td>
</tr>
</table>

Element blokowy

<div>
...
</div>

Element <nav> - służy do wskazywania menu na stronie

<nav>
...
</nav>

Co to jest CSS?

CSS (ang. Cascading Style Sheets) - kaskadowe arkusze stylów. CSS jest odpowiedzialny za wygląd strony.
Budowa CSS:

własność: wartość;

Aby dodać plik CSS musimy dodać poniższy kod do strony HTML:
<head>
(...)
<link rel="Stylesheet" type="text/css" href="style.css" />
(...)
</head>

Przykład pliku style.css

h1 {
color: red;
}

Przykładowa klasa

.nazwa_klasy {
color: red;
}

Przykładowe własności wraz z wartościami

Wielkość czcionki (10px, 75%, small):
font-size: 12px;
Rodzaj czcionki (serif, sans-serif, monospace, cursive, fantasy, Arial, Helvetica, Verdana):
font-family: Arial;
Waga czcionki (100, 200, 300, 400, 500, 600, 700, 800, 900, normal, bold):
font-weight: bold;
Tekst - kolor (blue, red, green, yellow, pink ...):
color: red;
Tekst - dekoracja (underline, line-through, overline ...)
text-decoration: underline;
Tekst - wyrównanie (left, right, center, justify)
text-align: center;
Tło - kolor (blue, red, green, yellow, pink ...):
background-color: blue;
Tło - obrazek
background-image: url("obrazek.jpg");
Tło - pozycja (center, left, right, top, bottom, left top, left bottom, right top, right bottom)
background-position: center;
Tło - zaczepienie (scroll, fixed)
background-attachment: fixed;
Margines - górny
margin-top: 10px;
Margines - dolny
margin-bottom: 10px;
Margines - lewy
margin-left: 5px;
Margines - prawy
margin-right: 5px;
Obramowanie
border: 1px solid red;