Jamal's dokumen

1. ASSALAMUALAIKUM Wr. Wb
2. PERSENTASI TIK OLEH : JAMALUDDIN KELAS : XI IPA MAMUDA
3. CARA BELAJAR HTMLBELAJARMEMBUAT HTML PENGENALAN HTML
TAG DASAR HTMLHYPERLINK HTML FORMAT FONT
HTMLBECKGROUND HTML FORMAT TEKS HTML
4. Cara Belajar Membuat HTML Dasar HTML adalah singkatan dari
HypertextMarkup Languange yang umumnyamerupakan bahasa yang digunakan
untukmenampilkan website pada browser. DefinisiHTML adalah suatu bahasa standar
yangdigunakan untuk membuat dokumen HTML.HTML terdiri dari kode-kode
tertentu yangakan memerintahkan web browser untukmenampilkan informasi yang
dapat berupateks, gambar, video dan lainnya.
5. Untuk mengawali belajar HTML, banyak orangyang bingung bagaimana belajar
HTML dari dasar.Cara belajar untuk membuat HTML sebenarnyacukup gampang,
anda hanya memerlukan duabuah software (program), kedua program iniumumnya
sudah ada pada setiap komputer. Duaprogram yang anda perlukan untuk belajar
HTMLadalah editor HTML dan web browser. Contoheditor HTML adalah Ms

