Lanjutan dari Artikel ku yang kemarin. kita lanjut membahas HTML lagi, di artikel kali ini saya lebih menekankan pada bagian isi dari suatu dokument HTML, yaitu cara menaruh Image, table dan list.dan tentukan juga akan membahasa bagaimana cara kita menghubungkan antara halaman-halaman website. Kita Mulai Dengan Struktur Penuisan HTML.
Struktur Penulisan HTML
Code code yang kita tulis diatas memang tidak salah, tetapi penulisan suatu dokument HTML yang baik haruslah memiliki suatu struktur penulisan yang baik seperti dibawah ini
Didalam penulisan dokument HTML harus memilik tag <html>, <head>, <title>,<body> dan juga disertai penutup tag nya juga loooh.
Tag <html> digunakan sebagai informasi bahwa dokument yang kita tulis ini adalah dokument HTML, tag <head> digunakan sebagai isi informasi dari halaman Website kita, tag <title> digunakan sebagai judul dari suatu halaman HTML yang kita buat. Dan Tag <body> tag pembuka seluruh isi dokument yang akan ditampilkan di browser. Seperti ini kira-kira penggambarannya.
HEADING
Suatu dokument pastinya mempunyai Heading, yaitu tulisan di atas paragrap yang mempunyai text yang lebih besar dan Huruf tebal berbeda dengan huruf yang ada di paragraf. Seperti dibawah ini :
Di dokument HTML itu mempunyai Heading Penulisan HTML. Heading didalam penulisan bisa dikatakan penting karna yang menarik mata para pembaca website untuk melihat header(judul paragraf) pertama kali. Dan Juga Header membuat Search Engines (seperti Google.com) cepat mengindeks website kita, karna struktur isi dari dokument/halaman Website kita. Berikut Tag-tag Header :
<h1>HEADER HTML 1</h1>
<h2>HEADER HTML 2</h1>
<h3>HEADER HTML 3</h1>
<h1>HEADER HTML 4</h1>
<h1>HEADER HTML 5</h1>
<h1>HEADER HTML 6</h1>
Garis di HTML
Gunakan tag <hr /> untuk membuat garis di dokument/halaman HTML kita. Tag ini juga dapat di kombinasikan dengan tag Header sebagai garis bawahnya. Seperti gambar yang diatas tadi.
<h1>HEADER HTML</h1>
<hr />
<h1>HEADER HTML</h2>
<hr />
<h1>HEADER HTML</h3>
<hr />
Paragraf di HTML
Setelah kita membuat Header di dokument, pastinya sekarang kita membuat sebuah paragraf di dalam dokumen. Gunakan tag <p> untuk tag pembuka paragraf.
<p>Ini adalah paragraf Pertama</p>
<p>Ini adalah paragraf Kedua</p>
Save, lalu coba lihat hasilnya :
Saat ada menuliskannya dengan cara satu baris pun hasilnya akan tetap sama saja. Contohnya :
<p>Ini adalah paragraf Pertama</p> <p>Ini adalah paragraf Kedua</p> .
Yang harus di ingat, jangan sampai anda lupa menutup tag nya dengan </p>. Karna jika anda lupa, paragraf dokument anda akan tidak berarturan. Mungkin di beberapa browser bisa terasa, atau terlihat biasa saja, tapi ada juga browser yang tidak support.
Sekarang bagaimana caranya agar kita dapat membuat garis baru di dalam sebuah paragraf?? Gunakan saja tag <br /> untuk membuat baris baru. Contoh :
<p>Ini adalah sebuah paragraf<br />ini baris baru<br />dan baris baru lagi</p>
Memformat TEXT HTML
Sekarang kita lanjut bagaimana caranya memformat text -text yang ada di dokument html kita, seperti membuat tebal huruf, membuat huruf menjadi garis miring, dan sebagainya. Berikut ini beberapa tag untuk memformat text di halaman website :
Tag Format Text | Penjelasan |
Menjadikan Text Menjadi Tebal | |
Menjadikan Text Menjadi tegak miring | |
Membuat subscripted text | |
Membuat superscripted text | |
Membuat Text Mempunyai Garis di bawahnya/underline |
Contoh :
Kau yang selalu Hadir dalam Tiap Langkahku
Hangatkan ku dengan Panas Cintamu
Genggam Erat janji ku Untuk mu
Kau kan selalu Dekat ku
Hasilnya Akan Menjadi Seperti ini :
HTML Styles
Styles diperkenalkan di HTML Versi 4 sebagai suatu cara untuk mempercantik/menstyle elemen HTML atau dokument HTML. Sebagai Contoh HTML Styles :
style="background-color:blue"
style="font-size:15px"
style="text-align:center"
Beberapa Contoh tag dan attribut yang dapat dipakai :
Tags | Penjelasan |
<center> | Menjadikan elemen didalamnya menjadi Ketengah |
<font> and <basefont> | Mendefinisi huruf di Dokument HTML |
<s> and <strikeout> | Menjadikan Strikeout text |
<u> | Membuat Underline text |
|
|
Attributes | Penjelasan |
align | Mendefinisikan posisi text (center, left, right, justify) |
bgcolor | Latar Belakang |
color | Mendefinisikan wana huruf |
Dan ini Beberapa Contoh Penggunaan Styles di HTML :
<h1 style="color:#0000FF">SUARA DENGARKAN AKU</h1>
<p style="background:#000000; color:#FFFFFF; text-align:center;">
ini adalah sebagain text yang sudah di beri tag dengan attribut style yang menjadikannya
mempunyai background hitam, tulisan putih dan posisi text menjadi ketengah.</p>
<font style="font-size:36px">HURUF NYA BESARNYA 36</font>
Di contoh di atas kita mendefinisikan tag <h1> dengan warna Merah, dan di tag <p> kita menambahkan attribut style agar mempunyai background(latar belakang) berwarna Hitam (background:#000000), dan mempunyai warna tulisan berwarna putih(color:#FFFFFF), dan membuat agar tulisan selalu berada di tengah (text-align:center). Oh iya mungkin ada yang sebagian heran kenapa warna hitam ditulis dengan 000000 dan warna putih dengan FFFFFF. Itu pengcodean warna, sebenarnya kita bisa saja menuliskan dengan "black" atau "white" saja. Atau bisa juga dengan blue, red, yellow dan sebagainya. Tetapi ada beberapa warna yang tidak bisa disebutkan dengan kata-kata (memangnya cinta apa J ), karna dari kode-kode diatas kita bisa membuat suatu warna lain, misalnya warna hijau muda menjadi 00CC33. Kombinasi warna bisa kita lihat di photoshop.
Pembahasan tentang style dan warna akan kita bahas lebih lanjut lagi di CSS (Cascading Style Sheet).
HTML Links
Suatu website pastinya mempunyai banyak halaman/dokument-dokumentya, dan pastinya dokument-dokument itu saling berhubungan. Penggambarannya seperti ini :
Bagaimana caranya kita berpindah dari satu dokument ke document yang lain?? Haruskah kita mengetikkan dari halaman home kita (http://www.situsku.com/home.html) ke halaman profile kita (http://www.situsku.com/profile.html). Bisa pegal jari kita heheheheh. Nah biasanya kita nanti akan menggunakan tag <a> atau yang biasa disebut juga dengan link. Cara begini :
Pertama buat dulu satu file html dan isinya seperti berikut:
Selamat Datang Semuanya. Ini adalah Halaman Home ku.
Klik Disini untuk Ke Halaman Profile
Lalu Save Dengan Nama home.html
Kedua Buat lagi file dengan isinya seperti ini
Ini Adalah Halaman Profile ku.
Nama ku Zha, aku Bersekolah di SMU Seratus.
Klik Disini untuk Ke Halaman Home
Lalu save dengan nama profile.html
Ingat 2 file ini harus berada ditempat yang sama, atau di diretory yang sama.
<a href="target halaman"> adalah kunci dari ini semua. Href disini menunjukan dimana letak lokasi filenya berada. <a href="target halaman">text</a>.
Sekarang bagaimana jika file html kita berbeda halaman?? Kita hanya tinggal menambahkan nama direktory/foldernya saja. Contoh kasus, tadi kita membuat 2 file home.html dan profile.html di satu folder yang sama. Lalu kita memindahkan file profile.html kedalam sub folder isi. Penggambarannya seperti ini :
Agar tetap bisa jalan, kita harus mengedit kembali file kita tadi.
Edit file home.html dan isinya seperti berikut:
Selamat Datang Semuanya. Ini adalah Halaman Home ku.
Klik Disini untuk Ke Halaman Profile
Lalu Save dengan nama yang sama
Edit file profile.html dan isinya seperti berikut:
Ini Adalah Halaman Profile ku.
Nama ku Zha, aku Bersekolah di SMU Seratus.
Klik Disini untuk Ke Halaman Home
Lalu Save dengan nama yang sama
Apa yang kita tambahkan tadi??
Kita menambahkan <a href="isi/profile.html"> di belakang profile.html kita menambahkan isi/. Yang artinya menunjukan bahwa kita menuju kedalam folder isi dan menunjuk file profile.html. sebaliknya dengan di file profile.html kita menambakan di href nya dengan tanda ../ yang artinya kita up/ke folder sebelumnya.
HTML Images
Suatu web tak bisa lepas dari suatu gambar pastinya. Nah untuk menampilkan gambar di HTML kita menggunakan tag <img>. Sama seperti link, di tag <img> kita juga harus menentukan dimana letak gambar itu berada dengan menambahkan parameter src. Contoh :
Pertama-tama siapkan dulu sebuah gambar. Misalnya anda mempunyai gambar dengan nama fotoku.jpg (.jgp adalah extension sebuah gambar, ada juga gambar dengan extension bmp, gif, atau png).
Buat file dengan nama image.html.
Disave sama dengan folder gambarnya.
Penggambarannya :
Sama hal nya dengan tag yang kita pelajari sebelumnya yaitu link. Jika gambar kita berada didalam folder lagi, kita hanya tinggal menambahkan nama foldernya di belakang nama filenya. Contoh.
Edit file image.html.
HTML Table
Gak Fasih rasanya klo belum membahas bagaimana cara menampilkan table di html, karena table bisa dikatakan hal penting dalam html. Table berguna untuk mendesain halaman atau member sekat-sekat di dokumen html kita nantinya.
Yang Perlu di perhatikan saat membuat tabel ialah, tag-tag berikut :
<table></table>, <tr></tr>, <td></td>, dan <th></th>.
<table> kita gunakan untuk tag awal dalam membuat sebuah table
<tr> digunakan sebagai baris didalam table.
<td> tag ini digunakan untuk membuat kolom-kolom. Tag ini harus ada di dalam tag <tr>.
<th>tag ini mempunyai fungsi yang sama seperti tag <td> tetapi tag ini berfungsi sebagai header, yaitu yang sering digunakan pada baris paling atas atau baris pertaman pada kolom.
Berikut Contoh dari table :
| ISI TABLE |
Table diatas mempunyai satu baris table dan mempunyai 1 buah kolom.
<table border="1">
<tr>
<td>KOLOM 1</td>
<td>KOLOM 2</td>
</tr>
</table>
Table ini mempunya 1 baris dengan isi 2 buah kolom
Contoh Berikutnya :
<table border="1">
<tr>
<td>BARIS [1], KOLOM [1]</td>
<td>BARIS [1], KOLOM [2]</td>
</tr>
<tr>
<td>BARIS [2], KOLOM [1]</td>
<td>BARIS [2], KOLOM [2]</td>
</tr>
</table>
Nah setelah membahas baris dan kolom, sekarang kita lanjut membahasa parameter apa saja yang ada di dalam tag <table>.
Di tag <table> kita dapat menambahkan parameter seperti ketebalan garis dari table (border), jarak dari isi tabel dengan garis-garis table(cellpadding), jarak antar kolom dan baris (cellspacing).
Oke kita coba tambahkan nilai dari parameter border menjadi 10 agar terlihat jelas perbedaannya.
Contoh Berikutnya :
<table border="10"><!-ubah menjadi 10 -->
<tr>
<td>BARIS [1], KOLOM [1]</td>
<td>BARIS [1], KOLOM [2]</td>
</tr>
<tr>
<td>BARIS [2], KOLOM [1]</td>
<td>BARIS [2], KOLOM [2]</td>
</tr>
</table>
Hasilnya Menjadi lebih tebal garisnya :
Coba sekarang kita tambahkan lagi parameternya di tag <table>
<table border="10" cellpadding="10">
Terlihat disana jarak antara pinggir kolom dengan tulisan mempunya jarak dibandingkan yang sebelumnya..
Sekarang ubah lagi tag tablenya menjadi :
<table border="10" cellspacing="10">
Kita pasti juga akan membuat tabel seperti dibawah ini :
<table border="5" cellpadding="5" cellspacing="5">
<tr>
<td rowspan="2">KOLOM [1]</td>
<td>BARIS [1], KOLOM [2]</td>
</tr>
<tr>
<td>BARIS [2], KOLOM [2]</td>
</tr>
</table>
Hasilnya :
Disini kita menggabungkan dua buat baris menjadi 1 tanpa mempengaruhi kolom disebelahnya dengan menambahkan paramater rowspan di dalam tag <td>, 2 disini menyatakan 2 buah baris.
Sekarang kita menggabungkan dua buah Kolom menjadi 1.
<table border="5" cellspacing="5">
<tr>
<td>BARIS [1], KOLOM [1]</td>
<td>BARIS [1], KOLOM [2]</td>
</tr>
<tr>
<td colspan="2">BARIS [2] </td>
</tr>
</table>
Kita menambahkan parameter colspan di tag <td> untuk mengabungkan dua buah kolom menjadi satu baris, sama halnya dengan rowspan sebelumnya.
Kali ini kita menambahkan parameter cellspacing yang membuat jarak antara pinggir tabel dengan kolom.
Untuk selebihnya lagi kita bisa menambakah misalnya panjang dari table atau tingginya, warna background dari table dan kolom-kolomnya.
<table width="500" height="100" border="10" cellpadding="10" cellspacing="10" bgcolor="red">
<tr>
<td bgcolor="blue">BARIS [1], KOLOM [1]</td>
<td bgcolor="yellow">BARIS [1], KOLOM [2]</td>
</tr>
<tr>
<td bgcolor="green">BARIS [2], KOLOM [1]</td>
<td bgcolor="white">BARIS [2], KOLOM [2]</td>
</tr>
</table>
Kita bahas satu persatu tentang isi dari tag-tag tersebut dah parameternya :
Didalam tag <table> saya menyisipkan parameter sebagai berikut
Width : untuk mengatur lebar dari tabel.
Height : di gunakan untuk mengatur tinggi dari tabel.
Border : ketebalan dari garis pinggir tabel.
Cellpadding : Mengatur jarak antara pinggir kolom dan text (isi dari kolom).
Cellspacing : Mengatur jarak antara pinggir table dan kolom.
Bgcolor : Memberi background warna pada tabel.
Di tag <td> pun dapat kita tambahkan warna juga.
Untuk memudahkan kita pada penamaan warna saya sudah memakai inisialisasi dengan memakai color name tanpa memakai color HEX (Hexadecimal) yang memakai code seperti #F0F8FF, #FAEBD7, #00FFFF, #7FFFD4, #F0FFFF. Kita bahas tentang pewarnaan di step selanjutnya saja ya oke.
HTML LIST
Untuk menampilkan list list di HTML kita menggunakan tag. Ada beberapa macam list di HTML, Unodered list dan order list. Berikut contohnya yang akan membuat kita paham apa perbedaan antara kedua itu.
Untuk pembuka tag list pertama kita memakai tag <ul>.
<ul>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ul>
Untuk pembuka tag list kedua kita memakai tag <ol>
<ol>
<li>List 1</li>
<li>List 2</li>
<li>List 3</li>
</ol>
Terlihat keduanya mempunyai perbedaan.
Tuk sementara sekian dulu artikel dari saya, mungkin dilain waktu kita akan membahasa tentang XHTML, CSS dan bahasa pemrograman Website (ASP, JSP, PHP). Tapi sepertinya yang saya bahas dilain waktu PHP saja ya..
See Next Time.....
Best Regards
0 komentar:
Posting Komentar