Scribd
Unggah
102 tayangan14 halaman

Modul Pemrograman WEB (TM1)

Modul ini memberikan penjelasan tentang dasar-dasar pemrograman web meliputi pengenalan HTML, tag-tag dasar HTML, aturan penulisan dokumen HTML, membuat judul, subjudul, garis horizontal, dan format teks. Modul ini bertujuan membantu mahasiswa memahami konsep dasar pembuatan dokumen web sederhana menggunakan bahasa pemrograman HTML.

Diunggah oleh

dimas
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
102 tayangan14 halaman

Modul Pemrograman WEB (TM1)

Modul ini memberikan penjelasan tentang dasar-dasar pemrograman web meliputi pengenalan HTML, tag-tag dasar HTML, aturan penulisan dokumen HTML, membuat judul, subjudul, garis horizontal, dan format teks. Modul ini bertujuan membantu mahasiswa memahami konsep dasar pembuatan dokumen web sederhana menggunakan bahasa pemrograman HTML.

Diunggah oleh

dimas
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai DOC, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 14

MODUL PERKULIAHAN

Pemrograman
Web

UNIVERSITAS MERCU
BUANA 2018

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

01
Ilmu Komputer Sistem Informasi Kode MK Sarwati Rahayu, ST., MMSI

Abstract Kompetensi
Dimulai dengan persiapan awal, Diharapkan mahasiswa dapat mengenal
mahasiswa akan mengenal tag-tag dan memahami tag-tag dasar HTML
dasar HTML, Aturan-aturan dasar dan Format penulisan pada dokumen
penulisan tag HTML, Membuat judul HTML
dengan Title, Menyusun Heading serta
format FONT dan pewarnaan
Background
Pembahasan
1.1. Definisi HTML
HTML merupakan singkatan dari HyperText MarkUp Language. HTML dapat dibuat
pada sembarang editor, meski ada software-software khusus yang dimaksudkan untuk
memudahkan pekerjaan. Adapun editor-editor yang dimaksud adalah NotePad, WordPad,
MS Word, Excel dan lain-lain.

Pembuatan teks HTML hampir sama dengan pembuatan teks-teks lainnya seperti
pada MS Word. Pemberian format pada suatu teks dalam sebuah dokumen akan bisa
langsung terlihat hasilnya. Contohnya, jika Anda ingin membuat sebuah dokumen pada MS
Word dan memformatnya sehingga salah satu kata/kalimat ingin diberikan format huruf tebal
(Bold), miring (Italic), atau Garis bawah pada teks (UnderLine), maka hasilnya segera dapat
dilihat pada dokumen tersebut. Berbeda dengan dokumen HTML, format-format yang
diberikan pada suatu teks tidak bisa dilihat langsung hasilnya, tetapi harus menggunakan
program khusus, yaitu “Web Browser” atau “Browser”

Perbedaan yang lebih mendasar terhadap dokumen-dokumen lainnya yaitu,


dokumen HTML bisa mengandung Link/hubungan kebagian lain dari sebuah dokumen atau
dokumen lain dari situs Web, baik dalam server Web yang dama ataupun ke Server Web
lainnya. Ciri adanya unsur link ini pada sebuah dokumen HTML, biasanya suatu teks
ditandai dengan warna biru dan garis bawah. Apabila pointer mouse diarahkan ke link
tersebut, maka pointer mouse akan berubah menjadi gambar telapak tangan.

1.2. Persiapan Awal


Beberapa hal yang perlu dipersiapkan sebelum mulai membuat dokumen HTML,
diantaranya adalah persiapan software editor dan software Web Browser. Editor HTML yang
akan digunakan pada buku ini adalah editor NotePad (walaupun dapat digunakan editor
apapun). Sedangkan Web Browser yang digunakan adalah Mozilla Firefox dan Internet
Explorer (IE).

Ada beberapa tips khusus dalam penggunaan software-software di atas, seperti


misalnya dalam penggunaan editor HTML sebaiknya gunakan editor yang tidak terlalu
banyak menyita memory komputer, Dan yang paling terpenting adalah software tersebut
compatibel dengan sistem komputer yang dimiliki.

2018 Pemrograman Web 1l


2 Sarwati Rahayu, ST., MMSI
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
1.3. Tag-tag Dasar HTML
Bentuk umum penulisan dokumen HTML adalah sebagai berikut :

