PEMROGRAMAN WEBSITE SEDERHANA MENGGUNAKAN HYPER TEXT MARKUP LANGUAGE

 

PEMROGRAMAN WEBSITE SEDERHANA MENGGUNAKAN HTML (HYPER TEXT MARKUP LANGUAGE)

 

BAB I

PENDAHULUAN

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:

1. Apa pengertian program dan pemrograman?
2. Apa yang dimaksud dengan websaite?
3. Apa yang di maksud dengan HTML?
4. 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:

1. Menerapkan teori yang didapat selama belajar di Bina Sarana Informatika.
2. Mengembangkan kreativitas dan wawasan penulis.
3. 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, maupunoperating 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.

http://www.box.net/shared/j1nnyn4fse

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

diakses, tanggal 30 Oktober 2009, pukul 19.30.

http://www.web.htmldhinata.com/bahasa-pemrograman-web-design-bagian-1.html. diakses, tanggal 30 Oktober 2009, pukul 19.40.

Anonim. 2009 Web Programing, Jakarta: Bina Sarana Informatika.

source : http://pujiee.wordpress.com/2009/12/20/pemrograman-website-sederhana-menggunakan-html-hyper-text-markup-language/