Anda di halaman 1dari 64

LAPORAN PRAKTEK PEMBELAJARAN TIK

PROSES PEMBUATAN WEBSITE MELALUI


MEDIA HTML DAN DREAMWEAVER

KELOMPOK III TIK KELAS XII IPA 3


1. Muhammad Ardhacandra (23)
2. Muhammad Farid Nabil (24)
3. Muhammad Firman Nugraha (25)

SMA NEGERI 1 BANDUNG


T.A 2017-2018
BAB I
PENDAHULUAN

A. Judul pembelajaran
Macromedia Dreamweaver dan Notepad HTML sebagai media
pembuatan website local.

B. Latar belakang
Situs web (bahasa Inggris: web site) atau sering dingkat dengan istilah situs
adalah sejumlah halaman web yang memiliki topik saling terkait, terkadang disertai
pula dengan berkas-berkas gambar, video, atau jenis-jenis berkas lainnya. Sebuah situs
web biasanya ditempatkan setidaknya pada sebuah server web yang dapat diakses
melalui jaringan seperti internet, ataupun jaringan wilayah lokal (LAN) melalui alamat
internet yang dikenali sebagai URL. Gabungan atas semua situs yang dapat diakses
publik di internet disebut pula sebagai World Wide Web atau lebih dikenal dengan
singkatan WWW. Meskipun setidaknya halaman beranda situs internet umumnya dapat
diakses publik secara bebas, pada prakteknya tidak semua situs memberikan kebebasan
bagi publik untuk mengaksesnya, beberapa situs web mewajibkan pengunjung untuk
melakukan pendaftaran sebagai anggota, atau bahkan meminta pembayaran untuk
dapat menjadi aggota untuk dapat mengakses isi yang terdapat dalam situs web
tersebut, misalnya situs-situs yang menampilkan pornografi, situs-situs berita, layanan
surel (e-mail), dan lain-lain. Pembatasan-pembatasan ini umumnya dilakukan karena
alasan keamanan, menghormati privasi, atau karena tujuan komersil tertentu (Anonim,
2013).
Sebuah halaman web merupakan berkas yang ditulis sebagai berkas teks biasa
(plain text) yang diatur dan dikombinasikan sedemikian rupa dengan instruksi-instruksi
berbasis HTML, atau XHTML, kadang-kadang pula disisipi dengan sekelumit bahasa
skrip. Berkas tersebut kemudian diterjemahkan oleh peramban web dan ditampilkan
seperti layaknya sebuah halaman pada monitor computer (Candra Aristo. 2012).
Halaman-halaman web tersebut diakses oleh pengguna melalui protokol
komunikasi jaringan yang disebut sebagai HTTP, sebagai tambahan untuk
meningkatkan aspek keamanan dan aspek privasi yang lebih baik, situs web dapat pula
mengimplementasikan mekanisme pengaksesan melalui protokol HTTPS (Candra
Aristo. 2012).
Penemu situs web adalah Sir Timothy John Tim Berners-Lee, sedangkan situs
web yang tersambung dengan jaringan pertamakali muncul pada tahun 1991. Maksud
dari Tim ketika merancang situs web adalah untuk memudahkan tukar menukar dan
memperbarui informasi pada sesama peneliti di tempat ia bekerja. Pada tanggal 30
April 1993, CERN (tempat dimana Tim bekerja) mengumumkan bahwa WWW dapat
digunakan secara gratis oleh public (Kurniawan Wiharsono.2013).
Sebuah situs web bisa berupa hasil kerja dari perorangan atau individu, atau
menunjukkan kepemilikan dari suatu organisasi, perusahaan. biasanya pembahasan
dalam sebuah situs web merujuk pada sebuah ataupun beberapa topik khusus, atau
kepentingan tertentu. Sebuah situs web bisa berisi pranala yang menghubungkan ke
situs web lain, demkian pula dengan situs web lainnya. Hal ini terkadang membuat
perbedaan antara situs web yang dibuat oleh individu ataupun perseorangan dengan
situs web yang dibuat oleh organisasi bisnis menjadi tidak begitu jelas.
Situs web biasanya ditempatkan pada server web. Sebuah server web umumnya
telah dilengkapi dengan perangkat-perangkat lunak khusus untuk menangani
pengaturan nama ranah, serta menangani layanan atas protokol HTTP yang disebut
sebagai Server HTTP (bahasa Inggris : HTTP Server) seperti Apache HTTP Server,
atau Internet Information Services (IIS) (Halim cipta. 2009)
1. Jika ingin menambahkan Gambar atau apapun yang akan dimasukkan
kedalam script maka jadikan satu Folder.

<! > : Memberi komentar atau keterangan.

<a href> : Membuat link ke halaman lain atau ke bagian lain dari halaman
tersebut

<b> : Membuat teks tebal

<body> : Tag awal untuk melakukan berbagai pengaturan terhadap text,


warna link & visited link

<br> : Pindah baris

<caption> : Membuat caption pada tabel

<center> : Untuk perataan tengah terhadap teks atau gambar

<font> : Mengganti jenis, ukuran, warna huruf yang akan digunakan utk
teks

<form> : Mendefinisikan input form

<frame> : Mendefinisikan frame

<frameset> : Mendefinisikan attribut halaman yang akan menggunakan frame

<h1> <h6> : Ukuran font

<head> : Mendefinisikan head document.


<hr> : Membuat garis horizontal

<html> : Bararti dokumen html

<img> : Image, imagemap atau an animation

<li> : Membuat bullet point atau baris baru pada list (berpasangan
dengan tag <dir>, <menu>, <ol> and <ul> )

<marquee> : Membuat scrolling teks (teks berjalan) hanya pada MS IE

<ol> : Mendefinisikan awal dan akhir list

<p> : Ganti paragraf

<pre> : Membuat teks dengan format yang sama dengan apa yang ditulis

<script> : Mendefinisikan awal script

<table> : Membuat table

Perkembangan teknologi informasi pada saat ini khususnya dalam


penyampaian informasi sangat pesat perkembangannya. Hal ini telah menjadi bagian
dari kehidupan kita sehari-hari, n1isalnya penggunaan internet sebagai media untuk
mendapatkan informasi. Fungsi komputer sekarang ini bukan hanya untuk melakukan
pekerjaan yang bersifat terbatas, seperti mengerjakan tugas kantor, tetapi dengan
komputer kita bisa mendapatkan infom1asi yang luas dan berwawasan dari seluruh
pelosok penjuru dunia dengan menggunakan jasa internet.
Penyampaian dan penyebarluasan informasi dengan menggunakan fasilitas jasa
internet dan www (world wide web) yang sedang banyak diminati, mulai dari kalangan
pelajar, mahasiswa sampai kepada perusahaan yang bergerak dibidang bisnis maupun
lainnya. Sekarang ini website bukan lagi sesuatu hal yang asing/tabu. Ban yak sekali
dinas pemerintahan, sekolah-sekolah, kantor-kantor, instansi- instansi bahkan personal
yang memiliki website, bahkan ada yang bergerak dibidang pembuatan website dan
bentuk lainnya.
Bermacan1-macam langkah yang digunakan profesi web untuk membuat suatu
homepage, salah satu tool yang banyak digunakan untuk mendesain sebuah web adalah
Macromedia Dreamwever. Macromedia Dreamweaver adalah sebuah HTML editor
profesional untuk mendesain secara visual dan mengelola situs web maupun halaman
web. Bilamana kita menyukai untuk berurusan dengan kode-kode HTML secara
manual atau lebih menyukai bekerja dengan lingkungan secara visual dalam melakukan
editing, Dreamweaver mambuatnya menjadi lebih mudah dengan menyediakan tool-
tool yang sangat berguna dalam peningkatan kemampuan dan pengalaman kita dalam
mendesain web.
Selain itu Dreamweaver juga dilengkapi kemampuan manajemen situs, yang
memudahkan kita mengelola keseluruhan elemen yang ada dalam situs. Kita juga dapat
melakukan evaluasi situs dengan melakukan pengecekan broken link, kompatibilitas
browser, maupun perkiraan waktu download halaman web.

