TUGAS MID SEMESTER
SIFAT : Mandiri dan Open Book
SIFAT : Mandiri dan Open Book
Ketentuan
: Mencontek atau memberikan contekan, skornya -10.
Kerjakan
soal berikut dengan penuh tanggung jawab, mandiri dan sesuai dengan hati nurani
anda. Jangan lupa berdoa sebelum mengerjakan soal.
1.
Jelaskan sejelas-jelasnya disertai dengan contoh pengertian dan perbedaan HTML,
CSS, PHP, dan Java script, jelaskan pula cara mendeklarasikannya.
2.
Pengertian dan perbedaan web statis dan web dinamis, berikan ciri-cirinya.
3.
Jika banner untuk header di simpan dengan nama file banner.jpg dan menu dibuat
dengan link menu dalam tabel. Tulislah program html untuk web berikut ini.
1.
HTML (Hyper Text Markup Language )
merupakan
sebuah bahasa yang di gunakan untuk menyusun dokumen yang akan di tampilkan
pada web file dari dokumen web bereksitensi .html atau .html
HTML
juga dapat digunakan sebagai link link antara file-file dalam situs atau dalam
komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs
dalam dunia internet.
CSS (Cascading Style Sheets)
merupakan
salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam
sebuah web sehingga akan lebih terstruktur dan seragam. Sama halnya styles
dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur
beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style
lainnya untuk dapat digunakan bersama-sama dalam beberapa file. Pada umumnya
CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML
dan XHTML.
CSS
dapat mengendalikan ukuran gambar, warna body teks, warna tabel, ukuran border,
warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi
antar teks, margin kiri/kanan/atas/bawah, dan parameter lainnya.CSS adalah
bahasa style sheet yang digunakan untuk mengatur tampilan dokument. Dengan
adanya CSS memungkinkan kita untuk menampilkan halaman yang sama dengan format
yang berbeda.
PHP (Hypertext Prepocessor)
merupakan
bahasa pemrograman yang digunakan secara luas untuk penanganan pembuatan dan
pengembangan sebuah situs web dan bisa digunakan bersamaan dengan HTML.
PHP
banyak dipakai untuk memrogram situs webdinamis, walaupun tidak tertutup
kemungkinan digunakan untuk pemakaian lain.
Java Script
merupakan
bahasa pemrograman yang khusus untuk halaman web agar halaman web menjadi lebih
hidup. Kalau dilihat dari suku katanya terdiri dari dua suku kata, yaitu Java
dan Script. Java adalah Bahasa pemrograman berorientasi objek, sedangkan Script
adalah serangkaian instruksi program.
dan
bekerja pada banyak browser seperti Internet Explorer, Mozilla, Firefox,
Netscape, Opera. JavaScript digunakan pada Web pages untuk meningkatkan design,
validate forms, detect browsers, create cookies, GUI dsb.
Java
(dikembangkan oleh Sun Microsystems) adalah sebuah bahasa pemrograman yang
powerful & sangat kompleks – sama dengan C & C++.
JavaScript
dapat bereaksi terhadap events - JavaScript dapat di-set untuk menjalankan saat
terjadi sesuatu, seperti sebuah page telah selesai dipanggil atau saat seorang
user meng-klik pada HTML element
JavaScript
dapat membaca dan menulis HTML elements - JavaScript dapat membaca dan mengubah
isi dari HTML element
JavaScript
dapat digunakan untuk mem-validasi data - JavaScript dapat digunakan untuk
mem-validasi form data sebelum di-submitted ke server, hal ini akan mengamankan
server dari pemrosesan extra
JavaScript
dapat digunakan untuk mendeteksi browser pengunjung - JavaScript dapat digunakan
untuk mendeteksi browser pengunjung dan – memanggil page lain yang secara
specifik didesain untuk browser tersebut.
JavaScript
dapat digunakan untuk membuat cookies - JavaScript dapat digunakan untuk
menyimpan dan memanggil informasi di komputer pengunjung.
2.
WEB STATIS adalah web yang content atau isinya tidak berubah –
ubah. Maksudnya adalah isi dari dokumen yang ada di web tersebut tidak dapat
diubah secara mudah. Ini dikarenakan karena script yang digunakan untuk membut
web statis tidak mendukung untuk mengubah isi dokumen.
Karena
script yng digunakan untuk membuat web statis ini seperti HTML dan Cascading
Style Sheet atau biasa disebut dengan CSS. Maka dari itu untuk perubahan isi
dokumen pada web statis harus mengubah isi file HTML atau CSS tersebut.
Tentunya bagi orang awam atau orang yang tidak mengerti soal program atau
script HTML dan CSS akan sangat sulit sekali dilakukan. Untuk itu jika kita
ingin mengubah dokumen web statis harus mengerti benar scipt HTML atau CSS atau
sering disebut programmer yang dapat melakukan perubahan isi dokumen sebuah web
statis.
Web
statis ini biasanya digunakan oleh website yang menggunakan HTML, Web Search
Engine, atau web Company Profile.
Ciri-cirinya :
a.
Biasanya tampilan halamannya itu-itu saja karena jarang di update atau di
update hanya dalam waktu-waktu tertentu saja (tidak dalam hitungan jam atau
hari).
b.
Selain itu website statis ini dalam halamannya tidak menyediakan menu komentar
bagi para pengunjung yang datang dan sulit dalam menambahkan konten (hanya
orang-orang tertentu yang bisa melakukannya.
<b>WEB
DINAMIS </b> adalah Web yang content atau isinya dapat berubah – ubah
setiap saat. Karena dalam teknologi pembuatan web dinamis sudah dirancang
semudah mungkin bagi user yang menggunakan web dinamis tersebut.
Untuk
perubahan content atau isi dokumen dalam sebuah web dinamis dibilang mudah
ketimbang web statis yang harus memiliki keahlian khusus pada bagian scripting
web tersebut. Ketika kita akan mengubah content atau isi dari sebuah web
dinamis kita hanya perlu masuk kebagian control panel atau bagian
administrator web yang telah disediakan oleh script web dinamis.
Jadi
untuk pengubahan content atau isi dokumen dalam sebuah web dinamis tidak perlu
memiliki keahlian programming atau seorang programmer saja yang dapat mengubah
isi dokumen pada web dinamis. Untuk
membuat
web dinamis diperlukan beberapa komponen yaitu client side scripting (
HTML, JavaScript, Casing Style Sheet atau CSS) dan server side scripting
seperti PHP dan program basis data seperti database MySQL untuk menyimpan data
– data yang ada di web dinamis.
Web
Dinamis ini banyak sekali bertebaran di internet seperti Web Berita, Personal
Blog, Toko Online/Web Pasng Iklan, dll.
Ciri-cirinya :
a.
Konten selalu di update
b.
Mudah dalam menambahkan konten baru
c.
Konten terbaru selalu berada di urutan pertama
d.
Pengunjung dapat memberikan komentar pada sebuah konten yang di sajikan.
Perbedaan Web Statis dan Web Dinamis
Interaksi antara pengunjung dengan pemilik web
Dalam
web statis tidak dimungkinkan terjadinya interaksi antara pengunjung dengan
pemilik web. Sementara dalam web dinamis terdapat interaksi antara pengunjung
dengan pemilik web seperti memberikan komentar, transaksi online, forum
dll.
Adanya script language yang digunakan
Web
statis hanya menggunakan HTML saja, sedangkan web dinamis menggunakan bahasa
pemrograman web seperti PHP atau ASP.
Penggunaan database
Web
statis tidak menggunakan database karena tidak ada data yang perlu disimpan dan
diproses. Sedangkan web dinamis menggunakan database seperti mysql, oracle, dll
untuk menyimpan dan memproses data.
Content
Content
dalam web statis hanya diberikan oleh pemilik web dan jarang diupdate,
sementara content dalam web dinamis bisa berasal dari pengunjung dan lebih
sering diupdate.
3.
Tulisan Program html untuk program berikut ini yg saya buat
Scriptnya
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Web Sekolah</title>
<style type="text/css">
<!--
.style1 {
color: #0000FF;
font-weight: bold;
}
-->
</style>
<style type="text/css">
.style12 {color: #000000}
</style>
</head>
<body>
<div align="center">
<table width="661" height="586" border="2">
<tr>
<td height="279" colspan="2"><img src="banner.jpg" width="800" height="275" /></td>
</tr>
<tr>
<td height="23" colspan="2">
<style>
body{font-family:arial;}
table{font-size:80%;background:white}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
</head>
<body>
<table width="100%" border="2">
<tr bgcolor="#FF8080">
<td onmouseover="showmenu('Beranda')" onmouseout="hidemenu('Beranda')">
<div align="center"><a href="/default.asp">Beranda</a><br />
<table class="menu" id="Beranda" width="120">
</table>
</div></td>
<td onmouseover="showmenu('Profil')" onmouseout="hidemenu('Profil')">
<div align="center"><a href="/default.asp">Profil</a><br />
<table class="menu" id="Profil" width="120">
<tr><td class="menu"><a href="/js/default.asp">Sejarah Singkat</a></td></tr>
<tr><td class="menu"><a href="/vbscript/default.asp">Visi Misi</a></td></tr>
</table>
</div></td>
<td onmouseover="showmenu('Galery')" onmouseout="hidemenu('Galery')">
<div align="center"><a href="/default.asp">Galery</a><br />
<table class="menu" id="Galery" width="120">
</table>
</div></td>
<td onmouseover="showmenu('Alumni')" onmouseout="hidemenu('Alumni')">
<div align="center"><a href="/default.asp">Alumni</a><br />
<table class="menu" id="Alumni" width="120">
</table>
</div></td>
</tr>
</table></td>
</tr>
<tr>
<td width="255" height="160" bgcolor="#FFCC99"><table width="255" border="1">
<tr>
<td width="219" bgcolor="#FF9933"><a href="www.binasriwijaya.ac.id">STMIK Bina Sriwijaya </a></td>
</tr>
<tr>
<td bgcolor="#FF9933"><a href="www.unsri.ac.id">Universitas Sriwijaya </a></td>
</tr>
<tr>
<td bgcolor="#FF9933"><a href="www.ugm.ac.id">Universitas Gadjah Mada </a></td>
</tr>
<tr>
<td bgcolor="#FF9933"><a href="www.itb.ac.id">Institut Teknologi Bandung </a></td>
</tr>
<tr>
<td bgcolor="#FF9933"><a href="www.diknas.com">Diknas</a></td>
</tr>
</table></td>
<td width="539" bgcolor="#FFFF99"><h1><strong>Visi</strong></h1>
<p>Menjadi Sekolah yang Unggul dan Penguasaan Teknologi Informasi</p>
<h1><strong>Misi</strong></h1>
<p>1. Mendidik siswa agar tidak gaptek</p>
<p>2. Mendidik siswa menguasai teknologi web </p>
<p>3. Mendidik siswa menguasai ilmu eksakta </p></td>
</tr>
<tr>
<td height="23" colspan="2" bgcolor="#FF99FF"><div align="center" class="style1"><span class="style12"> desain oleh : Nama Kamoe @ NIM </span></div></td>
</tr>
</table>
</div>
</body>
</html>
Nama : Ayu Novita Amelia
Nim : 10.11.393
Kelas : MI 4D
