1.1. Latar
Belakang
Internet merupakan salah satu wujud dari
perkembangan teknologi informasi yang memberikan kemudahan bagi manusia
untuk mendapatkan informasi dari berbagai belahan dunia. Informasi
melalui internet ini disajikan dalam bentuk website. Sehingga penyajian
informasi melalui internet berupa website tentu bukan suatu hal yang
asing lagi bagi masyarakat dewasa ini.
Website cukup dikenal oleh masyarakat
khususnya bagi para pengguna internet yang membutuhkan informasi secara
praktis dan dinamis dimanapun dan kapanpun dibutuhkan. Oleh karena itu,
banyak pengguna internet yang tidak hanya sebagai pengguna saja
melainkan juga ingin menciptakan sebuah website pribadi yang dapat
diakses oleh pengguna internet lain. Dan tentu dalam hal ini mereka
harus mengetahui bagaimana cara menciptakan sebuah website yang layak
untuk dipublikasikan dikalangan masyarakat luas.
Untuk menyajikan suatu informasi melalui
internet berupa website, dibutuhkan suatu keahlian khusus, dimana
informasi yang akandisampaikan harus ditata sedemikian rupa sehingga
publik tertarik dan memiliki motivasi untuk menyimak informasi yang
disampaikan. Media utama yang dipakai sebagai jendela informasi adalah
layar komputer yang dkontrol atau dikendalikan oleh berbagai merek dan
jenis komputer yang berbeda Operating System-nya. Tetapi Webmaster
mengharapkan agar informasi yang disajikan dapat dilihat sesuai dengan
hasil rancangannya, dimana saja dan dengan komputer jenis apapun.
Sehingga, untuk mencapai tujuan tersebut, maka dirancang salah satu
bahasa pengantar pemrograman untuk internet yang diberi nama Hyper Text
Markup Language yang disingkat dengan HTML.
Untuk menjadi seorang Webmaster, maka diharuskan bagi para pengguna
internet untuk memahami pemrograman dengan HTML agar dikemudian hari
dapat mengendalikan dan mengatur Website yang dibuat. Website yang baik
adalah Website yang dinamis yakni yang
dapat berinteraksi dengan pengunjungnya (User/Quest). Membuat Website
dinamis makaharus berurusan dengan HTML.
Hyper Text Markup Language (HTML)
didefinisikan sebagai sebuah bahasa markup yang digunakan untuk membuat
sebuah halaman website dan menampilkan berbagai informasi di dalam
sebuah browser internet. Definisi HTML tersebut mengisyaratkan bahwa
bahasa Hyper Text Markup Language (HTML) merupakan unsur pokok dalam
pembuatan sebuah website agar dapat menampilkan informasi yang sesuai
dengan maksud webmaster.
Dengan menggunakan bahasa HTML ini, maka
koneksi antar komputer dapat terwujud karena bahasa HTML didukung oleh
fasilitas dan perangkat komunikasi. Sarana komunikasi yang dimaksud ini
menggunakan standar komunikasi yang dinamakan Hyper Text Transfer
Protocol (HTTP). Dengan menggunakan HTTP, maka semua komputer dalam
Website akan dapat berkomunikasi antara yang satu dengan yang lainnya,
sehingga jarak dan waktu tidak lagi menjadi hambatan untuk memperoleh
informasi yang telah tersedia pada komputer server (pelayanan).
Oleh karena itu, dalam karya ilmiah ini
akan dijelaskan kelebihan-kelebihan bahasa HTML daripada bahasa-bahasa
program Website Designer yang lain. Sekaligus akan dipaparkan bagaimana
proses implementasi program datanya hingga menjadi sebuah website yang
baik dan juga akan dibahas mengenai langkah-lang untuk membuat website
sederhana.
1.2. Rumusan
Masalah
Makalah ini merumuskan beberapa
permasalahan sebagai berikut:
- Apa pengertian program dan pemrograman?
- Apa yang dimaksud dengan websaite?
- Apa yang di maksud dengan HTML?
- Bagaimana langkah-langkah membuat website sederhana?
1.3. Ruang
Lingkup
Dalam makalah ini, penulis membatasi
masalah yang akan dibahas pada materi kuliah Pemrograman Terstruktur.
Pembahasan lebih dikhususkan pada Pemrograman Website Sederhana
Menggunakan HTML. Hal tersebut dimaksudkan untuk mempertegas pembahasan
sehingga dapat terfokus pada masalah yang akan di bahas serta dapat
memberikan gambaran umum tentang isi makalah sehingga pembaca lebih
mudah mempelajarinya.
1.4. Maksud dan
Tujuan
Maksud dari penyusunan tugas ini adalah
untuk memenuhi dan melengkapi salah satu tugas mata kuliah Pemrograman
Terstruktur di Bina Sarana Informatika. Sedangkan tujuan dari penulisan
tugas ini adalah:
- Menerapkan teori yang didapat selama belajar di Bina Sarana Informatika.
- Mengembangkan kreativitas dan wawasan penulis.
- Memberikan uraian tentang Pemrograman Website Sederhana menggunakan HTML.
1.5. Metode
Pengumpulan Data
Untuk memperoleh data yang diperlukan
dalam penyusunan tugas ini, penulis menggunakan metode sebagai berikut :
1. Metode Studi Pustaka
Metode yang dilakukan dengan membaca
buku-buku serta referensi-referensi yang berkaitan dengan masalah yang
dibahas dalam tugas ini. Penulis membaca modul Web Programing yang
berkaitan dengan HTML.
2. Metode Browsing Internet
Metode yang dilakukan dengan browsing
atau membaca atau mencari referensi-referensi yang berkaitan dengan
masalah yang dibahas dalam tugas ini di internet.
1.6. Sistematika
Penulisan
Untuk memudahkan pembaca dalam
mempelajari dan mengetahui isi makalah ini, penulis memberikan uraian
singkat mengenai gambaran pada masing-masing bab melalui sistematika
penulisan yaitu :
BAB I PENDAHULUAN
Dalam bab ini, penulis menguraikan
tentang latar belakang penulisan, maksud dan tujuan serta metode-metode
yang digunakan dalam pengumpulan data untuk menyusun tugas ini. Selain
itu, penulis juga menguraikan mengenai ruang lingkup permasalahannya
yang dibahas dan sistematika penulisan.
BAB II PEMBAHASAN
Pada bab ini, penulis menguraikan
tentang materi-materi yang akan dibahas karena bab ini merupakan bab
utama dari makalah ini. Dalam bab ini penulis menguraikan tentang
program dan pemrograman, pengertian website, perkembangan website,
kriteria web dan keamanan web, cara kerja website, pengertian HTML,
struktur HTML, tag HTML, kelebihan HTML, dan implementasi pada HTML,
sekaligus akan dibahas mengenai langkah-langkah membuat website
sederhana.
BAB III PENUTUP
Dalam bab ini, penulis menguraikan
tentang kesimpulan-kesimpulan dari masalah yang dibahas serta
saran-saran yang penulis ajukan guna perbaikan selanjutnya.
BAB II
PEMBAHASAN
2.1. Program dan
Pemrograman
Program adalah kata, ekspresi,
pernyataan atau kombinasi yang disusun dan dirangkai menjadi satu
kesatuan prosedur yang berupa urutan langkah untuk menyelesaikan masalah
dan diimplementasikan dengan menggunakan bahasa pemrograman sehingga
dapat dieksekusi oleh komputer.
Pemrograman yaitu rangkaian instruksi –
instruksi dalam bahasa komputer yang disusun secara logis dan
sistematis. Proses pemrograman komputer bertujuan untuk memecahkan suatu
masalah dan membuat mudah pekerjaan dari user (pengguna
komputer).
2.2. Pengertian Website
Website dapat
diartikan sebagai kumpulan halaman-halaman yang digunakan untuk
mempublikasikan informasi berupa teks, gambar dan program multimedia
lainnya berupa animasi (gambar gerak, tulisan gerak), suara, dan atau
gabungan dari semuanya itu baik yang bersifat statis maupun dinamis yang
membentuk satu rangkaian bangunan yang saling terkait antara satu page
dengan page yang lain yang sering disebut sebagai hyperlink.
2.2.1. Perkembangan
Websit
Perkembangan teknologi informasi yang kian pesat memacu munculnya
situs baru yang dapat diakses melalui jaringan internet. Data dari
survey yang dilakkukan oleh Netcraft
(http://news.netcraft.com/archives/web_server_survey.html) menunjukkan
bahwa sampai pada bulan Maret 2008 ini jumlah website telah mencapai
angka 162.662.052 situs dengan 4,5 juta situs baru pada bulan ini. Hal
ini memungkinkan jumlah situs baru pada tahun 2008 ini mencapai 60 juta
situs atau meningkat 20% dari perkembangan tahun 2007 yang mencapai 50
juta situs baru. Perkembangan jumlah situs ini tidaklah mengherankan
karena semakin banyaknya orang yang melakukan blogging baik melalui
Google, blogspot.com, ataupun MySpace.Namun demikian, situs yang
benarbenar aktif pada bulan Maret 2008 hanyalah 65,6 juta atau 40,33%
dari jumlah total situs. Dengan perkembangan jumlah situs yang luar
biasa besar ini menuntut para pemrogram web (web programmer)
untuk selalu berkreasi menciptakan ideide baru baik dalam desain layout,
penggunaan aplikasi server web, maupun operating system yang
dipakai, agar situs yang dibangunnya tidak kandas dalam persaingan.
Perkembangan ini juga membuka peluang kerja yang sangat signifikan dalam
bidang web programming tidak hanya bagi lulusan IT namun juga bagi
mereka yang mau bekerja keras untuk selalu ‘mengoprek’.
2.2.2. Kriteria
Web dan Aspek Keamanan Web
Website yang baik harus memenuhi
kriteria dalam aspek fungsionalitas, desain, konten, orisinalitas,
profesionalisme dan keefektivan. Sesuai dengan kriteria dalam
penghargaan website terbaik tingkat dunia (World Best Website
Awards), aspek fungsionalitas yang dinilai meliputi: keteraksesan,
kecepatan dan bandwidth, kualitas HTML, navigasi dan link, dan
legalitas. Sedangkan dalam aspek desain, sub aspek yang dinilai adalah
desain grafis, user friendliness, beauty, layout,
dan integritas. Dari segi konten, termasuk aspek yang dinilai adalah
tujuan, interaktivitas manusia, proses informasi, ekspresi verbal,
ketersediaan konten secara detail. Dalam aspek orisinalitas, sub aspek
yang dinilai adalah inovasi, kreativitas, teknologi, dan visi. Untuk
aspek profesionalisme dan keefektivan meliputi customer service dan
respon client, nilai, focus, komponen tambahan, dan keefektifan situs
secara keseluruhan. Kriteriakriteria tersebut dinilai untuk penilaian
level 1. Untuk penilaian level berikutnya asek yang paling penting
adalah sekuritas server dan rangking search engine. Dengan
demikian aspek-aspek tersebut di atas dapat dijadikan acuan dalam
pembangunan sebuah website yang baik, sehingga peran programer web dalam
hal ini sangat penting.
2.2.3. Cara
Kerja Website
Pada saat kita mengetikkan sesuatu
alamat pada browser maka data akan dilewatkan oleh suatu protokol HTTP
melewati port 80 pada server. Alamat ini adalah URL dari suatu situs
yang mempunyai alamat yang unik di internet. Web Browser akan
mengirimkan suatu aturan yang telah disepakati sebelumnya, aturan ini
biasa disebut protokol, standar protokol menggunkan TCP / IP, proses ini
dimulai dengan melakukan 3 way handshake antara sumber dan tujuan.
Web browser, suatu aplikasi client yang
akan menampilkan halaman web sites dari internet. Web browser di install
disisi user ( OS ) menampilkan informasi ke komputer dengan
interpreting bahasa pengkodean HTML, dimana homepage berisi gambar,
suara, multimedia, dan resources lainnya yang dapat diakses. File coding
pada HTML memberikan datanya ke browser apa yang akan ditampilkan ke
sisi client. Isi HTML yang akan ditampilkan bukan dari browsernya tetapi
dari web servernya dan browser akan menginterpret tag HTML untuk link
ke halaman berikutnya.
2.3. HTML
HTML (Hyper Text Markup Language) adalah
suatu bahasa yang digunakan untuk menulis halaman web. HTML dirancang
untuk digunakan tanpa tergantung pada suatu Platform tertentu (Platform
independent). Dokumn HTML adalah suatu teks biasa, dan disebut sebagai
Markup Language karena mengandung tanda-tanda (tag) tertentu yang
digunakan untuk menentukan tampilan suatu teks dan tingkat kepentingan
dari teks tersebut dalam suatu dokumen. Pada dokumen HTML yang termasuk
system hypertext, kita tidak harus membaca dokumen tersebut secara urut
dari atas kebawah atau sebaliknya, tetapi kita dapat menuju pada topic
tertentu secara langsung dengan menggunakan teks penghubung yang akan
membawa anda kesuatu topik atau dokumen lain secara langsung.
HTML (Hyper Text Markup Language) adalah
bahasa yang digunakan untuk menulis halaman web, ciri utama dokumen
HTML adalah adanya tag dan elemen, Elemen dalam dokumen HTML
dikatagorikan menjadi dua yaitu elemen <HEAD> yang berfungsi
memberikan informasi tentang dokumen tersebut dan elemen <BODY>
yang menentukan bagaimana isi suatu dokumen ditampilkan di dalam
browser. Sedangkan tag dinyatakan dengan tanda lebih kecil ”<” (tag
awal) dan lebih besar ”>” (tag akhir). Dalam penggunaannya sebagian
kode HTML tersebut harus terletak diantara tag kontainer, yaitu diawali
dengan <nametag> dan diakhiri dengan </nametag> (tersapat
tanda ”/”). Untuk membuat dokumen diperlukan program penyutingan teks
(Noteped, Eordpad, Ms Word,dll), dan suatu program browser (Notscape,
Internet Explorer).
Dokumen HTML terbagi 3 tag utama yang
membentuk struktur dokumen HTML, HEAD dan BODY. HTML berfungsi untuk
menyatakan suatu dokumen HTML, tag HEAD berfungsi untuk memberikan
informasi tentang dokumen HTML dan tag BODY berfungsi untuk menyimpan
informasi data yang akan ditampilakan dalam dokumen HTML.
2.3.1. Struktur
HTML
<html> sebagai tanda awal dokumen
HTML
<head>
****** Bagian HEAD ******,
Sebagai informasi page header untuk tag
informasi: title, base, isindex, link, script, style & meta.
************************
</head>
<body>
****** Bagian Body ******
Berisi page atribut seperti backgroun,
warna teks, warna link, warna visited link, warna active link dan
lain-lain.
</body>
</html>
2.3.2. HTML Tag
| Tag | Keterangan |
| <a>…</a> | Menyisipkan hyperlink |
| <b>…</big> | Membesarkan teks |
| <blink>…</blink> | Teks berkedip |
| <blockquote>…</bloqkquote> | Menandai sebagai kutipan |
| <body>…</body> | Pasangan tag untuk bagian badan dokumen |
| <be>…</br> | Menyisipkan pemenggal baris |
| <center>…</center> | Mentengahkan teks |
| <cite>…</cite> | Memformat teks |
| <em>…</em> | Menampilkan teks dengan penekanan |
| <font>…</font> | Menentukan atribut font |
| <head>…</head> | Pasangan tag untuk bagian kepala |
| <html>…</html> | Pasangan untuk seluruh dokumen |
| <i>…</i> | Teks miring |
| <small>…</small> | Teks kecil |
| <strike>…</strike> | Membuat garis mendatar |
| <strong>…</strong> | Menampilkan teks dengan penekanan yang kuat |
| <sub>…</sub> | Teks subscript |
| <sup>…</sup> | Text supscript |
| <tiitle>…</title> | Judul dokumen |
| <h1>…</h1> | Headine |
| <hr>…</hr> | Garis horisontal |
| <p>…</p> | Paragraf |
| <form>…<form> | Form input |
| <input> | Menyisipkan Field input |
| <option>…</option> | Mendefinisikan item untuk object SELECT |
| <select>…<?select> | Menu pop up |
| <textarea>…</textarea> | Menyisipkan field input |
| <img>…</img> | Menyisipkan gambar |
| <dd>…</dd> | Menyisipkan keterangan deskripsi dalam daftar definisi |
| <d1>…</d1> | Menyisipkan definisi dari dokumen |
| <dt>…</dt> | Judul definisi |
| <li>…</li> | Item daftar |
| <ol>…</ol> | Daftar terurut |
| <ul>…</ul> | Daftar tidak terurut |
| <caption>…</caption> | Judul untuk tabel |
| <table>…</table> | Memuat tabel |
| <td>…</td> | Menyisipkan data sel tabel |
| <th>…</th> | Menyisipkan sel judul tabel |
| <tr>…</tr> | Mendefinisikan baris tabel |
2.3.3. Kelebihan
Hyper Text Markup Language (HTML)
HTML merupakan pengembangan dari standar
pemformatan dokumen teks yaitu Standard Generalized Markup Language
(SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang
dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.
Adapun kelebihan-kelebihan HTML antara lain:
1. Merupakan bahasa penkodean yang
lintas platform (cross platform), maksudnya HTML dapat digunakan pada
berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem
operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup
dengan menggunakan editor karakter ASCII.
2. Dapat disisipi gambar baik gambar
statis atau dinamis (animasi) termasuk menggunakan gambar untuk
dijadikan hyperlink. Gambar di sini digunakan untuk merujuk pada suatu
halaman web, dimana setiap titik-titik yang sudah didefinisikan berupa
rectangular (kotak), poligon (kurva tak beraturan) atau lingkaran
digunakan untuk ‘jump’ ke halaman lain, atau link ke halaman di luar web
yang bersangkutan.
3. Dapat disisipi animasi berupa Java
Applet atau file-file animasi dari Macromedia Flash atau Macromedia
Shockwave.
4. Dapat disisipi bahasa pemrograman
untuk mempercantik halaman web seperti Javascript, VBScript, Active
Server Pages, Perl, Tcl, PHP dan sebagainya.
5. Bukan merupakan bahasa pemrograman
jadi tidak memerlukan kompiler. Cara menjalanakannya cukup dengan
menggunakan browser.
2.3.4. Proses implementasi
HTML pada Website
Berikut contoh proses implementasi
program data HTML pada website:
1. Heading
Heading adalah sekumpulan kata yang
menjadi judul atau subjudul dalam suatu dokumen HTML. Heading berbeda
dengan tag <TITLE> yang tidak bisa muncul dalam halaman web. HTML
menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul
utama.
Contoh:
<HTML>
<HEAD>
<TITLE>Headings</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>
2. Paragraf
Untuk membuat paragraf digunakan tag
<P>. Setelah tag <P> Anda bisa menulis isi paragraf dan
paragraf tersebut harus diakhiri dengan penutup </P>. Anda bisa
mengatur posisi paragraf dengan attribut ALIGN. Atribut ALIGN diikuti
dengan posisi yang diinginkan. LEFT untuk rata kiri, CENTER untuk rata
tengah dan RIGHT untuk rata kanan.
Contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN=”right”>
Beberapa tahun yang lalu, seorang
hartawan meninggal dunia sedangkan ia tidak memiliki ahli waris.
<P ALIGN=”center”>
Kepada pengacaranya, ia meninggalkan dua
buah surat yang disegel.Yang sebuah berisi permintaan agar jenazahnya
dikuburkan pada jam empat dini hari.
<P ALIGN=”left”> Surat yang kedua
belum diketahui isinya karena disampulnya tertulis pesan agar dibuka
seusai pemakaman jenazah
</P>
</BODY>
</HTML>
3. Blockquote
Perintah tag <BLOCKQUOTE>
digunakan untuk menulis kutipan teks. Dengan perintah ini browser akan
menampilkan teks menjorok ke dalam (meng identasi teks) atau menampilkan
teks dalam bentuk huruf miring.
Contoh:
<HTML>
<HEAD>
<TITLE>BLOCKQUOTE</TITLE>
</HEAD>
<BODY>
<H3>Sesuatu yang tidak perlu
dicoba</H3>
<BLOCKQUOTE>
Sesuatu yang kelihatan mengasyikkan tapi
sebenarnya lebih banyak menambah masalah pada remaja adalah narkoba,
seks, alkohol dan merokok. Jangan sekali kali mencoba jika tidak ingin
membuat masalah baru
</BLOCKQUOTE>
</BODY>
</HTML>
4. Preformatted Text
Preformatted Text (PRE) digunakan untuk
menampilkan teks sama seperti yang diketikkan dalam dokumen HTML.
Browser akan menampikan teks tersebut dalam font monospaced, yaitu
seperti terlihat dalam teks yang tampilkan oleh aplikasi berbasis teks
(misalnya telnet).
Contoh:
<HTML>
<HEAD>
<TITLE>Preformatted
Text</TITLE>
</HEAD>
<BODY>
<PRE>
Edisi yang lalu dibahas tentang membuat
billing system untuk warnet yang dapat langsung mencetak tagihan. Kali
ini diulas bagaimana menyimpan setiap transaksi dalam database agar bisa
diperoleh beberapa laporan secara periodik.
</PRE>
</BODY>
</HTML>
5. Begin Row (BR)
Tag ini digunakan untuk menulis teks
pada baris berikutnya. Tag <BR> membuat baris baru tanpa memberi
baris kosong di bawahnya.
Contoh:
<HTML>
<HEAD>
<TITLE>Begin Row</TITLE>
</HEAD>
<BODY>
<P>Banyak cara yang dapat
digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga cara yang
paling sering dilakukan ,yaitu:
<BR>Instalasi melalui FTP
<BR>Instalasi melalui CDROM
<BR>Instalasi melalui partisi DOS
</BODY>
</HTML>
6. Ukuran Font
Untuk mengatur huruf dokumen HTML
digunakan tag <FONT SIZE>. Tag <FONT SIZE> memiliki beberapa
atribut untuk mengatur ukuran huruf yang akan digunakan.
Contoh:
<HTML>
<HEAD>
<TITLE>Ukuran font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=1>Ukuran font
1</FONT>
<FONT SIZE=2>Ukuran font
2</FONT>
<FONT SIZE=3>Ukuran font
3</FONT>
<FONT SIZE=4>Ukuran font
4</FONT>
<FONT SIZE=5>Ukuran font
5</FONT>
<FONT SIZE=6>Ukuran font
6</FONT>
<FONT SIZE=7>Ukuran font
7</FONT>
</BODY>
</HTML>
7. Jenis Font
Atribut FACE digunakan untuk mengatur
jenis huruf yang diinginkan. Atribut FACE harus diisi dengan string
jenis font seperti Arial, Times New Roman,Verdana, dan sebagainya.
Contoh:
<HTML>
<HEAD>
<TITLE>Jenis Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT FACE = “Arial”>Arial, contoh
AC Milan <P>
<FONT FACE = “Verdana”>Verdana ,
contoh Persebaya <P>
<FONT FACE = “Times New
Roman”>Times New Roman, contoh Indonesia
<P>
</BODY>
</HTML>
8. Warna Font
Atribut COLOR digunakan untuk mengatur
warna font yang akan digunakan. Untuk memberi nilai pada atribut color,
ada dua cara. Cara pertama dengan menuliskan nama warna seperti Red,
Blue, Yellow, White, dan sebagainya. Sedangkan cara kedua adalah dengan
menggunakan nilai RGB (Red Green Blue) dari suatu warna, misalnya FF0000
untuk Red, 00FF00 untuk green, dan 0000FF untuk Blue.
Contoh:
<HTML>
<HEAD>
<TITLE>Warna Font</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5>
<FONT COLOR = “red”>PSM
Makassar<P>
<FONT COLOR = “#FF0000″>tetap PSM
Makassar kan?<P>
<FONT COLOR = “#00FF00″>Ini baru
Persebaya<P>
</BODY>
</HTML>
9. Link
Perintah anchor <A> digunakan
untuk membuat suatu link. Untuk membuat link ke dokumen HTML lain
digunakan perintah <A HREF = “nama_dokumen”>Teks pada
browser</A>. Anda juga bisa membuat link dalam sebuah dokumen
HTML. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan dari link
tersebut. Nama anchor dibuat dengan menambahkan atribut NAME pada tag
<A>. Misalnya <A NAME = “Bugs”</ A>. Cara melakukan link
ke bagian tersebut adalah <A HREF = “#nama_anchor”>teks pada
browser</A>.
2.4. Langkah-langkah
Membuat Website Sederhana
Berikut ini adalah langkah-langkah untuk
membuat website sederhana
1. Membuka Program Noteped
Klik Start > All Program >
Accessories > Notepad untuk membuka program Notepad.
2. Tampilan Program Notepad
Tampilan program Notepad seperti gambar
di bawah ini. Di Notepad ini nanti kita akan mengetik tag HTML untuk
membuat sebuah halaman web.
3. Membuat Bagian Kepala dan
Badan Website
Sebuah halaman web terdiri dari dua
bagian, yaitu bagian kepala dan badan. Bagian kepala memberi nama
website kita, sedangkan bagian badan berisi halaman inti sebuah web.
Bagian kepala dan bagian badan ini nantinya akan membentuk sebuah
kesatuan halaman website yang akan kita buat. Tuliskan tag tag berikut
dalam Notepad untuk membuat bagian kepala dan badan web.
<html>
<head>
<title>
Website Saya
</title>
</head>
<body>
Selamat datang di website saya
</body>
</html>
<html>, <head>,
<title>, <body>, </html>, </head>,
</title>, </body>
adalah beberapa contoh tag yang dipakai
untuk membangun sebuah halaman website. Pada contoh di atas terlihat
bahwa setiap tag mempunyai pasangan yang ditambahi dengan tanda slash
(/). Perlu diingat bahwa tidak semua tag mempunyai pasangan seperti
contoh di atas, dan tag-tag yang tidak mempunyai pasangan akan kita
bahas di nomer selanjutnya. Kalimat atau kata yang kita tuliskan di
antara tag <title> </title> merupakan judul atau deskripsi
dari website kita. Sedangkan kalimat di antara <body>
</body> merupakan isi dari website kita. Kalau sudah anda ketik
klik File > Save / Save As , dan simpan dengan nama file index.html.
File ini akan mempunyai icon Internet Explorer atau icon web browser
lain yang anda gunakan dalam komputeranda. Klik icon ini untuk melihat
tampilan halaman web yang telah anda buat.
Terlihat bahwa di bagian atas halam
website terdapat kata kata yang anda tuliskan di antara tag
<title> </title>, sedangkan dalam badan website terdapat
tulisan yang anda tuliskan di antara tag <body> </body>.
4. Menambah Warna Background
website
Warna background website anda dapat anda
ubah dengan menambahkan vkata “bgcolor = warna” setelah tag body.
Misalnya anda ingin memberi warna hitam website anda maka anda tinggal
tambahkan kode berikut :
<body bgcolor = black>
Bila sudah anda tambahkan ke ketikan
anda dalam Notepad kemudian disave, dan selanjutnya tekan tombol refresh
dalam web browser anda. Tampilan website anda akan berubah menjadi
seperti di bawah ini. Bila anda ingin mengubahnya menjadi warna lainnya
anda tinggal ubah warna yang diketik setelah bgcolor, misalnya : red,
green, blue, atau warna lainnya.
5. Menjadikan Gambar Sebagi
Background Website
Anda bisa juga menjadikan sebuah gambar
sebagai background website anda dengan menambahkan kode : “background =
file gambar” setelah tag body. Misalnya anda ingin menjadikan file
gambar pemandangan.jpg sebagai background halaman website anda maka anda
tinggal tambahkan kode berikut :
<body background =
pemandangan.jpg>
Save dan klik refresh. Tampilan website
anda akan seperti gambar di bawah ini.
Perlu diingat bahwa menggunakan gambar
sebagai background halaman website anda akan memperlambat loading
halaman website anda, terutama bila ukuran file gambar ini terlalu
besar. Karena itu usahakan sebisa mungkin agar background website anda
tidak menggunakan file gambar
6. Merubah Tulisan dalam Website
Seperti halnya background website,
tulisan dalam website pun bisa juga diubah ubah warnanya. Selain itu
jenis dan ukuran tulisan bisa juga kita ubah ubah. Untuk itu kita perlu
menyisipkan tag <font> </font> dalam tag <body>
</body>. Untuk mengubah warna tulisan kita tambahkan kode “color”
setelah font, untuk mengubah jenis tulisan kita tambahkan kode “face”,
dan untuk mengubah ukuran tulisan kita tambahkan kode “size”. Khusus
untuk size kita bisa mengubah ubah ukurannya dari -7 sampai +7, bila
nilainya semakin besar maka semakin besar pula huruf yang akan
ditampilkan dalam halaman web. Kita bisa mengubah satu, dua, atau tiga
pengaruh tag tag di atas secara bersamaan dengan dipisahkan spasi. Misal
kode yang kita tuliskan dalam Notepad :
<html>
<head>
<title>
Website Saya
</title>
</head>
<body bgcolor = black>
<font color = white face = verdana
size = +3 align = center>
Selamat datang di website saya
</font>
</body>
</html>
Kode di atas berarti memberi pengaruh
tulisan warna putih berjenis Verdana dan berukuran +3. Save dan refresh
browser untuk melihat pengaruhnya. Anda bia juga menambahkan efek
tulisan bergerak dengan menyisipkan tag <marquee> </marquee>
sebelum kode <font> </font>
Untuk mengatur posisi tulisan bisa kita
sisipkan tag <posisi> </posisi> di antara tulisan yang kita
tuliskan. Posisi kita isi dengan “left”, “center”, atau “right”.
Misalkan kita ingin membuat posisi tulisan ke tengah, maka kita
ketikkan:
<center> Selamat datang di website
saya </center>
7. Menyisipkan Gambar atau Foto
Dalam Website
Anda bisa menyisipkan foto atau gambar
anda dalam website anda dengan mengetikkan tag <img src = file foto
anda>. Misalkan file yang ingin anda masukkan bernama bajaj.jpg, maka
tag yang perlu anda tuliskan adalah :
<img src = bajaj.jpg>
Untuk memberi jarak antara tulisan anda
sebelumnya dengan foto ini maka perlu anda tambahkan tag <br>.
<font color = white face = verdana
size = +3 align = center> Selamat datang di website saya <br>
<img src = bajaj.jpg> </font>
Tampilan website anda akan seperti ini.
Ukuran gambar bisa anda atur dengan menambahkan kode “height = ukuran”,
dan/atau “width = ukuran”. Misalkan anda ingin gambar anda mempunyai
tinggi 100 pixel maka anda tinggal tambahkan “height = 100” setelah kode
nama file gambar yang anda sisipkan.
8. Menambahkan Menu dalam
Website
Selanjutnya tinggal anda tambahkan
menu-menu dalam website anda. Menu standar yang ada dalam web sederhana
biasanya adalah profil, galeri foto, dan link. Untuk itu kita perlu
menambah halaman baru yang mempunyai nama file profil.html, galeri.html,
dan link.html. Untuk membuat halaman halaman ini anda bisa mengulangi
langkah langkah yang telah dijelaskan sebelumnya. Untuk menghubungkan
halaman utama website dengan halaman halaman tambahan ini kita perlu
ketikkan tag <a href = profil.html> dan ditutup dengan </a>
bila kita ingin menghubungkan dengan halaman profil, demikian pula untuk
halaman web lainnya. Kode berikut akan menampilkan hubungan antar
halaman website yang berjejer.
<a href = profil.html> Profil
</a> <a href = galeri.html> Galeri </a> <a href =
link.html> Link </a>
Klik Save dan refresh sehingga
ditampilkan halaman website seperti berikut. Bila link yang anda buat
benar maka kursor mouse akan berubah menjadi tangan bila anda dekatkan
ke link yang anda buat.
9. Link untuk Halaman profil,
galeri
Untuk halaman profil, galeri, dan link
bisa anda tambahkan sesuka anda seperti langkah langkah sebelumnya.
Khusus untuk halaman link, anda bisa mengisinya dengan link ke
Friendster, Yahoomail, Google, dan sebagainya. Link yang telah
dijelaskan di atas bila kita klik maka halaman baru akan dibuka dalam
satu jendela browser yang sama. Bila kita ingin tetap menikmati halaman
website kita sedangkan kita juga ingin membuka Friendster misalnya, maka
kita perlu menambahkan tag “target = “_blank” setelah alamat
Friendster. Misal :
<a href = http://www.friendster.com
target = “_blank”> Friendster </a>
Bila anda ingin Friendster ini dibuka di
halaman web yang sama maka anda
tinggal hilangkan saja “target =
“_blank” nya.
10. Link ke Halaman Profil Berupa
Gambar
Bila anda ingin link ke halaman profil
anda berupa gambar profil.jpg misalnya, maka anda perlu menyisipkan file
gambar di dalam tag <a href = profil.html> </a>. Sehingga
dapat kita tuliskan sebagai berikut :
<a href = profil.html> <img src
= profil.jpg> </a>
Bila benar maka kursor mouse akan
berubah menjadi tangan bila didekatkan ke gambar profil.jpg. Demikian
pula bila link ke Friendster atau Yahoomail juga dalam bentuk gambar,
maka anda tinggal menambahkan tag <img src = gambar> di antara tag
<a href = link > </a>.
BAB III
PENUTUP
3.1. Kesimpulan
Perkembangan jumlah website semakin
memberikan peluang kerja bagi para programmer web. Namun demikian banyak
hal yang perlu disiapkan oleh seorang programmer web agar web yang
dibangun dapat memenuhi standar. Banyak celah yang akan muncul, sehingga
pemrogram web harus lebih cermat.
Website adalah kumpulan halaman yang
menampilkan informasi data teks, data gambar diam atau gerak, data
animasi, suara, video, atau gabungan dari semuanya, baik yang bersifat
statis atau dinamis yang membentuk satu rangkaian bangunan yang saling
terkait dimana masing-masing dihubungkan dengan jaringan-jaringan
halaman (hyperlink) yang diidentifikasi oleh pengenal global yang
disebut Uniform Resource Identifier (URI). Sedangkan Hyper Text Markup
Language (HTML) adalah bahasa markup yang digunakan untuk membuat sebuah
halaman web dan menampilkan berbagai informasi di dalam sebuah browser
Internet yang berbasiskan standar World Wide Web Consortium (W3C).
HTML berisi perintah-perintah yang telah
terstruktur berupa tag-tag penyusun dan terdiri dari dua bagian yaitu
Header dan Body. Struktur HTML diapit oleh tag awal <HTML> dan tag
akhir </HTML>.
3.2. Saran
1. Untuk membuat program HTML
sebaiknya mengenal struktur dasarnya, dan juga memperhatikan tampilannya
supaya menarik.
2. Bahasa HTML ini masih jauh lebih
mudah dari bahasa PHP. Karena itu, sering seringlah berlatih dan
jangan cepat merasa puas bila anda sudah mempunyai website pribadi.
Selamat berkarya!
DAFTAR PUSTAKA
http://www.balinter.net/news_108_Pengertian_Website.html
diakses, tanggal 30 Oktober 2009, pukul
20.40.
diakses, tanggal 10 November 2009, pukul
12.50.
http://www.informatika.org/~rinaldi/…/MakalahIF5054-2007-A-003.pdf
diakses, tanggal 30 Oktober 2009, pukul
20.00.
http://www.maswahyu.com/…/Pembuatan%20Website%20Sederhana%20Menggunakan%20HTML…
diakses, tanggal 30 Oktober 2009, pukul 20.10.
http://www.njouba.com/makalah-pemrograman-web
Tidak ada komentar:
Posting Komentar