• Program Baru W3function

    Online Courses

    Premium tutorial pembelajaran tahap pembuatan website secara menyeluruh mulai dari desain grafis, desain web, pengembangan, publikasi website di internet sampai dengan tekhnik SEO

    Materi: Photoshop, HTML5, CSS3, jQuery, PHP, MySQL, Semantic template, Responsif desain

    Mendaftar
  • Paket Toko Online

    W3function Store ®

    Solusi paket website toko online murah dan berkualitas dengan fitur yang lengkap beserta tema design yang banyak dan menarik

    Selengkapnya
  • Desain dan Pengembangan Web

    Custom Project

    Kami mengerti jenis bisnis Anda berbeda dengan yang lain sehingga Anda membutuhkan website yang benar-benar mencitrakan bisnis anda. Apapun jenis website yang ingin Anda buat kami akan membuatnya bekerja untuk Anda

    Selengkapnya

Tahapan Membuat Template Design Website Semantic dengan Menggunakan HTML 5

03‘13
April

info75.jpg

Bagi anda yang baru saja ingin membuat template website, Ini adalah waktu yang sangat tepat untuk mulai mengadopsi tag elemen HTML5 semantik ke dalam desain website Anda.

W3C telah melakukan penelitian pada miliaran website dan menyimpulkan bahwa sebagian besar ID dan CLASS pada DIV yang umumnya digunakan untuk template desain website terdiri dari header, nav (navigation), menu, content, title dan footer yang pada akhirnya HTML5 semantik dibangun dengan menggunakan elemen tersebut <header>, <nav>, <footer> dan sebagainya

Mark-up di elemen-elemen HTML5 Semantic ini di bangun dengan tujuan untuk menyampaikan tujuan dari elemen itu sendiri kepada para pengembang (developer), browser, alogaritma mesin pencarian dan lainnya. Dengan elemen-elemen baru tersebut kita tentunya bisa membuat website yang lebih cerdas dalam menyampaikan informasi kepada para penggunanya.

DOCTYPE

Dalam memulai struktur html anda, biasakan mencantumkan DOCTYPE pada awal mark-up, DOCTYPE merupakan deklarasi elemen yang sangat penting yang membantu browser untuk mengetahui tipe HTML apa yang akan di uraikan (parse)

<!DOCTYPE html>

Merubah cara penulisan <meta> dan <link> CSS

<meta http-equiv="Content-Type" content="text/html";>
Menjadi :
<meta charset="UTF-8">

<link rel="stylesheet" href="style.css" type="text/css">
Menjadi :
<link rel="stylesheet" href="style.css">

Anda harus menghindari penggunaan tag berikut untuk HTML5

<font>
<center>
<frame>

Selain itu anda juga harus menghindari penambahan properti elemen HTML seperti berikut align, bgcolor, height, width, size, type

Menentukan Struktur HTML

Disini kita akan membagi layout desain kedalam 4 bagian horisontal yang terdiri dari Header, Nav, Section dan Footer

Struktur HTML dibuat seperti berikut

<header class="container"> Header</header>
<nav class="container">Nav</nav>
<section class="container">Main Page</section>
<footer class="container">Footer</footer>

Kode CSS yang akan kita gunakan untuk layout diatas adalah sebagai berikut

*{margin:0px; padding:0px}
header, footer, section, nav{
	display:blocks
}
.container{
    margin:0 auto; 
    margin-top:15px
    width:980px;
}

Membuat Navigasi Menu

Untuk membuat navigasi dalam HTML5 Semantic kita bisa menggunakan daftar berurut (ordered list) atau tag <ul> yang kita tempatkan didalam <nav>

<nav class="container" id="nav">
<ul>
<li>HOME</li>
<li>PORTFOLIO</li>
<li>BLOG</li>
<li>SETERUSNYA</li>
</ul>
</nav>

Kode CSS yang akan kita gunakan untuk layout diatas adalah sebagai berikut

#nav{
	overflow:auto;
}
#nav ul{
    list-style:none;
    height:30px;
    padding:0px;
    margin:0px;
}
#nav ul li{
    float:left;
    margin:10px;
}

Menentukan Struktur Content Website

Section (bagian) adalah elemen yang kita gunakan untuk membuat main page (halaman utama) dimana section dibagi lagi menjadi dua bagian untuk postingan artikel dan sidebar

<section class="container" id="main">
	<section id="content">Postinga Article</section>
	<aside id="sidebar">Sidebar</aside>
</section>

Kode CSS yang akan kita gunakan untuk layout diatas adalah sebagai berikut

#main{
	overflow:auto;
}
#content{
	float:left;
	width:640px;
}
#sidebar{
	float:right;
	width:320px;
}

Membuat Isi dari Content Website

Disini kita isi content website dengan article, judul dari article adalah bagian yang terpenting dan harus menggunakan tag <h1>.

<article>
	<header>
		<h1>Article Title</h1>
	</header>
	<p>
		Article Description 
	</p>
</article>

Biasakan menggunakan <h1> untuk penjudulan di level pertama karena sudah merupakan standar wajib dari W3C konsorsium

Untuk penambahan artikel berjajar kebawah buatlah struktur yang sama seperrti tag berikut

<section id="content">

    <article>
        <header>
            <h1>Article Title</h1>
        </header>
        <p>
            Article Description 
        </p>
    </article>
    
    <article>
        <header>
            <h1>Article Title</h1>
        </header>
        <p>
            Article Description 
        </p>
    </article>
    
   <!--dan seterusnya-->
    
