Modul

MODUL PERKULIAHAN
Pemrograman
Web - 1
Tag Dasar HTML & Struktur

Dasar HTML
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
01
Fakultas? Teknik Informatika W151700011 Joko Adianto, GrdDipBIT, MInfSys
Abstract Kompetensi
Modul ini mempelajari tag dasar html, Mahasiswa mampu membuat dokumen
struktur dasar html dan membuat judul html sederhana menggunakan text
dengan (title), menyusun heading dan editor dan menampilkannya lewat
sub heading serta menentukan posisi browser
heading.
2019 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

2 Joko Adianto http://www.mercubuana.ac.id
Pembahasan
Apakah web
Web (World Wide Web) merupakan salah satu layanan yang didapat oleh pemakai
komputer yang
terhubung ke internet, yang dapat memudahkan pengguna komputer untuk berinteraksi

dengan
pengguna internet lainnya dan mencari informasi yang diperlukan.
Web browser :
Browser web merupakan software yang digunakan untuk menampilkan informasi dari server
web.
Contoh dari web browser : Opera, Mozzila, Netscape Navigator, Internet Explorer, Lynx,
Konqueror.
Server web :
Server web adalah komputer yang digunakan untuk menyimpan dokumen-dokumen web,
komputer ini akan melayani permintaan dokumen web dari kliennya.
Contoh dari web server : IIS, PWS, Apache, Xitami.
Pemrograman web (HTML)
Dalam pemrograman web, diperlukan suatu file teks yang bernama atau berekstensi HTML
(Hypertext Markup Language).
Ada dua cara untuk membuat sebuah web page :
1. dengan menggunakan editor teks biasa (notepad, editplus)
2. dengan HTML Editor.
Dokumen HTML disusun oleh elemen-elemen seperti : head, body, table, paragraf dan list.
Untuk menandai berbgai elemen dalam suatu dokumen HTML, kita menggunakan tag. Tag
HTML terdiri atas sebuah kurung sudut kiri (<, lebih kecil), sebuah nama tag, dan sebuah

kurung sudut kanan (>, tanda lebih besar). Tag umumnya berpasangan, misalkan tag awal
<H1> berpasangan dengan tag akhir </H1>.
Struktur Dokumen HTML
Elemen yang dibutuhkan untuk membuat suatu dokumen HTML dinyatakan dengan tag
<html>, <head>, dan <body> berikut tag-tag pasangannya. Setiap dokumen terdiri atas tag
head dan body.
Elemen head berisi informasi tentang dokumen tersebut, dan elemen body berisi teks yang
sebenarnya yang tersusun dari link, grafis, paragraf dan elemen lainnya.
Berikut ini adalah pola dasar sebuah dokumen HTML :
<html>
<head>
.... Informasi tentang dokumen HTML.
</head>
<body>
.... Informasi tentang yang akan ditampilkan dalam browser web.
</body>
</html>
Atribut dalam Tag
Beberapa tag mengandung atribut di dalamnya. Contoh :
<P ALIGN=”CENTER”>
Pada contoh ini, P adalah nama tag sedangkan ALIGN adalah nama atribut. Pada
umumnya, atribut melibatkan nilai. Pada contoh di atas, “CENTER” adalah nilai untuk atribut
ALIGN.
Komentar
Komentar adalah bagian dari kode HTML yang diabaikan oleh browser. Kegunaan komentar
dalam kode
HTML adalah sebagai keterangan. Sebuah komentar diawali dengan .
Contoh :

<!— File komentar.htm
Dibuat pada tanggal 4 Agustus 2002 -->
<HTML>
<HEAD>
<TITLE>Komentar</TITLE>
</HEAD>
<BODY>

Selamat Belajar HTML
</BODY>
</HTML>
Tag <BR>
Fungsi tag <BR> adalah untuk membuat baris baru atau berpindah baris.
Contoh :
<HTML>
<HEAD>
<TITLE>Tag BR</TITLE>
</HEAD>
<BODY>
Selamat Belajar HTML<BR>
Semoga Sukses !
</BODY>
</HTML>
Tag <P>
Tag <P> digunakan untuk membuat paragraph.
Contoh :
<HTML>

