LAPORAN PRAKTIKUM PEMROGRAMAN BERBASIS WEBMODUL 3
LAPORAN
UNTUK MEMENUHI TUGAS MATAKULIAHPRAKTIK DASAR PEMROGRAMAN
KOMPUTERYang Dibina Oleh Bapak Didik Dwi Prasetya
OLEH :Muhamad Ainurrahman130533608096OFF E 2013
PRODI S1 PENDIDIKAN TEKNIK INFORMATIKAJURUSAN TEKNIK
ELEKTROFAKULTAS TEKNIKUNIVERSITAS NEGERI MALANG MALANGFEBRUARI
2015PRAKTIKUM KE-3DESAIN WEB
A. LATIHAN PRAKTIKUM1. Penggunaan Property Clear:bothCode
Layout Dasar Dokumen Web HeaderNavigationSidebar menggunakan
float:leftMenggunakan float:rightKabupaten Malang adalah sebuah
kota yang memukau, ada banyak tempat wisata yang dapat dikunjungi.
salah satunya adalah pantai Balekambang.keindahan dan ombak yang
sangat luar biasa dapat dinikmatiFooter menggunakan clear:both
body{`width:960px;}header, nav, aside, section,
footer{background: #14BCE6;border: 1px solid white;color:
white;font-size: 2em;font-variant: small-caps;text-align:
center;}
header, nav, footer {width: 100%;}
header, footer{height: 100px;}nav{height:50px;}aside{float:
left;height: 250px;width: 29.5%;}section
#content{float:right;height:250px;width:70%;}footer{clear:both;}
Screenshot
PenjelasanDalam latihan 1 ini kita belajar bagian bagian dari
desain web antara lain ; Elemen Header ; yang berisi judul dan
penjelasan lain dokumen. Elemen Navigation ; Elemen navigasi, yang
memberikan akses navigasi ke halaman-halaman lain dalam web.Elemen
Sidebar ; Elemen pendukung konten, dapat berupa pembantu navigasi
konten, Elemen Konten ; Isi utama dari dokumen web. pada bagian
ini.Elemen Footer ; Bagian penutup dari website, berisi informasi
lain tentang website. Properti height dan weight digunakan untuk
mengubah tinggi dan lebar dari laman web. Clear: both; diberikan
pada footer untuk mematikan fungsi float kiri dan kanan sehingga
footer tidak mengikuti alur dari float yang diterapkan pada tag
content. Margin memberikan jarak pada setiap element sedangkan
Padding memberi jarak Antara Konten dengan Element.
2. Teknik Clear FixCode
Layout Dasar Dokumen Web HeaderNavigationSidebar menggunakan
float:leftMenggunakan float:rightHimpunan mahasiswa teknik elektro
adalah sebuah organisasi yang mengedepankan kekeluargaan dan
kebersamaan"Elektro unity"Footer menggunakan clear:both
*{margin: auto;}
body {width, 960px;}
header, nav, aside, section, footer {background: #14BCE6;border:
1px solid white;color:
white;font-size:2em;font-variant:small-caps;text-align:center;}
header, nav, footer {width: 100%;}header, footer {height:
1--px;}nav {height: 50%;}aside {float: left;height: 250px;width:
29.5%;}section #content {float: right;height: auto;width:
70%;}.container {margin: 0;padding:
0;}.container:before,.container:after {content:
"";display:table;}.container:after {clear:both;}
Screenshot
PenjelasanDalam latihan 2 kita menambahkan teknik clear fix,
jika kita tidak mengetahui dengan pasti dimana elemen selanjutnya
akan diterapkan, ketika menerapkan clear : both; pada suatu elemen,
maka kode itu tidak akan bekerja dengan baik, dan posisi elemen
yang ada clear:both; tidak dapat ditentukan dengan pasti oleh
karena itu utk mengatasi kita menggunakan teknik clear fix untuk
membersihkan atau menghilangkan aturan kiri dan kanan dari elemen
sebelumnya..container {margin: 0;padding:
0;}.container:before,.container:after {content:
"";display:table;}.container:after {clear:both;}Pada dasarnya
teknik clear fix menerapkan aturan clear:both untuk membersihkan
float, namun ada penambahan sebuah tabel dummy sebelum dan sesudah
elemen penampung.3. Pembuatan GridCode
Contoh Grid pada
HTML11111111111122222233334445526675849310211112
.col1, .col2, .col3, .col4,.col5, .col6, .col7, .col8,.col9,
.col10, .col11, .col12
{background:#CCC;display:block;float:left;height:30px;line-height:
30px;margin: 0 10px 0 10px;padding: 0;text-align:center;}.col1
{width: 60px;}.col2 {width: 140px;}.col3 {width: 220px;}.col4
{width: 300px;}.col5 {width: 380px;}.col6 {width: 460px;}.col7
{width: 540px;}.col8 {width: 620px;}.col9 {width: 700px;}.col10
{width: 780px;}.col11 {width: 860px;}.col12 {width: 940px;}
.container {background: #555;margin: 0;padding: 0;width:
960px;}
.container:before,.container:after,.row:before,.row:after
{content:"";display:table;}
.container:after,.row:after {clear:both;}.row{clear:both;
margin:10px 0 10px 0;}
Screenshot
penjelasandalam latihan ini kita belajar tentang grid system ,
Grid memiliki proporsi dan jarak antar item yang konsisten dan akan
membantu dalam membuat website yang nampak profesional. Selain itu
grid juga akan membantu memunculkancontinuityantar halaman web yang
mungkin menggunakan desain yang berbeda. Grid umumnya dilakukan
untuk menyusun elemen secara merata. Grid membantu dalam menentukan
posisi dari tiap elemen. Secara tidak langsung elemen yang disusun
sedemikian rupa juga akan membentuk sebuah garis lurus yang jelas
kita lihat. Hal ini juga akan sangat membantu memudahkan pengguna
dalam membaca isi halaman web tersebut. standart yang banyak
dipakai adalah ukuran 960 pixelB. TUGAS ASISTENSICode
Contoh Grid pada HTML
- Home
- Profil
- Tentang Kami
- Visi dan Misi
- Service
- Software Development
- Web Development
- Interior Design
- Multimedia Interactive
- Article
- Kontak Kami
Menu Utama
- Home
- Profile
- Portfolio
- Blog
- Contact
Kategori Tutorial
- Web Design
- Web Programming
- Flash Animation
- Digital Marketing
- Content Management System
Rahasia Responsive Web Design (RWD) dengan HTML5 dan CSS3
Responsive Web Design (RWD) semakin populer sekitar pertengahan
2010 lalu, ini berawal dari sebuah artikel Design Web Responsive
yang ditulis oleh Ethan Marcotte pada website alistapart.com. Pada
artikel tersebut dia mengusulkan bagaimana sebuah desain web bisa
menyesuaikan sendiri ukuran tampilan pada perangkat Mobile dan
Desktop secara Fleksibel tanpa harus membuat dua desain untuk
perangkat berbeda dengan konten yang isinya sama, dari permasalahan
itulah maka lahirlah konsep Responsive Web Design yang lebih
fleksibel dan bisa beradaptasi hampir disemua layar berbeda. "The
control which designers know in the print medium, and often desire
in the web medium, is simply a function of the limitation of the
printed page. We should embrace the fact that the web doesnt have
the same constraints, and design for this flexibility. But first,
we must 'accept the ebb and flow of things." John Allsopp, A Dao of
Web DesignJumlah pengguna perangkat mobile seperti Smartphone dan
Tablet setiap hari semakin meningkat, mulai dari berbagai macam
Netbook, BlackBerry, iPhone, iPad dan berbagai macam perangkat
dengan sistem operasi Android sepertinya tidak akan ada habisnya.
Sebelum adanya Responsive Web Design seperti saat ini jika memang
harus mendesain dan menyesuaikan semua perangkat tersebut mungkin
bagi saya pribadi adalah sesuatu yang konyol dan tampak bodoh, dan
akan lebih baik buat saya hanya fokus pada desain yang hanya
ditampilkan pada layar desktop saja.
Para pengembang web diluar sana tentu tidak tinggal diam untuk
mengatasi masalah ini, maka lahirlah istilah Responsive Web Design
dari hasil pengembangan pada fitur CSS terbaru yaitu CSS3 yang
memiliki dukungan penuh untuk mengatasi berbagai resolusi pada
layar dengan teknik terbaru yang diberi nama Media Queries.
Ada 3 unsur inti yang harus ada pada Responsive Web Design agar
bisa bekerja dengan baik, yaitu pada Flexible Grids, Fluid Images
dan Media queries. Dari ketiga unsur tersebut diharafkan sebuah
desain nantinya bisa beradaptasi pada berbagai layar berbeda, tidak
peduli beberapapun banyaknya perangkat yang ada, dengan Responsive
Web Design semua bisa dikontrol hanya dalam satu desain saja.
Copyright 2015 Muhamad Ainur Css file.col1, .col2, .col3,
.col4,.col5, .col6, .col7, .col8,.col9, .col10, .col11, .col12 {
background: #F0FFFF; display: block; float: left; height: 30px;
line-height: 30px; margin: 0 10px 0 10px; padding: 0; text-align:
center;}.col1 { height: auto; width: 60px;}.col2 { height: auto;
width: 140px;}.col3 { height: auto; width:
220px;overflow:hidden;}.col4 { height: auto; width: 300px;}.col5 {
height: auto; width: 380px;}.col6 { height: auto; width:
460px;}.col7 { width: 540px;}.col8 { height: auto; width:
620px;}.col9 { width: 700px;height:auto;}.col10 { height: auto;
width: 780px;}.col11 { height: auto; width: 860px;}.col12 { height:
auto; width: 940px;}.container { background: powderblue;
margin-left: auto;margin-right:auto; padding: 0; width:
960px;}.container:before,.container:after,.row:before,.row:after {
content:""; display:table;}.container:after,.row:after {
clear:both;}.row {clear:both; margin: 10px 0 10px 0;}/*awal
sidebar*/#sidebar{width: 200px;padding:10px;margin : 0px 0px 0px
0px;color:#424242;background-color:#e8e8e8;}/*widget*/.widget{width:
100%;padding:0px;margin-bottom:20px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-box-shadow:0
1px 3px rgba(0,0,0,0.1);-moz-box-shadow:0 1px 3px
rgba(0,0,0.0.1);box-shadow:0 1px 3px
rgba(0,0,0,0.1);}.widget-title{color:#fff;background:url("")
repeat-x #72b626;padding:0px
20px;height:30px;line-height:30px;display:block;border:none;}.widget-title
h3{font-family:Arial;font-weight:bold;font-size:12px;letter-spacing:0.5px;text-transform:Uppercase;}.widget
ul{list-style:none;background:#fff;padding:5px 0 5px
0;border:none;}.widget li{border-bottom:1px dotted #d9d9d9;padding:
8px 15px;color:#666;}.widget
li:last-child{border-bottom:none;}/*link widget */.widget li
a{color:#444;text-decoration:none;}.widget li
a:hover{font-weight:bold;color:#ff6c00;}/*akhir sidebar*//*awal
dropdown*/#navigation { background-color : black; width : 940px;
height : 48px; border-bottom : 1px solid #ccc; } #navigation ul {
padding:0; margin:0; list-style-type:none; } #navigation ul li {
float:left; position : relative; } #navigation ul li a {
display:block; padding:10px 20px; color:#fff; text-decoration:none;
font-family: calibri; } #navigation ul li a:hover {
background-color:#72b626; } /* Menu Dropdown */ #navigation ul li
ul { display: none; } #navigation ul li:hover ul { display:block;
position: absolute; } #navigation ul li:hover ul li a {
display:block; background-color : black; color : #fff; width :
150px; border-bottom : 1px solid #ccc; } #navigation ul li:hover ul
li a:hover { background-color : #72b626; } #navigation ul li:hover
> a {background:
#72b626;}.shadow4{background:#3498db;box-shadow: 0 0 10px
#2980b9;}ScreenshotPenjelasanDalam studi kasus ini, memanfaatkan
grid system dari latihan praktikum dengan ukuran 960px, 940px untuk
ukuran penuh dan 20px untuk margin kanan dan kiri. Dalam web studi
kasus ini terdapat 5 elemen, yaitu elemen header, menubar, sidebar,
content, dan footer. Didalam element header diinsert-kan gambar
yang menjelaskan judul dari web yang ditampilkan . kemudian pada
menubar terdapat 5 menu, dan ada beberapa menu yang menampilkan
menu dropdown, untuk membuat menu dropdown, perlu membuat kode
html, ul dan li sub menu dari menu, misalnya service sebagai menu,
maka didalam nya terdapat submenu web development, software
development,dsb #navigation ul li {float:left; position :
relative;} script disamping digunakan untuk pengaturan css dari
menubar, agar float nya mengapung kekiri dan relative agar
posisinya relatif, agar ketika mouse berada diatas menubar,
backgroundnya berubah maka ditambahkan #navigation ul li a:hover
{background-color:#72b626;} untuk membuat dropdown terlebih dahulu
kita membuat li didalam ul menubar,, dan menambahkan css
#navigation ul li ul {display: none; } #navigation ul li:hover ul {
display:block;position: absolute;} untuk lebih lengkapnya anda
dapat melihatnya di kode css diatas, sedikit penjelasan. Ketika
posisi mouse tidak berada diatas menu maka menu dropdown
disembunyikan yaitu menggunakan kode display:none; tapi mouse
berada diatas menu (hover) maka menu dropdown ditampilkan dengan
kode display:block dan background warna menu berubah
background-color:#72b626; . ada juga penambahan sidebar, yang
memakan space cukup banyak dalam cssnya. Untuk membuat sidebar,
kita perlu membuat div baru didalam cols3, kemudian div tersebut
berisi kotak kolom yang disusun dengan kebawah dengan membuat menu
ul li, agar sidebar nya rapi kita perlu mengatur ukuran padding
secara seimbang, dan juga mengubah warna teks ketika mouse berada
diatas menu sidebar dengan menambahkan .widget li
a:hover{font-weight:bold;color:#ff6c00;}, ada juga
border-radius:2px; untuk mengatur ukuran ujung dari border kotak.
Dan juga menambahkan .shadow4{background:#3498db;box-shadow: 0 0
10px #2980b9;} agar terdapat efek shadow pada kotak sidebar. Agar
tinggi box secara otomatis mengikuti isi content maka perlu
menambahkan height:auto pada tiap-tiap cols. C. KESIMPULAN Salah
satu cara untuk membuat halaman lebih mudah diprediksi ialah dengan
menggunakan garis pembantu penyusunan elemen, yang dikenal dengan
nama Grid pada dunia web. Permasalahan lain muncul setelah
penggunaan style clear:both; . Jika kita tidak mengetahui dengan
pasti di mana elemen selanjutnya akan diletakkan, maka style
clear:both tidak akan dapat bekerja dengan baik. Metode lain untuk
membersihkan float ialah dengan menggunakan teknik clear fix Grid
membantu dalam menentukan posisi dari tiap elemen. Secara tidak
langsung elemen yang disusun sedemikian rupa juga akan membentuk
sebuah garis lurus yang jelas kita lihat. Hal ini juga akan sangat
membantu memudahkan pengguna dalam membaca isi halaman web
tersebut.DAFTAR PUSTAKATeam Asisten Universitas Negeri Malang.
2015. Modul 2 CSS. Malang : Universitas Negeri MalangTeam Asisten
Universitas Negeri Malang. 2015. Modul 3 Desain Web. Malang :
Universitas Negeri MalangDwi Purwanto, Muhar. Membuat Website Pas
di Segala Ukuran Layar, (online)
.http://trikweb.defra.in/membuat-website-pas-di-segala-ukuran-layar.html,
diakses 17 Februari 2013O-OM.COM. Rahasia Responsif Web Design
(RWD) dengan HTML5 dan CSS3,(online) .
http://www.o-om.com/2013/09/responsive-web-design-valid-html5-css3.html,
diakses 17 Februari 2013.15
