Basic Dasar HTML | idCoder

     hay teman teman masih bersama saya HoirulHusen admin dari idCoder404 berjumpa lagi, kali ini saya akan Share mengenai Basic / Dasar HTML.

Sampai sekarang html sudah pada versi ke-5, untuk itu agar kita semua tidak tertinggal mengenai hal hal terbaru pada HTML kita harus selalu Update terus.

     dimasa masa sekarang ini technology sangat cepat berkembang, jadi untuk kita yang kurang Update akan tertinggal mengenai berita terbaru khususnya dalam bidang technology. 

OK, daripada panjang lebar mari langsung saja kita ulas mengenai Bahasa HTML ini (Hypertext Markup language).

Pengertian HTML

HTML adalah singkatan dari Hypertext Markup Language. Disebut hypertext karena di dalam HTML sebuah text biasa dapat berfungsi lain, kita dapat membuatnya menjadi link yang dapat berpindah dari satu halaman ke halaman lainnya hanya dengan meng-klik text tersebut. Kemampuan text inilah yang dinamakan hypertext, atau disebuat text Aktif, walaupun pada implementasinya nanti tidak hanya text yang dapat dijadikan link.


Disebut Markup Language karena bahasa HTML menggunakan tanda (mark), untuk menandai bagian-bagian dari text. Misalnya, text yang berada di antara tanda tertentu akan menjadi tebal, dan jika berada di antara tanda lainnya akan tampak besar. Tanda ini di kenal sebagai HTML tag.

     Jika teman teman ingin melihat bagaimana sebenarnya HTML, silahkan klik kanan halaman ini, lalu pilih View Page Source (di Browser Mozilla Firefox atau Google Chrome). Akan tampil sebuah halaman baru yang merupakan kode HTML dari halaman ini.


     HTML merupakan bahasa dasar pembuatan web. Disebut dasar karena dalam membuat web, jika hanya menggunakan HTML tampilan web terasa hambar. Terdapat banyak bahasa pemograman web yang ditujukan untuk memanipulasi kode HTML, seperti JavaScript dan PHP. Akan tetapi sebelum anda belajar JavaScript maupun PHP, ada baiknya memahami terlebih dahulu HTML, karena HTML merupakan hal yang paling awal khususnya dalam pembuatan web.


     HTML bukanlah bahasa pemograman (programming language), tetapi bahasa markup (markup language), hal ini terdengar sedikit aneh, tapi jika teman teman telah mengenal bahasa pemograman lain, dalam HTML tidak akan ditemukan struktur yang biasa di temukan dalam bahasa pemograman seperti IF, LOOP, maupun variabel. HTML hanya sebuah bahasa struktur yang fungsinya untuk menandai bagian-bagian dari sebuah halaman.

Apa saja yang kita butuhkan untuk belajar HTML? Hanya : Web Browser dan Text Editor.

Mengapa harus belajar HTML? Karena HTML merupakan standar bahasa dalam pembuatan Web / Bahasa paling dasar untuk membangun Web.

Mengenal Fungsi Web Browser

Web Browser (atau biasa disebut browser) adalah sebuah software aplikasi untuk menerima, menampilkan, dan menerjemahkan informasi dari world wide web (wikipedia).


Dan salah satu informasi itu dibuat dalam format HTML. Kode HTML yang kita buat akan diterjemahkan oleh web browser agar tampil seperti yang dirancang. Pada dasarnya seluruh web browser dapat menampilkan kode HTML sama baiknya, namun jika sudah berbicara mengenai desain halaman, tiap-tiap browser memiliki beberapa perbedaan HTML dirancang dan diatur oleh sebuah badan standarisasi dunia yang khusus menangani web, yaitu W3C (World Wide Web Consortium). 


Hal ini dikarenakan tiap-tiap program web browser menerjemahkan kode-kode HTML secara berbeda-beda, sehingga di perlukan sebuah standar yang sama untuk seluruh browser.

Memilih Aplikasi Editor HTML

Memilih sebuah aplikasi editor HTML tidaklah terlalu sulit. Aplikasi editor HTML digunakan untuk mempermudah kita membuat kode HTML. HTML sendiri pada dasarnya hanya text biasa yang ditulis dalam kode-kode khusus. Web Browser-lah yang akan menerjemahkan kode HTML ini menjadi sebuah tampilan halaman web. Untuk membuat kode HTML maupun halaman web sederhana, kita tidak perlu menggunakan aplikasi yang besar dan berat disini kita akan menggunakan aplikasi sublime text editor. Temen teman teman juga bisa menggunakan Notepad bawaan Windows tetapi akan ada perbedaan pada fitur Editornya.

