live

Berkenalan dengan HTML ?

Sebelum kita masuk ke dalam inti pembahasan penulis akan coba singgung

terlebih dahulu beberapa hal kesalahan orang-orang yang baru belajar web

development. Hal ini penulis jelaskan bukan untuk menjatuhkan, melainkan sebagai

koreksi untuk mendorong anda agar lebih maju dalam ber-webdevelopment,

sehingga nantinya jadi tau arah ketika akan belajar web development.

Banyak orang yang bergelut dalam bidang web development awalnya tidak

melewati pembelajaran HTML terlebih dahulu, sebagian besar menggunakan CMS

(Content Management System), ataupun karena kemudahan penggunaan software

seperti Adobe Dreamweaver. Sehingga dari sinilah orang menyangka untuk bisa

membuat website, atau mahir dalam web development itu harus menggunakan

Adobe Dreamweaver, jadi ngapain harus repot-repot belajar HTML? Sebetulnya

pernyataan ini tidak 100% benar, dan juga tidak 100% salah.

Orang yang ketika pertama kali menggunakan Dreamweaver merasakan

teramat susahnya ketika belajar sendiri tanpa bantuan buku atau tutorial. Bahkan

meskipun ada buku ataupun tutorial pun masih tetap saja kesulitan menggunakan

Dreamweaver. Sehingga koreksi dari penulis, agar dapat dengan mudah mengerti

dalam menggunakan software webdevelopment para webdeveloper haruslah

memiliki basic yang HTML + CSS yang kuat, sehingga ketika memakai aplikasi

seperti Adobe Dreamweaver itu menjadi sangat mudah.

Pengertian HTML & Sejarah Singkat HTML

Hypertext Markup Language (HTML) adalah bahasa markup yang umum

digunakan untuk membuat halaman web. Sebenarnya HTML bukanlah sebuah

bahasa pemrograman. Apabila di tinjau dari namanya, HTML merupakan bahasa

markup atau penandaan terhadap sebuah dokumen teks. Tanda tersebut di gunakan

untuk menentukan format atau style dari teks yang di tandai.

HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan

dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML

mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti

akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi

sebelumnya.

Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus

disetujui dulu oleh W3C untuk dievaluasi secara ketat. Setiap terjadi perkembangan

suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar

bisa mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak

akan bisa menampilkan HTML tersebut.

HTML versi 1.0

Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph,

hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung

peletakan image pada dokumennya tanpa memperbolehkan meletakkan teks

disekelilingnya (wrapping).

HTML versi 2.0

Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya

untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita

dapat memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan

pionir dari adanya homepage interaktif.

HTML versi 3.0

HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini

yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML

versi 3.2.

HTML versi 4.0

HTML versi 4 ini merupakan HTML versi terakhir pada saat sumber ini

diambil.

Fungsi HTML

HTML telah mengubah dunia internet, kurang lebih berikut adalah fungsi

utama :

• Membuat, mendesain, dan mengontrol tampilan dari Web Page (Halaman

Web) dan isinya.

• Mempublikasikan document secara online sehingga bisa diakses, dilihat

dari keseluruh dunia.

• Membuat online form yang bisa di gunakan untuk menangani pendaftaran,

transaksi secara online.

• Menambahkan object – object seperti image, audio, video dan juga java

applet (aplikasi java seperti java game dll) dalam document HTML.

Lebih dalam mengenai Struktur HTML ?

Pada dasarnya elemen HTML ada 2 kategori:

1. Elemen berfungsi untuk memberikan informasi atau mendeklarasikan

dokumen tersebut.

2. Elemen berfungsi untuk menentukan bagaimana isi suatu dokumen

ditampilkan pada browser.

Sebelum kita mengakhiri semua teori ini, ada 2 tools (alat) yang dibutuhkan :

1. Browser

Browser merupakan software yang di install di mesin client (komputer kita sebagai

pengguna website) yang berfungsi untuk menterjemahkan tag-tag HTML menjadi

halaman web. Contoh browser Internet Explorer, Mozila, opera dan masih banyak

yang lainya.

2. Editor

Editor adalah program yang bisa digunakan untuk membuat document HTML (Web

page/Halaman Web), ada banyak HTML editor yang bisa anda gunakan diantaranya:

Ms FrontPage, Dreamweaver, Notepad, dll.

STRUKTUR DOKUMEN HTML

<html>

<head>

