Mengenal Web Dengan HTML Murni

Kata-kata Web sebenarnya penyederhanaan dari sebuah istilah dalam dunia komputer yaitu WORLD WIDE WEB yang merupakan bagian dari tekhnologi Internet. World wide Web atau disingkat dengan nama www, merupakan sebuah sistem jaringan berbasis Client-Server yang mempergunakan protokol HTTP (Hyperteks Transfer Protocol) dan TCP/IP (Transmisson Control Protocol / Internet Protocol) sebagai medianya. Karena kedua sistem ini sedemikian erat hubungan nya, maka untuk saat ini sulit untuk membedakan antara HTTP dengan WWW, mungkin Anda punya pengertian yang lebih spesifik mengenai kedua istilah tersebut..?, Bila demikian berbagilah dengan yang lain melalui SSC Forum.
Pada awalnya Internet atau WEB hanya dipergunakan untuk kepentingan Militer yaitu suatu tekhnologi yang dipergunakan untuk mengirimkan pesan rahasia melalui satelit. Akan tetapi lama kelamaan tekhnologi tersebut akhirnya meluas, dan bahkan Internet pada saat ini sudah sama populernya dengan Telephone. Informasi yang dikirimkan lewat Internet dapat diakses keseluruh dunia hanya dalam hitungan menit bahkan detik. Sehingga tekhnologi ini menjadi sangat populer dan cepat sekali perkembangan nya. Boleh dikatakan saat ini Internet sudah tidak menjadi istilah yang asing lagi ditelinga. Suatu Informasi yang dikirimkan lewat Internet dapat berupa Teks, gambar maupun multimedia sehingga Internet juga dimanfaatkan oleh perusahaan-perusahaan untuk mempromosikan Produk-produknya dengan cepat dan mudah.

Informasi dari Internet dapat diakses
Keseluruh dunia hanya dalam hitungan detik.
Bahasa dasar dari pemrograman web yaitu HTML (Hyperteks Markup Language). Jadi sebelum Anda mempelajari bahasa pemrograman Internet yang lain seperti, PEARL, PHP, JAVASCRIPT, ASP dan lain sebagainya. Anda diharuskan menguasai dahulu teknik-teknik dasar pemrograman web yaitu HTML.
Untuk mempelajari HTML tidaklah begitu sulit, Karena HTML hanyalah sebuah bahasa yang berbasis teks dengan perintah-perintah yang mudah di ingat dan dimengerti oleh kita. Sehingga Anda tidak memerlukan sebuah Compiler (penerjemah bahasa pemrograman ke bahasa mesin) seperti bahasa-bahasa pemrogaman yang lain. Anda cukup menuliskan program-program HTML dengan teks editor apa saja seperti NOTEPAD atau yang sejenisnya, kemudian file itu Anda beri akhiran HTM atau HTML dan dijalankan atau dipanggil melalui sebuah program browser seperti, Internet Explorer, FireFox, Opera, Netscape dan sebagainya. File tersebut langsung diterjemahkan dan ditampilkan di monitor melalui program browser tersebut.
S E B U A H P E R M U L A A N

DOWNLOAD MODUL HTML LENGKAP DISINI

BELAJAR HTML

HTML (Hypertext Markup Language) adalah format dokumen yang digunakan pada World Wide Web. Struktur dasar dokumen HTML berisi elemen-elemen atau tag yang wajib ada, yaitu :
<html>
<head>
<title> -Judul bar browser- </title>
</head>
<body>
Isi yang akan ditampilkan pada browser terletak pada tag <body> dan </body>
</body>
</html>
Heading
Heading ditampilkan dengan font yang besar dan tebal daripada teks normal.
<h1>heading level 1</h1>
<h2>heading level 2</h2>, dst sampai level 6.
Paragraf
Untuk membuat paragraph baru digunakan tag <p> diakhiri dengan </p>
List
HTML mendukung list tidak bernomor, bernomor, dan definisi.

a. Untuk membuat daftar tidak bernomor gunakan <ul>,<li> dan </ul>
Contoh :
<ul>
<li>HTML
<li>PHP
<li>MySQL>
</ul>

b. Untuk membuat daftar bernomor gunakan <ol>,<li>, dan </ol>
Contoh :
<ol>
<li>HTML
<li>PHP
<li>MySQL>
</ol>


c.Untuk membuat daftar definisi digunakan <dl>,<dt>,<dd> dan </dl>
Contoh :
<dl>
<dt>HTML
<dd> HTML (Hypertext Markup Language) adalah format dokumen yang digunakan pada World Wide Web.
</dl>
Dalam <dt> maupun <dd> bisa terdiri dari beberapa paragraph atau list lainnya. Atribut “compact” dapat dipakai untuk dt (definition terms) yang sangat pendek.
<dl compact>
<dt>-i
<dd> HTML (Hypertext Markup Language) adalah format dokumen yang digunakan pada World Wide Web.
<dt>-k
<dd> HTML (Hypertext Markup Language) adalah format dokumen yang digunakan pada World Wide Web.
</dl>
List dapat dibuat bertingkat, misalnya :
<ul>
<li>Bahasa Pemrograman :
<ul>
<li>Pascal
<li>Delphi
<li>PHP
</ul>
<li>Aplikasi Database :
<ul>
<li>MySQL
<li>PostgreSQL
<li>Access
</ul>
</ul>
Preformated Text
Dalam HTML, spasi, tabs dan baris baru (enter) tidak mempunyai pengaruh. Agar format tampilan sesuai dengan source-nya maka diperlukan tag <PRE>
Contoh :
<pre>
Nama : Devictor
Tgl Lahir : 30 Desember 1989
</pre>
Extended Quotations
Untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam, digunakan tag <blockquote>
Contoh :
<blockquote>
<p> Untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam, digunakan tag <”blockquote”></p>
</blockquote>
Ganti Baris (line breaks)
Untuk menulis surat dengan baris-baris pendek, akan lebih baik menggunakan tag <br> untuk ganti baris.
Contoh :
Devictor<br>
Purworejo, Jawa Tengah <br>

