03 - Struktur HTML

Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP

Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi

Struktur Utama Struktur Utama HTMLHTML

Pertemuan ke-3Pertemuan ke-3



AgendaAgenda

Anatomi HTML5Anatomi HTML5 DOCTYPEDOCTYPE <head><head> Elemen struktur HTML5Elemen struktur HTML5 Mempercantik HTML5 dengan CSSMempercantik HTML5 dengan CSS



Anatomi HTML5Anatomi HTML5

<!DOCTYPE html> <! tipe doc html5 ><!DOCTYPE html> <! tipe doc html5 ><html><html>

<head><! menampilkan informasi halaman web ><head><! menampilkan informasi halaman web ><title>Judul Halaman Web</title><title>Judul Halaman Web</title>

</head></head>

<body><! isi web yang ditampilkan perambah web ><body><! isi web yang ditampilkan perambah web >Isi halaman berada di sini!Isi halaman berada di sini!

</body></body></html></html>



<title>Judul Halaman Web</title>



Elemen HTMLElemen HTML

<nama elemen>Isi dari elemen</elemen><nama elemen>Isi dari elemen</elemen>

<h1>Judul Artikel</h1><h1>Judul Artikel</h1>

contoh:contoh:



<META CHARSET=UTF8><META CHARSET=UTF8 /><META CHARSET=”UTF8”><META CHARSET=”UTF8” /><meta charset=UTF8><meta charset=UTF8 /><meta charset=”UTF8”><meta charset=”UTF8” /><MEta CHARset=UTF8>

Penulisan elemen bebas, boleh huruf besar atau kecil atau campuran keduanya

Html5 tidak sama dengan xhtmlMaka tutup tag pada elemen tunggal tidak diperlukan, namun kalau tetap ditulis tidak apa-apa

Semua penulisan di bawah ini valid

CatatanCatatan



DOCTYPE HTMLDOCTYPE HTML

DOCTYPE Document Type Declaration →DOCTYPE Document Type Declaration →atau deklarasi tipe dokumenatau deklarasi tipe dokumen

HTML5 ringkas dan singkat→HTML5 ringkas dan singkat→ Fungsi DOCTYPE:Fungsi DOCTYPE:

Menginformasikan kepada Menginformasikan kepada user agentuser agent dan dan validatorvalidator tipe data dokumen yang ditulis tipe data dokumen yang ditulis

Menginformasikan perambah web agar Menginformasikan perambah web agar menampilkan dokumen pada mode menampilkan dokumen pada mode standarstandar



DOCTYPE HTML 4.01DOCTYPE HTML 4.01

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN"<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN"<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">"http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Frameset//EN"<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd">"http://www.w3.org/TR/html4/frameset.dtd">



DOCTYPE XHTML 1.0DOCTYPE XHTML 1.0

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd">

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd">

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Frameset//EN" <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">"http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">



DOCTYPE XHTML 1.1DOCTYPE XHTML 1.1

<!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.1//EN" <!DOCTYPE html PUBLIC "//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



DOCTYPE HTML5DOCTYPE HTML5

<!DOCTYPE html><!DOCTYPE html>



Daftar Kode BahasaDaftar Kode Bahasa

Kode Bahasa berdasarkan ISO 639-1Kode Bahasa berdasarkan ISO 639-1 http://www.w3schools.com/tags/ref_langhttp://www.w3schools.com/tags/ref_lang

uage_codes.aspuage_codes.asp



Kegunaan Kode BahasaKegunaan Kode Bahasa

Pengubah teks ke suaraPengubah teks ke suara Memilih font yang tepat untuk ditampilkanMemilih font yang tepat untuk ditampilkan Memilih kamus yang tepat untuk Memilih kamus yang tepat untuk

perambah web yang memiliki fasilitas perambah web yang memiliki fasilitas pengecekan ejaan (misal memilih Inggris pengecekan ejaan (misal memilih Inggris UK daripada Inggris US)UK daripada Inggris US)

Menampilkan halaman web dengan benarMenampilkan halaman web dengan benar



<head><head>

Berisi elemenBerisi elemen <title> mendefinisikan judul dokumen→<title> mendefinisikan judul dokumen→ <style> mendefinisikan informasi style→<style> mendefinisikan informasi style→ <script> mendefinisikan →<script> mendefinisikan → scriptscript dari sisi dari sisi

clientclient <meta> menyediakan informasi meta, →<meta> menyediakan informasi meta, →

deskripsi dan kata kuncideskripsi dan kata kunci <link> mendefinisikan hubungan antara →<link> mendefinisikan hubungan antara →

dokumen dengan sumber eksternaldokumen dengan sumber eksternal



Contoh <head>Contoh <head>

<head><head><title>Belajar HTML5</title><title>Belajar HTML5</title><meta name="description" content="Free Web tutorials"><meta name="description" content="Free Web tutorials"><meta name="keywords" content="HTML,CSS,XML,JavaScript"><meta name="keywords" content="HTML,CSS,XML,JavaScript"><meta name="author" content="Adi Wahyu"><meta name="author" content="Adi Wahyu"><meta charset="UTF8"><meta charset="UTF8"></head></head>



Elemen Struktur BaruElemen Struktur Baru

<section><section> <header><header> <footer><footer> <aside><aside> <nav><nav> <article><article>



<section><section>

Digunakan untuk mengelompokkan Digunakan untuk mengelompokkan contentcontent yang secara tema sama yang secara tema sama

<section><section><h1>HTML5 Bagi Pemula</h1><h1>HTML5 Bagi Pemula</h1><p><p>

Buku ini berisi dasardasar HTML5Buku ini berisi dasardasar HTML5</p></p><p><p>

