Belajar Membuat Website – Mempelajari Dasar HTML
Dalam membuat sebuah website di internet, kita harus paham terlebih dahulu tentang HTML. Apa sih HTML itu?? HTML merupakan singkatan dari Hypertext Mark-up Language dimana hal ini yang membuat website kita dapat terlihat cantik dimata para pengunjung. HTML sendiri merupakan kerangka untuk membuat suatu website. Dan untuk mempercantiknya bisa ditambahkan dengan CSS (Cascading Style Sheet) yang akan kita bahas pada pertemuan selanjutnya.
HTML dan hal-hal yang berkaitan dengan website distandarisasi oleh sebuah badan yang disebut World Wide Web Consortium (W3C). Standard terbaru, konsep dan proposal mengenai starndarisasi web dapat dilihat di http://www.w3.org.
Sebelum kita mulai belajar tentang HTML. Ada baiknya kalian mempersiapkan software pendukung seperti notepad++ atau editor lainnya yang dapat membuat kamu nyaman saat belajar HTML nanti. Ok, mari sekarang kita mempelajari tentang HTML.
Memulai Membuat Halaman Web
Pertama, bukalah notepad++ atau editor yang lain kemudian ketik perintah berikut.
Belajar HTML
Simpan file diatas dengan nama tes.html di suatu folder (misalnya di c:belajar). Kemudian buka file tersebut dengan browser kesayangan kamu dan lihat hasilnya.
Jika kamu melihat tanda <
dan >
pada kode diatas itu adalah tag atau yang berarti tanda/label. Kode diatas akan menampilkan sebuah paragraf bertuliskan "Belajar HTML"
. Itu dikarenakan kita memakai tag <p>
. Terus tag html kemana?? Kode tersebut hanya memberitahukan kepada browser (Mozilla, Chrome, Safari, Opera, dll) bahwa file tersebut adalah dokumen html. Jadinya kalian tidak akan lihat tag tersebut.
Satu hal yang penting, semua tag pembuka <...>
pasti mempunyai pasangan tag penutup </...>
. Jika kalian lupa memakai tag penutup, maka tidak akan terbaca oleh browser. Kecuali Standalone Tag.
Standalone Tag
Beberapa tag tidak memerlukan penutup sebab tag tersebut hanya berfungsi untuk menempatkan sebuah elemen pada halaman web. Atau bahasa sederhananya itu tag tersebut dapat berdiri sendiri. Ada beberapa Standalone tag yang sering digunakan. Yaitu seperti :
<
img>
berfungsi untuk menampilkan gambar.<
hr>
berfungsi untuk memberi garis.<
br>
berfungsi memberikan jarak antar teks.<
meta>
merupakan tempat untuk meletakkan konten tentang dokumen yang tidak perlu ditampilkan di layar. Biasanya diletakkan di<
head>
dan masih banyak lagi, silahkan cari sendiri di google yah…. 🙂
Struktur Dasar HTML
Selanjutnya adalah mengenal struktur dari file html itu sendiri. Buka editor terus ketik script berikut:
SEMUA TAG-TAG HTML AKAN DITULISKAN DISINI
Pada Code HTML diatas, dapat dilihat ada tag html, head, title, body. Bagian Tag html sudah saya jelaskan diatas, yaitu untuk memberitahukan browser jika file tersebut adalah file html. Tag head dan Tag title berfungsi menjelaskan pada browser, tentang judul dari document htmlnya. Tag body berfungsi sebagai isi untuk menuliskan script – script yang mana nantinya diterjemahkan sebagai halaman web oleh browser. Untuk Tag-tag html yang lain, kamu bisa lihat pada tabel dibawah ini beserta contohnya.
Tabel Tag HTML Beserta penjelasan dan contohnya
table{width:100%; padding:5px; border: 1px solid #BEBEBE; margin-bottom:15px;}
th,td{width:auto; padding:5px; border: 1px solid #BEBEBE; }
code {font-size:15px;
background-color:transparent;}
.table-hover tbody tr.success:hover td {
background-color: #F5F5F5;
}
.table-hover tbody tr.error:hover td {
background-color: #F5F5F5;
}
.table-hover tbody tr.warning:hover td {
background-color: #F5F5F5;
}
.table-hover tbody tr.info:hover td {
background-color: #F5F5F5;
}
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
background-color: #F5F5F5;
}
Tag HTML | Penjelasan dan contoh |
---|---|
<a> |
ANCHOR tag berfungsi untuk membuat suatu link menuju ke situs/website tertentu. Contoh : <a href="https://pulung.net">Membuat Link</ a> |
<abbr> |
ABBREVIATION tag menunjukkan penafsiran makna ke browser dan mesin pencari untuk seperti jenis singkatan sepert “dll”, “sbb”. Contoh : Lauk pauk hari ini adalah nasi ,ikan, <abbr title="dan lain-lain">dll</abbr> |
<acronym> |
ACRONYM tag menunjukkan penafsiran makna ke browser dan mesin pencari untuk seperti jenis singkatan sepert “WHO”, “FBI”. Contoh : <acronym title="World Health Organization">WHO</acronym> adalah salah satu badan-badan asli milik <acronym title="Perserikatan Bangsa-Bangsa">PBB</acronym> |
<address> |
ADDRESS tag digunakan untuk mengidentifikasi informasi dari pembuat atau penulis. Contoh : <address> |
<applet> |
elemen APPLET tag digunakan untuk menanamkan dan memanggil aplikasi Java dalam sebuah halaman HTML |
<area> |
AREA tag mendefinisikan bagian dari suatu gambar. |
<b> |
BOLD tag adalah tag yang menentukan <b>bagian tebal</b> dalam dokumen teks. |
<base> |
BASE tag mendefinisikan informasi mengenai ke halaman web pada link tertentu. |
<basefont> |
BASEFONT tag mendefinisikan perubahan dari semua tampilan teks pada halaman web. |
<bdo> |
BDO tag adalah menetapkan arah layar teks dengan nilai default dari Kiri ke Kanan. Contoh : <bdo dir="rtl">Kanan ke Kiri</bdo> |
<bgsound> |
BGSOUND tag adalah mendefinisikan suara latar belakang untuk halaman web. Contoh : <html> |
<big> |
BIG tag membuat teks menjadi <big>Lebih besar</big> |
<blockquote> |
BLOCKQUOTE tag memisahkan bagian teks dari teks sekitarnya. Contoh :
|
<blink> |
BLINK membuat teks untuk<berkedip-kedip>blink</blink> secara berulang. Internet Explorer tidak mendukung tag ini. |
<body> |
<html> <head> </head> <body> Body tag mengidentifikasi semua konten yang ada pada website. </body> </html> |
<br> |
BR tag berfungsi untuk Berpindah ke baris baru |
<button> |
BUTTON tag berfungsi untuk Membuat tombol Contoh : <button type="button">Tombol</button> |
<caption> |
<table> <caption>CAPTION tag menambahkan keterangan ke tabel.</caption> <tr> <td> </td> </tr> </table> |
<center> |
<center>CENTER tags membuat text, gambar, dll ke bagian tengah.</center> |
<cite> |
<cite>CITE tags berfungsi untuk menampilkan kota dengan teks miring.</cite> |
<code> |
CODE tags digunakan untuk menampilkan teks sepert kode, script, dll <code>htmltags.html </code> |
<col> |
COL digunakan untuk mendefinisikan sifat kolom untuk kolom tabel.<table> |
<colgroup> |
COLGROUP digunakan untuk mengkelompok kolom tabel.<table> |
<dd> |
DD digunakan Menjelaskan suatu kata.<dl> |
<dfn> |
DFN digunakan untuk menekankan definisi. Contoh : <dfn>PC</dfn>: Personal Computer. |
<del> |
DEL digunakan untuk Menunjukkan <del> |
<dir> |
DIR tag mendefinisikan daftar direktori. Contoh : <dir> |
<dl> |
DL berfungsi membuat daftar definisi (definition list). Contoh : <dl> |
|
DIV merupakan bagian penggabungan dari sebuah dokumen web. Contoh :
Home Pets
|
<dt> |
DT berfungsi mendefinisikan sebuah istilah (definition term). Contoh : <dl> |
|
EMBED tag berfungsi memberikan perintah kepada browser untuk memasukkan unsur-unsur multimedia, seperti video, file suara kedalam dokumen web. Contoh : http://noah.mov |
<em> |
EM tag berfungsi memberikan penekanan (emphasize) kepada kata/kalimat tertentu. Contoh : <em>Contonh emphasize</em> |
<fieldset> |
FIELDSET tag berfungsi menciptakan suatu bentuk untuk semua elemen di dalamnya. Contoh : <fieldset>Contoh FIELDSET.</fieldset> |
<font> |
FONT tag berfungsi untuk memodifikasi font/tulisan pada halaman web. Contoh : <font face="cursive, serif">font</font>, |
<form> |
Form tag berfungsi untuk mendefinisikan sebuah formulir. Contoh :
|
<frame> |
Frame tag berfungsi mendefinisikan setiap frame dalam frameset. Contoh : <html> |
<frameset> |
FRAMESET tag berfungsi menentukan tata letak frame. Contoh : <html> |
<h1> - <h6> |
H1 – H6 mendifinisikan level 1-6 headers. Contoh :
<h1>Header 1</h1><h2>Header 2</h2><h3>Header 3</h3><h4>Header 4</h4><h5>Header 5</h5><h6>Header 6</h6> |
<head> |
Head tag mendefinisikan informasi umum tentang dokumen judul halaman, meta-tag, script dan link untuk diikuti oleh browser. Contoh : <html> |
<hr> |
HR tag berfungsi membuat garis horizontal. Contoh : Ada 2 pilihan, yaitu : <hr> oatau <hr /> |
<html> |
HTML tag mengandung unsur HTML, dan memberikan perintah untuk browser untuk membaca dokumen sebagai dokumen HTML. Contoh : <html> |
|
iFrame tag menciptakan kerangka inline yang berisi halaman web lain di dalamnya. Contoh : src="https://pulung.net" name="site" width="540" height="100" align="left"> |
<img> |
IMG tag berfungsi untuk menampilkan gambar. Contoh : <img src="https://www.fillster.com/images/tutorial.gif" width="60" height="62" alt="judul gambar" /> |
<input> |
INPUT tag berfungsi untuk membuat input fields, check boxes, radio buttons. Contoh :
|
<ins> |
INS tag berfungsi untuk menyisipkan teks. Contoh : <ins>Teks sisipan</ins> |
<isindex> |
ISINDEX tag berfungsi mendefinisikan field input single-line. Contoh : |
<i> |
<I> tag berfungsi untuk menentukan <i>italic text</i>. |
<kbd> |
KBD tag singkatan dari <kbd>keyboard text</kbd> |
<label> |
LABEL tag berfungsi mendefinisikan label untuk sebuah form. Contoh :
|
<legend> |
LEGEND tag berfungsi memberikan keterangan dalam elemen fieldset. Contoh :
|
<li> |
LI tag berfungsi mendefinisikan daftar ordered (memakai angka) dan unordered (memakai simbol). Contoh : <ul><li>HTML</li> <li>PHP</li> <li>JavaScript</li> </ul> |
<link> |
LINK tag berfungsi mendefinisikan link ke dokumen eksternal, seperti Style Sheets Eksternal. Contoh : <head> |
<marquee> |
MARQUEE tag berfungsi membuat teks berjalan. Contoh : <marquee>Contoh Marquee</marquee> |
<menu> |
MENU tag berfungsi mendefinisikan daftar menu. Contoh :
|
<meta> |
META tag berfungsi menyatakan informasi untuk robot mesin pencari dan crawler. Contoh : <html> |
<noframe> |
NOFRAME tag berfungsi menentukan tata letak halaman web alternatif untuk browser yang tidak mendukung frame. Contoh : <html> |
<noscript> |
NOSCRIPT tag berfungsi menentukan tata letak halaman “noscript” untuk versi browser yang tidak mendukung “SCRIPT”. Tag NOSCRIP digunakan dalam pemakaian elemen JavaScript atau VBScript. Contoh : <noscript>Maaaf, browser yang anda pakai tidak mendukung fitur JavaScript, VBScript. </noscript> |
<optgroup> |
OPTGROUP tag berfungsi menciptakan pilihan menu drop-down perkelompok. Contoh : MalangSurabayaMalaysiaSingapura |
<option> |
OPTION tag berfungsi menciptakan menu drop-down. OPTION Tag bekerja hanya dalam hubungannya dengan SELECT tag. Contoh : PemulaMenengahMahir |
<ol> |
OL tag berfungsi mendefinisikan daftar ordered item. Contoh :
|
<p> |
<P> tag berfungsi menentukan paragraf dan menciptakan baris baru. Contoh : <p>Mencoba menggunakan paragraf.</p> |
<q> |
<Q> tag berfungsi menetapkan kutipan singkat. Fungsi ini mirip dengan tag blockquote kecuali bahwa tag <Q> tidak merusak baris teks. Contoh : <q> |
<s> |
<S> tag berfungsi sama seperti DEL tag. <S> tag sudah usang dan tidak didukung di XHTML 1.0 Strict DTD, oleh karena itu dianjurkan untuk menggunakan tag DEL sebagai gantinya gantinya. Contoh : <s> |
<samp> |
SAMP tag berfungsi menentukan lebar font yang tetap. Contoh : <samp>Contoh SAMP tag - 1 <samp> |
|
SCRIPT tag berfungsi mendefinisikan script dalam halaman web dan membiarkan browser web tahu bahwa itu bukan bagian HTML. Kamu dapat menempatkan sebuah tag SCRIPT di mana saja dalam HTML, tetapi praktek terbaik adalah dengan menempatkannya di antara tag . Contoh : http://javascript.js</head> <body> document.write(“Contoh memakai script tag.”)
|
<select> |
SELECT tag berfungsi menciptakan menu pada formulir. Contoh : KotaMalangSurabaya |
<small> |
SMALL tag berfungsi menciptakan teks kecil. Contoh : <small>Contoh small tag</small> |
<span> |
SPAN tag berfungsi menetapkan bagian dari dokumen. Contoh :
Kota Malang mulai panas.
|
<strike> |
STRIKE tag berfungsi sama seperti DEL tag. <STRIKE> tag sudah usang dan tidak didukung di XHTML 1.0 Contoh : <strike>contoh strike tag</strike> |
<strong> |
STRONG tag menentukan teks yang tebal. Contoh : <strong>Contoh Strong tag.</strong> |
<style> |
STYLE tag menetapkan link dan lokasi ke style sheet, dan memberikan perintah untuk browser mengenai tata letak untuk halaman web Contoh : <style type=”text/css”>h1{text-align: center; font-style: italic} p{color:#ff0000} </style> </head> <body> </body> </html> |
<sub> |
SUB tag berfungsi mendefinisikan teks subscript. Tag SUB adalah menciptakan sub teks subscript Contoh : <sub>contoh SUB tag.</sub> |
<sup> |
SUP tag berfungsi mendefinisikan teks superscripted. Tag SUP SUP tag adalah menciptakan superscripted. Contoh : <sup>contoh SUP tag.</sup> |
<table> |
TABLE tag berfungsi mendefinisikan tabel. Contoh : <table> |
<td> |
TD tag berfungsi menciptakan sel data Contoh : <table> |
<th> |
TH tag berfungsi menciptakan table header (kepala tabel) Contoh : <table> |
<tr> |
TR tag berfungsi menciptakan sebuah baris dalam tabel Contoh : <table> |
<tbody> |
TBODY tag berfungsi menciptakan table body (badan tabel) Contoh : <table> |
<textarea> |
TEXTAREA tag berfungsi menciptakan text area Contoh :
|
<tfoot> |
TFOOT tag berfungsi menciptakan table footer Contoh : <table> |
<thead> |
THEAD tag berfungsi menciptakan table header Contoh : <table> |
<title> |
TITLE tag berfungsi menyatakan judul dari dokumen HTML Contoh : <html> |
<tt> |
TT tag berfungsi menciptakan teks teletype Contoh : <tt>Contoh TT tag.</tt> |
<u> |
U tag berfungsi membuat teks digarisbawahi Contoh : <u>Garis bawah.</u> |
<ul> |
UL tag berfungsi mendefinisikan daftar unordered item Contoh :
|
<var> |
VAR tag berfungsi menunjukkan parameter variabel Contoh : <var>Contoh VAR tag<var> |