 |
| Bintanginspirasi.com |
Dasar-Dasar HTML
HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumen-dokumen web yang ditulis atau berformat HTML (hypertext markup language).
Dikatakan markup language karena HTML berfungsi untuk ’memperindah’ file teks biasa untuk ditampilkan pada program web browser. Hal ini dilakukan dengan menambahkan elemen atau sering disebut sebagai tag-tag pada file teks biasa tersebut.
Tag HTML biasanya berupa tag-tag yang berpasangan dan ditandai dengan simbol < dan >. Pasangan dari sebuah tag ditandai dengan tanda ‘/’. Misalnya pasangan dari tag <contoh> adalah </contoh>. Dalam hal ini <contoh> kita sebut sebagai elemen dan biasanya dalam suatu elemen terdapat atribut-atribut untuk mengatur elemen itu. Jadi misalnya elemen <contoh> bila ditulis dengan atributnya adalah sebagai berikut : <contoh atribut1=”nilai_atribut1” atribut2=” nilai_atribut2” … >. Dalam penulisan tag HTML tidaklah case sensitive artinya penggunaan huruf kecil ataupun kapital tidaklah menjadi masalah.
Struktur Dasar Dokumen HTML
Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut :
Example
<head>
<title>berisi judul yang muncul pada title bar web browser</title>
</head>
<body>
Berisi tentang text, gambar, atau apapun yang ingin anda
Tampilkan pada dokumen anda ada pada bagian ini.
</body>
</html>
Seperti terlihat, struktur file HTML diawali dengan sebuah tag <html> dan ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu yang diapit oleh tag <head> … </head> dan tag <body> … </body>.
Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title> … </title> yang berfungsi untuk mengeluarkan judul pada title bar window web browser. Tag lain misalnya <meta> dan tag-tag lainnya yang akan kita pelajari.
Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan ditampilkan pada halaman web browser nantinya. Pada bagian ini Anda akan menuliskan semua jenis informasi berupa teks dengan bermacam format maupun gambar yang ingin Anda sampaikan pada pengguna nantinya.
Pengaturan Properti Dokumen
Properti dokument diatur melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link dan lain-lain.
Kode Warna
Dalam pengaturan warna menggunakan kode RGB yan mana ditampilkan dalam nilai heksadesimal. Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada warna merah dalam kombinasi warna. Berikut ini adalah contoh kode warna :
Warnap Heksadesimal
White #FFFFFF
Black #000000
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00
Aquamarine #70DB93
Chocolate #5C3317
Violet #9F5F9F
Brass #B5A642
Copper #B87333
Pink #FF6EC7
Orange #FF7F00
Atribut Elemen BODY
BACKGROUND = URI (background image for document)
BGCOLOR = Color (background color for document, default white)
TEXT = Color (text color for document, default black)
LINK = Color (link color for document, default blue)
VLINK = Color (visited link color for document, default purple)
ALINK = Color (active link color for document, default red)
Elemen Heading <hx>
Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada tujuh buah heading yang dikenal di HTML, yaitu dari <h1> sampai <h7>.
Tutorial HTML 01 :
Example
<head>
<title>latihan 01</title>
</head>
<body bgcolor=#003399 text=#ffff00>
<h1>TOKO BUKU bintang Inspirasi</h1>
<h2>Toko kami menyediakan</h2>
<h3>Alat Tulis</h3>
<h4>pensil, ballpoint, penggaris dll.</h4>
<h3>Buku-Buku Pelajaran</h3>
<h4>ilmu pasti, ilmu bumi, sejarah dll.</h4>
<h3>Alat Kantor</h3>
<h4>meja, kursi, file manager dll.</h4>
</body>
</html>
jalankan browser dan buka file diatas lalu amati apa yang terjadi, hurup pada <h1> dan </h1> akan ditampilkan lebih besar dibandingkan <h2> dan </h2>.
Elemen Paragrap <p>
Tag paragrap berfungsi layaknya untuk pengaturan antar paragrap dalam halaman web anda. Dalam elemen paragrap terdapat atribut :
ALIGN=[ left | center | right ]
yang berfungsi sebagai pengaturan perataan paragrap. Anda dapat memilih perataan kiri, tengah atau kanan.
Elemen Break <br>
Elemen Break berfungsi untuk memberikan baris baru suatu paragrap dalam halaman web anda. Elemen break tidak memerlukan elemen penutup break.
Elemen Horisontal Rules <hr>
Elemen <hr> berfungsi untuk menampilkan garis horisontal di dalam halaman web anda. Elemen <hr> tidak memerlukan elemen penutup </hr>.
Atribut Elemen Horisontal Rules
ALIGN =[ left | center | right ] (horizontal alignment, default center)
SIZE =Pixels (line height, default 2)
WIDTH =Length (line width, pixel or percentage, default 100%)
NOSHADE (solid line)
Tutorial HTML 02 :
Example
<head>
<title>latihan 02</title>
</head>
<body bgcolor=#990066 text=#FFCCFF>
<h1>TOKO BUKU Bintang inspirasi</h1>
<hr width=50% align=left>
<h2>Toko kami menyediakan</h2>
<h3>Alat Tulis</h3>
<p>pensil<br>ballpoint<br>penggaris<br>dll.</p>
<h3>Buku-Buku Pelajaran</h3>
<p>ilmu pasti<br>ilmu bumi<br>sejarah<br>dll.</p>
<h3>Alat Kantor</h3>
<p>meja<br>kursi<br>file manager<br>dll.</p>
</body>
</html>
Elemen Pemformatan Karakter <font>
Font pada halaman HTML dapat diformat sesuai dengan desain yang anda tentukan, baik ukuran, jenis maupun warna.
Atribut Elemen Font
SIZE = Number (font size adjustment, default 3)
COLOR = Color (font color adjustment, default black)
FACE = Number (font face adjustment, default Times New Roman)
Elemen Ragam Karakter
<b>bold</b> menghasilkan huruf tebal
<i>italic</i> menghasilkan huruf miring
<u>underline</u> menghasilkan huruf bergaris bawah
Tutorial HTML 03 :
Example
<head>
<title>latihan 03</title>
</head>
<body bgcolor=#000000 text=#FFFFFF>
<h1 align=center>
<font color=#FFFF00 face=Arial>TOKO BUKU Bintang Inspirasi</font>
</h1>
<hr width=360 align=center>
<h2>Toko kami menyediakan</h2>
<h3><font color=red>Alat Tulis</font></h3>
<p align=center>pensil<br>ballpoint<br>penggaris<br>dll.</p>
<h3><font color=red>Buku-Buku Pelajaran</font></h3>
<p align=right>ilmu pasti<br>ilmu bumi<br>sejarah<br>dll.</p>
<h3><font color=red>Alat Kantor</font></h3>
<p align=left>meja<br>kursi<br>file manager<br>dll.</p>
</body>
</html>
Elemen List
Propertis <li> digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet (unordered list <ul>) dan dalam bentuk nomor (ordered list <ol>).
Atribut Elemen List
Ordered list
TYPE = [ 1 | a | A | i | I ] (numbering style, default 1)
Unordered list
TYPE = [ disc | square | circle ] (bullet style, default disc)
Tutorial HTML 04 :
Example
<head>
<title>latihan 04</title>
</head>
<body bgcolor=#990066 text=#FFCCFF>
<h1>TOKO BUKU Bintang Inspirasi</h1>
<hr width=50% align=left>
Toko kami menyediakan
<h2>Alat Tulis</h2>
<ol>
<li>pensil
<li>ballpoint
<li>penggaris
<li>dll.
</ol>
<h2>Buku-Buku Pelajaran</h2>
<ol type=A>
<li>ilmu pasti
<ul>
<li>Fisika
<li>kimiya
<li>biyologi
</ul>
<li>ilmu bumi
<li>sejarah
<li>dll.
</ol>
<h2>Alat Kantor</h2>
<ol type=i>
<li>meja
<li>kursi
<ul type=square>
<li>kusi lipat
<li>kursi plastik
<li>kursi-kursian
</ul>
<li>file manager
<li>dll.
</ol>
</body>
</html>
Elemen Image <img>
Anda dapat menampilkan gambar dalam halaman HTML, format filenya berupa JPG atau GIF. Untuk menampilkanya digunakan tag IMG.
<IMG SRC=namafilegambar>
Atribut Elemen Image
SRC = URI (location of image)
ALT = Text (alternate text)
WIDTH = Length (image width)
HEIGHT = Length (image height)
ALIGN = [ top | middle | bottom | left | right ] (image alignment)
BORDER = Length (link border width)
Latihan: Menggunakan Tag Gambar
Buka contoh sebelumnya dan tambahkan tag berikut ini:
Tutorial HTML 05:
Example
<head>
<title>latihan 05</title>
</head>
<body>
<img src= logo.gif>
…
…
</body>
</html>
Elemen Link/Anchor <a>
Elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman lain, atau ke URL lain bahkan dalam satu halaman untuk berpindah ke sub judul yang lain. <a href = URL_tujuan>hypertext</A>
Latihan: Menggunakan Link
Link berfungsi untuk melompat ke halaman lain pada web atau ke URL lain (internet). hal ini dinamakan hypertext.
…..
….
<ol>
<li><A HREF=../motor/sity>nginjhen</A>
<li><A HREF=togar.html>togar</A>
<li><A HREF=http://www.honda.com>supra cup</A>
</ol>
….
….
Pada contoh diatas apabila anda mengklik supra cup maka akan di link ke www.honda.com. dan apa bila anda mengklik togar maka akan di link ke halaman togar.html
Link satu halaman
Untuk membuat link pada satu halaman, digunakan kombinasi tag <A NAME=tujuan1>… </A> dengan tag <A HREF=#tujuan1> … </A>. Contohnya jika Anda memiliki bagian dokumen sebagai berikut:
…
…
<H2><A NAME=bab2>BAB 2 Penjualan</A></H2>
…
…
maka bagian lain pada dokumen Anda dapat membuat link ke bagian di atas dengan tag sebagai berikut:
<A HREF=#bab2> BAB 2 Penjualan </A>
Elemen Tabel <table>
Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk tabel pada HTML, digunakan tag <table> … </ table >. Elemen tabel berisi properti <tr> … </tr> untuk menentukan baris (table row) yang di dalamnya terdapat properti <td> … </td> untuk menampilkan data pada setiap set tabel (table data).
Struktur lengkap dari elemen tabel adalah sebagai berikut:
Example
<tr>
<td>data baris 1 kolom 1</td>
<td>data baria 1 kolom 2</td>
</tr>
<tr>
<td>data baris 2 kolom 1</td>
<td>data haris 2 kolom 2</td>
</tr>
<tr>
<td>data baris 3 kolom l</td>
<td>data baris 3 kolom 2</td>
</tr>
</table>
Atribut Elemen Tabel
WIDTH = Length (table width, pixels or percentage)
HEIGHT = Length (table height, pixels or percentage)
BORDER = Pixels (border width)
CELLSPACING = Length (spacing between cells)
CELLPADDING= Length (spacing within cells)
ALIGN = [ left | center | right ] (table alignment)
BGCOLOR = Color (table background color)
Atribut Table Row
ALIGN = [ left | center | right ] (horizontal alignment of cells in group)
VALIGN = [ top | middle | bottom ] (vertical alignment of cells in group)
BGCOLOR = Color (row background color)
Atribut Table Data
ROWSPAN = Number (rows spanned by the cell)
COLSPAN = Number (columns spanned by the cell)
ALIGN = [ left | center | right ] (horizontal alignment)
VALIGN = [ top | middle | bottom ] (vertical alignment)
WIDTH = Pixels (cell width, pixels or percentage)
HEIGHT = Pixels (cell height, pixels or percentage)
BGCOLOR = Color (cell background color)
Tutorial HTML 05 :
Example
<head>
<title>latihan 05</title>
</head>
<body>
berikut contoh tabel dengan rowspan dan colspan
<table width=80% border=2 cellspacing=0 cellpadding=0>
<tr>
<td>baris 1 kolom 1</td>
<td>baris i kolom 2</td>
</tr>
<tr>
<td colspan=2>baris 2 kolom 1</td>
</tr>
<tr>
<td rowspan=2>baris 3 kolom 1</td>
<td>baris 3 kolom 2</td>
</tr>
<tr>
<td>baris 4 kolom 2</td>
</tr>
</table>
</body>
</html>
Elemen Form <form>
Form HTML merupakan tag yang paling penting khususnya dalam membuat aplikasi berbasis web. Form menyediakan properti masukan yang dapat berupa textbox, check box, radio button, dan button.
Untuk mendeklarasikan sebuah form digunakan tag <form> … </form>. Di dalam tag ini kita akan mendefinisikan elemen-elemen form seperti yang telah disebutkan di atas. Selain tag elemen form kita juga dapat menuliskan sembarang teks, tag, image.
Atribut Elemen Form
ACTION = URI (form handler)
METHOD = [ get | post ] (HTTP method for submitting form)
Properti Masukan Pada Elemen Form <input>, <textarea>, <select>
1. Text Box <input type=”text”>
Digunakan untuk memasukkan input berupa text.
SIZE = size of the textbox in character, default 20
MAXSIZE = maximum number of character will accept
NAME = name of variable to be sent to the application
VALUE = will display its content as the default value
2. Password <input type=”password”>
Digunakan untuk memasukkan password.
SIZE = size of the textbox in character, default 20
MAXSIZE = maximum number of character will accept
NAME = name of variable to be sent to the application
3. Hidden <input type=”hidden”>
Digunakan untuk mengirim data ke suatu aplikasi yang tidak kita inginkan untuk dilihat oleh browser.
NAME = name of variable to be sent to the application
VALUE = will display its content as the default value
4. Check Box <input type=”checkbox”>
Check box digunakan untuk dapat memilih lebih dari satu pilihan.
NAME = name of variable to be sent to the application
VALUE = usually set to a value
CHECKED (check radio button or checkbox)
5. Radio Button <input type=”radio”>
Radio button digunakan untuk dapat memilih hanya salah satu pilihan.
NAME = name of variable to be sent to the application
VALUE = usually set to a value
CHECKED (check radio button or checkbox)
6. Push Button <input type=”button”>
Elemen ini biasanya digunakan dengan JavaScript atau VBScript untuk menghasilkan suatu aksi.
NAME = name of variable to be sent to the application
VALUE = text label on the button
7. Submit <input type=”submit”>
Setiap elemen form membutuhkan tombol submit untuk mengirimkan nama dan nilainya ke suatu aplikasi yang ditentukan dalam atribut ACTION dalam elemen FORM.
NAME = name of variable to be sent to the application
VALUE = text label on the button
8. Image Submit Button <input type=”image” src=”url”>
Digunakan untuk menggantikan tombol standar submit dengan image.
NAME = name of variable to be sent to the application
9. Reset <input type=”reset”>
Digunakan untuk mereset semua masukan dalam form.
VALUE = text label on the button
10. Text Area <textarea> … </textarea>
Elemen untuk memasukkan teks secara leluasa seperti notepad.
NAME = name of variable to be sent to the application
ROWS = number of rows
COLS = number of columns
11. Select <select> … </select>
Daftar isi dalam properti select mengunakan tag <option>
SIZE = set the number of visible choices
NAME = name of variable to be sent to the application
Contoh Buat Form HTML
Example
<head><title>latihan form</title></head>
<body>
<form action=# method=get>
Nama : <input type=text name=nama><p>
Alamat :<input type=text name=alamat>
<p>Telepon :<input type=text name=telepon>
<p>Email :<input type=text name=email>
<p>
<select name=pekerjaan>
<option value=mahasiswa>mahasiswa
<option value=pelajar>pelajar
<option value=peg_negeri>peg_negeri
<option value=presiden>presiden
<option value=menteri>menteri
</select>
<p>Anggota :
<input type=radio name=anggota value=ya check>ya
<input type=radio name=anggota value=bukan>bukan
<p>
<input type=submit value=”kirim data” name=submit>
<input type=reset value=”ulangi” name=reset>
</form>
</body>
<html>
Jadi kesimpulannya untuk bisa menjadi seorang programer adalah tidak malas untuk praktek, belajarlah dengan mempraktekannya langsung sedikit demi sedikit dan pahami logikanya, pahami cara kerjanya buatlah web sistem yang menantang jika sudah paham dasar-dasarnya.
Mungkin itu saja artikel dari Tutorial Belajar HTML Langsung BIsa | Beserta contoh koding nya. Share jika bermanfaat, Good luck
1 comment
mantap gan