HTML Dasar I

HTML adalah…

Bahasa yang digunakan untuk membuat dokumen
hypertext yang bebas platform
Atau bisa kita imajinasikan, HTML adalah
“kerangka/tengkorak” sebuah sistem/aplikasi
File HTML memiliki
ekstensi .html. Dan
dijalankan dengan browser

Aturan Penulisan

Ada karakter khusus dalam HTML yang disebut tag
Tag tersebut ada tag buka (<>) dan tag tutup (</>)
HTML hanya akan membaca data dari tag <html>
sampai tag </html> saja
Dan isi dari data HTML hanya boleh di tempatkan di
tag <body> sampai tag </body> saja


Tes1.html

Tes2.html

<html>
<body>
Ini badan HTML
</body>
</html>

<html>
<body>
Ini badan HTML
</body>
Di luar badan HTML
</html>
Diluar HTML

Coba!
“


Save as : coba1.html, tulis di notepad

<html>
<head>
<title>Judul HTML, suka tampil di tab
browser</title>
</head>
<body>
Badan HTML, disinilah tag-tag HTML dituliskan. By the way, tag head di
atas itu apa? Itu kepalanya HTML. Apa fungsinya? Nanti dia menghasilkan
apa? Biasanya disana tempat untuk Javasript dan CSS (monggo di googling
kalo kepo). Terus tag title didalam tag head itu apa? Itu untuk memberi judul
apa sih isi dari HTML kita. Mau pakai tag head dan title atau tidak, tidak
masalah
</body>
</html>

No Copas !!!

Ketik sendiri
Dan rasakan sensasinya
Tahukah kalian, salah satu cara mengingat sesuatu itu adalah dengan melihat dan
mencoba/menyentuh sesuatu. Dengan kita mengetik contoh-contoh HTML, otak
kita sedang menyimpan apa saja tag HTML yang kita ketik. InsyaAllah akan lebih
lama ingat dibandingkan cuma sekedar melihat tapi tidak mencobanya.
Jangan lupa! Save as
atau
HTML file (.html)



Silahkan eksplorasi
Ganti kata-katanya, coba
Tulis kalimat di luar tag
html, head ,body
Bagaimana hasilnya?

Heading

Heading
Nilainya dari 1 sampa 6. Digunakan untuk judul HTML
(bedakan dengan title. Heading ada di dalam browser,
title ada di tab browser)
Garis Horizontal
Digunakan untuk membuat garis horizontal. Tag yang
satu ini tidak punya tag penutup

Coba!
“



<html>
<head>
<title>Heading dan garis</title>
</head>
<body>
<h1>Gila! Gede banget</h1>
<h2>Wuih! Gedeeee!</h2>
<h3>Wow. Gede.</h3>
<h4>Ya standarlah ukurannya!</h4>
<h5>Hmm, kecil juga yah</h5>
<h6>Ih kecilnya cimit cimit! ><
</h6>
 
<hr size=10 width="60%"
align="center" color="yellow">
<hr size=10 width="50%"
align="center" color="orange">

<hr size=10 width="40%" align="center"
color="red">
color="pink">
color="silver">
color="pink">
color="red">
color="orange">
color="yellow">
</body>
</html>

Peraturan HTML!

HTML tidak mengenal ENTER

Saat kita menulis :
<html>
<head>
<title>Judul HTML, suka
tampil di tab
browser</title>
</head>
<body>
Balonku ada lima
Rupa-rupa warnanya
Hijau kuning kelabu
Merah muda dan biru
</body>
</html>

Yang akan tampil di
browser :
Balonku ada limaRuparupa warnanyaHijau
kuning kelabuMerah
muda dan biru



Coba!
“
1.
<html>
<head>
tampil di tab
browser</title>
</head>
<body>
Balonku ada lima
 Rupa-rupa warnanya
 Hijau kuning kelabu
 Merah muda dan biru
</body>
</html>



2.
<html>
<head>
<title>Judul HTML, suka tampil
di tab
browser</title>
</head>
<body>
<pre>
Balonku ada lima
Rupa-rupa warnanya
Hijau kuning kelabu
Merah muda dan biru
</pre>
</body>
</html>

Coba!
“
3.
<html>
<head>
tampil di tab
browser</title>
</head>
<body>
Balonku ada lima
Rupa-rupa warnanya
Hijau kuning kelabu
Merah muda dan biru
</body>
</html>


Lihat hasilnya. Apa
perbedaan dari setiap
hasilnya. Apa bedanya
tag-tag itu ya?



1. 
Tag “enter” yang sederhana. Hanya bisa men”enter” satu baris
kalimat saja. Kalau kita ingin 100 kali “enter”, maka tulis 
100 kali
2. <pre></pre>
Tag yang mengikuti apa yang kita ketik. Bahkan, kalau kita ingin
meng”enter” 100 kali, cukup lakukan “enter biasa”. Maka secara
otomatis <pre> akan mengikutinya
3. 
Sebenarnya itu bukan untuk meng“enter”, tapi untuk membuat
garis baru sebuah paragraf/memisahkan antar paragraf. Bukankah
membuat paragraf baru berarti harus di enter juga kan? Tidak
masalah pakai tag ini, tapi jarak antar barisnya cukup besar

