Struktur Utama                     HTML                                 Pertemuan ke-3  Materi kuliah Desain Web,   Teknik...
Agenda           Anatomi HTML5           DOCTYPE           <head>           Elemen struktur HTML5           Mempercan...
Anatomi HTML5<!DOCTYPE html> <!­­ tipe doc html5 ­­><html>   <head><!­­ menampilkan informasi halaman web ­­>      <title>...
<title>Judul Halaman Web</title>  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Elemen HTML<nama elemen>Isi dari elemen</elemen>contoh:<h1>Judul Artikel</h1>  Materi kuliah Desain Web,   Teknik Informat...
Penulisan elemen bebas, boleh huruf             besar atau kecil atau campuran keduanya                                   ...
DOCTYPE HTML           DOCTYPE → Document Type Declaration         atau deklarasi tipe dokumen           HTML5 → ringkas...
DOCTYPE HTML 4.01<!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML P...
DOCTYPE XHTML 1.0<!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.d...
DOCTYPE XHTML 1.1<!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  Materi...
DOCTYPE HTML5<!DOCTYPE html>  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
<html><html lang="id"> <!­­ identifikasi bahasa yang digunakan ­­></html>  Materi kuliah Desain Web,   Teknik Informatika ...
Daftar Kode Bahasa           Kode Bahasa berdasarkan ISO 639-1           http://www.w3schools.com/tags/ref_lang         ...
Kegunaan Kode Bahasa           Pengubah teks ke suara           Memilih font yang tepat untuk ditampilkan           Mem...
<head>           Berisi elemen                                    <title> → mendefinisikan judul dokumen                ...
Contoh <head><head><title>Belajar HTML5</title><meta name="description" content="Free Web tutorials"><meta name="keywords"...
Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Elemen Struktur Baru           <section>           <header>           <footer>           <aside>           <nav>    ...
<section>           Digunakan untuk mengelompokkan         content yang secara tema sama         <section>            <h1...
<header>           Berfungsi sebagai elemen penampung         kumpulan pengenal atau bantuan         navigasi         <se...
<footer>           Sama seperti header, hanya posisinya yang         berlawanan           Biasanya berisi: siapa yang me...
<footer>         <section>            <header>               <h1>HTML5 Bagi Pemula</h1>            </header>            <p...
<aside>           Mendeskripsikan suatu content yang         masih terkait tetapi bukan bagian utama         dari halaman...
<section>            <header>                                              <aside>               <h1>HTML5 Bagi Pemula</h1...
<nav>           Elemen yang berisi informasi navigasi,          biasanya berisi daftar link         <nav>         Menu Fa...
<article>           Sama dengan <section> hanya saja         dikhususkan pada bagian yang akan         muncul berkali-kal...
<article>            <h1>HTML5 Bagi Pemula</h1>                                            <article>            <p>       ...
Membuat Sketsa Web           Gunakan Pencils Mockup           Buat struktur halaman Web  Materi kuliah Desain Web,   Tek...
Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
<!DOCTYPE html>                         <html>                              <head>                                    <tit...
Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Polos?  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
CSS  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
<head>      <link rel="stylesheet" href="style.css"></head>  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun ol...
header#utama {                              display: block;                              padding: 5px;                    ...
Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
?  Materi kuliah Desain Web,   Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
Tugas           Buat sketsa halaman Web dengan Pencils         sesuai dengan imajinasi Anda           Buat kode html-nya...
Upcoming SlideShare
Loading in …5
×

03 - Struktur HTML

3,726 views

Published on

Agenda:
- Anatomi HTML
- DOCTYPE
- <head>
- Elemen Struktur HTML5
- Memperindah

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,726
On SlideShare
0
From Embeds
0
Number of Embeds
21
Actions
Shares
0
Downloads
237
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

