Langsung ke konten utama

Tugas Pemrograman Web

Selamat malam bloggers.
Ini postingan terlambat sebenarnya. Harusnya saya memposting tugas ini sehari sebelum tanggal 06 mei 2013 kemarin. Tapi tak apalah. Semoga ibu dosen memaafkan. Saya sudah buat sebenarnya tugas pemrograman web ini, tapi kemarin yang saya buat hanya konten/isi webnya saja, tanpa ada pengaturan style-nya dengan sentuhan css. Oke, berbekal semangat & diajarkan oleh seseorang yang baik hati, jadilah membuat web cantik sederhana.

Jadi begini:
Pertama - tama, siapkan 4 buah gambar, 1 buah untuk background, 1 buah untuk header halaman pertama (nantinya kita namakan web.html), 1 buah untuk gambar profil, dan 1 buah terakhir untuk gambar header halaman kedua (nantinya kita namakan link.html). Simpan semuanya dalam 1 buah folder, sudah?
Kedua, buka notepad++ atau kalau tidak ada cukup notepad biasa saja. Ketikan kodingan dibawah ini dan beri nama style.css:

body {
background-image:url(green.jpg);  //green.jpg merupakan nama gambar untuk backgroundnya//
background-attachment: fixed;
}
#main {
width : 1000px;
margin: 10px auto;
background:#FFF;
overflow:hidden;
}
#head1{
margin:10px;
padding: 10 50px 10px 10px;
background: url(h1.jpg) no-repeat right top; //h1.jpg merupakan nama gambar untuk header hal.pertama//
height: 300px;
}
#head2{
margin:10px;
margin-left:300px;
padding: 10 50px 10px 10px;
background: url(h2.jpg) no-repeat; //h2.jpg merupakan nama gambar untuk header hal.pertama//
height: 250px;
}
#menu {
margin: 20px;
padding: 10px 10px 10px 5px;
font-size: 12pt;
font-family: Californian FB;
width:1150px;
background-position: top left;
}
a, a:link, a:visited, a:active{
font-family: Candara;
letter-spacing: 1px;
color:black;
}
a:hover {
color:#00e020;
}
a.navi{
padding:5px;
text-decoration:none;
font-family:Californian FB;
font-size:14px;
color:black;
text-align:center;
width:100px;
background:#aedb58;
display:inline-block;
}
a.navi:hover{
color:white;
}

Kodingan style.css ini berguna untuk mengatur tampilan/desain web kita. Simpan style.css dalam satu folder yang sama dengan 4 buah gambar tadi. Selanjutnya buka kembali notepad anda dan ketikan kodingan dibawah ini, beri nama web.html, simpan juga dalam satu folder yang sama dengan sebelumnya:

<html>
<title>PROFIL</title>
<link rel ="stylesheet" href="style.css" type="text/css">
<body>
<div id="main">
<div id="head1">
</div>
<div id="menu">
<table>
<tr>
<td><a class="navi" href="web.html">PROFIL</a></td>
<td><a class="navi" href="link.html">ARTIKEL</a></td>
<td><a class="navi" href="http://amaliahriska.blogspot.com/">BLOG</a></td>
</tr>
</table>
<h2>PROFIL</h2>
<table>
<tr><td align=center colspan=2><img src="h3.jpg"; style="width:150px;"></td></tr>
//h3.jpg merupakan gambar untuk profil//
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr></tr>
<tr><td>Nama</td><td>:</td><td>Riska Amaliah</td></tr>
<tr><td>Tempat Lahir</td><td>:</td><td>Jakarta</td></tr>
<tr><td>Tanggal Lahir</td><td>:</td><td>25 Agustus 1991</td></tr>
<tr><td>Jenis Kelamin</td><td>:</td><td>Perempuan</td></tr>
<tr><td>Agama</td><td>:</td><td>Islam</td></tr>
<tr><td>Alamat</td><td>:</td><td>JL. Pedongkelan Belakang No.17 Jakarta Barat</td></tr>
<tr><td>Kota Madya</td><td>:</td><td>Jakarta Barat</td></tr>
<tr><td>Status</td><td>:</td><td>Mahasiswa</td></tr>
<tr><td>Email</td><td>:</td><td><a href="riskaamaliah20@gmail.com">riskaamaliah20@gmail.com</a></td></tr>
</table>
</div>

Sudah anda buat? Baiklah terakhir, ketikan lagi kodingan dibawah ini, beri nama link.html dan simpan juga dalam folder yang sama dengan file - file lain:

