Belajar | HTML Format

HTML memiliki banyak tag-tag lain yang berfungsi untuk mengubah sebuah tulisan.

Tulisan ini bold

Tulisan ini italic

~~Tulisan ini strike~~

Tulisan ini strong

Tulisan ini emphasized

Tulisan ini code/computer

Tulisan ini _subscript dan ^superscript

source code contoh di atas :

Tulisan ini bold Tulisan ini italic <strike>Tulisan ini strike</strike> Tulisan ini strong Tulisan ini emphasized <code>Tulisan ini code/computer</code> Tulisan ini subscript dan superscript

source

Belajar | HTML Paragraf

Tag mendefinisikan sebuah paragraf.
Dengan menggunakan tag ini, maka browser secara otomatis akan memasukkan garis/space kosong di bagian atas dan bawah paragraf.

Contoh : Paragraf pertamaku

source

Belajar | HTML Komentar

Sebelum kita melangkah lebih jauh kami akan mengenalkan kepada anda mengenai konsep dari HTML komentar/comment.

Meskipun 'komentar' sifatnya adalah opsional namun ada kalanya pemberian 'komentar' akan sangat membantu anda.

Komentar adalah bagian dari kode HTML, tujuannya adalah untuk menjelaskan bagian-bagian dari kode.
Contoh syntax dari sebuah komentar HTML :



<!-- isi dari komentar HTML -->

Komentar HTML selalu dimulai dengan <!> dan diakhiri dengan >> , hal ini memberitahukan kepada browser darimana sebuah komentar dimulai dan diakhiri.
C

source

Belajar | HTML Title

Elemen <Title> digunakan untuk menyatakan judul sebuah halaman web. Posisinya berada di dalam elemen <head>.



<html>

<head>

<title>Judul Halaman websiteku</title>

</head>

<body>

Isi dari halaman websiteku

</body>

</html>

Tulisan di dalam <title> tidak akan terlihat di browser, tapi beberapa browser menampilkannya di bagian atas window dari browser.

source

Belajar | HTML Heading

Heading adalah bagian penting dari HTML

Elemen-elemen h1,h2,h3,h4,h5,h6 adalah elemen headings ( h = heading ).
Dimana h1 adalah adalah tingkat pertama dan teks dari h1 adalah yg terbesar diikuti oleh h2 hingga h6 yang merupakan elemen headings yang terakhir.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

	Browser secara otomatis menambahkan satu bagian kosong/empty space pada setiap heading.

Kode dari tampilan headings di atas :

Codingku HTML Editori

<html>



<body>



<h1>Heading 1</h1>



<h2>Heading 2</h2>



<h3>Heading 3</h3>



<h4>Heading 4</h4>



<h5>Heading 5</h5>



<h6>Heading 6</h6>



</body>



</html>

source

Belajar | HTML Element

HTML Element

Ketika anda membuka sebuah halaman web dan anda melihat semua yang ada di hadapan anda, mulai dari sebuah paragraf, banner dan link-link navigasi... itulah elemen-elemen dari sebuah halaman web.
Sebuah elemen terdiri dari tiga buah bagian penting :

Tag pembuka
Isi
Tag penutup

Berikut adalah sebuah elemen paragraf HTML yang lengkap :



<p>isi elemen</p>

Satu halaman sebuah web bisa mengandung ratusan hingga ribuan elemen HTML.

Beberapa contoh elemen-elemen HTML yang lain :



<html></html>



<body></body>



<h1></h1>

Nested HTML

Nested HTML adalah sebuah elemen yang berada di dalam elemen HTML lainnya.



<body><h1>hallo</h1></body>

Dokumen HTML

<html>

<title>Judulku</title>

<body>

Paragrafku

</body>

</html>

Pada contoh di atas terdapat empat elemen HTML

Elemen :

merupakan paragraf elemen
Elemen ini dibuka dengan dan di tutup dengan
Isi dari elemen ini adalah 'Paragrafku'

Elemen <body> :

<body> merupakan elemen isi atau badan dari sebuah dokumen HTML
Elemen ini dibuka dengan <body> dan di tutup dengan </body>
Elemen ini memiliki sebuah nested elemen yaitu elemen beserta isinya

Elemen <title> :

<title> merupakan elemen yang mendefinisikan judul dari sebuah dokumen HTML
Elemen ini dibuka dengan <title> dan di tutup dengan </title>
Isi dari elemen ini adalah 'Judulku'

Elemen <html> :

<html> merupakan elemen yang mendefiniskan seluruh bagian dari sebuah dokumen HTML
Elemen ini dibuka dengan <html> dan di tutup dengan </html>
Elemen ini memiliki tiga nested elemen lainnya, yaitu :<title>,<body> dan

Selalu ingat agar menutup setiap elemen dengan tag penutup



<p>Paragraf 1
<p>Paragraf 2

Contoh di atas mungkin bisa berjalan di banyak browser karena penutup dari elemen dianggap sebagai opsional, tetapi sebaiknya hal ini jangan anda biasakan sebab banyak elemen-elemen HTML yang bisa mengakibatkan error bila tidak terdapat tag penutup di dalamnya.

Case sensitive

HTML tag tidaklah case sensitive, jadi tidak akan bermasalah meskipun anda menuliskannya dengan huruf besar maupun kecil. <html> -> <HTML>.

