PEMROGRAMAN INTERNET

OLEH KELOMPOK 1:
- EKA NOVITA SARI
- VALENTINO IKANUBUN
- GUSTAF PAYAI

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS CENDERAWASIH
JAYAPURA
2013
i
 ii

DAFTAR ISI
DAFTAR GAMBAR ................................................................................................................ ii
MEMBUAT DOKUMEN HTML SEDERHANA ................................................................... 1
STRUKTUR DASAR ............................................................................................................... 2
TAG HTML .......................................................................................................................... 2
KODE WARNA ....................................................................................................................... 3
PENGATURAN HALAMAN WEB DAN TEKS.................................................................. 10
BODY ................................................................................................................................. 10
HEADING .......................................................................................................................... 11
LINE BREAK ..................................................................................................................... 12
NO LINE BREAK .............................................................................................................. 12
FONT .................................................................................................................................. 12
BASE FONT ....................................................................................................................... 12
HORIZONTAL LINE ............................................................................................................. 15
LISTS ...................................................................................................................................... 16
UNORDERED LISTS ........................................................................................................ 16
ORDERED LIST ................................................................................................................ 17
DEFINITION LIST ............................................................................................................ 18
PREFORMATTED TEXT...................................................................................................... 19
EKSTENDED QUOTATIONS .............................................................................................. 20
HYPERTEXT LINK ............................................................................................................... 23

DAFTAR GAMBAR
Gambar 1 Contoh program membuat dokumen HTML sederhana .......................................... 1
Gambar 2 Hasil program membuat dokumen HTML sederhana .............................................. 1
Gambar 3 Contoh program struktur dasar HTML ..................................................................... 2
Gambar 4 Hasil program struktur dasar HTML ......................................................................... 2
 iii

Gambar 5 Contoh program menggunakan heading ............................................................... 11

Gambar 6 Hasil program menggunakan heading ................................................................... 11
Gambar 7 Contoh program horizontal.................................................................................... 15
Gambar 8 Hasil program horizontal........................................................................................ 15
Gambar 9 Contoh program Unorderedlist.............................................................................. 16
Gambar 10 Hasil program Unorderedlist ................................................................................ 17
Gambar 11 Contoh program Orderedlist ................................................................................ 17
Gambar 12 Hasil program orderedlist .................................................................................... 18
Gambar 13 Contoh program Definitionlist ............................................................................. 18
Gambar 14 Hasil program definition list ................................................................................. 19
Gambar 15 contoh program preformatted text ..................................................................... 19
Gambar 16 Hasil program preformatted text ......................................................................... 20
Gambar 17 Contoh program menggunakan sintag <blockquote> ......................................... 20
Gambar 18 Hasil program menggunakan sintag <blockquote> ............................................. 21
Gambar 19 Contoh progam menggunakan sintag <DD> dan <P> .......................................... 22
Gambar 20 Hasil progam menggunakan sintag <DD> dan <P> .............................................. 22
Gambar 21 Contoh program menggunakan sintak <img src=nama file gambar> .................. 24
Gambar 22 Hasil program menggunakan sintak <img src=nama file gambar> ...................... 24
Gambar 23 Contoh program link ke alamat URL atau Website .............................................. 25
Gambar 24 Hasil program menggunakan link ke alamat URL atau Website lain ................... 26
Gambar 25 Contoh program tabel .......................................................................................... 27
Gambar 26 Hasil program tabel .............................................................................................. 27
 1

MEMBUAT DOKUMEN HTML SEDERHANA

Hai sobat ketemu lagi dengan Mr. Comel haha... Kali ini saya akan menjelaskan
dalam memahami kerangka dokumen HTML, seperti yang telah saya jelaskan dalam
posting Tag-Tag Dasar HTML, pada bagian ini kita akan mencoba untuk membuat
dokumen HTML sederhana. Berikut adalah langkah-langkahnya:

 Jalankan suatu aplikasi Text Editor, misalnya Notepad, Notepad++, SCite,

dan yang lainnya
 Tuliskan kode berikut ke dalam Text Editor bersangkutan.

Contoh program:

Gambar 1 Contoh program membuat dokumen HTML sederhana

Hasil program setelah dijalankan:

Gambar 2 Hasil program membuat dokumen HTML sederhana

 Cara penulisan kode menggunakan salah satu aplikasi HTML editor:

 Panulisan tag HTML menggunakan notepad++
 2

 Simpan dokumen tersebut dengan nama Welcome.html

 dokumen disimpan menggunakan akhiran.html
 Buka file Welcome.html melalui web browser.

