Jawaban Mid Pemograman Web 1
1. Jelaskan sejelas-jelasnya disertai dengan contoh
pengertian dan perbedaan HTML, CSS, PHP, dan Java script, jelaskan pula cara
mendeklarasikannya.?
a. HTML
singkatan dari Hyper Text Markup Language adalah simbol-simbol atau tag-tag
yang dituliskan dalam sebuah file yang bertujuan untuk menampilkan halaman pada
suatu web browser
Contoh :
<html>
<head>
<title> Ini Adalah Contoh Title </title>
<body>
Ini adalah Body Html, Bodi html Ini adalah tempat
bersemayamnya segala tulisan, gambar dan informasi yang dibaca oleh semua orang
diinternet
</body>
</html>
b. CSS adalah suatu bahasa
stylesheet yang digunakan untuk mengatur tampilan suatu website, baik tata
letak, jenis huruf, warna, dan semua yang berhubungan dengan tampilan atau gaya
suatu web.
Contoh :
body{
font-family:arial;
background-image: url();
}
table{font-size:80%;background:#000}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#660}
td.menu{background:#930}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
font-family:arial;
background-image: url();
}
table{font-size:80%;background:#000}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#660}
td.menu{background:#930}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
c.PHP adalah bahasa serever-side scripting yang menyatu dengan HTML untuk membuat halaman web yang dinamis. Maksud dari serverside scripting adalah siantaks dan perintah – perintah yang di berikan akan sepenuhnya dijalankan di sever tetapi disertakan pada dokmen HTML
Contoh :
<?php$hello = "Hello
World!";$sebuah_bilangan = 4;$bilanganYangLain = 8;?>
d.Javascript adalah bahasa script yang biasa
berjalan di browser atau biasa disebut client side programing. javascript
biasanya di sisipkan diantara kode HTML. Siantaks java script bersifat Case
sensitive (Huruf besar dan kecil dibedakan). setiap kode java script dipisahkan
dengan titik koma (;).
Contoh :
<HTML>
<HEAD>
<TITLE>Jendela Memasukkan Data</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nama = prompt("Nama Anda : ");
document.write("Hai, " + nama);
//-->
</SCRIPT>
</BODY>
</HTML>
<HEAD>
<TITLE>Jendela Memasukkan Data</TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE = "JavaScript">
<!--
var nama = prompt("Nama Anda : ");
document.write("Hai, " + nama);
//-->
</SCRIPT>
</BODY>
</HTML>
PERBEDAAN
1.HTML dapat digunakan sebagai link link antara
file-file dalam situs atau dalam komputer dengan menggunakan localhost,
2.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
3.PHP banyak dipakai untuk memrogram situs webdinamis, walaupun tidak tertutup kemungkinan digunakan untuk pemakaian lain.
4.JavaScript digunakan pada Web pages untuk meningkatkan design, validate forms, detect browsers, create cookies, GUI dsb.
2. Pengertian dan perbedaan web statis dan web dinamis, berikan ciri-cirinya?
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
Web Dinamis 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.
Ciri-ciri:
Web Statis :
Hanya Dapat Diakses Melalui
Internet
Web Dinamis :
-Isi/konten selalu di update sehingga jumlah
halamannya terus bertambah
-Mudah dalam menambahkan konten baru karena memang
ini yang diutamakan
-Konten terbaru selalu berada di urutan pertama
karena untuk memperjelas konten yang diupdate
-Pengunjung dapat memberikan komentar pada sebuah
konten yang di sajikan. apalagi kalau berisi tutorial maka pengunjung bisa
bertanya ketika ada yang belum paham
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.?
<html>
<head>
<style>
body{
font-family:arial;
background-image: url();
}
table{font-size:80%;background:#000}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#660}
td.menu{background:#930}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
body,td,th {
font-family: "Times New Roman", Times, serif;
color: #000;
font-weight: bold;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div align="center"></div>
<div align="center"></div>
<table width="852" height="658" border="0" align="center">
<tr>
<td height="202" colspan="2" bgcolor="#FFFFFF"><img src="File Banner.JPG" width="956" height="262"></td>
</tr>
<tr>
<td height="31" colspan="2" bgcolor="#FFFFFF"center">
<table width="100%" border="0">
<tr bgcolor="red">
<td width="22%" height="41" bgcolor="#993300" onMouseOver="showmenu('Beranda')" onMouseOut="hidemenu('Beranda')"><h3 align="center"><a href="Beranda.html">Beranda</a><br />
</h3>
<div align="center">
<table class="menu" id="Halaman Utama" width="200">
</table>
</div></td>
<td width="26%" bgcolor="#993300" onMouseOver="showmenu('Profil')" onMouseOut="hidemenu('Profil')"><h3 align="center">Profil</a><br />
</h3>
<div align="center">
<table class="menu" id="Profil" width="260">
<tr>
<td class="menu"><h3><a href="Sejarah Sekolah.html">Sejarah Sekolah</a></h3></td>
</tr>
<tr>
<td class="menu"><h3><a href="Visi Misi.html">Visi Misi</a></h3></td>
</tr>
</table>
</div></td>
<td width="22%" height="41" bgcolor="#993300" onMouseOver="showmenu('Galeri')" onMouseOut="hidemenu('Galeri')"><h3 align="center"><a href="Galeri.html">Galeri</a><br />
</h3>
<div align="center">
<table class="menu" id="Galeri" width="200">
</table>
</div></td>
<td width="26%" bgcolor="#993300" onMouseOver="showmenu('Alumni')" onMouseOut="hidemenu('Alumni')"><h3 align="center">Alumni<br />
</h3>
<div align="center">
<table class="menu" id="Alumni" width="260">
<tr>
<td class="menu"><h3><a href="Daftar Alumni.html">Daftar Alumni</a></h3></td>
</tr>
<tr>
<td class="menu"><h3><a href="Prestasi.html">Prestasi</a></h3></td>
</tr>
</table>
</div></td>
</tr>
</table>
</div> <div align="center"></div></td>
</tr>
<tr>
<td width="281" height="333" bgcolor="#CC9933"><table width="281" border="1" align="center">
<tr>
<td width="271" height="31" bgcolor="#993300"><div align="center"><a href="http://www.binasriwijaya.ac.id/">AMIK BINA SRIWIJAYA</a></div></td>
</tr>
<tr>
<td height="28" bgcolor="#993300"><div align="center"><a href="http://pmb.palcomtech.com/">STMIK PALCOMTECH</a></div></td>
</tr>
<tr>
<td height="34" bgcolor="#993300"><div align="center"><a href="http://univpgri-palembang.ac.id/">UNIVERSITAS PGRI PALEMBANG</a></div></td>
</tr>
<tr>
<td height="25" bgcolor="#993300"><div align="center"><a href="http://www.facebook.com/">FACEBOOK</a></div></td>
</tr>
<tr>
<td height="27" bgcolor="#993300"><div align="center"><a href="http://www.google.com/">GOOGLE</a></div></td>
</tr>
</table></td>
<td width="671" bgcolor="#CC9933"><table width="452" border="0" align="center">
<tr> </tr>
</table>
<h1 align="justify">VISI</h1>
<h2 align="justify">Menjadi Sekolah Yang Unggul Dan Menguasai Teknologi Informasi</h2>
<p align="justify"> </p>
<h1 align="justify">MISI</h1>
<h2 align="justify">1. Mendidik siswa agar tidak gaptek</h2>
<h2 align="justify">2.Mendidik siswa Menguasai teknologi web</h2>
<h2 align="justify">3. Mendidik siswa menguasai ilmu eksakta</h2></td>
</tr>
<tr>
<td height="19" colspan="2" bgcolor="#993300"><div align="center">
<h3><strong><a href="http://www.arieaxper.blogspot.com/">Didesain Oleh : Rusdi@10.11.433</a></strong></h3>
</div></td>
</tr>
</table>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
</script>
</body>
</html>
<head>
<style>
body{
font-family:arial;
background-image: url();
}
table{font-size:80%;background:#000}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#660}
td.menu{background:#930}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
body,td,th {
font-family: "Times New Roman", Times, serif;
color: #000;
font-weight: bold;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="visible";
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="hidden";
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div align="center"></div>
<div align="center"></div>
<table width="852" height="658" border="0" align="center">
<tr>
<td height="202" colspan="2" bgcolor="#FFFFFF"><img src="File Banner.JPG" width="956" height="262"></td>
</tr>
<tr>
<td height="31" colspan="2" bgcolor="#FFFFFF"center">
<table width="100%" border="0">
<tr bgcolor="red">
<td width="22%" height="41" bgcolor="#993300" onMouseOver="showmenu('Beranda')" onMouseOut="hidemenu('Beranda')"><h3 align="center"><a href="Beranda.html">Beranda</a><br />
</h3>
<div align="center">
<table class="menu" id="Halaman Utama" width="200">
</table>
</div></td>
<td width="26%" bgcolor="#993300" onMouseOver="showmenu('Profil')" onMouseOut="hidemenu('Profil')"><h3 align="center">Profil</a><br />
</h3>
<div align="center">
<table class="menu" id="Profil" width="260">
<tr>
<td class="menu"><h3><a href="Sejarah Sekolah.html">Sejarah Sekolah</a></h3></td>
</tr>
<tr>
<td class="menu"><h3><a href="Visi Misi.html">Visi Misi</a></h3></td>
</tr>
</table>
</div></td>
<td width="22%" height="41" bgcolor="#993300" onMouseOver="showmenu('Galeri')" onMouseOut="hidemenu('Galeri')"><h3 align="center"><a href="Galeri.html">Galeri</a><br />
</h3>
<div align="center">
<table class="menu" id="Galeri" width="200">
</table>
</div></td>
<td width="26%" bgcolor="#993300" onMouseOver="showmenu('Alumni')" onMouseOut="hidemenu('Alumni')"><h3 align="center">Alumni<br />
</h3>
<div align="center">
<table class="menu" id="Alumni" width="260">
<tr>
<td class="menu"><h3><a href="Daftar Alumni.html">Daftar Alumni</a></h3></td>
</tr>
<tr>
<td class="menu"><h3><a href="Prestasi.html">Prestasi</a></h3></td>
</tr>
</table>
</div></td>
</tr>
</table>
</div> <div align="center"></div></td>
</tr>
<tr>
<td width="281" height="333" bgcolor="#CC9933"><table width="281" border="1" align="center">
<tr>
<td width="271" height="31" bgcolor="#993300"><div align="center"><a href="http://www.binasriwijaya.ac.id/">AMIK BINA SRIWIJAYA</a></div></td>
</tr>
<tr>
<td height="28" bgcolor="#993300"><div align="center"><a href="http://pmb.palcomtech.com/">STMIK PALCOMTECH</a></div></td>
</tr>
<tr>
<td height="34" bgcolor="#993300"><div align="center"><a href="http://univpgri-palembang.ac.id/">UNIVERSITAS PGRI PALEMBANG</a></div></td>
</tr>
<tr>
<td height="25" bgcolor="#993300"><div align="center"><a href="http://www.facebook.com/">FACEBOOK</a></div></td>
</tr>
<tr>
<td height="27" bgcolor="#993300"><div align="center"><a href="http://www.google.com/">GOOGLE</a></div></td>
</tr>
</table></td>
<td width="671" bgcolor="#CC9933"><table width="452" border="0" align="center">
<tr> </tr>
</table>
<h1 align="justify">VISI</h1>
<h2 align="justify">Menjadi Sekolah Yang Unggul Dan Menguasai Teknologi Informasi</h2>
<p align="justify"> </p>
<h1 align="justify">MISI</h1>
<h2 align="justify">1. Mendidik siswa agar tidak gaptek</h2>
<h2 align="justify">2.Mendidik siswa Menguasai teknologi web</h2>
<h2 align="justify">3. Mendidik siswa menguasai ilmu eksakta</h2></td>
</tr>
<tr>
<td height="19" colspan="2" bgcolor="#993300"><div align="center">
<h3><strong><a href="http://www.arieaxper.blogspot.com/">Didesain Oleh : Rusdi@10.11.433</a></strong></h3>
</div></td>
</tr>
</table>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
</script>
</body>
</html>
This entry was posted
on Rabu, 06 Juni 2012
at 19.46
. You can follow any responses to this entry through the
comments feed
.
