BELAJAR HTML LENGKAP DARI 0 SAMPAI MAHIR

1) PENGERTTIAN HTML

HTML adalah kependekan dari Hyper Text Markup Language, yang artinya tata cara penulisan yang digunakann dalam dokumen web. Dokumen HTML adalah sebuah dokumen text murni yang dapat dibuat dengan editor web sembarangan seperti notepad.

Dokumen ini akan dijalankan oleh sebuah web browser misalnya internet explorer, mozilla ataupun opera. Sehingga mampu menampilkan tampilan sesuai keinginan designer atau programer web. Tag HTML tidak case sensitive. Jadi bisa menggunakan
<HTML> atau <html> keduanya menghasilkan output yang sama.

HTML berawal dari bahasa SGML (Standard Generalized Markup Language) yang penulisannya disederhanakan. HTML dapat dibaca oleh berbagai platform. HTML juga merupakan bahasa pemrograman fleksibel, dapat disisipi /digabungkan dengan bahasa pemrograman lainnya.

Semua halaman web yang sering anda buka, seperti facebook.com, twitter.com, google.com dan lain sebagainya ditampilkan dengan menggunakan HTML. Jadi bisa dikatakan HTML adalah bahasa dasar untuk menampilkan halaman web pada web browser.

Buka Web browser anda lalu bukalah sebuah situs, http://www.google.com misalnya.

1. Lalu klik kanan di sembarang area, dan pilih “Inspect element” (menu paling
akhir)

Gambar 1.1 Inspect Element

Gambar 1.2 Inspect Element

2. Perhatikan kode hasil inspect element, yang terlihat adalah sebagai berikut :

Gambar 1.3 Inspect Element akan menampilkan kode HTML dari situs yang bersangkutan

Baris pertama pasti diawali dengan <!DOCTYPE HTML>, ini menandakan bahwa dokumen yang sedang anda buka saat ini adalah HTML. Begitu juga dengan baris kedua : <HTML>, kode tersebut menandakan bahkan kode-kode yang ditulis di dalamnya adalah kode HTML.

Jika anda ingin tahu kepanjangan HTML, HTML adalah kependekan dari Hypertext Markup Language. Artinya adalah bahasa markup (penanda) berbasis text atau bisa juga disebutsebagai formatting language (bahasa untuk memformat), Jadi sudah jelas bahwa HTML bukanlah bahasa pemrograman, melainkan bahasa markup/formatting.

Sifat dari bahasa HTML ini adalah client script dimana dokumen tersebut dapat dibuka di dalam komputer stand alone yang tidak membutuhkan server untuk dapat menampilkannya di dalam browser. Dokumen HTML merupakan file yang pada umumnya ber-esktensi .htm atau .html dimana bahasa HTML tersebut tersusun atas tag atau syntax yang berformat <isi tag>.

Adapun aturan penulisan HTML tersebut adalah :

a)    Dalam penulisannya, tag HTML diapit dengan dua karakter kurung siku
(angle bracket) “<” dan “>”
b)    Tag HTML secara normal selalu berpasangan, contoh : <div> dan </div>
c)    Tag HTML pertama dalam suatu pasangan adalah tag awal, dan tag kedua merupakan tag akhir, contoh : <index> akan diakhiri dengan </index>.
d)    Tag HTML tidak case sensitive dimana tag dengan huruf kecil sama dengan tag dengan huruf besar, contoh : <b> sama dengan <B>
e)    Jika dalam suatu tag terdapat tag lagi, maka penulisan tag akhir tidak boleh bersilang dan harus berurutan. Contoh : <b><i> huruf tebal dan miring
</i></b>
f)    Penulisan script HTML selalu diawali dengan <html> dan diakhiri dengan
</html>

Secara teknis web browser akan melakukan penerjemahan dokumen untuk ditampilkan dalam bentuk html jika dokumen tersebut terdapat diantara tag
<html> dan </html>. Ada baiknya dalam penulisan HTML menggunakan huruf kecil untuk menghadapi HTML generasi berikutnya (rekomendasi dari W3C untuk HTML 4.0 dan XHTML). Dalam HTML struktur dibagi menjadi dua bagian yaitu :
a.    Bagian Kepala (head)
Bagian ini memuat informasi mengenai kepala dokumen

