HTML merupakan bahasa yang wajib dipelajari, bagi pemula yang mau menjadi web developer. itu dikarenakan HTML merupakan bahasa dasar untuk membuat sebuah web, Belajar HTML mungkin bisa membuat sedikit frustasi dan susah dipahami, dan detail yang rumit membuktikan sulitnya memahami HTML. Anda mungkin berppikir belum pernah melih HTML, tetapi jika memiliki profil MySpace misalnya, maka mungkin berarti pernah. Walaupun mungkin tampak menakutkan, HTML adalah alat yang sangat berguna bagi setiap orang yang menggunakan internet, dan memelajari dasar-dasarnya hanya membutuhkan sedikit waktu dari yang Anda pikirkan.

Apa itu HTML ?

HTML seingkatan dari (Hyper Text Markup Language) adalah bahasa markah yang digunakan untuk membuat sebuah website sesuai dengan standar pengkodean tag HTML. Meskipun HTML tidak termasuk ke dalam bahasa pemrograman, namun HTML merupakan dasar yang wajib diketahui sebelum memulai pemrograman web.

Element

Element terdiri dari semua kode termasuk tag pembuka <em> dan juga tag penutup </em>.

Berikut untuk contoh codingnya:

<em>Contoh element.</em>

Maka hasilnya adalah seperti dibawah ini:

Contoh Element.

Di dalam sebuah element, kita juga bisa membuat sebuah sub judul atau heading. Dalam hal ini, Anda akan menggunakan h1, h2, h3, dan seterusnya. Untuk menulis kode h1 atau heading 1, misalnya, Anda bisa membuatnya seperti ini:

<h1> Tips Belajar HTML </h1>

<h2> Tips Belajar HTML </h2>

<h3> Tips Belajar HTML </h3>

<h4> Tips Belajar HTML </h4>

<h5> Tips Belajar HTML </h5>

Maka hasilnya akan seperti ini:

Tips Belajar HTML

Tag

Tag adalah kode yang dipakai untuk menginformasikan pada browser untuk apa HTML ditulis. HTML menyediakan bermacam-macam tag untuk mendeskripsikan tipe konten atau elemen pada website

Berikut ini adalah beberapa tag-tag yang sering digunakan pada saat kita ingin membuat file HTML

Nama Tag	Keterangan / Kegunaan
Basic
<!DOCTYPE>	Tag untuk menentukan tipe dokumen
<html>	Tag untuk membuat sebuah dokumen HTML
<title>	Tag untuk membuat judul dari sebuah halaman
<body>	Tag untuk membuat tubuh dari sebuah halaman
<h1> to <h6>	Tag untuk membuat heading
<p>	Tag untuk membuat paragraf
<br>	Memasukan satu baris putus
<hr>	Tag untuk membuat perubahan dasar kata didalam isi
<!–…–>	Tag untuk membuat komentar
Formatting
<acronym>	Tag untuk membuat sebuah akronim (tidak disupport lagi di HTML5)
<abbr>	Tag untuk membuat sebuah singkatan
<address>	Tag untuk membuat kontak alamat
<b>	Tag untuk membuat huruf bercetak tebal
<bdi>	Mengisolasi bagian dari teks yang dapat diformat dalam arah yang berbeda dari teks lain di luarnya (tag baru HTML5)
<bdo>	Mengganti arah teks
<big>	Tag untuk membuat text berhuruf besar (tidak disupport lagi di HTML5)
<blockquote>	Tag untuk membuat sebuah bagian text yang dikutip dari sumber lain
<center>	Tag untuk membuat jajaran teks menjadi ditengah (tidak disupport lagi di HTML5)
<cite>	Tag untuk membuat judul karya
<code>	Tag untuk membuat potongan kode komputer di antara text
<del>	Tag untuk membuat teks yang telah dihapus dari dokumen
<dfn>	Tag untuk membuat sebuah istilah definisi
<em>	Tag untuk membuat penekanan teks (tidak disupport lagi di HTML5)
<font>	Tag untuk membuat font, warna, dan ukuran untuk teks (tidak disupport lagi di HTML5)
<i>	Tag untuk membuat sebuah bagian dari teks yang disesuaikan dengan mood
<ins>	Tag untuk membuat teks yang telah dimasukkan ke dalam dokumen
<kbd>	Tag untuk membuat input keyboard
<mark>	Tag untuk membuat teks yang disorot / ditandai (tag baru HTML5)
<meter>	Tag untuk membuat pengukuran skalar
<pre>	Tag untuk membuat teks terformat
<progress>	Memperlihatkan kemajuan tugas (tag baru HTML5)
<q>	Tag untuk membuat kutipan pendek
<rp>	Tag untuk membuat apa yang harus ditampilkan di browser yang tidak mendukung penjelasan ruby (tag baru HTML5)
<rt>	Tag untuk membuat sebuah anotasi / pengucapan karakter (untuk tipografi Asia Timur)
<ruby>	Tag untuk membuat sebuah anotasi ruby (untuk tipografi Asia Timur) (tag baru HTML5)
<s>	Tag untuk membuat teks yang tidak lagi benar
<samp>	Tag untuk membuat contoh keluaran dari program komputer
<small>	Tag untuk membuat teks kecil
<strike>	Tag untuk membuat teks yang di coret tengah (tidak disupport lagi di HTML5)
<strong>	Tag untuk membuat teks penting
<sub>	Tag untuk membuat teks subskrip (seperti dalam penulisan Jat Kimia)
<sup>	Tag untuk membuat teks superscripted (seperti dalam penulisan akar kuadrat)
<time>	Tag untuk membuat tanggal / waktu (tag baru HTML5)
<tt>	Tag untuk membuat teks teletype (tidak disupport lagi di HTML5)
<u>	Tag untuk membuat teks yang memiliki Gaya yang berbeda dari teks biasa lainnya
<var>	Tag untuk membuat sebuah variabel
<wbr>	Tag untuk membuat kemungkinan garis-putus