<title>Belajar HTML</title>

</head>

<body>

Hallo Word!

</body>

</html>

<html> ... </html> : merupakan tag pembuka dari dokumen html.

<head> ... </head> :

<title> ... </title> : merupakan tag untuk memberikan judul pada dokumen html.

<body> ... </body> : merupakan body dari dokumen html. Segala sesuatu yang ingin

ditampilkan di dokumen html disimpan dalam tag bodvy ini.

Catatan :

Semua yang berada dalam kotak teks, cukup Anda tuliskan ulang, kemudian pindahkan ke

editor notepad, lalu save, ganti save as type di pojok bawah dari text documents txt, menjadi

all files, berikan nama filenya yakni nama-file.html

TAG BODY DAN ATRIBUTNYA

1. BACKGROUND

Atribut ini digunakan untuk mengeset gambar untuk digunakan sebagai latar

belakang pada sebuah halaman. Kita cukup menggunakan atribut berikut untuk

memilih sebuah gambar untuk dijadikan latar belakang. Cara penulisannya

adalah sebagi berikut:

Contoh:

<html>

<head>

<title>Judul Dokumen</title>

</head>

Mengganti background dokumen HTML dgn gambar

</body>

</html>

2. BGCOLOR

Bgcolor menentukan warna latar belakang dari halaman web. Misalnya, untuk

mengatur warna latar belakang halaman agar berwarna merah, kita dapat

menggunakan tag berikut :

3. TEXT

Atribut ini berguna untuk menentukan warna standar dari teks yang ada pada

halaman tersebut.

4. LINK

Atribut ini berguna untuk menentukan warna standar dari tautan (link) yang

ada pada halaman tersebut sebelum di-klik.

5. VLINK

Berguna untuk menentukan warna standar dari tautan (link) yang ada pada

halaman tersebut ketika telah di-klik.

6. ALINK

Berguna untuk menentukan warna standar dari tautan (link) pada halaman

tersebut ketika kursor berada diatasnya.

7. MARGIN

TOPMARGIN dan LEFTMARGIN digunakan untuk menentukan jarak atas dan

tepian pada halaman. Tag ini akan terbaca pada browser Internet Explorer,

sedangkan untuk browser Netscape tag yang digunakan adalah

MARGINHEIGHT dan MARGINWIDTH.

8. onLoad

Tag onLoad digunakan untuk menjalankan suatu perintah ketika suatu

halaman html dibuka. Contoh:

9. onUnload

Tag onUnLoad digunakan untuk menjalankan suatu perintah ketika suatu

halaman html tutup. Contoh:

MEMBUAT TEKS FORMAT JUDUL

Teks format judul biasa digunakan untuk judul postingan/artikel dalam halaman

web. contohnya seperti gambar dibawah ini.

Untuk membuat teks format judul bisa menggunakan tag heading. Tag heading

terdiri dari beberapa level, untuk lebih jelasnya lihat contoh di bawah ini:

<html>

<head>

<title>Title</title>

</head>

<body>

<h1>Heading Level 1</h1>

<h2>Heading Level 2</h2>

<h3>Heading Level 3</h3>

<h4>Heading Level 4</h4>

<h5>Heading Level 5</h5>

<h6>Heading Level 6</h6>

</body>

</html>

Berikut adalah hasil tampilan dari code di atas:

MENGATUR FONT PADA HALAMAN HTML

Didalam dokumen html kita bisa mengatur format font seperti mengatur jenis huruf,

warna huruf, size/ukuran huruf dll. Untuk mengatur format font dalam dokumen

html caranya dengan menggunakan tag <font>...</font>.

Dibawah ini adalah contoh penggunaan tag font.

<html>

<head>

<title> Format Font </title>

</head>

<body >

Bentuk Text arial berwarna merah

</font>

</body>

</html>

Dari code diatas terdapat tag <font size=”5pt” face=”arial” color=”red”>, itu artinya

kita mengatur font pada dokumen html dengan ukuran 5 pt, dengan jenis font arial

berwarna merah.

MENAMPILKAN GAMBAR PADA DOKUMEN HTML

Dalam dokumen html kita dapat menampilkan gambar, untuk menampilkan gambar

di dokumen html biasanya menggunakan tag <img>. Berikut adalah contoh

penggunaan tag <img>.

<html>

<head>

<title>Belajar ambil gambar</title>

</head>

<body>

<img src="image.jpg" height="80%" width="20%" alt="Ini

