Panduan Lengkap Belajar HTML Untuk Pemula

Panduan lengkap belajar html untuk pemula yang ingin membuat website sendiri. Tutorial html basic bahasa indonesia terlengkap.
Panduan Lengkap Belajar HTML Untuk Pemula

Pendahuluan : Pengertian HTML

HTML merupakan singkatan dari Hypertext Markup Language. HTML merupakan suatu format bahasa pemrograman untuk menampilkan suatu halaman website. Menggunakan HTML, struktur dari suatu halaman website akan dijelaskana dengan menggunakan markup.

File HTML nantinya akan dirender oleh browser untuk menampilkannya menjadi sebuah halaman website utuh.

Siapa saja yang perlu memahami HTML ?
– Anda yang ingin bisa membuat website sendiri
– Anda yang ingin bisa mengedit website yang sudah anda miliki
– Anda yang ingin bisa mengedit blog pribadi anda
– Anda yang ingin berbisnis online

Tutorial Belajar HTML Untuk Pemula

Mari kita mulai tutorial belajar html ini.

Untuk mempermudah pemahaman anda, tentunya akan jauh lebih mudah memahami tentang HTML dengan contoh. Andapun bisa mencoba sendiri dirumah untuk semakin membuat anda paham dan nantinya bisa membuat sendiri file HTML untuk website anda.

Contoh kode HTML sederhana :

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman Website </title>
</head>
<body>

<h1>Judul Paragraf Pertama</h1>
<p>Isi paragraf.</p>

</body>
</html>

Buka aplikasi code editor anda, atau jika anda tidak memilikinya, anda bisa menggunakan notepad. Copy paste code tersebut diatas kedalam file notepad anda, lalu save as dengan nama index.html. Pastikan anda menggunakan ekstensi .html di nama file anda dan jangan lupa untuk memilih save as all type, karena jika tidak, file anda akan tersimpan dalam format .txt, bukan dalam format .html.

Setelah berhasil, buka file tersebut dengan cara double klik di folder tempat anda menyimpannya. Dan, selamat! Anda berhasil membuat file html pertama anda.

Jika langkah yang anda lakukan berhasil, maka secara otomatis komputer/laptop anda akan membuka aplikasi browser default anda (Internet Explorer/Chrome/Opera/Firefox) dan menampilkan file html tersebut di halaman browser.

Selanjutnya, mungkin anda bertanya-tanya, mengapa file tersebut diatas yang terkesan sangat sederhana bisa jadi sebuah halaman website? Mari kita bahas lebih lengkap.

Jika anda perhatikan, di kode diatas kami sengaja memberi warna berbeda untuk memudhakan pemahaman anda. Yakni warna oranye untuk menandakan sebuah tag HTML, dan warna hitam sebagai isi content tag.

Selanjutnya mari kita bahas masing-masing tag HTML dari kode tersebut.

<!DOCTYPE html> = Tag ini untuk mendeklarasikan bahwa file yang anda buat merupakan sebuah file HTML.

<html> = Tag ini untuk pembuka utama sebuah kode html.

<head> = Tag ini berfungsi metadata informasi mengenai halaman website.

<title> = Tag ini berfungsi untuk menyimpan judul halaman website.

<body> = Didalam tag body inilah semua item yang akan ditampilkan dalam halaman website disimpan.

<h1> = Merupakan tag yang berisi judul paragraf utama.

<p> = Tag ini berguna untuk menyimpan isi dari suatu paragraf.

Jika anda memperhatikan dengan seksama, tag html ini akan selalu terdiri dari satu pasang tag. Yaitu tag pembuka dan tag penutup.

Mari kita lihat contoh dari kode diatas. Ketika ingin membuat tampilan judul suatu paragraf, kita menuliskan kode berikut :

<h1>Judul Paragraf Pertama</h1>

Bisa kita lihat, tag <h1> yang berfungsi sebagai penyimpan judul paragraf ini terdiri dari dua tag, yaitu tag pembuka yaitu <h1> dan tag penutup yaitu </h1>. Diantara kedua tag inilah judul paragraf tersebut akan disimpan.

Jadi, sampai disini bisa kita simpulkan bahwa tag html terdiri dari tag pembuka, isi konten, dan tag penutup. Atau bisa diilustrasikan sebagai berikut :
<tag pembuka> Isi Konten </tag penutup>

Tag HTML juga bisa bersifat rekursif, atau dalam kata lain ada tag didalam tag. Kembali kita lihat contoh kode diatas :

