Your SlideShare is downloading. ×
0
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
03 - Struktur HTML
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

03 - Struktur HTML

3,355

Published on

Agenda: …

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,355
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
231
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Struktur Utama HTML Pertemuan ke-3 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. 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. <title>Judul Halaman Web</title> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. 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. 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. 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. 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. 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. DOCTYPE HTML5<!DOCTYPE html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 12. <html><html lang="id"> <!­­ identifikasi bahasa yang digunakan ­­></html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. 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. <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. 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. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 18. Elemen Struktur Baru  <section>  <header>  <footer>  <aside>  <nav>  <article> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. <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. <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. <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. <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. <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. <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. <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. <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. Membuat Sketsa Web  Gunakan Pencils Mockup  Buat struktur halaman Web Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 29. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 32. Polos? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 33. CSS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 34. <head> <link rel="stylesheet" href="style.css"></head> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 37. ? Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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

×