0
By Altech
HTML adalah…

Bahasa yang digunakan untuk membuat dokumen
hypertext yang bebas platform
Atau bisa kita imajinasikan, HTML...
Aturan Penulisan

Ada karakter khusus dalam HTML yang disebut tag
Tag tersebut ada tag buka (<>) dan tag tutup (</>)
HTML...

Tes1.html

Tes2.html

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

<html>
<body>
Ini badan HTML
</body>
Di luar badan H...
Coba!
“


Save as : coba1.html, tulis di notepad

<html>
<head>
<title>Judul HTML, suka tampil di tab
browser</title>
</h...
No Copas !!!

Ketik sendiri
Dan rasakan sensasinya
Tahukah kalian, salah satu cara mengingat sesuatu itu adalah dengan me...


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,...
Coba!
“



<html>
<head>
<title>Heading dan garis</title>
</head>
<body>
<h1>Gila! Gede banget</h1>
<h2>Wuih! Gedeeee!</h...
Peraturan HTML!

HTML tidak mengenal ENTER

Saat kita menulis :
<html>
<head>
<title>Judul HTML, suka
tampil di tab
brows...


Solusinya
?
Coba!
“
1.
<html>
<head>
<title>Judul HTML, suka
tampil di tab
browser</title>
</head>
<body>
Balonku ada lima
<br/>Rupa-r...
Coba!
“
3.
<html>
<head>
<title>Judul HTML, suka
tampil di tab
browser</title>
</head>
<body>
Balonku ada lima
<p/>Rupa-ru...


1. <br/>
Tag “enter” yang sederhana. Hanya bisa men”enter” satu baris
kalimat saja. Kalau kita ingin 100 kali “enter”, ...
Format Teks dan Font

Tag Format Teks
Untuk memodifikasi bentuk teks
Pada umumnya ada bold, italic, underline, strike,
su...
Coba!
“



<html>
<head>
<title>Heading dan garis</title>
</head>
<body>
<b>BOLD</b> &nbsp;
<i>ITALIC</i> &nbsp;
<u>UNDER...
Warna teks, ada 2 macam
1. Pakai nama warnanya
Contoh orange, blue, maroon, cyan
2. Pakai kode warna
Contoh #FFFFFF (putih...
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>...
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?
S...

Didalam folder a, buat folder
b. Didalam folder b, buat
folder c. Coba edit seperti ini
<html>
<head>
<title>Gambar</tit...
Eksplorasi


Tag HTML itu ada banyak sekali
jadi tidak mungkin dijelaskan satu persatu
sisanya anda yang mengeksplorasi
c...
1.
<html>
<head>
<title> AT&amp;T WorldNet
Service</title>
</head>
<body bgcolor=“gray”>
<p>
<font face=“Arial”><b>Still h...
2.
<html>
<head>
<title> AT&amp;T WorldNet
Service</title>
</head>
<body bgcolor=“#663366”>
<p align=“right”>
<font size=“...
3.
<html>
<head>
<title> Karakter Khusus </title>
</head>
<body bgcolor=“#3399cc”>
<h1>Karakter Khusus</h1>
<hr size=“5” w...
Referensi
Contoh-contoh latihan, dan tutorial dapat anda dapatkan
Lebih banyak lagi di internet.
Tutorial bahasa inggris l...
Bisa karena terbiasa
Terbiasa karena mau mencoba
orang rajin tak berbakat

akan mengalahkan

orang cerdas yang tak serius
Upcoming SlideShare
Loading in...5
×

HTML Dasar I

161

Published on