Pengertian Tag dalam HTML

Sebagai sebuah bahasa markup, HTML membutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag. Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembuka dan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup ini. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku: “<” dan “>”. 


Berikut adalah format dasar penulisan tag HTML : <tagpembuka> objek yang dikenai perintah tag </tagpenutup>. Terdapat juga tag HTML yang tidak memiliki tag penutup salah satunya tag <br> melainkan tag ini hanya menutupi dirinya sendiri dengan tag <br /> dengan akhiran “ / ”.


Baca Juga : Kumpulan tag tag pada HTML.

HTML tidak case-sensitif, dalam artian penulisan <p> dianggap sama dengan <P>, atau antara teks Kapital dan non-kapital dianggap sama oleh Web Browser. Pada awal kemunculan HTML, programmer web umumnya menggunakan huruf besar untuk seluruh tag agar membedakan dengan text yang berupa isi dari web. Namun varian HTML, xHTML mewajibkan huruf kecil untuk semua tag. Dalam HTML5, aturan ini kembali tidak diharuskan. Akan tetapi kebiasaan web programmer saat ini adalah menggunakan huruf kecil untuk seluruh tag.

Pengertian Atribut dalam HTML 

Atribut adalah informasi tambahan yang diberikan kepada tag. Informasi ini bisa berupa instruksi untuk warna dari text, besar huruf dari text, dll. Setiap atribut memiliki pasangan nama dan nilai (value), dan ditulis dengan name=”value”. Value diapit tanda kutip, boleh menggunakan tanda kutip satu (‘) atau dua (“). Contoh Kode : 

<a href="http://www.google.com"> ini adalah sebuah link </a>

Pada kode HTML diatas, href=”http://www.google.com” adalah atribut. href merupakan nama dari atribut, dan http://www.google.com adalah value atau nilai dari atribut tersebut.

Struktur Dasar HTML

Setiap halaman HTML setidaknya memiliki struktur dasar yang terdiri dari : Tag tag diantaranya, DOCTYPE, tag html, tag head, dan tag body. Inilah yang merupakan struktur paling dasar dari HTML, walaupun HTML tidak hanya berisi struktur tersebut.

<!DOCTYPE html>

<html>

<head>

            <meta charset="utf-8">  <title> Judul Web </title>

</head>

<body>

            <p> Ini bagian isi kontent! </p>

</body>

</html>

Pengertian DTD atau DOCTYPE Tag paling awal dari contoh HTML diatas adalah DTD atau DOCTYPE. DTD adalah singkatan dari Document Type Declaration. Yang berfungsi untuk memberi tahu kepada web browser bahwa dokumen yang akan diproses adalah HTML. DTD memiliki banyak versi tergantung kepada versi HTML yang digunakan. Pada contoh diatas, saya menggunakan DTD versi HTML 5. Sebelum HTML 5, DTD terdiri dari text panjang yang hampir mustahil dihafal. Contohnya, DTD untuk xHTML 1.0 adalah : 
 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Tag HTML

Setelah DTD, tag berikutnya adalah tag <html>. Ini adalah tag pembuka dari keseluruhan halaman web. Semua kode HTML harus berada di dalam tag ini. Tag html dimulai dengan <html> dan diakhiri dengan </html>.

Tag Head

Elemen pada tag <head> umumnya akan berisi berbagai definisi halaman, seperti kode CSS, JavaScript, dan kode-kode lainnya yang tidak tampil di browser. Tag <title> dalam contoh kita sebelumnya digunakan untuk menampilkan title dari sebuah halaman web. Title ini biasanya ditampilkan pada bagian paling atas web browser. 

Tag Body

Tag <body> akan berisi semua elemen yang akan tampil dalam halaman web, seperti paragraf, tabel, link, gambar, dll. Tag body ini ditutup dengan </body>. Sebagian besar waktu kita dalam merancang web akan dihabiskan di dalam tag <body> ini. Perhatikan bahwa setiap tag akan diakhiri dengan penutup tag. Termasuk <html> yang merupakan tag paling awal dari sebuah halaman web.

Itu dia keterangan mengenai HTML, Mungkin sekian dulu. Jika teman teman ada pertanyaan bisa berkomentar dibawah. dan jika ada yang kurang paham dapat bertanya. Jangan lupa Like, dan Share juga ya teman teman, agar kita semua dapat belajar bersama. Nantikan juga artikel selanjutnya! Salam hangat “idCoder”.