Akan tetapi kami sarankan agar anda menggunakan lowercase / huruf kecil sebab World Wide Web Consorsium (W3C) menyarankan agar menggunakan lowercase untuk setiap elemen HTML 4 dan mengharuskan menggunakannya pada XML

source

Belajar | HTML Instalasi

Berikut ini adalah beberapa hal yang anda perlukan untuk mencoba HTML sendiri di komputer anda :

Teks Editor, mis : notepad.
Browser, mis : Internet Explorer, FireFox, Opera, Google Chrome, dsb.

Langkah-langkah

1. Buka notepad (Windows)

2. Misalkan kita akan membuat sebuah halaman HTML dengan kode sebagai berikut :



<html>

<head>

<title>Judul Websiteku</title>

</head>

<body>

Isi dari websiteku

</body>

</html>

3. Copy dan paste kode di atas ke notepad

4. Kemudian simpan dan ganti *.txt dengan coba.html seperti gambar berikut :

5. Buka file yang sudah tersimpan tersebut

6. Selamat anda telah membuat sebuah halaman web pertama anda :)

source

Belajar | Menulis Special Character Di Dokumen HTML

Alhamdulillah, Masih ada waktu buat nulis artikel lagi nih. Tapi mohon maaf sebesar-besarnya karena saya tidak menanggapi komentar masuk. Bukan merasa paling sombong maupun lainnya, tapi memang saya ga sempet buat nanggepin satu satu komentar masuk. Okelah, Langsung aja ke tEKapE nih. Tulisan sebelumnyakan membahas tentang tag   dan tag , Nah sekarang kita coba menulis Special Character Dalam Dokumen HTML.

Special Character itu apa ?

Pada artikel sebelumnya yakni Membuat Baris Baru & Paragraf, Kita sudah tau bahwa browser tidak mengenal pembuatan baris dengan tombol Enter. Disamping itu, browser juga tidak mengenal pembuatan spasi lebih dari satu spasi dengan menekan tombol Spasi ataupun tombol Tab. Nah, bagaimana caranya membuat lebih dari satu spasi dalam dokumen HTML? Pembuatan spasi dalam kode-kode HTML diganti tulisan   seperti pada contoh di bawah ini :

<html>

<head>

<title>Penulisan Spasi Dalam Dokumen HTML</title>

</head>

<body>

Ini Satu Spasi ....<br />

Ini&nbsp;&nbsp;&nbsp; Tiga &nbsp;&nbsp;&nbsp;Spasi<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Lima &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Spasi<br />

</body>

</html>

Simpan dan lihat hasilnya. Coba perhatikan Spasi dalam tulisan tersebut ! Apakah hasilnya sama dengan halaman yang saya buat ? Oia, Diantara banyaknya Special Character, Coba deh perhatikan dan buat sendiri dokumen HTML dengan menyisipkan Special Character Di bawah ini untuk Sekedar latihan Ringan.

&       &amp;     

>       &gt;

<       &lt;

"       &quot;

±       &plusmn;

©       &copy;

®       &reg;

source

Belajar | Membuat Baris Baru dan Paragraf

Sekarang kita akan mempelajari bagaimana cara membuat baris dam paragraf. Biasanya untuk membuat baris baru, kita lakukan dengan menekan tombol enter. Bagaimana dengan dokumen HTML ? Cobalah membuat tulisan berikut pada Notepad.

<html>

<head>

<title>Penggunaan Enter Dalam Dokumen HTML</title>

</head>

<body>

Baris Pertama

Baris Kedua

Baris Ketiga

</body>

</html>

Lalu Simpan & Lihat Hasilnya. Maka akan tampak seperti Halaman Membuat Baris Dengan Enter yang saya buat.

Tulisan akan tampak tanpa adanya paragraf. Kesimpulannya, penekanan 
tombol Enter tidak menghasilkan baris dalam tampilan browser. 
Demikianlah sifat penulisan dokumen HTML. Lantas, bagaimana caranya 
membuat baris? Gunakanlah tag <br/ >. Tag ini tidak mempunyai tag 
penutup. Nah, Cara untuk menerapkannya dengan mengedit Dokumen HTML yang
 di buat tadi. Anda bisa menyisipkan tag <br/ > untuk membuat 
baris baru. Contohnya bisa di lihat di bawah ini :

<html>

<head>

<title>Penggunaan BR Dalam Dokumen HTML</title>

</head>

<body>

Baris Pertama<br />

Baris Kedua<br />

Baris Ketiga<br />

</body>

</html>

Untuk bahan latihan silahkan anda buat sendiri kreasi masing masing 
tentang penggunaan tag BR. Contohnya seperti kode html yang saya buat di
 bawah ini :

<html>

<head>

<title>Penggunaan BR Dalam Dokumen HTML</title>

</head>

<body>

Baris pertama<BR/ ><BR/ >

Baris kedua kosong, dan ini baris ketiga<BR/ ><BR/ ><BR/ >

Baris keempat dan kelima kosong, dan ini baris keenam

</body>

</html>

Di sini kita lihat bahwa tag <BR> yang ditulis dua kali akan 
menghasilkan dua baris, demikian seterusnya. Setelah pandai membuat 
baris, sekarang kita akan belajar membuat paragraf. Perhatikanlah contoh
 tulisan di bawah ini :