Format Teks dan Font

Tag Format Teks
Untuk memodifikasi bentuk teks
Pada umumnya ada bold, italic, underline, strike,
supperscript, dan
subscript

Tag Font
Untuk mengubah gaya, warna, ukuran tulisan

Coba!
“



<html>
<head>
<title>Heading dan garis</title>
</head>
<body>
BOLD  
ITALIC  
UNDERLINE  
<s>STRIKECROSS</s>  
<big>BIG</big>  
SMALL  
STRONG
 
<blink>BLINK</blink>  
SUBSCRIPT  
SUPPERSCRIPT
 

 
Naik
Naik ke puncak
gunung 
color="fuchsia"> Tinggi tinggi
sekali 
color="teal"> Kiri kanan kulihat
saja 
color="silver"> Banyak 
pohon stroberi 
</body>
</html>

Warna teks, ada 2 macam
1. Pakai nama warnanya
Contoh orange, blue, maroon, cyan
2. Pakai kode warna
Contoh #FFFFFF (putih), #000000 (hitam)
#993399 (ungu gelap)

<tont tace=“calibri” size=“7” color=“orange”> Jeruk makan jeruk 

Catatan :
Dianjurkan pakai kode warna
karna warnanya lebih kaya. Kalau
pakai nama warna, emang warna
hijau sedikit biru apa namanya hayo?
green little blue?
 ?

Untuk mendapatkan kode warna
bisa dilihat di colorpicker
Photoshop

<img>

Untuk memasukan gambar
Coba ini !
<html>
<head>
<title>Gambar</title>
</head>
<body>
<img src=“unikom.jpg”>
</body>
</html>

Siapkan gambar,
tempatnya 1 folder ya
dengan file HTML anda

Sudah di coba?
Sudah lihat hasilnya?
Coba edit !
<html>
<head>
</head>
<body>
<img src=“unikom.jpg”
width=“100”
height=“100”>
</body>
</html>

Bagaimana?

Silahkan simpulkan
sendiri bagaimana
menurut anda.
Sekarang tempatkan
gambar di luar folder

CTRL+X

CTRL+V

Coba!
“



<html>
<head>
</head>
<body>
<img
src=“../unikom.jpg”>
</body>
</html>

Sudah di coba?
Sekarang buat folder a, simpan
gambar di folder a. Coba edit
seperti ini
<html>
<head>
</head>
<body>
<img
src=“../a/unikom.jpg”>
</body>
</html>


Didalam folder a, buat folder
b. Didalam folder b, buat
folder c. Coba edit seperti ini
<html>
<head>
</head>
<body>
<img
src=“../a/b/c/unikom.jpg”>
</body>
</html>

Silahkan disimpulkan
Sendiri 

Eksplorasi


Tag HTML itu ada banyak sekali
jadi tidak mungkin dijelaskan satu persatu
sisanya anda yang mengeksplorasi
coba tulis script HTML dibawah ini dan lihat
hasilnya
ubah beberapa script HTMLnya
can simpulkan bagaimana menurut anda

1.
<html>
<head>
<title> AT&T WorldNet
Service</title>
</head>
<body bgcolor=“gray”>

Still have
question? In the United States,
Call 1-800-WORLDNET (1-800-9675363). Outside the U.S. call 201WORLDNET (201-967-5363)




* Today card
member may be liable for the first $50

of change as the card member notifies
AT&T Universal Card of the loss
with in 24 hours and otherwise of
card member or authorized
user



Copyright © 1996
AT&T. All right reserved.
AT&T WorldNet is a service mark
of AT&T


</body>
</html>

2.
<html>
<head>
<title> AT&T WorldNet
Service</title>
</head>
<body bgcolor=“#663366”>


Internet for everybody




Discover new ways to
stay in touch with the people, ideas,
and information that are imortant for
you. Make travel reservation anytime

Day or night. Find out mutual fund are
hot and which ones are not. Play games.
Do research. Stay on top of current
evants. Converse in our newsgroup, or
keep in touch with e-mail. Armed with
AT&T WorldNet member
directory, meeting new people and
finding old friend is easy. Click <a
href=“#signup”>here</a> to learn how
to join the AT&T WorldNet
community

</body>
</html>

3.
<html>
<head>
<title> Karakter Khusus </title>
</head>
<body bgcolor=“#3399cc”>
<h1>Karakter Khusus</h1>
<hr size=“5” width=“90%”>
align=“center”>
<pre>
< > & ö ñ
è " ¢ £
¥
© & reg; ° ¼
½
¾ ×
</pre>
<hr size=“5” width=“90%”>

Referensi
Contoh-contoh latihan, dan tutorial dapat anda dapatkan
Lebih banyak lagi di internet.
Tutorial bahasa inggris lebih banyak dan lebih lengkap
Anda bisa coba sambil melatih kemampuan bahasa inggris anda

Ilmukomputer.org
Youtube.com (codeschool & jream)
Slideshare.com

Bisa karena terbiasa
Terbiasa karena mau mencoba
orang rajin tak berbakat

akan mengalahkan

orang cerdas yang tak serius

HTML Dasar I

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (17)

Similaire à HTML Dasar I

Similaire à HTML Dasar I (20)

Dernier

Dernier (20)

HTML Dasar I