</section>

Menggunakan Modernizr

Modernizr adalah library JavaScript yang digunakan untuk versi browser internet explorer 8 (delapan) dan dibawahnya juga kemampuan browser yang lain supaya bisa mensupport HTML5

Hasil Akhir

Anda dapat mendownload contoh template HTML5 yang saya share untuk pembelajaran anda, semoga bermanfaat

Struktur HTML akhir adalah sebagai berikut, mohon diperhatikan HTML5 tidak akan bekerja dengan cara penerapan CSS secara inline

<!DOCTYPE html>
<!--[if lt IE 7]>
    <html class="no-js lt-ie9 lt-ie8 lt-ie7">
<![endif]-->
<!--[if IE 7]>
    <html class="no-js lt-ie9 lt-ie8">
<![endif]-->
<!--[if IE 8]>
    <html class="no-js lt-ie9">
<![endif]-->
<!--[if gt IE 8]><!-->
    <html class="no-js">
<!--<![endif]-->
<head>
	<title>Responsive Design with CSS</title>
	//Meta tag untuk devices
	<meta name="viewport" content="width=device-width"> 
	<link rel="stylesheet" href="style.css"> //Style Sheet
	<script src="modernizr.min.js"></script>
</head>
<body>
    <header class="container" id="header">
        Logo Anda
    </header>
    <nav class="container" id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">portfolis</a></li>
            <li><a href="#">Seterusnya</a></li>
        </ul>
    </nav>
    <section class="container" id="main">
        <section id="content">
            <article>
            <header>
                <h1>Article Title</h1>
            </header>
            <p>
                Article Description
            </p> 
            </article>
        </section>
    <aside id="sidebar"> 
    
    </aside>
    </section>
    <footer class="container" id="footer">
    	<p> 
			CopyRight  © w3function.com. 
    	</p>
    </footer>
<body>
</html>

CSS yang digunakan untuk HTML5 diatas secara external

*{margin:0px; padding:0px}
header, footer,section,nav{display:blocks}
.container{margin:0 auto; width:950px;font-family:arial;margin-top:20px}
#main, #header, #nav{
	overflow:auto;
}
#content{
    float:left;
    width:640px;
}
#sidebar{
    float:right;
    width:320px;
}
#nav{
	overflow:auto;
}
#nav ul{
    list-style:none;
    height:30px;
    padding:0px;
    margin:0px;
}
#nav ul li{
    float:left;
    font-size:12px;
    font-weight:bold;
}

Impementasi template HTML5 semantic akan membantu website anda untuk lebih mudah di parse robot-robot mesin pencari, dengan implementasi HTML5 semantic anda dapat dengan mudah naik kehalaman teratas mesin pencarian (SEO)

Anda juga mungkin suka dengan artikel ini :

  1. Belajar Cara Membuat Website Tanpa Table (tableless) dengan Photoshop dan Dreamweaver Bagian 3
  2. Daftar Referensi tag HTML dan HTML5 Beserta Kegunaannya
  3. Tips dalam Menuliskan CSS yang Baik
  4. Penerapan Berbagai Style pada Tampilan Gambar dengan menggunakan CSS 3
  5. Tutorial Membuat Desain Website Responsif Bagian 1 - Navigasi Menu

Komentar

  • Latoif (04 Nov 2016 01:44:46)

    @clara......kalua ngga bisa di copas di screenshot aja,stlh itu taruh di Ms Word.

  • sofy (13 Sep 2016 10:08:40)

    gan, ijin copas.
    Thanks, sangat bermanfaat.

  • Anwar (09 Sep 2016 11:10:02)

    mas, kalo cara membuat template berdasarkan file html gimana caranya?
    misalnya saya sudah menemukan template website yang isinya berupa index.html satu file css dan satu folder image.
    apa yang harus saya lakukan agar bisa digunakan pada template blogger dan berekstensi xml ?

  • iLham (04 Aug 2016 04:32:47)

    Awesome, tpi kok ga bisa di copy wkwk. mau copy ke ms.word

  • sakacamprung (07 Jun 2016 07:33:05)

    nice post my brothers

» Muat Komentar Sebelumnya (41 komentar) loading

Kode?

Telusuri dan Beritahu saya apabila ada komentar baru.

loading

Usulan Kontribusi dan Saran

Kami sangat terbuka dengan berbagai saran dan kontribusi positif dari Anda. Kami ingin membuat halaman blog di w3function.com ini terbuka untuk banyak penulis, sehingga kita bisa bersama-sama mendiskusikan banyak topik yang lebih luas dan lebih menarik lagi. Apabila Anda memiliki artikel yang ingin Anda kontribusikan untuk w3function.com mohon email kami.

Pemberitahuan Disclaimer © Copyright

Semua isi termasuk di dalamnya semua artikel dan gambar adalah hak cipta w3function.com, kecuali ada statement khusus yang di cantumkan (kontributor). Mohon tidak menyalin isi atau mempublikasikan kembali tanpa seizin w3function.com dan atau kontributor artikel lain

Semua sumber download dari w3function.com adalah untuk tujuan edukasi semata, bukan untuk tujuan komersial atau lainnya kecuali ada statement khusus yang di cantumkan.

Social Stuff