Tugas Rumah praktikum WEB modul 4

MyStyle Css.
body {
margin: 5px auto;
width: 1330px;
}
header{
height:70px;
/*border-top: 1px solid green;
border-right: 1px solid green;
border-left: 1px solid green;
border-bottom: 1px solid blue;*/
background-color:Black;
}
nav {
height:40px;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
background-color:Red;
}
#navsearch {
float:left;
width:80px;
height:20px;
margin-top:5px;
margin-left:50px;
}
#navformsearch {
float:left;
margin-left:2px;
width:160px;
height:20px;
border:2px solid black;
margin-top:3px;
background-color:white;
}
#home {
float:right;
width:100px;
height:20px;
margin-right:400px;
border:1px solid black;
margin:2px;
text-align:center;
background-color:##e1d119;
}
#info {
float:right;
width:100px;
height:20px;
margin-right:400px;
border:1px solid black;
margin:2px;
text-align:center;
background-color:##e1d119;
}
#AboutUs{
float:right;
width:80px;
height:20px;
margin-right:400px;
border:1px solid black;
margin:2px;
text-align:center;
background-color:##e1d119;
}
#Download{
float:right;
width:100px;
height:20px;
margin-right:400px;
border:1px solid black;
margin:2px;
text-align:center;
background-color:##e1d119;
}
article {
/*margin:35px;*/
float:left;
width:292px;
height:492px;
background-image:url(Aku.png);
border:2px solid RED;
}
aside {
height:400px;
width:1018px;
float:left;
border: none;
/*margin-right:35px;
margin-top:35px;
margin-bottom:35px;*/}
#event {
height:95px;
width:1018px;
float:left;
border:none;
background-color:red;
/*margin-right:1px;
*/
}
footer{
height:30px;
border:1px solid #000000;
padding-left:500px;
background-image:url(footer.png)
#bawah {
float:left;
width:500px;
height:20px;
padding-left:100px;
border:1px solid white;
margin:2px;
text-align:center;
background-color:#ffffff;
}
}
a.html
<!doctype HTML>
<html lang="en">
<head>
<title>IMAGINE</title>
<link rel="stylesheet" href="mystyle.css" type= "text/css" />
<link rel="icon" href="ico.ico" type="image/x-icon" />
</head>
<body>
<header>
<h1><font face=courier new><font color=RED>Semua Tentang Apa Yang Anda Pikirkan</font></h1>
</header>
<nav><div id="navsearch">
<b>Search</b>
</div>
<div id="navformsearch">
</div>
<div id="Download">
<a href="Download.html"><font color=White>Download</font></a></div>
<div id="AboutUs">
<a href="AboutUs.html"><font color=White>AboutUs</font></a></div>
<div id="info">
<a href="info.html"><font color=White>info</font></a></div>
<div id="home">
<a href="home.html"><font color=White>Home</font></a></div>
</nav>
<section><div id="foto">
<article>
</article>
<aside>
<font face=courier new size=1>
<br><br>
Imagine there's no countries
<br>It isn't hard to do
<br>Nothing to kill or die for
<br>And no religion too
<br>Imagine all the people
<br>Living life in peace
<br>You may say that I'm a dreamer
<br>But I'm not the only one
<br>I hope someday you'll join us
<br>And the world will be as one
<br>Imagine no possessions
<br>I wonder if you can
<br>No need for greed or hunger
<br>A brotherhood of man
<br>Imagine all the people
<br>Sharing all the world
</font>
</aside>
</div>
<div id="event">
<b>Halaman Lain</b>
<font face=calibri color=#ffffff>
<ul>
<li><b><a href="sejarah.html"><font color= black>Sejarah Html</font></a></b>
<li><b><a href="Pembaca.html"><font color= black>Pembaca</font></a></b>
<li><b><a href="Tutorial.html"><font color= black>Tutorial Html 5</font></a></b>
</ul>
</font>
</div>
</section>
<footer>
<div id="bawah">
<a href="home.html">Home</a> | <a href="Info.html">Info</a> | <a href="AboutUs.html">AboutUs</a> | <a href="Download.html">Download</a>
</div>
</footer>
</body>
</html>