Andi F. Noya sukses menyajikan dasar HTML5 Andi F. Noya sukses menyajikan dasar HTML5 secara detil dan mudah dicernasecara detil dan mudah dicerna

</p></p></section></section>



<header><header>

Berfungsi sebagai elemen penampung Berfungsi sebagai elemen penampung kumpulan pengenal atau bantuan kumpulan pengenal atau bantuan navigasinavigasi

<section><section><header><header>

<h1>HTML5 Bagi Pemula</h1><h1>HTML5 Bagi Pemula</h1></header></header><p><p>



</p></p></section></section>



<footer><footer>

Sama seperti header, hanya posisinya yang Sama seperti header, hanya posisinya yang berlawananberlawanan

Biasanya berisi: siapa yang menulis, Biasanya berisi: siapa yang menulis, informasi hak cipta, link ke halaman informasi hak cipta, link ke halaman yang berelasiyang berelasi



<footer><footer><section><section>

<header><header><h1>HTML5 Bagi Pemula</h1><h1>HTML5 Bagi Pemula</h1>

</</headerheader>><p><p>



</p></p><footer><footer>

<p><p>Oleh Masdar DesriawanOleh Masdar Desriawan

</p></p></footer></footer>

</section></section>



<aside><aside>

Mendeskripsikan suatu content yang Mendeskripsikan suatu content yang masih terkait tetapi bukan bagian utama masih terkait tetapi bukan bagian utama dari halaman webdari halaman web



<aside><aside><section><section><header><header>

<h1>HTML5 Bagi Pemula</h1><h1>HTML5 Bagi Pemula</h1></</headerheader>><aside><aside>

<p>Buku Terlaris!</p><p>Buku Terlaris!</p></aside></aside><p><p>



</p></p><footer><footer>

<p><p>Oleh Masdar DesriawanOleh Masdar Desriawan

</p></p></footer></footer>

</section></section>



<nav><nav>

Elemen yang berisi informasi navigasi, Elemen yang berisi informasi navigasi, biasanya berisi daftar linkbiasanya berisi daftar link

<nav><nav>Menu Favorit, Restoran Sedap Gembira:Menu Favorit, Restoran Sedap Gembira:<ul><ul>

<li><a href="pecel.html">Pecel</a></li><li><a href="pecel.html">Pecel</a></li><li><a href="soto.html">Soto</a></li><li><a href="soto.html">Soto</a></li>

</ul></ul></nav></nav>



<article><article>

Sama dengan <section> hanya saja Sama dengan <section> hanya saja dikhususkan pada bagian yang akan dikhususkan pada bagian yang akan muncul berkali-kali di dalam muncul berkali-kali di dalam contentcontent utamautama



<article><article><article><article><h1>HTML5 Bagi Pemula</h1><h1>HTML5 Bagi Pemula</h1><p><p>



</p></p></article></article><article><article>

<h1>CSS Bagi Pemula</h1><h1>CSS Bagi Pemula</h1><p><p>

Buku ini berisi dasardasar CSS3Buku ini berisi dasardasar CSS3</p></p><p><p>

Andi F. Noya sukses menyajikan dasar CSS3 Andi F. Noya sukses menyajikan dasar CSS3 secara detil dan mudah dicernasecara detil dan mudah dicerna

</p></p></article></article>



Membuat Sketsa WebMembuat Sketsa Web

Gunakan Pencils MockupGunakan Pencils Mockup Buat struktur halaman WebBuat struktur halaman Web



<!DOCTYPE html><html>

<head><title>Belajar HTML5</title>

</head><body>

<header> <h1>Selamat datang di Web ini</h1> <ul> <li><a href="struktur.html">Struktur HTML5</a></li> <li><a href="teks.html">Teks HTML5</a></teks></li> </ul></header><section id="mainContent"> <header> <h2>Isi utama halaman web</h2> </header> <article> <h3>HTML5 yuk!</h3> <p>isi paragraf isi paragraf isi paragraf isi paragraf isi paragraf</p> <p>isi paragraf isi paragraf isi paragraf isi paragraf isi paragraf</p> </article> <article> <h3>CSS3 yuk!</h3> <p>isi paragraf isi paragraf isi paragraf isi paragraf isi paragraf</p> <p>isi paragraf isi paragraf isi paragraf isi paragraf isi paragraf</p> </article></section><section id="secondNav"> <header> <h2>Navigasi Sekunder</h2> </header> <nav> <ul> <li><a href="about.html">About Us</a></li> <li><a href="contact.html">Contact Us</a></li> </ul> </nav></section><footer> <p>©2011 Adi Wahyu</p></footer>

</body></html>



Polos?Polos?



CSSCSS



style.cssstyle.cssheader#utama {header#utama { display: block;display: block; padding: 5px;padding: 5px; border: 2px #000 solid;border: 2px #000 solid;}}

#mainContent {#mainContent { width: 75%;width: 75%; float: leftfloat: left}}

#secondNav {#secondNav { margintop: 10px;margintop: 10px; padding: 10px;padding: 10px; border: 1px #000 solid;border: 1px #000 solid; width: 20%;width: 20%; float: left;float: left;}}

footer {footer { clear: both;clear: both; display: block;display: block; margintop: 20px;margintop: 20px; bordertop: 2px #000 solid;bordertop: 2px #000 solid;}}



??



TugasTugas

Buat sketsa halaman Web dengan Pencils Buat sketsa halaman Web dengan Pencils sesuai dengan imajinasi Andasesuai dengan imajinasi Anda

Buat kode html-nyaBuat kode html-nya

03 - Struktur HTML

Education

Transcript of 03 - Struktur HTML