1.2 Tujuan Penelitian


Ada pun tujuan yang ingin dicapai adalah sebagai berikut:
1. Menghasilkan rancangan sistem informasi berbasis web
2. Menghasilkan software untuk menampilkan sistem informasi yang
berbasis web.
1.3 Manf'aat Penelitian
Adapun manfaat yang dapat diambil dari penelitian ini adalah sebagai berikut::
1. Memberikan kemudahan bagi pihak-pihak yang terkait untuk
mendapatkan informasi.
2. Membantu meningkatkan mutu pendidikan.
3. Manfaat bagi peneliti sendiri dapat menambah pengetahuan tentang
sistem informasi berbasis web dengan menggunakan Macromedia Dreamweaver.
BAB II

PEMBAHASAN

2.1.Macromedia Dreamwever 8

Macromedia Dreamweaver 8 adalah sebuah editor HTML professional untul< perancangan


(design), pengkodean (coding), dan pengembangan situs web, halaman web danaplikasi web.

Versi terbaru macromedia dreamweaver di tahun 2005 adalah macromedia diameter 8 yang
merupakan penyempurnaan dari versi sebelun1nya dan tentu saja semakin mudah dalam
penggunaanya. Fasilitas terbaru dari n1icromedia dreamweaver 8 adalah zoom tool dan
guides, panel CSS yang baru, code collapse, Coding toolbar, dan insert flash video. Tidak
jauh berbeda dari versi sebelun1nya, macromedia dreamweaver 8 mendul<ung penrrograman
Client Side yang terkenal, yaitu Javasript dengan penggunaan yang sangat mudah.
Macromedia Dreamweaver 8 juga mendul<ung penrrograman Script Server Side, seperti
Personal Home Page (PHP), Active Server Pages (ASP), ASP.NET, Coldfusion dan Java
Server Page (JSP).

Macromedia Dreamweaver 8 merupakan software yang dikenal sebagai software web


authoringtool, yaitu software yang didesain untul< desain dan layout halaman web.
Macromedia Dreamweaver 8 telah mengalami banyak perbaikan dan peningkatan dari versi
sebelumnya. Macromedia Dreamweaver 8 men1iliki user interface yang lebih baik dari versi
4 karena adanya peningkatan kemampuan toolbar sehingga dapat memakai toolbar yang
sudah ada atau menambahkan fungsi baru.

Dreamweaver memiliki keunggulan dibandingkan program sejenis lainnya,

keunggulan Dream weaver adalah sebagai berikut:

Dreamweaver mempunyai ruang kerja, fasilitas, dan kemampuan yang mampu


meningkatkan produl<tifitas dan efektifitas dalam desain maupun suatu situs web.

Fasilitas penyuntingan secara visual dari Drean1weaver memungkinkan untul<


menambah desain dan fungsionalitas halaman-halaman Web.

Pada Dreamweaver 8 terdapat beberapa kemampuan bukan hanya sebagai software


untul< mendesain web saja, tetapi juga untul< menyunting kode serta pembuatan aplikasi
Web, antara lain JPS, PHP, ASP, dan ColdFusion.
Lebih mudah dan cepat dalam mendesain web karena tidak perlu harus menuliskan
tag-tag html.

2.2 Algoritma Mendesain Web Menggunakan Dreamwever

1. Di Photoshop buat header dengan ukuran 745 x 150 px. Header yang dibuat memuat: Judul,
Jenis, Slogan, Logo perusahaan. Simpan dengan nama header.jpg

2. Pilih HTML setelah Anda mengeklik menu Dreamwever 8.

3. Tambahkan title halaman web, sesuai slogan perusahaan Anda dan simpan file Anda dengan
nama: index.html

4. Pilih align: center pada bagian Properties yang terdapat di bawah stage.
5. Insert Table (Ctrl+Alt+ T), dan isikan sesuai dengan gambar berikut. Setelah itu klik
OK.

6. Insert - Table (Ctrl+Alt+T), dan isikan sesuai dengan gambar berikut. Setelah itu
klik OK.
7. Letakan kursor pada baris pertama. Tekan Insert Image (Ctrl+ Alt+I). Setelah itu
masukkan file header anda. Klik OK jika sudah selesai.

8. Letakkan kursor Anda pada baris kedua. Insert Table dan isikan sesuai dengan data
berikut.
9. Atur sedemikian rupa sehingga kolom pertama memiliki width 24%
10. Letakkan kursor pada baris kedua kolom kedua. Insert Table dan atur seperti
gambar berikut.
11. Letakkan kursor pada kolom ketiga, pilih align: right, kemudian pilih submenu Form.
Tambahkan Text Field pada kolom tersebut.
12. Atur pada kotak dialog Input Tag Accesibility Attributes. Setelah itu klik OK.
13. Posisikan kursor di kolom sebelah kiri. Tambahkan Button dan atur seperti gambar
berikut. Klik OK jika sudah selesai
14. Ganti Button name: Cari dan Value: Carl pada bagian Properties di bawah stage/
15. Pada baris kedua kolom pertama, ketikkan teks: Menu dengan alignment: Center; beri
warna teks:#FFFFF dan background warna: #999999. Atur dengan Font: Arial dan
size:12
16. Atur juga pada baris kedua sesuai dengan langkah 15. Berikut ini tampilan pada baris
kedua.
17. Letakkan kursor pada baris ketiga. Insert Table dan aturlah seperti gambar berikut.
18. Buatlah kolom pertama dengan lebar 24 %
19. Letakkan kursor Anda pada baris ketiga kolom pertama. Insert Table dan aturlah
seperti gambar berikut
20. Buatlah lebar kolom pertama ecara proporsional, seperti gambar berikut. Atur align:
center pada kolom pertama.
21. Buat file di photoshop dengan ukuran: 8 * 8 px dan berilah warna: #99999
simpan file tersebur dengan nama: dot.jpg. Insert Image, masukkan file dot.jpg
pada kolom pertama baris 1 sampai dengan baris 9. Selanjutnya ketikkan menu-menu
pada kolom kedua dan atur dengan font: Arial,size: 12.
22. Pada baris ketiga kolom kedua isikan konten seperti berikut. Jangan lupa untuk
mengatur Vert:Top
23. Pada baris ketiga isikan dengan konten seperti. Copyright Buatlah sesuai dengan
kreasi, warna, dan fontasinya.
24. Selanjutnya buat link pada menu pilihan. Blok teks yang ingin diberi link dan ketikkan
sesuai dengan nama menu, misalnya: Home index.html: Profilprofil.html dan
seterusnya.
25. Save As file Anda sebanyak 8 kali dengan nama:profil.html; produk.html,
bukutamu.html dan seterusnya sesuai dengan daftar menu di atas, sehinnga saat
ini ada 9 file dengan desain yang sama. Buka kembali file-file yang telah dibuat dan
gantilan kontennya yang terdapat pada baris ketiga kolom kedua.
26. Tekan F12 untuk preview hasil halaman web yang telah dibuat.

2.3 HTML

HTML (Hypertext Markup Language) merupakan suatu script dimana