<head>
<title>Judul Halaman Website </title>
</head>

Di kode diatas bisa dilihat bahwa tag <title> berada didalam tag <head>, berarti dari kode diatas bisa dilihat bahwa tag title ini merupakan isi atau konten dari tag <head>.

Contoh lainnya adalah kode sebagai berikut :

<p>Isi paragraf ini ditampilkan dalam bentuk biasa. <b>Isi paragraf ini ditampilkan dalam huruf tebal</b></p>

Ketika anda memasukkan kode diatas dalam kode html, lalu menampilkannya kedalam browser. Maka hasilnya adalah sebagai berikut :

Isi paragraf ini ditampilkan dalam bentuk biasa. Isi paragraf ini ditampilkan dalam huruf tebal.

Pada kode diatas, kita memasukkan dua kalimat kedalam sebuah tag paragraf yaitu diantara tag <p> dan tag </p>. Didalam tag paragraf tersebut, kita memasukkan lagi tag <b> untuk membuat tampilan huruf menjadi tebal. Sehingga, tag <b> serta </b> ini berada didalam tag paragraf.

Quiz Belajar HTML :

1.Manakah diantara ini yang merupakan penerapan tag html yang benar :
a.<p>Tulisan ini dicetak dalam huruf <b>Tebal</p></b>
b.<p>Tulisan ini dicetak dalam huruf biasa<p>
c.<b>Tulisan ini dicetak dalam huruf tebal</p>
d.<p><b>Tulisan ini dicetak dalam huruf tebal</b></p>

Jawaban : d.

Penjelasan :
Pilihan a salah dikarenakan tag <b> tidak ditutup terlebih dahulu menggunakan tag </b> sebelum menutup tag induknya yaitu tag </p>. Setiap tag yang berada didalam sebuah tag lain, harus ditutup sebelum menutup tag induknya. Untuk pilihan a agar bisa benar haruslah dirubah menjadi sebagai berikut :
<p>Tulisan ini dicetak dalam huruf <b>Tebal</b></p>

Pilihan b salah karena tag <p> atau tag paragraf ini tidak lengkap karena tidak ditemukan tag penutup. Browser akan mengalami error ketika membaca kode ini karena yang terjadi adalah ketika tag <p> dibuat, tag penutup belum ditemukan namun sudah diketemukan lagi kode tag <p> lainnya. Sehingga untuk kode tersebut untuk bisa berjalan benar harus diperbaiki menjadi :
<p>Tulisan ini dicetak dalam huruf biasa</p>

Pilihan c salah dikarenakan tag pembuka serta tag penutup bukan merupakan tag yang sama. Kode dibuat dengan pembuka tag <b> atau bold yang berarti membuat tulisan yang tebal, sedangkat ditutup oleh tag </p> yang berfungsi menutup suatu paragraf. Jadi, untuk merubah kode ini, kita harus menentukan kode tersebut berupa apa, apakah sebuah tulisan tebal ataukah paragraf. Sehingga kode yang benar haruslah berupa :
<p>Tulisan ini dicetak dalam huruf tebal</p> atau <b>Tulisan ini dicetak dalam huruf tebal</b>

2.Manakah diantara nama file dibawah ini yang merupakan file html :
a.Index.txt
b.File.html
c.File.<p>
d.Index.docx

Jawaban : b
Sebuah file HTML haruslah memiliki ekstensi .html yang menunjukkan bahwa file tersebut merupakan file HTML. Jika menggunakan ekstensi lain, maka browser akan mengganggap file tersebut bukan merupakan file html sehingga akan terjadi error dalam proses render. (Di pelajaran lebih lanjut nantinya ada ekstensi-ekstensi lain yang bisa digunakan selain ekstensi .html, diantaranya ekstensi .php)

3.Manakah diantara tag html dibawah ini yang wajib ada didalam suatu kode halaman html?
a.<html>
b.<head>
c.<body>
d.<title>
e.<h1>
f.Semua tag diatas wajib
g.Semua tag diatas tidak wajib

Jawaban : g.

Pada prakteknya, semua tag diatas bukan merupakan tag wajib, dan ketika tidak digunakan, file html bisa tetap terbuka dan membaca tag lain yang ada di kode html tersebut.

Anda bisa mencoba dengan membuat suatu file html yang hanya berisi tag <p>, menyimpannya, lalu membukanya di browser. Maka browser akan tetap bisa menampilkan halaman file tersebut dengan baik.