Forms
<form>	Tag untuk membuat sebuah form HTML untuk input pengguna
<input>	Tag untuk membuat sebuah kontrol input
<textarea>	Tag untuk membuat sebuah kontrol input multibaris (text area)
<button>	Tag untuk membuat sebuah tombol yang dapat diklik
<select>	Tag untuk membuat sebuah daftar drop-down
<optgroup>	Tag untuk membuat sebuah kelompok pilihan yang terkait dalam daftar drop-down
<option>	Tag untuk membuat pilihan dalam daftar drop-down
<label>	Tag untuk membuat sebuah label untuk sebuah elemen <input>
<fieldset>	Grup unsur terkait dalam bentuk
<legend>	Tag untuk membuat sebuah caption untuk sebuah elemen <fieldset>, < figure>, atau <details>
<datalist>	Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input (tag baru HTML5)
<keygen>	Tag untuk membuat key-pair generator kolom input (tag baru HTML5)
<output>	Tag untuk membuat hasil penghitungan (tag baru HTML5)
Frames
<frame>	Tag untuk membuat sebuah window (bingkai) dalam sebuah frameset (tidak disupport lagi di HTML5)
<frameset>	Tag untuk membuat satu set bingkai (tidak disupport lagi di HTML5)
<noframes>	Tag untuk membuat sebuah konten alternatif untuk pengguna yang tidak mendukung frame (tidak disupport lagi di HTML5)
<iframe>	Tag untuk membuat sebuah bingkai
Images
<img>	Tag untuk membuat gambar
<map>	Tag untuk membuat gambar-peta
<area>	Tag untuk membuat area dalam gambar-peta
<canvas>	Digunakan untuk menggambar grafik, melalui scripting (JavaScript ) (tag baru HTML5)
<figcaption>	Tag untuk membuat sebuah caption untuk elemen <figure> (tag baru HTML5)
<figure>	Menentukan konten mandiri (tag baru HTML5)
Audio/Video
<audio>	Tag untuk membuat isi suara (tag baru HTML5)
<source>	Tag untuk membuat sumber beberapa media untuk elemen media (<video> dan <audio>) (tag baru HTML5)
<track>	Tag untuk membuat trek teks untuk elemen media (<video> dan <audio>) (tag baru HTML5)
<video>	Tag untuk membuat sebuah video atau film (tag baru HTML5)
Links
<a>	Tag untuk membuat hyperlink
<link>	Tag untuk membuat hubungan antara dokumen dan sumber daya eksternal (paling sering digunakan untuk link ke style sheet)
<nav>	Tag untuk membuat navigasi link (tag baru HTML5)
Lists
<ul>	Tag untuk membuat daftar dengan selain nomor
<ol>	Tag untuk membuat daftar dengan nomor
<li>	Tag untuk membuat sebuah item daftar
<dir>	Tag untuk membuat sebuah daftar direktori (tidak disupport lagi di HTML5)
<dl>	Tag untuk membuat sebuah daftar definisi
<dt>	Tag untuk membuat istilah (item) dalam daftar definisi
<dd>	Defines a description of an item in a definition list
<menu>	Tag untuk membuat deskripsi dari item dalam daftar definisi
<command>	Tag untuk membuat sebuah tombol perintah bahwa seorang pengguna dapat meminta (tag baru HTML5)
Tables
<table>	Tag untuk membuat tabel
<caption>	Tag untuk membuat sebuah caption tabel
<th>	Tag untuk membuat sebuah sel header tabel
<tr>	Tag untuk membuat baris dalam sebuah tabel
<td>	Tag untuk membuat sel dalam sebuah tabel
<thead>	Mengelompokan isi header dalam sebuah tabel
<tbody>	Mengelompokanisi tubuh dalam sebuah tabel
<tfoot>	Mengelompokan isi footer dalam sebuah tabel
<col>	Menentukan properti kolom untuk setiap kolom dalam elemen <colgroup>
<colgroup>	Menentukan kelompok dari satu atau lebih kolom dalam sebuah tabel untuk diformat
Style/Sections
<style>	Tag untuk membuat informasi style untuk dokumen
<div>	Tag untuk membuat sebuah bagian dalam dokumen
<span>	Tag untuk membuat sebuah bagian dalam dokumen
<header>	Tag untuk membuat sebuah header untuk dokumen atau bagian (tag baru HTML5)
<footer>	Tag untuk membuat footer untuk dokumen atau bagian (tag baru HTML5)
<hgroup>	Pengelompokan elemen heading (<h1> sampai <h6>) (tag baru HTML5)
<section>	Tag untuk membuat bagian dalam dokumen (tag baru HTML5)
<article>	Tag untuk membuat sebuah artikel (tag baru HTML5)
<aside>	Tag untuk membuat konten lain selain dari konten halaman (tag baru HTML5)
<details>	Tag untuk membuat rincian tambahan yang pengguna dapat lihat atau sembunyikan (tag baru HTML5)
<dialog>	Tag untuk membuat sebuah kotak dialog atau jendela (tag baru HTML5)
<summary>	Tag untuk membuat sebuah judul terlihat untuk elemen <detil> (tag baru HTML5)
Meta Info
<head>	Tag untuk membuat informasi tentang dokumen
<meta>	Tag untuk membuat metadata tentang dokumen HTML
<base>	Menentukan URL dasar / target untuk semua URL relatif dalam dokumen
<basefont>	Menentukan standar warna, ukuran, dan font untuk semua teks dalam dokumen (tidak disupport lagi di HTML5)
Programming
<script>	Tag untuk membuat script di sisi klien
<noscript>	Tag untuk membuat sebuah konten alternatif bagi pengguna yang tidak mendukung script di sisi klien
<applet>	Tag untuk membuat sebuah java applet yang ditanam (tidak disupport lagi di HTML5)
<embed>	Tag untuk membuat sebuah wadah untuk aplikasi eksternal (non-HTML) (tag baru HTML5)
<object>	Tag untuk membuat sebuah objek yang ditanam
<param>	Tag untuk membuat sebuah parameter untuk objek

