Karakteristik Negara Mesir (Geografi Regional Dunia)
Desain web 1
1. HTML(Hyper Text Markup Language) adalah sebuah bahasa untuk menampilkan
halaman sebuah website. HTML bukan termasuk dalam bahasa pemrograman, tetapi HTML
adalah “markup language“. “Markup language” ini merupakan sekumpulan “tag“. “tag” inilah
yang digunakan untuk menampilkan halaman website dalam tampilan tertentu.
ELEMEN DASAR
Jenis Dokumen
<HTML></HTML>
(terdapat pada awal dan akhir dari file HTML)
Judul
<TITLE></TITLE>
(harus selalu terdapat pada mukadimah)
Mukadimah (Header)
<HEAD></HEAD>
(keterangan umum, seperti judul dsb.)
Batang Tubuh
<BODY></BODY>
(isi dari halaman HTML)
FORMAT TAMPILAN
Huruf Tebal
<B></B>
(Bold)
Huruf Miring
<I></I>
(Italic)
Garis Bawah
<U></U>
(Underline - jarang digunakan)
Rata Tengah
<CENTER></CENTER>
(Center - berlaku untuk teks maupun
gambar)
Huruf Kedip
<BLINK></BLINK>
(Blinking - tag terlucu sampai kini)
Ukuran Huruf
<FONT SIZE=?></FONT>
(Font Size - boleh diisi dari 1 sampai 7)
Warna Huruf
<FONT
COLOR="#$$$$$$"></FONT>
Pilih Jenis
Huruf
<FONT FACE="***"></FONT>
2. PEMISAH
Paragraf
<P></P>
Align Text
<P
ALIGN=LEFT|CENTER|RIGHT></P>
Pndah Baris
<BR>
(pindah ke baris berikut)
Garis Datar
<HR>
(Horizontal Rule)
Penataan
Letak Garis
<HR ALIGN=LEFT|RIGHT|CENTER>
Tebal Garis
<HR SIZE=?>
(dalam satuan pixel)
Lebar Garis
<HR WIDTH=?>
(dalam satuan pixel)
Lebar Garis
Persentasi
<HR WIDTH="%">
(dalam persentasi terhadap lebar
halaman)
(tag penutup seringkali tak diperlukan)
LATAR BELAKANG DAN WARNA
Latar Belakang
Gambar
<BODY
BACKGROUND="URL">
(Tiled Background)
Warna Latar Belakang
<BODY
BGCOLOR="#$$$$$$"
(Background Color - urutan:
merah/hijau/biru)
Warna Huruf Teks
<BODY TEXT="#$$$$$$">
3. TABEL
Rancangan Tabel
<TABLE></TABLE>
Garis Batas Tabel
<TABLE BORDER=?></TABLE>
Lebar Tabel
<TABLE WIDTH=?>
(dalam satuan pixel)
<TABLE WIDTH="%">
(dalam satuan persen terhadap
lebar halaman)
Lebar Tabel
Persentasi
Baris dalam Tabel
Penataan Letak
Baris
Sel dalam Tabel
Penataan Letak Sel
<TR></TR>
<TR ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
<TD></TD>
<TD ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
Kepala Tabel
<TH></TH>
Penataan Letak
Kepala Tabel
(Table Header - seperti data
dengan Bold dan Center)
<TH ALIGN=LEFT|RIGHT|
CENTER|MIDDLE|BOTTOM
VALIGN=TOP|BOTTOM|MIDDLE>
Warna Kepala Tabel
(harus ada dalam setiap baris tabel)
<TH BGCOLOR="#$$$$$$">
Pengen Nyoba Bikin?
Mulailah dengan membuka Notepad (di Windows XP bagi yang belum pernah klik
Start, Program, Accessories, Notepad).
Ketikkan teks berikut:
4. Simpan dengan nama “halamanku.htm” (jangan lupa tambahkan tanda kutip
ganda pada nama filenya. Kalau lupa maka nama filenya akan menggunakan
ekstensi default .txt sehingga menjadi halamanku.htm.txt).
Buka Browser kamu (misalnya internet explorer). Kilk File, Open, Browse dan pilih
cari file halamanku.htm yang tadi kamu bikin. Klik OK, dan browser akan
menampilkan halaman yang tadi kamu buat.
Gampang kan? Atau masih bingung? Ok, kita akan melihat penjelasan dari contoh
di atas.
Setiap tag diapit oleh tanda lebih kecil dan lebih besar. Kamu bisa melihat
bahwa tag pertama adalah <html>. Tag HTML pada umumnya selalu
memiliki pasangan yang memiliki tag sama dengan sedikit tambahan tanda
garis miring “/”, dan kamu bisa melihat pasangan tag <html> di akhir script
yaitu </html>.
Tag <html> memberitahu browser bahwa inilah awal dari dokumen HTML.
Tag pasangannya yaitu </html> menyatakan bahwa inilah akhir dari
dokumen HTML.
Teks di antara <head> dan </head> adalah teks informasi header. Informasi
header ini tidak ditampilkan pada jendela browser.
Teks di antara <title> adalah judul dokumen kamu. Judul ini akan
ditampilkan di caption browser (lihat di bagian paling atas kanan dari
browser kamu).
Teks di antara tag <body> adalah teks yang akan ditampilkan pada jendela
browser kamu.
5. Dan terakhir, teks di antara <b> dan </b> akan ditampilkan dalam huruf
tebal.
Nah, dengan penjelasan ini kamu mustinya udah mulai manggut-manggut dan
merasa, ko ternyata belajar HTML gampang gini yah
. Mudah-mudahan.
Sekarang kita akan lihat mengenai ekstensionnya. Sebagaimana sudah
disampaikan di awal, kita bisa membuat file HTML dengan 2 ekstension yaitu .htm
dan .html. Nah ekstension .htm ditujukan untuk operating sistem jaman dulu yang
hanya mensupport ekstensi 3 huruf. Sedangkan ekstensi .html akan lebih aman
digunakan jika OS dan aplikasinya support karena lebih jelas menunjukkan bahwa
ini adalah file HTML.
Sebagai catatan, setiap kamu melakukan perubahan pada file HTML kamu, maka
kamu harus me refresh browser untuk melihat perubahan tampilannya.
Tutorial Belajar HTML 3 – Tag HTML Dasar yang Penting
Tag HTML yang paling penting adalah tag-tag HTML yang mendefinisikan judul,
paragraf dan ganti baris. Agar lebih mudah memahami tutorial dasar HTML
tentang tag ini, saya sarankan untuk membaca tutorial tentang elemen HTML ini
terlebih dahulu.
Seperti umumnya bahasa pemrograman lainnya, maka cara terbaik untuk
mempelajari tag HTML adalah dengan banyak berlatih. Latihan tentu saja
memerlukan alat bantu. Nah, pada dasarnya kamu bisa bikin file HTML
menggunakan notepad, tapi tentu saja banyak software untuk menulis dengan
berbagai fasilitas yang akan memudahkan. Googling aja atau cari di
download.com dengan kata kunci HTML Editor.
6. Judul
Judul didefinisikan dengan menggunakan tag HTML <h1> sampai >h6>. <h1>
mendefinisikan huruf judul yang paling besar, dan <h6> yang terkecil. Untuk
latihan coba kamu bikin file HTML berikut ini dan perhatikan hasilnya.
?
1<h1>Ini Judul</h1>
2<h2>Ini Judul</h2>
3<h3>Ini Judul</h3>
4<h4>Ini Judul</h4>
5<h5>Ini Judul</h5>
6<h6>Ini Judul</h6>
HTML secara otomatis akan menambahkan baris kosong sebelum dan sesudah
judul.
Paragraf
Paragraf didefinisikan dengan menggunakan tag HTML <p>.
?
1<p>Ini adalah sebuah paragraf</p>
2<p>Ini paragraf lainnya</p>
Sama seperti judul, HTML secara otomatis akan menambahkan baris kosong
sebelum dan sesudah paragraf.
Jangan lupa Tag HTML penutup
Kamu pastinya udah pernah ngeliat bahwa paragraf dapat ditulis tanpa tag HTML
penutup </p> kayak gini:
7. ?
1<p>Ini adalah sebuah paragraf
2<p>Ini paragraf lain
Contoh barusan dapat digunakan pada hampir semua jenis browser, tapi jangan
ngandelin hal itu. Versi-versi HTML ke depan kayaknya ndak akan ngijinin kamu
untuk melewatkan tag HTML penutup.
Menutup semua elemen HTML dengan tag HTML penutup adalah cara yang
ampuh untuk menulis HTML yang kompatibel dengan semua browser dan
pengembangan ke depan. Hal ini juga membuat kode kita lebih mudah dimengerti
(baik dibaca maupun di browse).
Ganti Baris
Tag HTML <br> digunakan pada saat kamu pengen membuat baris baru, tapi
belum ingin ganti paragraf. Tag HTML <br> akan membuatkan sebuah baris baru
buat kamu dimanapun kamu letakkan tag itu.
<p>Ini <br> adalah sebuah pa<br>ragaraf dengan ganti baris </p>
Tag <br> adalah tag yang kosong. Nah, karena itu dia tidak punya tag HTML
penutup seperti misalnya </br>, karena jadi ndak masuk akal. Ya tho?
<br> atau <br />
Kamu akan makin sering melihat penulisan tag HTML <br> dengan cara begini: <br
/>
Karena tag HTML <br> tidak memiliki tag penutup, maka tag tersebut melanggar
salah satu aturan dasar dalam penulisan HTML ke depannya (XHTML yang
berbasis XML), di mana semua elemen harus ditutup.
Menuliskan penggantian baris dengan cara <br/> ini menjamin bahwa file HTML
kamu akan kompatibel dengan XML maupun cara penulisan HTML di masa
datang.
Menuliskan Komentar dalam HTML
8. Tag komentar digunakan untuk menyisipkan sebuah komentar dalam kode
sumber HTML. Sebuah komentas akan diabaikan oleh browser. Kamu bisa
menggunakan komentar untuk menjelaskan kode yang kamu bikin, dan tentu saja
hal ini akan membantu kamu saat kamu perlu melakukan perubahan pada kode
kamu kapan-kapan.
?
1<!-- Ini adalah sebuah komentar -->
Perhatikan bahwa kamu perlu menuliskan tanda seru setelah kurung buka, tetapi
tidak sebelum kurung tutupnya.
Ingat hal-hal berikut!
Setiap tag HTML memiliki sebuah nama elemen (body, h1, p, br)
Tag pembuka adalah nama yang dilingkupi oleh tanda kurung siku: <h1>
Tag penutup adalah tanda garis miring dan nama yang dilingkupi oleh tanda
kurung siku </h1>
Isi elemen berada di antara tag pembuka dan tag penutup
Beberapa elemen HTML tidak memiliki isi elemen
Beberapa elemen HTML tidak memiliki tag penutup
Try This: 4 Langkah Mudah Belajar Cara Membuat Website, Langsung Praktek!
KLIK DI SINI!.
Beberapa Tips Yang Bermanfaat
Waktu kamu menulis teks HTML, maka kamu tidak akan pernah bisa yakin
bagaimana teks itu ditampilkan oleh browser lain. Beberapa orang memiliki
monitor yang lebih besar, dan yang lainnya. Teks akan diatur ulang setiap kali
pengunjung mengubah ukuran windownya. Jangan pernah mencoba untuk
membantuk teks yang memiliki baris kosong atau spasi dekat dengan teks itu.
9. HTML akan menghapus spasi dalam teks kamu. Berapa banyakpun kamu tuliskan
spasi, tetap akan dihitung satu. Satu lagi, dalam HTML sebuah baris baru dihitung
sebagai satu spasi.
Menggunakan paragraf kosong <p> untuk menyisipkan baris kosong adalah
kebiasaan yang kurang baik. Gunakan tag <br> sebagai penggantinya. (tapi jangan
juga gunakan tag <br> untuk membuat daftar. Tunggu sampai pelajaran tentang
daftar dimulai ya).
HTML secara otomatis akan menambah baris kosong sebelum dan sesudah
beberapa elemen, seperti sebelum dan sesudah paragraf dan judul.
Tag HTML Dasar
Masih ingat kan tentang pengertian tag HTML? Nah, berikut adalah tag-tag HTML
penting yang akan sangat sering kamu pakai. Dan kamu akan mempelajari masingmasing secara lebih detil terutama yang menyangkut atributnya.
Tag – Description
<html> – Mendefinsikan sebuah dokumen HTML
<body> – Mendefinisikan isi utama
<h1> to <h6> – Mendefinisikan judul 1 sampai 6
<p> – Mendefinisikan paragraf
<br> – Menyisipkan sebuah baris
<hr> – Mendefinisikan garis horisontal
<!–> – Bikin komentar
Asik kan? Ini belum seberapa, tunggu sampai kamu udah bisa bikin tabel, huruf
berwarna dan masih banyak lagi variasi tampilan yang bisa digunakan untuk
mempercantik halaman web kamu.
