2 Teori Desain Web HTML

HTML
Pertemuan 1 Desain Web.

What is HTML?
• HyperText Markup Language
• Bahasa yang membentuk hypertext/halaman web
• Disusun atas tag-tag

History of HTML
•Diciptakan oleh Sir Timothy John Berners-Lee (Tim Berners-Lee atau
TimBL)
Tim Berners-Lee
• Sir Timothy John Berners-Lee a.k.a. TimBL
•Pertama kali mengimplementasikan komunikasi

menggunakan HTTP antara klien dan server via
internet pada 1990
•Direktur World Wide Web Consortium (W3C,

http://w3.org)
• Twitter: @timberners_lee
W3C
• World Wide Web Consortium
• Organisasi standard web
• Dibentuk pada 1994
• Tujuan: mengembangkan teknologi web

Tools
• Notepad
• Notepad++
• Sublime Text
• NetBeans
HTML Basics
• Terdiri dari tag-tag yang dibentuk dengan karakter kurung siku
 Contoh: <html>
• Ada tag pembuka dan ada tag penutup

 Contoh: <html></html>
• Ada tag yang tidak perlu tag penutup

 Contoh: <img/>, <hr>
• Tag tidak ditampilkan di browser
• Browser hanya merender (menampilkan) teks yang berada di antara tag
• Contoh: <div>This text is displayed on browser</div>

A Simple HTML Code
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes

here </p>
</body> </html>
HTML Anatomy
<!DOCTYPE html> Mendefinisikan tipe dokumen dan versi HTML
<html>
<head>
</head>
<body>
<p>Document content goes

here </p>
</body> </html>
HTML Anatomy
<!DOCTYPE html>
<html>
<head>
</head>
<body> Dokumen HTML diawali dan
diakhiri tag <html>
<p>Document content goes here </p>
</body>
</html>
HTML Anatomy
<!DOCTYPE html>
<html>
<head> • Header HTML
• Berisi informasi tentang dokumen
<title>This is document title</title> HTML
• Tidak ditampilkan di halaman
</head>
web (browser)
<body>
</body>
</html>
HTML Anatomy
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title> • Judul halaman web
• Ditampilkan di tab browser
</head>
<body>
</body>
</html>
HTML Anatomy
<!DOCTYPE html>
<html>
<head>
</head>
<body>
• Berisi konten halaman web
<p>Document content goes here </p> • Ditampilkan di browser
</body>
</html>
HTML Anatomy
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Beberapa tag HTML
</body>
</html>
DOCTYPE
• Mendefinisikan tipe dokumen dan versi HTML
• Diletakkan di awal kode HTML
• Direkomendasikan menggunakan HTML versi 5

 <!DOCTYPE html>
<html>
• Awal dan akhir kode HTML
• Memberi informasi bahasa yang digunakan di halaman web

 Contoh: <html lang="en-US">
<head>
• Tidak ditampilkan di halaman web oleh browser
• Berisi informasi tentang dokumen HTML:

 Judul halaman web (<title>)
 Memasukkan kode CSS
 <style>.myclass { padding: 10px }</style>
 Load file CSS
 <link rel=“stylesheet” href=“some.css”>
 Memasukkan kode JavaScript
 <script>alert(‘Hello world!’);</script>
 Load file JavaScript
 <script src=“some.js”></script>
 Meta information
<meta>
• Digunakan untuk memberikan metadata
• Metadata adalah informasi tambahan yang mendeskripsikan halaman web
• Menggunakan atribut name dan content
• Contoh:
 <meta name=“author” content=“Randy Cahya Wihandika”>
 <meta name=“description” content=“Kuliah Desain Web Vokasi”>
 <meta name=“keywords” content=“web design, tutorial”>
<meta name="robots" content="noindex, nofollow">
<meta name=“description”>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<title>Yahoo! UK & Ireland Eurosport—Sports News | Live Scores | Sport</title>
<meta name="description" content="Latest sports news and live scores from Yahoo!
Eurosport UK. Complete sport coverage with Football results, Cricket scores, F1, Golf, Rugby,
Tennis and more."></head>
<body>
</body>
</html>
<meta http-equiv=“refresh”>
• Digunakan untuk merefresh halaman web dalam detik
•Contoh:
<meta http-equiv="refresh" content="5">
• Maka halaman web akan direfresh 5 detik setelah ditampilkan
• Dapat juga digunakan untuk redirect ke halaman lain
Contoh:
•
<meta http-equiv="refresh" content="5“ url=“http://www.ub.ac.id”>
•Maka halaman web akan diredirect ke website UB 5 detik setelah halaman

ditampilkan
<body>
• Berisi semua elemen halaman web yang ditampilkan di browser
<h1..6>
• Digunakan sebagai judul dari suatu bagian halaman web
•Ada 6 level yang bisa digunakan: <h1>, <h2>, <h3>, <h4>, <h5>, sampai
<h6>
<h1..6>
<!DOCTYPE html>
<html lang=“en-US”>
<head>
<title>Contoh
Heading</title>
</head> <body>
<h1>This is heading 1</h1>
</body>
</html>
<p>
• Membagi struktur teks menjadi paragraf-paragraf
<p>
<!DOCTYPE html> Here is a first paragraph of text.
<html>
Here is a second paragraph of text.
<head>
<title>Contoh Here is a third paragraph of text.
Paragraph</title>
</head> <body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
<center>
• Untuk meletakkan konten halaman di tengah halaman secara horizontal
• Tag ini berstatus deprecated

<center>
<!DOCTYPE html> Teks ini tidak berada di tengah
<html>
Teks ini berada di tengah
<head>
<title>Centring Content
Example</title>
</head> <body>
<p>Teks ini tidak berada di tengah.</p>
<center>
<p>Teks ini berada di
tengah.</p>
</center> </body>
</html>
<pre>
• Singkatan dari preserve
• Untuk menampilkan teks sesuai dengan yang ditulis
• Karakter tab tidak dikonversi menjadi spasi

<pre>
<!DOCTYPE html>
function testFunction(param) {
<html>
<head>
alert (param);
<title>Contoh
}
Preserve</title>
</head> <body>
alert
(param);
}</body>
</html>
<pre>
<!DOCTYPE html>
<html>
<head>
alert (param);
<title>Contoh
}
Preserve</title>
</head> <body>
<pre>
alert (param);
}
</pre>
</body>
</html>
<b>
• Digunakan untuk membuat teks Teks ini dicetak tebal
menjadi tebal
•Contoh:
<b>Teks ini dicetak tebal</b>
<i>
• Digunakan untuk membuat teks Teks ini dicetak miring
menjadi miring
•Contoh:
<i>Teks ini dicetak miring</i>
<u>
• Untuk menggarisbawahi teks Teks ini penting
Contoh:
•
<u>Teks ini penting</u>
<strike>
• Untuk mencoret teks Teks ini belum sudah jadi
•Contoh:
<p>Website ini
<strike>belum</strike>sudah jadi</p>
<u><b><i>
• Tag <u>, <b>, dan <i> bisa Teks ini tebal, miring, dan
dikombinasikan digarisbawahi
Contoh:
•
<u><b><i>Teks ini tebal, miring, dan
digarisbawahi</u></b></i>
<sup>
• Singkatan dari superscript E = MC2
•Digunakan untuk membuat teks lebih

kecil dan berada di atas posisi teks
normal
•Biasanya digunakan untuk menulis

rumus matematis
Contoh:
•
E = MC<sup>2</sup>
<sub>
• Singkatan dari subscript logx
•Digunakan untuk membuat teks lebih

kecil dan berada di bawah posisi teks
normal
•Biasanya digunakan untuk menulis

rumus matematis
•Contoh:
log<sub>x</sub>
<big>
• Digunakan untuk membuat ukuran Ukuran teks ini lebih besar
teks lebih besar daripada ukuran teks
yang ada di sekitarnya
Contoh:
•
Ukuran teks ini lebih
<big>besar</big>
<small>
• Digunakan untuk membuat ukuran Ukuran teks ini lebih kecil.
teks lebih kecildaripada ukuran teks
yang ada di sekitarnya
•Contoh:
Ukuran teks ini lebih
<small>kecil</small>.
<mark>
•Digunakan untuk menandai teks
dengan background kuning (seperti
stabilo)
• Contoh:
Istilah <mark>penting</mark> harus
ditandai.
<em>
• Singkatan dari emphasis (penekanan) Ini adalah istilah penting.
• Secara visual akan membuat teks
menjadi miring (sama seperti <i>)
• Contoh:
Ini adalah istilah <em>penting</em>.
<strong>
• Secara visual akan membuat teks Ini adalah istilah sangat penting.
menjadi tebal (sama seperti <b>)
• Memiliki makna penekanan yang

lebih kuat daripada <em>
• Contoh:
Ini adalah istilah <strong>sangat
penting</strong>.
<bdo>
• Singkatan dari bi-directional override
•Digunakan untuk mengubah arah