<HEAD>
<TITLE>Contoh Paragraf</TITLE>
</HEAD>
<BODY>
Pesona Tanaman Hias<P>
Keindahan tanaman hias<BR>
membawa suatu pesona tersendiri<BR>
Warna-warni bunga<BR>
aneka rupa corak daun<BR>
membuat orang dengan senang hati mengoleksinya
</BODY>
</HTML>
Tag Judul
HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang dijadikan
sebagai judul dalam badan dokumen. Tag-tag judul ini berupa :
<H1> ... </H1>
<H2> ... </H2>
<H3> ... </H3>
<H4> ... </H4>
<H5> ... </H5>
<H6> ... </H6>
Contoh :
<HTML>
<HEAD>
<TITLE>Tag H1-H6</TITLE>
</HEAD>
<BODY>

<H1>Tag H1</H1>
<H2>Tag H2</H2>
<H3>Tag H3</H3>
<H4>Tag H4</H4>
<H5>Tag H5</H5>
<H6>Tag H6</H6>
</BODY>
</HTML>
Seperti halnya pada tag <P>, tag judul atau heading ini juga memiliki atribut ALIGN. Nilai
yang dapat diberikan pada ALIGN adalah :
 LEFT (default), mengatur teks rata kiri terhadap halaman
 RIGHT, mengatur teks rata kanan terhadap halaman
 CENTER, menempatkan judul di tengah-tengah layar pada baris yang bersangkutan
 JUSTIFY, mengatur teks rata kiri dan rata kanan. Efeknya terlihat untuk teks yang
sangat panjang.
Tag <HR>
Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis
horisontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan menyertakan
tag
<HR>.
Contoh :
<HTML>
<HEAD>
<TITLE>Tag HR</TITLE>
</HEAD>
<BODY>
<H2>Aneka Tanaman Hias</H2>

<HR>
Aglaonema atau Sri rejeki
<HR>
Begonia
<HR>
Bromelia
<HR>
dll
<HR>
</BODY>
</HTML>
Tabel 1. Daftar atribut tag <HR>
Atribut Keterangan
SIZE Menentukan ketebalan garis
WIDTH Menentukan lebar garis
ALIGN Menentukan peletakkan teks dalam baris
NOSHADE Mengatur agar garis tidak disertai bayangan
Tag <CENTER>
Untuk menengahkan suatu teks, bisa juga digunakan tag <CENTER>. Tentu saja, untuk
mengakhiri penengahan teks (yakni agar teks berikutnya tidak ditengahkan), perlu
disertakan
</CENTER>.
Contoh :
<HTML>

<HEAD>
<TITLE>Tag CENTER</TITLE>
</HEAD>
<BODY>
<CENTER>
<H2>Berbagai Jenis Keladi yang mempesona:</H2>
Red Flash
<BR>
Red Fire
<BR>
Fannie Munson
<BR>
Pink Beauty
<BR>
Hilo Beauty
<BR>
Jackie Suthers <BR>
</CENTER>
</BODY>
</HTML>
Tag DIV
Tag divisi (<DIV>) berguna untuk mengelompokkan sejumlah baris teks yang memiliki
karakteristik
yang sama.
Contoh :
<HTML>
<HEAD>

<TITLE>Tag DIV</TITLE>
</HEAD>
<BODY>
<DIV ALIGN = "RIGHT">
<H1><U>PRIMASOFT KREASINDO</U></H1>
<H2>Jl. Kalasan KM 14</H2>
<H2>Yogyakarta</H2>
</DIV>
<HR>
</BODY>
</HTML>
Praktikum 1
Bukalah notepad atau program text editor yang lain. Ketikkan script berikut :
<HTML>
<HEAD>
<TITLE> World Wide Web</TITLE>
<BODY>
<CENTER><H1>Definisi World Wide Web</H1></CENTER>
<P ALIGN=”LEFT”>
WWW adalah layanan yang paling sering digunakan dan memiliki perkembangan yang
sangat cepat karena dengan layanan ini kita bisa menerima informasi dalam berbagai format
(multimedia). Untuk mengakses layanan WWW dari sebuah komputer (yang disebut WWW
server atau web server) digunakan program web client yang disebut web browser atau
browser saja.
Jenisyang sering digunakan adalah : Navigator/Comunicator, Internet Explorer, NCSA
Mosaic, Arena, Lynx, dan lain-lain.
<P ALIGN=”RIGHT”>

