Pengenalan Dasar HTML
Sebuah aplikasi web dibangun menggunakan tag HTML. Pada sesi pertemuan ini akan
dipelajari bagaimana membuat dokumen HTML sederhana, memformat tampilan pada
dokumen HTML dan membuat list yang yang biasa kita gunakan untuk menampilkan
daftar dengan urutan tertentu. Untuk praktikum ini akan menggunakan notepad
sebagai HTML editornya.
Format Penulisan HTML
Untuk membuat suatu halaman HTML standar digunakan tag <html>, <head>,
<body> beserta tag penutupnya masing-masing. Susunan tag – tag tersebut
membentuk dokumen HTML sebagai berikut :
Memulai Membuat Dokumen dengan Format HTML
Langkah – langkah untuk memulai membuat dokumen HTML sebagai berikut :
1. Buka notepad++ sebagai editor dokumen HTML.
2. Buat skrip sederhana seperti di bawah ini di notepad++
Langkah – langkah untuk memulai membuat dokumen HTML sebagai berikut :
1. Buka notepad++ sebagai editor dokumen HTML.
2. Buat skrip sederhana seperti di bawah ini di notepad++
3. Simpan dokumen yang telah dibuat dengan menggunakan ekstensi .htm atau
.html
Path directory : …./nama_folder/xxx.hmtl
.html
Path directory : …./nama_folder/xxx.hmtl
4. Untuk melihat hasil dari dokumen HTML yang telah dibuat, buka dokumen
tersebut menggunakan web browser. Dengan klick kanan – open with IE/Mozilla Firefox/Chrome/web browser lainnya.
tersebut menggunakan web browser. Dengan klick kanan – open with IE/Mozilla Firefox/Chrome/web browser lainnya.
Tag Dasar dalam HTML
Heading
Heading merupakan sekumpulan kata yang menjadi judul atau sub judul dalam
dokumen HTML, dengan berbagai ukuran yang berbeda.
Pada dasarnya untuk menyatakan suatu Heading, digunakan tag <Hx> dimana x
adalah level 1 sampai 6. Tag Heading atau <Hx> adalah tag berpasangan, yaitu tag
yang mempunyai tag awal <Hx> dan tag penutup </Hx>
Format : <H1>...........</H1> sampai <H6>.......</H6>
Contoh :
<HTML>
<BODY>
<H1>Heading 1 adalah 24 Point</H1>
<br>
<H2>Heading 2 adalah 18 Point</H2>
<br>
<H3>Heading 3 adalah 14 Point</H3>
<br>
<H4>Heading 4 adalah 12 Point</H4>
<br>
<H5>Heading 5 adalah 10 Point</H5>
<br>
<H6>Heading 6 adalah 7 Point</H6>
<br>
Heading merupakan sekumpulan kata yang menjadi judul atau sub judul dalam
dokumen HTML, dengan berbagai ukuran yang berbeda.
Pada dasarnya untuk menyatakan suatu Heading, digunakan tag <Hx> dimana x
adalah level 1 sampai 6. Tag Heading atau <Hx> adalah tag berpasangan, yaitu tag
yang mempunyai tag awal <Hx> dan tag penutup </Hx>
Format : <H1>...........</H1> sampai <H6>.......</H6>
Contoh :
<HTML>
<BODY>
<H1>Heading 1 adalah 24 Point</H1>
<br>
<H2>Heading 2 adalah 18 Point</H2>
<br>
<H3>Heading 3 adalah 14 Point</H3>
<br>
<H4>Heading 4 adalah 12 Point</H4>
<br>
<H5>Heading 5 adalah 10 Point</H5>
<br>
<H6>Heading 6 adalah 7 Point</H6>
<br>
Paragraf
a. Melakukan Formating Paragraf
Jika kita akan membuat sebuah website, dapat dipastikan kita juga kan menyajikan
informasi-informasi yang diperlukan. HTML juga mendefinisikan elemen khusus,
untuk mendefinisikan teks dengan makna khusus.
HTML menggunakan unsur-unsur seperti <b> dan <i> untuk memformat output,
seperti teks tebal atau miring.
Elemen format yang dirancang untuk menampilkan jenis khusus dari teks:
· teks tebal : menggunakan tag <b>
· teks penting : menggunakan tag <strong>
· teks miring : menggunakan tag <i>
· teks menekankan : menggunakan tag <em>
· teks menandai : menggunakan tag <mark>
· teks kecil : menggunakan tag <small>
· teks menghapus : menggunakan tag <del>
· teks memasukkan : menggunakan tag <ins>
· subscript / pangkat dibawah : menggunakan tag <sub>
· superscripts / pangkat di atas : menggunakan tag <sup>
a. Melakukan Formating Paragraf
Jika kita akan membuat sebuah website, dapat dipastikan kita juga kan menyajikan
informasi-informasi yang diperlukan. HTML juga mendefinisikan elemen khusus,
untuk mendefinisikan teks dengan makna khusus.
HTML menggunakan unsur-unsur seperti <b> dan <i> untuk memformat output,
seperti teks tebal atau miring.
Elemen format yang dirancang untuk menampilkan jenis khusus dari teks:
· teks tebal : menggunakan tag <b>
· teks penting : menggunakan tag <strong>
· teks miring : menggunakan tag <i>
· teks menekankan : menggunakan tag <em>
· teks menandai : menggunakan tag <mark>
· teks kecil : menggunakan tag <small>
· teks menghapus : menggunakan tag <del>
· teks memasukkan : menggunakan tag <ins>
· subscript / pangkat dibawah : menggunakan tag <sub>
· superscripts / pangkat di atas : menggunakan tag <sup>
b. Menggunakan Line Break
Jika kita biasa menggunakan tombol Enter untuk ganti baris, maka hal itu tidak
berlaku dalam penulisan dokumen HTML. Seberapa banyak kita memencet tombol
Enter, maka tidak kan dianggap 1 pun.
Dalam HTML tag Line Break dapat digunakan untuk membuat baris baru layaknya
fungsi tombol Enter pada keyboard. Line break menggunakan tag <br>
Jika kita biasa menggunakan tombol Enter untuk ganti baris, maka hal itu tidak
berlaku dalam penulisan dokumen HTML. Seberapa banyak kita memencet tombol
Enter, maka tidak kan dianggap 1 pun.
Dalam HTML tag Line Break dapat digunakan untuk membuat baris baru layaknya
fungsi tombol Enter pada keyboard. Line break menggunakan tag <br>
c. Preformatted Text
Jarak antar kata suatu teks atau kalimat di dalam dokumen web adalah sebesar satu
spasi. Agar browser web menampilkan sesuai dengan dokumen web tersebut di
dalam editor teks, maka teks yang bersangkutan harus di beri tanda tag <pre> di
awalnya dan </pre> di akhir teks. Dengan tag <pre>, yang mempunyai
kepanjangan "preformatted" teks akan di tampilkan dalam browser dengan
ukuran font dengan lebar - fix. Tag ini juga akan menjaga spasi, baris baru, dan tap
sesuai dengan aslinya pada saat di tampilkan dalam browser.
d. Mengolah Properti Dari Font
Saat proses koding, ada kalanya kita harus melakukan pewarnaan, atau bahkan
menentukan jenis huruf dari font yang kita pakai dengan alasan tertentu, mungkin
karena info penting agar lebih bisa diperhatikan dll. Kita dapat menggunakan tag
style="property:value" untuk mengubah style property dari font. Gunakan atribut
style untuk elemen styling HTML
· background-color untuk warna latar belakang
· color untuk warna teks
· font-family untuk font teks
· font-size untuk ukuran teks
· text-align untuk perataan teks
Saat proses koding, ada kalanya kita harus melakukan pewarnaan, atau bahkan
menentukan jenis huruf dari font yang kita pakai dengan alasan tertentu, mungkin
karena info penting agar lebih bisa diperhatikan dll. Kita dapat menggunakan tag
style="property:value" untuk mengubah style property dari font. Gunakan atribut
style untuk elemen styling HTML
· background-color untuk warna latar belakang
· color untuk warna teks
· font-family untuk font teks
· font-size untuk ukuran teks
· text-align untuk perataan teks
e. Membuat garis Horizontal
Garis horizontal (horizontal line) digunakan untuk memisahkan halaman web secara
visual. Tag yang digunakan adalah <hr>. Beberapa atributnya adalah ALIGN, SIZE,
dan WIDTH. Tag hr seperti halnya tag br (<br>) adalah tag yang beridiri sendiri.
Jadi tidak perlu ditutup dengan tag penutup.
Garis horizontal (horizontal line) digunakan untuk memisahkan halaman web secara
visual. Tag yang digunakan adalah <hr>. Beberapa atributnya adalah ALIGN, SIZE,
dan WIDTH. Tag hr seperti halnya tag br (<br>) adalah tag yang beridiri sendiri.
Jadi tidak perlu ditutup dengan tag penutup.
List
List merupakan bentuk umum yang biasa kita gunakan untuk menampilkan daftar
dengan urutan tertentu. Dalam HTML, dikenal 3 (tiga) istilah list : ordered list,
unordered list dan definition list.
a. List Tanpa Urutan (Unordered Lists)
Unordered list adalah metode mengurutkan daftar dengan menggunakan simbol
atau special character pada HTML. nama lain dari unordered list sendiri adalah bullet
list. Bullet atau onordered list ini umumnya digunakan apabila kita ingin membuat
suatu daftar yang terlepas dari suatu urutan-urutan tertentu. Untuk list jenis ini,
pembuatannya sangat mirip dengan Ordered list, hanya saja ada perbedaan pada
jenis synthax yang digunakan dimana unordered list akan menggunakan <ul>.
List merupakan bentuk umum yang biasa kita gunakan untuk menampilkan daftar
dengan urutan tertentu. Dalam HTML, dikenal 3 (tiga) istilah list : ordered list,
unordered list dan definition list.
a. List Tanpa Urutan (Unordered Lists)
Unordered list adalah metode mengurutkan daftar dengan menggunakan simbol
atau special character pada HTML. nama lain dari unordered list sendiri adalah bullet
list. Bullet atau onordered list ini umumnya digunakan apabila kita ingin membuat
suatu daftar yang terlepas dari suatu urutan-urutan tertentu. Untuk list jenis ini,
pembuatannya sangat mirip dengan Ordered list, hanya saja ada perbedaan pada
jenis synthax yang digunakan dimana unordered list akan menggunakan <ul>.
b. List Berurut (Ordered Lists)
Ordered list adalah suatu metode mengurutkan daftar dengan menggunakan angka,
abjad dan angka romawi pada HTML. Dalam ordered list ini akan ada dua jenis
elemen yang dibutuhkan yaitu <ol> yang merupakan singkatan ordered list dan
<li> yang merupakan singkatan list item
Ordered list adalah suatu metode mengurutkan daftar dengan menggunakan angka,
abjad dan angka romawi pada HTML. Dalam ordered list ini akan ada dua jenis
elemen yang dibutuhkan yaitu <ol> yang merupakan singkatan ordered list dan
<li> yang merupakan singkatan list item
c. Definition List
Definition list merupakan jenis daftar yang umumnya digunakan untuk
mendefinisikan sesuatu. Definition list sendiri sebenarnya sudah terlepas dari ketiga
daftar diatas, dalam artian mempunyai jenis opening dan closing tag yang benarbenar berbeda dari tiga jenis daftar diatas. Definition list akan menggunakan tiga
jenis tag : Diawali dengan <dl> yang merupakan singkatan definition list; <dt>
yang merupakan singkatan definition term (digunakan untuk kata yang akan
didefinisikan); <dd> definition description yang merupakan penjelasan dari suatu
istilah (<dt>).
Definition list merupakan jenis daftar yang umumnya digunakan untuk
mendefinisikan sesuatu. Definition list sendiri sebenarnya sudah terlepas dari ketiga
daftar diatas, dalam artian mempunyai jenis opening dan closing tag yang benarbenar berbeda dari tiga jenis daftar diatas. Definition list akan menggunakan tiga
jenis tag : Diawali dengan <dl> yang merupakan singkatan definition list; <dt>
yang merupakan singkatan definition term (digunakan untuk kata yang akan
didefinisikan); <dd> definition description yang merupakan penjelasan dari suatu
istilah (<dt>).
Pengenalan Dasar HTML
Reviewed by Lukman Syahrudin
on
12:26:00 AM
Rating:
Reviewed by Lukman Syahrudin
on
12:26:00 AM
Rating:
No comments: