HTML (Hypertext Markup Language) merupakan salah satu format yang digunakan dalam pembuatan
dokumen dan aplikasi yang berjalan di halaman web. Oleh karena itu agar dapat membuat program aplikasi di atas halaman web, Anda terlebih dahulu harus mengenal dan menguasai HTML. Walaupun sekarang telah banyak paket aplikasi yang dapat digunakan untuk membuat halaman web secara WYSIWYG (What You See Is What You Get) seperti Frontpage, DreamWeaver, Netscape Composer, dan masih banyak lagi, namun Anda tetap harus menguasai tag-tag HTML terutama yang dipergunakan untuk membuat aplikasi di internet karena mau tidak maul Anda akan bekerja dalam mode text editor bilamana hendak menyisipkan setiap script program dalam script HTML.
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 memformat file dokumen teks biasa untuk bisa ditampilkan pada web browser dengan
bantuan tanda-tanda yang sudah ditentukan. Hal tersebut dapat dilakukan dengan menambahkan
elemen atau yang sering disebut sebagai tag. Elemen HTML biasanya berupa tag yang
berpasangan dan setiap tag ditandai dengan simbol < dan >. Pasangan dari sebuah tag ditandai dengan
tanda ‘/’. Misalnya pasangan dari tag <contoh> adalah </contoh>. Dalam hal ini <contoh> disebut
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 kedl ataupun besar tidaklah menjadi masalah.
STRUKTUR DASAR HTML
Sebelum mulai mempelajari tag-tag HTML,Script dituliskan dalam text editor seperti Notepad, kemudian disimpan dengan ekstensi .htm atau .html. Kemudian untuk mencobanya dapat langsung dibuka dengan web browser, seperti Internet Explorer atau Nescape Navigator, cukup dengan perintah Filel Open, kemudian browse nama file dan lokasi di mana file HTML tadi disimpan. Atau sebagai latihan dapat pula disimpan di lokasi document root web server dan memanggilnya dengan nama komputer dan nama filenya.HTML Sebelum memulai menulis script-script html & Php, terlebih dahulu install Webserver & Php & mysql..
Setiap dokumen HTML memiliki struktur dasar atau susunan file sebagai berikut:
Contoh1.htm
<html>
<head>
<title> berisi teks yang akan muncul pacta titlebar browser </title>
</head>
<body>
Berisi tentang text, gambar, atau apapun yang ingin ditampilkan pada halaman web dan pada bagian ini.
</body>
</html>
Seperti dapat dilihat, struktur file HTML diawali dengan sebuah tag <html.> dan ditutup dengan tag</html.>. Di dalam tag ini terdapat dua bagian besar, yaitu yang diapit oleh tag <head> ... </head> dan yang diapit oleh tag <body> ... </body>. Bagian yang diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak ditampilkan pada window browser. Bagian ini berisi tag-tag header seperti <title> ... </title> yang berfungsi untuk mengeluarkan judul pada title bar window web browser dan tag lain, misalnya <meta>. Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan ditampilkan pada
window web browser nantinya. Pada bagian ini Anda akan menuliskan semua jenis informasi yang berupa
teks dengan bermacam format maupun gambar yang nantinya ingin Anda sampaikan pada pembaca.
KODE WARNA
Sebelum lebih jauh mempelajari tag-tag HTML ada baiknya terlebih dahulu melihat kode Warna yang
sering digunakan di penulisan tag-tag HTML. Pengaturan Warna di halaman HTML menggunakan
mode kombinasi RGB (red, green, blue) yang mana setiap wama ditampilkan dalam dua digit nilai
heksadesimal (0, 1, 2,.. .,F). Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari
kombinasi wama merah, hijau dan biru. Sebagai contoh 00 pada dua digit pertama berarti tidak ada
wama merah dalam kombinasi Warna, dan seterusnya.
Berikut ini adalah contoh beberapa kode warna :
PENGATURAN PROPERTI HALAMAN WEB
Properti dokumen diatur melalui atribut-atribut yang terdapat dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakang halaman, warna teks, warna link dan lain-lain.
Atribut elemen body:
background = lokasi dan nama file (latar belakang image dokumen)contoh2.htm
bgcolor = warna (warna latar belakang dokumen, default putih)
text = warna (warna teks dokumen, default hitam)
link = warna (warna link dokumen, default biru)
vlink = warna (warna visited link dokumen, default ungu)
alink = warna (warna active link dokumen, default merah)
<head>
<title>body dan heading</title>
</head>
<body bgcolor=#OO3399 text=#ffffOO>
<h1>TOKO BUKU SERBA MURAH</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>
HEADING, PARAGRAPH DAN BREAK
Tag Heading <hx> digunakan untuk memformat heading judul dan sub-judul dari suatu halaman web.
Heading ini akan memperbesar ukuran huruf untuk setiap jenis heading. Ada enam buah heading yang
dikenal di HTML, yaitu dari <h1> sampai <h6>. Tag Paragraph <p> berfungsi layaknya untuk
pengaturan antar paragraf dalam halaman web Anda. Dalam elemen paragraf terdapat atribut : align = [ left I
center I right ] yang berfungsi sebagai pengatur perataan paragraf, jadi Anda cukup memilih salah satu
dari ketiga pilihan tanpa harus memberi kurung buka dan tutup, dan default-nya adalah left. Anda dapat
memilih perataan kiri, tengah atau kanan. Tag Break <br> berfungsi untuk memberikan baris
baru suatu paragraf dalam halaman web Anda. Tag break tidak memerlukan tag penutup break.
Tag Horisontal Ruler <hr> berfungsi untuk menampilkan garis horisontal tiga dimensi di dalam
halaman web Anda. Tag horisontal ruler juga tidak memerlukan elemen penutup </hr>.
Atribut elemen horisontal rules:
Align = [ left I center I right ] (perataan horisontal, default center)
size = pixel (tebal garis, default 2)
width = panjang (lebar garis, pixel atau persen, default 100%)
noshade (garis solid)
contoh3.htm
<html>
<head>
<title>paragrap, break dan hr</title>
</head>
<body bgcolor=#990066 text=#FFFFFF>
<h1>TOKO BUKU SERBA MURAH</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<pr>sejarah<br>dll.</p>
<h3>Alat Kantor</h3>
<p>meja<br>kursi<br>file manager<br>dll.</p>
</body>
</html>
<html>
<head>
<title>paragrap, break dan hr</title>
</head>
<body bgcolor=#990066 text=#FFFFFF>
<h1>TOKO BUKU SERBA MURAH</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<pr>sejarah<br>dll.</p>
<h3>Alat Kantor</h3>
<p>meja<br>kursi<br>file manager<br>dll.</p>
</body>
</html>
PEMFORMATAN KARAKTER
Karakter pada halaman HTML dapat Anda format sesuai desain yang Anda tentukan, baik ukuran, jenis
maupun wama, dengan menggunakan tag <font>. .
Atribut elemen font:
size = angka (ukuran huruf, default 3)Elemen ragam karakter:
color = wama (wama huruf, default black)
face = jenis huruf (jenis huruf, default Times New Roman)
<b> teks disini </b> menghasilkan huruf tebal
<i> teks disini </i> menghasilkan huruf miring
<u> teks disini </u> menghasilkan huruf bergaris bawah
contoh4.htm<html>
<head>
<title>format karakter</title>
</head>
<body bgcolor=#OOOOOO text=#FFFFFF>
<h1 align=center>
<font color=#FFFFOO face=Arial>
TOKO BUKU SERBA MURAH</font>
</h1>
<hr width=360 align=center>
<h2>Toko kami menyediakan</h2>
<h3><font color=red>Alat TuIis</font></h3>
<p aIign=center>
pensil<br>ballpoint<br>penggaris<br>dll.
</p><h3><font color=red>Buku-Buku Pelajaran</font></h3>
<p aIign=right>
ilmu pasti<br>iImu 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>
LISTING
Properti <Ii> digunakan untuk menampilkan informasi dalam bentuk daftar (list). Ada dua jenis daftar yang dikenal di HTML, yaitu daftar dalam format bullet (unordered list <ul> dan dalam bentuk nomor (ordered list <ol>). Atribut elemen list:
Ordered list
type = [ l | a I A I i | l ] (tipe penomoran, default 1)
Unordered list
type = [ disc I square I circle I (tipe bullet, default disc)
contoh5.htm<html>
<head>
<title>listing</title>
</head>
<body bgcolor=#990066 text=#FFFFFF>
<h1>TOKO BUKU SERBA MURAH</h1>
<hr width=50% align=left>
Toko kami menyedi.akan
<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>kimia
<li>biologi
</ul>
<li>ilmu bumi
<li>sejarah
<li>dll.
</ol>
<h2>Alat Kantor</h2>
<ol type=i>
<li>meja
<li>kursi
<ul type=square>
<li>kursi lipat
<li>kursi p1astik
<li>kursi-kursian
</ul>
<li>fi1e manager <li>dll.
</ol>
</body>
</html>
MENEMPELKAN IMAGE
Anda dapat menampilkan gambar dalam halaman HTML dengan format file JPG atau GIF. Untuk
menampilkanya, gunakan tag IMG.
<IMG SRC=namafilegambar>
Atribut elemen image:
src = lokasi dan nama gambarcontoh6.htm
alt = teks (teks alternatif)
width = pixel (lebar gambar)
height = pixel (tinggi gambar)
align = [ top I middle I bottom I left I right] (perataan gambar)
border = pixel (tebal garis tepi garnbar)
<html>
<head>
<title>tampil gambar </title>
</head>
<body>
<h3>coba menampilkan gambar</h3>
<img src='amrizal.jpg'>
</body>
</html>
Sekian dulu post dari saya, apabila ada yang mau ditanyakan, tulislah pertanyaan anda di Box komentar, Terimakasih.
Sumber: Amrizal. Ch, S.
Tidak ada komentar:
Posting Komentar