Modul Workshop Pembuatan Website

MODUL
PEMBUATAN WEBSITE
Oleh :
Hamri Efendi, S.Kom
WORKSHOP PEMBUATAN WEBSITE

SMK N 1 MUARA MUNTAI
SEPTEMBER 2016
Modul Workshop Pembuatan Website
2
SMK N 1 Muara Muntai
A. PENDAHULUAN
Perkembangan teknologi selalu menuntut untuk terus di ikuti, karena jika
tidak maka akan tertinggal dan tentu saja akan kehilangan peluang untuk
bersaing. Perlahan tapi pasti, pemerintah pun telah dan sedang melakukan
migrasi ke sistem terkomputerisasi.
Lembaga-lembaga pemerintahan sekarang banyak yang telah meluncurkan

website guna untuk melayani masyarakat agar masyarakat dapat dengan
mudah mendapatkan informasi-informasi terbaru.
Terlebih lagi bagi perusahaan, baik besar maupun kecil, sekarang mau tidak
mau harus memiliki website guna untuk memberikan kepercayaan kepada
masyarakat serta mempromosikan dan memasarkan produk yang dijual.
Dengan menggunakan website, transaksi antara pengusaha dan pelanggan
bisa dengan mudah dilakukan. Mudah, Tepat, dan Cepat.
Pembuatan website merupakan sebuah peluang yang harus diambil. Dan

keahlian dalam pembuatan website harus dikuasai. Keahlian dalam
membuat website haruslah dimiliki oleh setiap siswa yang memilih bidang
IT (Information Technology).
B. TAHAP-TAHAP PEMBUATAN WEBSITE

1. Kumpulkan dan Pelajari
Tahap pertama dalam membuat situs web adalah mengumpulkan
informasi sebanyak mungkin, untuk mempelajari apa saja yang Anda
inginkan (dan tidak inginkan) bagi situs web Anda. Anda bisa
melakukannya dengan melihat situs web yang saat ini Anda gunakan,
bersama dengan pesaing Anda, dan meminta tanggapan dari teman-
teman dan rekan-rekan bisnis.
Seperti perusahaan-perusahaan lain, Anda bisa memilih untuk
menggunakan jasa perancang web yang berpengalaman untuk membuat
situs web Anda. Bersiaplah untuk menjawab pertanyaan-pertanyaan
penting, karena jawaban-jawaban tersebut diperlukan untuk membuat
“ringkasan kreatif”. Ringkasan kreatif akan berfungsi sebagai panduan
atau acuan dalam membuat situs web. Tersepas dari apakah Anda
menggunakan perusahaan perancang atau tidak, Anda harus
mengetahui jawaban atas pertanyaan-pertanyaan berikut :
Tujuan
Apa tujuan dari situs web saya? Apakah saya menyediakan
layanan, produk, informasi, atau data?
Sasaran
Tindakan apa yang saya inginkan dari para pengunjung saat
mengunjungi situs web saya?
Hamri Efendi, S.Kom

hamri-efendi.blogspot.co.id | hamrie06@gmail.com | 0852 5046 1586
3
Target Pengunjung
Siapa yang ingin saya capai? Bagaimana demografi
pengunjung saya?
Konten
Jenis informasi apa yang akan dicari oleh pengunjung? Apakah
mereka mencari informasi spesifik, produk tertentu, atau
pemesanan secara online?
2. Perencanaan
Informasi yang Anda kumpulkan pada Tahap 1 akan sangat membantu
perencanaan situs web Anda. Tindakan yang harus dilakukan sekarang
adalah:
 Membuat peta situs.
Catat semua bidang topik utama situs
web Anda, termasuk sub-topiknya, untuk
mengembangkan sistem navigasi yang
konsisten dan mudah untuk dipahami.
 Memutuskan teknologi apa yang Anda

butuhkan.
Menentukan apa saja yang Anda
butuhkan, seperti formulir interaktif,
aplikasi flash dan/atau sistem
manajemen konten (CMS).
 Menentukan resolusi tampilan yang

