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

<!DOCTYPE html> <!­­ tipe doc html5 ­­> <html> <head><!­­ menampilkan informasi halaman web ­­> <title>Judul Halaman Web</title> </head> <body><!­­ isi web yang ditampilkan perambah web ­­> Isi halaman berada di sini! </body> </html>

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

<title>Judul Halaman Web</title> Materi kuliah Desain Web. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .

Elemen HTML <nama elemen>Isi dari elemen</elemen> contoh: <h1>Judul Artikel</h1> Materi kuliah Desain Web. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .

Penulisan elemen bebas. namun kalau tetap ditulis tidak apa-apa Semua penulisan di bawah ini valid Catatan <META CHARSET=UTF­8> <META CHARSET=UTF­8 /> <META CHARSET=”UTF­8”> <META CHARSET=”UTF­8” /> <meta charset=UTF­8> <meta charset=UTF­8 /> <meta charset=”UTF­8”> <meta charset=”UTF­8” /> <MEta CHARset=UTF­8> Materi kuliah Desain Web. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi . boleh huruf besar atau kecil atau campuran keduanya Html5 tidak sama dengan xhtml Maka tutup tag pada elemen tunggal tidak diperlukan.

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 .

org/TR/html4/strict.w3.dtd"> <!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.org/TR/html4/loose.dtd"> Materi kuliah Desain Web.dtd"> <!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.w3.01 Transitional//EN" "http://www.w3. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .org/TR/html4/frameset.01 <!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.01 Frameset//EN" "http://www.DOCTYPE HTML 4.01//EN" "http://www.

DOCTYPE XHTML 1.0 <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.w3.org/TR/xhtml1/DTD/xhtml1­strict.w3.org/TR/xhtml1/DTD/xhtml1­frameset.dtd"> <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.dtd"> <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.org/TR/xhtml1/DTD/xhtml1­transitional.w3.0 Frameset//EN"  "http://www.dtd"> Materi kuliah Desain Web. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .0 Strict//EN"  "http://www.

1//EN"  "http://www. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .dtd"> Materi kuliah Desain Web.DOCTYPE XHTML 1.org/TR/xhtml11/DTD/xhtml11.w3.1 <!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.

DOCTYPE HTML5 <!DOCTYPE html> Materi kuliah Desain Web. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .

Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .<html> <html lang="id"> <!­­ identifikasi bahasa yang digunakan ­­> </html> Materi kuliah Desain Web.

w3schools. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .com/tags/ref_lang uage_codes.Daftar Kode Bahasa  Kode Bahasa berdasarkan ISO 639-1 http://www.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.

deskripsi dan kata kunci <link> → mendefinisikan hubungan antara dokumen dengan sumber eksternal   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.

CSS.XML.JavaScript"> <meta name="author" content="Adi Wahyu"> <meta charset="UTF­8"> </head> Materi kuliah Desain Web. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .Contoh <head> <head> <title>Belajar HTML5</title> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML.

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

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 . Noya sukses menyajikan dasar HTML5  secara detil dan mudah dicerna </p> </section> Materi kuliah Desain Web.<section>  Digunakan untuk mengelompokkan content yang secara tema sama <section> <h1>HTML5 Bagi Pemula</h1> <p> Buku ini berisi dasar­dasar HTML5 </p> <p> Andi F.

Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .<header>  Berfungsi sebagai elemen penampung kumpulan pengenal atau bantuan navigasi <section> <header> <h1>HTML5 Bagi Pemula</h1> </header> <p> Buku ini berisi dasar­dasar HTML5 </p> <p> Andi F. Noya sukses menyajikan dasar HTML5  secara detil dan mudah dicerna </p> </section> Materi kuliah Desain Web.

Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi . hanya posisinya yang berlawanan Biasanya berisi: siapa yang menulis. link ke halaman yang berelasi  Materi kuliah Desain Web. informasi hak cipta.<footer>  Sama seperti header.

<footer> <section> <header> <h1>HTML5 Bagi Pemula</h1> </header> <p> Buku ini berisi dasar­dasar HTML5 </p> <p> Andi F. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi . Noya sukses menyajikan dasar HTML5  secara detil dan mudah dicerna </p> <footer> <p> Oleh Masdar Desriawan </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.

 Noya sukses menyajikan dasar HTML5  secara detil dan mudah dicerna </p> <footer> <p> Oleh Masdar Desriawan </p> </footer> </section> Materi kuliah Desain Web.<section> <header> <h1>HTML5 Bagi Pemula</h1> </header> <aside> <p>Buku Terlaris!</p> </aside> <p> Buku ini berisi dasar­dasar HTML5 </p> <p> Andi F. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi <aside> .

 Restoran Sedap Gembira: <ul> <li><a href="pecel.html">Soto</a></li> </ul> </nav> Materi kuliah Desain Web.html">Pecel</a></li> <li><a href="soto.<nav>  Elemen yang berisi informasi navigasi. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi . biasanya berisi daftar link <nav> Menu Favorit.

<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 .

 Noya sukses menyajikan dasar HTML5  secara detil dan mudah dicerna </p> </article> <article> <h1>CSS Bagi Pemula</h1> <p> Buku ini berisi dasar­dasar CSS3 </p> <p> Andi F.<article> <h1>HTML5 Bagi Pemula</h1> <p> Buku ini berisi dasar­dasar HTML5 </p> <p> Andi F. Noya sukses menyajikan dasar CSS3  secara detil dan mudah dicerna </p> </article> Materi kuliah Desain Web. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi <article> .

Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .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.

html">Contact Us</a></li>       </ul>    </nav> </section> <footer>    <p>&copy.Disusun 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">About Us</a></li>          <li><a href="contact.2011 Adi Wahyu</p> </footer> </body> Materi kuliah Desain Web. </html> Teknik Informatika FTUP .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.

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

Polos? Materi kuliah Desain Web. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .

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

css"> </head> Materi kuliah Desain Web. Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .<head> <link rel="stylesheet" href="style.

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

Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi .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.