penulisan teks
• Contoh:
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go
right to left.</bdo></p>
<blockquote>
• Digunakan untuk mengutip kalimat Quote from Dr. Seuss:
dari sumber lain
"Don't cry because it's over, smile
• Contoh: because it happened."
<p>Quote from Dr. Seuss:</p>
<blockquote>"Don't cry because it's
over, smile because it
happened."</blockquote>
<address>
• Digunakan untuk menampilkan Jl. Veteran Malang 65145 Indonesia
alamat
• Contoh:
<address> Jl. Veteran Malang 65145
Indonesia</address>
<br>
• Untuk membuat baris baru Hello
• Contoh: Selamat kuliah desain web.
<!DOCTYPE html> Thanks
<html> Randy
<head>
<title>Contoh Baris Baru</title>
</head>
<body>
<p>
Hello<br>
Selamat kuliah desain web.<br>
Thanks<br>
Randy
</p>
</body>
</html>
<hr>
• Digunakan untuk membuat garis Hello
horizontal
World
• Contoh:
<!DOCTYPE html>
<html>
<head>
<title>Contoh Garis
Horizontal</title>
</head> <body>
<p>Hello</p>
<hr>
<p>World</p>
</body>
</html>
<a>
• Digunakan untuk membuat hyperlink
• Link tujuan ditulis di atribut href
Contoh:
•
<a href=“http://www.google.com”>Go to Google.com</a>
• Agar saat dibuka, link dibuka di tab baru, tambahkan atribut

target=“_blank”
Contoh:
•
<a href=http://www.google.com target=“_blank”>Go to Google.com</a>
<a> for Email
• Untuk membuat link pengiriman email, gunakan awal “mailto:”
• Contoh:
<a href=“mailto:rendicahya@ub.ac.id”>Kirim email</a>
• Jika link tersebut diklik, aplikasi untuk mengirim email akan dijalankan
(tergantung pengaturan setiap komputer)
• Untuk menambahkan subyek email, tambahkan “?subject”
Contoh:
•
<a href=“mailto:rendicahya@ub.ac.id?subject=Tugas Desain
Web“>Kirim
email</a>
<a> for Email
• Untuk menambahkan CC dan BCC, tambahkan “?cc” dan “&bcc”
Contoh:
•
<a href=“mailto:rendicahya@ub.ac.id?cc=someone@gmail.com,
another@gmailcom&bcc=lastperson@gmail.com”>Kirim email</a>
• Untuk memberikan isi pesan, tambahkan “?body”

Contoh:
•
<a href=“mailto:rendicahya@ub.ac.id?body=Hello World!”>Kirim email</a>
• Beberapa item tersebut dapat dikombinasikan

<img>
• Digunakan untuk memasukkan gambar ke halaman web
 Contoh:
<img src=“images/gambar1.png”>
• Untuk mengatur ukuran gambar, gunakan atribut width dan height

 Contoh:
<img src=“images/gambar1.png” width=“300”
height=“400”>
 Satuan ukuran yang digunakan adalah piksel
<img>
• Untuk menambahkan border, gunakan atribut border
 Contoh:
<img src=“images/gambar1.png” border=“3”>
• Untuk mengatur posisi gambar secara horizontal, gunakan atribut align

 Contoh:
<img src=“images/gambar1.png” align=“right”>
• Gambar dapat digunakan sebagai label dari sebuah link

 Contoh:
<a href=http://www.google.com><img src=“google.png”></a>
Generic Elements
•Ada 2 tag yang dapat digunakan untuk mengelompokkan beberapa tag
html: <span> dan <div>
•Contoh:
<div>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragr
af 3</p>
</div>
Comments
• Bagian dari kode yang diabaikan oleh browser (tidak ditampilkan)
• Tujuan: dokumentasi
• Sintaks: 
• Contoh: 
•Direkomendasikan untuk digunakan terutama pada kode HTML yang

kompleks
Comments
• Sintaks harus benar
• Sintaks yang tidak benar tidak akan dianggap sebagai komentar

 Contoh: < !-- This is not a valid comment -->
• Komentar boleh lebih dari satu barus

 Contoh: 
Ignored Informations
• Browser mengabaikan (tidak menampilkan) beberapa informasi:
 Spasi lebih dari satu
 Akan dianggap sebagai satu spasi
 Contoh: “long, long ago” akan ditampilkan sebagai “long, long ago”
 Baris baru dan karakter tab
 Dikonversi menjadi spasi
 Tag yang tidak standard
 Contoh: <mahasiswa>
 Teks di dalam komentar
