03 - struktur html
DESCRIPTION
Agenda: - Anatomi HTML - DOCTYPE - - Elemen Struktur HTML5 - MemperindahTRANSCRIPT
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
AgendaAgenda
Anatomi HTML5Anatomi HTML5 DOCTYPEDOCTYPE <head><head> Elemen struktur HTML5Elemen struktur HTML5 Mempercantik HTML5 dengan CSSMempercantik HTML5 dengan CSS
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<title>Judul Halaman Web</title>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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:
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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">
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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">
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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">
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
DOCTYPE HTML5DOCTYPE HTML5
<!DOCTYPE html><!DOCTYPE html>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<html><html>
<html lang="id"> <! identifikasi bahasa yang digunakan ><html lang="id"> <! identifikasi bahasa yang digunakan ></html></html>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Elemen Struktur BaruElemen Struktur Baru
<section><section> <header><header> <footer><footer> <aside><aside> <nav><nav> <article><article>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<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>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<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>
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>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<footer><footer><section><section>
<header><header><h1>HTML5 Bagi Pemula</h1><h1>HTML5 Bagi Pemula</h1>
</</headerheader>><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><footer><footer>
<p><p>Oleh Masdar DesriawanOleh Masdar Desriawan
</p></p></footer></footer>
</section></section>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<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>
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><footer><footer>
<p><p>Oleh Masdar DesriawanOleh Masdar Desriawan
</p></p></footer></footer>
</section></section>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<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>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<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
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<article><article><article><article><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></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>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Membuat Sketsa WebMembuat Sketsa Web
Gunakan Pencils MockupGunakan Pencils Mockup Buat struktur halaman WebBuat struktur halaman Web
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<!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>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Polos?Polos?
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
CSSCSS
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<head><head>
<link rel="stylesheet" href="style.css"><link rel="stylesheet" href="style.css">
</head></head>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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;}}
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
??
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
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