html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
margin: 0;
font-family: 'Open Sans', Arial, 'NanumGothic', sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
padding-top: 70px;
}
Rabu, 08 November 2017
Inilah contoh code syntax highliter
Senin, 30 Oktober 2017
Apa itu DOM (Document Object Model) HTML?
Hallo sobat, berjumpa lagi dengan catatan lanjutan tentang javascript. Kali ini catatan Donga akan bercerita tentang DOM (Document Object Model). Catatan ini menjadi salah satu pilihan Donga, karena dirasa sangat berguna dalam membuat sebuah aplikasi web.
Pengertian
HTML DOM adalah aturan dasar bagaimana cara mendapatkan, mengubah, menambah, atau menghapus elemen HTML. DOM diperlukan oleh javascript untuk menampilkan object dinamis pada layar browser, atau dengan kata lain, HTML DOM adalah cara javascript melihat suatu halaman HTML agar program javascript dapat menampilkan halaman dinamis.
Dari pengertian di atas mungkin kita bisa membayangkan bahwa tujuan dari html DOM adalah menciptakan sebuah object yang dinamis, karena ia berfungsi untuk mendapatkan, mengubah, menambah, atau menghapus element html. Sedangkan kita tahu bahwa element html ini adalah pembentuk sebuah object.
untuk lebih memahami pengertian di atas mari kita lihat satu persatu apa yang bisa dilakukan oleh html DOM :
Mendapatkan Sesuatu dari Element HTML
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";</script>
</body>
</html>
sumber: https://www.w3schools.com/js/js_htmldom_methods.asp
untuk melihat bagaimana html DOM mendapatkan sebuah object, Sobat bisa meng-copy kode di atas kemudian pastekan ke HTML Editor sobat, notepad atau notepad++. Selanjutnya simpan dengan nama get.html. Setelah itu silahkan jalankan di browser, Mozilla Firefox atau Chrome.
Perhatikan apa yang terjadi. Jika Sobat melakukan langkah yang benar, maka akan terlihat tampilan seperti ini :
HTML DOM adalah aturan dasar bagaimana cara mendapatkan, mengubah, menambah, atau menghapus elemen HTML. DOM diperlukan oleh javascript untuk menampilkan object dinamis pada layar browser, atau dengan kata lain, HTML DOM adalah cara javascript melihat suatu halaman HTML agar program javascript dapat menampilkan halaman dinamis.
Dari pengertian di atas mungkin kita bisa membayangkan bahwa tujuan dari html DOM adalah menciptakan sebuah object yang dinamis, karena ia berfungsi untuk mendapatkan, mengubah, menambah, atau menghapus element html. Sedangkan kita tahu bahwa element html ini adalah pembentuk sebuah object.
untuk lebih memahami pengertian di atas mari kita lihat satu persatu apa yang bisa dilakukan oleh html DOM :
Mendapatkan Sesuatu dari Element HTML
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello World!";</script>
</body>
</html>
sumber: https://www.w3schools.com/js/js_htmldom_methods.asp
untuk melihat bagaimana html DOM mendapatkan sebuah object, Sobat bisa meng-copy kode di atas kemudian pastekan ke HTML Editor sobat, notepad atau notepad++. Selanjutnya simpan dengan nama get.html. Setelah itu silahkan jalankan di browser, Mozilla Firefox atau Chrome.
Perhatikan apa yang terjadi. Jika Sobat melakukan langkah yang benar, maka akan terlihat tampilan seperti ini :
Pada browser timbul tulisan "Hello World!. Dari contoh di tersebut kita mendapatkan dua point pelajaran dari html DOM
Pertama bagaimana sebuah fungsi dari javascript menemukan element paragraf dengan id = "demo"
Kedua bagaimana sebuah fungsi dari javascript mengubah content/isi dari element paragraf yang ditemukannya, yang tadinya kosong kemudian diubah dengan kalimat "Hello World!" sebagai content/isi dari element paragraf yang baru.
Masih bingung dengan penjelasan ini? Sekarang coba Sobat buka kembali file get.html tadi, coba lakukan sedikit modifikasi kode di dalamnya, seperti terlihat pada script di bawah ini :
<html>
<body>
<p>Silahkan Klik Kalimat dibawah ini :</p>
<p id="demo" onclick="klikdonga()">Belajar html DOM</p>
<script>
function klikdonga() {
document.getElementById("demo").innerHTML = "Hello World!";
}
</script>
</body>
</html>
Setelah di save, selanjutnya jalankan pada browser, nantinya akan terlihat seperti ini :
Tampilan Sebelum di Klik
Tampilan Setelah di Klik
Disini dapat kita lihat, bahwa html DOM bisa menggantikan kalimat "Belajar html DOM" dengan kalimat baru "Hello World"
Baik, untuk lebih mudah mengingat kita mulai dari pengertian Document. Document adalah seluruh rangkaian kode mulai dari root html (<html>) sampai ke leaf html (<h1>, <a>,<title>). Atau kalau memakai istilah Donga, Document HTML adalah bundel dari kode html. Coba Sobat perhatikan bagan di bawah ini :
Pohon Object Dari HTML DOM
sumber:https://www.w3schools.com/js/js_htmldom.asp
Pada bagan di atas terlihat bahwa Document terletak pada bagian paling atas, hal ini tentunnya menunjukkan bahwa Document mengandung seluruh element HTML dari itulah maka Donga lebih suka menyebut Document ini sebagai Bundel dari kode html. Ibarat sebuah bundel maka didalamnya terletak berbagai macam berkas yang berbeda isinya.
Selanjutnya kita lihat kata Object. Object disini tentunya adalah Object html, object disini adalah tampilan yang ditampilkan oleh Browser. Apakah itu text, paragraf, gambar, video, atau yang lainnya.
Lanjut ke Model adalah Style atau gaya dari object tadi. Maksud model disini tidak hanya sebatas model tampilan static saja, seperti warna text merah atau kuning, atau text huruf kapital semua, atau huruf kecil semua. Tetapi pengertian dari Model disini lebih luas, bisa mencakup cara penyajian yang bersifat dinamis dari sebuah object. Misalkan obaject yang tadinya tidak ada di halaman browser menjadi ada.Seperti timbulnya sebuah peringatan saat kita menekan tombol yang salah pada halaman browser. Contoh lain misalnya teks yang berjalan dari kiri kekanan, text yang berkedip, dan masih banyak lagi.
Jadi kesimpulannya menurut Donga, Document Object Model (DOM) HTML adalah sebuah document (bundel dari kode HTML) yang akan ditampilkan pada halaman browser dengan style atau gaya atau model, sesuai dengan isi dari document tersebut.
Sedangkan untuk pengertian resmi dari W3C (World Wide Web Consortium) pengertian DOM adalah
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."
Begitulah sepintas kilas pengertian Document Object Model (DOM) HTML, versi "Klik Donga" jika ada yang memiliki cara pandang yang berbeda boleh saja, karena ilmu di internet bebas interpretasi apalagi berkenaan dengan pengertian, Biarlah cara pandang berbeda, asalkan tampilan di browsernya nanti sama. :)
Sabtu, 28 Oktober 2017
Javascript Validasi
Satu catatan lagi, biar gak hilang ilmunya. Pada catatan kali ini Donga ingin menguraikan sebuah kode javascript validasi. Hal ini menurut Donga dirasa penting, karena pada saat kita akan membangun sebuah Web, validasi ini sangat diperlukan, terutama saat kita akan melakukan "Login."
Baik kita langsung saja ke kodenya :
<!DOCTYPE html>
<html>
<body>
<h2>Javascript bisa melakukan validasi intput</h2>
<p>Silahkan masukkan nilai 1 sampai 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// mengambil nilai input dengan id="numb"
x = document.getElementById("numb").value;
// jika x is Not a Number (isNaN) atau kurang dari satu atau lebih besar dari 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Ohh... ternyata ini kode Form ya? heheh. Begitulah kira-kira. Jadi jika form ini diberi nilai 1 sampai 10 maka dia akan memberikan konfirmasi validasi seperti di bawah ini:Baik kita langsung saja ke kodenya :
<!DOCTYPE html>
<html>
<body>
<h2>Javascript bisa melakukan validasi intput</h2>
<p>Silahkan masukkan nilai 1 sampai 10:</p>
<input id="numb">
<button type="button" onclick="myFunction()">Submit</button>
<p id="demo"></p>
<script>
function myFunction() {
var x, text;
// mengambil nilai input dengan id="numb"
x = document.getElementById("numb").value;
// jika x is Not a Number (isNaN) atau kurang dari satu atau lebih besar dari 10
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
document.getElementById("demo").innerHTML = text;
}
</script>
</body>
</html>
Kode ini donga dapatkan dari www.w3schools.com, dan sudah sedikit mengalami perubahan bahasa dari Inggris ke Indonesia, biar lebih mudah di mengerti. Jika Sobat Donga mau melihat bagaimana tampilan dari kode ini saat kita jalankan di browser, tinggal copy saja codenya, pastekan ke notepad atau notepad++,selanjutnya simpan dengan nama formvalidasi.php (bisa juga disimpan dalam bentuk html : formvalidasi.html) kemudian buka menggunakan web browser Mozilla Firefox atau Chrome. Kalau sobat tidak keliru, maka tampilannya akan seperti ini :
dan jika diberi nilai bukan berupa angka atau kurang dari 1 atau lebih dari 10 maka akan menunjukkan konfirmasi validasi yang berbeda. Silahkan perhatikan gambar dibawah ini.
Untuk memahami bagaimana kode di atas menjalankan tampilan browser seperti yang kita jelaskan tadi, mari kita urut satu persatu kodenya.
<input id="numb">
ini adalalah kode yang pertama yang perlu kita bahas, karena terkait dengan fungsi nantinya. Lho...Donga, kenapa gak dari kode yang paling atas? karena kode yang paling atas Donga anggap sudah mengerti, karena sifatnya hanya tampilan saja, tidak terkait dengan fungsi javascript secara langsung nantinya. Tapi Donga, menurut saya itu penting untuk dibahas..., Oke deh kalau memang perlu silahkan sobat lihat catatan sebelumnya Struktur HTML.
Kembali ke topik. Kode di atas adalah element "input" dengan nama "id" adalah "numb", tentunya sobat sekalian sudah tau kan, bahwa element ini berfungsi untuk meng-inputkan data. Baik kalau sudah tau. Pada kasus ini yang perlu kita perhatikan secara khusus pada element ini adalah nama "id" nya saja, karena nantinya akan digunakan pada fungsi javascript.
<button type="button" onclick="myFunction()">Submit</button>
Kode selanjutnya adalah element button, dengan type : "button" dan event : onClick. Event onClick ini nantinya yang akan mengeksekusi fungsi "myFunction()". Sedangkan Content/isi dari element button, yaitu "Submit" berfungsi sebagai tombol perintah dimulainya eksekusi fungsi.
<p id="demo"></p>
Element paragraf. Sama seperti halnya element input di atas, pada element paragaraf ini, yang perlu menjadi perhatian kita hanya pada nama "id" nya saja, karena akan di gunakan pada fungsi dan satu lagi yang perlu kita lihat pada element ini adalah content/isi dari elemen dikosongkan (tidak di isi), jadi secara otomatis, tidak akan ditampilkan di browser, sebelum adanya eksekusi fungsi.
<script>
Kode ini adalah tanda dimulainya javascript.
function myFunction()
Kode ini, menunjuk pada sebuah fungsi, ditandai dengan kode "function" nama dari fungsi tersebut adalah "myFungtion()". Untuk nama fungsi ini tentunya sobat bebas berkreasi, tapi pada catatan kali ini Donga menggunakan nama seperti terlihat di atas.
var x, text;
Pada contoh ini kita mendeklarasikan dua buah variable ditandai dengan kode "var", nama dari variable tersebut adalah "x" dan "text".
x = document.getElementById("numb").value;
Penjelasan dari variable "x" adalah seperti tertulis pada kode di atas. Maksud dari kode ini adalah nilai variable x, akan di ambil dari sebuah element dengan nama id="numb". Element yang mana Donga? Tentunya kita sudah tau, bahwa itu adalah element "input." Jadi nilai yang di masukkan ke dalam element input, itulah yang akan menjadi nilai dari variable x.
if (isNaN(x) || x < 1 || x > 10) {
text = "Input not valid";
} else {
text = "Input OK";
}
Nah... yang satu ini kita jelaskan secara berkelompok, karena merupakan satu kesatuan, yaitu logika "if", yang akan menghasilkan pernyataan "true" dan "false", pernyataan "true" pada kurung kurawal {} pertama {text = "Input not valid";} sedangkan pernyataan "false" pada kurung kurawal {} kedua { text = "Input OK"; }, wah...Donga, kok pernyataan "False" nya malah bernilai "Input OK"? bukankah "False" itu nilai yang "salah"? Betul juga ya...??? Tapi penjelasannya seperti ini, nilai "true" dan "false" itu ditentukan dari pernyataan pertama yang berada di dalam tanda kurung () yaitu (isNaN(x) || x < 1 || x > 10). Arti dari pernyataan ini adalah :
isNaN = Is Not a Number
isNaN(x) artinya adalah jika nilai dari variable "x" bukan sebuah nomor .
|| x < 1 artinya atau variable "x" memiliki nilai kurang dari 1
|| x > 10 artinya atau variable "x" memiliki nilai lebih dari 10
Berdasarkan pernyataan di atas, tentunya sekarang kita paham mengapa nilai dari variable “text=’Input not valid’ karena program pada saat diberi input diberi nilai selain angka atau kurang dari 1 atau lebih dari 10, maka nilai logika “if” akan bernilai Benar atau True.
Pada kode di atas, pertama kali program
akan membaca nilai input yang dimasukkan oleh pengguna (user) yang selanjutnya
akan menjadi nilai deri variable “x”, tapi nilai tersebut tidak akan berarti
apa-apa kalau tidak dibari perintah lanjutan. Perintah selanjutnya adalah “klik”
tombol “submit,” ketika tombol “submit di “klik” maka event onClick, akan
membawa nilai input menuju fungsi myFunction(), di dalam fungsi ini nilai input
tadi akan di ubah menjadi nilai variable “x” kemudian variable “x” ini akan di
proses melalui logika “if” untuk menghasilkan dua pernyataan “true” atau “false”.
Nilai dari logika “if” akan menjadi nilai dari variable “text” jika nilai
logika “if” bernilai “True” maka nilai variable text=’Input not valid’ sedangkan jika bernilai “False” maka nilai
variable text = "Input OK".
Tapi tunggu dulu. Proses program belum selesai, karena jika hanya sampai disini
saja, nilai konfirmasi validasi tidak akan muncul di laman Browser sobat. Jadi
untuk memunculkannya diperlukan kode terakhir, yaitu :
document.getElementById("demo").innerHTML
= text;
Kode inilah yang
menampilkan nilai dari variable “text” ke laman Browser. Bagaimana prosesnya? Setelah
nilai dari variable “text” didapatkan, maka kode di atas akan memerintahkan
agar content dari element paragraf yang tadinya kosong diubah menjadi nilai
variable “text” akhirnya muncullah “Input OK” atau “Input not valid”. Begitulah
ceritanya Sob, semoga bias dipahami.
Jumat, 27 Oktober 2017
4 Element HTML Yang Harus Dipahami Seorang Pemula
Dokument HTML dibangun oleh empat element utama, yaitu element html, element head, element title, dan element body. Susunan empat element ini di dalam document html biasanya terlihat seperti ini :
<html>
<head>
<title> ... </tittle>
</head>
<body>
...
</body>
<body>
...
</body>
</html>
1. Element root atau Element root
Untuk element yang satu ini Donga rasa sudah cukup jelas di ceritakan pada catatan kita sebelumnya Sturktur HTML. Sedikit untuk mengingat kembali, bahwa element html ini adalah element yang mengandung element-element lain pada suatu dokumen HTML. Jika masih kurang mengerti silahkan buka kembali catatan yang lalu. Semakin sering dibaca catatannya, biasanya akan semakin paham. :)
2. Element Head
Element head ini menurut Donga penting untuk pahami, karena merupakan tempat diletakkannya element tittle. Coba sobat perhatikan, pada tab browser biasanya terdapat sebuah judul. Nah... di element head inilah tempat diletakkannya Text Judul tersebut, tetapi tentunya text tersebut harus sudah dibungkus dengan element tittle.
3. Element Tittle
Merupakan tempat diletakkanya Text Judul yang selanjutnya akan ditampilkan di Tab Browser. Text Judul ini merupakan Content/isi dari element tittle.
4. Element Body
1. Element root atau Element root
Untuk element yang satu ini Donga rasa sudah cukup jelas di ceritakan pada catatan kita sebelumnya Sturktur HTML. Sedikit untuk mengingat kembali, bahwa element html ini adalah element yang mengandung element-element lain pada suatu dokumen HTML. Jika masih kurang mengerti silahkan buka kembali catatan yang lalu. Semakin sering dibaca catatannya, biasanya akan semakin paham. :)
2. Element Head
Element head ini menurut Donga penting untuk pahami, karena merupakan tempat diletakkannya element tittle. Coba sobat perhatikan, pada tab browser biasanya terdapat sebuah judul. Nah... di element head inilah tempat diletakkannya Text Judul tersebut, tetapi tentunya text tersebut harus sudah dibungkus dengan element tittle.
3. Element Tittle
Merupakan tempat diletakkanya Text Judul yang selanjutnya akan ditampilkan di Tab Browser. Text Judul ini merupakan Content/isi dari element tittle.
4. Element Body
Dari seluruh element html hanya content/isi dari element body yang akan ditampilkan di halaman utama browser. Jadi jika kita melihat sebuah tampilan web yang mempesona. Sebagai seorang programer pemula, tentunya kita harus mulai mengarahkan pemikiran ke element body karena disinilah susuna kode-kode tersebut di buat.
Baiklah, sekarang mari kita tinggalkan sebentar catatan di atas, untuk melihat fungsi dari masing-masing element tersebut. Untuk keperluan ini Sobat boleh membuka html editor bisa notepad bawaan windows atau notepad++, untuk Notepad++ jika belum punya boleh sobat download di sini.
Ketik atau Copy code di bawah ini di Notepad/Notepad++
Baiklah, sekarang mari kita tinggalkan sebentar catatan di atas, untuk melihat fungsi dari masing-masing element tersebut. Untuk keperluan ini Sobat boleh membuka html editor bisa notepad bawaan windows atau notepad++, untuk Notepad++ jika belum punya boleh sobat download di sini.
Ketik atau Copy code di bawah ini di Notepad/Notepad++
<html>
<head>
<title>4 Element HTML</title>
</head>
<body>
4 Element HTML Yang Harus Dipahami Seorang Pemula
</body>
<body>
4 Element HTML Yang Harus Dipahami Seorang Pemula
</body>
</html>
Gambar 1.Kode pada Notepad++
kemudian simpan dengan nama basic.html.
Gambar 2. Simpan dengan nama basic.html
Langkah berikutnya silahkan Sobat buka menggunakan browser kesayangan sobat Mozilla Firefox atau Chrome. Jika langkah yang dilakukan benar, maka tampilannya akan terlihat seperti ini :
Gambar 3. Tampilan kode setelah dijalankan di browser
Keterangan :
Pada Gambar 3. dapat kita perhatikan bahwa element title ditampilkan pada tab window, sedangkan element body ditampilkan pada halaman utama browser.
Donga rasa cukup sekian dulu catatan hari ini. Untuk pengembangan silahkan sobat otak-atik sendiri kodenya. Misalnya Sobat mau melihat efek dari masing-masing element html jika dihilangkan (tidak ditulis) apa yang akan terjadi pada tampilan web. Sampai jumpa di catatan selanjutnya.
kemudian simpan dengan nama basic.html.
Langkah berikutnya silahkan Sobat buka menggunakan browser kesayangan sobat Mozilla Firefox atau Chrome. Jika langkah yang dilakukan benar, maka tampilannya akan terlihat seperti ini :
Keterangan :
Pada Gambar 3. dapat kita perhatikan bahwa element title ditampilkan pada tab window, sedangkan element body ditampilkan pada halaman utama browser.
Donga rasa cukup sekian dulu catatan hari ini. Untuk pengembangan silahkan sobat otak-atik sendiri kodenya. Misalnya Sobat mau melihat efek dari masing-masing element html jika dihilangkan (tidak ditulis) apa yang akan terjadi pada tampilan web. Sampai jumpa di catatan selanjutnya.
Selasa, 24 Oktober 2017
Struktur HTML
Sesuai dengan judul kita akan sedikit membahas tentang struktur HTML. Sebelum kita bercerita lebih jauh tentang sturktur HTML, ada baiknya kalau kita mengetahui apa itu HTML. HTML adalah kependekan dari HyperText Markup Language yaitu bahasa pemrograman standart yang digunakan untuk membuat halaman web.
Donga rasa pengertiannya cukup itu saja, jangan panjang-panjang biar gak bingung. Jika kita sudah mengetahui pengertian HTML tentunya kita akan mudah untuk mendefenisikan struktur HTML. Untuk pengertiannya bebas saja, yang penting kita mengerti, kalau Donga lebih suka mengartikan struktur HTML itu adalah susunan dari bahasa pemrograman agar bisa menampilkan objek di halaman web. Tapi itu defenisi pribadi lho..sob, kalau ada yang kurang silahkan ditambahkan.
Untuk lebih memahami struktur HTML ini marilah kita kita lihat bagian-bagian dari HTML satu persatu.
Struktur Dasar HTML
<html>
<head> ... </head>
<body>
...
</body>
</html>
Dari struktur dasar ini, kita akan mengenal bagian-bagian dari HTML.
1. Tag
Adalah kode html yang ditulis dengan tanda "<" sebagai awal kode dan ditutup dengan ">" sebagai akhir kode.
Contoh tag pada struktur HTML diatas adalah :
<html>
<head>
<body>
Tag terdiri dari dua bagian : Tag_Pembuka dan Tag_Penutup.
Konsep Tag
<tag_pembuka> ... </tag_penutup>
//untuk tag_penutup ditandai dengan tanda "/" sebelum nama tag.
Contoh Tag secara lenkap :
<html> ... </html>
<head> ... </head>
<body> ... </body>
Catatan : html, head, dan body adalah nama tag
Namun perlu di ingat bahwa ada jenis tag yang tidak memiliki tag penutup yaitu tag img (image)
Konsep Tag Tanpa Tag Penutup
<tag/>
Contoh :
<img /> atau lebih lengkapnya <img src="http://www.klikdonga.blogspot.co.id" />
2. Element
Adalah semua yang terdapat pada kode mulai dari <tag_pembuka> sampai <tag_penutup>.
Contoh :
<html> ... </html>
ini adalah contoh element html, mengapa dikatakan element html? Karena nama dari tag pembuka dan tag penutupnya adalah html. Tetapi istilah yang sering digunakan untuk element <html> ...</html> ini adalah, element root karena mengandung seluruh element. Sedangkan seluruh element yang ada didalamnya adalah element leaf.
Lalu Bagaimana dengan kode berikut ini ?
<head> ... </head>
<body> ... </body>
Kode pertama adalah element head,
Kode kedua adalah element body.
Konsep Element :
<h1> ... </h1>
contoh di atas adalah element header ditandai dengan <h1> ... </h1> dengan content/isi element "..."
Contoh Lengkap
<h1> Selamat Datang </h1>
ini adalah element header yang memiliki content/isi elemen "Selamat Datang"
3. Attribute
Adalah bagian yang berfungsi melengkapi tampilan dari sebuah element.
Contoh :
<p align="left" >Selamat Datang</p>
contoh di atas adalah element paragraf ditandai dengan <p> ... </p>. Tulisan yang berwarna merah adalah "attribute". attribut ini bernama "align" yang akan menempatkan tulisan "Selamat Datang"di sebelah kiri jika web browser di jalankan. Sedangkan kata "left" adalah "value" dari element paragraf tersebut.
Contoh lain :
<a href="www.klikdonga.blogspot.co.id"> Klik Disini </a>
element <a> ... </a> adalah element yang bernama "anchor link", sedangkan "href" adalah attribute dari element anchor. Sedangkan "www.klikdonga.blogspot.co.id" adalah nilai atau value dari attribute "href". untuk tulisan "Klik Disini" adalah isi dari element anchor jadi secara garis besar, element ini berfungsi untuk menghubungkan satu halaman web dengan halaman web lain.
Untuk mengetahui lebih banyak bermacam-macam attribute html, Sobat bisa mengunjungi Alamat ini : https://www.w3schools.com/html/html_attributes.asp
4. Event
Istilah lain yang perlu kita ketahui pada struktur html adalah event. Menurut Donga kita tidak hanya harus tahu, tapi harus mengerti perbedaan antara attribute dan event. Jika kita tinjau dari pengertian attribute, sebenarnya event termasuk sebuah attribute dari element html, karena bagian dari pelengkap element. Tetapi jika kita tinjau dari fungsinya, maka attribute dan event akan berbeda.
Attribute berfungsi untuk merubah tampilan dari element pada struktur html. Sedangkan event berfungsi untuk reaksi jika dilakukan sebuah tindakan terhadap element html tesebut. Biasanya event erat kaitannya dengan fungsi Javascript.
Contoh event :
<button onclick="myFunction()">Klik Disini</button>
Element di atas adalah element button ditandai dengan <button> ... </button>. Text berwarna merah adalah sebuah event yang diberi nama onclick dan memiliki value "myFunction()". Sedangkan isi dari element adalah "Klik Disni". Secara umum element ini dibuat agar sebuah tombol akan memberikan suatu reaksi, jika tombol tersebun mendapatkan tindakan berupa "klik" satu kali dari mouse. Sebagai contoh silahkan Sobat klik tombol di bawah ini.
Untuk contoh yang lebih banyak mengenai event ini, silahkan sobat kunjungi
https://www.w3schools.com/tags/ref_eventattributes.asp
Oke ... itu saja catatan Donga kali ini, mudah-mudahan ada manfaatnya. Untuk pengembangan lebih lanjut, dipersilahkan Sobat sekalian berkreasi sendiri, jika ada masalah boleh menghubungi Donga. Jika bisa dibantu Insya Allah akan Donga bantu. Jangan lupa, kritik dan saran membangun silahkan tinggalkan di kolom komentar agar kita bisa saling menerangi, karena ilmu itu ibarat cahaya, semakin banyak kita bagikan, maka akan semakin terang di sekitar kita.
Donga rasa pengertiannya cukup itu saja, jangan panjang-panjang biar gak bingung. Jika kita sudah mengetahui pengertian HTML tentunya kita akan mudah untuk mendefenisikan struktur HTML. Untuk pengertiannya bebas saja, yang penting kita mengerti, kalau Donga lebih suka mengartikan struktur HTML itu adalah susunan dari bahasa pemrograman agar bisa menampilkan objek di halaman web. Tapi itu defenisi pribadi lho..sob, kalau ada yang kurang silahkan ditambahkan.
Untuk lebih memahami struktur HTML ini marilah kita kita lihat bagian-bagian dari HTML satu persatu.
Struktur Dasar HTML
<html>
<head> ... </head>
<body>
...
</body>
</html>
Dari struktur dasar ini, kita akan mengenal bagian-bagian dari HTML.
1. Tag
Adalah kode html yang ditulis dengan tanda "<" sebagai awal kode dan ditutup dengan ">" sebagai akhir kode.
Contoh tag pada struktur HTML diatas adalah :
<html>
<head>
<body>
Tag terdiri dari dua bagian : Tag_Pembuka dan Tag_Penutup.
Konsep Tag
<tag_pembuka> ... </tag_penutup>
//untuk tag_penutup ditandai dengan tanda "/" sebelum nama tag.
Contoh Tag secara lenkap :
<html> ... </html>
<head> ... </head>
<body> ... </body>
Catatan : html, head, dan body adalah nama tag
Namun perlu di ingat bahwa ada jenis tag yang tidak memiliki tag penutup yaitu tag img (image)
Konsep Tag Tanpa Tag Penutup
<tag/>
Contoh :
<img /> atau lebih lengkapnya <img src="http://www.klikdonga.blogspot.co.id" />
2. Element
Adalah semua yang terdapat pada kode mulai dari <tag_pembuka> sampai <tag_penutup>.
Contoh :
<html> ... </html>
ini adalah contoh element html, mengapa dikatakan element html? Karena nama dari tag pembuka dan tag penutupnya adalah html. Tetapi istilah yang sering digunakan untuk element <html> ...</html> ini adalah, element root karena mengandung seluruh element. Sedangkan seluruh element yang ada didalamnya adalah element leaf.
Lalu Bagaimana dengan kode berikut ini ?
<head> ... </head>
<body> ... </body>
Kode pertama adalah element head,
Kode kedua adalah element body.
Konsep Element :
<h1> ... </h1>
contoh di atas adalah element header ditandai dengan <h1> ... </h1> dengan content/isi element "..."
Contoh Lengkap
<h1> Selamat Datang </h1>
ini adalah element header yang memiliki content/isi elemen "Selamat Datang"
3. Attribute
Adalah bagian yang berfungsi melengkapi tampilan dari sebuah element.
Contoh :
<p align="left" >Selamat Datang</p>
contoh di atas adalah element paragraf ditandai dengan <p> ... </p>. Tulisan yang berwarna merah adalah "attribute". attribut ini bernama "align" yang akan menempatkan tulisan "Selamat Datang"di sebelah kiri jika web browser di jalankan. Sedangkan kata "left" adalah "value" dari element paragraf tersebut.
Contoh lain :
<a href="www.klikdonga.blogspot.co.id"> Klik Disini </a>
element <a> ... </a> adalah element yang bernama "anchor link", sedangkan "href" adalah attribute dari element anchor. Sedangkan "www.klikdonga.blogspot.co.id" adalah nilai atau value dari attribute "href". untuk tulisan "Klik Disini" adalah isi dari element anchor jadi secara garis besar, element ini berfungsi untuk menghubungkan satu halaman web dengan halaman web lain.
Untuk mengetahui lebih banyak bermacam-macam attribute html, Sobat bisa mengunjungi Alamat ini : https://www.w3schools.com/html/html_attributes.asp
4. Event
Istilah lain yang perlu kita ketahui pada struktur html adalah event. Menurut Donga kita tidak hanya harus tahu, tapi harus mengerti perbedaan antara attribute dan event. Jika kita tinjau dari pengertian attribute, sebenarnya event termasuk sebuah attribute dari element html, karena bagian dari pelengkap element. Tetapi jika kita tinjau dari fungsinya, maka attribute dan event akan berbeda.
Attribute berfungsi untuk merubah tampilan dari element pada struktur html. Sedangkan event berfungsi untuk reaksi jika dilakukan sebuah tindakan terhadap element html tesebut. Biasanya event erat kaitannya dengan fungsi Javascript.
Contoh event :
<button onclick="myFunction()">Klik Disini</button>
Element di atas adalah element button ditandai dengan <button> ... </button>. Text berwarna merah adalah sebuah event yang diberi nama onclick dan memiliki value "myFunction()". Sedangkan isi dari element adalah "Klik Disni". Secara umum element ini dibuat agar sebuah tombol akan memberikan suatu reaksi, jika tombol tersebun mendapatkan tindakan berupa "klik" satu kali dari mouse. Sebagai contoh silahkan Sobat klik tombol di bawah ini.
Untuk contoh yang lebih banyak mengenai event ini, silahkan sobat kunjungi
https://www.w3schools.com/tags/ref_eventattributes.asp
Oke ... itu saja catatan Donga kali ini, mudah-mudahan ada manfaatnya. Untuk pengembangan lebih lanjut, dipersilahkan Sobat sekalian berkreasi sendiri, jika ada masalah boleh menghubungi Donga. Jika bisa dibantu Insya Allah akan Donga bantu. Jangan lupa, kritik dan saran membangun silahkan tinggalkan di kolom komentar agar kita bisa saling menerangi, karena ilmu itu ibarat cahaya, semakin banyak kita bagikan, maka akan semakin terang di sekitar kita.