kita bisa menampilkan informasi dan daya kreasi kita melalui internet. HTML
sendiri adalah suatu dokumen teks biasa yang mudah untuk dimengerti
dibandingkan Bahasa pemrograman lainnya, dan karena bentuknya itu maka
HTML dapat dibaca oleh platform yang berlainan seperti windows, unix dan
lainnya. (Sampurna. 1996, h:6)

HTML merupakan bahasa pemrograman fleksibel dimana kita bisa


meletakkan script dari bahasa pemrograman lainnya, seperti JAVA, VB, C, dan
lainnya. Hypertext dalam HTML berarti bahwa kita dapat menuju ke suatu tempat,
misal website atau halaman homepage lain, dengan cara memilih suatu link yang
biasanya digaris bawahi atau diwakili oleh suatu gambar. Selain link ke website
atau homepage halaman lain, hypertext ini juga mengizinkan kita untuk menuju ke
salah satu bagian dalam satu teks itu sendiri.
HTML tidak berdiri sendiri, agar ia dapat bertugas dalam membangun
halaman web, ia harus ditulis dalam software atau aplikasi tertentu, yang dikenal
sebagai HTML Editor. HTML Editor inilah yang bertugas untuk menerjemahkan
bahasa HTML menjadi halaman web yang siap dilihat oleh para surfer di seluruh
dunia. Secara umum, ada dua jenis HTML Editor, yaitu text editor dan WYSIWYG
editor.
1. Text Editor
Text Editor biasa digunakan oleh mereka yang sudah mahir dalam
menggunakan bahasa HTML, karena melalui editor jenis ini anda dapat
langsung menuliskan kode-kode HTML satu persatu, sesuai prosedur
teknis yang berlaku. Untuk editor jenis ini, kita dapat menggunakan
notepad.

2. WYSIWYG Editor
WYSIWYG Editor adalah solusi bagi mereka yang belum mahir dalam
menggunakan bahasa HTML. Pada jenis aplikasi ini, kita dapat
membangun halaman web dengan lebih mudah, karena apa yang terlihat
di layar akan sama dengan hasil yang anda dapatkan. WYSIWYG
adalah singkatan dari What You See Is What You Get. Untuk editor
jenis ini , kita dapat menggunakan aplikasi Microsoft Word, Excel,
Access, PowerPoint, Outlook, FrontPage dan yang cukup popular
Macromedia Dreamweaver.

2.1.2. Struktur Dokumen HTML


Elemen pada HTML dapat didefinisikan sebagai suatu kode tertentu
yang akan menyediakan tempat untuk meletakkan beberapa kode
didalamnya. Berbeda dengan tag yang menangani satu kode saja. Untuk
lebih jelasnya perhatikan skema di bawah ini .
<HTML>
<HEAD>
<TITLE>tempat untuk menempatkan judul halaman web
</TITLE>
</HEAD>
<BODY>tempat untuk menempatkan informasi
</BODY>
</HTML>

Gambar 2.I. Tampilan HTML

Jadi jelas bahwa elemen merupakan satu bagian yang besar yang terdiri
dari banyak kode-kode yang disebut tag itu. Dokumen HTML diawali
dengan tag
<HTML> dan diakhiri dengan tag </HTML>. Elemen pada HTML akan
memisah dokumen menjadi dua bagian utama, antara lain :
1. Elemen <HEAD></HEAD> : Merupakan bagian kepala, tempat
untuk menuliskan keterangan mengenai judul halaman web, nama
pengarang dan script atau program kecil.
2. Elemen <BODY></BODY> : Merupakan bagian badan atau isi,
tempat untuk menuliskan informasi yang akan ditampilkan pada
browser.
Tag hanyalah bagian dari elemen. Tag adalah kode-kode yang
digunakan untuk men-setting dokumen HTML. Dari tiap-tiap teks
programnya, dimulai dengan tanda <Tag-awal> dan diakhiri dengan tanda
</Tag-akhir>. Untuk membuat dokumen HTML, perlu mengetahui dan
mempelajari elemen serta tag-tag yang digunakan untuk menandai bagian-
bagian dari uatu dokumen dengan menggunakan program editor teks biasa
yaitu notepad atau dengan yang berbasiskan WYISWYG seperti
Macromedia Dreamweaver dan Mirosoft Front Page.
2.4 Cara Membuat HTML.

Struktur kode HTML yang harus selalu ada di setiap halaman situs adalah:

1 <span style="font-family: arial,helvetica,sans-serif; font-size: 12pt;"><html>


2
3 <head>
4
5 <title>Tulis Judul Anda di Sini</title>
6
7 <meta name="description" content="tulis deskripsi/penjelasan
8 singkat situs anda di sini">
9
10 <meta name="keyword" content="tulis kata kunci halaman anda di sini">
11
12 </head>
13
14 <body>
15
16 Di sini adalah konten / isi halaman anda
17
18 </body>
19
20 </html></span>

Latihan 1. Belajar membuat halaman sederhana dengan kode HTML

Sebagai bahan untuk belajar HTML, sekarang buka program


Notepad anda. Caranya klik start pilih program, cari program
Notepad, jika sudah anda buka kemudian tuliskan kode kode
HTML di bawah ini :
1 <span style="font-family: arial,helvetica,sans-serif; font-size: 12pt;"><html>
2
3 <head>
4
5 <title>Modul Belajar HTML</title>
6
7 <meta name="description" content="Modul belajar HTML untuk pemula">
8
9 <meta name="keyword" content="modul html,belajar html">
10
11 </head>
12
13 <body>
14
15 Modul HTML ini berisi latihan - latihan sederhana
16 untuk beljar membuat sebuah halaman website agar dapat online
17 di internet. Bagi anda yang masih pemula sebaiknya
18 mengikutinya dengan memparaktekkan secara langsung
19 agar lebih mudah dalam memahami setiap variasi kode - kode HTML.
20
21 </body>
22
23 </html></span>

Setelah selesai menuliskan kode kode HTML di atas kemudian anda simpan. Caranya : klik
file kemudian pilih save as tentukan lokasi penyimpanan, misalnya pada folder latihan di
my document , pada file name tulis nama file misalnya latihan1.html pada save as type
isikan all file kemudian klik save .

Untuk mengetahui hasilnya pada browser, caranya sebagai berikut :

Cari file latihan1.html yang anda simpan pada folder latihan di my document , setelah
ketemu kemudian klik kanan, pilih open with lalu pilih browsernya misalnya internet explorer
maka hasilnya akan tampak seperti gambar di bawah ini :
DENGAN LANGKAH LANGKAH SEPERTI DI ATAS COBA
ANDA PRAKTEKKAN LATIHAN LATIHAN SELANJUTNYA

Latihan 2. Belajar membuat link atau tautan dengan kode HTML :

misalnya : kata yang terlihat dalam link ( ancor text ) adalah cara membuat website

sedangkan alamat/URL dari halaman yang dituju tersebut adalah http://edyutomo.com/internet-


dan-komputer/cara-membuat-website

maka kode HTML nya adalah :

<span style="font-family: arial,helvetica,sans-serif; font-size: 12pt;"><a


1
href="http://edyutomo.com/internet-dan-komputer/cara-membuat-website">
2
cara membuat website</a></span>

hasilnya adalah cara membuat website

Latihan 3. Belajar kode warna HTML untuk mengedit warna teks :


<span style="font-family: arial,helvetica,sans-serif; font-size: 12pt;"><font color="red">kata
1
yang diedit</font>,
2
ini akan mengubah warna teks menjadi merah.</span>

Lihat contoh berikut ini :

<span style="font-family: arial,helvetica,sans-serif; font-size: 12pt;"><font