<html>

<head>

<title>Penggunaan Tag P Dalam Dokumen HTML</title>

</head>

<body>

<p>Paragraf pertama</p>

<p>Paragraf kedua </p>

<p>Paragraf ketiga</p>

</body>

</html>

Simpan dan Lihat Hasilnya. Anda juga dapat melihat hasilnya di halaman Penggunaan Tag p Untuk Membuat Paragraf.
 Tentunya anda dapat memulai latihan sendiri dengan menggabungkan 
pelajaran sebelumnya dengan sekarang ini. Ini agar kita tidak melupakan 
pelajaran yang sudah di pelajari.

source

Belajar | Tag Header

Kembali berjumpa kawan, Ini mungkin tulisan penutup dalam menghadapi Akhir Bulan Romadhon. Lha maksudanya mau libur nulis nih ? Tenang aja, saya hanya ingin meluangkan banyak waktu buat beribadah. Jadi saya tetep nulis meski ga tiap hari atau dengan waktu yang tidak dapat di tentukan.

Mengenal Tag Header

Kini saatnya kita mengenal tag Heading / Header / Kepala Tulisan. Apa itu Header ? Header adalah huruf-huruf berukuran khusus yang digunakan untuk menuliskan judul bab atau sub bab. Tingkatan Header itu ada 6 dan dimulai dari H1 hingga H6. H1 adalah header yang paling besar dan H6 adalah header yang paling kecil.

Oke, untuk cara membuatnya silahkan ketik kode html di bawah ini :

<html>

<head>

<title>Membuat Heading Kepala Tulisan</title>

</head>

<body bgcolor="#fcf" text="#000">

<h1>Header Tingkat 1</h1>

<h2>Header Tingkat 2</h2>

<h3>Header Tingkat 3</h3>

<h4>Header Tingkat 4</h4>

<h5>Header Tingkat 5</h5>

<h6>Header Tingkat 6</h6>

</body>

</html>

Setelah itu simpan dan lihat hasilnya. Anda juga dapat melihat hasil yang sudah saya buat di Halaman Membuat Heading Kepala Tulisan. Cukup mudah bukan ? Ini baru tag Header, Masih banyak tag HTML lainnya di antaranya adalah Tag untuk Membuat Baris Baru & Untuk Membuat Paragraf yang akan di bahas pada artikel selanjutnya.

source

Belajar | Menghias Tulisan dengan Tag HTML

Pada Latihan kali ini, kita akan mempelajari beberapa tag yang mudah diingat. Tag-tag ini berfungsi untuk mengubah tipe huruf yaitu :

Membuat Text Menjadi Tebal {Bold}
Membuat Text Menjadi Miring {Italic}
Membuat Text Di Garis Bawahi {Underline}
Membuat Text Di Garis Tengah {~~Strikethrough~~}
Membuat Text Berada Di Atas {^Superscript}
Membuat Text Berada Di Bawah {_Subscript}

Cara Penggunaannya

Pertama-tama hafalkan dulu fungsi dan cara penggunaannya. Di Bawah ini saya buat lagi daftar cara penggunaannya.

Membuat Text Menjadi Tebal { atau }
Membuat Text Menjadi Miring { atau }
Membuat Text Di Garis Bawahi { atau <ins>}
Membuat Text Di Garis Tengah {<del> atau <strike>}
Membuat Text Berada Di Atas {}
Membuat Text Berada Di Bawah {}

Hal yang harus kita ingat dari catatan yang sudah saya publish sebelumnya adalah “Kita harus menutup tag HTML dan jika menggunakan XHTML penyusunan awal dan akhir tag harus berurutan”. Contoh sederhananya gini, Misalkan kita mau membuat huruf tebal maka kita harus menulis tag pembuka yakni  dan harus di akhiri dengan tag penutupnya dengan hanya menambahkan slash seperti . Penyusunan tag harus Rapih jika kita menggunakan XHTML, Contohnya adalah :

Penulisan Yang Salah

<strong>Sepertinya <ins>Belajar HTML</strong> itu Mudah Sekali</ins>

Penulisan Yang Benar

<strong>Sepertinya <ins>Belajar HTML</ins> itu Mudah Sekali</strong>

Contoh Penerapan Dalam Artikel
Oke, Buka Aplikasi Notepad, gEdit, dan semacamnya. Lalu coba ketik secara manual jangan kopi paste kode di bawah ini :

<html>

<head>

<title>Ini Adalah Tulisan Standard</title>

</head>

<body bgcolor="#fcf" text="#000">

Banyak Tag HTML untuk merubah suatu jenis tulisan 

dan di antaranya ialah tulisan tebal, tulisan miring, 

tulisan bergaris bawah, tulisan bergaris tengah, 

tulisan Berada Di Atasdan tulisan Berada Di Atas. 

Kita Bisa Membuat 2 tipe huruf dipadukan misalnya tulisan tebal 

dan miring, tulisan tebal dan bergaris bawah atau tulisan miring 

dan bergaris bawah. Bahkan Kita Juga Bisa Menggabungkan sekaligus 

menjadi tulisan bergaris tengah, tulisan tebal, miring dan bergaris bawah. 

