LAPORAN PEMROGRAMAN WEB - DESAIN WEB DAN LAYOUT

LAPORAN PRAKTIKUM MODUL 3

PEMROGRAMAN WEB

DESAIN WEB (LAYOUT dan MENU)

Disusun Oleh:

Ananda Putri Syaviri(130533608243)

PTI OFF B

UNIVERSITAS NEGERI MALANG FAKULTAS TEKNIK JURUSAN TEKNIK ELEKTRO

PROGRAM STUDI S1 PENDIDIKAN TEKNIK INFORMATIKA

25

Februari-2015

MODUL 3

DESAIN WEB (LAYOUT dan MENU)

A. KOMPETENSI DASAR

• Memahami penggunaan teknik “clear fix” dalam membuat

layout website.

• Memahami fungsi Grid System.

• Mampu menggunakan teknik “clear fix” dan Grid System

untuk membuat layout website.

B. PETUNJUK

• Awali setiap aktivitas dengan do’a, semoga berkah dan

bermanfaat.

• Pahami tujuan, dasar teori, dan latihan-latihan

praktikum dengan baik dan benar.

• Kerjakan tugas- tugas praktikum dengan baik, sabar dan

jujur.

• Tanyakan kepada asisten/ dosen apabila ada hal-hal yang

kurang jelas.

C. DASAR TEORI.

1. Permasalahan Penggunaan Property Float

25

Property float berfungsi “mengapungkan” elemen.

Sehingga elemen tersebut akan berpindah sesuai isi dari

property float. Permasalahan yang muncul adalah float

merusak alur dari halaman. Ketika menggunakan properti

float, elemen-elemen lain akan menjadi mengikuti aturan

kiri atau kanan dari float.

Salah satu cara umum yang dilakukan untuk mengatasi

permasalahan float adalah

penggunaan clear:both

2. Teknik Clear Fix

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”.

3. Grid Sistem

Salah satu cara untuk membuat halaman lebih mudah

diprediksi ialah dengan menggunakan garis pembantu

penyusunan elemen, yang dikenal dengan nama “Grid” pada

dunia web. Sebagai garis pembantu dalam menyusun

elemen, Grid dibuat dalam berbagai bentuk dan ukuran,

sesuai dengan keperluan. Penempatan elemen dilakukan di

dalam sebuah Grid, ataupun di dalam beberapa Grid.

Pemakaian Grid umumnya dilakukan untuk menyusun elemen

secara merata. Jika ingin membuat halaman berukuran 960 px

25

memiliki 12 Grid, kita dapat melakukan perhitungan

berikut:

lebar_grid = 960 / 12

lebar_grid = 80 px

Jika ingin setiap kolom memiliki jarak 20 px kita dapat

menambahkan margin ke kiri dan ke kanan pada setiap kolom,

sebanyak setengah dari jarak yang diinginkan (10 px),

seperti berikut:

konten_grid = 80 - jarak

= 80 - 20

= 60 px

Sehingga ukuran margin kiri dan kanan dari elemen adalah:

margin_kiri_kanan = jarak / 2

= 20 / 2

= 10 px

D. LATIHAN

1. Penggunaan Property Clear:both. .

- File css style.css

body {width:960px;}

