LAPORAN PRAKTIKUM PEMROGRAMAN BERBASIS WEBMODUL 2

LAPORAN

UNTUK MEMENUHI TUGAS MATAKULIAHPRAKTIK DASAR PEMROGRAMAN KOMPUTERYang DibinaOleh Bapak Didik Dwi Prasetya

OLEH :Muhamad Ainurrahman130533608096OFF E 2013

PRODI S1 PENDIDIKAN TEKNIK INFORMATIKAJURUSAN TEKNIK ELEKTROFAKULTAS TEKNIKUNIVERSITAS NEGERI MALANG MALANGFEBRUARI 2015PRAKTIKUM KE-2A. LATIHAN PRAKTIKUM1. Lihat dan percaya !Code

Result

Home

About Me

Plans for World Domination

Contact

About Me

I am the angriest puppy in the world. This has been scientificallyproven in several clinical trials.

My Bros

Send me an e-mail!

body {background-color: #BDB76B}h2 {font-family: Verdana;font-weight: bold;text-align: center;padding-top: 25px;padding-bottom: 25px;color: #acd1b2;}img {height: 170px;width: 170px;box-shadow: rgba(0,0,0,0.2) 10px 10px;}#navbar {position: fixed;top:10px;left:50%;margin-left: -254px;}#header {position: relative;top: -10px;background-color: #3c4543;border-top-left-radius: 15px;border-top-right-radius: 15px;}ul{list-style-type: none;position: fixed;margin: -10px;}li {display: inline;border: 2px solid #000000;font-family: Futura, Tahoma, sans-serif;color: #ffffff;padding: 5px;border-radius: 5px 5px;background-color: #cc0323}#left{width: 45%;float: left;}p {font-family: Tahoma;font-size: 1em;}#right{width: 45%;float: right;}table {border: #000000 1px solid;background-color: #acd1b2;float: right;margin-right: 10px;border-bottom-right-radius: 15px;border-bottom-left-radius: 15px;}td {height: 75px;width: 75px;}td img {height: 75px;width: 75px;box-shadow: none;}th {font-family: Verdana;font-size: 1em;font-weight: normal;color: #3c4543}#bottom_left{border-bottom-left-radius: 15px;}#bottom_right{border-bottom-right-radius: 15px;}#footer{clear: both;position: relative;bottom: -20px;border-bottom-left-radius: 15px;border-bottom-right-radius: 15px;height: 75px;background-color: #3c4543;}#button{border: 2px solid #000000;float:left;position: relative;left: 229px;bottom: -20px;border-radius: 5px;background-color: #cc0323;height: 30px;width: 150px;}#button p{position: relative;bottom: 10px;font-size: 0.8em;color: #acd1b2;text-align: center;}.bold{font-family: tahoma;font-weight: bold;font-size: 1.2em;font-variant: small-caps;color: #ffffff;}

Screenshot

PenjelasanCSS dapat dipakai antara lain utk menentukan gambar, baik latar belakang atau untuk latar depan, memberi warna latar belakang tag dan mengatur lebar maupun tingginya, membuat bingkai, membagi halaman berdasarkan kolom.HTML hanya menangani bagian isi halaman sedangkan untuk pengaturan tampilan dilakukan melalui css. Style style pada css digunakan untuk mengubah tag-tag pada HTML . style terdiri dari dua bagian yaitu selector dan deklarasi properti2. Pengenalan CSSCode!DOCTYPE html>

Fancy Fonts

I'm a paragraph written in red font, but one of my words isblue!

p {color: red;}span {color:blue;}

Screenshot

penjelasandalam hal ini terdapat selector dan , selector digunakan untuk mengubah warna kalimat didalam tag menjadi warna merah, dan dengan propertinya yaitu color digunakan untuk mengubah tulisan didalam tag menjadi warna biru3. Mengapa terpisah ?Code

Even Fancier Fonts

Much of this is regular text, but some of it is fancy!We can use our newly fancified font to add someflair to our website. It'd be a royal painto make each of these span tags fancy individually,but it's a cinch with CSS!

span {font-family:Cursive;}

Screenshot

penjelasanpenggunaan style disini dimaksudkan untuk mengubah tampilan jenis font dari kalimat didalam tag menjadi font cursive.4. Satu selector dengan banyak propertiesCode

Result

You're about to style this paragraph with CSS all on your own!

p{ color:green;font-family:Garamond;font-size:24px;}

Screenshot

PenjelasanLatihan ini menjelaskan satu selector dapat memiliki lebih dari satu properti seperti terlihat di atas properti color, font-family, dan font-size, yang digunakan untuk mengubah style dari kalimat di tag menjadi warna hijau, jenis font garamond dan ukurannya 24px5. Banyak selector dengan banyak propertiesCode

I Know Kung Fu (er, CSS)

What's CSS for?CSS is for styling HTML pages!Why use it?It makes webpages look really rad.What do I think of it?It's awesome!

h3{color:red;}p{font-family:courier;}span{background-color:#FFFF00;}

Screenshot

PenjelasanSama seperti dengan penjelasan di latihan sebelumnya, bedanya pada latihan kita menggunakan 3 selector untuk mengubah style dari tag , , dan , properti yang diubah antara lain warna, font,warna latar dari span6. Banyak selector dengan banyak properties(2)Code

Result

Change me to Verdana.Change me to Courier.Make me purple!

h1{font-family:Verdana;}h3{font-family:Courier;}p{color:purple;}

Screenshot

PenjelasanPenjelasan yang belum dijelaskan dilatihan sebelumnya ialah peletakan tag dan dilakukan didalam . Untuk memanggil file css dari file html kita menggunakan tag " href="styleku.css"> dan type="text/css" sebagai penanda type bahwa kita memanggil file css kedalam file html7. BackupCode

Result

I'm going to be a serif font when I grow up!

h1{font-family: cursive,Times,sans-serif;}

Screenshot

Penjelasan Sesuai dengan penjelasan dimodul ,h1 menerapkan 3 font dalam properti jika font pertama yang diterapkan tidak ada dalam library komputer maka css akan menggunakan font yang kedua yaitu times dan jika masih tidak ada dalam library juga maka css akan menerapkan font yang ketiga yaitu sans-serif, dalam latihan ini css menggunakan font yang pertama yaitu cursive karena font tersebut terdapat pada library komputer.8. Background color, height, widthCode

Result

body{}div{background-color:#cc0000;width: 100px;height: 100px;}

Screenshot

PenjelasanDiv dalam hal ini sebagi suatu paragraf yang memanjang sampai ketepi kanan halaman, tag diterapkan properti berupa backgorund-color yang dipergunakan untuk mengubah warna dari area div kemudian diatur juga value dari properti width (lebar) dan height sebagai tinggi tag 9. Bordering on InsanityCode

hj

Nine Blocks!

table{border: 1px solid black;}td{height: 50px;border: 1px dashed blue;}

Screenshot

PenjelasanStyle css juga dapat diterapkan pada pembuatan table , di latihan ini kita membuat table yang terdiri dari 3 kolom dan 3 baris, style css diterapkan pada border table dengan value 1 px untuk ketebalannya dan solid black untuk warna dari table border, juga ada selector td yang digunakan untuk memberikan style dari kolom table, dan juga terdapat syntax baru table yaitu tbody.merupakan pengembangan dari property pada .10. Membuat tombolCode

tombol

My Button

div{height: 50px;width: 120px;border-color: #6495ED;background-color: #BCD2EE;border-style: solid;border-width: 2px;margin: 0 auto;text-align: center;}

Screenshot

PenjelasanLatihan ini kita belajar membuat suatu button tapi button disini lebih mirip suatu frame kotak yang didalamnya terdapat link, frame tersebut adalah tag yang diberi style css berupa ukuran tinggi, lebar, warna tepi tabel, sampai dengan pengaturan perataan teks . Tulisan my button dijadikan sebagai link 11. Multiple SelectorsCode

Result

I'm plain old font!Me, too!Me three!Forget you guys. I'm about to be red!

div div div h3{color: red;}

Screenshot

PenjelasanDalam praktikum ini kita diminta untuk memberi style berupa pengubahan warna tulisan jadi merah pada h3 yang bersarang didalam 3 div. Untukitu kita harus menuliskan selector seperti berikut div div div h3 sehingga kalimat didalam h3 tersebut dapat dikenai style12. Class Code

Result

aw mewah

.mewah{font-family: cursive;color: #0000CD;}

Screenshot

PenjelasanDalam latihan ini kita mendapat ilmu baru berupa penggunaan class, class merupakan pembuatan selector yang dapat diterapkan pada banyak elemen, ciri dari suatu class selector diawali dengan tanda . (titik)13. IDCode

Result

aw im serious

aw im not serious

kdding mee

#serious{font-family: Courier;color: red;}#no{text-decoration: underline;}.al{color: red;}.in{text-decoration: underline;}.al .blue{color:blue;}

Screenshot

PenjelasanBerbeda dengan class. ID hanya dapat diterapkan pada satu elemen saja.Dalam latihan diatas terdapat dua ID dan dua class yang dibuat. Untuk menerapkan ID selector kita diawali dengan tanda #, ada beberapa properti yang belum digunakan pada praktikum sebelumnmya yaitu properti text-decoration untuk memberi dekorasi pada teks seperti underline/garis bawah.

B. TUGAS ASISTENSI

Code

CERITA TERKINI NARUTO SHIPPUDEN

Naruto

• Sasuke
• Kakashi
• Hinatha
• Neiji
• Sikhamaru
• Pain
• Raicu

Info naruto

Berita shipuden

download

• komik
• Konoha

Database

• profil naruto
• profil sasuke
• profil kakashi
• profil sakura

Gambar

video

link lain

lowongan subGo

Cerita Terkini naruto shippudenDesa Konoha komik shonen jump
Telp: telephatyProfil
naruto seorang bocah dengan kyubi monster didalamnya memiliki kekuatan yang luar biasa cita-cita nya menjadi seorang hokage didesanyaBaca selengkapnya Tentang Naruto Shippuden anime terupdate dan terpopuler
Desa Konoha gakuen Keuntungan baca naruto VISI

Anime terpopuler selama 15 tahun terkini

MISI

1. Motivasi Naruto
2. Jangan menyerah dengan cita-citamu
3. Kembangkan kemampuanmu semaksimal.
4. Gunakan jurus-jurus dan plan rahasia
5. Pantang menyerah

Update terkini Berita TerbaruMadaraKategori: musuhMadara Uchiha (??????, Uchiha Madara) was a legendary leader of the Uchiha clan. He founded Konohagakure alongside his rival, Hashirama Senju, with the intention of beginning an era of peace. When the two couldn't agree how to achieve that peace, they fought for control of the village, a conflict that ended in Madara's death. He rewrote his death and went into hiding to work on his plans to end world conflict. Unable to complete it in his natural life, he entrusted his knowledge and plans to Obito Uchiha shortly before his second death. Years later, Madara would be revived, only to see his plans foiled before dying one final time...Baca selengkapnya
PainKategori: musuhThe Six Paths of Pain (?????, Pein Rikudo) is an Outer Path technique devised by Nagato after being crippled by Hanzo and rendered emaciated from the numerous chakra receivers embedded in his back by the Demonic Statue of the Outer Path. By piercing corpses with chakra receivers, a wielder of the Rinnegan can manipulate the bodies as though they are their own....Baca selengkapnya
UchihaKategori: musuhItachi Uchiha (??????, Uchiha Itachi) was a prodigy of Konohagakure's Uchiha clan. He became an international criminal after murdering his entire clan, sparing only his younger brother, Sasuke. He joined Akatsuki, where he came into frequent conflict with Konoha and its ninja, including Sasuke, who sought to avenge their family. After dying during a battle with Sasuke, Itachi's motivations were revealed to be more ...Baca selengkapnya
Informasi update terbaruLogin Member NarutoUsername :

Password :

Tipe Akun :NarutoSasuke

PollingBagaimana episode naruto 689Kurang Menarik

Menarik

Sangat Menarik

Networking Support By :

&copy Naruto SHippuden
Desa Konohagakuen
Telp: telephatyPowered By HTML dan CSS

body{height:auto;background: url('img/back.jpeg');font-family: Arial;font-size: 13px;background-position:center top;margin: 0 auto;}p{text-align: justify;}#outer{width:930px;height:auto;padding: 5px;border-radius: 5px; border: 1px solid #ccc;background:#fff;box-shadow:0px 0px 10px #999;margin: 10px auto auto auto;}#header{width:900px;height:300px;background: url('img/banner.jpg') no-repeat;}#wrapper{width:930px;margin-top: 10px;border-top: 4px dashed #f8c408;padding-top: 10px;}#content{width:600;float:left;}

.post{width:600px; border: 1px solid #ddd;padding: 0 10px 10px 10px;border-radius: 5px;line-height: 20px;margin-bottom: 5px;}.post-img{width:75px;height:75px;border: 1px solid #ddd;padding: 3px;background: #fff;float: left;margin-right: 7px;}.post-title, .post-title a {font-size: 17px; font-weight: bold; font-family: Arial;color: #008080}.post-detail{font-size: 12px; color: #9ACD32;}

.sidebar-wrapper{width:290px;float: right;border: 1px solid #ddd;border-radius: 5px;padding: 5px;}.sidebar-title{width:280px; background: #333; color: #fff;height: 20px;padding: 5px 0 5px 10px;font-size: 15px;font-weight: bold;border-radius: 5px;border-bottom: 5px solid #9fd87c;}.sidebar{width: 280px; background: #fff; color: #008080;}.sidebar-content{margin-bottom: 10px;padding: 10px;}

#footer{width:910px;height:50px;background: lime;line-height: 20px;color: #fff;padding: 10px;font-weight: bold;font-size: 11px;box-shadow: inset 0px 0px 30px 10px #5082a7;border-top: 5px solid #9fd87c;}/* Navigation */.navsub{height:40px;font-size: 13px;line-height: 25px;padding-left: 5px;background:url('img/menu-bg.jpg') repeat-x;margin: 0px;}.navsub a{color:#191970;text-decoration: none;}.navsub ul,.navsub li{padding:5px 10px 5px 10px;list-style:none;}.navsub ul{height:40px;width:930px;line-height:25px;}.navsub li{float:left;display:inline;position:relative;height:17px;margin-top:5px;line-height:17px;color: #fff;margin-right: 5px;}.navsub li:hover{color:#fff;background:cyan;border-radius: 5px;}.navsub li a:hover{color:#fff;text-decoration: none;}.navsub ul.navsubs{height:auto;overflow:hidden;width:170px;background:#fff;position:absolute;display:none;border-top: 3px solid #f39c12;border-bottom: 3px solid #f39c12;left:0;top:30px;}.navsub ul.navsubs li{display:block;width:150px;border-bottom:1px dotted #f39c12;color: #008080;}.navsub ul.navsubs a{color:#000;line-height:20px;font-size:13px;text-decoration: none;}.navsub li:hover .navsubs {display:block;}.navsub ul.navsubs a:hover{text-decoration: none;}

/* Search */ #search-box {position: relative; width: 50px; float: left; }#search-form {height: 34px; padding-left:2px; border-radius: 3px;} #search-text {font-size: 12px; color: #ddd; background: transparent; } #search-box input {background: #eee; border-radius: 5px;width: 200px; border: 1px solid #efefef; padding: 5px; color: #333; margin: 5px;} #search-button {display: none;}

/* Tab */.main_tabs {position: relative;min-height: 450px;clear: both;margin: 25px 0;}.tabber {float: left;}.tabber label {background: yellow;padding: 5px 10px;border: 1px solid #7fc22e;border-radius: 5px 20px 0 0;margin-bottom: 0;position: relative;color: navy;font: bold 13px Verdana;box-shadow: inset 3px 5px 15px #7fc22e;}.tabber:hover label {background: #F5FFFA;color: #DEB887;}.tabber [type=radio] {display: none;}.tab_content {position: absolute;top: 22px;left: 0;background: #FFFFFF;right: 0;bottom: 0;padding: 20px;border: 2px solid #9fd87c; border-radius: 0 10px 10px 10px;overflow: hidden;}[type=radio]:checked, [type=radio]:hover {font-weight: bold;background: #c1e09c;color: #fff;}[type=radio]:checked ~ label ~ .tab_content {z-index: 1;}

Screenshot

Link gambar

PenjelasanPenggunaan selector berjenis ID dan class sangat menentukan kesuksesan dalam pembuatan web ini, sehingga kita dapat melakukan berbagai pengeditan warna ukuran posisi kedalam berbagai property. Terdapat 1 link yang saya berikan untuk dilinkan ke halaman gambar. Untuk mengedit kita dapat menggunakan banyak selector seperti header, navbar, tab, dsb. Berikut adalah beberapa penjelasan dari script

#footer{width:910px;height:50px;background: lime;line-height: 20px;color: #fff;padding: 10px;font-weight: bold;font-size: 11px;box-shadow: inset 0px 0px 30px 10px #5082a7;border-top: 5px solid #9fd87c;}Footer merupakan selector class untuk mengedit footer pada web, propertinya: width untuk mengatur lebar, height untuk mengatur tinggi footer, background untuk mengatur pewarnaan latar footer, line-height untuk mengatur tinggi garis footer, padding:10 px mengatur padding (jarak tabel dengan border (didalam table)) font bold=ketebalan font, size: ukuran font , box shadow untuk membuat footer seperti tampak bayangan, selainnya itu adalah untuk pengaturan panjang posisi warna dsb.

C. KESIMPULANCSS digunakan untuk mengedit style dari dokumen htmlStyle sendiri sebenarnya mengandung dua bagian, yaitu selector dan deklarasi propertiCSS dapat dipakai antara lain utk menentukan gambar, baik latar belakang atau untuk latar depan, memberi warna latar belakang tag dan mengatur lebar maupun tingginya, membuat bingkai, membagi halaman berdasarkan kolom.HTML hanya menangani bagian isi halaman sedangkan untuk pengaturan tampilan dilakukan melalui css.

DAFTAR PUSTAKA Tim Asisten Dosen / Praktikum. 2015. Modul 2 CSS . Malang: Universitas Negeri Malang