Surfing merupakan istilah umum yang digunakan bila menjelajahi dunia maya atau web.
Tampilan web yang sangat artistik yang tidak hanya menampilkan teks tapi juga gambar-
gambar yang di tata sedemikian rupa sehingga selalu membuat betah netter untuk surfing
berjam-jam. Karena itu para netter harus sangat memperhitungkan rencana web mana saja
yang akan dikunjungi atau batasi informasi yang ingin diakses, karena bila tidak netter akan
tersesat kedalam rimba informasi yang maha luas.
</BODY>
</HTML>
Simpan (File|Save As), dengan nama web.html, pada kolom Save As Type, pilihlan All
Files(*.*).
 Buka web browser anda (internet explorer)
 Bukalah dokumen yang anda buat tadi. (File|Open)
 Klik browse: arahkan ke file Contoh1.html, klik OK
Lihatlah hasilnya :
Praktikum 2

Pada praktikum 2 kali ini kita akan belajar menambahkan warna background, dan
pemformatan tampilan teks. Buka kembali file sebelumnya pada program teks editor anda
(notepad). Ubah perintah berikut <BODY BGCOLOR=”PINK”>. Ubah paragraf pertama
menjadi seperti dibawah ini :
<P ALIGN=”LEFT”>
<B>WWW</B> adalah layanan yang paling sering digunakan dan memiliki perkembangan
yang sangat cepat karena dengan layanan ini kita bisa menerima informasi dalam berbagai
format
(multimedia).
Untuk mengakses layanan WWW dari sebuah komputer (yang disebut <U>WWWserver
atau web server </U>) digunakan program web client yang disebut web browser atau
browser saja. Jenis-jenis browser yang sering digunakan adalah:
<I>NetscapeNavigator/Comunicator, Internet Explorer, NCSA Mosaic, Arena, Lynx, dan lain-
lain.</I>
 Simpan hasil editing anda (File|Save)
 Lihat hasil perubahan pada web browser anda.
Praktikum 3
Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
Sebuah perenungan untuk anda para mahasiswa SEKITAR 15-20 tahun yang lalu, lulusan
Strata 1 (S-1) dapat dipastikan bisa memperoleh pekerjaan yang enak dengan cepat. Enak
di sini maksudnya mendapatkan jabatan dan gaji yang baik. Namun, sekarang keadaan
berubah. Tidak sedikit lulusan sarjana yang menganggur karena tidak mendapat pekerjaan
dan tidak bisa membuka usaha sendiri. Untuk menutupi kenyataan menganggur, beberapa
penganggur mencoba melucu dengan mengatakan bekerja di perumtel, kependekan dari
penunggu rumah dan telenovela. Menganggurnya lulusan S-1 tidak saja akibat kondisi di
luar, tetapi juga akibat kondisi dari dalam diri lulusan S-1 itu. Banyak mahasiswa yang tidak
menyiapkan diri dan mentalnya selama kuliah sehingga ketika lulus tidak tahu ke arah mana
harus melangkah.
Sesungguhnya apa yang dipikirkan para lulusan SMU ketika memasuki bangku kuliah dan
bidang studi yang dipilihnya? Menjadi tukang insinyur seperti si Doel anak sekolahan? Lalu,
ke mana setelah itu?