gambar ">

</body>

</html>

Membuat Text Bold, Italic, Underline, Striketrue, Supersript dan Subscript

<html>

<head>

</head>

<body >

<i>Ini Text Italic</i><br>

<u>Ini Text Underline</u><br>

<s>Ini Text Striketrue</s></br>

Text Superscript: X<sup>2</sup><br>

Text Subscript: H<sub>2</sub>O

</body>

</html>

Membuat Garis Dalam Dokumen HTML

Tag hr digunakan untuk membuat garis pada dokumen html. Contoh:

<html>

<head>

<title>Membuat Garis</title>

</head>

<body>

<h1 align="right">Ini adalah garis</h1>

<hr align="right" width="60%" color="#FF0000"

size="3">

</body>

</html>

Membuat Link

Ada 4 jenis pembuatan link dalam html:

· Link untuk menghubungkan antar halaman

· Link untuk menghubungkan ke bagian halaman lain

· Link untuk menghubungkan ke halaman website lain

· Link untuk menghubungkan ke alamat email

<html>

<head>

<title>Belajar link</title>

</head>

<body>

<a href="http://www.cbs-bogor.net">Menuju CBS Bogor

</a>

</body>

</html>

Membuat Animasi Teks Bergerak

Tag Marquee digunakan untuk membuat animasi teks jalan pada dokumen html.

<html>

<head>

<title>Membuat Animasi Marquee</title>

</head>

<body>

<marquee behavior="alternate"

bgcolor="#0099FF">ANIMASI

MARQUEE(ALTERNATE)</marquee><br><br>

<marquee behavior="scroll" bgcolor="#0099FF"

direction="left">ANIMASI MARQUEE(SCROLL)</marquee><br><br>

<marquee behavior="slide" bgcolor="#0099FF" >ANIMASI

MARQUEE(SLIDE)</marquee><br><br>

</body>

</html>

Membuat List

Ada 3 jenis list dalam dokumen html yaitu:

1. Ordered List “<ol>”

Tag <ol> adalah kependekan dari Ordered List, yang artinya list secara

berurutan. list yang ditampilkan nanti oleh tag ini akan menampilkan nomor

disebelah kiri dari detail.

<html>

<head>

</head>

<body>

TUGAS HARI INI ADALAH :

<ol>

<li>Memasak</li>

<li>cuci piring</li>

<li>mandi</li>

<li>sarapan</li>

<li>berangkat sekolah</li>

</ol>

</body>

</html>

Pada Ordered List “<ol>” secara default pengurutan akan diurutkan dengan

angka. Jika anda ingin mengurutkan dengan huruf/romawi maka anda tinggal

menambahkan atribut type pada tag <ol> contoh:

<html>

<head>

</head>

<body>

TUGAS HARI INI ADALAH :

<li>Memasak</li>

<li>cuci piring</li>

<li>mandi</li>

<li>sarapan</li>

<li>berangkat sekolah</li>

</ol>

</body>

</html>

Ketika script di atas di jalankan makan pengurutan list akan berubah,

pengurutan akan diurutkan dengan huruf.

2. Unordered List <ul>

Unordered List merupakan pengurutan list dengan menggunakan

symbol/bullet. Cara membuatnya sama dengan Ordered List hanya saja tag <ol>

diganti dengan tag <ul>. Contoh:

<html>

<head>

</head>

<body>

TUGAS HARI INI ADALAH :

<ul>

<li>Memasak</li>

<li>cuci piring</li>

<li>mandi</li>

<li>sarapan</li>

<li>berangkat sekolah</li>

</ul>

</body>

</html>

3. List tanpa bullet <dl>

Untuk membuat list tanpa mengunakan bullet/symbol caranya sama persis

dengan pembuatan list dengan tag ol/ul, hanya saja tag <ul> diganti dengan

<dl> lalu tag <li> diganti dengan <dd> contoh:

<html>

<head>

</head>

<body>

TUGAS HARI INI ADALAH :

<dd>Memasak</dd>

<dd>cuci piring</dd>

<dd>mandi</dd>

<dd>sarapan</dd>

<dd>berangkat sekolah</dd>

</dl>

</body>

</html>

Membuat Tabel Pada Dokumen HTML

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris. Umumnya

setiap kolom menunjukan data yang sejenis, dan setiap baris yang terdiri atas

kolom-kolom menunjukan kelompok data dalam satu kesatuan.