header, nav, aside, section, footer { background: #14BCE6; border:1px solid white; color:white; font-size:1.5em; font-varient: small-caps; text-align:center;}

header, nav, footer {width:100%;}

25

header, footer {height:100px;}

nav {height:50px;}

aside{ float:left; height:250px; width:29.5%;}

section#content{ float:right; height:200px; width:70%;}

footer { clear: both;}

- File html

<!doctype html><html><head><title>Layout Dasar Dokument Web</title><link rel="stylesheet" href="style.css"></head><body> <header>Header</header> <nav>Navigator</nav> <aside>Sidebar menggunakan float:left</aside> <section id="content"> <h3>Menggunakan float:right</h3> lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmood tempor incididunt ut labore et dolore magna aliqua.ut enim ad minim veniam, quis nostrud exercitation ullmco laborisnisit ut aliquip ex ea commodo consequent.</section> <footer>Footer menggunakan clear:both</footer></body></html>

Gambar 1.1 kode HTML

25

Gambar 1.2 Tampilan hasil halaman web

Penjelasan : Dari program diatas, saya mengubah ukuran tulisan padaheader, nav, aside, section dan footer dari 2em menjadi1,5em, karena browser yang saya gunakan dibuka pada resolusipc yang kecil sehingga jika diload tulisan dan tata letakakan berubah dan tidak rapi. Untuk penerapan float leftdigunakan pada sidebar, float right pada bagian section danclear both pada footer. Size tulisan yan digunakan dapatdiubah agar halaman web tersebut tersusun rapi. Kemudianuntuk pengaturnan width/height juga dapat diatur kembaliagar dapat tampil rapi dalam browser pc yang digunakan.Karena resolusi tiap pc berbeda sehingga perlu diaturkembali baik ukuran width atau height tergantung hasilnyananti.

25

2. Teknik Clear Fix

body {width:960px;} // deklarasi ukuran body dengan width 960pxheader, nav, aside, section, footer { //deklarasi untuk header, navigasi, aside, section dan footer dibentuk denga background berwarna biru dengan kode #14BCE6, border setebal 1px dengan warna putih padat, warna tulisan putih dengan ukuran 1.5em, jenis font small-caps dan letak tulisan berada di tengah. background: #14BCE6; border:1px solid white; color:white; font-size:1.5em; font-varient: small-caps; text-align:center;}header, nav, footer {width:100%;} //deklarasi ukuran header, navigasi dan footer dengan width (panjang) berukuran 100%header, footer {height:100px;} //deklarasi ukuran header dan footer dengan height(lebar) sebesar 100%nav {height:50px;} // deklarasi untuk bagian navigasi berukuran height(lebar) sebesar 50px.aside{ //deklarasi untuk bagian aside menerapkan float left dengan height(lebar) 250px dan width(panjang) 29.5% float:left; height:250px; width:29.5%;}section#content{ // deklarasi untuk bagian section menggunakan id content menerapkan float right berukuran height(lebar) sebesar 200px dan width(panjang) sebesar 70%.

float:right; height:200px; width:70%;<!doctype html> // pendeklarasian dokumen html<html> //tag pembuka html<head> //tag pembuka html<title>Layout Dasar Dokument Web</title> // pemberian judul pada halaman web<link rel="stylesheet" href="style.css"> // deklarasi linked style untuk pemanggilan file css yang digunakan untuk menerapkan fungsi didalamnya kedalam dokumen html</head><body> <header>Header</header> // deklarasi header diberi tulisan header <nav>Navigator</nav> //deklarasi navigator diberi tulisan navigator <aside>Sidebar menggunakan float:left</aside> // deklarasi side bar menerapkan fungsi float: left sehingga letaknya berada pada kiri halaman. <section id="content"> // pemanggilan id content yang dideklarasikan pada file css untuk membentuk section <h3>Menggunakan float:right</h3> lorem ipsum dolor sit amet, consectetur adipisicing elit, // menerapkan jenis tulisan heading3 dan peletakan tulisan pada float: right (kanan halaman) diurutkan sejajar dengan content sectionsed do eiusmood tempor incididunt ut labore et dolore magna aliqua.ut enim ad minim veniam, quis nostrud exercitation ullmco laborisnisit ut aliquip ex ea commodo consequent.</section>

25

- File css*{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:100px;}nav{height:50px;}

aside{ float:left; height:275px; width:29.5%; }section#content{ float:right; height:275px; width:70% }.container{ margin:0; padding:0; } .container:before, .container:after{ content:""; display:table; } .container:after{ clear:both; }

- File html<!DOCTYPE html><html> <head> <title>layout Dasar Dokumen Web</title>> <link rel="stylesheet" href="style2.css"> </head> <body> <div class="container"> <header>Header</header>

25

<nav>Navigation</nav> <aside>Sidebar menggunakan float:left</aside> <section id="content"> <h3>menggunakan float:right</h3>lorem ipsum dolor sit amet, consectetur adipisicing elit,sed do eiusmood tempor incididunt ut labore et dolore magna aliqua.ut enim ad minim veniam, quis nostrud exercitation ullmco laborisnisit ut aliquip ex ea commodo consequent.</section></div><footer>Footer</footer></body></html>

Gambar 2.1 kode HTML


Penjelasan :

Pada halaman web diatas, sama seperti latihan pertaman hanyasaja pada bagian section sudah tertata rapi tentunya denganpengubahan aturan pada file css yang digunakan.sama sepertipada latihan 1, file css penyusunnya hampir sama hanyapendeklarasian isi tulisan atau ukuran width/height yan

25

sedikit bervariasi sehingga dapat menampilkan hasil halamweb seperti diatas. *{margin:auto;} //deklarasi penggunaan margin auto pada halaman web inibody{width:960px;} //deklarasi bagian body berukuran width(panjang) sebesar 960pxheader,nav,aside,section,footer{ //deklarasi bagian header, navigasi, aside, section dan footer menggunakan background berwarna biru

//dengan kode warna #14BCE6 , menggunakan border setebal 1px berwarna putih padat(terdapat fill), tulisan berwarna putih dengan

//font sizi sebesar 2em, jenis tulisan small-caps dan posisi text berada ditengah

background: #14BCE6;border: 1px solid white;color : white;font-size: 2em;font-variant: small-caps;text-align: center;

}header, nav, footer {width: 100%;} //deklarasi bagian header, navigasi dan footer berukuran width(panjang) sebesar 100%header, footer{height:100px;} //deklarasi bagian header dan footer berukuran height(lebar) sebesar 100pxnav{height:50px;} //deklarasi bagian navigasi berukuran height(lebar) sebesar 50px