Namun, untuk membuat suatu halaman website yang baik, tag-tag tersebut keseluruhannya sebaiknya digunakan untuk bisa menghasilkan tampilan halaman website yang optimal.

Mengenal Tag HTML Head

Setelah memahami dasar-dasar dan struktur kode didalam suatu file html. Selanjutnya kita akan membahas lebih lanjut mengenai tag-tag html, beserta fungsi serta modifikasinya sehingga anda bisa lebih memahami tentang html.

Tag pertama yang akan kita bahas adalah tag head atau <head>. Seperti sudah dijelaskan sebelumnya, tag ini merupakan tag yang berfungsi sebagai tempat penyimpanan beberapa metadata atau informasi mengenai halaman website tersebut.

Meskipun sebagian besar tag yang berisi didalam tag head ini nantinya tidak akan ditampilkan kepada pengunjung website, namun tag-tag yang ada didalam head ini berperan sangat penting untuk beberapa hal, diantaranya :
– Untuk membantu search engine bot mengetahui mengenai halaman website tersebut.
– Sebagai tempat penyimpanan tag ataupun script penting yang membantu membuat tampilan website menjadi lebih menarik.

Beberapa tag yang bisa disimpan didalam tag <head> diantaranya :
<title> = Tag title ini merupakan judul halaman website tersebut. Isi atau konten didalam tag title ini tidak akan ditampilkan pada halaman browser saat halaman website dibuka, namun akan ditampilkan di menu tab yang biasanya muncul di bagian paling atas browser. Meskipun begitu, tag ini sangatlah penting terutama jika nantinya anda ingin halaman website anda tampil di hasil pencarian search engine seperti google, karena tag title ini merupakan informasi penting tentang apa isi halaman website anda.

Misalkan, anda membuat website toko online yang menjual produk kerajinan tangan buatan anda, maka pada halaman utama website, tentunya anda harus memakai tag seperti contoh berikut :
<title>Toko Online Kerajinan Tangan</title>
Jika anda tidak menggunakan title yang menjelaskan isi halaman website anda, maka bot dari search engine tidak akan mengetahui bahwa website anda merupakan sebuah toko online kerajinan tangan, sehingga tidak akan dimunculkan pada halaman search engine ketika ada orang yang mencari toko yang menjual kerajinan tangan.

Untuk itu, tag ini bisa dikatakan merupakan tag yang sangatlah penting, meskipun sebuah file html tetap bisa berjalan tanpa tag title.

<meta> = Tag meta ini terdiri dari beberapa jenis meta data yang merupakan informasi mengenai halaman website anda. Salah satu tag meta yang paling sering digunakan adalah meta keyword serta meta description.

Namun, tag meta ini sedikit berbeda dibandingkan dengan tag lainnya, karena tag <meta> tidak memerlukan tag penutup.

Lalu, bagaimana caranya mengisi konten dalam sebuah tag meta jika tidak ada tab penutup? Caranya adalah sebagai berikut :

<meta name=”description” content=”isi tulisan ini dengan deskripsi singkat mengenai halaman website anda”>

Jadi untuk tag meta, konten atau isi dari tag ini dituliskan didalam tag sehingga tidak memerlukan tag penutup. Selain tag <meta>, ada beberapa tag lain yang juga tidak memerlukan tag penutup yang nantinya akan kita jelaskan pada bagian lain artikel ini.

Kembali ke topik, jadi, tag meta merupakan tag tempat menyimpan informasi-informasi tambahan mengenai suatu halaman website. Kembali, tag ini sangat berguna untuk memberi tau search engine tentang isi dari suatu halaman website.

<style> = tag selanjutnya yang bisa berada di dalam tag <head> adalah tag <style>. Tag ini berfungsi untuk memodifikasi tag-tag didalam halaman HTML anda sehingga tampilan halaman HTML bisa menjadi lebih menarik, seperti misalnya merubah warna tulisan, merubah ukuran tulisan, dan banyak sekali hal-hal yang bisa dilakukan dengan tag style ini.

Namun, satu hal yang perlu diingat, didalam tag style ini anda harus memasukkan jenis kode lain selain kode HTML, yaitu kode CSS atau Cascading Style Sheet. Kode CSS meskipun sangat berhubungan erat dengan HTML namun memiliki format penulisan yang berbeda. Karena artikel ini hanya fokus membahas HTML, maka pada artikel selanjutnya akan kami jelaskan lebih lanjut mengenai CSS setelah anda bisa memahami HTML dan berhasil membuat halaman website lengkap menggunakan HTML.

