HTML Dasar I

By Altech

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

HTML adalah…

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

Aturan Penulisan

Tes1.html

<html>

<body>

Ini badan HTML

</body>

</html>

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

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

HTML file (.html)

No Copas !!!

atau

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

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

Heading

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

<hr size=10 width="30%" align="center" color="pink">

<hr size=10 width="20%" align="center" color="silver">

<hr size=10 width="30%" align="center" color="pink">

<hr size=10 width="40%" align="center" color="red">

<hr size=10 width="50%" align="center" color="orange">

<hr size=10 width="60%" align="center" color="yellow">

</body>

</html>

Peraturan HTML!

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 limaRupa-rupa warnanyaHijau kuning kelabuMerah muda dan biru

HTML tidak mengenal ENTER

Solusinya

?

Coba! “

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

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

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

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

Format Teks dan Font

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 Tinggi tinggi sekali Kiri kanan kulihat saja Banyak pohon stroberi </body> </html>

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

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)

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

Siapkan gambar, tempatnya 1 folder ya dengan file HTML anda

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

Sudah di coba? Sudah lihat hasilnya? Coba edit ! <html> <head> <title>Gambar</title> </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>

<title>Gambar</title>

</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> <title>Gambar</title> </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>

<title>Gambar</title>

</head>

<body>

<img src=“../a/b/c/unikom.jpg”>

</body>

</html>

Silahkan disimpulkan

Sendiri

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

Eksplorasi

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-967-5363). Outside the U.S. call 201-WORLDNET (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

Education

Transcript of HTML Dasar I