Hasil Tampilan

 

Tugas Praktikum WEB modul 4

STUDI KASUS

<!DOCTYPE HTML>
<html lang="en">
<head>
<title&gtSECTION</title>
<link rel="stylesheet" href="mystyle.css" type= "text/css" />
</head>

<body>
<header>
header
</header>

<nav>
nav
</nav>

<section><div id="tengah">
<article&gtarticle</article>
<aside&gtaside</aside>
</div>
</section>

<footer&gtfooter</footer>
</body>
</html>

CSS

body {
margin: 5px;
width: 1300px;
}
header{
height:60px;
border-top: 1px solid green;
border-right: 1px solid green;
border-left: 1px solid green;
border-bottom: 1px solid blue;
}
nav {
height:30px;
border-right: 1px solid yellow;
border-left: 1px solid yellow;
border-bottom: 1px solid blue;
}
#tengah {
width:1300px;}
section {
height:500px;
border-top: 1px solid green;
border-right: 1px solid red;
border-left: 1px solid red;
border-bottom: 1px solid red;
}
article {
margin:20px;
float:left;
border: 1px dashed red;
width:950px;
height:450px;
}
aside {
height:450px;
width:270px;
float:right;
border: 1px dashed black;
margin-right:20px;
margin-top:20px;
margin-bottom:20px;}
footer{
height:20px;
border:1px solid red;}

Hasil Tampilan :

Tradisi Gambyongan di Madiun

Madiun, PROGRESIF Jaya

Memeriahkan Hari Kemerdekaan Republik Indonesia ke-61, dilakukan oleh masyarakat Indonesia dengan berbagai cara. Ada yang menggelar beberapa perlombaan, ada pula yang melakukan ritual tertentu sebagai ungkapan rasa syukur kepada Yang Maha Kuasa yang telah memberikan kemerdekaan kepada bangsa Indonesia tercinta.

Demikian halnya dilakukan masyarakat Desa Kincang Wetan Kecamatan Jiwan Kabupaten Madiun, setiap memperingati Hari Proklamasi Kemerdekaan Republik Indonesia, selalu dimeriahkan dengan pagelaran kesenian khas Jawa yang dinamakan Gambyong.

Pagelaran yang dipusatkan di lokasi Punden (Keramat) Sumur Guling ini, dimulai dengan melakukan beberapa ritual oleh sesepuh masyarakat setempat. Berbagai macam sesaji yang sudah dipersiapkan sehari sebelumnya berupa nasi tumpeng, ayam panggang dan lainnya, kemudian diarak menuju tujuh tempat keramat di wilayah Desa Kincang Wetan.

Mulai dari Punden Mundu, Punden Pare, Punden Sumur Tiban, Punden Taman Ria, Punden Perangan, Punden Mbah Rendeng dan terakhir dipusatkan di Punden Sumur Guling, lokasi dimana diadakannya pagelaran kesenian Gambyong. Dalam melakukan ritual ini, setiap perangkat desa diwajibkan menyediakan tujuh buah tumpeng sesuai dengan banyaknya tempat keramat di wilayah tersebut. Setelah melakukan ritual di ketujuh tempat keramat tersebut kemudian dilanjutkan dengan acara kesenian Gambyong, yang didatangkan dari daerah Ngawi.

Tradisi mengadakan pagelaran kesenian Gambyong itu sendiri sudah dilakukan secara turun temurun dari jaman nenek moyang mereka. Dan entah secara kebetulan atau tidak pagelaran ini dilakukan setiap tanggal 17 Agustus yang bertepatan dengan Peringatan Hari Kemerdekaan Indonesia.

