HTML & CSS

Podstawy

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Base HTML5 structure</title>
    </head>
    <body>
        Hello world!
    </body>
    <!-- Comment -->
</html>

Domyslny przepływ dokumentu

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/3d.css" />
    </head>
    <body>
        <header>
            header
        </header>
        <article>
            article
            <section>
                section
                <p>paragraph</p>
            </section>
        </article>
        <footer>
            footer
        </footer>
    </body>
</html>

Nie do końca 2D

Semantyczne znaczenie tagów

<div id="menu_glowne">
    <div><a href="#o-nas">O nas</a></div>
    <div><a href="#galeria">Galeria</a></div>
    <div><a href="#kontakt">Kontakt</a></div>
</div>

<nav>
    <ul>
        <li><a href="#o-nas">O nas</a></li>
        <li><a href="#galeria">Galeria</a></li>
        <li><a href="#kontakt">Kontakt</a></li>
    </ul>
</div>

Tagi warte uwagi

header
article
aside
footer

section
nav
figure
time

<!DOCTYPE html>
<html>
    <head>
        <title>Base layout</title>
        <link rel="stylesheet" href="css/semantic.css" />
    </head>
    <body>
        <header>
            <nav>Navigation</nav>
        </header>
        <article>
            <header>
                <h1>title</h1>
                <time datetime="2013-10-14">date</time>
            </header>
            <p>Content</p>
        </article>
        <aside>comments</aside>
        <footer>
            footer
        </footer>
    </body>
</html>

Model box

box-sizing

content-box
border-box
padding-box

content-box

<!DOCTYPE html>
<html>
<head>
    <title>Base HTML5 structure</title>
    <link rel="stylesheet" href="css/boxing.css"/>
    <style>
        #boxing {
            width: 150px;
            height: 150px;
            margin: auto;
            line-height: 150px;
            padding: 10px;
            border: 10px solid #fff;
            background: #000;
        }

        #inner {
            background: #ddd;
        }
    </style>
</head>
<body>
<div id="boxing">
    <div id="inner"></div>
</div>
<script language="JavaScript">
    var box = document.getElementById('boxing');
    var inner = document.getElementById('inner');
    inner.innerText = box.offsetWidth + 'px';
</script>
</body>
</html>

border-box

<!DOCTYPE html>
<html>
<head>
    <title>Base HTML5 structure</title>
    <link rel="stylesheet" href="css/boxing.css"/>
    <style>
        #boxing {
            width: 150px;
            height: 150px;
            margin: auto;
            line-height: 110px;
            padding: 10px;
            border: 10px solid #fff;
            background: #000;
            box-sizing: border-box;
        }

        #inner {
            background: #ddd;
        }
    </style>
</head>
<body>
<div id="boxing">
    <div id="inner"></div>
</div>
<script language="JavaScript">
    var box = document.getElementById('boxing');
    var inner = document.getElementById('inner');
    inner.innerText = box.offsetWidth + 'px';
</script>
</body>
</html>

problem with border

<!DOCTYPE html>
<html>
<head>
    <title>Base HTML5 structure</title>
    <link rel="stylesheet" href="css/boxing.css"/>
    <style>
        .row {
            width: 48%;
            padding: 1%;
            border: 1px solid #000;
            float: left;
        }
    </style>