Atribut

Atribut adalah informasi tambahan yang dicantumkan pada tag pembuka, biasanya berupa instruksi untuk menambahkan efek warna, ketebalan, dan sebagainya.

Atribut memiliki dua bagian yaitu nama dan nilai yang ditulis name=“value”. Penulisan atribut pada HTML diawali dengan tag, misalnya :

<h2 align=“center”>Tips Belajar HTML</h2>

Dalam kasus di atas, h2 adalah tag heading 2 dan align dan center adalah nama atribut.

HTML Page untuk Pemula

Header

Untuk membuat bagian header halaman, kamu bisa menulis tag <header>. Tag ini bisa ditulis lebih dari sekali sesuai dengan kebutuhan.

Tag <header> paling tepat diletakkan di bagian atas web di mana kita biasa meletakkan judul situs, misalnya.

<h1>Tips Belajar HTML</h1>

Paragraf

Di bawah bagian header Jagoan Hosting, Sobat Jagoan bisa menambahkan sebuah paragraf dengan mencantumkan <p>. Berikut adalah contoh text paragraf yang bisa kalian coba.

<h1>Jagoan Hosting</h1><p>Selamat pagi, Sobat Jagoan!<p>

List

Untuk menambahkan sebuah list, kamu perlu menambahkan dua tag berbeda yaitu <ul> dan <li>. <ul> adalah unordered list dan <li> adalah list item.

Kamu perlu menyisipkan <li> di dalam <ul>. Berikut adalah contoh sederhananya.

<ul> <li>Package A</li> <li>Features</li> <li>Price</li></ul>

Gambar

Di era digital saat ini, gambar sangat diperlukan untuk menegaskan suatu pernyataan atau sekedar menambah nilai estetika pada website kamu.

Sobat Jagoan bisa menggunakan <img> untuk menampilkan gambar pada website kamu. <img> memiliki atribut lain yang berisi informasi lanjutan dari sebuah gambar seperti sumber, tinggi, lebar, dan sebagainya.

Input Fields

Mencantumkan input-input pada website adalah sesuatu yang perlu dilakukan guna memperjelas informasi yang ingin disampaikan.