List
•Digunakan untuk menampilkan daftar teks (seperti bullets dan numbering
pada office)
• Ada 2 tipe:
 Ordered list (numbering)
 Unordered list (bullets)
• Tag yang digunakan:

 <ol> untuk ordered list
 <ul> untuk unordered list
• Setiap item pada list dituliskan menggunakan tag <li> (list item)
Unordered List
• Menampilkan daftar tanpa urutan (seperti • Pisang
bullets pada office)
• Tomat
• Contoh:
<!DOCTYPE html> • Apel
<html>
<head> • Rambutan
<tit
le>Contoh Unordered
List</title>
</head>
<body>
<ul>
<li>Pisang</li>
<li>Tomat</li>
<li>Apel</li>
<li>Rambutan</li>
</ul>
</body>
</html>
Unordered List
• Ada 3 tipe unordered list:
 Square
 Disc
 Circle
• Tipe tersebut didefinisikan pada atribut type
• Contoh:
 <ul type="square">
 <ul type="disc">
 <ul type="circle">
• Default: disc
Unordered List
<!DOCTYPE html>  Pisang
<html>  Tomat
<head>
<ti  Apel
tle>Contoh Unordered
List</title> </head>  Rambutan
<body>
<ul type="square“>
<li>Pisang</li>
<li>Tomat</li>
<li>Apel</li>
<li>Rambutan</li>
</ul>
</body>
</html>
Unordered List
<!DOCTYPE html> • Pisang
<html> •Tomat
<head>
<ti •Apel
List</title> </head> •Rambutan
<body>
<ul type=“disc“>
<li>Pisang</li>
<li>Tomat</li>
<li>Apel</li>
<li>Rambutan</li>
</ul>
</body>
</html>
Unordered List
<!DOCTYPE html> o Pisang
<html> o Tomat
<head>
<ti o Apel
List</title> </head> o Rambutan
<body>
<ul type=“circle“>
<li>Pisang</li>
<li>Tomat</li>
<li>Apel</li>
<li>Rambutan</li>
</ul>
</body>
</html>
Ordered List
• Menampilkan daftar dengan urutan 1. Pisang
(seperti numbering pada office)
2. Tomat
• Contoh:
<!DOCTYPE html> 3. Apel
<html>
<head> 4. Rambutan
<title>HTML
Unordered List</title>
</head>
<body>
<ol>
<li>Pisang</li>
<li>Tomat</li>
<li>Apel</li>
<li>Rambutan</li>
</ol>
</body>
</html>
Ordered List
• Ada 5 tipe ordered list:
 Default (1)
 Angka romawi kecil (I)
 Angka romawi kapital (i)
 Huruf kecil (a)
 Huruf kapital (A)
• Tipe tersebut didefinisikan pada atribut type
• Contoh:
 <ol type="1">
 <ol type="I">
 <ol type="i">
 <ol type="a">
