html: teks

Report

Post on 20-May-2015

1.503 Views

Category:

Documents

5 Downloads

Preview:

Click to see full reader

DESCRIPTION

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.

TRANSCRIPT

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>

&copy; 2011 PT Perusahaan Hebat&copy; 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>

http://webku.com/cool.css

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

top related

web design - seribuilmublog.files.wordpress.com ·...
Documents
tag, elemen, atribut - tiksmadd.files.wordpress.com · tag ...
Documents
html (codingku.com)
Documents
pemrograman web modul - aktivitasshodiq · modul 1 teks...
Documents
tutorial html (hypertext markup language) menggunakan teks...
Documents
master html
Documents
tentang html
Documents
[html] codigos html para webs
Documents
pengantar html - core · danangwahyu utomo, m.kom, m.cs...
Documents
membuat website dengan menggunakan html -...
Documents
pengembangan sistem validasi dokumen teks html · pdf...
Documents
pengenalan html
Documents
pengantar html
Documents
teks, gambar & grafik -...
Documents
dasar html
Documents
tutorial html
Technology
diktat4share.files.wordpress.com  · web viewadalah bahasa...
Documents
belajar html
Education
borsaat/vb/t428357.html forum.sedty/t63724.html
Documents
html tugas
Documents