Selain untuk memeriahkan peringatan Hari Kemerdekaan, acara ini juga dimaksudkan untuk "bersih desa", sebuah ritual yang dimaksudkan untuk membersihkan desa mereka dari berbagai masalah yang ada. Hal ini diungkapkan Kepala Desa Kincang Wetan, Lilin Ropiana, SE, melalui Sekretaris Desa, Drs. Arifin, bahwa ritual ini hanya sebagai sarana saja, hakekatnya meminta pada Yang Maha Kuasa agar desa mereka dijauhkan dan dihindarkan dari mara bahaya, dibersihkan dari berbagai masalah, aman tentram dan sejahtera.

"Kesenian Gambyong kebetulan yang dipilih sebagai sarananya, intinya kita semua berdoa kepada Tuhan, meminta kesejahteraan bagi masyarakat Indonesia umumnya dan masyarakat Kincang Wetan pada khususnya," ujar Arifin.

Masih menurut Arifin, selain sebagai hiburan rakyat, acara ini lebih dimaksudkan sebagai upaya pihak pemerintahan desa dan masyarakatnya dalam melestarikan kesenian yang kini sudah sangat jarang dijumpai tersebut.

"Kami hanya ingin menjaga tradisi para leluhur di sini, selain itu apabila kami tidak menggelar kesenian Gambyong pada 17-an, kami takut terjadi sesuatu yang buruk menimpa desa kami," tambah Arifin.

Hal senada juga diutarakan oleh Agus (27) warga desa setempat, menurutnya, pernah suatu kali acara Gambyong-an tidak diadakan. "Malamnya, desa kami diganggu, setiap rumah didatangi oleh semacam mahluk halus," ungkap Agus. Makanya pagelaran kesenian Gambyong setiap tahun selalu diadakan di desa kami, hal ini sebagai ritual untuk menjuahkan desa kami dari berbagai gangguan mahluk halus.

Terlepas apapun alasannya, pagelaran kesenian Gambyong yang diselenggarakan Pemerintah Desa Kincang Wetan dan masyarakatnya, merupakan pertanda bahwa masyarakatnya masih kental dengan adat istiadat atau tradisi para leluhurnya. Hal ini merupakan pertanda baik bahwa apa yang dilakukan masyarakat Desa Kincang Wetan adalah menjaga dan melestarikan budaya Jawa yang semakin hari semakin terkikis oleh kemajuan jaman.

BREM asli Kota Madiun

BREM MADIUN

Brem merupakan jajanan khas asli dari Madiun.
Brem adalah makanan yang berasal dari sari ketan yang dimasak dan dikeringkan, merupakan hasil dari fermentasi ketan hitam yang diambil sarinya saja yang kemudian diendapkan dalam waktu sekitar sehari semalam.
Sensasi makanan ini muncul ketika makanan dimasukkan ke dalam mulut akan langsung mencair dan lenyap meninggalkan rasa 'semriwing' di lidah.

Dikenal beberapa bentuk brem yang dikenal di pasaran, berupa makanan dan minuman. Brem berupa makanan terkenal dari Madiun dan Wonogiri, sedangkan yang berupa cairan berasal dari pulau Bali dan Nusa Tenggara.

Bentuk pertama yang lebih dulu dikenal adalah makanan tradisional khas yang berasal dari kota Caruban, Kabupaten Madiun, dan berasal dari dua desa penghasil: Bancong dan Kaliabu. Brem dikemas berbentuk lempengan agak kekuningan, rata-rata berukuran kurang lebih 15 cm x 5 cm x 0,5 cm. Untuk lebih memaksimalkan pemasarannya, brem kini dikemas dalam bentuk kecil kecil seukuran permen, sehingga mudah untuk dikantongi. Biasanya pada sekitar tahun 80-an, brem dalam bentuk ini dijual asongan oleh para pedagang di sekitar stasiun-stasiun di kereta api di daerah Jawa Timur.
Brem bentuk kedua berasal dari Wonogiri, Jawa Tengah, berbentuk lempeng pipih bundar dengan diameter rata-rata 5 cm dan ketebalan sekitar 0,3 cm. Brem asal Wonogiri berwarna putih dan proses pengeringannya melalui dijemur langsung dibawah panas terik matahari selama tiga hari.

