Your SlideShare is downloading. ×
HTML: Teks
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

HTML: Teks

1,409

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 …

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,409
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
177
Comments
0
Likes
1
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. Teks Pertemuan ke-4 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. 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. Membuat Dokumen struktur.html akhir.html rangkuman.html kontributor.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 5. Struktur Setiap Dokumen  <!DOCTYPE html>  <html>  <head>  <body> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 6. <!DOCTYPE> <!DOCTYPE html> <html> <head></head> <body></body> </html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 7. <head> <head> <title>Judul Halaman</title> </head> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. <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. <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. 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. 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. <footer> <footer> <p> &copy; 2011 PT Perusahaan Hebat </p> </footer> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 14. <section id=”isi”> <section id=”isi”> <article> </article> </section> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. 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. 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. 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. <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. Tampilan Halaman Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 21. struktur.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 22. akhir.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 23. rangkuman.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 24. kontributor.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 25. CSS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. 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. 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. 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. 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. 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. 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. <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. 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. <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. 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. <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. 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. <section id=”sidebar”>  Elemen “isi” berada di kanan  Lebarnya 25%  Warnanya oranye Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. <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. 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. Tampilan Setelah memiliki CSS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 44. struktur.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 45. akhir.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 46. rangkuman.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 47. kontributor.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 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. Buatlah Kode HTML & CSS gambar berikut Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
  • 50. Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi

×