bisa diterima.
Seiring dengan peningkatan pemakaian
perangkat mobile, Anda mungkin ingin
mempertimbangkan rancangan yang
bersifat responsif. Pendekatan ini
memungkinkan sebuah situs web
menyesuaikan tampilannya pada
berbagai resolusi layar, seperti desktop,
tablet PC, atau smartphone.
 Membuat mock-up.
Luangkan waktu untuk mengatur tata
letak halaman berdasarkan pola
rancangan dasar yang ada. Langkah ini
akan membantu Anda memvisualisasikan
rancangan dan memberikan kerangka
kerja bagi situs web Anda.
 Rencanakan konten Anda.

Mengetahui apa saja yang ingin Anda
komunikasikan dan berapa banyak
konten yang Anda miliki akan membantu
memandu proses perancangan.
Hamri Efendi, S.Kom

4
3. Rancangan
Jika Anda sudah menguraikan rincian-rincian dalam Tahap 1 dan 2,
maka perancangan halaman beranda dan semua sub halaman
berikutnya tidak terlalu rumit. Misalnya, dengan mengetahui demografi
pengunjung situs web adalah wanita lajang, kelas menengah, usia 18
hingga 24 tahun, dengan jenjang pendidikan perguruan tinggi
dibandingkan dengan pria yang telah menikah, kelas atas, usia 65
hingga 80 tahun, pensiunan, pasti akan memengaruhi elemen dan
aplikasi perancangan yang digunakan.
Visi Anda terhadap situs web akan terasa hidup dengan melihat tata
letak halaman dengan isi dan foto sungguhan, bersama dengan logo dan
warna-warni yang tertata. Gunakan waktu yang ada untuk membuat
perubahan-perubahan yang diperlukan! Jika Anda menggunakan jasa
perancang berpengalaman, mereka akan menyediakan mock-up atau
prototipe dalam beberapa tahap pengembangan untuk mendapatkan
tanggapan dari Anda. Perubahan akan semakin mahal dan implementasi
akan semakin sulit diterapkan pada tahap-tahap selanjutnya. Gunakan
waktu pada tahapan ini dengan bijaksana.
4. Pengembangan
Setelah rancangan dilakukan dan disetujui, maka proses pembuatan
situs web bisa dimulai. Perancang/pengembang akan mengambil semua
elemen grafis individu dari prototipe dan menggunakannya untuk
Hamri Efendi, S.Kom

5
membuat situs web yang fungsional. Elemen interaktif seperti formulir

kontak, animasi flash, dan kereta belanja akan diimplementasikan pada
tahapan ini. Selama tahapan ini, Anda bisa membuat perubahan dan
koreksi berskala kecil.
5. Pengujian, Pengiriman, dan Peluncuran

Pengembang situs web akan menguji situs web Anda, dari kelengkapan
fungsinya hingga masalah kompatibilitas. Selain itu, pengembang akan
memastikan bahwa semua kode pemrograman yang ditulis untuk
validasi situs web Anda memenuhi standar pemrograman web yang ada
saat ini.
Setelah persetujuan akhir diberikan, berkas-berkas situs web akan

diunggah ke server Anda, dan situs web tersebut bisa langsung diakses
oleh publik.
Hamri Efendi, S.Kom

6
6. Pemeliharaan
Tak kalah penting adalah proses pemeliharaan situs web Anda. Selama
tahap perencanaan proses ini, Anda sudah menentukan apakah proses
pemeliharaan situs web akan dilakukan secara internal atau
dialihdayakan kepada pihak ketiga (seperti perancang situs web Anda).
Jika Anda memutuskan untuk memegang kendali penuh, perancang
harusnya telah membuat halaman CMS situs web untuk memberikan
kemampuan menyunting isi situs web serta menambah halaman baru.
Pengembangan situs web Anda tidak berhenti pada tanggal peluncuran

semata. Layaknya bangunan fisik, Anda harus mengambil langkah-
langkah pemeliharaan untuk memastikan bahwa situs web Anda aman
dan berjalan secara optimal. Pelajari Bagaimana Cara Menarik
Pengunjung Kembali ke situs web Anda dan Bagaimana Cara
Mengoptimalkan Situs Web Bisnis Kecil Anda ke peringkat yang lebih
tinggi pada mesin pencari.
C. PERSIAPAN
Adapun perangkat-perangkat yang harus disiapkan adalah :
1. Komputer  PC, Notebook, Netbook
2. Web Browser  Mozilla Firefox, Chrome, UC Browser, dll.
3. Text Editor  EditPlus, Notepad++, dll.
4. Web Server  XAMPP
5. Macromedia Dreamweaver 8
Hamri Efendi, S.Kom