</body>

</html>

Kemudian simpan tulisan tadi dengan nama tulisan-biasa.html lalu buka
 dan perhatikanlah tulidan tersebut. Tulisan tersebut masih dalam 
kondisi yang sama alias tidak ada huruf tebal, miring, dan lain-lain. 
Disini kita akan coba merubah tulisan tersebut agar di garis bawahi, di 
tebalkan, dan lain sebagainya.

Buka Notepad Lagi, Lalu Perhatikan Dan Ketikkan Kode yang ada di bawah ini :

<html>

<head>

<title>Ini Adalah Tulisan Modifikasi</title>

</head>

<body bgcolor="#fcf" text="#000">

Banyak Tag <sup>HTML</sup> untuk merubah suatu jenis tulisan dan 

di antaranya ialah <strong>tulisan tebal</strong>, 

<em>tulisan miring</em>, <ins>tulisan bergaris bawah</ins>, 

<del>tulisan bergaris tengah</del>, <sup>tulisan Berada Di Atas</sup>

dan <sub>tulisan Berada Di Atas</sub>.

Kita Bisa Membuat 2 tipe huruf dipadukan misalnya 

<strong><em>tulisan tebal dan miring</em></strong>, 

<ins><strong>tulisan tebal dan 

bergaris bawah</strong></ins> atau 

<em><ins>tulisan miring dan bergaris bawah</ins></em>.

Bahkan Kita Juga Bisa Menggabungkan sekaligus

menjadi tulisan <strong><em><del><ins>bergaris tengah, 

tulisan tebal, miring dan bergaris bawah</ins></del></em></strong>.

</body>

</html>

Simpan dan Lihatlah Perbedaannya. Anda juga dapat melihat perbedaannya di Halaman Tulisan Standard Dan Halaman Tulisan Modifikasi.
 Coba anda perhatikan tulisan Output Browsernya dan lihat juga Source 
Codenya Dengan CTRL + U. Usahakan untuk menggunakan Editor Notepad dan 
jangan memakai Editor Seperti Macromedia Dreamweaver. Karena 
jika anda menggunakan Editor Notepad dan menuliskannya secara manual, 
itu akan membuat anda lebih cepat mengerti tentang Tag HTML.

source

Belajar | Tag Body

Selanjutnya kita bertahap sedikit demi sedikit menganal tag <body>. Apakah tag <body> fungsinya sekedar penanda tubuh atau isi dari Dokumen Website ? Ngga, tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan merubah tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag <body>. Perhatikan kode di bawah :

<html>

<head>

<title>Mengenal Tag Body</title>

</head>

<strong><body>

Ini akan tampak di dalam browser anda !!!

</body></strong>

</html>

Di atas merupakan contoh tag body di terapkan dan hasilnya bisa anda lihat di halaman mengenal tag body. Di situ tertera text “Ini akan tampak di dalam browser anda !!!”,
 itu menandakan klo apa yang kita tulis dalam tag <body> akan 
tertera / tampak di browser anda. Lain halnya dengan tag <head>, 
penulisan di antara tag <head> tidak akan tampak dalam browser 
seperti apa yang sudah saya bahas sebelumnya di halaman Pengenalan Tentang Tag head dan title.

Bagaimana kita mengkreasi tag body salah satunya adalah dengan 
mengganti warna background dalam halaman yang kita buat. Lihat kode yang
 saya tulis di bawah ini :

<html>

<head>

<title>Tag Body Berlatar Belakang Merah</title>

</head>

<strong><body bgcolor="red" text="black">

Ini akan tampak di dalam browser anda !!!

</body></strong>

</html>

Coba simpan dan lihat hasilnya di browser anda ! Atau anda bisa lihat di Halaman Tag Body Berlatar Belakang Merah. Anda juga dapat mengganti warna latar belakangnya dengan cara mengganti kata red dalam bgcolor="red"
 dengan warna yang anda inginkan. Warna Text juga dapat anda ganti 
warnanya dengan cara mengganti kata black dalam text="black" dengan 
warna lainnya.

Namun yang harus anda ketahui, bahwa kode warna dalam 
html dapat di tulis dengan : 1. anda dapat menulis dengan nama warna 
tapi dalam bahasa inggris {Jangan sampe nulis dengan bahasa indonesia 
seperti Putih, Hitam, dan Lain-Lain}. 2. Anda bisa menuliskan kode warna
 dengan format heksa #rrggbb {Misalnya Warna Pink di tulis dengan 
#ffccff atau hanya dengan #fcf}. Penulisan #000000 adalah angka Nol bukan huruf O.

Sekian pembahasan tentang Pengenalan Tag Body, Semoga Bisa Berlanjut 
Lebih Jauh Lagi. Namun Jika merasa lama menunggu Update Artikel blog 
ini, Silahkan kunjungi saja W3schools Dot Kom. Anda juga dapat 
menggunakan fasilitas Translate di Situs tersebut jika anda belum bener 
bener mengerti bahasa inggris.

source

Belajar | Tag Head dan Title

Tag <head> berfungsi untuk mengapit berbagai macam fungsi dan informasi yang berkenan dengan halaman web yang bersangkutan. Tag <title> berfungsi untuk mengapit kalimat yang menjadi judul dari halaman web tersebut.
Mari kita terapkan kedua tag tersebut ke dalam kode html yang sudah kita buat

