HTML: Teks

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



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



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



Membuat DokumenMembuat Dokumen

kontributor.htmlkontributor.html

struktur.htmlstruktur.html

rangkuman.htmlrangkuman.htmlakhir.htmlakhir.html



Struktur Setiap DokumenStruktur Setiap Dokumen

<!DOCTYPE html><!DOCTYPE html> <html><html> <head><head> <body><body>



<!DOCTYPE><!DOCTYPE>

<!DOCTYPE html><!DOCTYPE html>

<html><html>

<head></head><head></head>

<body></body><body></body>

</html></html>



<head><head>

<head><head>

<title>Judul Halaman</title><title>Judul Halaman</title>

</head></head>



<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→



<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>



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>



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>



<footer><footer>

<footer><footer>

<p><p>

© 2011 PT Perusahaan Hebat© 2011 PT Perusahaan Hebat

</p></p>

</footer></footer>



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>




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>




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>




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>




Tampilan HalamanTampilan Halaman



akhir.htmlakhir.html



rangkuman.htmlrangkuman.html



CSSCSS



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



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



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)



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>



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>

http://webku.com/cool.css



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">



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>



<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



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;

}}



<header><header>

Buat background warna kuningBuat background warna kuning Di navigasi terdapat daftar linkDi navigasi terdapat daftar link

tidak ada bulatantidak ada bulatan inlineinline



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;

}}




Elemen “isi” berada di kiriElemen “isi” berada di kiri Lebarnya 70%Lebarnya 70% Warnanya hijau mudaWarnanya hijau muda Padding 5pxPadding 5px



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;

}}




Elemen “isi” berada di kananElemen “isi” berada di kanan Lebarnya 25%Lebarnya 25% Warnanya oranyeWarnanya oranye



style.css section#sidebar→style.css section#sidebar→

section#sidebar {section#sidebar {

float: right;float: right;

width: 25%; width: 25%;

background: #fc0;background: #fc0;

}}



<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”



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;

}}



Tampilan SetelahTampilan Setelahmemiliki CSSmemiliki CSS



akhir.htmlakhir.html



rangkuman.htmlrangkuman.html



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>,



Buatlah Kode HTML & CSSBuatlah Kode HTML & CSSgambar berikutgambar berikut

HTML: Teks

Documents

Transcript of HTML: Teks