Selain itu ada juga Brem yang berbentuk cair berasal dari Bali dan Nusa Tenggara, brem asal bali berwarna putih seperti susu sedangkan yang berasal dari Nusa Tenggara berwarna merah.

Brem padat merupakan makanan tradisional dari hasil pemekatan dan pengeringan cairan tapai ketan. Bahan baku yang umumnya digunakan dalam pembuatan brem padat adalah beras ketan putih.

Brem berguna untuk meremajakan kulit, menghilangkan jerawat dari dalam.







_Tampilan Studi Kasus_






_Tampilan Praktikum1_









_Tampilan Praktikum2_






Tugas Praktikum Pemrograman Web 1

_STUDI KASUS_

-frame-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Tugas Praktikum</title>
</head>
<frameset rows="15%,*,10%">
<frame src="atas.html" name="atas" id="atas"/>
<frameset cols="20%,*,20%">
<frame src="kiri.html" name="kiri" id="kiri"/>
<frame src="tengah.html" name="tengah" id="tengah"/>
<frame src="kanan.html" name="kanan" id="kanan"/>
</frameset>
<frame src="bawah.html" name="bawah" id="bawah"/>
</frameset>
</html>

-profil-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>My Profile</title>
</head>
<form action=""method="post">
<table border=0>
<tr>
<td>
<a href="frame.html"><input type="submit" value="Home" /></a>
</td>
</tr>
<body bgcolor="black">
<form action=""method="post">
<table border=0>
<h1 align="left"><font face="Century Schoolbook" color="white" size="5"><blink>About Me</blink></font></h1>
<hr color="red">
<img src="My.jpg" width="150">
<h1 align="left"><font face="Century Schoolbook" color="white" size="4">Nama    : Bhadra Sukakara</h1></font>
<h1 align="left"><font face="Century Schoolbook" color="white" size="4">Alamat1 : Jl. Terusan Surabaya 14c Malang</h1></font>
<h1 align="left"><font face="Century Schoolbook" color="white" size="4">Alamat2 : Jl. Thamrin Gg VIII no. 5a Madiun</h1></font>
<h1 align="left"><font face="Century Schoolbook" color="white" size="4">E_mail  : Molen_jr@rocketmail.com</h1></font>
</table>
</form>
</body>
</html>

-atas-

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body bgcolor="black">
<h1 align="center"><blink><font face="Baskerville Old Face" color="white">Tugas Praktikum Web</font></blink></h1>
</body>
</html>

-bawah-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body bgcolor="black">
<font color="white"><b>About Me : </font>
<a href="profile2.html" target="tengah"><font color="Red"><Strike>Bhadra Sukakara</Strike></b></font></a>
</body>
</html>

-kanan-

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<body bgcolor="black">
<font color="white"><font size="5">Artikel yang Tersedia
<ol>
<li><a href="tengah.html" target="tengah">
Ideologi Dunia</a></li>
</ol>
</font>
</body>
</html>

-kiri-

<!DOCTYPE html >
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<body bgcolor="black">
<font color="white"><font size="5">Tentang Saya
<ol>
<li><a href="profile2.html" target="tengah">
Profil and e-mail</a></li>
</ol>
</font>
</body>
</html>