Berikut adalah contoh sederhana yang bisa Sobat Jagoan dengan mudah lakukan.

Tabel

Penyisipan tabel pada HTML bisa jadi rumit untuk kamu yang baru belajar HTML. Untuk memudahkan kamu dalam belajar, simaklah daftar tag tabel di bawah ini.

Tag Tabel	Definisi	Posisi
<thead>	Table Head	Bagian atas tabel
<tbody>	Table Body	Konten tabel
<tfoot>	Table Foot	Bagian bawah tabel
<colgroup>	Column Group	Di dalam tabel
<th>	Table Header	Sel data untuk header tabel

Berikut contoh penggunaan tag tabel pada HTML.

<table>

<tr>

<td>Baris A – Kolom A</td>

<td>Baris A – Kolom B </td>

</tr>

<tr>

<td>Baris B – Kolom A</td>

<td>Baris B – Kolom B</td>

</tr>

</table>

Teks Editor untuk Menulis HTML

Berikut ini ada beberapa editor yang sering digunakan untuk menulis HTML yaitu :

1. Notepad++

Notepad++ dibuat untuk sistem operasi Windows. Boleh dikatakan kehadiran Notepad++ ini untuk melengkapi kekurangan dari teks editor bawaan Windows, Notepad.

Anda bisa mengunduh dan menggunakan editor ini dengan gratis.

Notepad++ memiliki tampilan yang sederhana dan cukup ringan. Namun, Notepad++ tetap memiliki fitur utama yang dibutuhkan untuk mengedit HTML seperti highlight syntax dan juga autocomplete.

Jika ingin mengedit beberapa dokumen dalam beberapa tab berbeda, Anda bisa memanfaatkan fitur multi-document Notepad++.

2. Atom

Tak lengkap jika tidak menyertakan Atom sebagai HTML editor terbaik. Kenyataanya, Atom tidak hanya bersifat open source dan gratis, namun juga mendukung semua sistem operasi (multiplatform). Kian hari pengguna Atom kian banyak.

Apa yang membuat Atom istimewa? Teletype salah satunya. Fitur ini memungkinkan beberapa web developer berkontribusi pada kode tertentu secara bersamaan. Selain itu, Atom dikembangkan oleh orang-orang di balik GitHub. Jadi, kompatibilitasnya dengan GitHub jangan diragukan.

Atom dibuat untuk melengkapi fungsi-fungsi yang belum dimiliki HTML editor sebelumnya. Artinya, semua fiturnya lengkap dan tinggal Anda tentukan mana package yang ingin Anda pasang.

3. Brackets

Brackets adalah sebuah HTML editor yang tangguh, namun tetap ringan. Apa pun sistem operasi yang Anda pakai, Brackets bisa menjadi HTML editor andalan Anda. Plus, Brackets tidak mengharuskan Anda membayar sepeser pun.

Brackets mungkin terlihat sangat simpel. Namun, beragam fitur yang dimilikinya menjadikannya favorit para web developer. Tidak semua fitur terpasang secara default. Anda bisa menambah fitur tambahan (extension) jika membutuhkannya.

Salah satu fitur unggulan editor ini adalah inline editor. Dengan fitur ini Anda bisa langsung mengedit CSS dari HTML tag yang Anda klik dengan pintasan Control+E. Selain itu, Brackets memiliki live preview yang bisa Anda gunakan untuk melihat setiap perubahan coding yang Anda lakukan.

4. Sublime Text

Anda mungkin tidak percaya bahwa Sublime Text adalah HTML editor yang ringan. Padahal fitur yang dimilikinya sangat lengkap.

Tersedia untuk semua sistem operasi, editor ini bisa Anda unduh dengan gratis. Tapi, Anda harus membeli lisensi untuk dapat terus menggunakanya. Untuk personal, harga yang ditawarkan sebesar $80.

Terlalu mahal? Tidak juga jika Anda mengetahui fitur yang ditawarkan. Apa saja? Yang paling terkenal adalah multiple selection. Fitur ini memungkinkan Anda membuat banyak perubahan dalam sekali edit.

Selain itu, Sublime Text juga memiliki beragam fitur otomatis seperti autosave dan autocompletion. Lalu, Anda juga bisa menggunakan fitur command palette, split editing, dan pilihan kustomisasi yang lengkap.

Berikut Contoh penulisan HTML

<!DOCTYPE HTML>
<html>
    <head>
        <title>Pengenalan Dasar HTML</title>
    </head>
    <body>
        <p>Terima kasi sudah berkunjung</p>

        <br><b>www.bertips.com</b>,
        <br> <i>www.bertips.com</i>,
        <br> <u>www.bertips.com</u>
    </body>
</html>