Anda di halaman 1dari 38

Struktur Utama HTML

Pertemuan ke-3

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Agenda

Anatomi HTML5 DOCTYPE <head> Elemen struktur HTML5 Mempercantik HTML5 dengan CSS

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Anatomi HTML5

<!DOCTYPEhtml><!tipedochtml5> <html> <head><!menampilkaninformasihalamanweb> <title>JudulHalamanWeb</title> </head> <body><!isiwebyangditampilkanperambahweb> Isihalamanberadadisini! </body> </html>

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<title>JudulHalamanWeb</title>

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Elemen HTML
<namaelemen>Isidarielemen</elemen>

contoh:
<h1>JudulArtikel</h1>

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Penulisan elemen bebas, boleh huruf besar atau kecil atau campuran keduanya Html5 tidak sama dengan xhtml Maka tutup tag pada elemen tunggal tidak diperlukan, namun kalau tetap ditulis tidak apa-apa Semua penulisan di bawah ini valid

Catatan

<METACHARSET=UTF8> <METACHARSET=UTF8/> <METACHARSET=UTF8> <METACHARSET=UTF8/> <metacharset=UTF8> <metacharset=UTF8/> <metacharset=UTF8> <metacharset=UTF8/> <MEtaCHARset=UTF8>


Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

DOCTYPE HTML

DOCTYPE Document Type Declaration atau deklarasi tipe dokumen HTML5 ringkas dan singkat Fungsi DOCTYPE:

Menginformasikan kepada user agent dan validator tipe data dokumen yang ditulis Menginformasikan perambah web agar menampilkan dokumen pada mode standar

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

DOCTYPE HTML 4.01


<!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPEHTMLPUBLIC"//W3C//DTDHTML4.01Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

DOCTYPE XHTML 1.0


<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1strict.dtd"> <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1frameset.dtd">

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

DOCTYPE XHTML 1.1

<!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

DOCTYPE HTML5

<!DOCTYPEhtml>
Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<html>

<htmllang="id"><!identifikasibahasayangdigunakan> </html>

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Daftar Kode Bahasa

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

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Kegunaan Kode Bahasa

Pengubah teks ke suara Memilih font yang tepat untuk ditampilkan Memilih kamus yang tepat untuk perambah web yang memiliki fasilitas pengecekan ejaan (misal memilih Inggris UK daripada Inggris US) Menampilkan halaman web dengan benar

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<head>

Berisi elemen

<title> mendefinisikan judul dokumen <style> mendefinisikan informasi style <script> mendefinisikan script dari sisi client <meta> menyediakan informasi meta, deskripsi dan kata kunci <link> mendefinisikan hubungan antara dokumen dengan sumber eksternal

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Contoh <head>

<head> <title>BelajarHTML5</title> <metaname="description"content="FreeWebtutorials"> <metaname="keywords"content="HTML,CSS,XML,JavaScript"> <metaname="author"content="AdiWahyu"> <metacharset="UTF8"> </head>

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Elemen Struktur Baru

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

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<section>

Digunakan untuk mengelompokkan content yang secara tema sama


<section> <h1>HTML5BagiPemula</h1> <p> BukuiniberisidasardasarHTML5 </p> <p> AndiF.NoyasuksesmenyajikandasarHTML5 secaradetildanmudahdicerna </p> </section>

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<header>

Berfungsi sebagai elemen penampung kumpulan pengenal atau bantuan navigasi


<section> <header> <h1>HTML5BagiPemula</h1> </header> <p> BukuiniberisidasardasarHTML5 </p> <p> AndiF.NoyasuksesmenyajikandasarHTML5 secaradetildanmudahdicerna </p> </section>

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<footer>

Sama seperti header, hanya posisinya yang berlawanan Biasanya berisi: siapa yang menulis, informasi hak cipta, link ke halaman yang berelasi

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<footer>
<section> <header> <h1>HTML5BagiPemula</h1> </header> <p> BukuiniberisidasardasarHTML5 </p> <p> AndiF.NoyasuksesmenyajikandasarHTML5 secaradetildanmudahdicerna </p> <footer> <p> OlehMasdarDesriawan </p> </footer> </section>
Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<aside>

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

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<section> <header> <h1>HTML5BagiPemula</h1> </header> <aside> <p>BukuTerlaris!</p> </aside> <p> BukuiniberisidasardasarHTML5 </p> <p> AndiF.NoyasuksesmenyajikandasarHTML5 secaradetildanmudahdicerna </p> <footer> <p> OlehMasdarDesriawan </p> </footer> </section>
Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<aside>

<nav>

Elemen yang berisi informasi navigasi, biasanya berisi daftar link


<nav> MenuFavorit,RestoranSedapGembira: <ul> <li><ahref="pecel.html">Pecel</a></li> <li><ahref="soto.html">Soto</a></li> </ul> </nav>

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<article>

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

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<article> <h1>HTML5BagiPemula</h1> <p> BukuiniberisidasardasarHTML5 </p> <p> AndiF.NoyasuksesmenyajikandasarHTML5 secaradetildanmudahdicerna </p> </article> <article> <h1>CSSBagiPemula</h1> <p> BukuiniberisidasardasarCSS3 </p> <p> AndiF.NoyasuksesmenyajikandasarCSS3 secaradetildanmudahdicerna </p> </article>
Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<article>

Membuat Sketsa Web

Gunakan Pencils Mockup Buat struktur halaman Web

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Disusun oleh Adi Wahyu Pribadi

<!DOCTYPEhtml> <html> <head> <title>BelajarHTML5</title> </head> <body> <header> <h1>SelamatdatangdiWebini</h1> <ul> <li><ahref="struktur.html">StrukturHTML5</a></li> <li><ahref="teks.html">TeksHTML5</a></teks></li> </ul> </header> <sectionid="mainContent"> <header> <h2>Isiutamahalamanweb</h2> </header> <article> <h3>HTML5yuk!</h3> <p>isiparagrafisiparagrafisiparagrafisiparagrafisiparagraf</p> <p>isiparagrafisiparagrafisiparagrafisiparagrafisiparagraf</p> </article> <article> <h3>CSS3yuk!</h3> <p>isiparagrafisiparagrafisiparagrafisiparagrafisiparagraf</p> <p>isiparagrafisiparagrafisiparagrafisiparagrafisiparagraf</p> </article> </section> <sectionid="secondNav"> <header> <h2>NavigasiSekunder</h2> </header> <nav> <ul> <li><ahref="about.html">AboutUs</a></li> <li><ahref="contact.html">ContactUs</a></li> </ul> </nav> </section> <footer> <p>&copy;2011AdiWahyu</p> </footer> </body> Materi kuliah Desain Web, </html> Teknik Informatika FTUP

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Polos?

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

CSS

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

<head> <linkrel="stylesheet"href="style.css"> </head>

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

header#utama{ display:block; padding:5px; border:2px#000solid; } #mainContent{ width:75%; float:left } #secondNav{ margintop:10px; padding:10px; border:1px#000solid; width:20%; float:left; } footer{ clear:both; display:block; margintop:20px; bordertop:2px#000solid; }
Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

style.css

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi

Tugas

Buat sketsa halaman Web dengan Pencils sesuai dengan imajinasi Anda Buat kode html-nya

Materi kuliah Desain Web, Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi