idCoder 404

idCoder 404 Hello teman-teman, masih bersama idCoder dimana kita dapat belajar membuat Website bersama-sama. disini kita akan belajar secara bertahap agar kita semua dapat memahaminya dengan mudah.

http://idcoder404.blogspot.co.id/ 

Read More

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”.

Read More

Kumpulan Tag Tag pada HTML

     hay teman teman masih bersama saya HoirulHusen admin dari idCoder404.blogspot.com  berjumpa lagi, pada artikel sebelumnya saya telah membuat artikel tentang Basic / Dasar HTML pada kesempatan kali ini kita akan membahas mengenai Tag Tag pada html.

     Untuk tag tag yang terdapat pada HTML sebenarnya lumayan cukup banyak, jadi untuk teman teman jangan pusing dengan banyaknya tag tag tersebut, setidaknya teman teman tau dulu tag tag pada HTML. Untuk itu teman teman tidak perlu menghafal setiap tag tag pada HTML, yang perlu hanya memahami setiap fungsi dari tag HTML.

OK, langsung saja brikut adalah Kumpulan tag tag HTML : 

Kumpulan Tag Tag HTML.

Tag		Penjelasan
	<!--...-->	Mendefinisikan Komentar
	<!DOCTYPE>	Mendefinisikan tipe atau jenis dokumen
	<a>	Mendefinisikan hyperlink
	<abbr>	Mendefinisikan sebuah singkatan atau akronim
	<acronym>	Tag ini tidak didukung pada HTML5. Gunakan <abbr> sebagai penggantinya pada HTML5. Mendefinisikan akronim
	<address>	Mendefinisikan informasi kontak penulis atau pemilik dokumen
	<applet>	Tag ini tidak didukung pada HTML5. Gunakan <embed> atau <object> sebagai penggantinya pada HTML5. Mendefinisikan embedded applet
	<area>	Mendefinisikan sebuah area didalam image-map
V.5	<article>	Mendefinisikan sebuah artikel
V.5	<aside>	Mendefinisikan selain dari konten halaman
V.5	<audio>	Mendefinisikan konten suara
	<b>	Mendefinisikan teks bold atau cetak tebal
	<base>	Menentukan basis URL atau target untuk semua URL relatif dalam dokumen
	<basefont>	Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Menentukan warna default, ukuran, dan font untuk semua teks dalam dokumen
V.5	<bdi>	Isolat bagian teks yang mungkin diformat dalam arah yang berbeda dari teks lain di luar itu sendiri
	<bdo>	Mengganti arah teks saat ini
	<big>	Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan teks besar
	<blockquote>	Mendefinisikan bagian yang dikutip dari sumber lain
	<body>	Mendefinisikan tubuh atau badan dokumen
	<br>	Mendefinisikan satu baris tunggal atau sama dengan fungsi enter
	<button>	Mendefinisikan sebuah tombol
V.5	<canvas>	Digunakan untuk menggambar grafik, dengan cepat, melalui scripting (biasanya JavaScript)
	<caption>	Mendefinisikan caption dari sebuah tabel
	<center>	Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan teks yang posisinya berada ditengah
	<cite>	Mendefinisikan Judul karya
	<code>	Mendefinisikan bagian dari code pada komputer
	<col>	Menentukan sifat kolom untuk setiap kolom dalam <colgroup> element
	<colgroup>	Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk memformat
V.5	<datalist>	Menentukan daftar pilihan yang telah ditentukan untuk kontrol input
	<dd>	Mendefinisikan deskripsi / nilai istilah dalam daftar deskripsi
	<del>	Mendefinisikan teks yang telah dihapus dari dokumen
V.5	<details>	Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
	<dfn>	Merupakan contoh mendefinisikan istilah
V.5	<dialog>	Mendefinisikan sebuah kotak dialog atau jendela
	<dir>	Tag ini tidak didukung pada HTML5. Gunakan <ul> sebagai penggantinya pada HTML5. Mendefinisikan daftar direktori
	<div>	Mendefinisikan sebuah bagian dalam sebuah dokumen
	<dl>	Mendefinisikan daftar deskripsi
	<dt>	Mendefinisikan istilah / nama dalam daftar deskripsi
	<em>	Mendefinisikan menekankan teks
V.5	<embed>	Mendefinisikan sebuah wadah untuk eksternal (non-HTML) aplikasi
	<fieldset>	Sebauh Grup untuk pengelompokan dalam form
V.5	<figcaption>	Mendefinisikan sebuah caption untuk <figure> element
V.5	<figure>	Menentukan konten mandiri
	<font>	Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan font, warna, dan ukuran dari sebuah teks