aside{ //deklarasi bagian aside menerapkan float left dengan ukuran height (lebar) sebesar 275px, dan width (panjang) sebesar 29.5%

float:left;height:275px;width:29.5%;}

section#content{ //deklarasi bagian section menggunakan id content , menerapkan floatright dengan ukuran height 275px dan width 70%

float:right;height:275px;width:70%}

.container{// deklarasi class container menggunakan margin dan padding = 0 margin:0;padding:0;}.container:before,.container:after{

25

3. Pembuatan Grid- File css.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;}












.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;

<!DOCTYPE html> //deklarasi dokumen html<html> //tag pembuka html

<head> //deklarasi bagian head terdapat pendeklarasian pemberian judul title untuk dokumen html bernama layout dasar dokumen web

<title>layout Dasar Dokumen Web</title>><link rel="stylesheet" href="style2.css"> // linked style untuk

memanggil fungsi-fungsi yang dideklarasikan pada file css</head>

<body> //deklarasi baian body <div class="container"> // deklarasi pemanggilan class container yang

dideklarasikan pada file css<header>Header</header> // deklarasi bagian header<nav>Navigation</nav> //deklarasi bagian navigation<aside>Sidebar menggunakan float:left</aside> //delarasi bagian aside

menerapkan float left dimulai dari penulisan "sidebar menggunakan"<section id="content"> //deklarasi bagian section menggunakan id

content yang dideklarasikan pada file css<h3>menggunakan float:right</h3>lorem ipsum dolor sit amet, consectetur

adipisicing elit, //deklarasi penggunaan heading3 untuk tulisan dengan float rightsed do eiusmood tempor incididunt ut labore et dolore magna aliqua.ut enim ad minim veniam, quis nostrud exercitation ullmco laborisnisit ut aliquip ex ea commodo consequent.</section> //tag penutup section

25

margin:10px 0 10px 0; }

- File html<!doctype html><html><head><title>Contoh Grid pada HTML</title><link rel="stylesheet" href="grid.css"></head>

<body><div class="container"><div class="row"><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div><div class="col1">1</div></div>

<div class="row"><div class="col2">2</div><div class="col2">2</div><div class="col2">2</div><div class="col2">2</div><div class="col2">2</div><div class="col2">2</div></div>

<div class="row"><div class="col3">3</div><div class="col3">3</div><div class="col3">3</div><div class="col3">3</div></div>

<div class="row"><div class="col4">4</div><div class="col4">4</div><div class="col4">4</div></div>

<div class="row"><div class="col5">5</div><div class="col5">5</div><div class="col2">2</div></div>

<div class="row"><div class="col6">6</div><div class="col6">6</div></div>






<div class="row">