GARIS HORISONTAL
Untuk membuat garis horizontal menggunakan tag <hr> dan dapat diikuti dengan atribut “size” dan “width”.
Contoh : <hr size=4 width=”100%”>

MEMFORMAT KARAKTER
<b> atau <strong> untuk membut teks tebal
<i> atau <em> untuk membuat teks italic
<tt> atau <code> untuk membuat teks typewriter, yakni font dengan lebar tetap.

MEMBUAT LINK
Dimulai dengan tag pembuka, yaitu <a (beri spasi sesudah huruf a)
Tentukan alamat atau dokumen yang dituju oleh link, yaitu href=”filename” diikuti tanda >.
Tuliskan teks yang melayani ebagai hypertext.
Akhiri dengan tag penutup </a>
Contoh : <a href=”http://www.phpeveryday.com>kumpulan source php</a>

1.Relative dan Absolute Link
Link pada suatu dokumen direktori lain dapat dibuat dengan menentukan relative path dari posisi sekarang. Misalnya dokumen isi.html dalam direktori produk dapat di link dengan cara :
<a href=”produk/isi.html”>Daftar Produk</a>
URL dokumen secara lengkap (absolute path) dapat dipakai untuk menentukan tujuan link, misalnya :
<a href=”C:\sadat\produk.html”>produk</a>
2. Link ke satu bagian di dokumen lain
Cara me-link dari dokumen pertama (satu.html) ke bagian lain (misal : bab tiga) yang terdapat pada dokumen lain (dua.html) adalah :
Pada dokumen satu.html dituliskan : <a href=”dua.html#bt>Bab Tiga</a>
Pada bagian Bab Tiga dari dokumen dua.html dituliskan : <a name=”bt”>Bab Tiga</a>
3. Link ke suatu bagian di dokumen yang sama
Contoh :
Pada bagian yang memuat hypertext : <a href=”#bt”>Bab Tiga</a>
Pada bagian yang dituju hypertext : <a name=”bt”>Bab Tiga</a>
4.Mailto
Untuk menghubungkan ke alamat email. Contoh :
<a href=”mailto:kangsadat@yahoo.com>Kirim Email</a>
MEMASUKKAN GAMBAR
Untuk memasukkan gambar ke dalam dokumen HTML digunakan perintah <img src=nama file gambar>. Contoh : <img src=”gambar.jpg”> akan menampilkan file gambar.jpg.
1.Atribut Ukuran Gambar
Contoh : <img src=”gambar.jpg” height=200 width=75>
2. Pelurusan Gambar
Teks sebelahnya lurus ke atas : <img src=”gambar.jpg” align=top>
Teks sebelahnya lurus ke tengah : <img src=”gambar.jpg” align=center>
Teks sebelahnya lurus ke bawah(default) : <img src=”gambar.jpg” >
Gambar saja (teks berikutnya di bawah) : <p align=center><img src=”gambar.jpg”></p>
3. Teks alternative untuk gambar
Untuk mengganti gambar yang tidak Nampak, mungkin dikarenakan browser tidak bisa menampilkan gambar bisa diberi alternative teks untuk member keterangan gambar dengan cara :
<a href=”gambar.jpg” alt=”gambar aku”>
4.Atribut border dan spasi
Garis tepi yang mengelilingi gambar dapat diatur kemunculannya maupun ukurannya. Bila atribut “border” tidak dituliskan, maka gambar yang ditampilkan tanpa garis tepi. Contoh : <img src=”gambar” border=10>. “border=10” menunjukkan nilai border dalam pixel.
Untuk mengatur spasi atau jarak antara ambar dan teks sebelahnya, digunakan tag : HSPACE (jarak gambar dan teks di kanan atau kirinya) dan VSPACE (jarak gambar dg teks di atas atau bawahnya). Contoh : <img src=”gambar.jpg” hspace=100 vspace=100>
5. Gambar sebagai hyperlink
Contohnya : <a href=”http://gmail.com”><img src=”gambar.jpg”>Email Google</a>
6. Gambar sebagai background
Dimasukkan sebagai atribut pada tag “body”. Contoh : <body background=”gambar.jpg”>
7. Background Warna
Secara default browser menampilkan teks warna hitam dan background warna putih. Warna tersebut dapat diubah dengan membrikan atribut pada tag body. Contoh : <body bgcolor=”#000000” text=”#ffffff” link=”#9690cc”>
8. Gambar, suara, dan animasi eksternal
Sebuah gambar (umumnya berukuran besar) dapat dibuka sebagai dokumen terpisah yang di link melalui teks maupun gambar versi kecil. Hal ini disebut dengan gambar eksternal yang bermanfaat mempercepat proses download dokumen utama. Untuk membuat link ke gambar eksternal adalah : <a href=”gambar.jpg”>Link gambar eksternal</a>.
Link ke gambar eksternal dapat pula dibuat melaui gambar versi kecil, yaitu : <a href=”foto besar.jpg”><img src=”foto kecil.jpg></a>
Pada dokumen utama ditampilkan gambar versi kecil, kemudian bila hyperlink diaktifkan akan ditampilkan gambar besar. Dngan cara yang sama dapat dibuat link ke animasi atau sound eksternal, misalnya : <a href=”animasi.avi”>link ke animasi eksternal</a>