Makalah Program HTML

KATA PENGANTAR

Puji syukur penulis panjatkan kehadirat Allah SWT, yang melimpahkan
rahmat dan karunia-Nya, sehingga penulis dapat menyelesaikan makalah ini
dengan baik.
Tujuan penulisan makalah ini adalah untuk memenuhi salah satu tugas mata
kuliah Permrograman Terstruktur. Bahan penulisan diambil berdasarkan hasil dari
beberapa sumber literatur yang mendukung penulisan ini.
Penulis menyadari bahwa tanpa dorongan dari semua pihak, penulisan makalah ini
tidak akan berjalan dengan lancar. Oleh karena itu pada kesempatan ini,
izinkanlah penulis menyampaikan ucapan terimakasih kepada :

Bapak MUHAMMAD IQBAL selaku dosen di STMIK BUDIDARMA

Penulis menyadari bahwa penulisan makalah ini masih jauh dari sempurna. Oleh
karena itu, penulis mohon kritik dan saran yang membangun demi kesempurnaan
penulisan di masa yang akan datang.
Akhir kata semoga makalah ini bermanfaat bagi penulis khususnya dan bagi
pembaca pada umumya.

BAB I
PENDAHULUAN

1.1 Latar Belakang

Perkembangan dunia informatika memang selalu mengalami peningkatan
yang sangat pesat. Hal ini terbukti dengan adanya penggunaan internet di berbagai
bidang. Tidak hanya di kalangan instansi-instansi saja yang menggunakannya,
orang awam pun bebas mengaksesnya, karena dengan adanya internet dapat
memudahkan pekerjaan mereka.
Mengingat pentingnya dunia internet, para programmer berusaha membuat
dan mendesain program-program dan aplikasi yang dibutuhkan saat melakukan
browsing internet. Hal inilah yang melatarbelakangi penulis menyusun makalah
ini. Namun dari sekian pemrograman yang ada, yang akan dibahas pada makalah
ini adalah mengenai pemrograman HTML. Pada makalah ini akan dijelaskan
langkah-langkah membuat dokumen HTML yang baik.
1.2 Rumusan Masalah
Makalah ini merupakan beberapa permasalahan sebagai berikut :

1. Bagaimana sejarah dan definisi HTML?
2. Bagaimana struktur dasar HTML?
3. Apa saja komponen dokumen HTML?
4. Apa saja elemen dasar HTML?
5. Bagaimana langkah pembuatan halaman HTML?

1.3 Ruang Lingkup
Dalam makalah ini, penulis membatasi masalah mengenai pemrograman.
Pembahasan dikhususkan pada pemrograman HTML. Hal tersebut dimaksudkan
untuk mempertegas pembahasan sehingga dapat trfokus pada masalah yang akan
dibahas serta dapat memberikan gambaran umum tentang isi makalah sehingga
pembaca lebih mudah dalam mempelajarinya.
1.4 Maksud dan Tujuan

Maksud dari penulisan makalah 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.  Mengembangkan kreativitas dan wawasan penulis.
2.  Memberikan uraian tentang pemrograman HTML secara lebih terinci.
3.  diharapkan dengan adanya makalah ini, para pemula yang ingin membuat
4. HTML dapat menggunakannya sebagai sumber referensi.

1.5 Metode Pengumpulan Data

Untuk memperoleh data yang digunakan dalam tugas ini, penulis
menggunakan Metode Browsing Internet, yaitu mrtode yang digunakan dengan
browsing atau membaca referensi-referensi yang berkaitan dengan msalah yang
dibahas dalam tugas ini di internet.
1.6 Sistematika Penulisan

Untuk memudahkan pembaca dalam mempelajari dan mengetahui makalh
ini, penulis memberikan uraian singkat mengenai gambaran pada masing-masing
bab melalui sistemtika penulisan, yaitu :

BAB I PENDAHULUAN

Dalam bab ini, penulis menguraikan tentang latar belakang penulisan,
rumusan masalah, ruang lingkup, maksud dan tujuan, serta metode-metode yang
digunakan dalam pengumpulan data untuk menyusun tugas ini. Selain itu, penulis
juga menguraikan mengenai sitematika penulisan.

BAB II PEMBAHASAN

Dalam 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 pemrograman HTML, meliputi: sejarah dan definisi
HTML; struktur dasar HTML; komponen utama dokumen HTML; elemen dasar
HTML; pembuatan halaman HTML.