25

<div class="col12">12</div></div></div>

</body></html>

Gambar 3.1 Kode HTML


Penjelasan:Untuk program diatas, merupakan system grid yang akandigunakan untuk membangun sebuah website nantinya, sehinggatidak lagi menggunakan div tetapi dapat menggunakan fungsigrid. Ukuran penuh dari suatu halaman disebut container.Setiap float dibagi menjadi beberapa bagian yang dibagiberdasarkan perhitungan tiap kolom menjadi bentuk blok-blokbagian yang nantinya dapat diisi content dari halaman web.Contoh, pada container terdapat 12 pembagian kolom. col1memiliki lebar 1/12 dari container, col2 1/6, col3 1/4 dst,dengan pendelarasian width berbeda dari col1-12. Denganpendeklarasian dari id col1-12 yang berisi background warna,display, float yang digunakan, height, line-height dll.Untuk pendeklarasian container terdiri dari backgroundwarna, margin, padding dan width dengan ukuran 960px. Untuk

25

pendeklarasian container sebelunnya, terdpat penerapanclear:both untuk bagian row.

25

<!doctype html> //deklarasi dokumen html<html> //tag pembuka html<head> //tag pembuka head<title>Contoh Grid pada HTML</title> //deklarasi pemberian nama pada halaman web dengan judul contoh grid pada html<link rel="stylesheet" href="grid.css"></head> //tag penutup head

<body> // deklarasi bagian body<div class="container"> //pemaggilan class container yang dideklarasikan dalam file css<div class="row"> // pemanggilan class row<div class="col1">1</div> //pemanggilan kelas col1<div class="col1">1</div>//pemanggilan kelas col1<div class="col1">1</div> //pemanggilan kelas col1<div class="col1">1</div> //pemanggilan kelas col1<div class="col1">1</div>//pemanggilan kelas col1<div class="col1">1</div>//pemanggilan kelas col1<div class="col1">1</div>//pemanggilan kelas col1<div class="col1">1</div>//pemanggilan kelas col1<div class="col1">1</div>//pemanggilan kelas col1<div class="col1">1</div>//pemanggilan kelas col1<div class="col1">1</div>//pemanggilan kelas col1<div class="col1">1</div>//pemanggilan kelas col1</div>// tag penutup div

<div class="row"> ////pemanggilan kelas row<div class="col2">2</div> //pemanggilan kelas col2<div class="col2">2</div>//pemanggilan kelas col2<div class="col2">2</div>//pemanggilan kelas col2<div class="col2">2</div>//pemanggilan kelas col2<div class="col2">2</div>//pemanggilan kelas col2<div class="col2">2</div>//pemanggilan kelas col2</div>// tag penutup div

<div class="row">//pemanggilan kelas row<div class="col3">3</div>//pemanggilan kelas col3<div class="col3">3</div>//pemanggilan kelas col3<div class="col3">3</div>//pemanggilan kelas col3<div class="col3">3</div>//pemanggilan kelas col3</div>// tag penutup div

<div class="row">//pemanggilan kelas row<div class="col4">4</div>//pemanggilan kelas col4<div class="col4">4</div>//pemanggilan kelas col4<div class="col4">4</div>//pemanggilan kelas col4</div>//tag penutup div

<div class="row">//pemanggilan kelas row<div class="col5">5</div>//pemanggilan kelas col5<div class="col5">5</div>//pemanggilan kelas col5

25

E. STUDI KASUS

Sintaks :- File cssada dua ( desain dan grid):

a) Desain.cssbody{ font-family : Segoe Print;}ul{

list-style : none; margin : 0; padding : 0;}

<div class="row">//pemanggilan kelas row<div class="col7">7</div>//pemanggilan kelas col7<div class="col5">5</div>//pemanggilan kelas col5</div>// tag penutup div

<div class="row">//pemanggilan kelas row<div class="col8">8</div>//pemanggilan kelas col8<div class="col4">4</div>//pemanggilan kelas col4</div> //tag penutup div


<div class="row">//pemanggilan kelas row<div class="col10">10</div>//pemanggilan kelas col10<div class="col2">2</div>//pemanggilan kelas col2</div>// tag pentuup div