<HTML>

<strong>

<HEAD>

<TITLE>Tag Head Dan Title</TITLE>

</HEAD></strong>

<BODY>

Tulisan ini ada di browser yah ?

</BODY>

</HTML>

Kode yang di tulis dengan huruf tebal merupakan penambahan tag head 
dan title. Coba simpan terlebih dahulu kode di atas dan lihat hasil 
perbedaannya dengan kode yang sebelumnya.

Hasilnya dapat anda lihat dan bandingkan perbedaannya di Halaman Sebelum Dan Halaman Sesudahnya

Kok ngga ada perubahan … ?

Perubahannya terletak pada bagian Title Bar Browser anda. Sebelumnya 
Title Bar Browser anda tidak menampilkan judul sebuah halaman yang di 
tulis dan sesudahnya Title Bar Browser anda Menunjukkan adanya judul 
Karya Pertamaku.

kode yang di simpan sesudah tag  dan sebelum tag , tidak akan di tampilkan pada halaman browser anda.

source

Belajar | Perbedaan XHTML dan HTML

Artikel ini menjelaskan beberapa perbedaan XHTML dengan HTML. Kepanjangan dari HTML adalah HyperText Markup Language, Sedangkan XHTML adalah EXtensible HyperText Markup Language. Ini merupakan gabungan dari XML dengan HTML. XHTML hampir identik dengan HTML 4.1, tapi XHTML lebih ketat peraturannya dibanding peraturan HTML 4.1. XHTML itu menjadikan HTML didefinisikan sebagai aplikasi XML & semua Browser utama mendukung XHTML.

XHTML Lebih Baik Dari HTML

XHTML lebih baik dari HTML karena peraturan XHTML sangat ketat diantaranya semua tag harus ditutup tidak seperti HTML. Dibawah ini saya akan jelaskan beberapa perbedaan XHTML dengan HTML & peraturan yang harus dipenuhi di XHTML.

Struktur XHTML

XHTML DOCTYPE bersifat WAJIB
Atribut XML namespace dalam <html> bersifat WAJIB
<html>, <head>, <title>, & <body> bersifat WAJIB

Elemen XHTML

Elemen XHTML harus tersusun secara benar (properly nested).
Elemen XHTML harus selalu ditutup
Elemen XHTML harus dalam huruf kecil
Dokumen XHTML harus memiliki satu elemen root “Well-formed”

Atribut XHTML

Nama atribut harus dalam huruf kecil
Nilai atribut harus dengan tanda kutip
Tidak diperbolehkan menyingkat atribut
Image harus ada atribut alt

Ada 3 DTD untuk XHTML yaitu Strict (hanya akan valid jika tanpa tag lama), Transisi (masih akan memvalidasi dengan tag lama), & Frameset (untuk halaman frame). Semua dokumen XHTML harus sesuai dengan aturan sintaks XML. Contoh Minimal penulisan tag XHTML sebagai berikut.

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

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Judul Dokumen</title>

</head>

<body>

......

</body>

</html>

Elemen XHTML Harus Bersarang

<b><i>Ini contoh elemen bersarang yang benar</i></b>

<b><i>Ini contoh elemen bersarang yang salah</b></i>

Elemen XHTML Harus Ditutup

<p>Benar</p> <!--Benar-->

<br /> <!--Benar-->

<hr /> <!--Benar-->

<img src="test.png" alt="Ngetest Doank" /> <!--Benar-->

<p> <!--Salah-->

<br> <!--Salah-->

<hr> <!--Salah-->

<img src="test.png" alt="Ngetest Doank"> <!--Salah-->

Elemen & Atribut XHTML Harus Huruf Kecil

<p>Ini Paragraf</p> <!--Benar-->

<P>Ini Paragraf</P> <!--Salah-->

Elemen XHTML Harus Dikutip & Tidak Boleh Disingkat

<!--Benar-->

<input checked="checked">

<input readonly="readonly">

<input disabled="disabled">

<option selected="selected">

<!--Salah-->

<input checked>

<input readonly>

<input disabled>

<option selected>

Cara Konversi HTML Ke XHTML

Tambahkan XHTML <! DOCTYPE> ke baris pertama
Menambahkan atribut xmlns ke elemen html
Ubah semua nama elemen menjadi huruf kecil
Ubah semua nama atribut menjadi huruf kecil
Tutup semua elemen kosong
Mengutip semua nilai atribut

source

Belajar | Perbedaan XML dan HTML

XML singkatan dari eXtensible Markup Language, Sedangkan HTML singkatan dari HyperText Markup Language. Jadi keduanya adalah bahasa penandaan (markup language). Penandaan dilakukan dengan menggunakan tag, misalnya dalam HTML untuk menjadikan huruf tebal (bold), tag yang digunakan adalah  atau  dan diakhiri dengan tag penutup  atau .

Penandaan dalam XML juga dengan tag, tapi bukan untuk penampilannya melainkan untuk menetapkan sifat suatu informasi. Misalnya tag <message> untuk menyatakan bahwa itu adalah suatu pesan. Kesimpulannya adalah HTML digunakan untuk mengatur tampilan informasi, sedangkan XML digunakan untuk menciptakan & memproses berbagai informasi.