7
D. DESAIN
Standar desain halaman website memuat komponen berikut :
1. Header
Memuat informasi tentang perusahaan atau lembaga pemilik website
2. Menu
Memuat informasi tentang menu-menu yang disajikan dalam website.
3. Konten
Memuat informasi yang di publish oleh pemilik website
4. Footer
Memuat informasi pengembang website
HEADER
MENU
KONTEN
FOOTER
Hamri Efendi, S.Kom

8
BELAJAR DESAIN DENGAN HTML
1. Struktur halaman HTML

<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
Hallo World...!!!
</body>
</html>
Hasil :
2. Tag Body dan Atributnya

 Menambahkan background warna
Ubah Tag Body seperti dibawah ini :
<body bgcolor=”yellow”>
Hasil :
Hamri Efendi, S.Kom

9
Warna bisa diganti sesuai dengan keinginan, cukup dengan

menuliskan nama warna dalam bahasa Inggris. Atau bisa juga
menuliskan warna dengan notasi heksadesimal.
 Menambahkan background gambar

<body background="gambar/Penguins.jpg">
Hasil :
Background bisa diganti sesuai dengan keinginan dengan cara

menuliskan lokasi gambar. Perlu diperhatikan bahwa dalam
penulisan lokasi ini harus tepat pada lokasi penyimpanan gambar
serta nama gambar dan juga ekstensi gambar.
 Pesan ketika halaman dibuka

<body background="gambar/Penguins.jpg" onLoad="alert('Selamat
Datang')">
Hamri Efendi, S.Kom

10
Hasil :
3. Membuat Format Text Judul

<html>
<head>
<title>Belajar HTML 2</title>
</head>
<body>
<h1>Judul Level 1</h1>
</body>
</html>
Hamri Efendi, S.Kom

11
Hasil :
4. Mengatur Format Font

<html>
<head>
<title>Belajar HTML - Format Font</title>
</head>
<body>
<font size="5" face="Arial" color="red">
Bentuk text arial berwarna merah
</font>
</body>
</html>
Hamri Efendi, S.Kom

12
Hasil :
5. Menampilkan Gambar
<html>
<head>
<title>Belajar HTML - Menampilkan Gambar</title>
</head>
<body>
<img src="gambar/Penguins.jpg" width="50%"
alt="ini gambar" />
</body>
</html>
Hasil :
Hamri Efendi, S.Kom

13
6. Format Text
<html>
<head>
<title>Belajar HTML - Format Text</title>
</head>
<body>
<b>Ini Text Bold - Tebal</b><br>
<i>Ini Text Italic - Miring</i><br>
<u>Ini Text Underline - Garis Bawah</u><br>
<s>Ini Text Striketrue - Garis Tengah</s><br>
Text Superscript : X<sup>2</sup><br>
Text Subscript : H<sub>2</sub>O<br>
</body>
</html>
Hasil :
7. Membuat Garis
<html>
<head>
<title>Belajar HTML - Membuat Garis Dalam
Dokumen</title>
</head>
<body>
<h1 align="right">Ini Adalah Garis</h1>
<hr align="right" width="60%" color="#FF0000"
size="3">
</body>
</html>
Hamri Efendi, S.Kom

14
Hasil :
8. Membuat Link
<html>
<head>
<title>Belajar HTML - Membuat Link</title>
</head>
<body>
<a href="latihan_01.html">Halaman Latihan 01</a><br>
<a href="http://hamri-efendi.blogspot.co.id">Blog
Hamri Efendi</a>
</body>
</html>
Hamri Efendi, S.Kom

15
Hasil :
9. Membuat Animasi Text Bergerak