<HTML>
<HEAD>
<TITLE> Teks Judul </TITLE>
</HEAD>
<BODY>
Isi Dokumen
</BODY>
</HTML>

Berikut ini adalah penjelasa kode pada bentuk umum penulisan dokumen HTML :

 Pasangan tag <HTML> dan </HTML> menandakan bahwa kode yang terdapat di
dalamnya adalah kode HTML sehingga browser akan menterjemahkan sebagai
dokumen HTML.
 Bagian yang terdapat dalam <HTML> dan </HTML> umumnya terbagi atas kepala
dan badan
 Bagian Kepala ditandai dengan pasangan tag <HEAD> dan </HEAD>. Pada Bagian
ini, bisa ditentukan judul dokumen HTML yang dituliskan dengan pasangan <TITLE> dan
</TITLE>.
 Bagian badan ditandai dengan <BODY> dan </BODY>. Di dalam bagian inilah dapat
dituliskan teks-teks, penyisipan gambar, Link, atau pembuatan tabel.

1.4. Aturan-aturan Dasar HTML


Ada beberapa aturan-aturan dasar yang berlaku dalam penulisan tag-tag pada
HTML :

1. Setiap tag HTML harus diapit oleh tanda lebih kecil dan lebih besar
<……..>

2. Tag yang dituliskan dapat berupa huruf kecil ataupun huruf kapital. Penulisan huruf
kecil atau kapital akan memberikan hasil yang sama. Meskipun demikian, sebaiknya
penulisan tag dituliskan dalam huruf kapital.
3. Hampir semua tag adalah tag yang berpasangan. Ciri dari tag yang berpasangan
adalah selalu mempunyai tag awal dan tag akhir. Tag awal ditandai dengan <…..> dan
tag akhir diikuti dengan tag slash-nya </…..>.
Contoh tag berpasangan :

<HTML>………</HTML>

2018 Pemrograman Web 1l


3 Sarwati Rahayu, ST., MMSI
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
<BODY>………</BODY>
<HEAD>………</HEAD>
4. Browser akan mengabaikan spasi atau baris baru pada teks yang diapit oleh tag.
Contoh di bawah ini akan menampilkan hasil yang sama pada browser :
<BODY> Isi dokumen </BODY>

atau

<BODY>

Isi dokumen

</BODY>

5. File dokumen HTML harus disimpan sebagai file teks murni, dengan menggunakan
ekstensi html atau htm.

1.5. Struktur Dasar Dokumen HTML


Struktur dasar dokumen HTML seperti yang telah dijelaskan pada sub-bab 1.3,
contohnya adalah :

FILE : coba.htm

<HTML>
<HEAD>
<TITLE> Selamat Belajar HTML Judul
</TITLE>
</HEAD>
<BODY>
Selamat Datang
</BODY>
</HTML>

Gambar 1.1 Hasil coba.htm

2018 Pemrograman Web 1l


4 Sarwati Rahayu, ST., MMSI
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
1.6. Menyusun Heading dan Sub-Heading
HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang
dijadikan sebagai judul dalam badan dokumen. Tag-tag judul ini berupa :

<Hx>……………</Hx>

dimana : Nilai x = 1, 2, 3, 4, 5, 6

FILE : heading.htm
<HTML>
<HEAD>
<TITLE> Selamat Belajar HTML </TITLE>
</HEAD>
<BODY>
<H1>Belajar HTML</H1>
<H2>Belajar HTML</H2>
<H3>Belajar HTML</H3>
<H4>Belajar HTML</H4>
<H5>Belajar HTML</H5>
<H6>Belajar HTML</H6>
</BODY>
</HTML>

Gambar 1.2 Hasil heading.htm

1.6.1. Atribut pada Heading

2018 Pemrograman Web 1l


5 Sarwati Rahayu, ST., MMSI
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
Heading mempunyai atribut ALIGN dengan value/nilainya adalah center, left, right.
Contoh beriut ini adalah format penulisan atribut Align pada tag <Hx> :

<Hx ALIGN=”[left, center, right]”> Teks Judul <Hx>

Dimana :

- Left : Untuk mengatur teks rata kiri


- Center : Untuk mengatur teks rata tengah
- Right : Untuk mengatur teks rata kanan