Belajar | Pengenalan Doctype HTML

Sebelum kita membuat sebuah halaman HTML, Sebaiknya Untuk Pembelajaran, Gunakan Keyboard anda untuk menari-nari & jangan gunakan mouse anda untuk melakukan kebisasaan seorang pemalas (Copy Paste / Salin Tempel), Karena Sampai Kapanpun Anda belajar, anda hanya bisa mengetahui pelajaran tersebut, namun anda tidak akan pernah bisa untuk mengekspresikan jari jari mungil anda bermain main Code HTML di atas keyboard anda. Apa Itu Yang anda harapkan ?

Susunan HTML yang pertama kita temukan dan harus di pelajari adalah Doctype. Untuk lebih jelasnya Silahkan Lihat Code di Bawah Ini.

<!DOCTYPE html PUBLIC "-//W3C// DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

Apa Itu Doctype ? Lalu Untuk Apakah Itu Doctype itu ? Untuk Pengenalan Sebuah Structur HTML, Awalnya kita harus mengetahui apa itu Doctype. DOCTYPE adalah suatu deklerasi yang digunakan untuk mengidentifikasi jenis dokumen HTML yang digunakan sehingga browser dapat menentukan bagaimana memperlakukan kode tersebut.

Sudah paham ? Jika Belum, saya sarankan untuk membaca kembali dan mencoba mengetikkan Code Doctype tersebut Ke dalam Notepad Maupun Text Editor lainnya. Jika sudah, kita lanjutkan ke bagian Macam-Macam Doctype yang harus diketahui. Doctype yang diatas tersebut masuk dalam kategori Doctype apa ? Jika anda sudah mengetahuinya berkenalanlah dengan Doctype di bawah ini.

HTML 4.01 Strict

Doctype Ini berisi semua element HTML beserta atributnya, namun frameset tidak di perbolehkan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

Doctype Ini berisi semua element HTML, element presentasi {seperti Font}, beserta atributnya. namun, frameset tidak di perbolehkan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

Doctype Ini berisi semua yang mendukung HTML 4.01 Transitional dan frameset di perbolehkan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict

Doctype Ini berisi semua yang mendukung HTML 4.01 Strict dan markup harus di tulis dengan well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

Doctype Ini berisi semua yang mendukung HTML 4.01 Transitional dan markup harus di tulis dengan well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

Doctype Ini berisi semua yang mendukung HTML 4.01 Frameset dan markup harus di tulis dengan well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1

Doctype Ini berisi semua yang mendukung XHTML 1.0 Strict tetapi anda bisa menambahkan modul (misalnya untuk memberikan dukungan ruby untuk bahasa Asia Timur).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML5

Mahluk apa ini ? Untuk Keterangan Lebih Lanjut silahkan kunjungi Learn HTML5 On W3schools. Untuk Penerapan Doctype nya Cukup Dengan Memasukkan Code dibawah ini.

1	`<!DOCTYPE HTML>` `source`

Belajar | Perkembangan HTML

Penggunaan HTML dikendalikan oleh W3C (World Wide Web Consortium). HTML dibuat & dikembangkan oleh "Tim Berners Lee" ketika mereka bekerja di CERN pada tahun 1989. Kemudian HTML dipopulerkan oleh Browser Mosaic yang dikembangan di NSCA. Selama tahun 1990an, berbagai macam versi HTML telah muncul dengan tambahan & kelengkapan fitur-fiturnya. Versi standar HTML yang telah ada saat ini antara lain :

HTML Versi 1.0

HTML versi ini merupakan versi pertama sejak lahirnya Bahasa HTML yang memiliki kemampuan untuk heading, paragraph, hypertext, manipulasi text (bold & italic) serta memiliki hubungan terhadap penggunaan sebuah gambar.

HTML Versi 2.0

HTML versi ini lahir pada tanggal 14 Januari 1996 dengan beberapa kemampuan tambahan seperti penambahan form & hal ini menjadi cikal bakal adanya proses interaktif dengan pengguna. Mulai versi ini, HTML menjadi awal mula adanya website interaktif.

HTML Versi 3.0

HTML versi ini lahir pada tanggal 18 Desember 1997 yang dikenal dengan HTML+ karena mempunyai beberapa fasilitas penambahan fitur table dalam paragraph.

HTML Versi 3.2

HTML versi ini merupakan versi terbaru penyempurnaan dari versi 3.0 pada bulan Mei 1998.

HTML Versi 4.0

HTML versi ini lahir pada tanggal 24 Desember 1999 dengan penambahan beberapa fitur lagi seperti adanya link, image & lain-lain sebagai penyempurna dari HTML versi 3.2.

HTML Versi 5.0

HTML versi ini atau lebih dikenal dengan HTML5 lahir pada tahun 2009 yang menjadi standar baru untuk HTML, XHTML, & DOM HTML. HTML5 ini merupakan proyek kerjasama antara W3C dengan WHATWG (Web Hypertext Application Technology Working Group).

source

Belajar | Table HTML

Sekilas tentang tabel.

