Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUP Teknik Informatika FTUP Disusun oleh Adi Wahyu Pribadi Disusun oleh Adi Wahyu Pribadi Teks Teks Pertemuan ke-4 Pertemuan ke-4
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
TeksTeksPertemuan ke-4Pertemuan ke-4
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
AgendaAgenda
Membuat dokumen-dokumen HTML yang Membuat dokumen-dokumen HTML yang saling terhubungsaling terhubung
Buat Struktur DokumenBuat Struktur Dokumen Buat Detil Teks DokumenBuat Detil Teks Dokumen Sekilas CSSSekilas CSS Penambahan CSS untuk layout dokumen Penambahan CSS untuk layout dokumen
HTMLHTML
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Buat DokumenBuat Dokumen
Buatlah 4 buat dokumen HTML dalam Buatlah 4 buat dokumen HTML dalam sebuah folder/direktorisebuah folder/direktori
struktur.htmlstruktur.html akhir.htmlakhir.html rangkuman.htmlrangkuman.html kontributor.htmlkontributor.html
Keempat dokumen akan saling terkait satu Keempat dokumen akan saling terkait satu sama lainsama lain
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Membuat DokumenMembuat Dokumen
kontributor.htmlkontributor.html
struktur.htmlstruktur.html
rangkuman.htmlrangkuman.htmlakhir.htmlakhir.html
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Struktur Setiap DokumenStruktur Setiap Dokumen
<!DOCTYPE html><!DOCTYPE html> <html><html> <head><head> <body><body>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<!DOCTYPE><!DOCTYPE>
<!DOCTYPE html><!DOCTYPE html>
<html><html>
<head></head><head></head>
<body></body><body></body>
</html></html>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<head><head>
<head><head>
<title>Judul Halaman</title><title>Judul Halaman</title>
</head></head>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<title><title>
struktur.html Pertemuan Keempat: Text→struktur.html Pertemuan Keempat: Text→ akhir.html Post Terakhir→akhir.html Post Terakhir→ rangkuman.html Rangkuman Artikel→rangkuman.html Rangkuman Artikel→ kontributor.html Kontributor Website→kontributor.html Kontributor Website→
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<body><body>
<body><body>
<header></header><header></header>
<section id=”isi”></section><section id=”isi”></section>
<section id=”sidebar”></section><section id=”sidebar”></section>
<footer></footer><footer></footer>
</body></body>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<header><header>
<header><header>
<h1>Catatan Jurnalistik</h1><h1>Catatan Jurnalistik</h1>
<nav><nav>
<ul><ul>
<li>Post Terakhir</li><li>Post Terakhir</li>
<li>Rangkuman</li><li>Rangkuman</li>
<li>Kontributor</li><li>Kontributor</li>
</ul></ul>
</nav></nav>
</header></header>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Tautan ke Dokumen LainTautan ke Dokumen Lain
Beri tautan ke dokumen lainnya dengan Beri tautan ke dokumen lainnya dengan tag <a> dengan formattag <a> dengan format
<a href=”alamat_tautan”><a href=”alamat_tautan”>
Nama TautanNama Tautan
</a></a>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Sisipkan <a> di dalam <li>Sisipkan <a> di dalam <li>
<li><a href=”struktur.html”><li><a href=”struktur.html”>
Post TerakhirPost Terakhir
</a></li></a></li>
<li><a href=”rangkuman.html”><li><a href=”rangkuman.html”>
RangkumanRangkuman
</a></li></a></li>
<li><a href=”kontributor”><li><a href=”kontributor”>
Kontributor</a></li>Kontributor</a></li>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<footer><footer>
<footer><footer>
<p><p>
© 2011 PT Perusahaan Hebat© 2011 PT Perusahaan Hebat
</p></p>
</footer></footer>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<section id=”isi”><section id=”isi”>
<section id=”isi”><section id=”isi”>
<article><article>
</article></article>
</section></section>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
id=”isi” struktur.html→id=”isi” struktur.html→
<article><article>
<h2>Selamat Datang</h2><h2>Selamat Datang</h2>
<p>Halo Dunia! Selamat datang di website PT <p>Halo Dunia! Selamat datang di website PT
Perusahaan Hebat.</p>Perusahaan Hebat.</p>
<p>PT Perusahaan Hebat adalah perusahaan jasa <p>PT Perusahaan Hebat adalah perusahaan jasa
pembuatan aplikasi web.</p>pembuatan aplikasi web.</p>
</article></article>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
id=”isi” akhir.html→id=”isi” akhir.html→
<article><article>
<h2>Daftar Artikel Terakhir kami</h2><h2>Daftar Artikel Terakhir kami</h2>
<ol><ol>
<li><a href="#">Web Safe Color</a></li><li><a href="#">Web Safe Color</a></li>
<li><a href="#">User Experience</a></li><li><a href="#">User Experience</a></li>
<li><a href="#">Web Application</a></li><li><a href="#">Web Application</a></li>
</ol></ol>
</article></article>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
id=”isi” rangkuman.html→id=”isi” rangkuman.html→
<article><article>
<h2>Rangkuman Web SAFE COLOR</h2><h2>Rangkuman Web SAFE COLOR</h2>
<p><strong>Web colors</strong> are colors <p><strong>Web colors</strong> are colors
used in designing web pages, and the methods for used in designing web pages, and the methods for
describing and specifying those colors. describing and specifying those colors.
Hexadecimal color codes begin with a hash Hexadecimal color codes begin with a hash
(#).</p>(#).</p>
</article></article>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
id=”isi” kontributor.html→id=”isi” kontributor.html→
<article><article>
<h2>Kontributor Kami</h2><h2>Kontributor Kami</h2>
<ol><ol>
<li>Didats Triadi</li><li>Didats Triadi</li>
<li>Andrayogi</li><li>Andrayogi</li>
<li>Satya Witoelar</li><li>Satya Witoelar</li>
</ol></ol>
</article></article>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<section id=”sidebar”><section id=”sidebar”>
<section id=”sidebar”><section id=”sidebar”>
<nav><nav>
<ul><ul>
<li><a href="#">Link 1</a></li><li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li><li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li><li><a href="#">Link 3</a></li>
</ul></ul>
</nav></nav>
</section></section>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Tampilan HalamanTampilan Halaman
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
struktur.htmlstruktur.html
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
akhir.htmlakhir.html
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
rangkuman.htmlrangkuman.html
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
kontributor.htmlkontributor.html
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
CSSCSS
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Cascading Style SheetCascading Style Sheet
CSS adalah standar pembuatan dan CSS adalah standar pembuatan dan pemakaian style (font, warna, jarak baris, pemakaian style (font, warna, jarak baris, dan lain-lain) untuk dan lain-lain) untuk dokumen dokumen terstrukturterstruktur
CSS memudahkan pembuatan dan CSS memudahkan pembuatan dan pemeliharaan dokumen webpemeliharaan dokumen web
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Aturan SintaksAturan Sintaks
Style sheet didefinisikan dalam bentuk Style sheet didefinisikan dalam bentuk rule, terdiri dari:rule, terdiri dari:
selectorselector declaration: property & value;declaration: property & value;
Contoh ruleContoh rule
h1 { color: red }h1 { color: red }
keterangan:keterangan:
selector: h1; property: color; value: redselector: h1; property: color; value: red
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Kategori stylesheetKategori stylesheet
Inline (di dalam elemen html)Inline (di dalam elemen html)
<h1 <h1 style=”color: green”style=”color: green”>Judul Dokumen</h1>>Judul Dokumen</h1>
Embedded (di dalam dokumen html)Embedded (di dalam dokumen html)
Linked style sheet (di file eksternal)Linked style sheet (di file eksternal)
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
EmbeddedEmbedded<html><html>
<head><head>
<style type=”text/css”><style type=”text/css”>
h1 { color: red }h1 { color: red }
</style></style>
</head></head>
<body><body>
<h1>Judul</h1><h1>Judul</h1>
</body></body>
</html></html>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Linked Style SheetLinked Style Sheet
<head><head>
<link rel="stylesheet" type="text/css" <link rel="stylesheet" type="text/css"
href=" href="http://webku.com/cool.csshttp://webku.com/cool.css">">
</head></head>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Memberi CSSMemberi CSS
Semua dokumen diberi linked style sheet Semua dokumen diberi linked style sheet ke file style.csske file style.css
File style.css berada di folder yang sama File style.css berada di folder yang sama dengan keempat file html tadidengan keempat file html tadi
Di setiap <head> dokumen html beri kode Di setiap <head> dokumen html beri kode berikutberikut
<link rel="stylesheet" ref="style.css"><link rel="stylesheet" ref="style.css">
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
style.cssstyle.css
Style tag berikut yang akan diubahStyle tag berikut yang akan diubah <body><body> <header><header> <section id=”isi”><section id=”isi”> <section id=”sidebar”><section id=”sidebar”> <footer><footer>
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<body><body>
Diubah lebarnya ke 960 pixelDiubah lebarnya ke 960 pixel Margin atas 15 pixelMargin atas 15 pixel Rata tengahRata tengah Keluarga font yang digunakan:Keluarga font yang digunakan:
Arial, sans serifArial, sans serif Background bewarna abu-abu mudaBackground bewarna abu-abu muda
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
style.css body→style.css body→
body {body {
Width: 960px;Width: 960px;
margin: 15px auto;margin: 15px auto;
font-family: Verdana, Verdana, Geneva, sans-serif;font-family: Verdana, Verdana, Geneva, sans-serif;
background: #dcdcdc;background: #dcdcdc;
}}
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<header><header>
Buat background warna kuningBuat background warna kuning Di navigasi terdapat daftar linkDi navigasi terdapat daftar link
tidak ada bulatantidak ada bulatan inlineinline
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
style.css header→style.css header→header {header {
padding: 20px;padding: 20px;
background: #eee8aa;background: #eee8aa;
}}
header nav ul {header nav ul {
list-style: none;list-style: none;
margin: 0;margin: 0;
padding: 0;padding: 0;
}}
header nav ul li {header nav ul li {
display: inline;display: inline;
}}
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<section id=”isi”><section id=”isi”>
Elemen “isi” berada di kiriElemen “isi” berada di kiri Lebarnya 70%Lebarnya 70% Warnanya hijau mudaWarnanya hijau muda Padding 5pxPadding 5px
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
style.css section#isi→style.css section#isi→
section#isi {section#isi {
float: left;float: left;
width: 70%;width: 70%;
background: #cfc;background: #cfc;
padding: 1em;padding: 1em;
}}
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<section id=”sidebar”><section id=”sidebar”>
Elemen “isi” berada di kananElemen “isi” berada di kanan Lebarnya 25%Lebarnya 25% Warnanya oranyeWarnanya oranye
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
style.css section#sidebar→style.css section#sidebar→
section#sidebar {section#sidebar {
float: right;float: right;
width: 25%; width: 25%;
background: #fc0;background: #fc0;
}}
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
<footer><footer>
Teks rata tengahTeks rata tengah Ukuran font 90% dari ukuran normalUkuran font 90% dari ukuran normal Padding: 5px;Padding: 5px; Background warna kuningBackground warna kuning Tidak boleh tertimpa oleh section=”isi” Tidak boleh tertimpa oleh section=”isi”
maupun section=”sidebar”maupun section=”sidebar”
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
style.css footer→style.css footer→
footer {footer {
clear: both;clear: both;
padding: 5px;padding: 5px;
text-align: center;text-align: center;
background: #eee8aa;background: #eee8aa;
font-size: .9em;font-size: .9em;
}}
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Tampilan SetelahTampilan Setelahmemiliki CSSmemiliki CSS
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
struktur.htmlstruktur.html
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
akhir.htmlakhir.html
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
rangkuman.htmlrangkuman.html
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
kontributor.htmlkontributor.html
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Daftar TeksDaftar Teks
Cari makna tag-tag di bawah berikutCari makna tag-tag di bawah berikut Heading <h1>, <h2>, <h3>, <h4>, dst→Heading <h1>, <h2>, <h3>, <h4>, dst→ Paragraf <p>Paragraf <p> Waktu <time>Waktu <time> <blockquote>, <hgroup>, <figure>, <dl>, <blockquote>, <hgroup>, <figure>, <dl>,
<cite>, <address>, <em>, <i>, <cite>, <address>, <em>, <i>, <strong>, <b>, <hr>, <small>, <strong>, <b>, <hr>, <small>,
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi
Buatlah Kode HTML & CSSBuatlah Kode HTML & CSSgambar berikutgambar berikut
Materi kuliah Desain Web, Materi kuliah Desain Web, Teknik Informatika FTUPTeknik Informatika FTUP
Disusun oleh Adi Wahyu PribadiDisusun oleh Adi Wahyu Pribadi