Frontpage, MacromediaDreamweaver atau yang paling gampangNotepad. Untuk
browser contohnya InternetExplorer atau Mozilla Firefox, salah satunyabiasanya
sudah tersedia di komputer anda.
6. Jadi cara untuk belajar HTML dari dasar kita tidak perlu menginstall software apa-
apa lagi. Berikut ini langkah- langkah untuk belajar membuat HTML sebagai
percobaan :1. Buka aplikasi Notepad2. Ketikkan kode HTML yang ada dibawah ini
(sebaiknya jangan copy paste) <html> <head> <title>Judul Website</title> </head>
<body> Saya tahu cara belajar membuat dokumen HTML dari dasar. </body>
</html>
7. 3. Setelah selesai kemudian simpan dengan nama “latihan.html” (isikan tanda petik
di awal dan akhir agar file yang tersimpan benar-benar file html, jika tidak file anda
tetap berekstensi „txt‟)4. Tutup Notepad, lalu buka file HTML yang anda buat tadi
dengan mengklik dua kali (klik ganda) file tersebut.5. Secara otomatis file HTML
yang anda buat akan dibuka dengan browser, misalnya Firefox atau Internet Explorer.
8. Belajar HTML Untuk belajar anda dapat menggunakan programHTML seperti Ms
FrontPage, Dreamweaver atau Text Editor(Notepad), sesuai dengan selera anda
masing-masing.Namun untuk tutorial ini akan diajarkan denganmenggunakan teks
editor yang simpel yaitu Notepad, jikaanda ingin teks editor yang lebih interaktif anda
bisamenggunakan Notepad++. Dalam belajar sebaiknya anda langsung praktek
diprogram HTML anda, sehingga akan lebih mudah untukdipahami, anda ketik atau
copy/paste contoh-contohHTML-nya di program HTML anda dan preview di
browseruntuk melihat hasilnya.
9. Pengenalan HTMLPengertian singkat tentang HTML HTML (Hyper Text Markup
Language) merupakan bahasa standar untuk membuat suatu dokumen HTML
(halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-
kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan
halaman Web yang terdiri dari berbagai macam format file seperti teks, grafik,
animasi, link maupun audio-video. Sedangkan Web browser adalah sebuah progam
yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga
dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Explorer,
Netscape Navigator, Mozilla Firefox, Opera, Safari dll. HTML mempunyai file
perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama,
jadi anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau
".html".
10. Untuk mulai belajar HTML kita akanmenggunakan Texs Editor, Notepad. Di
bawah iniadalah contoh suatu dokumen HTML yang sangatsederhana. Buka Notepad,
silahkan mulai denganmengetikkan (copy/paste) kode di bawah
ini:<html><head><title>Titel Websiteku</title></head><body>Ini adalah dokumen
HTML pertamaku</body></html>
11. Preview Simpan file tersebut ke C:My Documents dengan nama "websiteku.htm."
Ketika menyimpan file tersebut dengan Notepad ganti "save as type"-nya dengan "all
files". Kemudian buka browser, dari menu File klik Open dan tujukan ke C:My
Documentswebsiteku.htm "klik Ok" maka halaman website pertama anda akan
ditampilkan. *Lakukan hal yang sama untuk contoh-contoh selanjutnya. Perintah
didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti tag, elemen,
atribut dan nilai. Tag terdiri dari lambang-lambang khusus seperti: " <", " >" dan "/",
untuk menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka "
<…>"dan diakhiri dengan tag penutup " </…>". Kemudian di dalam tag tersebut
terdapat teks seperti contoh diatas :html, head, title,body dan yang lainnya ini disebut
dengan Elemen HTML.

12. Elemen HTML kemudian ada yang memilikiatribut dan nilai tertentu, seperti
contoh untukmembuat warna latar belakang (background):<body bgcolor="0000ff">,
body merupakanelemen, bgcolor adalah atribut dan 0000ffmerupakan nilai (value).
Elemen HTML mempunyai tiga hal pentingyaitu: tag pembuka, isi, dan tag penutup.
Sebagaicontoh: Elemen html mempunyai tag pembuka "<html>" dan tag penutup "
</html>" dan yangberada diantaranya merupakan isi atau kontendari elemen html
tersebut. Untuk menuliskanElemen HTML bisa menggunakan huruf besarmaupun
huruf kecil. Contoh: <HTML>, <HtMl>,<HTml>, <html>, semuanya adalah sama.
13. Tag Dasar HTML Komponen dasar dari suatu dokumen HTML terdiridari tag
elemen HTML, HEAD dan BODY. Berikut iniadalah penjelasan dari Tag Elemen
tersebut:<html><head><title>Disini titel websiteku</title></head><body>Disini
adalah konten yang tampil di browser</body></html>
14. • Preview Tag pertama pada dokumen HTML diatas adalah: " <html>" tag ini
merupakan awal dari suatu dokumen HTML, dan tag " </html>" merupakan akhir dari
dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara
tag <html>…</html>. Kemudian tag " <head>…</head>" (header) adalah informasi
dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll.
Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web
browser.
15. Tag berikutnya adalah " <title>…</title>"merupakan bagian dari Head, tag ini
adalahsebagai Titel dari dokumen HTML, titel iniakan tampil di titel dan tab browser.
Sebagaicontoh sewaktu anda membuka file contohdiatas perhatikan akan muncul
tulisan "Disinititel websiteku".
16. Tag "<body>…</body>" merupakan isi darisuatu dokumen HTML yang akan
ditampilkandi web browser, yang terdiri dari berbagaimacam format file berupa teks,
grafik, link,animasi maupun audio-video (multimedia).
17. Format Font HTML Tag HTML untuk font adalah<font>…</font>, dengan tag ini
kita bisamenentukan jenis font (face), warna(color), dan ukuran (size), untuk lebih
jelasnyamari kita perhatikan contoh berikut ini:
18. <html><head></head><body>Untuk membuat jenis font (face):<h1><font
face="Verdana">Judul dengan font Verdana</font></h1><p><font
face="Times">Konten dengan font Times</font></p>Untuk membuat ukuran
(size):<h1><font size="5">Judul dengan size 5</font></h1><p><font
size="3">Konten dengan size 3</font></p>Untuk membuat warna font
(color):<h1><font color="blue">Judul dengan warna biru</font></h1><p><font
color="red">Konten dengan warna merah</font></p>Contoh komplit untuk membuat
jenis font (face),size dan color:<h1><font face="Verdana" size="4"
color="green">Judulnya TentangFont</font></h1><p><font face="Arial" size="3"
color="#660000">Ini adalah contoh tulisandengan <i>pengaturan font</i> yang
menggunakan<br>tag HTML elemen<b>font</b> dengan atribut face, size dan
color...</font></p></body></html>
19. Preview Berikut adalah sebagai referensi bagi anda untuk memanipulasi atribut
face, color dan size: Atribut face="Jenis font yang digunakan", contoh:
face="Tahoma" size="Ukuran dari font (1-7)", contoh: size="3" size="Memperbesar
ukuran font", contoh: size="+1" size="Memperkecil ukuran font", contoh: size="-1"
color="Warna dari font", contoh: color="blue" color="Warna dari font", contoh:
color="#FF0000"
20. Sesuai dengan recomendasi dari WorldWeb Consortium (W3C), Untuk HTML
4.0keatas, tag <font> tidak dipergunakan lagi,sebagai gantinya dibuat tag <style>
ataudisebut dengan Cassading Style Sheets (CSS).Dengan CSS penggunaannya akan

lebihkompleks dan lebih luas lagi karena dapatdikombinasikan dengan tag elemen-
elemenlainnya di dalam dokumen HTML. Berikutadalah contoh penggunaan tag style
sheets:
21. <html><head></head><body>Untuk membuat jenis font (face):<h1 style="font-
family:verdana">Judul Menggunakan font verdana</h1><p style="font-
family:tahoma">Konten menggunakan font tahoma</p>Untuk membuat ukuran
(size):<h1 style="font-size:150%">Judul dengan ukuran 150%</h1><p style="font-
size:80%">Konten dengan ukuran 80%</p>Untuk membuat warna font (color):<h1
style="color:blue">Judul dengan warna Biru</h1><p style="color:red">Konten
dengan warna merah</p>Contoh komplit untuk membuat jenis font (face),size dan
color:<p style="font-family:verdana;font-size:80%;color:green">Ini adalahcontoh
tulisan pengaturan font dengan <i>Cassading Style Sheets</i>(CSS)
yang<br>menggunakan tag HTML elemen <b>style:</b> font-family, font-size dan
color...</p></body></html>
22. Format text HTML Untuk menulis biasanya ada paragraf dan baris baru,
lantasbagaiman cara menuliskannya di dokumen HTML?. Dari contohyang sudah kita
buat sebelumnya, coba tambahkan dengan tag-tagberikut
ini:<html><head><title>Selamat Datang di Websiteku</title></head><body>Ini
adalah halaman HTML pertamaku.<p>Aku sedang membuat paragraf dan ini
contohnya.</p><p>Ini contoh paragraf yang lainnya.</p><p>Ini juga paragraf
mm...tapi de-<br>ngan baris baru.<br>Ini barisbaru yang lain.</p></body></html>
23. Preview Untuk membuat suatu paragraf, tag elemennya adalah <p>…</p>, dan
untuk baris baru adalah <br>, perlu diketahui bahwa sebagian tag elemen HTML
tidak memerlukan tag penutup, sebagai contoh adalah <br> ada juga <hr>, apa itu
<hr>?, coba lanjutkan lagi dengan contoh berikut ini: <html> <head> <title>Selamat
Datang di Websiteku</title> </head> <body> <hr> <h1>Ini adalah halaman HTML
pertamaku.</h1> Dikerjakan oleh:  <hr>
<p>Aku sedang membuat paragraf dan ini contohnya.</p> <p>Ini contoh paragraf
yang lainnya.</p> <p>Ini juga paragraf mm...tapi de-<br>ngan baris baru.<br>Ini
baris baru yang lain.</p> </body> </html>
24. Preview Nah..udah tau kan apa itu <hr>. Garis Horizontal <hr> juga tidak
menggunakan tag penutup. Selanjutnya tag <h1>…</h1> disebut dengan Heading,
merupakan ukuran teks yang biasa di pakai untuk judul, bab, maupun sub-bab
lainnya. Ukurannya ada 6 jenis mulai dari <h1> sampai <h6>, ukuran yang paling
besar adalah h1 dan yang terkecil adalah h6. Selanjutnya tag  adalah
Comments digunakan untuk memasukkan (menyisipkan) suatu komentar di dalam
HTML. Suatu comments akan diabaikan oleh browser. Kamu dapat menggunakan
komentar untuk menjelaskan sesuatu hal.
25. Dibawah ini adalah contoh format teks yang seringdigunakan di dalam dokumen
HTML :<html><head></head><body><hr><h1>Ini adalah halaman HTML
pertamaku.</h1>Dikerjakan oleh: <!-- Tolong isikan dengan nama anda --
><hr><p>Aku sedang mempelajari format-formatteks.<br>Contoh-contohnya adalah
sebagai berikut:</p><p>Teks Normal<br><tt>Teks mesin ketik</tt><br><b>Teks
tebal (bold)</b><br>
26. <strong>Teks tebal dengan perintah Strong</strong><br><i>Teks dengan italic
(miring)</i><br><em>Teks miring dengan perintah Emphasized</em><br><u>Teks
bergaris bawah (underline)</u><br><strike>Teks tercoret
(strike)</strike><br><big>Teks lebih besar dari normal</big><br><small>Teks lebih
kecil dari normal</small><br>Teks menggunakan Subscript: Molekul Air adalah

H<sub>2</sub>O<br>Teks menggunakan Superscript: Hasil dari
10<sup>2</sup>=100<br></p></body></html>
27. Preview Kemudian untuk menampilkan teks sesuai dengan yang tertulis kita
gunakan tag <pre>…</pre>, misalnya jika anda menuliskan syair sebuah lagu atau
puisi: <html> <body> <pre> <b>PUITUIS ASA</b> Hari ini... Aku sedang belajar...
Belajar tentang HTML. Sulit ntuk dimengerti, Karena banyaknya teks-teks aneh. Tapi
biarlah... Akan kucoba... Sampai pingsan. </pre> </body> </html>
28. Hyperlink HTML Hyperlink digunakan untuk menghubungkan antardokumen di
dalam web. Tag HTML Hyperlink biasa disebutdengan anchor (a) kemudian diikuti
dengan href sebagaialamat tujuan dari link tersebut. Berikut kita akan membuatsuatu
Hyperlink ke suatu alamat url:<html><head></head><body><p>Aku sekarang
sedang membuat hyperlink</p>Jika anda ingin mengunjungi Microsoft<a
href="http://www.microsoft.com/">Klik disini</a><br>
29. <a href="http://www.yahoo.com/">Link ini</a>akan membawa anda ke
Yahoo.com<p>Untuk membuat hyperlink url agar dibukapada jendela browser yang
baru:<p><a href="http://www.mp3.com/"target="_blank">Website
Musik</a><p>Agar hyperlink tidak bergaris bawah:<p><a
href="http://www.mp3.com/"target="_blank"style="text-decoration:
none">WebsiteMusik</a><p>Hyperlink ke suatu halaman tertentu dalamweb:<p>
30. <a
href="http://htmlcssguides.com/belajar-css/">Link ini</a> akan membawa anda
kehalaman belajar css.</body></html>
31. Background HTML Dengan menggunakan latar belakang (background)maka
website kita akan nampak semakin menarik. Untukmemasukkan latar belakang kita
bisa menggunakan pilihanwarna maupun grafik (gambar).Sekarang kita mulai dengan
menggunakan pilihan warna:<html><head></head><body
bgcolor="#FF99FF"><p>Hai.. Saat ini saya sedang belajar membuat latarbelakang
dengan warna</p><p>Kalau anda kurang suka dengan warnanya... ganti ajadeh...
kode warnanya... </p></body></html>
32. WASSALAMUALAIKUM Wr. Wb
Blog : http://jamaluddincs.blogspot.com
Slideshare : http://www.slideshare.net/jamaluddinshare
Twit : @jamalalhalili
Fb : jamal doanc

Jamal's dokumen

Recommended

Recommended

More Related Content

What's hot

What's hot (15)

Similar to Jamal's dokumen

Similar to Jamal's dokumen (20)

More from http://www.facebook.com/SeikatKasihDanSayang

More from http://www.facebook.com/SeikatKasihDanSayang (20)

Recently uploaded

Recently uploaded (20)

Jamal's dokumen