HTML5 - Leyout

Izrada izgleda (Leyout) web stranica

Izrada izgleda web stranice je aktivnost pozicioniranja različitih elemenata koji čine web stranicu na dobro strukturisan način i daju privlačan izgled web stranici. Vidjeli ste da većina web lokacija na Internetu obično prikazuje svoj sadržaj u više redova i kolona, oblikovanih poput časopisa ili novina kako bi korisnicima pružilo bolje okruženje za čitanje i pisanje. To se lako može postići korištenjem HTML tagova, kao što su: <table>, <div>, <header>, <footer>, <section> itd. ili dodavanjem nekih CSS stilova u njih.


Izgled zasnovan na HTML tabeli

Tabela pruža najjednostavniji način za izradu izgleda u HTML-u. Uopšteno, ovo uključuje postupak stavljanja sadržaja kao što su tekst, slike itd. u redove i kolone. Sljedeći izgled kreira se pomoću HTML tabele s 3 reda i 2 kolone - prvi i posljednji red obuhvata dve kolone koristeći atribut colspan. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Table Layout</title>
</head>
<body style="margin:0px;">
    <table style="width:100%; border-collapse:collapse; font:14px Arial,sans-serif;">
        <tr>
            <td colspan="2" style="padding:10px 20px; background-color:#acb3b9;">
                <h1 style="font-size:24px;">IT TUTORIJALI</h1>
            </td>
        </tr>
        <tr style="height:170px;">
            <td style="width:20%; padding:20px; background-color:#d4d7dc; vertical-align: top;">
                <ul style="list-style:none; padding:0px; line-height:24px;">
                    <li><a href="#" style="color:#333;">Početna</a></li>
                    <li><a href="#" style="color:#333;">O nama</a></li>
                    <li><a href="#" style="color:#333;">Kontakt</a></li>
                </ul>
            </td>
            <td style="padding:20px; background-color:#f2f2f2; vertical-align:top;">
                <h2>Dobrodšli na sajt</h2>
                <p>Ovde ćete naučiti kako da kreirate vaš website...</p>
            </td>
        </tr>
        <tr>
            <td colspan="2" style="padding:5px; background-color:#acb3b9; text-align:center;">
                <p>copyright &copy; ittutorijali.net</p>
            </td>
        </tr>
    </table>
</body>
</html>

HTML raspored zasnovan na div elmentu

Korištenje elemenata <div> najčešći je način izrade izgleda u HTML-u. Element <div> se koristi za označavanje bloka sadržaja ili skupa drugih elemenata unutar HTML dokumenta. Po potrebi može da sadrži i druge div elemente. Sljedeći primjer koristi elemente div za kreiranje višestrukog izgleda kolona. Dobićemo isti rezultat kao u prethodnom primjeru koji koristi element tabele: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML Div Layout</title>
<style>
    body {
        font: 14px Arial,sans-serif; 
        margin: 0px;
    }
    .header {
        padding: 10px 20px;
        background: #acb3b9; 
    }
    .header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
        background: #f2f2f2; 
    }
    .nav, .section {
        float: left; 
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    .nav {            
        width: 20%;             
        background: #d4d7dc;
    }
    .section {
        width: 80%;
    }
    .nav ul {
        list-style: none; 
        line-height: 24px;
        padding: 0px; 
    }
    .nav ul li a {
        color: #333;
    }    
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    .footer {
        background: #acb3b9;            
        text-align: center;
        padding: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>IT TUTORIJALI</h1>
        </div>
        <div class="wrapper clearfix">
            <div class="nav">
                <ul>
                    <li><a href="#">Početna</a></li>
                    <li><a href="#">O nama</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </div>
            <div class="section">
                <h2>Dobrodšli na sajt</h2>
                <p>Ovde ćete naučiti kako da kreirate vaš website...</p>
            </div>
        </div>
        <div class="footer">
            <p>copyright &copy; ittutorijali.net</p>
        </div>
    </div>
</body>
</html>

Kreirali smo ovaj izgled koristeći CSS float tehnike, budući da ga većina web pretraživača podržava. Kao alternativu, CSS3 flexbox možete koristiti i za stvaranje modernih i fleksibilnijih rasporeda.


Korištenje HTML5 strukturnih elemenata

HTML5 je predstavio nove strukturne elemente kao što su: <header>, <footer>, <nav>, <section>, itd. kako bi definisao različite dijelove web stranice na semantičniji način. Ove elemente možete smatrati zamjenom za najčešće korištene klase (class) kao što su: .header, .footer, .nav, .section itd. Sljedeći primjer koristi nove HTML5 strukturne elemente za stvaranje istog izgleda koji smo kreirali u prethodnim primjerima. 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Web Page Layout</title>
<style>
    body {
        font: 14px Arial,sans-serif; 
        margin: 0px;
    }
    header {
        padding: 10px 20px;
        background: #acb3b9; 
    }
    header h1 {
        font-size: 24px;
    }
    .container {
        width: 100%;
        background: #f2f2f2;  
    }
    nav, section {
        float: left; 
        padding: 20px;
        min-height: 170px;
        box-sizing: border-box;
    }
    section {
        width: 80%;
    }
    nav {
        width: 20%;             
        background: #d4d7dc;
    }    
    nav ul {
        list-style: none; 
        line-height: 24px;
        padding: 0px; 
    }
    nav ul li a {
        color: #333;
    }
    .clearfix:after {
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    footer {
        background: #acb3b9;            
        text-align: center;
        padding: 5px;
    }
</style>
</head>
<body>
    <div class="container">
        <header>
            <h1>IT TUTORIJALI</h1>
        </header>
        <div class="wrapper clearfix">
            <nav>
                <ul>
                    <li><a href="#">Početna</a></li>
                    <li><a href="#">O nama</a></li>
                    <li><a href="#">Kontakt</a></li>
                </ul>
            </nav>
            <section>
                <h2>Dobrodšli na sajt</h2>
                <p>Ovde ćete naučiti kako da kreirate vaš website...</p>
            </section>
        </div>
        <footer>
            <p>copyright &copy; ittutorijali.net</p>
        </footer>
    </div>
</body>
</html>

Sljedeća tabela daje kratak pregled novih HTML5 strukturnih elemenata.

Tag Opis
<header> Predstavlja zaglavlje dokumenta ili dijela.
<footer> Predstavlja podnožje dokumenta ili dijela.
<nav> Predstavlja dio navigacijskih veza.
<section> Predstavlja dio dokumenta, poput zaglavlja, podnožja itd.
<article> Predstavlja članak, post na blogu ili drugu samostalnu jedinicu informacija.
<aside> Predstavlja neki sadržaj koji je slabo povezan sa sadržajem stranice.