FILE : athead.htm

<HTML>
<HEAD>
<TITLE> Membuat Atribut Judul </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="center">Belajar HTML</H1>
<H2 ALIGN="right">Belajar HTML</H2>
<H3 ALIGN="left">Belajar HTML</H3>
<H4 ALIGN="center">Belajar HTML</H4>
<H5 ALIGN="right">Belajar HTML</H5>
<H6 ALIGN="left">Belajar HTML</H6>
</BODY>
</HTML>

2018 Pemrograman Web 1l


6 Sarwati Rahayu, ST., MMSI
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
Gambar 1.3 Hasil athead.htm

1.7. Membuat Horizontal Rule


Horizontal Rule atau biasa yang disebut dengan garis horisontal, sering dipakai
dalam pembuatan disain website. Tag yang digunakan untuk membuat garis horisontal
adalah tag <HR>. Tag ini bukanlah merupakan tag yan berpasangan, oleh sebab itu tag ini
tidak perlu diakhiri dengan tag slash-nya </HR>. Panjang garis horisontal yang terbentuk
adalah panjangnya sama dengan panjang jendela browsernya. Kendati demikian, tag <HR>
mempunyai beberapa atribut yang dapat menentukan panjang garis, lebar garis, warna
garis, posisi garis, dan efek bayang-bayang tiga dimensi.

FILE : hr.htm

2018 Pemrograman Web 1l


7 Sarwati Rahayu, ST., MMSI
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
<HTML>

<HEAD>

<TITLE> Membuat horozontal rule </TITLE>

</HEAD>

<BODY>

garis horizontal

<HR>

</BODY>

</HTML>

Horizontal Rule
ditampilkan sepanjang
jendela browsernya

Gambar 1.4 Hasil hr.htm

1.7.1. Atribut pada <HR>


Atribut yang terdapat pada <HR> adalah width, length, dan color. Penggunaan
atribut-atribut pada <HR> adalah sebagai berikut :

<HR ALIGN=”a” WIDTH=”x” SIZE=”y” COLOR = “z”


NOSHADE>

Dimana :

- a = posisi garis (left, center, right)

2018 Pemrograman Web 1l


8 Sarwati Rahayu, ST., MMSI
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
- x = panjang garis (satuan pixel)
- y = tinggi garis (satuan pixel)
- z = warna garis
- NOSHADE = Garis tampil tanpa bayang-bayang tiga dimensi

FILE : athr.htm

<HTML>
<HEAD>
<TITLE> Membuat atribut horizontal rule </TITLE>
</HEAD>
<BODY>
garis horizontal dengan berbagai atribut<BR>
<HR ALIGN="left" WIDTH=”300” SIZE=”5” COLOR=”blue” NOSHADE>
<HR ALIGN="center" WIDTH=”400” SIZE=”10” COLOR=”green”>
<HR ALIGN="right" WIDTH=”150” SIZE=”5” COLOR="pink" NOSHADE>
</BODY>
</HTML>

Gambar 1.5 Hasil athr.htm

1.8. Fungsi Break


Line Break <BR> adalah tag yang berguna untuk membuat baris baru pada sebuah
dokumen HTML. Tag ini secara otomatis akan membuat baris baru tanpa memberi baris

2018 Pemrograman Web 1l


9 Sarwati Rahayu, ST., MMSI
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
kosong dan akan memotong sebarisan teks pada tempat dimana tag <BR> tersebut
diletakkan/disisipkan.

FILE : br.htm

<HTML>

<HEAD>

<TITLE> Membuat baris baru </TITLE>

</HEAD>

<BODY>

Bunga Nusa Indah <BR>

Berwarna <BR> Merah

</BODY>

</HTML>

Gambar 1.6 Hasil br.htm

1.9. FORMAT TEKS


Format teks pada dokumen HTML dapat menampilkan berbagai jenis font, ukuran
font, dan warna font pada layar. Atribut-atribut yang digunakan pada <FONT> adalah SIZE,

2018 Pemrograman Web 1l


10 Sarwati Rahayu, ST., MMSI
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
FACE, dan COLOR. Tag <FONT> ini merupakan tag berpasangan, oleh sebab itu harus
diakhiri dengan tag slash-nya </FONT>.

<FONT SIZE=”x” FACE=”y” COLOR=”z”> teks </FONT>