STRUKTUR DASAR
Struktur dasar HTML adalah susunan yang ada di dalam suatu halaman
HTML yang wajib ada didalamnya. jika struktur ini tidak ada, maka halaman HTML
akan tidak dapat bekerja dengan baik.

Contoh program berikut ini adalah struktur dasar HTML:

Gambar 3 Contoh program struktur dasar HTML

Hasil program setelah dijalankan:

Gambar 4 Hasil program struktur dasar HTML

TAG HTML
Tag HTML terdiri dari 2 bagian, opening/start tag dan end/closing tag.
<html> = opening tag
</html> = closing tag
 3

Keterangan Lain:
1. didalam tag <head/> anda bisa menambahkan meta tag, css, dan JS yang
berfungsi mengatur tampilan (warna, ukuran font, dan lainnya) pada halaman HTML.
2. didalam tag <body/> anda bisa menambahkan tag apa saja yang berfungsi untuk
mngatur susunan halaman HTML (mulai dari header, post/content, sidebar, footer dan
lainnya). anda juga bisa menambahkan css dan JS layaknya tag <head/> pada tag
<body/>

KODE WARNA
Warna web adalah warna-warna yang digunakan dalam perancangan halaman-
halaman web, dan juga cara mendeskripsikan dan melakukan spesifikasi dari warna-
warna tersebut. Berikut ini warna-warna yang dapat digunakan dalam pembuatan
HTML.

#FOF8FF
Aliceblue
#FAEBD7
Antiquewhite
#00FFFF
Aqua
#7FFFD4
Aquamarine
#F0FFFF
Azure
#F5F5DC
Beige
#FFE4C4
Bisque
#000000
Black
#FFEBCD
Blanchedalmond
#0000FF
Blue
#8A2BE2
Blueviolet
#A52A2A
Brown
#DEB887
Burlywood
 4

#5F9EAD
Cadetblue
#7FFF00
Chartreuse
#D2691E
Chocolate
#FF7F50
Coral
#64950
Cornflowerblue
#FFF8DC
Cornsilk
#DC143C
Crimson
#00FFFF
Cyan
#00008B
Darkblue
#008B8B
Darkcyan
#B8860B
Darkgoldenrod
#A9A9A9
Darkgray
#006400
Darkgreen
#8B008B
Darkmagenta
#BDB76B
Darkkhaki
#556B2F
Darkolivegreen
#FF8C00
Darkorange
#9932CC
Darkorchid
#8B0000
Darkred
#E9967A
Darksalmon
#8FBC8B
Darkseagreen
#483D8B
 5

Darkslateblue
#2F4F4F
Darkslategray
#00CED1
Darkturquoise
#9400D3
Darkviolet
#FF1493
Deeppink
#00BFFF
Deepskyblue
#696969
Dimgray
#1E90FF
Dodgerblue
#B22222
Firebrick
#FFFAF0
Floralwhite
#228B22
Forestgreen
#FF00FF
Fuchsia
#DCDCDC
Gainsboro
#F8F8FF
Ghostwhite
#FFD700
Gold
#DAA520
Goldenrod
#808080
Gray
#008000
Green
#ADFF2F
Greenyellow
#F0FFF0
Honeydew
#FF69B4
Hotpink
#CD5C5C
Indianred
 6

#4B0082
Indigo
#FFFFF0
Ivory
#F0E68C
Khaki
#E6E6FA
Lavender
#FFF0F5
Lavenderblush
#7CFC00
Lawngreen
#FFFACD
Lemonchiffon
#ADE8E6
Lightblue
#F08080
Lightcoral
#E0FFFF
Lightcyan
#FAFAD2
Lightgoldenrodyellow
#90EE90
Lightgreen
#D3D3D3
Lightgray
#FFB6C1
Lightpink
#FFA072
Lightsalmon
#20B2AA
Lightseagreen
#87CEFA
Lightskyblue
#778899
Lightslategray
#B0C4DE
Lightsteelblue
#FFFFE0
Lightyellow
#00FF00
Lime
#32CD32
 7

Limegreen
#FAF0E6
Linen
#FF00FF
Magenta
#800000
Maroon
#66CDAA
Mediumaquamarine
#0000CD
Mediumblue
#BA55D3
Mediumorchid
#9370DB
Mediumpurple
#3CB371
Mediumseagreen
#7B68EE
Mediumslateblue
#00FA9A
Mediumspringgreen
#48D1CC
Mediumturquoise
#C71585
Mediumvioletred
#191970
Midnightblue
#F5FFFA
Mintcream
#FFE4E1
Mistyrose
#FFE4E1
Moccasin
#FFDEAD
Navajowhite
#000080
Navy
#FDF5E6
Oldlace
#808000
Olive
#6B8E23
Olivedrab
 8