-tengah-

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>utama</title>
</head>
<body bgcolor="black"><font color="white"><b>
<h2 id="Menu"><font color="white" size="10">IDEOLOGI DI DUNIA </font></h2>
<ol>
<li><a href="#Arti">Arti Kata Ideologi</a></li>
<li><a href="#Tipe">Tipe-tipe ideologi</a></li>
<li><a href="#Macam">Macam-macam ideologi</a></li>
</ol>
<h3 id="Arti"><font color="White"><u>Arti Kata Ideologi</u></font></h3>
<p>
1.Ideologi sebagai kesadaran palsu
<p>
Menurut Frans Magnis Suseno ,
Ideologi mempunyai konotasi negative, sebagai klaim yang tidak wajar, atau sebagai teori yang yang tidak berorientasi pada kebenaran melainkan pada kepentingan pihak yang mempropagandakan
<p>
2.Ideologi dalam arti netal
<p>
Ideologi adalah keseluruhan system berpikir, nilai - nilai, dan sikap - sikap dasar rohani sebuah gerakan, kelompok social atau kebudayaan . 
<p>
3.Ideologi adalah keyakinan yang tidak ilmiah
<p>
Ideologi adalah segala pemikiran yang tidak dapat dicek secara matematis-logis atau empiris , termasuk peilaian etis dan moral, anggapan – anggapan normative, teori dan paham metafisik dan keagamaan atau filsafat sejarah . Pengertian ini juga dipakai di kalangan positif
<br><a href="#Menu">Ke menu utama</a>

<h3 id="Tipe"><font color="White"><u>Tipe-Tipe Ideologi</u></font></h3>
<p>
<font color="red"><b>1.Ideologi Terbuka</b></font>
<p>
Ideologi yang berisi cita-cita, etika politik yang mendasarkan penyelenggaraan kehidupan masyarakat pada nilai – nilai tertentu tentang martabat manusia serta pada sedaftar hak - hak manusia . Dikatakan terbuka karena selalu dapat dipertanyakan dan disesuaikan dengan prinsip – prinsip moral dan cita - cita masyarakat lainnya .
Contoh    :  Pancasila
<p>
<font color="red"><b>2.Ideologi Tertutup</font></b>
<P>
Ideologi yang berasal dari pemikiran sebuah elit yang dipropagandakan dan disebarkan kepada masyarakat, bukan diambil dari masyarakat itu sendiri . Pada ideologi ini memuat prinsip - prinsip atau niali dasar, melainkan bersifat operasional . Dikatakan tertutup karena isinya tidak boleh diragukan, serta tidak dapat dimodifikasi berdasarkan pengalaman
Contoh    : Marxisme-Leninisme, Fasisme, Kapitalisme Klasik
<br><a href="#Menu">Ke menu utama</a>
<h3 id="Macam"><font color="White"><u>Macam-macam Ideologi</u></font></h3>
<p>
<font color="red"><b>1.Liberalisme</font></b>
<p>
Liberalisme berasal dari bahasa Latin Liber yang berarti bebas dan Isme yang berarti paham atau ajaran. Sehingga Liberalisme dapat diartikan sebagai paham atau ajaran yang mengagungkan kebebasasn individu. Dalam ajaran liberalisme manusia pada hakikatnya adalah makhluq individu yang bebas, pribadi yang utuh dan lengkap serta terlepas dari manusia lainnya sehingga keberadaan individu lebih penting dari masyarakat. Dan fungsi Negara adalah untuk menjaga supaya kebebasan individu terjamin dalam mengejar tujuan-tujuan pribadinya, untuk masalah keyakinan atau agama pada Negara liberalisme menganut faham sekuler.
<p>
<font color="red"><b>2.Ideologi Sosialisme dan Komunisme</b></font>
<p>
Sosialisme adalah sebuah ideology yang menekankan akan kepemilikan bersama atas alat-alat produksi. Atau sebuah ideology yang mengagungkan atas kepentingan Negara diataskepentingan pribadi yang pada akhirnya akan tercipta Negara tanpa kelas dimana sarana-sarana produksi dimiliki secara bersama.
<p>
<font color="red"><b>3.Kapitalisme</b></font>
<p>
Adalah suatu system pengaturan proses produksi barang dan jasa melalui mekanisme harga dan pasar. Dan kesejahteraan akan tercapai jika setiap individu diberi kebebasan berusaha, dimana mereka saling berkompetisi di dalam pasar yang bebas dan Negara tidak boleh ikut campur di dalamnya.
<p>
Kapitalisme ini mempunyai ciri pokok sebagai berikut :
<p>
•    modal produksi dasar (tanah dan uang) dimiliki oleh individu
<p>
•    aktifitas ekonomi ditentukan oleh interaksi antara pembeli dan penjual dalam pasar
<p>
•    para pemilik modal dan para pekerja bebas untuk mengelola modal dan sumber
<p>
    produksi lainnya untuk mengahsilkan keuntungan yang sebesar-besarnya.