<div class="row">//pemanggilan kelas row<div class="col12">12</div>//pemanggilan kelas col12

25

ul li { display : inline-block; }.container{ background : #FF7F50; margin : 0 auto; text-align : left;}.col3, .col9{ Background-image: url(tem2.jpg); height : auto; text-align : left;}.link{ margin-top : 180px; text-align : center;}.link li{ margin-bottom : 5px; width : 100%;}.link li span{ display : block; font-size : 12px; font-weight : underline; margin-bottom : -10px;}.link li a{ color :#FFFACD;}.judul h1{ font-weight : normal;}.menu{margin-left: 400px; border-bottom : 1px solid #BC8F8F; margin-bottom : 20px;

padding-bottom : 20px;}.menu li a{ border : 1px solid #F08080; color : #FFB6C1; padding : 3px 8px; text-decoration : bold;}.menu li a.active,.menu li a:hover{ background-color : #F08080; color : #3CB371;}.content h2{ font-size : 12px; margin-top : 0; margin-bottom : 0;}.content .subtitle{ color : #191970; margin : 5px 0 0;}.content p img{ float : left; margin : 0 10px 10px 0;}.content p.sumber{ font-size : 12px;}.footer h6{ border-top : 1px solid #F08080; color : #191970; margin-bottom : 0;}

b) Grid.css.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 { background : #4169E1; display : block; float : left; height : 50px;

line-height : 50px; margin : 0 10px; padding : 0; text-align : center;}

.col1 { width : 60px }


25











.container{ background : #F08080; margin : 5px; padding : 5px; 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;}

- File html ada 3yatu: beranda, profil diri dan artikela) Beranda:

<!doctype html><html> <head> <link rel="stylesheet"href="grid.css" /> <link rel="stylesheet"href="desain.css" /> <title>Beranda</title> </head> <body><body bgcolor = "#7B68EE"/>

<div class="container"> <div class="row"> <div class="col3"> <ul class="link"> <li><img src="dit8.jpg" width="200" height="200" alt="gambar"> <span>Academia</span></li> <li><ahref="https://universitasnegerimalang.academia.edu/AnandaII"

>Ananda Putri Syaviri</a> </li> <li> <span>Facebook</span><a href="https://www.facebook.com/ananda.ii.503">Ananda Putri Syaviri II</a> </li> <li> <span>Twitter</span><a href="https://twitter.com/syaviri">@syaviri</a> </li> <li> <span>Instagram</span><a href="http://instagram.com/anandasyaviri/">@anandasyaviri</a> </li> <li> <span>Whats App</span><a href="http://abo"></a>+6285739595874</li>

</ul> </div> <div class="col9">

25

<div class="judul"> <h1>Welcome to my website</h1> <h3>Ananda Putri Syaviri's website</h3> </div> <ul class="menu"> <li> <a href="beranda.html" class="active">Beranda</a> </li> <li> <a href="profil diri.html">Profil Diri</a> </li> <li> <a href="artikel.html">Artikel</a> </li> </ul> <div class="content"> <h2>Beranda</h2>

<img src="putri.jpg" width="700" height="700" alt="gambar"/> <p>Selamat datang di website Mahasiswi Teknik Informatika UM 2013. Mahasiswi asal Lombok Nusa Tenggara Barat, yang sedang menempuh studi S1 prodi pendidikan teknik informatika jurusan teknik elektro fakultas teknik, Universitas Negeri Malang. </p> </div> <div class="footer"> <h6>© AnandaPutriSyaviri-2015 </h6> </div> </div> </div> </div> </body></html>

b) Profil diri:<!doctype html><html> <head> <link rel="stylesheet"href="grid.css" /> <link rel="stylesheet"href="desain.css" /> <title>Profil Diri</title> </head> <body><body bgcolor = "#90EE90"/>

<div class="container"> <div class="row"> <div class="col3"> <ul class="link"> <li><img src="a1.jpg" width="200" height="200" alt="gambar"> <li><span>Ananda Putri Syaviri</a></li>

25

