Blog Sang Pelajar

السبت، 30 مارس، 2013

Tentang HTML

HTML (Hyper Text Markup Language)

  • Pengertian 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".
Untuk mulai belajar HTML kita akan menggunakan Texs Editor, Notepad. Di bawah ini adalah contoh suatu dokumen HTML yang sangat sederhana. Buka Notepad, silahkan mulai dengan mengetikkan (copy/paste) kode di bawah ini:
<html> <head> <title>Titel Websiteku</title> </head> <body> Ini adalah dokumen HTML pertamaku </body> </html>
Simpan file tersebut ke C:\My Documents dengan nama "websiteku.html." 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 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 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.
Elemen HTML kemudian ada yang memiliki atribut dan nilai tertentu, seperti contoh untuk membuat warna latar belakang (background): <body bgcolor="0000ff">, body merupakan elemen, bgcolor adalah atribut dan 0000ff merupakan nilai (value).
Elemen HTML mempunyai tiga hal penting yaitu: tag pembuka, isi, dan tag penutup. Sebagai contoh: Elemen html mempunyai tag pembuka " <html>" dan tag penutup " </html>" dan yang berada diantaranya merupakan isi atau konten dari elemen html tersebut. Untuk menuliskan Elemen HTML bisa menggunakan huruf besar maupun huruf kecil. Contoh: <HTML>, <HtMl>, <HTml>, <html>, semuanya adalah sama.

  • Tag Dasar HTML
Komponen dasar dari suatu dokumen HTML terdiri dari tag elemen HTML, HEAD dan BODY. Berikut ini adalah penjelasan dari Tag Elemen tersebut:
<html> <head> <title>Disini titel websiteku</title> </head> <body> Disini adalah konten yang tampil di browser </body> </html>
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.
Tag berikutnya adalah " <title>…</title>" merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai contoh sewaktu anda membuka file contoh diatas perhatikan akan muncul tulisan "Disini titel websiteku".
Tag "<body>…</body>" merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia).

  • Format text HTML
Untuk menulis biasanya ada paragraf dan baris baru, lantas bagaiman cara menuliskannya di dokumen HTML?. Dari contoh yang sudah kita buat sebelumnya, coba tambahkan dengan tag-tag berikut 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 baris baru yang lain.</p> </body> </html>
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: <!-- 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>
Nah..udah tau kan apa itu <hr>. Garis Horizontal <hr> juga tidak menggunakan tag penutup. Untuk melihat tag-tag apa saja yang tidak memerlukan tag penutup dapat dilihat di artikel tentang tag-tag html tanpa 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.
Dibawah ini adalah contoh format teks yang sering digunakan 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 adalah H<sub>2</sub>O<br> Teks menggunakan Superscript: Hasil dari 10<sup>2</sup>=100<br></p> </body> </html>
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 berhasil. </pre> </body> </html>

  • Cara Membuat Tulisan Berjalan Pada HTML
1. Tulisan bergerak dari kanan ke kiri 
 <marquee direction="left" scrollamount="2" align="center">Dini Adistiani</marquee>
 hasilnya : Dini Adistiani  
2. Tulisan bergerak dari kiri ke kanan
 <marquee direction="right" scrollamount="2" align="center">Dini Adistiani</marquee>
 hasilnya : Dini Adistiani  
3. Teks bergerak bolak balik ( mondar - mandir ) dari kiri ke kanan
<marquee direction="left" scrollamount="2" align="center" behavior="alternate">Dini Adistiani</marquee>
hasilnya : Dini Adistiani   
4. Teks bergerak bolak balik ( mondar - mandir ) dari kanan ke kiri
<marquee direction="down" scrollamount="2" align="center">Dini Adistiani</marquee>
 hasilnya : Dini Adistiani    
5. Teks bergerak dari bawah ke atas
 <marquee direction="up" scrollamount="2" align="center">Dini Adistiani</marquee>
hasilnya :Dini Adistiani  
6. Teks bergerak zig - zag ( diagonal ) memantul
 <center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right" behavior="alternate">Dini Adistiani</marquee></marquee></center>
 hasilnya :
Dini Adistiani
7. Teks bergerak zig - zag ( diagonal ) tembus
 <center><marquee direction="up" scrollamount="2" align="center" behavior="alternate" width="90%"><marquee direction="right">Dini Adistiani</marquee></marquee></center>
hasilnya :
Dini Adistiani

Tambahan :

  • Direction : untuk mengatur pola gerakan teks (left, right, up dan down)
  • Scrollamount : untuk mengatur kecepatan gerakan teks. Naikkan angkanya ( dari 2 menjadi 3 ) untuk mempercepat gerakan dan sebaliknya.
  • Behavior ( scroll/slide/alternate ): untuk mengatur prilaku gerakan.
  • Untuk menambahkan backgroundpaddingbordercolor, dll pada marquee, silahkan sisipkan  kode marquee antara kode berikut
<div style="background: #000000; border: 2px solid #FF0000; color: white; font-size: 20px; font-weight: bold; letter-spacing: 0.5em; padding: 15px;">
<marquee direction="left" scrollamount="6" align="center">Dini Adistiani</marquee>
</div>

hasilnya :

Dini Adistiani  

hihihi contohnya pake nama Bu Dini guru Produktif TKJ hhe mohon ma'af ya Buu :D
Sekian penjelasan dari saya, semoga bermanfaat :)