Dimana :

- x = ukuran font (1-7)


- y = jenis font (Comic Sans MS, Arial, Courier, dll)
- z = warna font (red, blue, green)

Ukuran font (SIZE) dapat diperbesar dan diperkecil dari nilai 1 sampai dengan 7
(default font adalah 3). Sedangkan untuk jenis huruf digunakan atribut FACE yang
mempunyai nilai atau jenis huruf yang lazim pada pengolah kata (Misalnya pada MS.
WORD) yaitu Comic Sans MS, Arial, Courier, dll). Penulisan jenis font ini harus sesuai
dengan font yang sudah lazim digunakan.

Atribut warna dapat mengubah suatu warna teks dengan memberikan nilai pada
atribut tersebut. Ada dua bentuk pemberian nilai warna yang bisa dipakai pada atribut
COLOR ini, yaitu yang pertama dengan menggunakan nama warna itu sendiri, contohnya
blue, red, dan green. Sedangkan yang kedua adalah dengan menggunakan kode RGB
suatu warna seperti, #000000 = Black, #0000FF.

Selain itu, format teks dapat dilakukan secara khusus untuk menunjukkan perbedaan
dan penekanan terhadap isi dan maksud dari teks tersebut. Pembedaan ditampilkan dalam
bentuk huruf tebal (bold) menggunakan <B>teks</B>, miring (italic) menggunakan
<I>teks</I>, digaris bawahi (underline) menggunakan <U>teks</U>, subscript menggunakan
<SUB>teks</SUB>, superscript menggunakan <SUP>teks</SUP>, dan semacamnya.

Beberapa Contoh Warna :

Tabel 1.1 Contoh warna

Nama Warna Heksa Nama Warna Hexsa

2018 Pemrograman Web 1l


11 Sarwati Rahayu, ST., MMSI
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
Antiquewhite FAEBD7 Gold FFD700
Aqua 00FFFF Gray 808080
Black 000000 Green 008000
Blue 0000FF Greenyellow ADFF2F
Brown A52A2A Honeydew FOFFFO
Coral FF7F50 Magenta FF00FF
Cyan 00FFFF Orange FFA500
Darkgreen 006400 Skyblue 87CEEB

FILE : font.htm

<HTML>
<HEAD>
<TITLE> Format Teks </TITLE>
</HEAD>
<BODY>
<FONT SIZE="6" FACE="Courier" COLOR="red">Bunga Nusa Indah </FONT><BR>
Berwarna <BR> Merah
</BODY>
</HTML>

Gambar 1.7 Hasil font

1.10. Pewarnaan Background


Web site yang dibuat, kurang menarik jika belum disisipkan warna pada latar
belakang dari sebuah dokumennya. Pewarnaan pada latar belakang dokumen dapat
digunakan atribut pada <BODY>, yaitu atribut BGCOLOR. Adapaun warna yang dapat
digunakan bisa dilihat pada tabel 1.1 di atas. Pembuatan warna background haruslah

2018 Pemrograman Web 1l


12 Sarwati Rahayu, ST., MMSI
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
disesuaikan dengan warna teksnya. Jangan sampai Web site yang dibuat, nantinya akan
menampilkan tulisan-tulisan yang tidak dapat dibaca.

FILE : warna.htm

<HTML>

<HEAD>

<TITLE> Pemberian warna background </TITLE>

</HEAD>

<BODY BGCOLOR="honeydew">

<FONT SIZE="3" FACE="Courier" COLOR="magenta">Teks dengan warna magenta dan


menggunakan warna background honeydew </FONT><BR>

</BODY>

</HTML>

Gambar 1.8 Hasil warna.htm

Daftar Pustaka

2018 Pemrograman Web 1l


13 Sarwati Rahayu, ST., MMSI
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
- Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP, Penerbit
Andi, Yogyakarta, 2002

- Ahmad Bustami, Cara Mudah Belajar Internet HomeSite dan HTML, Penerbit Dinastindo,
Jakarta 1999

- Betha Sidik, etc, Pemrograman Web dengan HTML, Penerbit Informatika, Bandung, 2002

- Inixindo, Pengembangan HomePage & Intranet, Jakarta 1998

2018 Pemrograman Web 1l


14 Sarwati Rahayu, ST., MMSI
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id

Anda mungkin juga menyukai