1
color="red">Modul HTML</font> ini berisi latihan - latihan.....</span>

hasilnya akan tampak sebagai berikut :

Latihan 4. Kombinasi kode warna HTML, paragraf baru, ukuran huruf dan jenis huruf :

<span style="font-family: arial,helvetica,sans-serif; font-size: 12pt;"><p align="left"><font


1
face="arial" size="6" color="red">
2
kata yang diedit</font></p></span>
ini akan membuat paragraf menjadi rata kiri, dengan jenis huruf arial, ukuran 6 dan warna teks
menjadi merah.

Lalu bagaimana untuk membuat warna menjadi warna campuran, ah itu gampang. Caranya
anda buka photoshop, lihat gambar di bawah :

klik kotak merah yang saya lingkari, kemudian akan muncul kotak dialog color picker, lalu cari
warna yang anda inginkan, lalu copy code warna yang ada di bawah ( saya tandai ), setelah itu
anda paste pada kode warna HTML untuk mengedit warna.

Contoh : color=#ed260b

mudah mudahan jelas ya.

Kode HTML lainnya :

<p>isi paragraf</p> , untuk membuat paragraf baru

<br>isi kalimat</br> , untuk membuat baris baru

<b>kata/kalimat</b> , untuk membuat teks tebal

<i>kata/kalimat</i> , untuk membuat kata miring


<u>kata/kalimat</u> , untuk membuat garis bawah

Latihan 5. Belajar cara menyisipkan gambar dengan kode HTML :

Sebelum kita menyisipkan gambar, terlebih dahulu kita harus mengupload foto atau gambar
untuk mendapatkan link dari gambar tersebut untuk keperluan menyisipkan gambar yang telah
kita tentukan. Lihat cara upload foto atau gambar.

sebagai contoh saya telah mengupload gambar pada situs image hosting
http://photobucket.com, sehingga saya mendapatkan url link gambar seperti berikut ini :

<span style="font-family: arial,helvetica,sans-serif; font-size:


1
12pt;">http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif</span>

Sebagai contoh, lihat ilustrasi contoh penerapan kode HTML di bawah ini :

<span style="font-family: arial,helvetica,sans-serif; font-size: 12pt;"><p>di bawah ini adalah


1
contoh gambar :</p>
2
3
<img src="http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif"></span>

hasil dari penullisan kode HTML adalah sebagai berikut :


Latihan 6. Belajar kode HTML untuk menyisipkan link pada gambar

Sebagai contoh, berdasarkan gambar di atas, kita akan menyisipkan link menuju halamanhttp://edyutomo.com/anak-dan-
balita/kumpulan-puisi-anak, maka kode HTML yang perlu dibuat adalah sebagai berikut :

<span style="font-family: arial,helvetica,sans-serif; font-size: 12pt;"><a href="http://edyutomo.com/anak-dan-


1
balita/kumpulan-puisi-anak">
2
<img src="http://i1095.photobucket.com/albums/i480/satujambi/
3
contoh1.gif"></a></span>

Hasilnya akan menjadi sebagai berikut :


Coba anda klik gambar di atas, pasti akan terbuka halaman yang dituju.
Selamat anda sudah dapat membuat link pada gambar.
BAB III
HASIL PEMBUATAN
A. Kode-Kode pembuatan Website
Dalam proses pembuatan website ini, kami membutuhkan kode-kode unik
untuk nantinya diterjemahkan menjadi konten yang kami ingin pasang sesuai
dengan Bahasa pemrograman HTML Melalui media platform aplikasi
Dreamweaver dan Notepad. Kode-kode unik ini akandituliskan kembali kode-
sebagai bukti keaslian dan unplagiarisme dalam projek Kelompok.
1. Bukti Website beserta kode pembuatannya melalui media Dreamweaver.
Catatan Penuls : dalam proses pembuatan melalui dreamweaver, proses ini hanya
melibatkan sebuah kode template yang sudah disiapkan dan tinggal kami otak-otik sesuai
selera.
a. Halaman Utama