b.    Bagian Badan (body)
Bagian ini memuat informasi mengenai badan dokumen

2. STRUKTUR DASAR HTML

Suatu dokumen HTML juga mempunyai aturan dalam penulisannya, ada beberapa tag yang harus anda tuliskan dan sudah menjadi ketentuan. Struktur Penulisan dokumen HTML yang benar seperti berikut:

Gambar 2.1. Struktur Dasar HTML

Keterangan:
•    HTML, setiap dokumen HTML dimulai <HTML> dan diakhiri dengan tag
</HTML> yang menyatakan bahwa suatu dokumen adalah dokumen HTML.

•    Head. Bagian header dokumen HTML, secara umum berisi informasi mengenai
dokumen.
•    Body. Merupakan isi dokumen sebenarnya

Langkah-langkah menjalankan web server.
•    Pertama, jalankan terlebih dahulu web sever melalui tools xampp Control Panel. Start tombol bagian apache

Gambar Sebelum di start

Gambar setelah di start

•    Letakan File project pada :
Direktori C → Xampp→ htdocs → buat folder project→ buat nama file project

•    Buat folder “Latihan HTML”
•    Buka Notepad++

Direktori C → Xampp→ htdocs → LatihanHTML→ buat nama file
“helloworld”→ save as type pilih “Hyper Text Markup Langungae (*html,
*htm …)”

*Tips Menulis nama File :
• Tanpa spasi : helloworld, HelloWorld, Hello-World, Hello_World, HelloWorld123

• Ketik bahasa html pada notepad ++

• Run pada web browser, Dengan mengetik url : http://localhost:8080/LatihanHTML/helloworld.html atau
http://localhost/LatihanHTML/helloworld.html

A) Tag untuk Headline

Tag Headline/heading adalah tag yang digunakan untuk membuat judul dari isi dokumen HTML. tag heading memiliki 6buah bilangan terdiri atas 1, 2, 3, 4, 5 dan 6. Masing-masing bilangan yang terdapat pada heading berfungsi untuk mewakili ukuran ukuran dari besarnya tag heading. Bilangan pertama merupakan ukuran terbesar sedangkan yang terkecil adalah bilangan terakhir. Sintag Heading/headline adalah sebagai berikut :

Keterangan :
• n adalah bilangan yang terdiri dari 1 sampai 6
• Properti kemampuan tambahan yang dimiliki tag heading

Contoh (1) Penulisan Tag Headline/Heading

Gambar. Struktur Headline

Gambar. Output struktur Heading

Contoh (2) Penulisan Tag Headline/Heading

Gambar. Penerapan Struktur Headline

Gambar. Output Penerapan struktur Heading

B) Paragraf

Digunakan untuk memberi pengaturan paragraf pada text yang akan ditampilkan

Contoh (1) Penulisan Paragraf

Gambar. Penerapan Struktur Paragraf

Gambar. Output Penerapan Struktur Paragraf

Contoh (2) Penulisan Paragraf (align)

Gambar. Penerapan Struktur Paragraf (align)

Gambar. Output Penerapan Struktur Paragraf (align)

C) Line break

Line break adalah pemenggalan atau pemutusan kalimat dengan menggunakan garis dengan perintah <hr>. Adapun property <hr> adalah “align” untuk perataan garis, “size” untuk ukuran dari garis, dan “color” untuk warna garis seperti pada contoh berikut :

Dalam pemenggalan kalimat dalam dokumen web selain menggunakan garis horizontal, anda dapat juga menggunakan tag <br /> untuk pemenggalan baris dalam sebuah kalimat. Biasanya tag ini digunakan pada kalimat dalam paragraf.

Contoh (2) Penulisan Line Break

Gambar. Penerapan Struktur Line Break

Gambar. Output Penerapan Struktur Line Break

D) Komentar

Anda dapat memberikan komentar dalam dokumen web yang tidak akan ditampilkan atau diabaikan dan tidak akan dibaca dalam browser menggunakan perintah :

komentar disini digunkan unttuk mengomentari kode html itu adalah kode untuk perrrintah apa.

E) Dokumen Head

Dalam bagian head ini kita dapat meletakkan beberapa tag diantara <head> dan
</head> yaitu :