BAB III PENUTUP

Dalam bab ini, penulis menguraikan tentang kesimpulan-kesimpulan dari
masalah yang dibahas serta saran-saran yang penulis ajukan.

BAB II
PEMBAHASAN

2.1 Sejarah dan Definisi HTML
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 adalah proses mengimplementasikan urutan langkah untuk
menyelesaikan suatu masalah dengan menggunakan suatu bahasa pemrograman.
Bahasa pemrograman adalah suatu prosedur penulisan program. Sedangkan
pemrograman terstruktur adalah metode untuk mengorganisasikan dan membuat
kode-kode program supaya mudah untuk dimengerti, mudah ditest dan mudah
dimodifikasi. Salah satu contoh pemrograman adalah pemrograman di internet.
HTML merupakan salah satu unsur penting dalam pemrograman di internet.
HTML (Hypertext Markup Language) adalah bahasa pengkodean untuk
menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide
Web. Namun HTML bukanlah sebuah bahasa pemrograman. tetapi hanyalah
berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun.
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. 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. Namun perkembangan resmi
dikeluarkan pada bulan November 1995 oleh IETF ( Internet Engineering Task
Force ). HTML 2.0 ini merupakan penyempurnaan dari HTML+ (1993). HTML
3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya. Sebuah
Usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada
tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan
pada bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang
dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML
merupakan perbaikan dari HTML 4.0 yang lebih dulu diterbitkan. (18 Desember
1997).
HTML harus di awali dan diakhiri dengan kode-kode html dimana
menunjukkan bagaimana keluarannya pada saat di jalankan pada sebuah web
browser. Bahasa pemrograman itu dipahami oleh semua komputer di dunia atau
internet. Perintah html harus berada didalam tanda <..>, yang digunakan untuk
menampilkan fungsi – fungsi tertentu misalnya fungsi link dan sebagainya.
Dinamakan Hypertext karena kita bias membaca isi dari sebuah dokumen/berita
tanpa harus membacanya baris demi baris. Kita bias melompat – lompat dari satu
topik ke topik lainnya. Dinamakan MarkUp Languange karena dokumen html
mengandung tanda atau perintah tertentu untuk menentukan tampilan teks,
gambar, dan sebagainya beserta fungsi – fungsi yang diinginkan.
2.2 Struktur Dasar HTML

 Memulai Notepad
NotePad adalah text editor standar yang ada baik di versi 16 bit maupun 32
bit sistem operasi Ms Windows. Untuk memulai NotePad di Ms Windows
langkah-langkahnya adalah sebagai berikut :
· Click pada tombol “Start” yang ada pada task bar Windows.
· Click pada “Program” dan lalu click pada menu direktori berlabel
“Accessories”.
· Kemudian click pada shortcut “NotePad’’.
Agar dokumen tampak lebih menarik, dapat diatur tampilannya dengan
beberapa properti. Properti dokumen diatur melalui atribut-atribut yang terdapat
dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakang
halaman, warna teks, warna link dan lain-lain.

 1) Atribut Elemen <body>
BACKGROUND = Lokasi dan nama file (latar belakang image dokumen)
BGCOLOR = Warna (warna latar belakang dokumen, default putih)
TEXT = Warna (warna teks dokumen, default hitam)
LINK = Warna (warna link dokumen, default biru)
VLINK = Warna (warna visited link dokumen, default ungu)
ALINK = Warna (warna aktif link dokumen, default merah) 

2) Elemen Heading <h1> ... <h6>
Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari
suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap
jenis heading. Ada tujuh buah heading yang dikenal di HTML, yaitu dari <h1>
sampai <h6>. 

3) Elemen Paragrap <p>
Tag paragrap berfungsi layaknya untuk pengaturan antar paragraf dalam
halaman web. Dalam elemen paragrap terdapat atribut align yang berfungsi
sebagai pengaturan perataan paragraph. 

4) Elemen Break <br>
Elemen Break berfungsi untuk memberikan baris baru suatu paragrap dalam
halaman web. Elemen break tidak memerlukan elemen penutup break. 

5) Elemen Horisontal Rules <hr>
Elemen <hr> berfungsi untuk menampilkan garis horisontal di dalam
halaman web. Elemen <hr> tidak memerlukan elemen penutup </hr>.
ALIGN = [ left | center | right ]
Atribut Elemen Horisontal Rules :