Untuk membuat tabel pada html menggunakan tag <table> dan di akhiri dengan tag

</table>

lalu di dalam sebuah tag <table> dan tag </table> dimasukan tag <tr> dan </tr>

yang bekerja sebagai baris pada tabel lalu di dalam sebuah <tr> dan </tr> terdapat

tag <td> dan </td> yang bekerja memberikan sebuah kolom pada tabel. Untuk

mengetahui garis tabel tersebut, kita menggunakan atribut 'border' pada tag table.

Contoh:

<html>

<head>

</head>

<body>

Daftar siswa

<tr>

<td>Jenis kelamin</td>

</tr>

<tr>

</tr>

<tr>

<td>Indah</td>

<td>perempuan</td>

</tr>

</table>

</body>

</html>

Menggabungkan Kolom dan Baris Pada Tabel

Untuk menggabungkan kolom dalam halaman html yaitu dengan menggunakan

colspan.

Contoh:

<html>

<head>

<title>Belajar Tabel</title>

</head>

<body>

<tr>

<td colspan="2">Colom yang di gabungkan</td>

</tr>

<tr>

<td>Colom 1, Baris 2</td>

<td>Colom 2, Baris 2</td>

</tr>

</table>

</body>

</html>

Sedangkan untuk menggabungan baris pada html yaitu dengan menggunakan

rowspan. Contoh:

<html>

<head>

<title>Belajar Tabel</title>

</head>

<body>

<tr>

<td rowspan="2">Baris yang di gabungkan</td>

<td>Colom 2 , Baris 1</td>

</tr>

<tr>

<td >Colom 2, Baris 2</td>

</tr>

</table>

</body>

</html>

Membuat Tabel di dalam Tabel

bagaimana membuat tabel didalam tabel ? Untuk membuat tabel di dalam tabel

pertama-tama yang harus dilakukan adalah buat dulu kerangkanya. Dibawah ini

adalah kode untuk membuat tabel pertama.

<html>

<head>

</head>

<body>

spesifik mawar

<table width="800px" height="300px" border="1px solid

black">

<tr>

</tr>

</table>

</body>

</html>

Selanjutnya membuat kerangka tabel kedua. Dibawah ini adalah kode untuk

membuat tabel kedua. Setelah membuat kerangka tabel kedua sisipkan tabel kedua

diantara tag <td>....</td> di tabel pertama.

<tr>

</tr>

</table>

Setelah itu kita masukan sebuah gambar pada tabel ke dua, masukan tag image

<img> diantara tag <td>...</td> di tabel kedua. Untuk lebih jelasnya lihat kode

berikut ini.

Sekarang kita tambahkan keterangan untuk gambar yang akan di tampilkan pada

halaman. Sebelum itu kita harus tambahkan dulu sebuah kolom/tag <td>...</td>

pada tabel ke 2. Lalu buat kerangka tabel ke 3 untuk keterangan gambar untuk lebih

jelasnya lihat kode di bawah ini:

<td>

<table width="550px" height="290px" border="1px

solid">

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

Setelah selesai membuat kerangka tabel ketiga, selanjutnya kita isikan keterangan

gambar di antara tag <td>....</td>. Untuk lebih jelasnya lihat kode dibawah ini:

Bab 3: Lebih dalam dengan HTML yang sesungguhnya

<td>

<table width="550px" height="290px" border="1px

solid">

<tr>

<td>mawar</td>

</tr>

<tr>

<td>kelopak berwarna merah, berduri, tangkai dan

daun berwarna hijau</td>

</tr>

<tr>

<td>cara bertahan</td>

<td>duri yang sangat tajam dan beracun berfungsi

untuk pertahanan diri</td>

</tr>

</table>

</td>

Berikut adalah coding lengkapnya....

<html>

<head>

</head>

<body>

spesifik Mawar

<tr>

<td>

<tr>

<td><img src="image.jpg" width="240px"

height="290px"></td>

<td>

<tr>

<td>nama spesies</td>

<td>mawar</td>

</tr>

<tr>

<td>kelopak berwarna merah, berduri,

tangkai dan daun berwarna hijau</td>

</tr>

<tr>

<td>cara bertahan diri</td>

<td>duri yang sangat tajam dan beracun

berfungsi untuk pertahanan diri</td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

</table>

</body>

live

Minggu, 23 September 2012

belajar HTML

Jumat, 25 Mei 2012

Ikhwan Idaman

Mengenai Saya