a. Judul

Merupakan tag yang mendeklarasikan judul dari suatu dokumen HTML. Struktur tag untuk judul ini adalah : <title>...judul...</title>

b. URL

Merupakan tag yang menyatakan URL asal suatu dokumen HTML. Struktur tag untuk url asal adalah :
<base href=”...”>

c. Link

Merupakan tag untuk menghubungankan antara suatu dokumen dengan dokumen lainnya dalam website yang dibuat. Struktur tag untuk menghubungkan dokumen adalah :
<link href=”...”>

d. Meta

Merupakan tag yang menyatakan suatu meta informasi dalam suatu dokumen HTML. Struktur tag untuk meta informasi adalah :
<meta name=”..." content="...”

e. Index

Merupakan tag yang menyatakan bahwa dokumen tersebut diperkenankan di indeks oleh server web. Struktur tag untuk isi index adalah : <index>

f. Style

Merupakan tag yang mendefinisikan style dari dokumen HTML. Struktur tag untuk mendefinisikan style adalah : <style ahref="...">

Contoh penggunaan dalam HTML :

F) ATRIBUT BODY

Bagian body dalam HTML adalah bagian dimana dokumen web akan terlihat dalam browser. Dalam bagian ini dapat berisi atribut-atribut, aturan dan isi dari dokumen web yang akan ditampilkan. Penulisan atribut body ini biasanya dituliskan sesudah tag “<body” dan sebelum “>” maupun sesudah tag <body> dan sebelum tag </body>. Dalam bagian body tersebut terdapat beberapa atribut yang bisa digunakan. Beberapa atribut tersebut adalah :

a. Warna Latar

Atribut tag untuk mendefinisikan warna latar untuk isi di dalam dokumen web
dengan menuliskan “bgcolor=nilai warna”. Contoh : <body bgcolor=”lime”>

b. Warna Teks

Atribut tag untuk mendefinisikan warna teks untuk isi di dalam dokumen web dengan menuliskan “text=nilai warna”. Contoh : <body text=”green”>

c. Warna Link

Jika anda memiliki sebuah tombol untuk menghubungkan (link / hyperlink) dalam dokumen web yang anda buat dengan dokumen web lainnya, anda dapat mendefinisikan warna dari tombol link tersebut ketika kita klik dengan menggunakan tag <link=”nilai warna1” alink=”nilai
warna2”> contoh : <body link=”green” alink=”grey”>

Contoh penerapan dalam dokumen html :

C. FORMAT ELEMEN TEXT

1. Format Text

a. Cetak Tebal / Bold
Cetak tebal digunakan untuk menebalkan teks agar berbeda dengan teks lainnya dalam sebuah dokumen HTML.

b. Cetak Miring / Italic
Cetak miring digunakan untuk menampilkan agar text yang akan ditampilkan agak sedikit lebih miring dari text yang lainnya dalam sebuah dokumen HTML.

<i>text </i>

c. Cetak Garis Bawah / Underline
Garis bawah digunakan untuk menampilkan agar text yang akan ditampilkan memiliki garis dibawak kalimat dalam dokumen HTML.

<u>text </u>

d. Mengecilkan Huruf / Small
Untuk mengecilkan huruf didalam dokumen HTML. digunakan tag small untuk membuat text agar tampak berbeda dari teks yang lainnya.

<small>text </small>

Contoh Penerapan Format Text:

Gambar. Penerapan Format Text (1)

Gambar. Output Penerapan Format Text (1)

e. Membesarkan Huruf / Big
Untuk membesarkan huruf di dalam dokumen HTML digunakan tag big untuk membuat sebuah text agar tampak berbeda dari text yang lainnya.

<big>text </big>

f. Mencoret Text / Strike
Untuk mencoret sebuah kata pada sebuah dokumen HTML sebagai perbedaan dengan penggunaan kata yang lainnya.

<strike>text </strike>

g. Subscript dan Superscript
Untuk membuat rumus aritmatika berupa pemangkatan dan rumus kimia didalam dokumen HTML.

<sup>text superscript</sup>
<sub>text subscript</sub>

Contoh Penerapan Subscript dan Superscript :

Gambar. Penerapan Format Subscript dan Superscript