Kode-Kode yang digunakan


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Lodging - Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_lodging1.css" type="text/css" />
<style type="text/css">
<!--
.style1 {color: #336666}
.style2 {
color: #336666;
font-weight: bold;
}
-->
</style>
</head>
<body bgcolor="#999966">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" nowrap="nowrap"><img src="mm_spacer.gif" alt=""
width="15" height="1" border="0" /></td>
<td height="60" colspan="3" class="logo" nowrap="nowrap"><br />
BABEkARIN.COM</td>
<td width="40">&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>

<tr bgcolor="#ffffff">
<td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1"
border="0" /></td>
</tr>

<tr bgcolor="#a4c2c2">
<td width="15" nowrap="nowrap">&nbsp;</td>
<td height="36" colspan="3" id="navigation" class="navText"><a href="Daftar
produk.html">(BUKAN)PRODUK KAMI </a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="Produk spesial kami.html">PRODUK SPESIAL KAMI
</a>&nbsp;&nbsp;&nbsp;<span class="style2"><a href="Tentang
kami.html">TENTANG KAMI</a></span><span class="style1">
&nbsp;</span>&nbsp;&nbsp; <a
href="javascript:;"></a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="javascript:;"></a></td>
<td width="40">&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>
<tr bgcolor="#ffffff">
<td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1"
border="0" /></td>
</tr>

<tr bgcolor="#ffffff">
<td width="230" colspan="2" valign="top" bgcolor="#a4c2c2"><img
src="mm_lodging_image.jpg" alt="Home Page Image" width="230" height="240"
border="0" />
<table border="0" cellspacing="0" cellpadding="0" width="230">
<tr>
<td width="15">&nbsp;</td>
<td width="200" class="sidebarText" id="padding"><p>Gue nangis
baca buku gue sendiri </p>
<p>-Young lex <br />
</p></td>
<td width="15">&nbsp;</td>
</tr>
</table> </td>
<td width="50" valign="top"><img src="mm_spacer.gif" alt="" width="50"
height="1" border="0" /></td>
<td width="440" valign="top"><br />
<br />
<table border="0" cellspacing="0" cellpadding="0" width="440">
<tr>
<td class="pageName"><p>Selamat datang di sentra baju bekas
terbesar se Indonesia, Babekarin.com !! </p></td>
</tr>

<tr>
<td class="bodyText">
<p>&nbsp;</p>
<p>Hello Bro-bro sekalian, selamat datang di website kita... kita disini
menjual berbagai macam baju-baju bekas yang bakal membuat bro-bro sekalian
keliatan tajir dan gahool!!! Karena dengan harga miring dapat membuat brow-brow
dan sis akan sekece yongleks dan setakis awkarin! </p>
<p>&nbsp;</p>

<br /> </td>


</tr>
</table> </td>
<td width="40">&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>

<tr bgcolor="#ffffff">
<td colspan="6"><img src="mm_spacer.gif" alt="" width="1" height="1"
border="0" /></td>
</tr>

<tr>
<td width="15">&nbsp;</td>
<td width="215">&nbsp;</td>
<td width="50">&nbsp;</td>
<td width="440">&nbsp;</td>
<td width="40">&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>
</table>
</body>
</html>
b. Daftar Produk
Kode-Kode yang digunakan :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Lodging - Catalog</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_lodging1.css" type="text/css" /><style type="text/css">
<!--
.style3 {color: #FF0000}
-->
</style></head>
<body bgcolor="#999966">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" nowrap="nowrap">&nbsp;</td>
<td height="60" colspan="2" class="logo" nowrap="nowrap"><br />
BABEkARIN.COM</td>
<td width="100%">&nbsp;</td>
</tr>

<tr bgcolor="#ffffff">
<td colspan="4"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0"
/></td>
</tr>
<tr bgcolor="#a4c2c2">
<td width="15" nowrap="nowrap">&nbsp;</td>
<td height="36" id="navigation" class="navText"><a href="Home-
paage.html">HOME</a></td>
<td>&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>

<tr bgcolor="#ffffff">
<td colspan="4"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0"
/></td>
</tr>

<tr bgcolor="#ffffff">
<td valign="top" width="15"><img src="mm_spacer.gif" alt="" width="15" height="1"
border="0" /></td>
<td valign="top" width="35"><img src="mm_spacer.gif" alt="" width="35" height="1"
border="0" /></td>
<td width="710" valign="top"><br />
<table border="0" cellspacing="0" cellpadding="2" width="723">
<tr>
<td colspan="7" class="pageName">Baju bekas terpopuler </td>
</tr>
<tr>
<td width="19%" height="110"><img src="Baju yongleks.jpg" alt="small product photo"
width="173" height="153" border="0" /></td>
<td width="7%">&nbsp;</td>
<td width="19%" height="110"><span class="pageName"><img
src="images.jpg" alt="small product photo" width="145" height="148" border="0"
/></span></td>
<td width="7%">&nbsp;</td>
<td width="22%" height="110"><img src="Baju Longsliv putih.jpg" alt="small
product photo" width="132" height="160" border="0" /></td>
<td width="4%">&nbsp;</td>
<td width="22%" height="110"><img src="Baju youngleks o aja ya kan.jpg"
alt="small product photo" width="180" height="197" border="0" /></td>
</tr>
<tr>
<td valign="top" class="calendarText" nowrap="nowrap"><p><a
href="javascript:;">Baju Yogs Yonglek </a><br />
Harga: Rp. 125.000 </p> </td>
<td>&nbsp;</td>
<td valign="top" class="calendarText" nowrap="nowrap"><p><a
href="javascript:;">Baju merah </a><a href="javascript:;">maroon</a><br />
Harga: Rp.105.000 </p> </td>
<td>&nbsp;</td>
<td valign="top" class="calendarText" nowrap="nowrap"><strong><span
class="calendarText style3">Baju Longsliv putih </span></strong><br />
Harga: Rp.250.000 </td>
<td>&nbsp;</td>
<td valign="top" class="calendarText" nowrap="nowrap"><strong><span
class="calendarText style3">Baju Ooooo aja ya kan </span></strong><br />
Harga: Rp.250.000 </td>
</tr>
<tr>
<td colspan="7">&nbsp;</td>
</tr>
<tr>
<td height="110"><img src="Hudie 2.jpg" alt="small product photo" width="176"
height="198" border="0" /></td>
<td>&nbsp;</td>
<td height="110"><img src="Baju SMA yogs.jpg" alt="small product photo"
width="176" height="198" border="0" /></td>
<td>&nbsp;</td>
<td height="110"><img src="Kerudung Awkarin.jpg" alt="small product
photo" width="176" height="198" border="0" /></td>
<td>&nbsp;</td>
<td height="110"><img src="Kerudung Awkarin.jpg" alt="small product
photo" width="203" height="198" border="0" /></td>
</tr>
<tr>
<td valign="top" class="calendarText" nowrap="nowrap"><a
href="javascript:;">Hoodie bekas yongleks </a><br />
Harga: Rp. 75.000 </td>
<td>&nbsp;</td>
<td valign="top" class="calendarText" nowrap="nowrap"><a
href="javascript:;"></a><a href="javascript:;">Baju SMA Yogs </a><br />
Harga: Rp. 80.000 <br /></td>
<td>&nbsp;</td>
<td valign="top" class="calendarText" nowrap="nowrap"><a
href="javascript:;">Kerudung Awkarin edisi tobat </a><br />
Harga: Rp. 156.000 </td>
<td>&nbsp;</td>
<td valign="top" class="calendarText" nowrap="nowrap"><a
href="javascript:;">Awkarin aja tobat masa kamu engga </a><br />
Harga: Rp. tak terhitung harganya </td>
</tr>
<tr>
<td colspan="7">&nbsp;</td>
</tr>
</table> </td>
<td bordercolor="#660000" bgcolor="#00FFFF">&nbsp;</td>
</tr>

<tr>
<td width="15">&nbsp;</td>
<td width="35">&nbsp;</td>
<td width="710">&nbsp;</td>
<td width="100%" bordercolor="#660000" bgcolor="#00FFFF">&nbsp;</td>
</tr>
</table>
</body>
</html>
c. Produk spesial 1
Kode-Kode yang digunakan :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Lodging - Product Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_lodging1.css" type="text/css" />
<style type="text/css">
<!--
.style7 {color: #99FF00}
-->
</style>
</head>
<body bgcolor="#999966">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" nowrap="nowrap">&nbsp;</td>
<td height="60" colspan="2" class="logo" nowrap="nowrap"><br />
BABEkARIN.COM</td>
<td width="100%">&nbsp;</td>
</tr>

<tr bgcolor="#ffffff">
<td colspan="4"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0"
/></td>
</tr>

<tr bgcolor="#a4c2c2">
<td width="15" nowrap="nowrap">&nbsp;</td>
<td height="36" id="navigation" class="navText"><a href="Home-
paage.html">RUMAH</a></td>
<td>&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>

<tr bgcolor="#ffffff">
<td colspan="4"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0"
/></td>
</tr>

<tr bgcolor="#ffffff">
<td valign="top" width="15"><img src="mm_spacer.gif" alt="" width="15" height="1"
border="0" /></td>
<td valign="top" width="35"><img src="mm_spacer.gif" alt="" width="35" height="1"
border="0" /></td>
<td width="710" valign="top"><br />
<table border="0" cellspacing="0" cellpadding="2" width="534">
<tr>
<td class="pageName" colspan="3">Baju bekas pilihan </td>
</tr>
<tr>
<td width="274" class="subHeader" valign="bottom">Jaket Bomber </td>
<td width="23" rowspan="2">&nbsp;</td>
<td width="225" height="100" rowspan="2"><img src="Jaket bomber.jpg"
alt="large product photo" width="225" height="224" border="0" /></td>
</tr>
<tr>
<td valign="top" class="bodyText"><p>Jaket bomber bekas dengan kualitas atas yang
nyaman saat dipakai. </p>
<p><strong>Bayar COD bisa loh..... xixixixixixi </strong></p></td>
</tr>
</table>
<span class="navText style7"><a href="Produk spesial kami-2.html"
class="navText">[Produk spesial lainnya]</a></span><br />
&nbsp;<br /> </td>
<td>&nbsp;</td>
</tr>

<tr>
<td width="15">&nbsp;</td>
<td width="35">&nbsp;</td>
<td width="710">&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>
</table>
</body>
</html>
d. Produk spesial 2

Pada web design ini kita dapat menganalisis fitur link untuk mentautkan satu halaman
website dengan halaman lainnya.
Konsep ini kemudian akan dikembangkan menjadi multi-page website yang merupakan salah
satu tugas selanjutnya dari Ibu Guru TIK.
Fitur ini secara sederhana menggunakan suatu kalimat sebagai gerbang yang jika di klik akan
terhubung dengan suatu halaman lain, menggunakan rumus html
<a href=ryan.html>[Sebelumnya] </a> <a href=ryan.html>[Selanjutnya]</a>

Gambar 1 Fitur link yang dapat mengakibatkan suatu kalimat untuk bisa diklik dan terhubung
dengan html yang lain.
Kode-kode yang digunakan :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Lodging - Product Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_lodging1.css" type="text/css" />
</head>
<body bgcolor="#999966">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" nowrap="nowrap">&nbsp;</td>
<td height="60" colspan="2" class="logo" nowrap="nowrap"><br />
BABEkARIN.COM</td>
<td width="100%">&nbsp;</td>
</tr>
<tr bgcolor="#ffffff">
<td colspan="4"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0"
/></td>
</tr>
<tr bgcolor="#a4c2c2">
<td width="15" nowrap="nowrap">&nbsp;</td>
<td height="36" id="navigation" class="navText"><a href="Home-
paage.html">HOME</a></td>
<td>&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>
<tr bgcolor="#ffffff">
<td colspan="4"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0"
/></td>
</tr>
<tr bgcolor="#ffffff">
<td valign="top" width="15"><img src="mm_spacer.gif" alt="" width="15" height="1"
border="0" /></td>
<td valign="top" width="35"><img src="mm_spacer.gif" alt="" width="35" height="1"
border="0" /></td>
<td width="710" valign="top"><br />
<table border="0" cellspacing="0" cellpadding="2" width="610">
<tr>
<td class="pageName" colspan="3">Spesial dari kami </td>
</tr>
<tr>
<td width="260" class="subHeader" valign="bottom">Baju Jaring Awkarin </td>
<td width="30" rowspan="2">&nbsp;</td>
<td width="320" height="100" rowspan="2"><img src="134534_ec2e6d7c-c4b9-11e4-
9e89-95e74908a8c2.jpg" alt="large product photo" width="300" height="450" border="0"
/></td>
</tr>
<tr>
<td valign="top" class="bodyText"><p>Menikmati kenyamanan baju yang longgar,
menutupi tubuh tapi juga memberi anda ruang yang cukup untuk bergerak. </p>
<p><strong>[BEKAS AWKARIN BELUM DICUCI PISAN BURUAN BELI SEKARANG
KESEMPATAN TERBATAS !!!] </strong></p></td>
</tr>
</table>

<p> <a href="Produk spesial kami.html">[Sebelumnya]</a> <a href="Produk spesial kami-
3.html">[Selanjutnya]</a> <br />
&nbsp; &nbsp;<br />
&nbsp; </p></td>
<td class="navText">&nbsp;</td>
</tr>
<tr>
<td width="15">&nbsp;</td>
<td width="35">&nbsp;</td>
<td width="710">&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>
</table>
</body>
</html>
e. Produk spesial 3
Kode-kode yang digunakan :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Lodging - Product Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_lodging1.css" type="text/css" />
</head>
<body bgcolor="#999966">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" nowrap="nowrap">&nbsp;</td>
<td height="60" colspan="2" class="logo" nowrap="nowrap"><br />
BABEkARIN.COM</td>
<td width="100%">&nbsp;</td>
</tr>

<tr bgcolor="#ffffff">
<td colspan="4"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0"
/></td>
</tr>

<tr bgcolor="#a4c2c2">
<td width="15" nowrap="nowrap">&nbsp;</td>
<td height="36" id="navigation" class="navText"><a href="Home-
paage.html">RUMAH</a></td>
<td>&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>

<tr bgcolor="#ffffff">
<td colspan="4"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0"
/></td>
</tr>

<tr bgcolor="#ffffff">
<td valign="top" width="15"><img src="mm_spacer.gif" alt="" width="15" height="1"
border="0" /></td>
<td valign="top" width="35"><img src="mm_spacer.gif" alt="" width="35" height="1"
border="0" /></td>
<td width="710" valign="top"><br />
<table border="0" cellspacing="0" cellpadding="2" width="610">
<tr>
<td class="pageName" colspan="3">Produk pilihan kami </td>
</tr>
<tr>
<td width="260" class="subHeader" valign="bottom">Ganteng-Ganteng swek </td>
<td width="30" rowspan="2">&nbsp;</td>
<td width="320" height="100" rowspan="2"><img src="ganteng-ganteng
sweg.jpg" alt="large product photo" width="250" height="250" border="0" /></td>
</tr>
<tr>
<td valign="top" class="bodyText"><p>Buat lho yang mau ganteng juga sekalian sweg,
baju ini untukhmoe! </p>
<p><strong>[Pesan langsung ke yongleks ya]</strong></p></td>
</tr>
</table>
<a href="Produk spesial kami-2.html">[Sebelumnya]</a><br />
&nbsp;<br /> </td>
<td>&nbsp;</td>
</tr>

<tr>
<td width="15">&nbsp;</td>
<td width="35">&nbsp;</td>
<td width="710">&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>
</table>
</body>
</html>
f. Tentang Kami
Kode-kode yang digunakan :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<title>Lodging - Text</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="mm_lodging1.css" type="text/css" />
<style type="text/css">
<!--
.style1 {font-size: 24px}
.style2 {font-size: 36px}
.style3 {font-size: 16px}
-->
</style>
</head>
<body bgcolor="#999966">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" nowrap="nowrap">&nbsp;</td>
<td height="60" colspan="3" class="logo" nowrap="nowrap"><br />
BABEkARIN.COM</td>
<td width="100%">&nbsp;</td>
</tr>

<tr bgcolor="#ffffff">
<td colspan="5"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0"
/></td>
</tr>

<tr bgcolor="#a4c2c2">
<td width="15" nowrap="nowrap">&nbsp;</td>
<td height="36" colspan="2" id="navigation" class="navText"><a href="Home-
paage.html">HOME</a></td>
<td>&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>

<tr bgcolor="#ffffff">
<td colspan="5"><img src="mm_spacer.gif" alt="" width="1" height="1" border="0"
/></td>
</tr>
<tr bgcolor="#ffffff">
<td valign="top" width="15"><img src="mm_spacer.gif" alt="" width="15" height="1"
border="0" /></td>
<td valign="top" width="140"><img src="mm_spacer.gif" alt="" width="140"
height="1" border="0" /></td>
<td width="505" valign="top"><br />
<table border="0" cellspacing="0" cellpadding="2" width="535">
<tr>
<td width="86" class="pageName">Tentang Kami </td>
</tr>

<tr>
<td class="bodyText">&nbsp;</td>
<td width="350" height="100" rowspan="1"><img src="foto bertiga.jpg"
alt="large product photo" width="350" height="393" border="0" /></td>
<td width="87"><p>&nbsp;</p>
<p><br />
</p></td>
</tr>
</table>
<p><span class="style1">Foto diatas adalah para pendiri BABEkARIN.com yaitu ardha
pahlevi, youngbill, dan Mark F </span></p>
<p><span class="style3">Kami dapat kalian hubungi di</span> <span
class="style2">YOUCHUOUBBBB YOUCHOUUUBB lebih dari TV!!! </span><br />
&nbsp;<br />
</p></td>
<td valign="top">&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>
<tr>
<td width="15">&nbsp;</td>
<td width="140">&nbsp;</td>
<td width="505">&nbsp;</td>
<td width="100">&nbsp;</td>
<td width="100%">&nbsp;</td>
</tr>
</table>
</body>
</html>

2. Bukti website beserta media pembuatannya melalui media HTML


Dalam percobaan kali ini penulisan kode dilakukan secara manual berdasarkan
petunjuk yang telah ditulis di bab-bab sebelumnya. Untuk mempermudah, dapat
digunakan aplikasi seperti Notepad++.
a. Membuat tabel berwana dan mewarnai tulisan dengan CSS dan <colspan>,
<font colour=blue>

b. Memperbesar dan memperkecil tulisan menggunakan <h1> - <h6>


c. Mengecil-memperbesar, menggarisi dan merata kiri-kanan-tengah tulisan.

d. Penggunaan <PRE> agar tidak perlu dilakukan <br> sebagai spasi dan juga
membuat formulir di dalam table dengan <tr> <input code=radio>
e. Penggunaan fitur link dan juga menyisipkan foto pada suatu halaman dengan
<img src=ridho.jpg width=xxx length=yyyy> serta <a href=imas.htm> terima
kasih klik saya nanti hilang dah ni halaman sumpah!</a>
Kode-kode yang digunakan :
<!DOCTYPE HTML>
<HTML>

<Head>
<Title>ei tulisan nyempil</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color:fuchsia;
}
table#t01 tr:nth-child(odd) {
background-color:aqua;
}
table#t01 th {
background-color: orange;
color: blue;
}
</style>
</Head>