Apakah di benak mereka terpikirkan 3 K: Kuliah, kerja, kawin? Lulus kuliah, mencari
pekerjaan, kemudian menikah, dan seterusnya?
Apakah para mahasiswa itu terkungkung dalam situasi dunianya sendiri tanpa melihat dunia
di luarnya seperti adanya pasar global yang dinamis dan menuntut daya saing sangat
kompetitif?
Siapkan mereka menyambut pasar bebas ASEAN (AFTA) tahun 2003? Pedulikah mereka
pada pengakuan kualitaskelulusan mereka oleh negara lain yang sangat penting untuk
persaingan global dan pasar bebas?
Pedulikah mereka pada posisi sumber daya manusia (SDM) Indonesia di antara SDM
bangsa lain?
Daftar Pustaka
 Janet Valade, Steve Suehring, PHP, MySQL, JavaScript & HTML5 All-in-One For
Dummies, John Wiley & Sons, Inc., New York, 2013
 Adrian West, Steve Prettyman, Practical PHP 7, MySQL 8, and MariaDB Website
Databases : A Simplified Approach to Developing Database-Driven Websites,
Apress, New York. 2018
 Abdul Kadir, Pemrograman Web Mencakup : HTML, CSS, JavaScript & PHP,
Penerbit Andi, Yogyakarta, 2002.
 Betha Sidik, Pemrograman Web Dengan HTML, Penerbit Informatika, Bandung,

2002

Daftar Pustaka

Modul

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL PERKULIAHAN

Tag Dasar HTML & Struktur

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

2019 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

terhubung ke internet, yang dapat memudahkan pengguna komputer untuk berinteraksi

pengguna internet lainnya dan mencari informasi yang diperlukan.

Contoh dari web server : IIS, PWS, Apache, Xitami.

Pemrograman web (HTML)

Ada dua cara untuk membuat sebuah web page :

1. dengan menggunakan editor teks biasa (notepad, editplus)

2. dengan HTML Editor.

2019 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

Struktur Dokumen HTML

Berikut ini adalah pola dasar sebuah dokumen HTML :

.... Informasi tentang dokumen HTML.

.... Informasi tentang yang akan ditampilkan dalam browser web.

Atribut dalam Tag

Beberapa tag mengandung atribut di dalamnya. Contoh :

2019 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

Dibuat pada tanggal 4 Agustus 2002 -->

Selamat Belajar HTML

Selamat Belajar HTML<BR>

Tag <P> digunakan untuk membuat paragraph.

2019 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

Pesona Tanaman Hias<P>

Keindahan tanaman hias<BR>

membawa suatu pesona tersendiri<BR>

aneka rupa corak daun<BR>

membuat orang dengan senang hati mengoleksinya

<H1> ... </H1>

<H2> ... </H2>

<H3> ... </H3>

<H4> ... </H4>

<H5> ... </H5>

<H6> ... </H6>

2019 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

 LEFT (default), mengatur teks rata kiri terhadap halaman

 RIGHT, mengatur teks rata kanan terhadap halaman

 CENTER, menempatkan judul di tengah-tengah layar pada baris yang bersangkutan

Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis

<H2>Aneka Tanaman Hias</H2>

2019 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

Aglaonema atau Sri rejeki

Tabel 1. Daftar atribut tag <HR>

SIZE Menentukan ketebalan garis

WIDTH Menentukan lebar garis

ALIGN Menentukan peletakkan teks dalam baris

NOSHADE Mengatur agar garis tidak disertai bayangan

2019 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

<H2>Berbagai Jenis Keladi yang mempesona:</H2>

Jackie Suthers <BR>

2019 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

<DIV ALIGN = "RIGHT">

<H2>Jl. Kalasan KM 14</H2>

<TITLE> World Wide Web</TITLE>

<CENTER><H1>Definisi World Wide Web</H1></CENTER>

Jenisyang sering digunakan adalah : Navigator/Comunicator, Internet Explorer, NCSA

Mosaic, Arena, Lynx, dan lain-lain.

2019 Nama Mata Kuliah Pusat Bahan Ajar dan eLearning

 Buka web browser anda (internet explorer)

 Bukalah dokumen yang anda buat tadi. (File|Open)