Tabel (table) sangat diperlukan ketika kita ingin menampilkan data yang berbentuk kolom-kolom. Dulu sebelum adanya CSS, table digunakan untuk membuat layout website namun saat ini sudah jarang dipakai sebagai layout karena faktor file yang cenderung lebih besar sehingga mempengaruhi waktu akses yang lebih lama, dalam pengelolaan dan pengeditan pun jauh lebih rumit karena banyaknya tag-tag yang dihasilkan.

Cara membuat tabel.

Untuk membuat table yang sederhana ada 3 elemen utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.

Berikut adalah contoh tabel yang terdiri dari 3 baris dan 2 kolom.

<table border="1">
 <tr>
  <td>Cell 1 - Baris 1 Kolom 1</td>
  <td>Cell 2 - Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 3 - Baris 2 Kolom 1</td>
  <td>Cell 4 - Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Cell 5 - Baris 3 Kolom 1</td>
  <td>Cell 6 - Baris 3 Kolom 2</td>
 </tr> 
</table>

Hasil:

Cell 1 – Baris 1 Kolom 1	Cell 2 – Baris 1 Kolom 2
Cell 3 – Baris 2 Kolom 1	Cell 4 – Baris 2 Kolom 2
Cell 5 – Baris 3 Kolom 1	Cell 6 – Baris 3 Kolom 2

Dalam contoh sengaja ditambah dengan atribut border agar kita dapat melihat posisi dari tabel tersebut, karena secara default nilai dari border ini adalah 0 jika tidak disertakan dengan tag <table>.

Mengatur lebar dan tinggi tabel.

Untuk mengatur lebar table digunakan atribut width atau bisa juga dengan style CSS dengan properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style dengan properti width dan height.
Berikut adalah contoh tabel dengan lebar 75% dari lebar dokumen dan lebar kolom masing 50% dengan tinggi pada baris pertama adalah 40px.

<table border="1" width="75%">
 <tr>
  <td style="width:50%;height:40px;">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 1</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Untuk satuan ukuran widht dan height dari atribut maupun style tersebut kita dapat menggunakan px atau %. Untuk pengaturan lebar dan tinggi pada td kita cukup memasukkan pada kolom pertama secara otomatis kolom-kolom berikutnya akan mengikuti pengaturan tersebut.

Menggabungkan kolom pada tabel

Table Cell atau baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan bentuk tabel yang diinginkan.

Untuk menggabungkan kolom dalam tabel digunakan atribut colspan.

<table border="1" width="75%">
 <tr>
  <td colspan="2">Gabungan Kolom 1&amp;2 pada Baris 1</td>
 </tr>
 <tr>
  <td style="width:50%">Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>

Hasil:

Gabungan Kolom 1&2 pada Baris 1
Baris 2 Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.

<table border="1" width="75%">
 <tr>
  <td style="width:50%" rowspan="2">Gabungan Baris 1&amp;2 pada Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 3 Kolom 1</td>
  <td>Baris 3 Kolom 2</td>
 </tr>
</table>

Hasil:

Gabungan Baris 1&2 pada Kolom 1	Baris 1 Kolom 2
Gabungan Baris 1&2 pada Kolom 1	Baris 2 Kolom 2
Baris 3 Kolom 1	Baris 3 Kolom 2

Mengatur jarak kolom pada tabel

Untuk mengatur posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.
Cellpadding adalah untuk pengaturan sisi dari bagian dalam cell.

<table border="1" width="75%" cellpadding="8">
 <tr>
  <td style="width:50%;">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Sedangkan Cellspacing adalah pengaturan sisi dari bagian luar cell.

<table border="1" width="75%" cellspacing="8">
 <tr>
  <td style="width:50%">Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:

Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat titel pada tabel.

Untuk tabel yang lengkap dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag <table> dan kita juga bisa mengganti td dengan th (table heading) sebagai titel dari baris maupun kolom.
Caption dan th akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan tebal.

<table border="1" width="75%">
<caption>Disini adalah titel tabel ini</caption>
 <tr>
  <th style="width:50%;">Header Kolom 1</th>
  <th>Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:

Disini adalah titel tabel ini
Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Membuat background pada tabel

Untuk membuat background pada tabel kita gunakan atribut style dengan properti background.
Berikut adalah contoh table dengan background warna kuning muda dengan heading warna merah.

<table style="background:#ffc" width="75%" border="1">
 <tr>
  <th style="background:red;width:50%;">Header Kolom 1</th>
  <th style="background:red;">Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:

Header Kolom 1	Header Kolom 2
Baris 1 Kolom 1	Baris 1 Kolom 2
Baris 2 Kolom 1	Baris 2 Kolom 2

Seperti kita lihat bahwa border dari cell tersebut terlihat terlalu tebal padahal kita membuat nilai dari atribut border adalah 1px.

Ini terjadi karena secara default atribut cellpadding dan cellspacing pada elemen table memiliki nilai masing-masing 1px.

Jadi untuk menghilangkannya kita harus memasukkan kedua atribut tersebut dengan nilai 0.

<table cellpadding="0" cellspacing="0" style="background:#ffc" width="75%" border="1">
...
</table>

Atau kita juga bisa menggunakan style CSS yaitu dengan properti border-collapse:collapse.