<Body style="background-color:rosybrown">
<p>warnanya gitu cukup lah ko?</p>
<p>sebelumnya kita data anggota kelompoknya</p>
<br>
<table id="t01">
<tr>
<th>Nama</th>
<th>No.Absen</th>
<th>Nomor Hape</th>
</tr>
<tr>
<td>Ardhacandra</td>
<td>23</td>
<td>08121314564</td>
</tr>
<tr>
<td>Farid Nabil</td>
<td>24</td>
<td>08223291319</td>
</tr>
<tr>
<td>Firman Nugraha</td>
<td>25</td>
<td>08122346738</td>
</tr>
</table>
<br>
<h2>Data anggota kelompok</h2>

<ul style="list-style-type:square">
<li style="color:gold">Ardhacandra,23</li>
<li style="color:lawngreen">Farid Nabil,24</li>
<li style="color:deepskyblue">Firman Nugraha,25</li>
</ul>

<h2>Bonus NOMOR TELEPON BIL GATES DAN YOUNGBILL GATES:</h2>


<table style="width:100%">
<tr>
<th rowspan="2">Name</th>
<th colspan="4">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>Youngbill Gates</td>
<td>55577854</td>
<td>masa percaya mz?</td>
</tr>
</table>

<h1> Kita mulai ya... tulisannya gede-gede nich </h1>


