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

http://jamaluddincs.blogspot.com/

jamal's dokumen

Education