Crazy Slot7

Kali ini gue akan melanjutkan tentang HTML, ini adalah lanjutan dari post sebelumnya Mengenal HTML.

Sama seperti sebuah surat yng ditulis secara terstruktur mulai dari tanggal,nomor surat,perihal,isi dan lain-lain. Maka begitu pula HTML. Untuk memahami bagaimana cara membuat script, anda harus terlebih dahulu mengetahui struktur script tersebut. Sebuah website yang tampil cantik di jendela browser juga mempunyai script yang terstruktur. Karena jika tidak terstruktur, maka pastinya output yang tercipta dijendela browser tidak memuaskan.

Struktur pertama ketika kita mulai menulis script HTML 5 , yaitu dengan menulias tag satu baris seperti berikut ini :

<!DOCTYPE HTML>

Pastikan anda menulis DOCTYPE menggunakan huruf kapital seluruhnya. Sedangkan untuk tag-tag lain dalam script HTML, tidak perlu harus huruf kapital semua. Nah, tujuan menulis DOCTYPE apa ? dan mengapa harus diawal script ? Tag ini sebenarnya lebih merupakan jaminan bagi anda bahwa tag-tag yang anda buat sepenuhnya berjenis HTML murni, tanpa ada embel-embel tag lain yang mempengaruhi.

Jadi, ketika browser mulai membaca script dan menemukan tag <!DOCTYPE HTML> , maka browser akan mengenali script tersebut sebagai murni 100% HTML.

Itu untuk HTML 5. Untuk versi sebelumnya seperti HTML 4.01, anda harus menulis pelengkapnya seperti dibawah ini:

<!DOCTYPE> HTML PUBLIC “-//W3C/DTD HTML 4.01 Transitional//EN” ”http;//www.w3.org/TR/html4/loose.dtd>

Panjang banget kan ? Di HTML 5 gak perlu lagi panjang kayak begitu, cukup sederhana saja seperti contoh diawal.

Setelah membuat tag DOCTYPE, selanjutnya menyusun struktur yang terdiri dari HTML,Head, dan Body. Tag untuk HTML yaitu <html>...</html> . Tag untuk Head yaitu <head>...</head> dan Tag untuk body yaitu <body>...</body>. Tag tersebut termasuk tag two-sided tag, jadi harus ada pembuka dan penutup. Berbeda dengan tag DOCTYPE yang bersifat tunggal.

Bagian Head yang terdiri dari tag pembuka <head> dan tag penutup </head> yaitu berfungsi untuk mempengaruhi penulisan judul halaman website yang akan muncul di jendela browser bagian atas. Sedangkan Body yang terdiri dari tag pembuka <body> dan tag penutup </body> berfungsi untuk menampilkan isi dari sebuah halaman web.

Selanjutnya untuk menulis sebuah paragraf, kita memerlukan tag .... Penempatan penulisan paragraf ini yaitu diantara tag <body>...</body>. Tag ... juga bersifat two-sided tag.

Sekarang, mari kita praktekkan apa telah gue jelaskan diatas. Bukalah Notepad anda dan tulis script berikut, dan pastikan jangan ada yang salah :

</DOCTYPE HTML>

<html>

<head>

<title>Membuat HTML</title>

</head>

<body>

<h1>Selamat datang di dunia HTML</h1>

Akhirnya gue bisa makan gratis sepuasnya

Di blog ini anda bisa belajar tentang struktur HTML

</body>

</html>

Simpanlah scripy tersebut dengan nama paragraf.html. Uji coba kan pda browser anda dan hasilnya seperti ini :

Setiap kali menulis teks diantara tag dan , teks itu akan dianggap sebagai paragraf baru. Anda pasti tahu kan cara membuat paragraf baru di MS.Word, yaitu dengan memberi spasi antara satu paragraf dengan paragraf berikutnya. Nah, bagaimana jika anda ingin membuat sebuah data, atau suatu poin-poin tertentu, misalnya seperti begini:

Nama: Fachry Hidayat

Hobi : Main Layang-layang

Alamat : Diatas tanah, dibawah langit.

Jika anda menggunakan tag ... untuk memberi jarak spasi , maka akan seperti begini :

Tampak seperti diatas seperti kurang rapi dalam menuliskan poin-poin tersebut. Untuk membuat desain seperti diatas menggunakan script sperti berikut:

</DOCTYPE HTML>

<html>

<head>

<title>Membuat HTML</title>

</head>

<body>

<h1>Selamat datang di dunia HTML</h1>

Akhirnya gue bisa makan gratis sepuasnya

Di blog ini anda bisa belajar tentang struktur HTML, cara-cara mebuat paragraf disuatu website anda. Dan bagaimana cara kerja tag,sehingga mempermudah mendesain suatu web. Bagaimana cara bermain layang-layang, bagaimana cara bermain rubik, dimana anda seharusnya tinggal, dan kenapa tulisan ini semakin ngawur.

Nama: Fachry Hidayat

Hobi: Main Layang-layang

Alamat : Diatas tanah, dibawah langit.</p.>

</body>

</html>