<ol type="A">
Ordered List
<!DOCTYPE html> 1. Pisang
<html>
<head> 2. Semangka
<ti
tle>Contoh Ordered 3. Durian
List</title> </head>
<body> 4. Duku
<ol type=“1”>
<li>Pisang</li>
<li>Semangka</li>
<li>Durian</li>
<li>
Duku</li>
</ol>
</body>
</html>
Ordered List
<!DOCTYPE html> I. Pisang
<html>
<head> II. Semangka
<ti
tle>Contoh Ordered III. Durian
<body> IV. Duku
<ol type=“I”>
<li>Pisang</li>
<li>Semangka</li>
<li>Durian</li>
<li>
Duku</li>
</ol>
</body>
</html>
Ordered List
<!DOCTYPE html> i. Pisang
<html>
<head> ii. Semangka
<ti
tle>Contoh Ordered iii. Durian
<body> iv. Duku
<ol type=“i”>
<li>Pisang</li>
<li>Semangka</li>
<li>Durian</li>
<li>
Duku</li>
</ol>
</body>
</html>
Ordered List
<!DOCTYPE html> A. Pisang
<html>
<head> B. Semangka
<ti
tle>Contoh Ordered C. Durian
<body> D. Duku
<ol type=“A”>
<li>Pisang</li>
<li>Semangka</li>
<li>Durian</li>
<li>
Duku</li>
</ol>
</body>
</html>
Ordered List
<!DOCTYPE html> a. Pisang
<html>
<head> b. Semangka
<ti
tle>Contoh Ordered c. Durian
<body> d. Duku
<ol type=“a”>
<li>Pisang</li>
<li>Semangka</li>
<li>Durian</li>
<li>
Duku</li>
</ol>
</body>
</html>
Ordered List
• Untuk memulai urutan dari angka tertentu, gunakan atribut start
Ordered List
<!DOCTYPE html> 3. Pisang
<html>
<head> 4. Semangka
<ti
tle>Contoh Ordered 5. Durian
<body> 6. Duku
<ol type=“1” start=“3”>
<li>Pisang</li>
<li>Semangka</li>
<li>Durian</li>
<li>
Duku</li>
</ol>
</body>
</html>
Ordered List
<!DOCTYPE html> III. Pisang
<html>
<head> IV. Semangka
<ti
tle>Contoh Ordered V. Durian
<body> VI. Duku
<ol type=“I” start=“3”>
<li>Pisang</li>
<li>Semangka</li>
<li>Durian</li>
<li>
Duku</li>
</ol>
</body>
</html>
Ordered List
<!DOCTYPE html> iii. Pisang
<html>
<head> iv. Semangka
<ti
tle>Contoh Ordered v. Durian
<body> vi. Duku
<ol type=“i” start=“3”>
<li>Pisang</li>
<li>Semangka</li>
<li>Durian</li>
<li>
Duku</li>
</ol>
</body>
</html>
Ordered List
<!DOCTYPE html> C. Pisang
<html>
<head> D. Semangka
<ti
tle>Contoh Ordered E. Durian
<body> F. Duku
<ol type=“A” start=“3”>
<li>Pisang</li>
<li>Semangka</li>
<li>Durian</li>
<li>
Duku</li>
</ol>
</body>
</html>
Ordered List
<!DOCTYPE html> c. Pisang
<html>
<head> d. Semangka
<ti
tle>Contoh Ordered e. Durian
<body> f. Duku
<ol type=“a” start=“3”>
<li>Pisang</li>
<li>Semangka</li>
<li>Durian</li>
<li>
Duku</li>
</ol>
</body>
</html>
Thank you.

2 Teori Desain Web HTML

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

2 Teori Desain Web HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML

Pertemuan 1 Desain Web.

• Bahasa yang membentuk hypertext/halaman web

• Disusun atas tag-tag

•Pertama kali mengimplementasikan komunikasi

•Direktur World Wide Web Consortium (W3C,

• Organisasi standard web

• Dibentuk pada 1994

• Tujuan: mengembangkan teknologi web

• Ada tag pembuka dan ada tag penutup

• Ada tag yang tidak perlu tag penutup

• Tag tidak ditampilkan di browser

• Browser hanya merender (menampilkan) teks yang berada di antara tag

• Contoh: <div>This text is displayed on browser</div>

<p>Document content goes

<p>Document content goes

• Diletakkan di awal kode HTML

• Direkomendasikan menggunakan HTML versi 5

• Memberi informasi bahasa yang digunakan di halaman web

• Berisi informasi tentang dokumen HTML:

• Metadata adalah informasi tambahan yang mendeskripsikan halaman web

• Menggunakan atribut name dan content

• Maka halaman web akan direfresh 5 detik setelah ditampilkan

• Dapat juga digunakan untuk redirect ke halaman lain

•Maka halaman web akan diredirect ke website UB 5 detik setelah halaman

• Tag ini berstatus deprecated

• Untuk menampilkan teks sesuai dengan yang ditulis

• Karakter tab tidak dikonversi menjadi spasi

•Digunakan untuk membuat teks lebih

•Biasanya digunakan untuk menulis

•Digunakan untuk membuat teks lebih

•Biasanya digunakan untuk menulis

• Memiliki makna penekanan yang

•Digunakan untuk mengubah arah

• Link tujuan ditulis di atribut href

• Agar saat dibuka, link dibuka di tab baru, tambahkan atribut

• Untuk memberikan isi pesan, tambahkan “?body”

• Beberapa item tersebut dapat dikombinasikan

• Untuk mengatur ukuran gambar, gunakan atribut width dan height

• Untuk mengatur posisi gambar secara horizontal, gunakan atribut align

• Gambar dapat digunakan sebagai label dari sebuah link

• Sintaks:

• Contoh:

•Direkomendasikan untuk digunakan terutama pada kode HTML yang

• Sintaks yang tidak benar tidak akan dianggap sebagai komentar

• Komentar boleh lebih dari satu barus

• Tag yang digunakan:

• Tipe tersebut didefinisikan pada atribut type

• Tipe tersebut didefinisikan pada atribut type

Anda mungkin juga menyukai