#FFA500
Orange
#FF100%0
Orangered
#DA70D6
Orchid
#EEE8AA
Palegoldenrod
#98FB98
Palgreen
#AFEEEE
Paleturquoise
#DB7093
Palevioletred
#FFEFD5
Papayawhip
#FFDAB9
Peachpuff
#CD853F
Peru
#FFC0CB
Pink
#DDA0DD
Plum
#B0E0E6
Powderblue
#800080
Purple
#FF0000
Red
#BC8F8F
Rosybrown
#4169E1
Royalblue
#8B4513
Saddlebrown
#FA8072
Salmon
#F4A460
Sandybrown
#2E8B57
Seagreen
#FFF5EE
 9

Seashell
#A0522D
Sienna
#C0C0C0
Silver
#87CEEB
Skyblue
#708090
Slategray
#FFFAFA
Snow
#00FF7F
Springgreen
#4682B4
Steelblue
#D2B48C
Tan
#008080
Teal
#D8BFD8
Thistle
#FF6347
Tomato
#40E0D0
Turquoise
#EE82EE
Violet
#F5DEB3
Wheat
#FFFFFF
White
#F5F5F5
Whitesmoke
#FFFF00
Yellow
#9ACD32
Yellowgreen
 10

PENGATURAN HALAMAN WEB DAN TEKS

Untuk mendapatkan halaman web yang lebih baik kita harus melakukan
pengaturan terhadap halaman web dan teks-teks yang terdapat dalam web.
Pengaturan yang dimaksud seperti mengatur background halaman web,
mengatur ukuran dan jenis teks, memberi warna pada teks, menambahkan
gambar, dll. Berikut adalah tag-tag yang digunakan untuk mengatur halaman
web:
BODY
Tag <body> digunakan untuk mendefinisikan teks beserta
formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam
tag ini diletakkan berbagai atribut, seoertu bgcolor, backround image
(untuk membuat background halaman web berasal dari sebuah
image/gambar), text, link, vlink, alink, leftmargin dan topmargin.

Berikut dibawah ini merupakan atribut-atribut yang digunakan dalam tag

<body>:
Background Digunakan untk mengatur latar belakang halaman web
dengan menggunakan gambar/image.
Bgcolor Digunakan untuk mengatur latar belakang halaman web
dengan menggunakan pilihan warna. Pada default, latar
belakang halaman web berwarna white(putih).
Teks Digunakan untuk mengatur warna teks dokumen, dengan
warna hitam sebagai warna default.
Link Untuk mengatur warna link dokumen dengan warna biru
sebagai warna default.
Vlink Untuk mengatur visited link dokumen dengan warna
default ungu.
 11

Alink Digunakan untuk mengatur warna active link dokumen

dengan default merah.

HEADING
<hn> </hn> digunakan untuk mengatur ukuran huruf pada header. “n”
mempunyai nilai antara 1-6 atau <h1> sampai <h6>. Dengan <h1>
merupakan ukuran tebesar dan <h6> merupakan ukuran terkecil.
Contoh program:

Gambar 5 Contoh program menggunakan heading

Hasil program setelah dijalankan:

Gambar 6 Hasil program menggunakan heading

 12

LINE BREAK
Kita dapat memaksakan ganti baris pada halaman web. Ganti baris
disini dimaksudkan hanya menyajikan informasi pada baris sendiri tetapi
tidak berganti paragraph. Untuk menampilkan suatu teks ditampilkan pada
baris yang baru. Line break <BR> digunakan untuk pindah ke baris baru.

NO LINE BREAK
No line break <NOBR> digunakan tag ini maka teks yang panjang
tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu
panjang.

FONT
Font <FONT> digunakan untuk mengatur huruf dokumen HTML. Tag
FONT mempunyai attribut, yaitu : Size, Face, Color.

 Size : Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan
berkisar antara 1-7 dengan 1 merupakan ukuran terkecil dan 7 merupakan
ukuran terbesar.
 Face : Digunakan untuk mengatur jenis atau nama font. Bisa memilih
maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila
terdapat spasi yang terletak pada nama font maka harus digunakan tanda
garis bawah (_). Dalam memilih jenis font ini harus di

