Belajar HTML Dasar | HTML (Hypertext Markup Language) adalah bahasa markup yang umum digunakan untuk membuat halaman web. HTML bukanlah sebuah bahasa pemrograman. Apabila di tinjau dari namanya, HTML merupakan bahasa markup atau penandaan terhadap sebuah dokumen teks. Tanda tersebut di gunakan untuk menentukan format atau style dari teks yang di tandai.
Sejarah Singkat HTML
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya. Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus disetujui dulu oleh W3C untuk dievaluasi secara ketat. Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak akan bisa menampilkan HTML tersebut.
HTML versi 1.0
Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya (wrapping).
HTML versi 2.0
Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir dari adanya homepage interaktif.
HTML versi 3.0
HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2.
HTML versi 4.0
HTML versi 4 ini merupakan HTML versi terakhir pada saat sumber ini diambil.
Fungsi HTML
HTML memiliki banyak fungsi sebagai bahasa markup, kurang lebih berikut adalah fungsi utama HTML:
- Membuat, mendesain, dan mengontrol tampilan dari Web Page (Halaman Web) dan isinya.
- Mempublikasikan document secara online sehingga bisa diakses, dilihat dari keseluruh dunia.
- Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.
- Menambahkan object – object seperti image, audio, video dan juga java applet (aplikasi java seperti java game dll) dalam document HTML.
Memulai Script HTML
Struktur Utama HTML
HTML terdiri dari beberapa tag dasar yang harus ditulis ketika membuat halaman website, diantaranya adalah terdiri dari tag judul, header, body dan footer. mari kita bahas beberapa tag dasar tersebut :
Yang pertama adalah tag pembuka html, kurang lebih seperti di bawah ini
<html> = Ini disebut tag pembuka html, perlu di ingat, setiap ada tag pembuka selalu ada tag penutup, atau script nya akan error.
</html> = Ini disebut tag penutup html, ciri-ciri yang paling mudah untuk membedakan tag penutup dengan tag pembuka adalah garis miring (/) setelah tanda(<) contohnya : </html> ini berarti tag penutup atau jika tag pembukanya <style> maka tag penutupnya </style>, contohnya lagi <judul> maka tag penutupnya adalah </judul>, nah silahkan di kembangkan lagi.
<title> = Ini adalah tag pembuka untuk memberikan judul
</title> = Ini tag penutupnya
<head> = Ini tag pembuka untuk menampilkan Header
</head> = Dan ini adalah tag penutupnya
<body> = Ini tag pembuka untuk body, di bagian inilah yang akan digunakan untuk menampilkan konten website
</body> = Dan ini sebagai tag penutupnya.
<footer> = Tag ini biasanya digunakan untuk menampilkan pembuat atau pendesain halaman website
</footer> = Dan ini adalah tag penutupnya.
Dan cara penulisan kelima tag di atas adalah seperti di bawah ini :
<html>
<title>
</title>
<head>
</head>
<body>
</body>
<foter>
</footer>
</html>
Nah setelah sedikit mengerti tentang dasar penulisan bahasa html, kita akan langsung praktek membuat halaman website sederhana, namun kita membutuhkan 2 alat yang mutlak harus dimiliki dan sudah terinstal di komputer masing-masing, kedua alat tersebut diantaranya adalah :
1. Browser
Dalam pembelajaran kali ini browser digunakan untuk membuka dan melihat hasil dari script HTML yang telah kita tuliskan. Browser ini bisa berupa Internet Explorer bawaan windows, Mozila firefox, atau Google Chroom.
2. Text Editor
Alat ini digunakan untuk menuliskan script, text editor ini bisa berupa notepad asli bawaan windows, wordpad, macromedia dreamweaver atau notepad++, tapi saya lebih suka menggunakan Notepad++ karena jika terdapat penulisan script yang salah akan kelihatan dengan jelas. Jadi, jika anda sedang dalam pembelajaran, saya rekomendasikan untuk menggunakan notepad++.
Oke, saya asumsikan kedua peralatan tersebut sudah terinstal di komputer, saatnya kita mulai project pembuatan halaman website sederhana
Buka notepad++ yang telah terinsatal tadi seperti gambar di bawah ini
Lalu klik icon notepad++ yang ada tanda panah warana merah seperti gambar di atas,
Setelah halaman kosong notepad++ terbuka, kemudian simpan pada drive komputer kita, disini saya menyimpannya di DATA (D:), perhatikan gambar di bawah ini
Setelah masuk di drive D, buat folder baru dengan cara klik kanan pada area kosong --> New --> Folder
Kemudian folder baru tersebut kita beri nama Belajar Website seperti gambar di bawah ini
Selanjutnya kita buka folder tersebut, lalu kita ganti Seve as type nya, dari Normal text file (*txt) menjadi all file, perhatikan gambar di bawah ini
Setelah Save as type kita ubah menjadi all type, kemudian kita beri nama file name nya latihan1.html lalu klik save.
Dari sini kita akan mulai menuliskan script html nya, tuliskan persis seperti gambar di bawah ini
Kalau sudah ditulis lengkap jangan lupa di save, caranya bisa menggunakan Ctr+S, bisa gunakan menu file -> Save atau bisa juga menggunakan icon Save seperti gambar dibawah in
Kalau sudah di save, saatnya uji coba, kita cari filenya di DATA :D -> Belajar Website akan kita temukan file berekstensi html seperti gambar di bawah ini
Kemudian kita buka dengan cara klik dua kali file tersebut, atau bisa juga dengan cara klik kanan file tersebut lalu open with perhatikan gambar dibawah ini
Open With bisa gunakan Internet Explorer, Google Chrome atau Mozila Firefox, tapi disini saya memilih menggunakan Google Chrom, lalu akan muncul tampilan seperti gambar di bawah ini
Loh kok kosong, tenang saja, karena yang kita tulis tadi bukanlah isi atau content nya, tapi tag nya, tag html tidak akan ditampilkan di browser jadi nya Cuma tampilan kosong seperti gambar diatas, sekarang kita coba tambahkakn content kecil di antara tag-tag html tersebut, perhatikan gambar dibawah ini
Diantara Tag <title> dan </title> kita tambahkan Belajar Membuat Website jadinya Seperti ini gambar diatas, atau seperti di bawah ini
<title>
Belajar Membuat Website
</title>
Jangan lupa di save, kalau sudah kita buka kembali halaman browser yang kosong tadi, lalu tekan F5 dan perhatikan title nya, yang asalnya Cuma nama file latihan1.html sekarang sudah berubah seperti script yang telah kita tambahkan
Kemudian kita tambahkan lagi script lainnya, tuliskan persis seperti gambar di bawah ini lalu save
Kemudian kita kembali ke browser lalu refresh atau tekan F5, maka tampilannya akan seperti di bawah ini
Nah, dari sini kita sudah mampu membuat file html dengan sangat sederhana, untuk memperindah tampilan agar sesuai dengan yang kita harapkan, selanjutnya akan kita bahas pada bab selanjutnya.
0 Response to "Belajar HTML Dasar"
Post a Comment