• · ALIGN = [ left | center | right ] (perataan horizontal, default center)
• · SIZE = Pixels (tinggi garis, default 2)
• · WIDTH = Length (lebar garis, pixel or persen, default 100%)
• · NOSHADE (garis solid) 

6) Elemen Pemformatan Karakter <font>
Font pada halaman HTML dapat diformat sesuai dengan desain yang
ditentukan, baik ukuran, jenis maupun warna.
Atribut Elemen Font :
SIZE = Angka (ukuran huruf, default 3)
COLOR = Warna (warna font, default hitam)
FACE = Angka (jenis font, default Times New Roman) 

7) Elemen Ragam Karakter
<b>bold</b> menghasilkan huruf tebal
<i>italic</i> menghasilkan huruf miring
<u>underline</u> menghasilkan huruf bergaris bawah 

8) Elemen List
Properti <li> digunakan untuk menampilkan informasi dalam bentuk daftar
(list). Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet
(unordered list <ul>) dan dalam bentuk nomor (ordered list <ol>).
Atribut Elemen Ordered list TYPE = [ 1 | a | A | i | I ] (tipe penomoran, defaul

Atribut Elemen Unordered list TYPE = [ disc | square | circle ] (tipe bullet,
default disc).

9) Elemen Image <img>
Untuk menampilkan gambar dalam halaman HTML, format filenya berupa
JPG atau GIF. Untuk menampilkanya digunakan tag IMG.
Atribut Elemen Image :
SRC = URI (lokasi image)
ALT = Text (text alternatif )
WIDTH = Length (lebar image)
HEIGHT = Length (tinggi image)
ALIGN = [ atas | tengah | bawah | kiri | kanan ] (perataan image)
BORDE = Length (lebar batas link)
c. Menyimpan File Script
Setelah membuat script-script HTML, kemudian langkah menyimpannya
adalah sebagai berikut :

• · Click tombol “File” pada taskbar notepad, kemudian pilih “Save”.
• · Pada field isian nama file (filename) , ketikkan namafile.html
• · Coba jalankan browser dengan membuka “Internet Explorer”.
• · Click pada menu "File .."
• · Pilih pada option "Open .." yang ada pada menu "File .."
• · Pada dialog box "Open" klik pada tombol "Browse .." dan cari file yang
• ingin ditampilkan.
• · Selanjutnya pilih tombol "Ok" jika file telah dipilih.

d. Mengedit file script
Ketika file tersebut telah ditambahkan atau diedit dan telah disimpan, maka
cara menampilkan file tersebut adalah :

• · simpan hasil perubahan file html anda
• · pindah ke aplikasi web browser
• · Pada Ms Internet Explorer tekan tombol "REFRESH"

Web Browser akan me-load dokumen yang sama tapi dengan revisi baru
tadi. Proses ini adalah siklus Edit, Save, dan View.
Seperti umumnya dokumen lain, dokumen HTML terdiri dari teks-teks dan
bahkan lebih dari dari itu. Dokumen HTML juga dapat mengandung suatu
gambar, suara, ataupun video. Satu hal yang membedakan dokumen HTML
dengan dokumen-dokumen lainnya adalah adanya elemen-elemen HTML beserta
tag-tagnya. Elemen dan tag HTML berfungsi untuk menformat atau menandai
suatu bagian tertentu dari dokumen HTML dan juga untuk menentukan struktur
bagian tersebut dalam dokumen. HTML.Elemen dan Tag inilah yang merupakan
ciri utama dari suatu dokumen HTML. Secara garis besar, untuk menulisakn
sebuah dokumen HTML dibutuhkan kerangka penulisan dengan tag-tag dasar,
yaitu HTML, HEAD,TITLE dan BODY.

 TAG                                      FUNGSI
HTML                   Untuk penanda bahwa dokumen yang dibuat adalah

                             dokumen web
HEAD                   Untuk judul, boleh ada atau tidak
TITLE                   Judul untuk masing-masing halaman, ditampilkan di atas
                             browser
BODY                  Informasi yang ingin dimunculkan diletakkan di bagian ini

Sebagai contoh :

<html>
<head>
<title>teks pada title bar web browser</title>
</head>
<body>
Berisi tentang text, gambar, atau apapun yang
tampil pada dokumen web.
</body>
</html>

