Pengenalan HTML
Assalamualaikum wr.wb
Pada kesempatan kali ini saya akan membagikan sedikit informasi terkait pengenalan HTML dan bagaimana cara menjalankan programnya. Sebelum itu saya akan menjelaskan sedikit mengenai HTML
Hyper Text berarti teks aktif maksudnya adalah sebuah teks yang memiliki kemampuan dapat terhubung antara teks suatu halaman dengan halaman yang lain.
Markup Language menjelaskan bahwa dokumen HTML ini disusun oleh tag- tag markup dan setiap tag pada HTML menjelaskan perintah isi dokumen yang berbeda- beda.
Apa Fungsi dari HTML?
HTML adalah teknologi dasar yang digunakan untuk membuat dasar dari sebuah halaman web dengan menghubungkan teks / link antar halaman, memberi struktur dan membagikan informasi yang terkait dengan sebuah halaman web. Lalu kenapa HTML pada Web bisa menampilkan animasi- animasi dan efek-efek yang bagus?Hal itu dikarenakan Konten sebuah web selain teks dapat bermacam- macam seperti video, audio, gambar, dan agar tampilan web kita semakin menarik biasanya didalam sebuah web di tambahkan Javascript sebagai animasi, dan CSS (Cascading Style Sheet) sebagai pemberi make-up atau style.
Sebelum kita bahas cara penulisan HTML kalian harus memiliki aplikasi text editor, apa itu text editor? text editor adalah sebuah aplikasi yang digunakan untuk membuat atau mengedit teks. Ada banyak sekali aplikasi text editor yang dapat digunakan dalam membuat dokumen HTML seperti sublime text, notepad, dreamweaver, notepad++.
Apa itu Tag? apa yang dimaksud dengan Tag?
Tag adalah suatu tanda pengenal dokumen pada html yang terdiri 2 bagian yaitu tag pembuka contoh <nama_tag> dan tag penutup contoh </nama_tag>, tanda “/” pada tag penutup menandakan bahwa sifat yang dibawa oleh tanda pengenal berakhir. Namun ada beberapa Tag yang berdiri sendiri diantaranya : <br/>, <hr/>, <img src="" />. Tag - tag ini bersifat unik karena tag ini tidak perlu menggunakan tag penutup.
Apa itu Atribut? apa yang dimaksud dengan Atribut?
Atribut adalah suatu sifat khusus yang dapat diberikan pada tag pembuka contoh <nama_tag atribut=“nilai”> isi dokumen </nama_tag>, dan didalam satu Tag kita dapat memberikan beberapa atribut contoh <nama_tag atribut1=“nilai” atribut2=“nilai”> isi dokumen </nama_tag>,
Bagaimana? sudah paham? yuk kita bahas ke contoh membuat HTML
Membuat HTML
Untuk menuliskan HTML bisa menggunakan Notepad ataupun Notepad++, secara umum bentuk HTML sebagai berikut.
<html>
<head>
<title>...isi title...</title>
</head>
<body>... isi atau formasi yang akan ditampilkan pada browser web</body>
</html>
Section Head berfungsi untuk menampilkan judul halaman. Section Body untuk menampilkan keseluruhan informasi dalam halaman web.
Berikut langkah-langkah dalam membuat file HTML dimana file tersebut terdapat 1 form bebas dan 1 file proses
Pertama buka program aplikasi XAMPP lalu aktifkan MySQL dan Apache untuk mengakses web server
Selanjutnya saya akan membuat form pada lembar kerja notepad++ , dimana form memiliki kontrol form yang digunakan untuk mengklasifikasikan masukan dari pengguna. Berikut skrip form yang telah dibuat:
<html>
<head>
<title>Pembuatan Form</title>
</head>
<body><form action="fileterimakasih.html" method="POST">
Nama : <br>
<input type="text" name="nama" size="21" maxlength="20">
<br><br>
Asal Daerah : <br>
<input type="text" name="asal daerah" size="21" maxlength="15">
<br><br>
Jenis Kelamin : <br>
<input type="text" name="jenis kelamin" size="21" maxlength="10">
<br><br>
<button type="submit" value="save">Save</button>
<button type="reset" value="reset">Save</button></form>
</body>
</html>
simpanlah koding tersebut dalam folder dengan nama “formbebas”, carilah folder “xampp”, kemudian cari folder “htdocs” buatlah folder baru pada lokasi tersebut, sehingga (dalam laptop saya) terbentuk seperti ini “c:/xampp/htdocs/HTML/formbebas.html”
Berikut merupakan output form bebas yang telah praktikan buat
Selanjutnya saya akan membuat file proses dengan nama file “fileterimakasih.html” dengan menggunakan skrip seperti berikut:
<html>
<head>
<title>Pembuatan Form</title>
</head>
<body><br><br>
thank you for entering your data</body>
</html>
simpanlah koding tersebut dalam folder dengan nama “fileterimakasih”, carilah folder “xampp”, kemudian cari folder “htdocs” buatlah folder baru pada lokasi tersebut, sehingga (dalam laptop saya) terbentuk seperti ini “c:/xampp/htdocs/HTML/fileterimakasih.html”
Selanjutnya saya akan melakukan action dengan memasukkan data pada form yang telah dibuat
Lalu save maka program akan langsung mengarah pada “fileterimakasih.html” yaitu tampilan berhasil.
Apabila menekan button reset pada data yang telah praktikan input maka halaman form akan kembali kosong
Maka output dari action Reset, dapat dilihat bahwa ketika kita mengklik button Reset maka program akan mengarah kembali pada “formbebas.html” Berikut output yang diperoleh.
Semoga artikel ini dapat bermanfaat. Selamat mencoba dan Terima Kasih!
Referensi