V.5	<footer>	Mendefinisikan sebuah footer dari sebuah dokumen atau section
	<form>	Mendefinisikan sebuah form HTML untuk input pengguna
	<frame>	Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah jendela (frame) dalam sebuah frameset
	<frameset>	Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah satu set frames
	<h1> sampai <h6>	Mendefinisikan headings pada HTML
	<head>	Mendefinisikan informasi tentang dokumen
V.5	<header>	Mendefinisikan sebuah header untuk dokumen atau bagian dokumen
	<hr>	Mendefinisikan perubahan tematik dalam konten atau memberikan garis pada dokumen
	<html>	Mendefinisikan root dari sebuah dokumen HTML
	<i>	Mendefinisikan sebuah bagian dari teks dengan suara alternatif atau suasana hati
	<iframe>	Mendefinisikan sebuah frame inline
	<img>	Mendefinisikan sebuah image
	<input>	Mendefinisikan sebuah input control
	<ins>	Mendefinisikan teks yang telah dimasukkan ke dalam dokumen
	<kbd>	Mendefinisikan input keyboard
V.5	<keygen>	Mendefinisikan sebuah key-pair generator field (for forms)
	<label>	Mendefinisikan sebuah label dari sebuah <input> element
	><legend>	Mendefinisikan sebuah caption dari sebuah <fieldset> element
	<li>	Mendefinisikan sebuah daftar item
	<link>	Mendefinisikan hubungan antara dokumen dengan sumber daya eksternal (digunakan untuk link ke style sheet)
V.5	<main>	Menentukan konten utama dari dokumen
	<map>	Mendefinisikan client-side image-map
V.5	<mark>	Mendefinisikan ditandai / teks yang disorot
	<menu>	Mendefinisikan daftar / menu perintah
V.5	<menuitem>	Mendefinisikan item perintah / menu bahwa pengguna dapat memanggil dari menu popup
	<meta>	Mendefinisikan metadata tentang sebuah dokumen HTML
V.5	<meter>	Mendefinisikan pengukuran skalar dalam kisaran dikenal (gauge)
V.5	<nav>	Mendefinisikan navigasi untuk links
	<noframes>	Tag ini tidak didukung pada HTML5. Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung frame
	<noscript>	Mendefinisikan sebuah konten alternatif untuk pengguna yang tidak mendukung script sisi klien
	<object>	Mendefinisikan sebuah embedded objek
	<ol>	Mendefinisikan sebuah daftar tersusun
	<optgroup>	Mendefinisikan sekelompok opsi terkait dalam daftar drop-down
	<option>	Mendefinisikan sebuah option dari sebuah daftar drop-down
V.5	<output>	Mendefinisikan hasil dari sebuah perhitungan
	<p>	Mendefinisikan sebuah paragraph
	<param>	Mendefinisikan sebuah parameter untuk sebuah object
	<pre>	Mendefinisikan teks preformatted
V.5	<progress>	Menggambarkan kemajuan tugas
	<q>	Mendefinisikan sebuah kutipan singkat
V.5	<rp>	Mendefinisikan apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby
V.5	<rt>	Mendefinisikan sebuah penjelasan / pengucapan karakter (untuk tipografi Asia Timur)
V.5	<ruby>	Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur)
	<s>	Mendefinisikan teks yang sudah tidak benar
	<samp>	Mendefinisikan contoh output dari program komputer
	<script>	Mendefinisikan sebuah script dari sisi klien
V.5	<section>	Mendefinisikan sebuah section didalam sebuah dokumen
	<select>	Mendefinisikan sebuah daftar drop-down
	<small>	Mendefinisikan teks kecil
V.5	<source>	Mendefinisikan lebih dari satu sumber media untuk elemen media seperti (<video> dan <audio>)
	<span>	Mendefinisikan sebuah section didalam sebuah dokumen
	<strike>	Tag ini tidak didukung pada HTML5. Gunakan <del> atau <s> sebagai penggantinya pada HTML5. Mendefinisikan teks strikethrough
	<strong>	Mendefinisikan teks yang penting
	<style>	Mendefinisikan informasi style untuk sebuah dokumen
	<sub>	Mendefinisikan teks subscripted
V.5	<summary>	Mendefinisikan sebuah judul yang terlihat dalam sebuah <details> element
	<sup>	Mendefinisikan teks superscripted
	<tabel>	Mendefinisikan sebuah tabel
	<tbody>	Grup isi tubuh dalam sebuah tabel
	<td>	Mendefinisikan sebuah cell didalam sebuah tabel
	<teksarea>	Mendefinisikan sebuah input control multiline atau teks area
	<tfoot>	Grup isi footer dalam sebuah tabel
	<th>	Mendefinisikan sebuah header cell didalam sebuah tabel
	<thead>	Grup header dalam sebuah tabel