Learn basic HTML I with Indonesian
- heading and horizontal line
- paragraph, "enter" function, and pre
- font and format text
- and add an image

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
161
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML Dasar I"

  1. 1. By Altech
  2. 2. 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
  3. 3. 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
  4. 4.  Tes1.html Tes2.html <html> <body> Ini badan HTML </body> </html> <html> <body> Ini badan HTML </body> Di luar badan HTML </html> Diluar HTML
  5. 5. 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>
  6. 6. 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)
  7. 7.  Silahkan eksplorasi Ganti kata-katanya, coba Tulis kalimat di luar tag html, head ,body Bagaimana hasilnya?
  8. 8. 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
  9. 9. 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> <br/></br> <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>
  10. 10. 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 
  11. 11.  Solusinya ?
  12. 12. Coba! “ 1. <html> <head> <title>Judul HTML, suka tampil di tab browser</title> </head> <body> Balonku ada lima <br/>Rupa-rupa warnanya <br/>Hijau kuning kelabu <br/>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>
  13. 13. Coba! “ 3. <html> <head> <title>Judul HTML, suka tampil di tab browser</title> </head> <body> Balonku ada lima <p/>Rupa-rupa warnanya <p/>Hijau kuning kelabu <p/>Merah muda dan biru </body> </html>  Lihat hasilnya. Apa perbedaan dari setiap hasilnya. Apa bedanya tag-tag itu ya?
  14. 14.  1. <br/> Tag “enter” yang sederhana. Hanya bisa men”enter” satu baris kalimat saja. Kalau kita ingin 100 kali “enter”, maka tulis </br> 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. <p></p> 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
  15. 15. 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
  16. 16. Coba! “  <html> <head> <title>Heading dan garis</title> </head> <body> <b>BOLD</b> &nbsp; <i>ITALIC</i> &nbsp; <u>UNDERLINE</u> &nbsp; <s>STRIKECROSS</s> &nbsp; <big>BIG</big> &nbsp; <small>SMALL</small> &nbsp; <strong>STRONG</strong> &nbsp; <blink>BLINK</blink> &nbsp; <sub>SUBSCRIPT</sub> &nbsp; <sup>SUPPERSCRIPT</sup> &nbsp; <br/> <font face="papyrus" color="aqua"> <sup>Naik</sup> <sup>Naik</sup> ke puncak gunung </font> <br/> <font face="papyrus" color="fuchsia"> Tinggi tinggi sekali </font> <br/> <font face="papyrus" color="teal"> Kiri kanan kulihat saja </font> <br/> <font face="papyrus" color="silver"> Banyak <sub> pohon stroberi </sub> </font> </body> </html>
  17. 17. 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 </font> Catatan : Dianjurkan pakai kode warna karna warnanya lebih kaya. Kalau pakai nama warna, emang warna hijau sedikit biru apa namanya hayo? green little blue? <font color=“green little blue”> ?
  18. 18. Untuk mendapatkan kode warna bisa dilihat di colorpicker Photoshop
  19. 19. <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> <title>Gambar</title> </head> <body> <img src=“unikom.jpg” width=“100” height=“100”> </body> </html>
  20. 20. Bagaimana?  Silahkan simpulkan sendiri bagaimana menurut anda. Sekarang tempatkan gambar di luar folder CTRL+X CTRL+V
  21. 21. 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>
  22. 22.  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 
  23. 23. 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
  24. 24. 1. <html> <head> <title> AT&amp;T WorldNet Service</title> </head> <body bgcolor=“gray”> <p> <font face=“Arial”><b>Still have question?</b> In the United States, Call 1-800-WORLDNET (1-800-9675363). Outside the U.S. call 201WORLDNET (201-967-5363)</font> </br> </p> <p align=“left”> <font size=“1”> <sup>*</sup> Today card member may be liable for the first $50 of change as the card member notifies AT&amp;T Universal Card of the loss with in 24 hours and otherwise of <i>card member</i> or <i>authorized user</i> </font> </p> <p align=“left”> <font size=“1”> Copyright &copy; 1996 AT&amp;T. All right reserved. AT&amp;T WorldNet is a service mark of AT&amp;T </font> </p> </body> </html>
  25. 25. 2. <html> <head> <title> AT&amp;T WorldNet Service</title> </head> <body bgcolor=“#663366”> <p align=“right”> <font size=“8” color=“red” face=“Times Roman”> Internet for everybody </font> </br> </p> <p align=“left”> <font face=“arial”> <b>Discover new ways</b> 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&amp;T WorldNet member directory, meeting new people and finding old friend is easy.<br/> Click <a href=“#signup”>here</a> to learn how to join the AT&amp;T WorldNet community</font> </p> </body> </html>
  26. 26. 3. <html> <head> <title> Karakter Khusus </title> </head> <body bgcolor=“#3399cc”> <h1>Karakter Khusus</h1> <hr size=“5” width=“90%”> align=“center”> <pre> &lt; &gt; &amp; &ouml; &ntilde; &egrave; &quot; &cent; &pound; &yen; &copy; & reg; &deg; &frac14; &frac12; &frac34; &times; </pre> <hr size=“5” width=“90%”>
  27. 27. 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
  28. 28. Bisa karena terbiasa Terbiasa karena mau mencoba orang rajin tak berbakat akan mengalahkan orang cerdas yang tak serius
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×