Lantas, bagaimana agar tidak terjadi jarak spasi yang terlalu lebar antar satu teks dengan teks lainnya ? Solusi dari permasalahan tersebut yaitu dengan menggunakan tag . Tag ini berjenis one-sided tag , sehingga cukup saja ditulis seperti berikut :

Nama: Fachry Hidayat

Hobi: Main Layang-layang

Alamat : Diatas tanah, dibawah langit.

Pada intinya tag berfungsi untuk menciptakan baris-baris baru. Setiap anda ingin menciptakan baris teks yang beru, gunakanlah tag tersebut. Sehingga menjadi seperti ini :

Learn more »

Kali ini saya akan membahas mengenai pelajaran sewaktu masih SMA yaitu HTML. Apa yang saya pelajari di SMA hanya dasar-dasarnya saja. Jadi yang akan saya bahas hanya dasar-dasar yang masih saya ingat.

HTML (Hypertext Markup Language) , yang diantaranya :

· Hypertext yaitu sebuah teks yang apabila diklik akan membawa anda pergi dari satu dokumen ke dokumen lainnya. Hypertext berwujud sebuah link yang mengantar anda ke dunia internet yang sangat luas.

· Markup merupakan Tag (semacam kode) yang mengatur layout dan tampilan-tampilan visual yang kita lihat di sebuah website, termasuk font,warna teks,gambar.

· Language merupakan petunjuk bahwa HTML adalah semacam script pemrograman.

Kesimpulannya yaitu HTML merupakan script pemrograman yang mengatur bagaimana kita menyajikan informasi di dunia internet dan bagaimana informasi itu membwa kita meompat dari satu tempat ke tempat lain.

Apa itu Tag ? Tag merupakan semacam kode. Dalam dunia HTML, Tag adalah teks yang ditulis antara tanda < dan >. Tag akan menentukan bagaimana teks akan tampil di jendela browser,bagaimana tabel akan dibuat,gambar apa yang disajikan.

Contohnya, jika kita ingin menulis teks seperti ini di browser:

GRATIS Makan Sepuasnya

Kata “GRATIS” di buat lebih tebal dari teks lainnya. Kalau diketik dalam MS Word, hanya dengan menekan tombol Bold (Ctrl+B) yang memang sudah ada, teks tersebut akan tebal. Sedangkan dalam HTML, tombol seperti Bold,Italic dan sebagainya tidak ada. Oleh karena itu teks yang diberi efek tebal harus di beri Tag. Tag untuk memberi efek tebal yaitu dan untuk mengakhirinya .

Sehingga dalam HTML akan jadi begini :

GRATIS Makan Sepuasnya

Mengapa ada 2 Tag ? Yaitu dan . Pada contoh tersebut kita menggunakan two-sided tag yang merupakan tag terdiri dari Tag pembuka dan Tag penutup. Untuk Tag penutup selalu berada di akhir sebuah teks atau disebelah kanan dengan kehadiran tanda ”/” misalnya .

Apakah semua tag HTML berbentuk two-sided tag ? Belum tentu. Beberapa Tag HTML tidak dilengkapi tag penutup. Misalnya tag <img>. Yang berfungsi untuk menghadirkan gambar ke dalam website.

HTML memiliki beberapa versi. Versi terakhir yaitu HTML 5. HTML 5 memiliki kapabilitas baru dibanding versi sebelumnya, HTML 4. Contohnya, HTML 5 memilki tag baru bernama <audio> dan <video> yang secara khusus berfungsi memasang suara dan video ke dalam website. Sedangkan di HTML 4 menggunakan tag <embed> untuk memasang video dan audio. ( sumber: Wikipedia)

Terus, dimana kita menulis script HTML ini ? Seperti membuat aplikasi, script pemrograman bisa ditulis di Visual Basic, Delphi dan lain-lain. Khusus untuk HTML tidak ada editor khusus. Tentunya ada editor canggih seperti Adobe Dreamweaver. Namun jika ingin mempelajari lebih dalam mengenai HTML, gunakanlah editor paling sederhana, gampang di temui ( tidak perlu repot2 jalan kaki atau lari keliling lapangan selama 3bulan) dan pastinya murah meriah karena sudah tersedia di MS Windows. Aplikasi tersebut adalah Notepad. Tinggal klik start, cari yang namanya Notepad atau kalau kesusahan mencari tinggal ketik di kolom pencarian tulis “Notepad”.

Sedangkan untuk menguji script HTML yang telah kita buat yaitu dengan mengujinya pada sebuah aplikasi yang pasti sudah ada disetiap komputer atau kalau yang belum punya tinggal download, yaitu Browser anda sendiri seperti Internet Explorer, Firefox, Google Chrome.

Saya akan mempraktekan script HTML sederhana yang baru saja saya pelajari. Langkah-langkah nya :

1. Buka Notepad

2. Ketik script sederhana di bawah ini. Pastikan anda menulisnya dengan akurat:

<!DOCTYPE HTML>

<html>

<head>

<title>Belajar HTML</title>

</head>

<body>

<h1>Selamat Datang Di Dunia HTML </h1>

Akhirnya gue bisa makan gratis.

</body>