Seperti terlihat, struktur file HTML diawali dengan sebuah tag <html> dan
ditutup dengan tag </html>. Di dalam tag ini terdapat dua buah bagian besar, yaitu
yang diapit oleh tag <head> ... </head> dan tag <body> ... </body>. Bagian yang
diapit oleh tag HEAD merupakan header dari halaman HTML dan tidak
ditampilkan pada browser. Bagian ini berisi tag-tag header seperti <title> ...
</title> yang berfungsi untuk mengeluarkan judul pada title bar window web
browser. Bagian kedua, yang diapit oleh tag BODY merupakan bagian yang akan
ditampilkan pada halaman web browser nantinya. Pada bagian ini akan dituliskan
semua jenis informasi berupa teks dengan bermacam format maupun gambar yang
ingin disampaikan kepada pengguna nantinya.
2.3 Komponen Utama Dokumen HTML

Ada dua komponen utama pembentuk dokumen HTML, dua komponen itu
adalah elemen dan tag. Dengan adanya dua komponen ini, maka kita dapat
membuat dokumen HTML dengan baik.
a. Elemen
Dalam dokumen HTML, elemen dibagi menjadi dua kategori utama, yaitu
elemen-elemen <HEAD> yang memberikan informasi tentang dokumen tersebut.
<html>
<head>
<title>teks pada title bar web browser</title>
</head>
<body>
Berisi tentang text, gambar, atau apapun yang
tampil pada dokumen web.
</body>
</html>
Elemen <HEAD> ini meliputi judul dokumen atau hubungannya dengan
dokumen lain.
Elemen lain yaitu elemen-elemen <BODY> yang menentukan bagaimana
isi suatu dokumen ditampilkan oleh browser. Isi elemen ini misalnya paragraf, list
(daftar), tabel dan lain-lain. Di dalam elemen HTML terdiri dari tag-tag beserta
teks yang ada dalam tag-tag tersebut.
b. Tag
Pada saat web browser menampilkan suatu web page, browser tersebut akan
membaca teks-teks pada dokumen HTML, dan mencari kode khusus yang disebut
tag. Tag diapit oleh tanda <>. Tag biasanya merupakan pasangan, yang disebut
tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk <nama tag> sedang
tag akhir dinyatakan dalam bentuk </nama tag>. Format umum suatu tag
berpasangan adalah :

<nama tag> Teks yang akan ditampilkan </nama tag>

Kemungkinan kesalahan yang terjadi pada saat menjalankan program adalah
lupa memberi tag awal atau tag akhir, sehingga web page yang dihasilkan akan
terlihat lain dari yang diinginkan. Tidak semua tag mengikuti aturan seperti diatas,
<nama tag>teks</nama tag>
<nama tag>
<nama tag atribut1=argument atribut2=argumen
dst>
<nama tag antribut=argumen>teks</nama tag>
melainkan terdapat beberapa macam bentuk tag yang dikenal oleh HTML, di
mana umumnya tag-tag dalam HTML muncul dalam bentuk seperti berikut ini :
2.4 Elemen Dasar HTML

HTML tidak hanya menyediakan teks saja dalam dokumennya, tetapi juga
mampu menampilkan objek-objek multimedia seperti gambar, suara, video, dan
bahkan telah merambah lebih jauh dengan adanya VRML serta applet-applet Java.
Untuk informasi yang berupa teks, HTML telah menyediakan bermacam-macam
elemen, seperti :

1.  Paragraph, untuk membuat suatu paragraph
2.  Blockquote, untuk membuat suatu kutipan teks
3.  preformatted text, untuk menampilkan teks seperti yang dituliskan
4.  divider, digunakan untuk mengelompokkan suatu teks tertentu

a. Paragraph <p>
Elemen <P>…</P> digunakan untuk menandai sekumpulan teks sebagai
suatu paragraph. Tag <P> untuk awal paragraf dan tag </P> digunakan untuk
mengakhiri paragraf. Tag paragraf memiliki atribut yang dapat dipakai sebagai
tambahan untuk pemformatan paragraph.
Berikut, diberikan contoh-contoh kode HTML untuk menampilkan paragraf :
<html>
<body>
<p>Paragraf satu.</p>
<p>Paragraf dua.</p>
<p>Paragraf tiga.</p>
<p>Elemen paragraf didefinisikan dengan menggunakan tag
P.</p>
</body>
</html>

