• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML: Teks
 

HTML: Teks

on

  • 1,435 views

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.

Statistics

Views

Total Views
1,435
Views on SlideShare
1,433
Embed Views
2

Actions

Likes
1
Downloads
164
Comments
0

1 Embed 2

http://www.edmodo.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial LicenseCC Attribution-NonCommercial License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML: Teks HTML: Teks Presentation Transcript

    • Teks Pertemuan ke-4 Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • 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
    • 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
    • Membuat Dokumen struktur.html akhir.html rangkuman.html kontributor.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • Struktur Setiap Dokumen  <!DOCTYPE html>  <html>  <head>  <body> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • <!DOCTYPE> <!DOCTYPE html> <html> <head></head> <body></body> </html> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • <head> <head> <title>Judul Halaman</title> </head> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • <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
    • <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
    • <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
    • 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
    • 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
    • <footer> <footer> <p> &copy; 2011 PT Perusahaan Hebat </p> </footer> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • <section id=”isi”> <section id=”isi”> <article> </article> </section> Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • 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
    • 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
    • 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
    • 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
    • <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
    • Tampilan Halaman Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • struktur.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • akhir.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • rangkuman.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • kontributor.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • CSS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • 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
    • <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
    • 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
    • <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
    • 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
    • <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
    • 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
    • <section id=”sidebar”>  Elemen “isi” berada di kanan  Lebarnya 25%  Warnanya oranye Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • style.css → section#sidebar section#sidebar { float: right; width: 25%; background: #fc0; } Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • <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
    • 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
    • Tampilan Setelah memiliki CSS Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • struktur.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • akhir.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • rangkuman.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • kontributor.html Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • 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
    • Buatlah Kode HTML & CSS gambar berikut Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi
    • Materi kuliah Desain Web, Teknik Informatika FTUPDisusun oleh Adi Wahyu Pribadi