BASE FONT
Digunakan untuk mendefinisikan “default teks”/teks dasar.
Attributenya sama dengan attribute font. Tag font akan mengoverwrite setting
pada base font.

Kita dapat memformat secara khusus untuk menunjukkan perbedaan

dan penekanan terhadap isi dan maksud dari teks tersebut. Pembedaan
 13

ditampilkan dalam Bentuk huruf tebal, miring (italic), digarisbawahi, dan

semacamnya.

Dibawah ini merupakan beberapa macam pemformatan teks:

 <b> : bold teks (digunakan untuk menebalkan huruf/teks)

 <i> : italic teks (digunakan untuk memiringkan huruf/teks)
 <u> : underline teks (digunakan untuk memberi garis bawah pada
huruf/teks)
 <tt> : typewriter
 <s> : strikeout
 <pre> : preformatted text
 <dfn> : definition
 <blink> : teks berkedip
 <strong> : strong (hasil dari format ini akan mirip dengan bold)
 <em> : emphasize (hasil dari format ini akan mirip dengan italic)
 <cite> : digunakan untuk quoting text
 <code> : monospaced font (digunakan bila ingin
meletakkan/memperlihatkan kode HTML pada
dokumen HTML.
 <samp> : monospaced font
 <kbd> : monospaced font
 <big> : ukuran teks akan lebih besar satu ukuran
 <small> : ukuran font akan lebih kecil satu ukuran
 <sup> : membuat teks super script
 <sub> : membuat teks sub script
 <abbrev> : abbreviations
 <acronym> : untuk akronim
 <person> : digunakan untuk indexing
 <q> : untuk membuat short inline quotation
 14

 <var> : membuat variable name, selalu dalam italic

 15

HORIZONTAL LINE
Horizontal line <HR> digunakan untuk membuat garis horizontal. Tag ini
mempunyai atribut SIZE, WIDTH, ALION dan NOSHADE. Atribut size digunakan
untuk menentukan panjang garis dalam satuan pixel. Atribut width digunakan yntuk
membentuk ketebalan garis. Atribut Noshade menampilkan garis tanpa bayangan 3D.

Contoh Program Horizontal:

Gambar 7 Contoh program horizontal

Hasilnya adalah :

Gambar 8 Hasil program horizontal

 16

LISTS
List merupakan kumpulan teks yang disusun sedemikian rupa sehingga item-
item yang ada memiliki nomor urut atau bisa juga berupa tanda-tanda khusus. Ada
tiga tipe list yang dapat digunakan yaitu:

UNORDERED LISTS
Unordered List <ul> untuk membuat daftar item dengan tanda tidak
bernomor. List entries ditulis dengan <li>. Jenis ini tidak memerlukan pengurutan
data.

Bentuk item tanda pada unordered list dapat diubah dengan menggunakan
atribut Type kedalam tanda <ul> dengan tandai “cyrcle” untuk bentuk lingkaran
tengahnya putih, “square” untuk bentuk kotak padat hitam dan “disc” benuk
lingkaran warna hitam.

Contoh program Unorderedlist:

Gambar 9 Contoh program Unorderedlist

Hasil program setelah dijalankan:

 17

Gambar 10 Hasil program Unorderedlist

ORDERED LIST
Ordered List <ol> digunakan untuk membuat daftar item bernomor, dengan
tiap item dapat menggunakan angka romawi. List entries tulis dengan tanda <li>.
Atribut yang ada pada Ordered List adalah Type dan Start.

Contoh program Orderedlist:

Gambar 11 Contoh program Orderedlist

Hasil program setelah dijalankan:

 18

Gambar 12 Hasil program orderedlist

DEFINITION LIST
Definition list <dl>, digunakan untuk menjelaskan istilah-istilah. Definition
list dinyatakan dengan <dl> dan diantara tag tersebut ditambahkan tanda <dt>
Definition Term yaitu bagian istilah yang ditulis dengan tanda <dd> Definition data
yang merupakan istilah.

Contoh program Definitionlist:

Gambar 13 Contoh program Definitionlist

Hasil program setelah dijalankan:

 19

Gambar 14 Hasil program definition list

PREFORMATTED TEXT
Preformatted text <pre>, digunakan untuk mengatur format tampilan supaya
sesuai dengan aslinya.

Contoh program Preformatted text:

Gambar 15 contoh program preformatted text

Hasil program setelah dijalankan:

 20

Gambar 16 Hasil program preformatted text

EKSTENDED QUOTATIONS
Ekstended Quotations dengan tag <BLOCKQUOTE> adalah perintah
untuk membuat semua teks atau kutipan panjang pada saat di browser tampilannya
agak masuk ke dalam dari pinggiran garis tepi.

Contoh program:

Gambar 17 Contoh program menggunakan sintag <blockquote>

 21

Hasil setelah program dijalankan:

Gambar 18 Hasil program menggunakan sintag <blockquote>

Jika ingin membuat teks atau paragraf dengan tampilan pada baris pertama
agak masuk ke dalam, gunakan perintah <DD> yang merupakan singkatan dari
Definition Description dan perintah <P> yang merupakan singkatan dari Paragraph
untuk memisahkan paragraf yang satu dengan paragraf yang lain. Sintak <P> juga
membutuhkan sintak penutup </P>.

Contoh Program:
 22

Gambar 19 Contoh progam menggunakan sintag <DD> dan <P>

Hasil setelah program dijalankan:

Gambar 20 Hasil progam menggunakan sintag <DD> dan <P>

 23

HYPERTEXT LINK
Hyperlink adalah sebuah fungsi khusus untuk menghubungkan setiap masing-
masing halaman website anda satu sama lainnya atau ke website yang lain, jadi jika
pengunjung website anda sedang mengklik suatu kata atau gambar yang mengandung
hyperlink, maka ia akan diarahkan untuk menuju ke alamat URL yang ada di dalam
hyperlink tersebut.

Salah satu perintah HTML untuk membuat link (membuka sebuah halaman
atau URL dari sebuah halaman) adalah href. Sintaknya adalah <a href=”gambar
atau halaman atau url”>nama link</a>.

Sebagai contoh, buatlah dua atau lebih program dengan ketentuan sesuai
dengan yang anda inginkan. Misalnya, rancang file pertama dan simpan dengan nama
halaman pertama.html. Inilah file utama atau file induk. Isinya boleh sembarang
sesuai dengan keinginan kami. File kedua misalnya berisi biodata kami, maka kami
harus merancang file kedua dan simpan dengan nama profil saya.html. File ketiga
misalnya berisi tentang jadwal kuliah kami, maka kami harus merancang file ketiga
dan simpan dengan nama jadwal kuliah.html.

Contoh Program:

1. File pertama
File pertama dengan nama halaman pertama.html yaitu halaman awal
dari website yang kami buat. Halaman ini memuat dua alamat link dan
beberapa gambar. Gambar di sini dibuat dengan memasukkan sintak <img
src=”nama file gambar”> pada program.

Contoh Program:
 24

Gambar 21 Contoh program menggunakan sintak <img src=nama file gambar>

Hasil setelah program dijalankan:

Gambar 22 Hasil program menggunakan sintak <img src=nama file gambar>

2. File kedua
 25

Pada file kedua dengan nama profil saya.html, kami mencoba

membuat link ke alamat URL atau Website lain, misalnya ke alamat social
media yang kami gunakan. Kami coba dengan menambahkan sintak
<a href=http://nama_URL> pada program. Misalnya <a
href=http://twitter.com/Eka_Ekanoo>Follow me on twitter</a>. Maka secara
otomatis langsung masuk ke alamat tersebut.
Contoh program:

Gambar 23 Contoh program link ke alamat URL atau Website

Hasil setelah program dijalankan:

 26

Gambar 24 Hasil program menggunakan link ke alamat URL atau Website lain

3. File ketiga
Pada file ketiga yang diberi nama jadwal kuliah.html, kami membuat
tabel. Tiga sintak utama yang digunakan adalah <table>, <tr>,dan <td>.
Sintak <table> digunakan untuk membuat tabel, sintak <tr> yang merupakan
singkatan dari Table Row digunakan untuk membuat baris di dalam sebuah
tabel, sedangkan sintak <td> mendefinisikan sel kolom di dalam sebuah tabel.
Pada tabel, kami juga menggunakan caption untuk judul tabel yang terletak di
luar tabel, dan letaknya bisa di atas maupun di bawah tabel, tergantung align
yang kita gunakan pada elemen caption tersebut, apakah top atau bottom.
sintaknya <caption align=top><b><u>”judul tabel”</u></b></caption>.
Kami gunakan <th> yang merupakan singkatan dari Table Header untuk judul
pada kolom, dan judul kolom akan tercetak tebal.

Contoh program:
 27

Gambar 25 Contoh program tabel

Hasil setelah program dijalankan;

Gambar 26 Hasil program tabel