Gambar. Output Penerapan Format Subscript dan Superscript

h. Tag Pre-Formatted Text
Merupakan tag yang digunakan untuk membuat satu blog tulisan yang tata letaknya dapat kita atur sesuai dengan keinginan kita dan sesuai dengan tampilan pada saat pembuatan.

<pre>tulisan</pre>

Contoh Penerapan Tag Pre-Formatted Text:

Gambar. Penerapan Format Penerapan Tag Pre-Formatted Text

Gambar. Output Penerapan Format Penerapan Tag Pre-Formatted Text

i. Tag Garis Pemisah Horizontal
Digunakan untuk membuat garis pemisah antar baris atau untuk membuat garis horizontal sepanjang lebar halaman homepage.
Catatan : <HR> tidak memiliki tag penutup
<HR [properti]>
Berikut adalah property yang bisa disisipkan pada tag <HR>.

D. ANCHOR DAN LINK

Dokumen HTML dilengakapi dengan kemampuan yang berpindah-pindah dari halaman satu ke halaman lainnya (link). Link dalam halaman HTML ditandai dengan menggaris bawahi teks yang akan di link, atau pointer mouse akan berubah menjadi bentuk jari apabila berada pada objek link atau (gambar/text).
<a href=”nama dokumen yang dilink” [atribut]

Hyperlink dibedakan menjadi :

1. Link Absolut

Adalah sebuah link yang digunkan untuk mengaitkan halaman webyang satu dengan halaman web yang lainnya didalam situs internet.
<a href=”alamat internet” [atribut]
>..text/gambar...</a>
Contoh :
<a href=”https://poltek- furnitur.ac.id/PalComTech</a>
Secara default, tautan akan muncul seperti berikut di semua browser:
•    Tautan yang belum dikunjungi digarisbawahi dan berwarna biru
•    Tautan yang dikunjungi digarisbawahi dan berwarna ungu
•    Tautan aktif digarisbawahi dan berwarna merah

2. Link Relatif

Adalah link yang digunakan untuk mengaitkan halaman web yang satu dengan halaman web lainnya di dalam satu komputer tanpa harus menuliskan secara lengkap alamat situs internet seperti pada alamat link absolut.

Contoh :
<a href=”home.html”>Home</a>
Sebagai latihan kita akan membuat file HTML baru dan membuat link untuk mengaitkannya ke latihan-latihan sebelumnya.

1. Buatlah file baru dengan nama Case1.html, Case2.html dan Case3.html, simpanlah di folder “CaseLink”, seperti gambar dibawah.

2. Ketikkan kode berikut pada file Case1.html

3. Ketikkan kode berikut pada file Case2.html

4. Jangan Lupa simpan halaman html, dan bukalah file Case1.html pada browser. Anda dapat mengklik linknya satu persatu.

Ketika link “buka latihan 2” di klik, browser akan menampilkan file Case2.html

Dan Klik link “Kembali ke halaman Sebelumnya untuk menampilkan Case1.html kembali.

E. IMAGE

Image atau gambar didalam dokumen HTML berfungsi untuk menambah daya tarik dari sebuah website. Namun penggunaannya akan mengakibatkan semakin besarnya penggunaan byte dari dokumen HTML yang secara otomatis akan berakibat pula pada kinerja atau memperlambat waktu tampil dari halaman web tersebut.

Pada umumnya, gambar yang ditampilkan pada halaman web akan disajikan bersama teks dari halaman web tersebut. Format gambar yang banyak digunakan dalam halaman web , antara lain GIF (Graphics Interchange Format), JPEG ( Joint Photographics Experts Group).
<img src=”lokasi

Berikut adalah properti yang bisa disisipkan pada gambar.

Contoh Penerapan link :
1) Buat kode berikut lalu simpan file.html pada folder yang diinginkan.

2) Tampilan browser dari CaseGambar.html

3) Tambahkan Code pengaturan ukuran pada gambar seperti contoh dibawah:

4) Tampilan Browser setelah di tambah pengaturan ukuran gambar

F. MEMBUAT DAFTAR/LIST

Sebuah daftar dapat memiliki penomoran atau hanya sebuah simbol berupa lingkaran atau bentuk lainnya. Dalam HTML, daftar yang menggunakan penomoran disebut dengan ordered list dan yang menggunakan simbol disebut dengan unordered list.