03 - Struktur HTML

  1. 1. Struktur Utama HTML Pertemuan ke-3 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  2. 2. Agenda  Anatomi HTML5  DOCTYPE  <head>  Elemen struktur HTML5  Mempercantik HTML5 dengan CSS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  3. 3. 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 FTUPDisusun oleh Adi Wahyu Pribadi
  4. 4. <title>Judul Halaman Web</title> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  5. 5. Elemen HTML<nama elemen>Isi dari elemen</elemen>contoh:<h1>Judul Artikel</h1> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  6. 6. Penulisan elemen bebas, boleh huruf besar atau kecil atau campuran keduanya Catatan 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 <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 FTUPDisusun oleh Adi Wahyu Pribadi
  7. 7. 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 FTUPDisusun oleh Adi Wahyu Pribadi
  8. 8. DOCTYPE HTML 4.01<!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><!DOCTYPE HTML PUBLIC "­//W3C//DTD HTML 4.01 Frameset//EN""http://www.w3.org/TR/html4/frameset.dtd"> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  9. 9. DOCTYPE XHTML 1.0<!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1­strict.dtd"><!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1­transitional.dtd"><!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1­frameset.dtd"> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  10. 10. DOCTYPE XHTML 1.1<!DOCTYPE html PUBLIC "­//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  11. 11. DOCTYPE HTML5<!DOCTYPE html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  12. 12. <html><html lang="id"> <!­­ identifikasi bahasa yang digunakan ­­></html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  13. 13. 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 FTUPDisusun oleh Adi Wahyu Pribadi
  14. 14. 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 FTUPDisusun oleh Adi Wahyu Pribadi
  15. 15. <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 FTUPDisusun oleh Adi Wahyu Pribadi
  16. 16. Contoh <head><head><title>Belajar HTML5</title><meta name="description" content="Free Web tutorials"><meta name="keywords" content="HTML,CSS,XML,JavaScript"><meta name="author" content="Adi Wahyu"><meta charset="UTF­8"></head> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  17. 17. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  18. 18. Elemen Struktur Baru  <section>  <header>  <footer>  <aside>  <nav>  <article> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  19. 19. <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. Noya sukses menyajikan dasar HTML5  secara detil dan mudah dicerna </p> </section> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  20. 20. <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 FTUPDisusun oleh Adi Wahyu Pribadi
  21. 21. <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 FTUPDisusun oleh Adi Wahyu Pribadi
  22. 22. <footer> <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> <footer> <p> Oleh Masdar Desriawan </p> </footer> </section> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  23. 23. <aside>  Mendeskripsikan suatu content yang masih terkait tetapi bukan bagian utama dari halaman web Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  24. 24. <section> <header> <aside> <h1>HTML5 Bagi Pemula</h1> </header> <aside> <p>Buku Terlaris!</p> </aside> <p> Buku ini berisi dasar­dasar HTML5 </p> <p> Andi F. 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 FTUPDisusun oleh Adi Wahyu Pribadi
  25. 25. <nav>  Elemen yang berisi informasi navigasi, biasanya berisi daftar link <nav> Menu Favorit, Restoran Sedap Gembira: <ul> <li><a href="pecel.html">Pecel</a></li> <li><a href="soto.html">Soto</a></li> </ul> </nav> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  26. 26. <article>  Sama dengan <section> hanya saja dikhususkan pada bagian yang akan muncul berkali-kali di dalam content utama Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  27. 27. <article> <h1>HTML5 Bagi Pemula</h1> <article> <p> Buku ini berisi dasar­dasar HTML5 </p> <p> Andi F. 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. Noya sukses menyajikan dasar CSS3  secara detil dan mudah dicerna </p> </article> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  28. 28. Membuat Sketsa Web  Gunakan Pencils Mockup  Buat struktur halaman Web Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  29. 29. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  30. 30. <!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>&copy;2011 Adi Wahyu</p> </footer> Materi kuliah Desain Web, </body> </html> Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  31. 31. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  32. 32. Polos? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  33. 33. CSS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  34. 34. <head> <link rel="stylesheet" href="style.css"></head> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  35. 35. header#utama {    display: block;    padding: 5px; style.css    border: 2px #000 solid; } #mainContent {    width: 75%;    float: left } #secondNav {    margin­top: 10px;    padding: 10px;    border: 1px #000 solid;    width: 20%;    float: left; } footer {    clear: both;    display: block;    margin­top: 20px;    border­top: 2px #000 solid; } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  36. 36. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  37. 37. ? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  38. 38. Tugas  Buat sketsa halaman Web dengan Pencils sesuai dengan imajinasi Anda  Buat kode html-nya Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi

×