Modul HTML 2011 PDF

Kata Pengantar
Segala Puji dan Syukur selalu penyusun panjatkan kehadirat Allah SWT karena atas Doa serta limpahan
Rahmat dan Hidayah-NYA penyusun dapat menyelesaikan modul ini.
Melalui modul ini, penyusun berusaha mengenalkan dasardasar dari HTML, PHP dan MySQL untuk
membangun suatu situs web. Buku ini sebagian besar menyajikan berbagai contoh program yang disusun
secara terstruktur dari tingkat dasar, menengah, sampai yang kompleks.
Dengan adanya contohcontoh program tersebut, diharapkan pembaca dapat mempraktekkannya secara
langsung dan dapat menyimpulkan sendiri maksud dari setiap perintah dalam program dengan cara melihat
hasil yang ditampilkan di layar browser di akhir buku ini, disajikan contoh yang lebih nyata, yaitu aplikasi situs
berita sederhana yang dapat dikembangkan lebih lanjut.
Akhirnya penyusun berharap agar modul ini bermanfaat bagi anda yang sedang mempelajari, khususnya
dalam hal pemrograman web dan internet. Saran dan kritik untuk perbaikan buku ini sangat penyusun
harapkan.
Penyusun menyadari bahwa modul ini masih jauh dari sempurna dan akan terus diperbaiki. Akhir kata
Jangan pernah lelah untuk belajar , kritik dan masukan mengenai modul ini dapat disampaikan melalui
website penyusun : www.arul-id.com anda dapat mendownload beberapa contoh script yang mungkin
berguna bagi pengembangan website anda.
[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

BAB I
HTML (HYPERTEXT MARKUP LANGUAGE)
Tujuan :
1. Memahami tentang konsep WWW
2. Memahami tentang struktur dokumen HTML
3. Memahami tentang dasar-dasar HTML
4. Memahami tentang pengaturan teks, daftar item, gambar, tabel, form, meta.
A. World Wide Web

Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di
seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh
dunia untuk dapat berkomunikasi.
World Wide Web (WWW) merupakan bagian dari internet yang paling cepat berkembang dan paling
populer. WWW bekerja merdasarkan pada tiga mekanisme berikut:
Protocol
standard aturan yang di gunakan untuk berkomunikasi pada computer
networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.
Address
WWW memiliki aturan penamaan alamat web yaitu URL(Uniform Resource
Locator) yang di gunakan sebagai standard alamat internet.
HTML
digunakan untuk membuat document yang bisa di akses melalui web.
B. Pengenalan HTML
Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan document
web, yang bisa anda lakukan dengan HTML yaitu:
Mengontrol tampilan dari web page dan contentnya.
Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.
Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi
secara online.
Menambahkan object-object seperti image, audi, video dan juga java applet dalam document
HTML.
C. Browser dan Editor

Browser
Browser merupakan software yang di install di mesin client yang berfungsi untuk
menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya
Internet Explorer, Netscape Navigator dan masih banyak yang lainya.
Editor
Program yang di gunakan untuk membuat document HTML, ada banyak HTML editor yang bisa
anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.

DASAR-DASAR HTML
Struktur HTML Document

Document HTML bisa di bagi menjadi tiga bagian utama:
HTML
Setiap document HTML harus di awali dan di tutup dengan tag HTML
<HTML> </HTML>
HEAD
Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini
biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya browser.
Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu
mengenai document HTML, anda bisa menentukan author name, keywords, dan lainyan pada
tag META.
TITLE
Title sendiri berfungsi untuk pemberian judul pada sebuah halaman website
BODY
Document body di gunakan untuk menampilkan text, image link dan semua yang akan di
tampilkan pada web page.
Berikut adalah struktur HTML :
<html>
<head>
<title> . Judul. </title>
</head>
<body>
.Isi body..
</body>
</html>
Script yang pertama
Untuk penulisan script baik itu HTML,CSS,PHP dan lain-lain anda dapat menggunakan text editor seperti
Notepad,FrontPage, Dreamwaver, dan sejenisnya.
Dicontohkan kita akan menggunakan Notepad sebagai Text editor untuk penulisan Syntak HTML, silakan
ketikan script HTML seperti dibwah ini :

Jika sudah Silakan simpan script tersebut pada directory D, dan anda beri nama intro.html
Dan berikut adalah hasilnya :
Judul yang di buat dengan tag <title>
Isi dari halaman web

pada tag <body>

BAB 1 Format Halaman dan Paragraf
1.1. Structural
Yaitu tanda yang menentukan level atau tingkatan dari sebuah text
Contoh:
<h1>D3 Sistem Informasi</h1>
Akan Memberi Tampilan sbb:
Untuk Tingkatan Level dari Structural
<h1> . </h1>
<h2> </h2>
<h3> . </h3>
<h4> . </h4>
<h5> . </h5>
<h6> . </h6>
1.2. Presentational
Yaitu tanda yang menentukan tampilan dari sebuah text
Contoh:
<b> Ini huruf tebal </b>

<i> Ini huruf miring </i>
<u> Ini bergaris bawah </u>
<s> Ini Mencoret Text </s>
Attribut Description
<b> Bold (Huruf Tebal)
<i> Italic (Huruf Miring)
<u> Underline (Garis Bawah)
<sup> Pangkat
<sub> Index bawah
<s> Mencoret text
1.3. Hypertext, yaitu tanda yang menunjukan (link) ke bagian dokumen lain.
Contoh:
<a href=http://www.dcc.ac.id> Website DCC </a>

1.4. Pindah Baris dan Paragraf
Tag <br> berfungsi sebagai ganti baris pada halaman HTML , <br> akan memberikan effect ganti
baris sebanyak satu baris, sedangkan <P> berfungsi sebagai ganti paragraf.
<P>
Kalimat .. <br>
Kalimat .. <br>
</P>
1.5. Elemen Widget, yaitu tanda yang membuat objek-objek lain, seperti list dan garis
Ada dua macam list yang bisa anda tambahkan ke document HTML:
1. Unordered List (Bullet) :

2. Ordered List (Numbering)
Unordered List (Bullet)

Tag Attribute Value Description
<UL> TYPE SQUARE Bullet Kotak
DISC Bullet Titik
CIRCLE Bullet Lingkaran
Ordered List (Numbering)
Tag Attribute Value Description
<OL> TYPE Ii Upper Roman Lower Roman
Aa Upercase Lowercase
<OL> START n Begin Number
a. Bullet & Numbering

Contoh:
<ul>
<li> MI </li>
<li> KA </li>
<li> ABA </li>
</ul>
<B>Dengan huruf kapital:</B>

<OL TYPE = "A">
<LI>Yogya</LI>
<LI>Solo</LI>
</OL>
<HR>
<B>Dengan angka romawi:</B>
<OL TYPE = "i">
<LI>Yogya</LI>
<LI>Magelang</LI>
</OL>

1.6. Horizontal Rule
Tag <hr> digunkan untuk menciptakan garis horizontal , sebagai pembatas judul dengan isi.
<html>
<head>
<title> Belajar HTML </title>
</head>
<body>
<h1>DASAR HTML</h1>
<hr >
Selamat Pagi, Mari belajar HTML, ini
adalah contoh penggunaan tag hr untuk
membuat garis
</body>
</html>
1.7. Ukuran Font

Tag <Font>..</Font> dengan Tag ini anda dapat mengubah-ubah ukuran Font dan jenisnya
Contoh:
<Font Size='1'> Ini ukuran Fontnya=1 </font>

<Font Size=4 face="Calibri color=Red> Ini ukuran Fontnya=4 dan berwarna merah</font>
Attribut Description
Color Menentukan warna Font
Size Menentukan ukuran huruf dari 1 7
Face Menentukan jenis huruf

1.8 . Effect
Ada beberapa efek animasi sederhana yang bias anda gunakan diantranaya adalah marquee dan
blink, Marquee sendiri akan menghasilkan efek tulisan berjalan sedangkan Blink akan menghasilkan efek
tulisan berkedip.
<marquee> SELAMAT DATANG DI SITUS DCC LAMPUNG </marquee>
<blink> SELAMAT DATANG DI SITUS DCC LAMPUNG </blink>

Marquee Properties
Attribute Value Description
Behavior alternate Teks bergerak ke kanan/kekiri
scroll Teks bergerak terus menerus
slide Teks bergerak sekali
Attribute Value Description
Direction Left Kiri
Top Atas
Down Bawah
Right Kanan
1.9. Menyisipkan Image

Tag <img> digunakan untuk menyisipkan image ke dalam HTML
Contoh:
<img src=dewi.jpg>
atau
<img src="dewi.jpg" width="300" height=300>
atau
<div align=Center> <img src="dewi.jpg" width="300" height=300></div>

1. 10. Aligement
Menentukan Posisi perataan dalam object HTML baik Text, Gambar dan lain-lain.
<FontSize=4 align=center> DCC LAMPUNG</font>

atau untuk gambar
<div align=Center><img src=Photo.jpg></div>
Value Description
Left Rata Kiri
Right Rata Kanan
Center Rata Tengah
Justify Rata Kanan Kiri

BAB 2 Menggunakan Table dan Pengaturanya
2.1. Mengenal Table

Tabel merupakan salah satu komponen utama dalam pembuatan website, Tabel sendiri merupakan
kerangka untuk meletakan content content isi sebuah web. Dalam pembuatan sebuah website kita
tidak bias lepas dari komponen yang satu ini selain untuk meletakan content table sendiri berfungsi utuk
merapihkan halam website agar terlihat lebih proposional.
2.2. Membuat Tabel
Sebelum membuat sebuah Tabel ada baiknya kita mengenal komponen apa saja yang ada pada table
<TABLE> untuk pembuatan tabel, dengan atribut BORDER utk memberi bingkai.
<TR> membuat baris dalam tabel
<TH> membuat judul kolom
<TD> membuat sebuah sel data
Berikut contoh table :

<table border="1" >
<tr >
<td >No</td>
<td >Nama Dosen</td>
<td >Alamat</td>
<td >Mata Kuliah</td>
</tr>
</table>
Atau anda ingin menengahkan, mengatur lebar table, cukup tambahkan syantak dibawah ini :
<table border="1" align="center">

<tr align="center">
<td width="40">No</td>
<td width="200">Nama Dosen</td>
<td width="140">Alamat</td>
<td width="170">Mata Kuliah</td>
</tr>
</table>
Colspan
Berfungsi untuk menggabungkan kolom pada tabel
<table border="1" align="center">

<tr align="center">
<td colspan="4">DAFTAR NAMA DOSEN</td>
</tr>
<tr align="center">
<td width="40">No</td>
<td width="200">Nama Dosen</td>
<td width="140">Alamat</td>
<td width="170">Mata Kuliah</td>
</tr>
</table>
11. Background
Berfungsi untuk pemberian dasar latar Background dapat berupa gambar maupun warna, cukup sisipkan
tag berikut ini pada tag body.
<Html> <Html>
<Head> <Head>
<Title> Belajar HTML </Title> <Title> Belajar HTML </Title>
</Head> </Head>
<body Background=seminar.jpg> <body bgcolor=red>
</body> </body>
</Html> </Html>

12. Background Sound
<bgsound src="a.mp3">
PENGGUNAAN TAG META

Ditempatkan dalam bagian header, dan biasanya diletakkan setelah </TITLE>.
Digunakan untuk menyimpan sejumlah informasi.
Contoh :
1. Jika anda membuat dokumen HTML melalui FrontPage 2000 akan muncul tag meta sebagai
berikut :
<META NAME=Generator CONTENT=Microsoft FrontPage 4.0>
2. Agar halaman web yang dibuat disertakan ketika mesin pencari web (mbah Google) melakukan
pencarian, gunakan atribut keywords, semakin banyak keywords yang dimasukkan, akan
semakin besar halaman web disebutkan dalam hasil pencarian.
<META NAME=keywords CONTENTS=teknologi, komputer, telekomunikasi>
3. Mengarahkan ke halaman lain
<HTML>
<HEAD>
<TITLE>PENGALIHAN HALAMAN </TITLE>
<META HTTP-EQUIV = "REFRESH" CONTENT = "5; URL = baru.htm">
</HEAD>
<BODY>
Halaman ini telah dipindah, anda akan diindahkan ke halaman
baru tersebut dalam waktu 5 detik.
</BODY>
</HTML>

ELEMEN FORM
Kegunaan Form Yaitu mengirimkan data dari user ke server dan selanjutnya server akan melakukan
proses sesuai dengan program yang dibuat terhadap data tersebut. Beberapa atribut-atribut dalam form
diantaranya:
TYPE CONTOH SCRIPT TAMPILAN

TEXT <input type=text name=nama>
Radiobutton <input type=radio name=jns_kelamin>

CheckBox <input type=checkbox name=hobi>
Textarea <Textarea name=textarea>Isi</textarea>
Submit <input type=submit name=submit

value=kirim>
List Menu <select name=ps>
<option>MI</option>
<option>KA</option>
<option>ABA</option>
</select>
File Field <input type=file name=file>
Kegunaan Form
Berikut ini beberapa contoh kegunaan Form dalam web:
1. memperoleh data-data user baik nama, alamat dan data lainnya
2. memperoleh informasi pembelian secara online
3. memperoleh feedback dari user mengenai website anda.
Form Element
Tag <FORM> digunakan untuk membuat form dalam document HTML.

Attribute Description
ACCEPT Mendefinisikan MIME yang di izinkan oleh server yang memuat script
untuk memproses form.
Syntax:
ACCEPT=Internet Media Type
METHOD Menentukan bagaimana data akan di kirim ke server. GET data akan di
kirim
dengan menggunakan query string pada URL.
POST data akan di kirim ke server sebagai block data ke script.
Syntax:
METHOD=POST|GET
ACTION Menentukan lokasi dari script yang akan memproses data dari form
Syntax:
ACTION=URL

Modul HTML 2011 PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul HTML 2011 PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

Kata Pengantar

[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

A. World Wide Web

C. Browser dan Editor

[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

Struktur HTML Document

Berikut adalah struktur HTML :

Script yang pertama

[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

Dan berikut adalah hasilnya :

Judul yang di buat dengan tag <title>

Isi dari halaman web

[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

Untuk Tingkatan Level dari Structural

<b> Ini huruf tebal </b>

[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

1. Unordered List (Bullet) :

Unordered List (Bullet)

a. Bullet & Numbering

<B>Dengan huruf kapital:</B>

[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

1.7. Ukuran Font

<Font Size='1'> Ini ukuran Fontnya=1 </font>

[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

<marquee> SELAMAT DATANG DI SITUS DCC LAMPUNG </marquee>

<blink> SELAMAT DATANG DI SITUS DCC LAMPUNG </blink>

1.9. Menyisipkan Image

[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

<FontSize=4 align=center> DCC LAMPUNG</font>

[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

2.1. Mengenal Table

2.2. Membuat Tabel

Berikut contoh table :

<table border="1" align="center">

<table border="1" align="center">

[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

PENGGUNAAN TAG META

[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

TYPE CONTOH SCRIPT TAMPILAN

Radiobutton <input type=radio name=jns_kelamin>

Textarea <Textarea name=textarea>Isi</textarea>

Submit <input type=submit name=submit

[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

[ Pemerograman Berbasis Web | Arul 2010 ] www.arul-id.blogspot.com

Anda mungkin juga menyukai