<p>ini isi dari mulai okech?</p>
<p>buat paragraf baru lagi!</p>

<h2> K E C I L </h2>
<p>hehehe</p>
<h3> M A K I N K E C I L </h3>
<p>hihihi</p>
<h4> M A K I N K E C I I L </h4>
<p>huhuhu</p>
<h5> M A K I N K E C I I I L </h5>
<p>hahaha</p>
<h6> M A K I N K E C I I I I L </h6>
<p>xixixi</p>
<br>

<h1> EAAAAAA Jadi gede lagi. </h1>


<br>
<h1 style="font-size:80px;"> WADOOO naha beuki ngagedean!?!?</h1>
<br>
<h2 title="BISA DENGER GAK DE GAUSAH LIAT LIAT NGERTI GAK!?">
jangan coba-coba arahin mouse ke tulisan ini yha
</h2>
<br>
<h1>Di bawah bakal ada garis</h1>
<p>hah!? kenapa? mengapa aku berbeda!?</p>
<hr>
<h2>Ayo belajar menggarisi kalimat ya nak.</h2>
<p>KENAPA? AYAH,mengapa aku berbeda!?!?</p>
<hr>
<br>
<p style="color:orange">Aku berwarna oren iya gak?</p>
<h1 style="font-size:300%;">Ini dibesarin 3 kali</h1>
<p style="font-size:160%;">Kalau ini dibesarin 1,6 kali</p>
<h1 style="text-align:center;">ini diketengahin</h1>
<p style="text-align:Left;">Kiri mz!.</p>
<h2 style="text-align:right;">Kanan Nasution sih,ga jadi aja sama raisa..</p>
</h2>
<br>
<p>permasalahan yang besar dengan html adalah kita tidak bisa membuat spasi tanpa
menggunakan kode khusus,
sehingga walaupun dalam source saya mengspasi tulisan ini di hasil tidak akan terjadi apa
<br> apa.<br>Nah,kalau digituin
baru bisa.</p>
<br>
<p>dengan menggunakan pre,maka kita akan memisahkan kalimat yang diberi spasi dan
tidak dipedulikan html sebelumnya.<p>
<h1>"Permasalahan seorang Poet"</h1>
<pre>
Kubuat puisi di HTML
Karena memakai identitas pre
saling terpisah semua
padahal tidak kukasi
br br br sama sekali
brrrrrrr jadi dingin
sepertinya pelukan,aku ingin
...<br>
..<br>
.
<p title="apa kamu celingak-celinguk DE!?">
ayolah,arahin mousenya ke paragraf nie. ga bakal napa napa koch!
</p>
<br>
</pre>
<h1 style="font-size:40px;">FORMULIR ABSENSI ANGGOTA GRUP FIRMAN</h1>
<br>
<table>
<tr>
<form action="formulir.html"method="get">
<th>Nama: <input type="text" name="nama value="Nama Kamu"</th>
<th>Password:<input type="password" name="password"</th>
<th>Jenis Kelamin:<input type="radio" name="jenis_kelamin" value="laki-laki"checked/>
Laki-Laki
<input type="radio" name="jenis_kelamin" value="perempuan"/>
Perempuan</th>
</tr>
<tr>
<td>Hobi:<input type="checkbox"name="hobi_awkarin"/>Menonton Awkarin
<input type="checkbox"nama="hobi_cs"checked/>Bermain CS
<input type="checkbox"name="hobi_masalah"/>Bikin masalah
</td>
<td>Asal Kota:
<select name="asal_kota">
<option value="Kota Jakarta">Jakarta</option>
<option>Bandung</option>
<option value="Kota Semarang"selected>Semarang</option>
</select>
</td>
<br>
<td>Komentar Anda:
<textarea name="komentar" rows="5" cols="20">
Silahkan katakan isi hati anda
</textarea>
</td>
</tr>
<br>
</table>
<br>
<a href="https://lks2006smansa.blogspot.co.id/">terima kasih telah datang,ayo kunjungi
website ini!</a><br>
<br>
<br>
<img src="bacol.gif" alt="duh maaf ridhanya belum siap" width="500" length="500"><br>
<a href="wut.jpg">Wut!?</a>

</body>

</HTML>

3. Tugas HTML Membuat Multi-Page Website


Konsep Multi-page website ini sudah dijelaskan sebelumnya
menggunakan kode link yang menghubungkan satu website
dengan website lainnya dari kalimat berklik.
a. Halaman Utama

Kode-Kode Yang digunakan :


<html>
<head>
<title>SMAK 1 Bandung</title>
</head>
<body a link="black" vlink = "black">
<Body style="background-color:cyan">

<center><h1>SMAKejuruan1Bandung.com</h1></center>

<!-- Menu goes here -->

<center style="font-size:20px;">
<b style="color:orange">Website SMAK 1</b> | <a href="Tentang Kami.html">Tentang
kami</a> | <a href="BERITA smaka.html">Berita SMAKA</a> | <a href="Daftar Guru SMA
1.html">Daftar guru SMAK</a> | <a href="Darimana anda.html">Darimana anda?</a>
</center>
<center>
<br>
<br>
<br>
<p>Selamat datang di Website dari SMAK 1 Bandung. Terima kasih telah mengunjungi, dan
ayo dong lihat isinya!</p>
<br>
<p> Website ini bertujuan untuk menyebarkan keingintahuan mengenai SMAKA di antara
anda-anda semua. SMAKA adalah SMA Kejuruan satu-satunya di dunia!</p>
<br>
<p> Website ini berisi mengenai Profil SMAK 1 Bandung, beserta daftar guru dan berita
terbaru dari SMAKA.</p>
<br>
<p> Rival dari SMAKA adalah SMANSA, sekolah menengah yang gitu-gitu aja, dan jelek lagi.
Semoga SMANSA segera dirobohkan dan digusur dari bumi ini. Aaamiin!</p>
<br>