<html>
<head>
<title>Belajar HTML - Membuat Animasi Text
Bergerak</title>
</head>
<body>
<marquee behavior="alternate"
bgcolor="#33FFCC">Amnimasi Marquee (Alternate)</marquee>
<br><br>
<marquee behavior="scroll" bgcolor="#33FFCC"
direction="left">Amnimasi Marquee (Scroll)</marquee>
<br><br>
<marquee behavior="slide" bgcolor="#33FFCC">Amnimasi
Marquee (Slide)</marquee>
<br><br>
</body>
</html>
Hamri Efendi, S.Kom

16
Hasil :
10. Membuat List (Daftar)

Ada 3 jenis list dalam dokumen HTML yaitu :
1. Ordered List <OL>
Tag <ol> adalah kependekan dari Ordered List, yang artinya list
secara berurutan. List yang ditampilkan nanti oleh tag ini akan
menampilkan nomor disebelah kiri dari detail.
<html>
<head>
<title>Belajar HTML - Membuat List OL</title>
</head>
<body>
TUGAS HARI INI ADALAH :
<ol>
<li>Memasak</li>
<li>Cuci Piring</li>
<li>Cuci Baju</li>
<li>Mandi</li>
<li>Sarapan</li>
<li>Berangkat Sekolah</li>
</ol>
</body>
</html>
Hamri Efendi, S.Kom

17
Hasil :
Secara standar List akan membentuk urutan angka. Jika ingin

mengubah bentuk urutan maka tambahkan atribut Type pada tag
OL.
2. Unordered List <UL>

Unordered List merupakan pengurutan list dengan
menggunakan symbol/bullet. Cara membuatnya sama dengan
Ordered List hanya saja tag <ol> diganti dengan tag <ul>.
<html>
<head>
<title>Belajar HTML - Membuat List UL</title>
</head>
<body>
<ul>
<li>Memasak</li>
<li>Cuci Piring</li>
<li>Cuci Baju</li>
<li>Mandi</li>
<li>Sarapan</li>
<li>Berangkat Sekolah</li>
</ul>
</body>
</html>
Hamri Efendi, S.Kom

18
Hasil :
3. List Tanpa Bullet <DL>

Untuk membuat list tanpa mengunakan bullet/symbol caranya
sama persis dengan pembuatan list dengan tag ol/ul, hanya
saja tag <ul> diganti dengan <dl> lalu tag <li> diganti dengan <dd>
<html>
<head>
<title>Belajar HTML - Membuat List DL</title>
</head>
<body>
<dl>
<dd>Memasak</dd>
<dd>Cuci Piring</dd>
<dd>Cuci Baju</dd>
<dd>Mandi</dd>
<dd>Sarapan</dd>
<dd>Berangkat Sekolah</dd>
</dl>
</body>
</html>
Hamri Efendi, S.Kom

19
Hasil :
11. Membuat Table

Tabel digunakan untuk menyajikan data dalam bentuk kolom dan baris.
Umumnya setiap kolom menunjukan data yang sejenis, dan setiap
baris yang terdiri atas kolom-kolom menunjukan kelompok data dalam
satu kesatuan. Untuk membuat tabel pada html menggunakan tag
<table> dan di akhiri dengan tag </table> lalu di dalam sebuah tag
<table> dan tag </table> dimasukan tag <tr> dan </tr> yang
bekerja sebagai baris pada tabel lalu di dalam sebuah <tr> dan </tr>
terdapat tag <td> dan </td> yang bekerja memberikan sebuah
kolom pada tabel. Selain tag <td> juga berlaku tag <th> yang berfungsi
untuk judul kolom. Untuk mengetahui garis tabel tersebut, kita
menggunakan atribut 'border' pada tag table.
<html>
<head>
<title>Belajar HTML - Membuat Table</title>
</head>
<body>
Daftar Siswa
<table border="1">
<tr>
<th>NO</th>
<th>NAMA</th>
<th>JENIS KELAMIN</th>
</tr>
<tr>
<td>1</td>
<td>Andi</td>
<td>laki-laki</td>
</tr>
<tr>
Hamri Efendi, S.Kom

20
<td>2</td>
<td>Indah</td>
<td>perempuan</td>
</tr>
</table>
</body>
</html>
Hasil :
12. Menggabungkan Baris dan Kolom pada Table

