HTML: Teks

1,594 views

Published on

Setelah mengenal struktur utama HTML maka ditambahkan beberapa tag pendukung untuk berbagai elemen teks. Di akhir pertemuan terdapat latihan yang harus dilengkapi agar lebih memahami lagi konsep struktur HTML dan teks pendukungnya.

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,594
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
182
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

HTML: Teks

  1. 1. Teks Pertemuan ke-4 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  2. 2. Agenda  Membuat dokumen-dokumen HTML yang saling terhubung  Buat Struktur Dokumen  Buat Detil Teks Dokumen  Sekilas CSS  Penambahan CSS untuk layout dokumen HTML Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  3. 3. Buat Dokumen  Buatlah 4 buat dokumen HTML dalam sebuah folder/direktori  struktur.html  akhir.html  rangkuman.html  kontributor.html  Keempat dokumen akan saling terkait satu sama lain Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  4. 4. Membuat Dokumen struktur.html akhir.html rangkuman.html kontributor.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  5. 5. Struktur Setiap Dokumen  <!DOCTYPE html>  <html>  <head>  <body> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  6. 6. <!DOCTYPE> <!DOCTYPE html> <html> <head></head> <body></body> </html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  7. 7. <head> <head> <title>Judul Halaman</title> </head> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  8. 8. <title>  struktur.html → Pertemuan Keempat: Text  akhir.html → Post Terakhir  rangkuman.html → Rangkuman Artikel  kontributor.html → Kontributor Website Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  9. 9. <body> <body> <header></header> <section id=”isi”></section> <section id=”sidebar”></section> <footer></footer> </body> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  10. 10. <header> <header> <h1>Catatan Jurnalistik</h1> <nav> <ul> <li>Post Terakhir</li> <li>Rangkuman</li> <li>Kontributor</li> </ul> </nav> </header> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  11. 11. Tautan ke Dokumen Lain  Beri tautan ke dokumen lainnya dengan tag <a> dengan format <a href=”alamat_tautan”> Nama Tautan </a> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  12. 12. Sisipkan <a> di dalam <li> <li><a href=”struktur.html”> Post Terakhir </a></li> <li><a href=”rangkuman.html”> Rangkuman </a></li> <li><a href=”kontributor”> Kontributor</a></li> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  13. 13. <footer> <footer> <p> &copy; 2011 PT Perusahaan Hebat </p> </footer> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  14. 14. <section id=”isi”> <section id=”isi”> <article> </article> </section> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  15. 15. id=”isi” → struktur.html <article> <h2>Selamat Datang</h2> <p>Halo Dunia! Selamat datang di website PT Perusahaan Hebat.</p> <p>PT Perusahaan Hebat adalah perusahaan jasa pembuatan aplikasi web.</p> </article> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  16. 16. id=”isi” → akhir.html <article> <h2>Daftar Artikel Terakhir kami</h2> <ol> <li><a href="#">Web Safe Color</a></li> <li><a href="#">User Experience</a></li> <li><a href="#">Web Application</a></li> </ol> </article> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  17. 17. id=”isi” → rangkuman.html <article> <h2>Rangkuman Web SAFE COLOR</h2> <p><strong>Web colors</strong> are colors used in designing web pages, and the methods for describing and specifying those colors. Hexadecimal color codes begin with a hash (#).</p> </article> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  18. 18. id=”isi” → kontributor.html <article> <h2>Kontributor Kami</h2> <ol> <li>Didats Triadi</li> <li>Andrayogi</li> <li>Satya Witoelar</li> </ol> </article> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  19. 19. <section id=”sidebar”> <section id=”sidebar”> <nav> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">Link 2</a></li> <li><a href="#">Link 3</a></li> </ul> </nav> </section> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  20. 20. Tampilan Halaman Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  21. 21. struktur.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  22. 22. akhir.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  23. 23. rangkuman.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  24. 24. kontributor.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  25. 25. CSS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  26. 26. Cascading Style Sheet  CSS adalah standar pembuatan dan pemakaian style (font, warna, jarak baris, dan lain-lain) untuk dokumen terstruktur  CSS memudahkan pembuatan dan pemeliharaan dokumen web Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  27. 27. Aturan Sintaks  Style sheet didefinisikan dalam bentuk rule, terdiri dari:  selector  declaration: property & value;  Contoh rule h1 { color: red } keterangan: selector: h1; property: color; value: red Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  28. 28. Kategori stylesheet  Inline (di dalam elemen html) <h1 style=”color: green” >Judul Dokumen</h1>  Embedded (di dalam dokumen html)  Linked style sheet (di file eksternal) Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  29. 29. Embedded <html> <head> <style type=”text/css”> h1 { color: red } </style> </head> <body> <h1>Judul</h1> </body> </html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  30. 30. Linked Style Sheet <head> <link rel="stylesheet" type="text/css" href=" http://webku.com/cool.css "> </head> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  31. 31. Memberi CSS  Semua dokumen diberi linked style sheet ke file style.css  File style.css berada di folder yang sama dengan keempat file html tadi  Di setiap <head> dokumen html beri kode berikut <link rel="stylesheet" ref="style.css"> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  32. 32. style.css  Style tag berikut yang akan diubah  <body>  <header>  <section id=”isi”>  <section id=”sidebar”>  <footer> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  33. 33. <body>  Diubah lebarnya ke 960 pixel  Margin atas 15 pixel  Rata tengah  Keluarga font yang digunakan: Arial, sans serif  Background bewarna abu-abu muda Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  34. 34. style.css → bodybody { Width: 960px; margin: 15px auto; font-family: Verdana, Verdana, Geneva, sans-serif; background: #dcdcdc;} Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  35. 35. <header>  Buat background warna kuning  Di navigasi terdapat daftar link  tidak ada bulatan  inline Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  36. 36. header { style.css → header padding: 20px; background: #eee8aa;}header nav ul { list-style: none; margin: 0; padding: 0;}header nav ul li { display: inline;} Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  37. 37. <section id=”isi”>  Elemen “isi” berada di kiri  Lebarnya 70%  Warnanya hijau muda  Padding 5px Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  38. 38. style.css → section#isi section#isi { float: left; width: 70%; background: #cfc; padding: 1em; } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  39. 39. <section id=”sidebar”>  Elemen “isi” berada di kanan  Lebarnya 25%  Warnanya oranye Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  40. 40. style.css → section#sidebar section#sidebar { float: right; width: 25%; background: #fc0; } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  41. 41. <footer>  Teks rata tengah  Ukuran font 90% dari ukuran normal  Padding: 5px;  Background warna kuning  Tidak boleh tertimpa oleh section=”isi” maupun section=”sidebar” Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  42. 42. style.css → footer footer { clear: both; padding: 5px; text-align: center; background: #eee8aa; font-size: .9em; } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  43. 43. Tampilan Setelah memiliki CSS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  44. 44. struktur.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  45. 45. akhir.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  46. 46. rangkuman.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  47. 47. kontributor.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  48. 48. Daftar Teks  Cari makna tag-tag di bawah berikut  Heading → <h1>, <h2>, <h3>, <h4>, dst  Paragraf <p>  Waktu <time>  <blockquote>, <hgroup>, <figure>, <dl>, <cite>, <address>, <em>, <i>, <strong>, <b>, <hr>, <small>, Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  49. 49. Buatlah Kode HTML & CSS gambar berikut Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  50. 50. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi

×