<img src="SMAKA.jpg" alt="Yu Tawuran sama SMAKA!" width="600" length="500"><br>

</center>

</body>
</html>
b. Tentang Kami

Kode-Kode yang digunakan :


<html>
<head>
<title>Tentang Kami</title>
</head>
<body a link="black" vlink = "black">
<Body style="background-color:mediumslateblue">

<center><h1>SMAKejuruan1Bandung.com</h1></center>
<center style="font-size:20px;">
<a href="Index.html">Website SMAK 1</a> | <b style="color:springgreen">Tentang
kami</b> | <a href="BERITA smaka.html">Berita SMAKA</a> | <a href="Daftar Guru SMA
1.html">Daftar guru SMAK</a> | <a href="Darimana anda.html">Darimana anda?</a>
</center>

<center><h2>Tentang Kami</h2>
<p>Sekolah Menengah Atas Kejuruan 1 Bandung, atau dipanggil SMAK 1 Bandung saja,
didirikan pada Tahun 1700 Sebelum Masehi.
</br>Institusi pendidikan ini berfokus pada pendidikan tingkat Menengah atas yang bercita
rasa kejuruan. Sehingga, lulusan
SMAK 1 Dago adalah lulusan SMA yang siap kerja.

<p>Kunjungi kami juga di Sosial media berikut ini:</p>


<a href="https://twitter.com/smansabandung">Twitter</a> | <a
href="https://www.youtube.com/watch?v=ncyHxpxTZNs">Youtube</a>
</center>

</body>
</html>
c. Berita SMAKA
Kode-Kode yang digunakan :
<html>
<head>
<title>BERITA smaka</title>
</head>
<body a link="black" vlink = "black">
<Body style="background-color:lime">

<center><h1>SMAKejuruan1Bandung.com</h1></center>

<center style="font-size:20px;">
<a href="Index.html">Website SMAK 1</a> | <a href="Tentang Kami.Html">Tentang
kami</a> | <b style="color:blueviolet">Berita SMAKA</b> | <a href="Daftar Guru SMA
1.html">Daftar guru SMAK</a> | <a href="Darimana anda.html">Darimana anda?</a>
</center>

<center><h2>Berita SMAKA</h2></center>

<center>
<h3>Berita1</h3>
<p>Murid-Murid SMA Negeri 1 melakukan KBM seperti biasa pada...</p>
</center>

<center>
<h3>Berita2</h3>
<p>Seorang Guru SMAKA berinisial JJ (52) Kalap setelah kalah Bermain Get Rich...</p>
</center>
<br>
<br>
<br>
<center><h2><p> Di sini kalian akan menemukan informasi terbaru tentang SMAKA Kita
tercinta</p></h2></center>

</body>
</html>
d. Daftar Guru SMAKA 1 Bandung

Kode-kode yang digunakan :


<html>
<head>
<title>Guru SMAK Bandung</title>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color:fuchsia;
}
table#t01 tr:nth-child(odd) {
background-color:aqua;
}
table#t01 th {
background-color: orange;
color: palegreen;
}
</style>
</head>
</head>
<body a link="black" vlink = "black">
<Body style="background-color:yellow">

<center><h1>SMAKejuruan1Bandung.com</h1></center>

<center style="font-size:20px;">
<a href="index.html">Website SMAK 1</a> | <a href="Tentang Kami.html">Tentang
kami</a> | <a href="BERITA smaka.html">Berita SMAKA</a> | <b
style="color:fuchsia">Daftar guru SMAK</b> | <a href="Darimana anda.html">Darimana
anda?</a>
</center>

<center><h2>Daftar Guru SMAKA Bandung<center></h2>


<table id="t01">
<tr>
<th>Nama Guru</th>
<th>Pelajaran</th>
<th>NIP</th>
<th>Nomor Smartphone</th>
</tr>
<tr>
<td>Bpk. Ardhacandra, SPd.</td>
<td>Pendidikan Olahraga dan Kewarganegaraan</td>
<td>123456775858990</td>
<td>08121314564</td>
</tr>
<tr>
<td>Ibu. Farid Nabil, SMa.</td>
<td>Membatik dan Pencak silat</td>
<td>127136286438423</td>
<td>08223291319</td>
</tr>
<tr>
<td>Mas. Firman Nugraha, SGm plus.</td>
<td>Kepala Sekolah SMA Kejuruan 1 Bandung</td>
<td>1271387129313423</td>
<td>08122346738</td>
</tr>
</table>
<br>
</body>
</html>
e. Darimana anda?

Kode-Kode yang digunakan :


<html>
<head>
<title>BERITA smaka</title>
</head>
<body a link="black" vlink = "black">
<Body style="background-color:gray">

<center><h1>SMAKejuruan1Bandung.com</h1></center>

<center style="font-size:20px;">
<a href="Index.html">Website SMAK 1</a> | <a href="Tentang
Kami.Html">Tentang kami</a> | <a href="BERITA smaka.html">Berita SMAKA</a> | <a
href="Daftar Guru SMA 1.html">Daftar guru SMAK</a> | <b
style="color:antiquewhite">Darimana anda?</b>
</center>

<center><h2>Darimana anda?</h2></center>

<center>
<p>Untuk apa anda mengunjungi website ini? Coba berikan identitas
anda!</p>

<form method="POST" action="process.php" target="_blank">>

Namamu?: <br>
<input type="text"/>
<p></p>
Sekolah dimana?: <br>
<input type="text"/> <input type="radio" name="sekolah"
value="sudah lulus">Sudah lulus
<p></p>
Kesini ngapain?:<br>
<input type="radio" name="Ngapain" value="baca-baca">baca-baca
<input type="radio" name="Ngapain" value="tertarik masuk SMAKA">Mau daftar SMAKA
<input type="radio" name="Ngapain" value="Mau ngehack">Ngehack <br>
<p></p>
Saran dan masukan: <br>
<textarea>Tulis di sini yha...</textarea>
<p></p>
<input type="submit" value="Submit">

</form>

<p><b>Copyright @2017 Muhammad Firman Nugraha, Muhammad


Ardhacandra, Muhammad Farid Nabil.</b></p>
<p><b>All Rights Reserved. SMA Negeri 1 Bandung TIK Group 7 XII IPA
3</b></p>

</center>

</body>
</html>.
BAB IV
KESIMPULAN

Penulis dapat menarik kesimpulan sebagai berikut dalam projek pembuatan HTML di
Kelas XII IPA 3 ini :

1. Sebuah website sederhana dapat dibuat dengan


menggunakan aplikasi web design yaitu
dreamweaver dan notepad HTML.
2. Kedua aplikasi ini menerapkan sistem yang sama
dalam membuat suatu website.
3. Dalam dreamweaver pembuat akan dihadapkan
pada template kode yang sudah siap digunakan;
4. sementara dalam HTML Notepad pembuat harus
menuliskan terlebih dahulu kodenya secara
manual menggunakan Kitab Bahasa pemrograman
HTML.
5. Kode-kode HTML ada macam-macam yang
digunakan misal <h1> untuk membuat heading,
<td> <tr> untuk membuat tabel, <a style
=color=fuchsia> untuk memberi warna pada
tulisan, <a href=baia.htm> klik aku!</a> untuk
memberi link pada kalimat dan <img src> untuk
menyisipkan foto pada website.