<html>
<head>
<title>Belajar HTML - Menggabungkan Kolom dan
Baris</title>
</head>
<body>
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
</tr>
<tr>
<td colspan="2">
Baris 2, Kolom 1 dan Kolom 2
</td>
<td rowspan="2">
Baris 2 dan Baris 3, Kolom 3
</td>
</tr>
<tr>
Hamri Efendi, S.Kom

21
<td colspan="2" rowspan="2">

Baris 3 dan Baris 3,<br>
Kolom 1 dan Kolom 2
</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
Hasil :
Hamri Efendi, S.Kom

22
LATIHAN
1. Buatlah Format List Seperti Dibawah Ini :
Bagian-Bagian Komputer:
 Hardware :
o Motherboard
o Processor
• Pentium
• AMD
• Zyrek, dll.
o Ram
• SD Ram
• DDR (I, II, III)
o Hardisk
• Sata
• IDE
o VGA
• Card
• AT
• GForce
• Onboad
o LAN
o DVD RW
o Floppy Disk
o Power Suply
 Softrware :
o Operating System:
• Windows
• XP
• Vista
• Seven
• Linux
• Ubuntu
• Debian, dll.
• Mac OS.
o Aplication
• Design
• Programing
• Office
• Word
• Power Point
• Excel
• Access, dll
Hamri Efendi, S.Kom

23
2. Buatlah Desain Tabel Seperti Dibawah Ini :

NILAI
NO NAMA KETERANGAN
UTS UAS RATA-RATA
1 Udin 90 90 90 LULUS
2 Ujang 80 80 80 LULUS
3 Isin 87 78 82,5 LULUS
4 Surisin 50 70 60 TIDAK LULUS
5 Icih 80 79 79,5 LULUS
3. Buat Desain Website Seperti Dibawah Ini :
Hamri Efendi, S.Kom

24
E. PEMROGRAMAN
Akan di Update pada pertemuan selanjutnya…
F. DATABASE
Akan di Update pada pertemuan selanjutnya…
Hamri Efendi, S.Kom


Modul Workshop Pembuatan Website

Diunggah oleh

Informasi Dokumen

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 Workshop Pembuatan Website

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL

WORKSHOP PEMBUATAN WEBSITE

Lembaga-lembaga pemerintahan sekarang banyak yang telah meluncurkan

Pembuatan website merupakan sebuah peluang yang harus diambil. Dan

B. TAHAP-TAHAP PEMBUATAN WEBSITE

Hamri Efendi, S.Kom

 Memutuskan teknologi apa yang Anda

 Menentukan resolusi tampilan yang

 Rencanakan konten Anda.

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

membuat situs web yang fungsional. Elemen interaktif seperti formulir

5. Pengujian, Pengiriman, dan Peluncuran

Setelah persetujuan akhir diberikan, berkas-berkas situs web akan

Hamri Efendi, S.Kom

Pengembangan situs web Anda tidak berhenti pada tanggal peluncuran

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

BELAJAR DESAIN DENGAN HTML

1. Struktur halaman HTML

2. Tag Body dan Atributnya

Hamri Efendi, S.Kom

Warna bisa diganti sesuai dengan keinginan, cukup dengan

 Menambahkan background gambar

Background bisa diganti sesuai dengan keinginan dengan cara

 Pesan ketika halaman dibuka

Hamri Efendi, S.Kom

3. Membuat Format Text Judul

Hamri Efendi, S.Kom

4. Mengatur Format Font

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

9. Membuat Animasi Text Bergerak

Hamri Efendi, S.Kom

10. Membuat List (Daftar)

Hamri Efendi, S.Kom

Secara standar List akan membentuk urutan angka. Jika ingin

2. Unordered List <UL>

Hamri Efendi, S.Kom

3. List Tanpa Bullet <DL>

Hamri Efendi, S.Kom

11. Membuat Table

Hamri Efendi, S.Kom

12. Menggabungkan Baris dan Kolom pada Table

Hamri Efendi, S.Kom

<td colspan="2" rowspan="2">

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

2. Buatlah Desain Tabel Seperti Dibawah Ini :

3. Buat Desain Website Seperti Dibawah Ini :

Hamri Efendi, S.Kom

Hamri Efendi, S.Kom

Anda mungkin juga menyukai