harfendino.com - hybrid of science

harfendino.com
hybrid of science

PENGENALAN HTML

HTML (HyperText Markup language) adalah suatu metoda untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda atau masking up pada suatu naskah teks dan bukan sebagai program. Pada awalnya HTML dikembangkan sebagai subset SGML (Standar Generalized Mark-up Language). Karena lebih sederhana daripada SGML yang ditekan pada format dokumen yang berorientasi pada aplikasi maka HTML ini menjadikan sebuah bahasa markup standar yang digunakan untuk menampilkan halaman web. HTML berupa kode-kode tag yang dapat menginstruksikan pada web browser untuk menampilkan halaman sesuai yang diinginkan. A. HTML

Memodifikasi format teks.
Menampilkan daftar sesuatu dalam bentuk point-point (item).
Membuat link.
Menyisipkan citra/gambar.
menampilkan informasi dalam bentuk tabel.

B. Dasar Web File-file HTML dapat ditampilkan sesuai dengan kebutuhan karena terdapat marker yang mengimplementasikan dalam bentuk tag-tag HTML. <tag> Teks yang akan dipengaruhi oleh tag <tag> Beberapa contoh fungsi tag yang terdapat pada file HTML , antara lain : Tulisan akan tercetak tebal Dalam hal ini tanda "/" menunjukkan akhir dari suatu tag. Tag yang paling dasar digunaan dalam file HTML adalah diawali dengan <html> dan </html>. Kedua tag ini berfungsi untuk mendefinisikan bahwa teks yang terdapat di antara tag tersebur adalah format HTML. <html> Teks </html> Beberapa macam fungsi tag pada file HTML antara lain : 1. Head dan Title bar (Judul Page) Kode <head> dan <title> digunakan untuk memberikan judul pada title bar halam web anda. Untuk lebih jelasnya, berikut contoh penerapannya : <html> <head> <title$gt;Latihan menmbuat title bar</title> </head> </html> Maka hasilnya menjadi :

2. Body Kode <body> pada awal dan </body> ini dipergunakan sebagai tempat menuliskan teks dan berbagai aksesoris pendukung lainnya yang akan ditampilkan pada halaman web. Untuk memperjelas statment di atas, berikut contoh penulisan tag <body> sebagai berikut: misal kita tulis kode html-nya sebagai berikut : <html> <head> <title>latihanbody</title> <head> <body>Teks atau asesoris yang ingin anda tampilkan pada halaman web</> </html> berikut hasilnya :

3. Format Text

Dalam hal ini, ada beberapa tag untuk membuat/memformat teks yang kita tampilkan pada halaman web yang kita buat sesuai dengan yang kita inginkan seperti huruf tebal, cetak miring dll. Berikut penerapannya : Misal huruf yang akan kita format adalah "a"

Tag teks yang ingin dibuat tebal

a = a

Tag teks yang ingin dibuat miring

a = a

Tag teks yang ingin dibuat bergaris bawah

a = a

Tag <s>teks yang ingin diberi garis tengah</s>

<s>a</s> = a

Kita juga bisa menggabungkan beberapa tag, misal kita ingin mencetak huruf tebal sekaligus miring, jadi tag-nya akan menjadi seperti berikut :

a = a

Tag teks yang ingin format

1. Tag teks akan bertipe sesuai dengan kode yg dituliskan contoh : teks akan bertipe Times New Roman = teks akan bertipe Times New Roman b. teks akan berukuran sesuai dengan kode yg dituliskan contoh : teks akan berukuran 5 = teks akan berukuran sesuai dengan kode yg dituliskan c. teks akan berwarna sesuai dengan kode yg dituliskan contoh : = teks akan berwarna kuning d. Untuk kombinasi format tulisan, dapat ditulis sebagai berikut : teks/tulisan akan berformat sesuai dengan kode yg dituliskan contoh : teks/tulisan akan bertipe verdana, berwarna merah dan berukuran 5<.font> = teks/tulisan akan bertipe verdana, berwarna merah dan berukuran 5

4. Heading Heading ini berfungsi untuk mengatur ukuran teks. Tag heading ini terbagi menjadi 6 ukuran h1, h2, h3,.....h6. Berikut contoh penerapannya :

5. Preformat Tag <preformat> ini berfungsi untuk menampilkan teks apa adanya. Untuk memperjelas statment di atas mari kita coba kode html tersebut : contoh :

<pre>
  Jika hati telah menetapkan sesuatu
           jika hati telah memilih sesuatu
                  dan jika itu adalah pilihan dari lubuk hatimu yang terdalam
                            maka penuhilah permintaan hatimu yang suci itu                                
                                       ...test...test...1...2..dicoba
</pre>

maka teks dalam halaman web akan menjadi seperti ini :

Jika hati telah menetapkan sesuatu
           jika hati telah memilih sesuatu
                  dan jika itu adalah pilihan dari lubuk hatimu yang terdalam
                            maka penuhilah permintaan hatimu yang suci itu                                
                                       ...test...test...1...2..dicoba

6. Penyisipaan Citra / Gambar Untuk menyisipkan gambar pada halaman web kita menggunakan tag <img src="file tempat gambar disimpan" width=lebar gambar higth=tinggi/panjang gambar>. Untuk lebih jelasnya mari kita coba bersama : Misalnya kita mempunyai/menyimpan foto di alamat web tertentu(photobucket.com, www.friendster.com, dsb) maka kita dapat menampilkan gambar tersebut kedalam halaman web kita dengan cara sbb: kita ketikan tag ditempat dimana kita akan menaruh gambar tersebut, misal : saya ingin gambar muncul di bawah kode ini: <img src="http://photos-112.friendster.com/e1/photos/21/18/58828112/1_518577098l.jpg" width=100 hight=50>

7. Tabel Untuk menampilkan tabel kedalam halam web kita, tag yang kita gunakan adalah <table> untuk baris kita gunakan tag <tr> dan untuk kolom kita gunakan tag <td>. Untuk lebih jelasnya mari kita coba tag-tag di atas : Kita akan membuat tabel dengan ukuran dua kolom dua baris, maka kode yang kita tulis adalah sebagai berikut : <table border=2 color=gray> <tr> <td>baris ke-1 dan kolom ke-1</td> <td>baris ke-1 dan kolom ke-2</td> <tr> <td>baris ke-2 dan kolom ke-1</td> <td>baris ke-2 dan kolom ke-2</td> </tr> </tr> </table> maka hasilnya akan menjadi seperti dibawah ini :

baris ke-1 dan kolom ke-1	baris ke-1 dan kolom ke-2
baris ke-2 dan kolom ke-1	baris ke-2 dan kolom ke-2

Demikian artikel ini saya susun, semoga dapat bermanfaat bagi anda. Dan tak lupa saya ucapkan terima kasih kepada para sumber ilmu yang membagikan ilmunya dengan gratis kepada saya. Jika ada kesalahan dalam penulisan ini saya mohon maaf dan saran atau kritik-nya saya tunggu. Sekian dan terima kasih. Sumber : - www.wikipedia.com - http://kolom-tutorial.blogspot.com - www.ilmukomputer.com ~~~Selamat mencoba dan semoga hal yang sederhana ini berguna bagi anda~~~