<html>
<title>ARTIKEL</title>
<link rel ="stylesheet" href="style.css" type="text/css">
<body>
<div id="main">
<div id="head2">
</div>
<div id="menu">
<table>
<tr>
<td><a class="navi" href="web.html">PROFIL</a></td>
<td><a class="navi" href="link.html">ARTIKEL</a></td>
<td><a class="navi" href="https://www.amaliahriska.blogspot.com">BLOG</a></td>
</tr>
</table>
<h2>3 Kunci Sukses</h2>
<table>
<tr><th><strong>Prolog</strong></th></tr>
<tr></tr>
<tr><td width=950px>
<p align=justify>Sukses tidak didapat begitu saja dengan anda bermalas-malasan tiap libur kuliah atau kerja. Sukses juga bukan bakat turun-temurun dari bapak moyang anda yang semisalnya juragan ojek! Sukses tak berarti anda rajin belajar selama dibangku sekolah atau kuliah dengan IPK >4. Sukses juga tidak datang kepada anda pemalas yang hanya berpaku tangan kepada orangtua. Artikel ini saya buat bukan karena saya seorang yang rajin dan tekun. Saya juga sama seperti anda! mahasiswa pemalas yang berangan-angan untuk menjadi sukses. Doakan saja, semoga besar nanti kita sama-sama sukses! amin.
Di suatu siang, ketika saya sedang bermain jejaring sosial, facebook, saya menemukan sebuah status teman yang dikutip dari kata bijak seorang terkemuka. Saya simpan di draft handphone. Tertarik untuk mengertinya lebih dalam. Mungkin anda juga sudah tahu. Tapi biarkan saya kemukakan pendapat pribadi saya.<br><br><br></p></td><tr/>

<tr><th><strong>1. Tahu Lebih Banyak Dari Oranglain</strong></th></tr>
<tr></tr>
<tr><td width=950px>
<p align=justify>hal ini bukan berarti anda "sok tahu". Orang rajin membaca, berani mencoba hal baru dan pantang menyerah pastilah tahu lebih banyak dari seorang pemalas dan penakut. "tahu" disini dikonotasikan dalalm arti "tahu" akan hal baik bukan hal buruk. Orang yang tahu lebih banyak dari oranglain bisa memanfaatkan pengetahuannya itu untuk memonopoli pembicaraan, misalkan saja dalam diskusi. Tipe orang seperti ini biasanya akan lebih dihormati didalam komunitasnya daripada orang yang hanya mendengarkan saja. Anda tahu tapi bukan berarti anda boleh menjadi banyak bicara.
Terkadang orang pandai-pun hanya memantau jalanya pertandingan daripada ikut bermain.<br><br></p></td><tr/>

<tr><th><strong>2. Berusaha Lebih Keras Dari Oranglain</strong></th></tr>
<tr></tr>
<tr><td width=950px>
Tak usah repot-repot dipikirkan. Coba bayangkan, tentunya orang yang selalu bangun pagi pasti akan mendapatkan rezeki lebih berlimpah daripada orang yang bangun sesudah jam 9. Gampang saja contohnya, mungkin jika anda bangun pagi, ibu anda sudah menyiapkan sarapan untuk anda walau hanya sebungkus nasi uduk. Tapi jika anda bangun jam 10, mungkin jatah sarapan anda sudah di berikan kepada adik anda yang saat itu masih lapar. Bangun pagi merupakan salahsatu bentuk usaha keras.<br><br></p></td><tr/>

<tr><th><strong>3. Berharap Lebih Sedikit Dari Oranglain</strong></th></tr>
<tr></tr>
<tr><td width=950px>Hal ini bukan berarti anda tidak boleh "menggantungkan cita-cita anda setinggi langit". Anda boleh-boleh saja melakukan itu. Tapi konsekuensinya, anda harus berusaha lebih keras dari oranglain. Coba kaitkan dengan prinsip ekonomi: "dengan modal sekecil-kecilnya, mendapatkan hasil sebesar-besarnya". Anda paham ?.<br><br></p></td><tr/>

<tr><td> Sumber : <a href="http://riskaamaliah.blogspot.com/2010/10/3-kunci-sukses.html">http://riskaamaliah.blogspot.com/2010/10/3-kunci-sukses.html</a></td></tr></table>
</div>

Sudah mengerti bukan?
Alhamdulillah kalau sudah. Kalau belum, silahkan ditanyakan dengan komentar dibawah postingan ini atas di chatbox yang saya sediakan di blog saya ini. Nah, misalkan saya lama merespon pertanyaan anda, silahkan pahami sendiri dengan mencari - cari melalui google. Saya juga kalau tidak tahu banyak bertanya pada google kok. :)
Sekian, dan terimakasih.

Catatan:
Huruf berwarna biru itu kodingan.
Huruf berwarna merah itu komentar yang saya sisipkan dalam kodingan

Komentar