Pengertian HTML dan fungsinya
Hari Ini:
Pemrograman HTML
HTML adalah singkatan dari Hyper Text Markup Language yang merupakan bahasa pemrograman terstruktur yang dikembangkan untuk mrmbuat halaman website yang dapat diakses atau ditampilkan menggunakan web browser.HTML sendiri secara resmi lahir pada tahun 1989 oleh tim Berners Lee dan dikembangkan oleh World Wide Web Consortium (W3C), yang kemudian pada tahun 2004 dibentuklah Web Hypertext Application Tecnology Working Group (WHATG) yang hingga kini bertanggung jawab akan perkembangan bahasa HTML ini.Hingga kini telah mengembangkan HTML 5, sebuah versi terbaru dari HTML yang mendukung tidak hanya gambar dan teks, namun juga menu interaktif, audio, video dan lain sebagainya.
Dalam ilmu pemrograman sering dikenal istilah compile agar dapat menjalankan hasil coding yang kita buat, namun untuk file HTML lebih mudah untuk dilakukan karena HTML tidak perlu aplikasi untuk mengcompile file tersebut.Bagaimana itu ? File HTML seperti yang disebut diatas, dijembangkan untuk halaman website di dunia maya sedangkan untuk dapat menjelajahi web-web tersebut kita memerlukan aplikasi web browser. Jadi untuk menjalankan file HTML ini sangatlah mudah, kita hanya perlu membuka aplikasi web browser yang kita miliki.
Sebagai bahasa markup,HTML membutuhkan sebuah fungsi atau tanda untuk memberitahu web browser apa yang perlu atau tidak perlu dilakukan. Tanda tersebut disebut dengan "Tag". Tag memiliki ciri-ciri ditulis di dalam"<....>". Kebanyakan tag dalam HTML ditulis secara berpasangan, yaitu tag pembuka dan penutup yang biasanya memiliki tanda"/" didalam "<....>". Seperti contoh:
<html>.....</html>
<p>....</p>
dll sebagya...
Namun ada yang berdiri sendiri atau tidak berpasangan(single tag), seperti contoh berikut ini:
</br>
Element ialah semua data atau isi yang berada didalam sebuah tag.
Attribute ialah sebuah informasi yang diberikan oada tag,biasanya dituliskan pada tag pembuka. Contohnya:
<p align=" left">.........</p>
Seperti halnya semua bahasa pemrograman memiliki sebuah struktur dasar penulisan,jika di HTML harus diawali dengan tag DOCTYPE untuk menunjukkan pada browser bahwa document tersebut adalah file html.Contoh struktur dasar html:
Santai dulu sobat jangan tegang,bljr pemrograman itu harus santai dan punya niat agar bisa langsung masuk kepikiran.wkwkwkwkwk.oke lanjut saja.......
Kode pembuatan:
<!DOCTYPE html>
<html>
<head>
<title>.....</title>
</head>
<body>
<header>
isi header
</header>
<p>
paragraf isi
</p>
</body>
</html>
Mudah bukan:) ,jadi intinya itu harus paham dulu strukturnya.....masih semngat bacanya???? Ya harus semangat........
Kode pembuatan:
<!DOCTYPE html>
<html>
<head>
<title>.... </title>
</head>
<body>
<header>
isis header
</header>
<p>assalamualaikum wr.wb</p>
<footer>......</footer>
</body>
</html>
Setiap sebuah artikel yang ada di sebuah website seperti blog saya ini:) harus memberi judul namun tag ini memiliki beberapa varian dari h1- h6 dari setiap tag tersebut yang membedakan hanayalah ukurannya.
Kode pembuatan:
<!DOCTYPE html>
<html>
<head>
<title>....</title>
</head>
<body>
<header>
isi header
</header>
<h1>Judul</h1>
<h2>Judul</h2>
<h3>Judul</h3>
<h4>Judul</h4>
<h5>Judul</h5>
<h6>Judul</h6>
<footer> ......</footer>
</body>
</html>
Dalam bahasa HTML kita dapat membuat urutan data atau dibuat menjadi "List". Tipe list itu sendiri dibagi menjadi dua, yaitu ordered list(angka)<ol>....</ol>, unordered list(titik)<ul>.....</ul>.
Kode pembuatan:
<!DOCTYPE html>
<html>
<head>
<title>....</title>
</head>
<body>
<header>
<h1>ordered list</h1>
<ol>
<li>isi data</li>
</ol>
<h1>unordered list</h1>
<ul>
<li>isi data</li>
</lu>
<footer> isi footer</footer>
</body>
</html>
Salah satu yang paling sering digunakan adalah text yang dapat terhubung dengan halaman lain. Cara membuatnya dengan menggunakan tag "<a>....</a>". Namun ada atribut dasar yang harus ada di dalam tag ini, yaitu " href ",sebelumnya mencoba buatlah coding dibawah disebuah file baru,terpisah dari file tutorial sebelumnya. Kemudian isi nilai dari" href" dapat diisi nama file
Kode pembuatan:
<!DOCTYPE html>
<html>
<head>
<title>....</title>
</head>
<body>
<header>
isi<header
</header>
<a href ="(nama file)"> hyperlink on tab</a>
<footer> isi footer </footer>
</body>
</html>
Selanjutnya cara memasukkan gambar di dalam HTML, gak mungkin kan klo website tidak ada gambar satu pun rasanya pembaca pusing bacanya tidak ada warna warni dari gambar. Tag yang digunakan adalah <img> selain tag itu ada yang harus di masukkana ke dalam tag image yaitu src sebagai sourcenya, yang harus diperhatikan adalah gambarnya harus berformat jpg,png,dll selama masih berwujud gambar.
Kode pembuatan:
<!DOCTYPE html>
<html>
<head>
<title>.....</title>
</head>
<body>
<header>
isi header
</header>
<img src="(nama file)">
<footer> isi footer</footer>
</body>
</html>
Didalam bahasa HTML dikenal fungsi atau tag untuk membuat tabel didalam sebuah halaman. Table ini digunakan untuk membuat template ataupun meletakkan layout sebuah halaman. Cara pembuatan tabel menggunakan tag "<table>.....</table>". Kemudian yang pertaman dibuat setelah itu ialah membuat row/baris,menggunakan tag "<tr>....</tr>" setelah itu tinggal diisikan dengan data atau kolom menggunakan tag "<td>.....</td>". Dan jangan lupa sobat tambahkan atribut yang dibutuhkan seperti border untuk membuatbgaris tepi, width mengatur panjang, height mengatur lebar dan lain sebagainya.
Kode pembuatan:
<!DOCTYPE html>
<html>
<head>
<title>.....</title>
</head>
<body>
<header>
isi header
</header>
<table border = "1px" width= "500px" height="250px" align="center">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<footer> isi footer </footer>
</body>
</html>
Rasanya tidak enak klo suatu script tidak diberi suatu penjelasan/komentar agar mudah dipahami oleh si pembaca dan tidak akan terbaca saat di compiler. Tag yang digunakan adalah "<!--......-->
Kode pembuatan:
<!DOCTYPE html>
<html>
<head>
<title>....</title>
</head>
<body>
<header>
isi header
</header>
<p> ini kalimat yang ingin ditampilakan</p>
<!--isi komentar anda-->
<footer> isi footer </footer>
</body>
</html>
Form adalah cara untuk mengambil suatu data yang diinput user kedalam kolom,tapi form tidaklah penting untuk digunakan kecuali ada program pendukungnya seperti PHP, SQL, java, javascript.
Tag yang digunakan untuk membuat form dari HTML adalah "<input/>" yang dapat kita sesuaikan misalnya text, password, radio, checbox, dan submit.
Kode pembuatan:
<!DOCTYPE html>
<html>
<head>
<title>....</title>
</head>
<body>
<form action=" form.html" method="get">
Nama: <input type="text" name="nama" value="Nama Anda"/>
<br/>
password: <input type="password" name="password"/>
<br/>
Jenis Kelamin:
<input type="radio" name="jenis_kelamin" value="laki-laki" checked/>
Laki-Laki
<input type="radio" name="jenis_kelamin"
value="perempuan"/>
Perempuan
<br/>
Hobi:<input type="checkbox" name="hobi_baca"/>
Membaca Buku
<input type="checkbox" name="hobi_nulis" checked/>
Menulis
<input type="checkbox" name="hobi_mancing"/>
Memancing
<br/>
Asal Kota:
<select name="asal_kota">
<option value="Kota Jakarta">Jakarta</option>
<option>Bandung</option>
<option value="Kota Semarang" selected>Semarang</option>
</select>
<br/>
Komentar Anda:
<textarea name="komentar" rows"5" cols="20">
silahkan berkomentar
</textarea>
<br/>
<input type="submit" value="Mulai proses!">
</form>
</body>
</html>
Ini atribut yang serung digunakan dalam tag input,yaitu untuk memilih suatu pilihan yang mengguanakan tipe radio
Kode pembuatan:
Jenis Kelamin:
<input type="radio" name="jenis_kelamin" value="laki-laki" checked />
Laki-Laki
Membuat menu optional dengan banyak data dapat dilakukan dengan menambahkan lagi tag inout dengan tipe radio lagi,dan berguna lebih dari satu pilihan.
Kode pembuatan:
Jenis Kelamin:
<input type="radio" name="jenis_kelamin"
value="laki-laki"checked />
Laki-Laki
<input type="radio name="jenis_kelamin"
value="perempuan"/>
Perempuan
Memasukkan data berupa artikel sebuah paragraf panjang dapat dilakukan menggunakan tag "<textarea>". Atribut didalam text area digunakan untuk memberi nama kotak,tinggi kolom,dan lebar kotak.
Kode pembuatan:
Komentar Anda:
<textarea name="komentar" rows="5" cols="20">
silahkan berkomentar
</textarea>
Setelah selesai membuat input data yang telah ada perlu disimpan atau jika ada kesalahan perlu diulang atau reset seperti ssmula. Cara membuat tombol submit hanyalah dengan menambhakan "type= submit" pada tag input, begitu pula dengan tombol reset,menambahkan "type = reset" pada tag input.
Kode pembuatan:
<input type="submit" value="Mulai proses!">
<input type="reset" value="hapus"/>
Iframe memungkinkan website kita mengambil konten dari website lain dan menampilaknnya lada website kita sendiri. Jadi kali ini kita akan memasukkan konten dari website lain dan kita masukkan ke dalam website kita misalnya:youtube, pertama buat file html seperti biasa,namun pada body kita isikan tag<iframe src=""></iframe>.
Kode pembuatan:
<!DOCTYPE html>
<html>
<head>
<title>....</title>
</head>
<body>
<h1></h1>
<iframe width="560" height="315" src="file.html"></iframe>
</body>
</html>
0 Response to "Pengertian HTML dan fungsinya"
Post a Comment