V.5	<time>	Mendefinisikan sebuah tanggal atau waktu
	<title>	Mendefinisikan sebuah title untuk dokumen
	<tr>	Mendefinisikan sebuah row didalam sebuah tabel
V.5	<track>	Mendefinisikan trek teks untuk elemen media yang (<video> dan <audio>)
V.5	<tt>	Tag ini tidak didukung pada HTML5. Gunakan CSS sebagai penggantinya pada HTML5. Mendefinisikan teletype teks
	<u>	Mendefinisikan teks yang harus berbeda dari teks biasa
	<ul>	Mendefinisikan sebuah unordered list
	<var>	Mendefinisikan sebuah variable
V.5	<video>	Mendefinisikan sebuah video atau movie
V.5	<wbr>	Mendefinisikan sebuah kemungkinan line-break

Yak, diatas adalah Kumpulan dari tag tag HTML, untuk versi HTML sekarang sudah versi ke-5 dan di versi HTML5 sekarang terdapat fitur tambahan dan juga ada fitur HTML sebelumnya yang dihapus atau tidak digunakan lagi. 

Untuk daftar fitur terbaru HTML5 brikut tablenya :

Tag	Description
<article>	Mendefinisikan suatu artikel
<aside>	Mendefinisikan konten tak hanya dari konten halaman/post
<audio>	Mendefinisikan konten audio
<canvas>	dipakai untuk menggambar grafik, on the fly, melalui scripting (JavaScript biasanya)
<command>	Mendefinisikan tombol perintah untuk Bisa memanggil
<details>	Mendefinisikan rincian tambahan bahwa pemakai Bisa melihat atau menyembunyikan
<datalist>	Menentukan daftar pilihan standar untuk kontrol input
<embed>	Mendefinisikan suatu wadah untuk software eksternal (non-HTML)
<header>	Mendefinisikan suatu dokumen atau bagian header
<figure>	Menentukan konten Berdikari
<footer>	Mendefinisikan suatu dokumen atau bagian footer
<hgroup>	Groups heading (<h1> to <h6>) elemen
<mark>	Mendefinisikan teks yang ditandai / disorot
<output>	Mendefinisikan hasil penghitungan
<source>	Mendefinisikan beberapa sumber media untuk elemen media (<video> dan <audio>)
<summary>	Mendefinisikan suatu visible heading untuk elemen <details>
<time>	Mendefinisikan tanggal / masa
<video>	Mendefinisikan suatu video atau film
<section>	Mendefinisikan bagian dalam dokumen

Untuk fitur yang tidak digunakan lagi atau dihapus pada HTML5 adalah. brikut tablenya :

Tag	Description
<acronym>	Mendefinisikan suatu akronim
<basefont>	Menentukan warna standar, ukuran, dan font untuk seluruh teks dalam dokumen
<big>	Mendefinisikan ukuran teks besar
<center>	Mendefinisikan posisi teks dicenter
<dir>	Mendefinisikan direktori list
<font>	Mendefinisikan font, warna, dan ukuran untuk teks
<frame>	Mendefinisikan suatu window (frame) dalam suatu frameset
<frameset>	Mendefinisikan satu set frame
<strike>	Mendefinisikan teks strikethrough
<noframes>	Mendefinisikan suatu konten pilihan untuk pemakai bahwa konten tak mendukung frame
<applet>	Mendefinisikan suatu applet embed

 

Ok, teman teman table diatas tersebut adalah table tag tag HTML, dari yang masih digunakan sampai yang tidak digunakan lagi.

Info mengenai tag tag yang tidak digunakan lagi pada HTML5 kurang jelas, yang pasti mungkin tag tag tersebut kurang Efisen untuk digunakan, maka dari itu digantikan dengan fitur-fitur yang lebih bagus lagi pastinya.

Untuk fitur-fitur HTML5 sekarang sudah cukup lengkap, sekarang pertanyaan nya sudah siapkah teman teman belajar HTML?

Jangan khawatir untuk menghafal semua tag tag HTML nya, karena memang lumayan banyak, yang penting teman teman paham mengenai fungsi-fungsinya, lama kelamaan teman teman akan terbiasa dan akan paham dikit demi sedikit.

Sedikit TIPS :

Untuk teman teman yang susah dalam memahami fungsi dari setiap tag HTML, Saran saya belajar lah secara perlahan saja, Yakinlah pasti BISA! Semua tidak ada yang instan tetap membutuhkan Proses. Semangat Belajar!

 

Let's Learn HTML... 

Mungkin cukup sekian dlulu teman teman, jika ada kesalahan dalam penulisan harap dimaklumkan, jangan lupa Like, Coment, dan Share kepada teman teman lainnya agar menambah pengetahuan kita.

salam "idCoder"

Read More