<link> = tag link merupakan tag lain yang bisa disimpan didalam tag head. Tag ini berfungsi jika anda memerlukan dependency atau ketergantungan terhadap file lain untuk menyempurnakan halaman html tersebut.

Beberapa contoh file lain yang biasanya digunakan yaitu pada tag link yaitu file css, file javascript, file font, ataupun file-file lainnya.

Sama seperti tag <meta> sebelumnya, tag ini tidak memiliki tag penutup. Sehingga, cara menggunakannya adalah sebagai berikut :

<link rel=”stylesheet” type=”text/css” href=”/css/style.css”>

Maksud dari tag ini yaitu memanggil file lain didalam folder css yaitu file style.css yang berfungsi untuk melakukan format tampilan halaman HTML.

Ok, sepertinya cukup karena ternyata semua tag penting didalam tag <head> sudah dijelaskan. Bagi anda yang mengharapkan lebih banyak contoh, mohon maaf karena untuk tag head ini sendiri memang tidak banyak yang bisa kita lakukan selain mengisi konten yang berupa informasi metadata halaman website.

Mulai saat ini, kita akan mencoba membuat sebuah file HTML yang nantinya bisa menjadi suatu website utuh dengan menggunakan tag-tag yang telah dijelaskan sebelumnya.

Untuk permulaan dan sebagai akhir dari bagian penjelasan tag head, anda bisa membuat file notepad baru dan buat kode sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<title>Halaman Website Pribadi Saya!</title>
<meta name=”description” content=”Halaman website pribadi hasil karya saya sendiri”>
</head>
<body>

</body>
</html>

Seperti yang sudah dijelaskan sebelumnya, save file notepad tersebut dengan nama apapun namun menggunakan ekstensi .html. Untuk contoh kembali kita akan menggunakan nama file index.html. Jangan lupa untuk memilih tipe all pada save as type.

Setelah membaca sejauh ini, kira-kira apakah anda bisa menebak bagaimana tampilan dari file html tersebut saat dibuka di browser anda?

Ya, kosong.

File tersebut baru berisi tag head yang merupakan metadata atau informasi mengenai halaman website tersebut. Sambil berjalan, nantinya kita akan menambah tag tag lainnya yang telah dipelajari sehingga membuat file HTML tersebut menjadi suatu halaman website utuh yaitu halaman website pribadi anda.

Mari kita lanjut kedalam tag selanjutnya.

Tag HTML Body

Tag body merupakan tag penting dalam suatu halaman website, karena disinilah tag yang akan ditampilkan kepada pengunjung website akan disimpan.
Ada sangat banyak jenis tag yang bisa dimasukkan kedalam tag body, kita akan bahas satu persatu.

Tag Heading

Tag yang satu ini sudah dijelaskan pada awal artikel ini yaitu tag <h1> yang merupakan tag yang berisi judul utama halaman website. Namun, tidak hanya <h1>, ada beberapa tag heading lainnya, yaitu :

<h1>Judul Utama</h1>
<h2>Judul Kedua</h2>
<h3>Judul Ketiga</h3>
<h4>Judul Keempat</h4>
<h5>Judul Kelima</h5>
<h6>Judul Keenam</h6>

Ya, ada 6 jenis tag heading berbeda yang menunjukan tingkat level suatu judul. Dengan tag <h1> merupakan judul utama, hingga tag <h6> yang merupakan judul terakhir.

Masing-masing tag memiliki beberapa perbedaan. Karena tag <h1> merupakan judul utama, maka ukuran tulisannya akan jauh lebih besar dari tag lainnya serta ditulis dalam huruf yang lebih tebal. Sedangkan tag <h6> yang merupakan tag judul terakhir ditulis dalam huruf yang paling kecil.

Mari gunakan contoh untuk mempermudah pemahaman anda. Kita asumsikan sedang membuat sebuah website yang membahas mengenai Provinsi Jakarta dan ingin membuat judul pada halaman website tersebut. Buatlah file html baru (pastinya anda sudah mengerti, bukan?) dan masukkan kode berikut :

<h1>Provinsi Jakarta</h1>
<h2>Kotamadya Jakarta Utara</h2>
<h3>Sejarah Kota Jakarta Utara</h3>
<p>isi mengenai sejarah kota jakarta utara.</p>
<h3>Pemerintah Kota Jakarta Utara</h3>
<p>isi mengenai pemerintah kota jakarta utara.</p>
<h3>Penduduk Kota Jakarta Utara</h3>
<p>isi mengenai penduduk di kota jakarta utara.</p>