<table style="border-collapse:collapse;background:#ffc" width="75%" border="1">
 <tr>
  <th style="background:red;width:50%;">Header Kolom 1</th>
  <th style="background:red;">Header Kolom 2</th>
 </tr>
 <tr>
  <td>Baris 1 Kolom 1</td>
  <td>Baris 1 Kolom 2</td>
 </tr>
 <tr>
  <td>Baris 2 Kolom 1</td>
  <td>Baris 2 Kolom 2</td>
 </tr>
</table>

Hasil:

Belajar | Hyperlink HTML

Hyperlink atau sering di singkat dengan link penjelasan serta contoh-contohnya dapat di lihat di Belajar HTML tentang Hyperlink HTML. Sedikit koreksi dari contoh link dengan gambar yang kita buat disana yaitu:

<a href="http://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src="contoh.jpg" border="0" width="147" height="31" align="left" alt="yahoo"></a>

Atribut border dan align merupakan deprecated atribut jika di gunakan di dalam tag <img> jadi kita dapat menggantinya dengan atribut style dengan properti border untuk atribut border dan properti float untuk atribut align.

<a href="http://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src="yahoo.gif" style="border:none;float:left" width="147" height="31" alt="yahoo"/></a>

Hasil:

Lorem ipsum dolor sit amet, nulla gravida fusce, sem id. Lectus justo condimentum. Arcu fringilla velit. Pretium elit id, scelerisque penatibus fermentum, adipiscing dui. Habitasse ut. Ac in, semper aliquam ligula, quisque class tellus.

Hyperlink yang akan kita pelajari dalam tutorial ini sebagai tambahan dari pelajaran HTML sebelumnya antara lain: Thumbnail link. Thumbnail link digunakan untuk gambar yang berukuran besar. Caranya dengan membuat duplikat dari gambar tersebut dengan ukuran yang jauh lebih kecil yang disebut dengan thumbnail. Jadi gambar ukuran besar tersebut baru ditampilkan setelah kita mengklik gambar tumbnail tersebut.

<a href="lokasi gambar original"><img src="lokasi gambar thumbnail"></a>

Contoh:

<a href="images/besar-1160X700px.jpg"><img src="images/kecil-150X100px.jpg" style="border:none" width="150" height="100" title="Klik untuk melihat gambar original" alt="contoh tumbnail" /></a>

Hasil:

Membuat link di dalam satu halaman website.

Pada tulisan ini tepatnya pada bagian atas setelah titel Hyperlink HTML saya menambahkan tag di bawah ini:

<a name="top"></a>

Dengan tag tersebut kita dapat membuat link ke lokasi tersebut dengan membuat link seperti berikut ini:

Klik link berikut untuk <a href="#top">Kembali ke atas</a>

Hasil:

Klik link berikut untuk Kembali ke atas

Dengan cara diatas kita juga bisa membuat link ke suatu halaman website dan langsung melompat ke topik tertentu di dalam satu halaman.

Link berikut akan membawa anda ke halaman Belajar HTML dengan topik <a href="http://htmlcssguides.com/belajar-html#hyperlink-html">Hyperlink HTML</a>.

Hasil:

Link berikut akan membawa anda ke halaman Belajar HTML dengan topik Hyperlink HTML.

Contoh diatas dapat dibuat dengan menambahkan tag berikut sebelum titel Hyperlink HTML di dalam halaman tujuan seperti contoh diatas adalah halaman Belajar HTML:

<a name="hyperlink-html"></a>

Atau bisa juga dengan menambahkan atribut "id" di dalam tag titel. Seperti contoh diatas, titel Hyperlink HTML tersebut berada di dalam tag <h3> jadi kita bisa menuliskan:

<h3 id="hyperlink-html">Hyperlink HTML</h3>

Untuk membuat link ke lokasi tersebut kita harus membuat link ke halaman utamanya dulu baru kemudian di ikuti dengan nama atau id dengan format: "#nama-link".

<a href="http://htmlcssguides.com/belajar-html#hyperlink-html">Hyperlink HTML</a>

Hasil:

Hyperlink HTML

Membuat Email Link.

<a href="mailto:alamat email">link teks</a>

Contoh:

Jika ada masalah silahkan kirim <a href="mailto:support@nama-domain.com">Email</a> ke bagian pelayanan.

Hasil:

Jika ada masalah silahkan kirim Email ke bagian pelayanan.

source

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

HTML Element

Nested HTML

Dokumen HTML

Selalu ingat agar menutup setiap elemen dengan tag penutup

Case sensitive

Langkah-langkah

Special Character itu apa ?

Mengenal Tag Header

Cara Penggunaannya

Contoh Penerapan Dalam Artikel

XHTML Lebih Baik Dari HTML

Struktur XHTML

Elemen XHTML

Atribut XHTML

Elemen XHTML Harus Bersarang

Elemen XHTML Harus Ditutup

Elemen & Atribut XHTML Harus Huruf Kecil

Elemen XHTML Harus Dikutip & Tidak Boleh Disingkat

Cara Konversi HTML Ke XHTML

HTML 4.01 Strict

HTML 4.01 Transitional

HTML 4.01 Frameset

XHTML 1.0 Strict

XHTML 1.0 Transitional

XHTML 1.0 Frameset

XHTML 1.1

HTML5

HTML Versi 1.0

HTML Versi 2.0

HTML Versi 3.0

HTML Versi 3.2

HTML Versi 4.0

HTML Versi 5.0

Label

Blog Archive