Post on 02-Jul-2015
ASSALAMUALAIKUM
Wr. Wb
PERSENTASI TIK
OLEH :
DESMA SUSANTI
KELAS : XI IPA 4
BELAJAR HTML
TAG DASAR HTML
FORMAT TEKS HTML
FORMAT FONT HTML
PENGENALAN HTML
HYPERLINK
HTML
BECKGROUND
HTML
CARA
BELAJAR
MEMBUAT
HTML
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.
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.
Jadi cara untuk belajar HTML dari dasar kita tidak perlumenginstall 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 daridasar.</body></html>
3. Setelah selesai kemudian simpan dengannama “latihan.html” (isikan tanda petik diawal dan akhir agar file yang tersimpanbenar-benar file html, jika tidak file andatetap berekstensi ‘txt’)
4. Tutup Notepad, lalu buka file HTML yanganda buat tadi dengan mengklik dua kali (klikganda) file tersebut.
5. Secara otomatis file HTML yang anda buatakan dibuka dengan browser, misalnyaFirefox atau Internet Explorer.
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.
Pengenalan HTML
Pengertian singkat tentang HTMLHTML (Hyper Text Markup Language) merupakan bahasa
standar untuk membuat suatu dokumen HTML (halaman web) yangterdiri dari kode-kode singkat tertentu, dimana dengan kode-kodetersebut akan memerintahkan Web browser bagaimana untukmenampilkan halaman Web yang terdiri dari berbagai macamformat file seperti teks, grafik, animasi, link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapatmenterjemahkan kode perintah dari dokumen HTML tersebutsehingga dapat kita lihat, baca dan dengar. Contoh dari WebBrowser adalah Internet Explorer, Netscape Navigator, MozillaFirefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html.Dimana kedua perluasan tersebut adalah sama, jadi anda bolehmenyimpan file dokumen HTML dengan extention ".htm" atau".html".
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>
PreviewSimpan file tersebut ke C:\My Documents dengan
nama "websiteku.htm." Ketika menyimpan file tersebutdengan Notepad ganti "save as type"-nya dengan "all files".Kemudian buka browser, dari menu File klik Open dantujukan ke C:\My Documents\websiteku.htm "klik Ok"maka halaman website pertama anda akan ditampilkan.*Lakukan hal yang sama untuk contoh-contoh selanjutnya.
Perintah didalam dokumen HTML terdiri dari berbagaistruktur penyusun seperti tag, elemen, atribut dan nilai.Tag terdiri dari lambang-lambang khusus seperti: " <", " >"dan "/", untuk menuliskannya di dalam dokumen HTMLdimulai dengan tag pembuka " <…>"dan diakhiri dengan tagpenutup " </…>". Kemudian di dalam tag tersebut terdapatteks seperti contoh diatas :html, head, title,body dan yanglainnya ini disebut dengan Elemen HTML.
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.
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>
• Preview
Tag pertama pada dokumen HTML diatasadalah: " <html>" tag ini merupakan awal darisuatu dokumen HTML, dan tag " </html>"merupakan akhir dari dokumen HTML. Isikeseluruhan dari suatu dokumen HTML selaluberada diantara tag <html>…</html>.
Kemudian tag " <head>…</head>" (header)adalah informasi dari dokumen HTML. Informasidi dalam header meliputi: title, meta, style, scriptdll. Selain Title informasi di dalam header ininantinya tidak akan di tampilkan di web browser.
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".
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).
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:
<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>
Preview
Berikut adalah sebagai referensi bagi anda untukmemanipulasi atribut face, color dan size:
Atributface="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"
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:
<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>
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>
Preview
Untuk membuat suatu paragraf, tag elemennya adalah <p>…</p>, danuntuk baris baru adalah <br>, perlu diketahui bahwa sebagian tag elemenHTML 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: <!-- Tolong isikan dengan nama anda -->
<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>
Preview
Nah..udah tau kan apa itu <hr>. Garis Horizontal<hr> juga tidak menggunakan tag penutup.
Selanjutnya tag <h1>…</h1> disebut denganHeading, merupakan ukuran teks yang biasa di pakaiuntuk judul, bab, maupun sub-bab lainnya. Ukurannyaada 6 jenis mulai dari <h1> sampai <h6>, ukuran yangpaling besar adalah h1 dan yang terkecil adalah h6.
Selanjutnya tag <!--…--> adalah Commentsdigunakan untuk memasukkan (menyisipkan) suatukomentar di dalam HTML. Suatu comments akandiabaikan oleh browser. Kamu dapat menggunakankomentar untuk menjelaskan sesuatu hal.
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-format teks.<br>Contoh-contohnya adalah sebagai berikut:</p><p>Teks Normal<br><tt>Teks mesin ketik</tt><br><b>Teks tebal (bold)</b><br>
<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 adalahH<sub>2</sub>O<br>
Teks menggunakan Superscript: Hasil dari10<sup>2</sup>=100<br></p>
</body>
</html>
PreviewKemudian untuk menampilkan teks sesuai dengan yang tertulis kita
gunakan tag <pre>…</pre>, misalnya jika anda menuliskan syair sebuahlagu 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>
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>
<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">Website Musik</a>
<p>Hyperlink ke suatu halaman tertentu dalamweb:<p>
<!--dengan catatan anda harus tau namahalaman tujuan tersebut-->
<a href="http://htmlcssguides.com/belajar-css/">Link ini</a> akan membawa anda kehalaman belajar css.
</body>
</html>
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>
WASSALAMUALAIKUM
Wr. Wb