</head>
<body>
    <div class="row">1</div>
    <div class="row">2</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <title>Base HTML5 structure</title>
    <link rel="stylesheet" href="css/boxing.css"/>
    <style>
        .row {
            width: 50%;
            padding: 1%;
            border: 1px solid #000;
            float: left;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
    <div class="row">1</div>
    <div class="row">2</div>
</body>
</html>

Typy pozycjonowania dokumentu

Domyślny
Wyrównania
Pozycjonowanie absolutne

display
float
position

Całe pozycjonowanie dokumentu można porównać do Worda. Czyli intuicyjnie tekst pisany jest z lewej do prawej, gdy linia się skończy przechodzi do nowej. Wstawienie obrazka lub tabelki powoduje że tekst pisany może być pod lub nad. Możemy także ustawić na obrazku wyrównanie gdzie tekst będzie opływał obiekt (float). I ostatnia opcja czyli obiekt inteligentny który możemy ustawić gdzie chcemy (position). Może on zakrywać nasz tekst lub zasłaniać go. Krótkie wprowadzenie do styli. Każdy tag posiada własności opisujące jego wygląd. Własności te nazywane są stylami. Każdy tag posiada podstawowe własności które można nadpisać. Właściwościami odpowiedzialnymi za układ tagów są... Dwa pierwsze są ze sobą powiązane i w praktyce używane są wspólnie.

Domyślny przepływ dokumentu

Display

block
inline
inline-block
none
inherit
list-item
table
inline-table

display: block

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/3d.css" />
    </head>
    <body>
        <header>
            header
        </header>
        <article>
            article
            <section>
                section
                <p>paragraph</p>
            </section>
        </article>
        <footer>
            footer
        </footer>
    </body>
</html>

Własności display: block

szerokość równa szerokości rodzica,
wysokość w zależności od zawartości,
boxy renderowane zawsze pod sobą,
białe znaki pomiędzy tagami nie są widoczne,
wysokość jak i szerokość może zostać zmieniona.

display: inline

<!DOCTYPE html>
<html>
    <head>
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/block.css" />
    </head>
    <body>
        Text without tag
        <cite>cite</cite>
        <a href="#">a</a><span>span</span>
        <strong>a very long and important text in strong</strong>
    </body>
</html>

Własności display: inline

szerokość w zależności od zawartości,
wysokość w zależności od zawartości,
boxy renderowane od lewej do prawej,
białe znaki pomiędzy tagami są widoczne,
wysokość jak i szerokość nie może zostać zmieniona.

display: inline-block

<!DOCTYPE html>
<html>
    <head>
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/base.css" />
    </head>
    <body>
        <header>
            header
        </header>
        <article style="display: inline-block; width: 50%">
            article
        </article><aside style="display: inline-block; width: 50%">aside</aside>
        <aside style="display: inline-block; width: 70%">aside</aside>
        <footer>
            footer
        </footer>
    </body>
</html>

Własności display: inline-block

szerokość w zależności od zawartości,
wysokość w zależności od zawartości,
boxy renderowane od lewej do prawej,
białe znaki pomiędzy tagami są widoczne,
wysokość jak i szerokość może zostać zmieniona.

Wyrównania

Float & clear

left
right
none
inherit
both

float

<!DOCTYPE html>
<html>
    <head>
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/float.css" />
    </head>
    <body>
        <article>
            <p>
                <img src="../img/html5.png" style="float: left" />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia iaculis semper.
                ...
                sagittis nec orci. Mauris massa diam, congue eu tincidunt eget, dignissim at justo.
                <img src="../img/html5.png" style="float: right" />
                Suspendisse tempor orci eget elementum dapibus. Phasellus at ornare augue.
            </p>
        </article>
        <footer style="clear: right">
            Lorem ipsum dolor sit amet ...
        </footer>
    </body>
</html>

clear

<!DOCTYPE html>
<html>
    <head>
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/float.css" />
    </head>
    <body>
        <article>
            <p style="background: #fff">
                <img src="../img/html5.png" style="float: left" />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia iaculis semper.
                ...
                sagittis nec orci. Mauris massa diam, congue eu tincidunt eget, dignissim at justo.
                <img src="../img/html5.png" style="float: right" />
                Suspendisse tempor orci eget elementum dapibus. Phasellus at ornare augue.
            </p>
        </article>
        <footer style="clear: right">
            Lorem ipsum dolor sit amet ...
        </footer>
    </body>
</html>

Interakcja między floatami

<!DOCTYPE html>
<html>
    <head>
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/float.css" />
    </head>
    <body>
        <article>
            <p style="background: #fff">
                <img src="../img/html5.png" style="float: left" />
                <img src="../img/html5.png" style="float: left" />
                <img src="../img/html5.png" style="float: left" />
                <img src="../img/html5.png" style="float: left" />
                <img src="../img/html5.png" style="float: left" />
            </p>
        </article>
        <footer style="clear: left">
            Lorem ipsum dolor sit amet ...
        </footer>
    </body>
</html>

Najczęściej spotykane użycie

<!DOCTYPE html>
<html>
    <head>
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/base.css" />
    </head>
    <body>
        <header>
            header
        </header>
        <article style="float: left; width: 50%">
            article
        </article>
        <aside style="float: left; width: 50%">aside</aside>
        <aside style="float: left; width: 70%">aside</aside>
        <footer style="clear:left">
            footer
        </footer>
    </body>
</html>

Pozycjonowanie absolutne

Position & top, right, bottom, left & z-index

static
relative
absolute
fixed
inherit

position: fixed

without top, right, bottom, left

<!DOCTYPE html>
<html>
    <head>
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/float.css" />
    </head>
    <body>
        <article>
            <p>
                <img src="../img/html5.png" style="position:fixed" />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia iaculis semper.
               ...
                sagittis nec orci. Mauris massa diam, congue eu tincidunt eget, dignissim at justo.
                <img src="../img/html5.png" style="position: fixed" />
                Suspendisse tempor orci eget elementum dapibus. Phasellus at ornare augue.
            </p>
        </article>
        <footer>
            Lorem ipsum dolor sit amet, ...
        </footer>
    </body>
</html>

position: fixed

<!DOCTYPE html>
<html>
    <head>
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/float.css" />
    </head>
    <body>
        <article>
            <p>
                <img src="../img/html5.png" style="position:fixed; left: 20px; top: 20px" />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia iaculis semper.
               ...
                sagittis nec orci. Mauris massa diam, congue eu tincidunt eget, dignissim at justo.
                <img src="../img/html5.png" style="position: fixed; right: 20px; bottom: 20px" />
                Suspendisse tempor orci eget elementum dapibus. Phasellus at ornare augue.
            </p>
        </article>
        <footer>
            Lorem ipsum dolor sit amet, ...
        </footer>
    </body>
</html>

Własności position: fixed

wyciąga element z przepływu dokumentu,
zmienia display na block,
zmienia float na none,
element pozycjonuje się względem okna przeglądarki.

position: relative

<!DOCTYPE html>
<html>
    <head>
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/float.css" />
    </head>
    <body>
        <article>
            <p>
                <img src="../img/html5.png" style="float: left; position:relative;" />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia iaculis semper.
                ...
                sagittis nec orci. Mauris massa diam, congue eu tincidunt eget, dignissim at justo.
                <img src="../img/html5.png" style="float: right; position: relative;" />
                Suspendisse tempor orci eget elementum dapibus. Phasellus at ornare augue.
            </p>
        </article>
        <footer style="clear: both">
            Lorem ipsum dolor sit amet ...
        </footer>
    </body>
</html>

position: relative

with left, right, top, bottom

<!DOCTYPE html>
<html>
    <head>
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/float.css" />
    </head>
    <body>
        <article>
            <p>
                <img src="../img/html5.png" style="float: left; position:relative; left: -20px; top: -20px" />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia iaculis semper.
                ...
                sagittis nec orci. Mauris massa diam, congue eu tincidunt eget, dignissim at justo.
                <img src="../img/html5.png" style="float: right; position: relative; right: -20px; bottom: -20px" />
                Suspendisse tempor orci eget elementum dapibus. Phasellus at ornare augue.
            </p>
        </article>
        <footer style="clear: both">
            Lorem ipsum dolor sit amet ...
        </footer>
    </body>
</html>

Własności position: relative

nie wyciąga elementu z przepływu dokumentu,
nie zmienia display,
nie zmienia float,
element pozycjonuje się względem samego siebie,
elementy absolute pozycjonują się względem niego.

position: absolute

<!DOCTYPE html>
<html>
    <head>
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/float.css" />
    </head>
    <body>
        <article style="position: relative">
            <p>
                <img src="../img/html5.png" style="float: left; position:absolute; left: 20px; top: 20px" />
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia iaculis semper.
                sagittis nec orci. Mauris massa diam, congue eu tincidunt eget, dignissim at justo.
                <img src="../img/html5.png" style="float: right; position: absolute; right: 20px; bottom: 20px" />
                Suspendisse tempor orci eget elementum dapibus. Phasellus at ornare augue.
            </p>
        </article>
        <footer style="clear: both">
            Lorem ipsum dolor sit amet ...
        </footer>
    </body>
</html>

position: absolute

Najczęste użycie

<!DOCTYPE html>
<html>
    <head>
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/absolute.css" />
    </head>
    <body>
        <nav>
            <ul>
                <li>Item</li>
                <li>
                    Item2
                    <ul>
                        <li>SubItem</li>
                        <li>SubItem2</li>
                    </ul>
                </li>
            </ul>
        </nav>
        <article>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia iaculis semper.
                Proin vehicula venenatis lacus, eu vulputate enim consequat vitae.
                Donec venenatis malesuada ipsum id lacinia. Sed vel egestas risus. Nunc vel mattis diam.
            </p>
        </article>
    </body>
</html>

Własności position: absolute

wyciąga element z przepływu dokumentu,
zmienia display na block,
zmienia float na none,
element pozycjonuje się względem najbliższego rodzica ze stylem position: relative.

z-index

<!DOCTYPE html>
<html>
    <head>
        <title>Base HTML5 structure</title>
        <link rel="stylesheet" href="css/float.css" />
    </head>
    <body>
        <article>
            <p style="position: relative">
                <img src="../img/html5.png"
                     style="position: absolute; left: 0; top: 0; z-index: 1">
                <img src="../img/html5.png"
                     style="position: absolute; left: 128px; top: 0">
                <img src="../img/html5.png"
                     style="position: absolute; left: 0; top: 128px">
                <img src="../img/html5.png"
                     style="position: absolute; left: 128px; top: 128px; z-index: 1">
                <img src="../img/html5.png"
                     style="position: absolute; left: 64px; top: 64px">
            </p>
        </article>
    </body>
</html>