Tutorial Blog, Tips Blogging, SEO, Belajar Syntax HTML, PHP, CSS, dan Aktifitas Coding Lainnya

Membuat Layout dengan HTML5

Apa itu HTML5 ?


Membuat Layout dengan HTML5 - HTML5 adalah versi terbaru dari Hypertext Markup Language, kode yang mendeskripsikan halaman web. Yang sebenarnya ada tiga jenis kode, yaitu : HTML, yang menyediakan struktur; Cascading Style Sheets (CSS), yang mengurus presentasi atau hasil tampilan; dan JavaScript, yang menampilkan efek-efek tertentu.

Beberapa browser juga sedang berusaha untuk menyesuaikan agar kompatibel dengan tampilan html5 ini. Termasuk teknologi-teknologi multimedia terbaru juga saling berlomba untuk support html5.

Cara Membuat Layout dengan HTML5


Kalau sebelumnya sinahu coding sudah membahas tentang membuat layout dengan div, sekarang giliran HTML5 yang unjuk gigi. Prinsipnya tidak jauh berbeda, hanya beberapa format penulisan saja yang sedikit berbeda. Langsung saja perhatikan contoh berikut.


<!DOCTYPE html>
<html>
<head>
<style>
header {
    background-color:blue;
    color:white;
    text-align:center;
    padding:5px;  
}
nav {
    line-height:30px;
    background-color:yellow;
    height:300px;
    width:100px;
    float:left;
    padding:5px;       
}
section {
    width:350px;
    float:left;
    padding:10px;    
}
footer {
    background-color:blue;
    color:white;
    clear:both;
    text-align:center;
    padding:5px;    
}
</style>
</head>
<body>

<header>
<h1>Kota-kota Besar</h1>
</header>

<nav>
DIY<br>
Surabaya<br>
Semarang<br>
</nav>

<section>
<h1>DIY</h1>
<p>
DIY adalah sebutan untuk Daerah Istimewa Yogyakarta. Yaitu daerah Istimewa setingkat provinsi di Indonesia yang terletak di bagian selatan Pulau Jawa bagian tengah.
</p>
<p>
Daerah Istimewa ini terkenal di tingkat nasional,dan internasional, terutama sebagai tempat tujuan wisata andalan. Daerah Istimewa Yogyakarta mengalami beberapa bencana alam besar termasuk bencana gempa pada tanggal 27 Mei 2006, dan erupsi Gunung Merapi pada medio Oktober-November 2010.
</p>
</section>

<footer>
Copyright © sinahu-coding.com
</footer>

</body>
</html>

Hasilnya akan seperti ini, sama dengan membuat layout menggunakan div. Hanya berbeda format penulisan.

Kota-kota Besar

DIY
Surabaya
Semarang

DIY

DIY adalah sebutan untuk Daerah Istimewa Yogyakarta. Yaitu daerah Istimewa setingkat provinsi di Indonesia yang terletak di bagian selatan Pulau Jawa bagian tengah.
Daerah Istimewa ini terkenal di tingkat nasional,dan internasional, terutama sebagai tempat tujuan wisata andalan. Daerah Istimewa Yogyakarta mengalami beberapa bencana alam besar termasuk bencana gempa pada tanggal 27 Mei 2006, dan erupsi Gunung Merapi pada medio Oktober-November 2010.
Copyright © sinahu-coding.com

Mudah bukan? sekian untuk sinahu coding kali ini tentang membuat layout dengan HTML5. Semoga bermanfaat.



1 Komentar untuk "Membuat Layout dengan HTML5"

mantap dah artikelnya kawan
http://umpanikanmasgalatama.xyz

Back To Top