<li><span>Putri</a> </li> <li><span>Mataram, 11 Maret 1995</a> </li> <li><span>130533608243</li> <li><span>S1 PTI B 2013</li> <li><span>[email protected]</li> </ul> </div> <div class="col9"> <div class="judul"> <h1>Welcome to my website</h1> <h3>Ananda Putri Syaviri's website</h3> </div> <ul class="menu"> <li> <a href="beranda.html">Beranda</a> </li> <li> <a href="profil diri.html" class="active">Profil Diri</a></li> <li> <a href="artikel.html">Artikel</a> </li> </ul> <div class="content"> <h3>Profilku</h3>

<img src="p1.jpg" width="700" height="450" alt="gambar"> <p> <font color="#800080">Nama saya : Ananda Putri Syaviri, sering dipanggil putri dan saya berasal dari Lombok, Nusa Tenggara Barat.Saya sekolah dan besar di lombok, saat ini saya sedang menempuh perkuliahan disalah satu universitas di Malang, Jawa Timur. Jawa Timur bukanlah wilayah asing bagi saya karena kedua orang tua saya berasal dari Jawa Timur. Saat ini saya sudah menempuh 3semester di universitas ini. saat ini saya sedang menjalanisemester ke-4. <br /><p><font color="#800080">Saya masuk di Universitas Negeri Malang tahun 2013 dan diterimadi fakultas teknik, jurusan teknik elektro prodi S1 Pendidikan TeknikInformatika.Saya bertemu dengan beragam suku , bangsa dan budaya di universitas ini.Saya mulai beradaptasi dengan budaya disini. Di universitas ini saya juga menjalani kegiatan UKM sebagai anggota paduan suara mahasiswa "Swara Satata Ciakti", sebagai kegiatan lain selain kuliah. </p> <div class="footer">

25

<h6>© AnandaPutriSyaviri-2015</h6> </div>

</div> </div> </div> </body></html>

c) Artikel:<!doctype html><html> <head> <link rel="stylesheet"href="grid.css" /> <link rel="stylesheet"href="desain.css" /> <title>Artikel</title> </head> <body><body bgcolor = "#DDA0DD"/>

<div class="container"> <div class="row"> <div class="col3"> <ul class="link"> <li><img src="exo l.jpg" width="200" height="200" alt="gambar"><span>Exo-L</span></li> <li><span>Korean BoyBand</span></li> <li><span>Xiumin</span></li> <li><span>Luhan</span></li> <li><span>Kris</span></li> <li><span>Suho</span></li> <li><span>Lay</span></li> <li><span>Baekhyun</span></li>

<li><span>DO</span></li> <li><span>Chen</span></li> <li><span>Chanyeol</span></li> <li><span>Tao</span></li> <li><span>Kai</span></li> <li><span>Sehun</span></li> </ul> </div> <div class="col9"> <div class="judul"> <h1>Welcome to my website</h1> <h3>Ananda Putri Syaviri's website</h3> </div> <ul class="menu"> <li> <a href="beranda.html" >Beranda</a></li> <li> <a href="profil diri.html">Profil Diri</a> </li> <li> <a href="artikel.html"class="active">Artikel</a> </li> </ul>

25