<h2>Kotamadya Jakarta Timur</h2>
<h3>Sejarah Kota Jakarta Timur</h3>
<p>isi mengenai sejarah kota jakarta timur.</p>
<h3>Pemerintah Kota Jakarta Timur</h3>
<p>isi mengenai pemerintah kota jakarta timur.</p>
<h3>Penduduk Kota Jakarta Timur</h3>
<p>isi mengenai penduduk di kota jakarta timur.</p>

<h2>Kotamadya Jakarta Pusat</h2>
<h3>Sejarah Kota Jakarta Pusat</h3>
<p>isi mengenai sejarah kota jakarta pusat.</p>
<h3>Pemerintah Kota Jakarta Pusat</h3>
<p>isi mengenai pemerintah kota jakarta pusat.</p>
<h3>Penduduk Kota Jakarta Pusat</h3>
<p>isi mengenai penduduk di kota jakarta pusat.</p>

Save kode html diatas dan buka di browser, maka anda akan melihat susunan judul dari kode yang kita buat diatas. Bisa dilihat hasilnya menjadi rapi dan terstruktur bukan?

Itulah mengapa disediakan 6 jenis heading berbeda, yaitu agar bisa membuat tampilan website menjadi lebih nyaman dibaca dengan membuat sub judul untuk setiap pokok pembahasan yang berbeda.

Dicontoh diatas kita hanya menggunakan sampai 3 level heading yaitu <h1>, <h2>, serta <h3>. Jika dibutuhkan, anda bisa menggunakan semua heading dari <h1> sampai ke <h6>.

Cukup sampai disini pembahasan mengenai heading. Kembali ke “proyek” halaman website html kita, maka akan kita tambahkan heading kedalam file HTML yang telah anda buat di bab sebelumnya. Maka kodenya akan menjadi sebagai berikut :

<!DOCTYPE html>
<html>
<head>
<title>Halaman Website Pribadi Saya!</title>
<meta name=”description” content=”Halaman website pribadi hasil karya saya sendiri”>
</head>
<body>
<h1>Selamat Datang di Website Milik Nama Anda</h1>
<h2>Profil Pribadi Saya</h2>
<h2>Tentang Saya</h2>
<h2>Kontak Saya</h2>
</body>
</html>

Save file diatas dan silahkan anda buka di browser favorit anda. Maka akan muncul di halaman browser judul serta sub judul dari kode HTML diatas.

Tag HTML List

List merupakan tag yang sering digunakan untuk mempermudah pembaca memahami konten yang berupa daftar. Terdapat dua jenis tag list yang berbeda, yaitu tag <ol> yang merupakan tag untuk membuat daftar yang berurutan menggunakan angka, sedangkan tag list lainnya yaitu tag <ul> untuk membuat daftar dengan menggunakan point.

Tag list manapun yang anda akan gunakan, memerlukan tag lain didalamnya yaitu tag <li> yang berisi daftar didalam list tersebut.

Kembali, contoh sepertinya lebih mudah dipahami dibandingkan dengan penjelasan panjang lebar.

Misalkan anda ingin membuat dua jenis daftar/list untuk ditampilkan seperti berikut di halaman website anda :

  1. Presiden
  2. Gubernur
  3. Walikota
  4. Camat
  5. Lurah
  • Jakarta Barat
  • Jakarta Timur
  • Jakarta Selatan
  • Jakarta Utara
  • Jakarta Pusat

Maka yang perlu anda lakukan adalah membuat kode berikut di halaman html anda :

<ol>
<li>Presiden</li>
<li>Gubernur</li>
<li>Walikota</li>
<li>Camat</li>
<li>Lurah</li>
</ol>

<ul>
<li>Jakarta Barat</li>
<li>Jakarta Timur</li>
<li>Jakarta Selatan</li>
<li>Jakarta Utara</li>
<li>Jakarta Pusat</li>
</ul>

Perhatikan perbedaannya. Ketika menggunakan <ol>, maka secara otomatis daftar akan ditampilkan dengan menggunakan angka didepannya. Sedangkan ketika menggunakan <ul>, tiap daftar hanya akan ditampilkan menggunakan point tanpa menggunakan urutan angka.