A. Ordered List

Ordered list atau Daftar berurutan dapat dibuat dengan menggunakan tag <ol> (singkatan dari ordered list) dan untuk setiap listnya kita gunakan tag <li> (singkatan dari list item/item daftar). Sebagai contoh, perhatikan kode HTML berikut :

Penomoran daftar akan dilakukan secara otomatis ketika anda menambahkan daftar item.

Dan jika ditampilkan pada browser, maka yang akan anda dapatkan adalah seperti berikut :

B. Unordered List

Berbeda dengan daftar berurut, unordered list akan menandai setiap item dengan simbol. Baik berupa lingkaran atau persegi (anda masih bisa merubahnya dengan CSS). Untuk membuat daftar tidak berurut kita gunakan tag <ul> dan seperti tag
<ol>, item yang terdapat di dalamnya harus diapit dengan tag <li>.

Jika kita modifikasi contoh sebelumnya dengan merubah <ol> menjadi <ul> maka yang akan kita dapat adalah seperti berikut :

Dan jika ditampilkan pada browser, maka akan tampil seperti berikut :

Secara default, item akan ditandai dengan lingkaran.

C. Definition List

Berbeda dengan Ordered List dan Unordered List yang memiliki struktur sama, Data list memiliki struktur tersendiri. Biasanya data list ini digunakan untuk membuat daftar istilah beserta definisinya seperti halnya dalam kamus.

Tag dt (definition term) digunakan untuk menampung istilah yang akan didefinisikan, dan tag dd digunakan untuk menuliskan definisi dari dt sebelumnya. Berikut contoh penggunaan dari Definition List :

ditampilkan pada browser

D. List/Daftar bersarang

Sebuah daftar bisa saja memiliki daftar lagi di dalamitemnya, atau biasa kita sebut dengan daftar/list bersarang (nested list). Contohnya seperti pada latihan yang akan kita buat berikut.
Buat file baru dengan nama file latihan.html lalu ketikkan kode HTML berikut.

Dan berikut tampilan pada browser.

Yang perlu anda perhatikan adalah di mana anda meletakkan tag <ol>atau <ul> jika anda ingin menempatkannya pada suatu item, yaitu sebelum penutup tag list item (</li>).
Daftar seperti ini biasa digunakan untuk pembuatan menu website, atau keperluan lainnya yang memang membutuhkan penomoran atau sesuatu yang memiliki poin- poin.

G. TABLES

Tabel adalah sebuah sarana untuk menginformasikan data-data berupa baris dan kolom. Pada umumnya setiap kolom menunjukan data-data yang sama dalam suatu kelompok data. Sedangkan baris menunjukan data-data d
ari kolom-kolom yang menunjukan sekelompok data dalam suatu kumpulan

Keterangan :
•    <table> adalah tag yang berfungsi untuk mendefinisikan sebuah table
•    <tr> adalah tag yang berfungsi untuk membuat baris
•    <th> adalah tag yang berfungsi untuk membuat tag heading/judul
•    <td> adalah tag yang berfungsi untuk membuat sel/kolom.

Property Table

Untuk membuat baris tabel, kita gunakan tag <tr> – singkatan dari table row (ditulis di dalam tag table)

Gambar. Contoh Kode tabel

Gambar. Output Contoh Kode tabel

Praktik 1:
Tambahkan Kode HTML pada contoh diatas sehingga menampilkan tabel seperti gambar dibawah pada browser.

Untuk menyatukan kolom atau baris (merge-cell) kita tambahkan atribut colspan (untuk merge horizontally-secara horizontal) atau rowspan (untuk merge vertically).

Gambar. Contoh Kode tabel merge-cell

Gambar. Output Kode tabel merge-cell

Praktik 2:
Tambahkan Kode HTML pada contoh diatas sehingga menampilkan tabel seperti gambar dibawah pada browser.

Agar format tabel sesuai dengan ketentuan, Anda dapat menggunakan tag
<thead> untuk baris yang menjadi Judul tabel, <tbody> untuk data/isi dari tabel dan <tfooter> untuk kaki tabel (bisa diisi sama dengan thead atau lainnya).