HYPERTEXT MARKUP LANGUAGE
A. Introducing to HTML
HTML (Hyper Text Markup Language) merupakan standard bahasa yang digunakan untuk menampilkan dokumen di web. Namun yang perlu diingat, HTML bukan bahasa pemrograman! Yang bisa kita lakukan dengan HTML adalah :
· Mengatur tampilan web berikut isinya.
· Menambahkan objek-objek seperti image, audio, atau video dalam dokumen HTML.
· Mempublikasikan dokumen secara online sehingga bisa diakses dari seluruh dunia.
B. Browser dan Editor
Browser merupakan software yang berfungsi untk menerjemahkan tag-tag HTML menjadi halaman web. Browser yang sering digunakan antara lain : Internet Explorer, Mozilla Firefox, Opera, dll.
Editor adalah software yang digunakan untuk membuat dokumen HTML. Ada banyak editor yang bisa kita gunakan untuk membuat dokumen HTML, misalnya : notepad, Editplus, Macromedia Dreamweaver, Microsoft Frontpage, dll.
C. Tag-tag HTML
Dokumen HTML terdiri atas tag-tag HTML. Tag HTML merupakan semacam perintah yang digunakan untuk menentukan tampilan dari dokumen HTML setelah ditampilkan oleh web browser.
Aturan-aturan umum penulisan tag HTML:
· Tag-tag HTML disertai dengan tanda kurung <>, misalnya : <html>
· Biasanya, tag-tag HTML dibuat berpasangan, sehingga formatnya : <Tag Pembuka> </Tag Penutup>. Tag penutup harus dituliskan dengan tambahan karakter slash (/) di depannya. Tag penutup berfungsi untuk mengakhiri fungsi/perintah yang dijalankan oleh tag tersebut.
|
· Tidak semua tag harus diakhiri dengan tag penutup, akan dijelaskan kemudian.
· Tidak case sensitive, contohnya : tag <html> sama saja fungsinya walaupun ditulis <HTML>
D. Struktur HTML
Dokumen HTML dibagi menjadi 3 bagian utama:
1. HTML
Dokumen HTML harus diawali dengan tag <HTML> dan diakhiri dengan tag </HTML>. Tag tersebut berfungsi untuk memberi tahu browser bahwa yang ada di dalam kedua tag tersebut adalah dokumen HTML.
2. HEAD
Bagian header dari dokumen HTML diapit oleh tag <HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag <title> yang berfungsi untuk menampilkan judul dari halaman yang dibuat.
3. BODY
Body merupakan “tubuh” dari sebuah dokumen HTML. Body digunakan untuk menampilkan text, image, link dan semua yang akan ditampilkan pada web page. Dibuka dengan tag <BODY> dan diakhiri dengan </BODY>
E. Membuat dokumen HTML
Langkah-langkahnya:
1.Buka editor yang diperlukan, kali ini kita memakai notepad.
2.Ketikkan tag-tag HTMl seperti di bawah ini.
|
3.Simpan di dalam folder yang telah dibuat dengan format (namaFile).html
è Ingat ekstensi file .html bukan .txt
4.Selanjutnya untuk melihat hasil tampilannya, gunakan browser yang ada, misal Mozilla Firefox atau Internet Explorer. Ada 2 cara, pertama, bisa langsung dibuka dengan cara meng-klik file html nya, dan yang kedua bisa melalui browser : buka internet browser (sebagai contoh, kita memakai Mozilla) à klik File di pojok kiri atas à Open file à pilih file yang ingin dibuka à klik open.
F. Elemen-elemen dasar HTML
1.Headings
HTML headings yang disediakan mulai dari <h1> sampai <h6>. Penulisannya menggunakan tag pembuka dan tag penutup.
|
Catatan : gunakan HTML Headings untuk membuat heading saja, jangan digunakan untuk mencetak ukuran teks menjadi lebih besar atau lebih tebal. Search engine menggunakan heading untuk mendeteksi isi dari web page yang kita buat. Isi dari sebuah web page biasanya dapat dilihat dari heading nya.
2. Paragraphs
Berfungsi untuk membentuk paragraf dari teks yang kita buat. Penulisannya menggunakan tag <p> dan ditutup dengan </p>.
3. Elemen kosong HTML
Elemen HTML tanpa isi disebut juga elemen kosong. Elemen kosong ini dapat ditutup pada tag pembuka. Misal : <br> adalah elemen kosong tanpa tag penutup (berfungsi sebagai line breaks, atau ‘enter’ ), namun tetap harus ditutup. Lalu bagaimana caranya? Sama, yaitu dengan menambahkan slash (/), sehingga penulisannya menjadi <br/>.
|
Latihan 1
Ketiklah dokumen html di bawah ini pada notepad dan lihat hasilnya pada browser.
G. Attribute
Atrribute digunakan untuk mengatur tampilan pada setiap elemen. Attribut diletakkan pada tag pembuka.
1. Attribute untuk mengatur body
Atrribute yang sering digunakan untuk mengatur body adalah body background color (bgcolor) yang berfungsi untuk mengatur warna background pada halaman web.
Bgcolor=”red” merupakan attribut dari elemen body. Untuk mengganti warna backround bisa juga menggunakan kode hexadecimal, misal kita ganti warna background menjadi hitam, berarti attribut nya bgcolor=”#000000” à kode untuk warna hitam
2. Attribute untuk mengatur font
Dengan tag <font> kita bisa menentukan format tampilan font dalam dokumen HTML.
| Attribute | Fungsi |
| Color | Untuk mengatur warna font, bisa menggunakan nama warna atau hexadecimal (#000000 - #FFFFFF) |
| Size | Untuk menentukan ukuran font, ukuran standar dari 1-7 atau dengan besaran point (pt) atau pixel (px). |
| Face | Menentukan jenis font, biasanya dalam satu list ada beberapa nama font dan akan dibaca mulai dari kiri, paling kiri paling prioritas utnuk ditampilkan. |
H. Text Formatting
Ada banyak hal yang dapat kita lakukan untuk memformat teks dalam dokumen html kita, antara lain dengan menggunakan tag-tag di bawah ini :
| Tag | Description |
| Defines bold text | |
| Defines big text | |
| Defines emphasized text | |
| Defines italic text | |
| Defines small text | |
| Defines strong text | |
| Defines subscripted text | |
| Defines superscripted text | |
| Defines inserted text | |
| <strike> | Defines deleted text (giving |
| Centered document. | |
| Defines deleted text (giving | |
| Defines underline text |
I. Elemen-elemen lain
1. List Item
List item digunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).
Ada 3 macam list item dalam HTML :
a. Ordered Lists (Numbering)
Tag <OL> digunakan untuk membuat daftar item, tiap item dapat menggunakan angka arab atau romawi (diatur dengan atribut ‘type’, tapi default nya angka arab).
b. Unordered Lists (Bullet)
Tag <UL> Untuk membuat daftar item dengan tanda bullet.
Tag <LI> Untuk mendefinisikan List entries.
c. Definition Lists
Tag <DL> digunakan untuk mendefinisikan suatu istilah.
Nama istilah dituliskan di bagian tag <DT> (Data Term), kemudian definisi dari itilah tersebut dituliskan di bagian tag <DD> (Data Definition).
:hi:
BalasHapuswebsitenya yang bagus
BalasHapus