Lalu, yang mana yang harus anda gunakan ketika membuat list didalam halaman website? Tentunya sesuai dengan kebutuhan anda. Jika anda memerlukan daftar yang memerlukan urutan angka, anda bisa menggunakan <ol>. Namun jika tidak, anda bisa menggunakan <ul>.

Kali ini kita akan menambahkan list kedalam kode html website pribadi anda. Listnya berupa list tanpa nomer yang berisi data pribadi anda. Tambahkan kode list sehingga tampilan kode html anda menjadi seperti berikut :

<!DOCTYPE html>
<html>
<head>
<title>Halaman Website Pribadi Saya!</title>
<meta name=”description” content=”Halaman website pribadi hasil karya saya sendiri”>
</head>
<body>
<h1>Selamat Datang di Website Milik Nama Anda</h1>
<h2>Profil Pribadi Saya</h2>
<ul>
<li>Nama Lengkap : Nama Lengkap Anda</li>
<li>Tanggal Lahir : 1 Januari 1980</li>
<li>Alamat : Depok</li>
</ul>
<h2>Tentang Saya</h2>
<h2>Kontak Saya</h2>
</body>
</html>

Save kode html anda dan coba buka hasilnya di browser.

Tag HTML Paragraf

Tag paragraf sebenarnya sangat sederhana, karena tidak memiliki jenis lain selain <p>. Namun pada bab ini akan dibahas beberapa hal penting serta modifikasi-modifikasi yang bisa dilakukan pada tag paragraf.

Hal penting yang harus diketahui adalah, bahwa setiap paragraf haruslah berada didalam tag <p> yang berbeda. Contohnya ketika anda ingin membuat paragraf dengan hasil seperti ini :

Paragraf 1 ini berisi bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.

Sedangkan paragraf 2 ini berisi bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .

Maka kode html yang perlu dibuat adalah :

<p>Paragraf 1 ini berisi bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.</p>
<p>Sedangkan paragraf 2 ini berisi bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla .</p>

Disini terlihat bahwa kedua paragraf berada diantara tag <p> dan </p> yang berbeda. Hal ini berguna untuk memberitahukan kepada browser bahwa paragraf yang anda tulis merupakan dua paragraf yang berbeda, sehingga ketika melakukan render, browser akan memberi jarak dan memisahkan kedua paragraf tersebut sehingga lebih mudah dan nyaman dibaca.

Selanjutnya kita akan membahas beberapa tag yang biasanya sering digunakan didalam tag paragraf. Sebenarnya, tag tag ini bisa digunakan ditag manapun yang menampilkan isi dari tag tersebut, namun sebagian besar penggunaannya seringkali digunakan didalam tag paragraf sehingga akan kita jelaskan dibagian ini. Namun tentunya hal ini tidak menutup kemungkinan anda menggunakan tag ini pada tag lain selain paragraf sesuai kebutuhan halaman website HTML anda.

<b> = Tag <b> berarti bold, dimana tag ini merupakan tag yang berisi konten yang akan ditampilkan dengan jenis huruf tebal untuk memberikan penekanan pada kata-kata yang dirasa penting.

<i> = Tag <i> merupakan tag yang berarti italic atau huruf miring. Seringkali, anda perlu menggunakan tulisan miring untuk hal-hal tertentu seperti kata dalam bahasa inggris ataupun kata-kata lainnya.

<u> = Tag <u> berarti underline atau garisbawah yang berfungsi menandai kata atau kalimat yang perlu digarisbawahi pada tampilan di browser.

Untuk mencoba kode paragraf, kita akan menambahkan paragraf dibawah sub judul tentang saya di project halaman website pribadi anda, tambahkan kode paragraf sehingga hasil kode html anda menjadi seperti berikut :

<!DOCTYPE html>
<html>
<head>
<title>Halaman Website Pribadi Saya!</title>
<meta name=”description” content=”Halaman website pribadi hasil karya saya sendiri”>
</head>
<body>
<h1>Selamat Datang di Website Milik Nama Anda</h1>
<h2>Profil Pribadi Saya</h2>
<ul>
<li>Nama Lengkap : Nama Lengkap Anda</li>
<li>Tanggal Lahir : 1 Januari 1980</li>
<li>Alamat : Depok</li>
</ul>
<h2>Tentang Saya</h2>
<p>Saya merupakan seorang <i>desainer</i> website yang ahli membuat website menggunakan kode <b>HTML</b>. Jika anda tertarik membuat website, silahkan hubungi saya di nomer <u>0800-1234-5678</u>.
<h2>Kontak Saya</h2>
</body>
</html>