<p>
•    Peranan Negara dalam ekonomi sangat terbatas.
<p>
<font color="red"><b>4.Fasisme</b></font>
<p>
Sebuah ideology yang berusaha menghidupkan kembali kehidupan social, ekonomi dan budaya dari Negara dengan berlandaskan pada asas nasionalisme yang tinggi, dengan ciri-ciri :
tidak setuju dengan kemapanan yang anti perubahan (konservatifme)
selalu mengangkat kembali kenangan kejayaan masa lalu
selalu muncul ketika Negara mengalami krisis
<p>
<font color="red"><b>5.Pancasila</b></font>
<p>
Pancasila sebagai dasar dan ideologi Negara Indonesia . Yang berdasarkan pada nilai - nilai yang terkandung pada pancasila .
<p>
<p>
<br><a href="#Menu">Ke menu utama</a></dd>
</b></font></body>
</html>

_TUGAS PRAKTIKUM 1_

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Grafik Berbasis Tabel</title>
</head>
<body>
<table frame="above" border="2" align="left" cellspacing=5 cellpadding=5>
<tr>
<hr>
<th width="300">Perusahaan</th>
<th width="105" colspan=3></th>
<th width="190" colspan=3>Pendapatan</th>
</tr>

<tr>
<td>Agen Robot Ltd</td> 
<td width="30"></td>
<td width="52"></td>
<td width="23"></td>
<td width="150" colspan="2" bgcolor="green"></td>
<td width="40" align="left">+150%</td>
</tr>

<tr>
<td>Command Prompt, Inc</td> 
<td width="30"></td>
<td width="52"></td>
<td width="23"></td>
<td width="55" bgcolor="green"></td>
<td width="90" align="left">+55%</td>
<td width="40"></td>
</tr>

<tr>
<td>Hibernate Ltd</td> 
<td width="30"></td>
<td width="52" align="right">-23%</td>
<td width="23" bgcolor="yellow"></td>
<td width="55"></td>
<td width="90"></td>
<td width="40"></td>
</tr>

<tr frame="below">
<td>Shutdown Ltd</td> 
<td width="30" align="right">-75%</td>
<td width="52" colspan="2" bgcolor="red" border=></td>
<td width="55"></td>
<td width="90"></td>
<td width="40"></td>
</tr>

</body>
</html>

_TUGAS PRAKTIKUM 2_

<!DOCTYPE html>
<html lang="en">

<head>
<title>Tugas Praktikum nomor 3</title>
</head>

<body>
<table border="3" cellspacing=1 frame="hsides" rules="groups">
<caption>PERBANDINGAN FITUR</caption>
<colgroup align="center">
<colgroup align="center">
<colgroup align="center">
<thead valign="middle">

<tr><th width="35">No
<th width="150">Fitur
<th width="100">Enterprise
<th width="50">Pro
<th width="50">Free</tr>

<tbody>
<tr><td> 1
<td> Garansi Seumur Hidup
<td align="center">X
<td align="center">-
<td align="center">-</tr>
<tr><td> 2
<td> Multiuser
<td align="center">X
<td align="center">-
<td align="center">-</tr>
<tr><td> 3
<td> Update Otomasi
<td align="center">X
<td align="center">X
<td align="center">-</tr>
<tr><td> 4
<td> Cetak Laporan
<td align="center">X
<td align="center">X
<td align="center">-</tr>
<tr><td> 5
<td> Notifikasi
<td align="center">X
<td align="center">X
<td align="center">X</tr>
<tbody>
<tr><td> 6
<td> Ubah Tema
<td align="center">X
<td align="center">X
<td align="center">X</tr>
<tr><td> 7
<td> Try Ikon
<td align="center">X
<td align="center">X
<td align="center">X</tr>

</table>
</body>
</html>