<div class="content"> <h2>[K-LYRIC[ Sunny SNSD Finally Now ~ with Indonesian translation </h2> <h4 class="subtitle">by haerajjang</h4> <p><img src="hj.jpg" width="700 />"[K-LYRIC[ Sunny SNSD Finally Now ~ with Indonesian translation"</p> <p>Hang-sang neo-e-ge hwa-man naett-deon Na-ya Hae-jun geot-don eobs-neun-de mi-an-hae Hang-sang ne ye-gil deud-ji-doanh-go Mae-il neol ul-ge-man haett-deon geu-reon Na-ya</p> <p>mi-an-hae na-ran sa-ram ma-na-seo Sa-rang-eun bad-ji mot-ha-go sang-cheo-reom nam-gyeo-seo mi-an-hae mi-an-hae Neoeobs-i sal su eobs-dan geol nan al-ass-eoi-je-seo-ya Bab-eun geo-reu-ji mal-la-deonjan-so-ri

Deoi-sang-eun deul-eul-su-ga eobs-neun-de Yeo-jeon-hi seo-rab sok-en ne pyeon-ji-wa sa-jin i-jen eui-mi eobs-neun-de nae gyeot-e neon eobs-neun-de</p> <p>Ha-ji-man neol it-ji mot-ha-neun-de Neon da-reun sa-ram an-go-seo sa-rang-eul ha-gett-ji Eo-ddeok-hae eo-ddeok-hae Neo eobs-i sal su eobs-dan geol nan al-ass-eoi-je-seo-ya Neon na-reul ji-weo-ga-go itt-gett-ji Ddo da-reun sa-ram sa-rang-haehaeng-bok-hae ha-gett-ji Eo-ddeok-hae eo-ddeok-hae Neo eobs-i sal su eobs-dan geol nan al-ass-eoi-je-seo-ya <p> Indonesia Translate </p> <p> Adalah aku yang selalu marah kepadamuTak ada yang kulakukan untukmu, maafkan akuAkupun tak selalu mendengarkanceritamuAdalah aku yang setiap hari membuatmu menangis

Maafkan aku karena kau bertemuorang sepertikuAku tak bisa menerima cinta dan hanya meninggalkan luka

25

Maafkan aku, maafkan akuAku tahu, aku tak bisa hidup tanpamuAkhirnya

Omelan agar jangan melewatkan makanItu tak bisa terdengar lagiSurat dan fotomu masih ada di laciSekarang tak ada artinya karena tak ada dirimu di sisiku

Namun aku tak bisa melupakanmuKau akan mencintai dan memelukorang lainApa yang harus kulakukan? Apa yang harus kulakukan?Aku tahu, aku tak bisa hidup tanpamuAkhirnya

Kau akan menghapuskuKau juga akan bahagia dan mencintai orang lain

Apa yang harus kulakukan? Apa yang harus kulakukan?Aku tahu, aku tak bisa hidup tanpamuAkhirnya</p> <p class="sumber"><i>Sumber </i> : <a href="https://haerajjang.wordpress.com">http://[K-LYRIC[ Sunny SNSD Finally Now~ with Indonesian translation.html</a></p>

</div> <div class="footer"> <h6>©AnandaPutriSyaviri-2015</h6> </div> </div> </div> </div> </body></html>

Screenshoot:- Bagian beranda:

25

- Bagian profil diri:

- Bagian artikel:

25

Penjelasan:- Untuk program studi kasus yang saya buat ini, sayamenggunakan 2 file css untuk membuat sebuha halaman browseryang memiliki 2 link, sehingga jika membuka halaman beranda,ada menu navigasi ke halaman lainnya yang saya letakkan padabagain top(atas).Bagian menu bar, saya meletakkan pada posisi kanan, denganmenggunakan margin-left sebesar 400px. Untuk background daridiv row saya menggunakan background gambar agar lebihmenarik.

25

.col1, .col2, .col3, .col4,

.col5, .col6, .col7, .col8,

.col9, .col10, .col11, .col12 { //deklarasi grid kolom dengan pengaturan background, display dll background : #4169E1; display : block; float : left; height : 50px; line-height : 50px; margin : 0 10px; padding : 0; text-align : center;}.col1 { width : 60px } //deklarasi ukuran width perkolom.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{ //deklarasi id container

.container:before, //deklarasi id container

.container:after,

.row:before,

.row:after { content : ""; display : table;}.container:after,.row:after{ clear : both; //penerapan clear both}.row { //deklarasi id row dengan penerapan clear both dan penggunaan margin 10px 0 clear : both;

25

.content h2{ //deklarasi content h2 (tulisan heading 2) ukuran font 12px, margin top-bottom sebsar 0 font-size : 12px; margin-top : 0; margin-bottom : 0;}.content .subtitle{ //deklarasi content subtitle menggunakan warna tulisan #191970 dengan margin 5px 0 0 color : #191970; margin : 5px 0 0;}.content p img{ //deklarasi content p img (untuk gambar) menggunakan float left dengan margin 0 10px 10px 0 float : left; margin : 0 10px 10px 0;}.content p.sumber{ //deklarasi content sumber menggunakan ukuran tulisan 12px font-size : 12px;}.footer h6{ //deklarasi footer menggunakan warna tulisan #191970 dengan margin-bottom 0 dan border-top sebesar 1px solid berwarna #F08080

25

body{ //deklarasi bagian body menggunakan jenis tulisan segoe print font-family : Segoe Print;}ul{ //deklarasi penggunaan underlined list list-style : none; margin : 0; padding : 0;}ul li { display : inline-block; } //deklarasi penggunaan underline list dengan display(tampilan) inline-block, kemudian ada id container yang maksudnya nanti fungsi ini akan digunakan pada id container juga dengan// background warna dengan kode tersebut , margin 0 auto dan tata letak text diletakkanpada posisi left.container{ background : #FF7F50; margin : 0 auto; text-align : left;}.col3, .col9{ //deklarasi untuk col3 dan col9 yang telah dideklarasikan juga pada file grod.css, menggunakan background image, ukuran height auto dan tata letak tulisan pada posisi kiri Background-imge: url(tem2.jpg); height : auto; text-align : left;}.link{ //deklarasi untuk link, menggunakan margin top dengan ukuran 180px dan tata letak tulisan diletakkan di tengah margin-top : 180px; text-align : center;}.link li{ //deklarasi untuk link, menggunakan margin bottom dengan ukuran 5px dan ukuran width sebesar 100% margin-bottom : 5px; width : 100%;}.link li span{ //deklarasi untuk link span, menggunakan display tulisan dengan block, ukuran 12px, dengan diberi garis bawah, dan menggunakan margin bottom sebesar -10px display : block; font-size : 12px; font-weight : underline; margin-bottom : -10px;}.link li a{ //deklarasi untuk link, menggunakan warna dengan kode warna tersebut. color :#FFFACD;}.judul h1{//deklarasi untuk judul, menggunakan font weight normal tidak di bold, underline atau italic. font-weight : normal;}.menu{ //deklarasi untuk menu, menggunakan border bottom sebesar 1px berwarna #BC8F8F padat(fil

//margin dan padding bottom sebesar 20px, kemudian untuk margin-left digunakan untuk meletakkan menu bar berada pada sisi kanan halaman. margin-left : 400px; border-bottom : 1px solid #BC8F8F; margin-bottom : 20px; padding-bottom : 20px;}.menu li a{//deklarasi untuk menu, menggunakan border bottom sebesar 1px berwarna #F08080 padat(fil

//dengan warna tulisan #FFB6C1 , padding sebesar 3px 8px dan dekorasi text "bold" .

25

F. Kesimpulan

Untuk penggunaan height dan width , dapatmenggunakan persentase atau px. Untukpersentase penggunaannya lebih efisien karenaakan menyesuaikan dengan browser yang kitagunakan, sedangkan jika menggunakan px tidaksecara otomatis menyesuaikan sehingga jikatidak sesuai atau tidak rapi perlu mengaturkembali ukurannya.

Untuk penggunaan font-size, dapat menggunakanpx dan em. Untuk em lebih fleksibel dari px,karena em juga akan menyesuaikan dengan browseryang digunakan sehingga akan lebih memudahkanuser mengatur ukuran tulisan yang digunakanuntuk mengisi halamn web tersebut.

Untuk penggunaan grid dan konten dalampembuatan sebuah halaman web digunakan agarlebih efisien. Grid digunakan untuk membentukelemn-elemen html secara merata, sehinggapengaturannya lebih mudah diklasifikasikan.

Penggunaan float terkadang merepotkan userdalam mengatur tata letak box/konten yangmenyusun sebuah ahlaamn web, maka demikiandapat menggunakanfungsi clear fix untukmembersihkan float yang tidak rapi.

G. Daftar Pustaka Modul Praktikum.2012 . Desain Web (Layout dan Menu).Universitas Negeri Malang Fakultas Teknik Jurusan

25

Teknik Elektro. http://camex.wen.ru/Sampel/Warna.htmlfile:///C:/Users/Ananda/Downloads/lama/%5BK-LYRIC%5B%20Sunny%20SNSD%20%E2%80%93%20Finally%20Now%20~%20with%20Indonesian%20translation%20%20.html

LAPORAN PEMROGRAMAN WEB - DESAIN WEB DAN LAYOUT

Documents

Transcript of LAPORAN PEMROGRAMAN WEB - DESAIN WEB DAN LAYOUT