Bisa dilihat dari kode diatas kita mencoba tag-tag seperti bold, underline serta italic kedalam paragraf yang kita buat. Silahkan lihat hasilnya untuk bisa memahami perbedaan setiap tag tersebut.

Tag HTML Untuk Gambar

Gambar saat ini menjadi suatu elemen penting pada sebuah halaman website, karena dengan bantuan gambar dapat membuat tampilan halaman website menjadi jauh lebih menarik dan juga informatif.

Untuk memasukkan gambar kedalam kode html, caranya sangat mudah. Anda cukup memasukkan baris kode berikut kedalam kode HTML website anda :

<img src=”/folder_gambar/nama_gambar.jpg”>

Jadi, kode tag HTML untuk memasukkan gambar adalah tag <img>, namun perlu diketahui tag imb ini tidak memerlukan tag penutup atau tag </img>.

Untuk memasukkan file gambar, anda bisa memasukkan lokasi file gambar di elemen src. Jika file gambar terletak di folder yang sama dengan file html tersebut, maka anda bisa langsung memasukkan nama file tanpa menuliskan folder. Misalkan anda ingin memasukkan gambar dengan nama file background.jpg yang terletak di folder yang sama dengan folder file html anda, maka anda bisa menuliskan kode seperti berikut ;

<img src=”background.jpg”>

Selain itu, anda juga bisa memasukkan gambar dari sumber lain di internet. Caranya sangat mudah, masukkan link gambar yang ingin anda tampilkan di elemen src. Contohnya ketika anda ingin memasukkan gambar dari wikipedia di website anda, katakanlah url gambar tersebut adalah https://wikipedia.org/images/gambar1.jpg, maka yang perlu anda lakukan adalah mengetik kode berikut :

<img src=”https://wikipedia.org/images/gambar1.jpg”>

Setelah memahami bagaimana cara memasukkan gambar kedalam halaman website, selanjutnya yang perlu anda lakukan adalah mempelajari bagaimana mengatur ukuran gambar tersebut di halaman website anda. Karena tanpa mengatur ukuran gambar, maka gambar akan muncul dalam ukuran penuh sesuai dengan ukuran gambar yang anda masukkan.

Cara mengatur ukuran gambar adalah dengan menambahkan elemen baru, yaitu elemen height serta elemen width. Elemen height berfungsi untuk mengatur ukuran tinggi gambar dalam pixel, sedangkan elemen width mengatur ukuran lebar gambar juga dalam format pixel.

Contohnya, ketika anda ingin memasukkan gambar kedalam halaman website anda dan mengatur ukuran gambarnya menjadi 300 x 300 maka yang perlu anda lakukan adalah :

<img src=”background.jpg” width=”300” height=”300”>

Sekarang mari kita coba memasukkan gambar kedalam kode halaman website pribadi anda. Masukkan sebuah gambar berformat jpg didalam folder yang sama tempat anda menyimpan file html, dan rename gambar tersebut sehingga memiliki nama tes_gambar.jpg.

Selanjutnya, tambahkan tag <img> kedalam file html anda sehingga hasilnya menjadi seperti ini :

<!DOCTYPE html>
<html>
<head>
<title>Halaman Website Pribadi Saya!</title>
<meta name=”description” content=”Halaman website pribadi hasil karya saya sendiri”>
</head>
<body>
<h1>Selamat Datang di Website Milik Nama Anda</h1>
<img src=”tes_gambar.jpg” width=”300” height=”200”>
<h2>Profil Pribadi Saya</h2>
<ul>
<li>Nama Lengkap : Nama Lengkap Anda</li>
<li>Tanggal Lahir : 1 Januari 1980</li>
<li>Alamat : Depok</li>
</ul>
<h2>Tentang Saya</h2>
<p>Saya merupakan seorang <i>desainer</i> website yang ahli membuat website menggunakan kode <b>HTML</b>. Jika anda tertarik membuat website, silahkan hubungi saya di nomer <u>0800-1234-5678</u>.
<h2>Kontak Saya</h2>
</body>
</html>

Jika kode yang anda masukkan benar, maka akan muncul sebuah gambar berukuran 200×300 dibawah judul utama halaman website anda.

Tag HTML Untuk Table