b. Blockquote
Tag <BLOCKQUOTE> digunakan untuk menuliskan suatu kutipan teks.
Browser biasanya menampilkan kutipan teks dengan mengidentifikasikan teks
tersebut atau dengan mengabaikan spasi dalam teks seperti tag paragraph. Kutipan
teks dinyatakan dengan indentasi yang menjorok ke dalam dan berbeda dalam satu
paragraf.
Berikut ini, contoh dokumen HTML yang menggunakan tag blockquote :
<html>
<body>
<h3>Teknologi Universal Serial Bus (USB)</h3>
<blockquote>
Pada awal tahun 1977 tepatnya komputer dengan prosesor
Pentium, beberapakomputer sudah mempunyai piranti baru
untuk memudahkan pengguna komputer dalam menangani
masalah kabel yang bayak.<br>
Teknologi baru tersebut dinamakan Universal Serial Bus
atau yang lebih dikenal dengan USB. Memang masih bayak
yang tidak mengetahui apa dan fungsi teknologi ini.
Oleh sebab itu bab ini akan memperkenalkan apa yang
dimaksud dengan USB dan kegunaannya.
</blockquote>
<h5>Disadur dari Buku " Pengantar Sistem Komputer"
Hal:134 <h5>
</body>
</html>

c. Preformatted text
Pada tag paragraf, penekanan tombol ENTER, Tab, Spasi tidak memberikan
pengaruh pada web page yang dibuat. Jika akan menambahkan spasi dan enter
pada teks dalam web page dengan menggunakan tag <PRE>…..</PRE>.
Sehingga teks yang berada di dalam tag pre akan mengikuti sesuai dengan
pengetikan yang dilakukan.
Berikut ini adalah contoh dokumen HTML yang menggunakan Tag <PRE> :
<html>
<body>
<h3>CONTOH PENGGUNAAN TAG PRE </h3>
<pre>
Teks ini menggunakan spasi dan ENTER untuk berpindah ke
baris ini.
</pre>
<p>Tag pre juga sangat cocok untuk menampilkan barisbaris
kode program seperti dibawah ini</p>
<pre>
<b>for i = 1 to 10
print i
next i
</pre></b>
<p>Kita Juga dapat membuat gambar dengan format teks
seperti berikut :
</p>
<pre>
/\_/\
( o o )
meooongg........
</pre>
</body>
</html>

contoh selanjutnya:
 <html>
<head>
<title> Contoh script HTML </title>
</head>
<body>
<h2>Belajar Desain WEB dengan HTML</h2>
HTML adalah dasar pembuatan website,<br>
dimana perintah – perintah HTML dapat diketik <br>
pada notepad (bila menggunakan S.O Windows) atau
Vi(bila menggunakan Linux).
</body>
</html>

  Hasil tampilannya adalah sebagai berikut :

BAB III
KESIMPULAN DAN SARAN

Perkembangan dunia informatika yang semakin canggih pada saat ini
menawarkan kemudahan bagi setiap orang dalam membantu menyelesaikan
segala kebutuhan dan pekerjaannya. Internet sebagai salah satu bukti nyata dengan
adanya perkembangan ini. Maka dari itu, para programmer berusaha untuk
merancang beberapa pemrograman di internet. HTML adalah salah satu unsur
penting dalm pemrograman di internet. Di dalam HTML terdapat terdapat
komponen-komponen dokumen HTML dan elemen-elemen dasar HTML.
Untuk itu, bagi para programmer, khususnya pemula yang ingin membuat
HTML yang baik, sebaiknya sebelum membuat HTML harus mengetahui definisi,
strukntur dasar, komponen-komponen HTML dan elemen-elemen dasarnya. Dan
seperti yang telah disampaikan sebelumnya, selain itu ia juga harus menguasai
langkah-langkah membuat HTML beserta tampilannya yang menarik yang akan
diberikan kepada pengguna nantinya. Semoga makalah yang telah disusun ini
dapat menjadi pedoman bagi pemula sebelum membuat HTML.

DAFTAR PUSTAKA

http://rizkyramadhansttg.wordpress.com/2008/07/15/dasar-pemrograman-html/
http://www.semuabisnis.com/
http://one.indoskripsi.com/node