السبت، 30 مارس 2013
Tentang HTML
- 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:
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 :
2. Tulisan bergerak dari kiri ke kanan
<marquee
direction="right" scrollamount="2"
align="center">Dini Adistiani</marquee>
hasilnya :
3. Teks bergerak bolak balik ( mondar - mandir )
dari kiri ke kanan
<marquee direction="left"
scrollamount="2" align="center"
behavior="alternate">Dini Adistiani</marquee>
hasilnya :
4. Teks bergerak bolak balik ( mondar - mandir ) dari kanan ke kiri
<marquee direction="down" scrollamount="2" align="center">Dini Adistiani</marquee>
<marquee direction="down" scrollamount="2" align="center">Dini Adistiani</marquee>
hasilnya :
5. Teks bergerak dari bawah ke atas
<marquee direction="up"
scrollamount="2" align="center">Dini Adistiani</marquee>
hasilnya :
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 :
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 background, padding, border, color,
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>
<marquee direction="left" scrollamount="6" align="center">Dini Adistiani</marquee>
</div>
hasilnya :
hihihi contohnya pake nama Bu Dini guru Produktif TKJ hhe mohon ma'af ya Buu :D
Sekian penjelasan dari saya, semoga bermanfaat :)
الاشتراك في:
الرسائل (Atom)