Table merupakan salah satu tag HTML penting yang banyak digunakan untuk membuat tampilan halaman webiste HTML menjadi lebih menarik. Selain digunakan untuk menampilkan tampilan data, table juga seringkali digunakan untuk merapihkan tampilan halaman website agar terlihat lebih rapi.

Untuk tag table sendiri agak sedikit rumit karena memiliki beberapa sub tag penting dan berbeda-beda, sehingga untuk bagian ini anda harus sedikit berkonsentrasi agar bisa memahami masing-masing tag berbeda yang ada di elemen table.

Berikut ini tag-tag yang digunakan untuk membuat sebuah table di halaman website :

<table> : Tag ini merupakan tag utama dari sebuah table.
<tr> : Tag ini merupakan tag untuk membuat suatu row baru di dalam sebuah tabel.
<td> : Tag ini merupakan tag untuk setiap kolom di dalam tabel.
<th> : Tag ini untuk membuat sebuah kolom berbentuk judul di dalam tabel.

Selanjutnya, untuk contoh penggunaannya adalah sebagai berikut :

<table>
<tr>
<th>Sumatra</th>
<th>Jawa</th>
<th>Kalimantan</th>
<th>Sulawesi</th>
<th>Papua</th>
</tr>
<tr>
<td>30.000.000</td>
<td>120.000.000</td>
<td>20.000.000</td>
<td>20.000.000</td>
<td>15.000.000</td>
</tr>
</table>

Kode tersebut diatas akan membuat tampilan seperti berikut pada halaman website anda :

Sumatra Jawa Kalimantan Sulawesi Papua
30.000.000 120.000.000 20.000.000 20.000.000 15.000.000

Untuk memodifikasi tampilan table, terdapat beberapa atribut yang bisa digunakan, diantaranya adalah rowspan dan colspan untuk membuat sebuah baris atau kolom yang berukuran lebih besar. Namun karena artikel ini berfokus pada pengenalan HTML, kita tidak akan membahas lebih lanjut dan mengenai atribut tersebut nantinya akan dibahas pada artikel selanjutnya.

Tag HTML Link

Kode sederhana ini merupakan suatu kunci utama dari suatu website. Dengan menggunakan link, pengunjung website bisa berpindah dari satu halaman ke halaman lain atau bahkan menuju ke website lain.

Cara kerja link adalah, ketika pengunjung website mengklik link yang terdapat di halaman website, maka browser akan membuka halaman website lain sesuai dengan yang diperintahkan didalam kode link tersebut.

Dalam sebuah kode link, terdapat dua data utama, yaitu data mengenai halaman tujuan ketika link di klik, serta anchor text yang merupakan kata-kata yang ditampilkan di link.

Seringkali anda melihat di internet link-link yang menggunakan tulisan seperti “klik disini”, nah tulisan “klik disini” itulah yang merupakan anchor text.

Baiklah, mari kita gunakan contoh agar lebih mempermudah pemahaman anda.

Misalkan, anda ingin membuat link menuju halaman profil facebook anda, maka kode html yang perlu anda masukkan kedalam halaman website anda adalah :

<a href=”https://facebook.com/profile_anda”>Halaman Facebook Saya</a>

Hasil output dari kode html diatas ketika dibuka di browser adalah sebuah tulisan “Halaman Facebook Saya”, yang ketika diklik akan membuka halaman “https://facebook.com/profile_anda”. Sangat mudah bukan?

Selain digunakan untuk mengarahkan pengunjung ke website lain, anda bisa menggunakan link untuk mempermudah navigasi pengunjung yang ingin berpindah kehalaman lain di website anda.

Contohnya, anda memiliki website yang terdiri dari 4 halaman, yaitu : Halaman Utama (index.html), halaman gallery (gallery.html), halaman kontak (contact.html) serta halaman profil (profile.html).

Maka anda bisa membuat menu sederhana di kode html anda agar para pengunjung bisa berpindah ke 4 halaman tersebut menggunakan link seperti berikut :

<a href=”index.html”>Halaman Utama</a> <a href=”gallery.html”>Halaman Gallery</a> <a href=”contact.html”>Halaman Kontak</a> <a href=”profile.html”>Halaman Profil</a>

Ketika membuat link yang menuju ke halaman lain di website yang sama, anda bisa menggunakan full url dengan menggunakan http://namawebsiteanda.com/halaman_tujuan ataupun hanya menggunakan filenya saja selama file tersebut berada di folder atau directory yang sama.

Ditulis oleh : Admin | Tanggal Terbit : 30 Desember 2018 | Share artikel ini di :