LAPORAN PEMROGRAMAN WEB DESAIN WEB DAN

(1)

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

(2)

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

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

(3)

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 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%;}

header, footer {height:100px;}

nav {height:50px;}

aside{

float:left;

height:250px;

width:29.5%; }

(4)

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>

<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 laboris nisit ut aliquip ex ea commodo consequent.</section>

<footer>Footer menggunakan clear:both</footer> </body>

</html>

Gambar 1.1 kode HTML

(5)

Penjelasan :

Dari program diatas, saya mengubah ukuran tulisan pada header, nav, aside, section dan footer dari

2em menjadi 1,5em, karena browser yang saya gunakan dibuka pada resolusi pc yang kecil

sehingga jika diload tulisan dan tata letak akan berubah dan tidak rapi. Untuk penerapan float left

digunakan pada sidebar, float right pada bagian section dan clear both pada footer. Size tulisan yan

digunakan dapat diubah agar halaman web tersebut tersusun rapi. Kemudian untuk pengaturnan

width/height juga dapat diatur kembali agar dapat tampil rapi dalam browser pc yang digunakan.

Karena resolusi tiap pc berbeda sehingga perlu diatur kembali baik ukuran width atau height

tergantung hasilnya nanti.

body {width:960px;} // deklarasi ukuran body dengan width 960px

header, 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%; }

footer { // deklarasi untuk bagian footer menerepakan clear:both sehingga tata letaknya berada tepat rata kiri kanan.

clear: both; }

(6)

2. Teknik Clear Fix

-

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; <!doctype html> // pendeklarasian dokumen html <html> //tag pembuka html

<head> //tag pembuka html

<title>Layout Dasar Dokument Web</title> // pemberian judul pada halaman web

</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 section

sed do eiusmood tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullmco laboris nisit ut aliquip ex ea commodo consequent.</section>

<footer>Footer menggunakan clear:both</footer> //deklarasi footer menerapkan clear:both , sehingga hasilnya rata kiri kanan

</body> //tag penutup body </html> //tag penutup html

(7)

}

-

File html

<!DOCTYPE html> <html>

<head>

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

</head>

<body>

<header>Header</header>

<nav>Navigation</nav>

<aside>Sidebar menggunakan float:left</aside>

<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 laboris nisit ut aliquip ex ea commodo consequent.

</section> </div>

<footer>Footer</footer> </body>

</html>

Gambar 2.1 kode HTML

Gambar 2.2 Tampilan hasil halaman web

Penjelasan :

Pada halaman web diatas, sama seperti latihan pertaman hanya saja pada bagian section sudah

tertata rapi tentunya dengan pengubahan aturan pada file css yang digunakan.sama seperti pada

latihan 1, file css penyusunnya hampir sama hanya pendeklarasian isi tulisan atau ukuran

width/height yan sedikit bervariasi sehingga dapat menampilkan hasil halam web seperti diatas.

(8)

*{margin:auto;} //deklarasi penggunaan margin auto pada halaman web ini

body{width:960px;} //deklarasi bagian body berukuran width(panjang) sebesar 960px

header,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 100px

nav{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 float right 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{

content:""; //delklarasi isi content

display:table; //deklarasi container ditampilkan dalam bentuk tabel }

.container:after{

clear:both; //penerapan clear both untuk peletakan container }

(9)

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

-

File html

<!doctype html>

<!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>>

</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 right

sed do eiusmood tempor incididunt ut labore et dolore magna aliqua. ut enim ad minim veniam, quis nostrud exercitation ullmco laboris nisit ut aliquip ex ea commodo consequent.

</section> //tag penutup section </div> //tag penutup div

<footer>Footer</footer>// deklarasi bagian footer </body> // tag penutup body

(10)

<title>Contoh Grid pada HTML</title>

href="grid.css"> </head>

<body>

<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">

<div class="col7">7</div> <div class="col5">5</div> </div>

<div class="row">

<div class="col8">8</div> <div class="col4">4</div> </div>

<div class="row">

<div class="col9">9</div> <div class="col3">3</div> </div>

<div class="row">

<div class="col10">10</div> <div class="col2">2</div> </div>

<div class="row">

<div class="col11">11</div> <div class="col1">1</div> </div>

<div class="row">

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

</div>

</body> </html>

(11)

Gambar 3.2 Tampilan hasil halaman web

Penjelasan:

Untuk program diatas, merupakan system grid yang akan digunakan untuk membangun sebuah

website nantinya, sehingga tidak lagi menggunakan div tetapi dapat menggunakan fungsi grid.

Ukuran penuh dari suatu halaman disebut container. Setiap float dibagi menjadi beberapa bagian

yang dibagi berdasarkan perhitungan tiap kolom menjadi bentuk blok-blok bagian yang nantinya

dapat diisi content dari halaman web. Contoh, pada container terdapat 12 pembagian kolom. col1

memiliki lebar 1/12 dari container, col2 1/6, col3 1/4 dst, dengan pendelarasian width berbeda dari

col1-12. Dengan pendeklarasian dari id col1-12 yang berisi background warna, display, float yang

digunakan, height, line-height dll. Untuk pendeklarasian container terdiri dari background warna,

margin, padding dan width dengan ukuran 960px. Untuk pendeklarasian container sebelunnya,

terdpat penerapan clear:both untuk bagian row.

(12)

<!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

<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>// 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>// tag penutup div

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

<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>//tag penutup div

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

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

<div class="col2">2</div>//pemanggilan kelas col2

</div>//tag penutup div

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

<div class="col6">6</div>//pemanggilan kelas col6

</div>//tag penutup div

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

(13)

E. STUDI KASUS

Sintaks :

-

File cssada dua ( desain dan grid):

a) Desain.css

body{

font-family : Segoe Print; }

ul{

list-style : none;

margin : 0;

padding : 0; }

.container{

background : #FF7F50;

margin : 0 auto;

text-align : left; }

.col3, .col9{

Background-image: url(tem2.jpg);

height : auto;

<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="col9">9</div>//pemanggilan kelas col9

<div class="col3">3</div>//pemanggilan kelas col3

</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="col11">11</div>//pemanggilan kelas col11

<div class="col1">1</div>//pemanggilan kelas col1

</div>// tag penutup div

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

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

</div>//tag penutup div

</div>// tag penutup div keseluruhan

</body> // tag penutup body

(14)

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 } .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 : #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 artikel

a) Beranda:

(15)

<!doctype html> <html>

<head>

href="grid.css" />

href="desain.css" />

<title>Beranda</title>

</head>

<body>

<ul

class="link">

<li><img

src="dit8.jpg" width="200"

height="200" alt="gambar"> <span>Academia</span></li>

<li><a

href="https://universitasnegerimal ang.academia.edu/AnandaII">Ananda Putri Syaviri</a> </li>

<li> <span>Facebook</span><a

href="https://www.facebook.com/ana nda.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/anandas yaviri/">@anandasyaviri</a> </li>

<li> <span>Whats App</span><a

href="http://abo"></a>+62857395958 74</li>

</ul>

</div>

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

href="grid.css" />

href="desain.css" />

<title>Profil Diri</title>

</head>

<body>

(16)

<ul

class="link">

<li><img

src="a1.jpg" width="200"

height="200" alt="gambar">

<li><span>Ananda Putri Syaviri</a></li>

<li><span>Putri</a> </li>

<li><span>Mataram, 11 Maret 1995</a> </li>

<li><span>syaviri@yahoo.co.id</li>

</ul>

</div>

<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 3 semester di universitas ini. saat ini saya sedang menjalani semester ke-4. <br />

<p>

<font color="#800080">Saya masuk di Universitas Negeri Malang tahun 2013 dan diterima di fakultas teknik, jurusan teknik elektro prodi S1 Pendidikan Teknik Informatika.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"> <h6>© AnandaPutriSyaviri-2015</h6> </div> </div> </div> </div> </body> </html>

c) Artikel:

<!doctype html> <html> <head>

href="grid.css" />

href="desain.css" />

<title>Artikel</title>

<body>

<ul

(17)

<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>Baekhyun</span></li>

<li><span>Chanyeol</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> <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-do anh-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-mi-an-hae

Neo eobs-i sal su eobs-dan geol nan al-ass-eoi-je-seo-ya

Bab-eun geo-reu-ji mal-la-deon jan-so-ri Deo i-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-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-hae haeng-bok-hae ha-gett-ji

Eo-ddeok-hae eo-Eo-ddeok-hae

(18)

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 kepadamu Tak ada yang kulakukan untukmu, maafkan aku

Akupun tak selalu mendengarkan ceritamu

Adalah aku yang setiap hari membuatmu menangis

Maafkan aku karena kau bertemu orang sepertiku

Aku tak bisa menerima cinta dan hanya meninggalkan luka

Maafkan aku, maafkan aku Aku tahu, aku tak bisa hidup tanpamu

Akhirnya

Omelan agar jangan melewatkan makan

Itu tak bisa terdengar lagi

Surat dan fotomu masih ada di laci Sekarang tak ada artinya karena tak ada dirimu di sisiku

Namun aku tak bisa melupakanmu Kau akan mencintai dan memeluk orang lain

Apa yang harus kulakukan? Apa yang harus kulakukan?

Aku tahu, aku tak bisa hidup tanpamu

Akhirnya

Kau akan menghapusku

Kau juga akan bahagia dan mencintai orang lain

Apa yang harus kulakukan? Apa yang harus kulakukan?

Aku tahu, aku tak bisa hidup tanpamu

Akhirnya </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">

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

(19)

Screenshoot:

-

Bagian beranda:

(20)

-

Bagian artikel:

Penjelasan:

- Untuk program studi kasus yang saya buat ini, saya menggunakan 2 file css untuk

membuat sebuha halaman browser yang memiliki 2 link, sehingga jika membuka halaman

beranda, ada menu navigasi ke halaman lainnya yang saya letakkan pada bagain top(atas).

Bagian menu bar, saya meletakkan pada posisi kanan, dengan menggunakan margin-left

sebesar 400px. Untuk background dari div row saya menggunakan background gambar

agar lebih menarik.

(21)

.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 background : #F08080;

margin : 5px; padding : 5px; width : 960px; }

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

margin : 10px 0; }

(22)

.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

border-top : 1px solid #F08080; color : #191970;

margin-bottom : 0; }

(23)

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 diletakkan pada 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" .

border : 1px solid #F08080; color : #FFB6C1;

padding : 3px 8px; text-decoration : bold; }

.menu li a.active, // deklarasi untuk menu active ( menu yang diklik) menggunaka background color warna #F08080 dan warna tulisan #3CB371

.menu li a:hover{

background-color : #F08080; color : #3CB371;

(24)

F. Kesimpulan



Untuk penggunaan height dan width , dapat menggunakan persentase

atau px. Untuk persentase penggunaannya lebih efisien karena akan

menyesuaikan dengan browser yang kita gunakan, sedangkan jika

menggunakan px tidak secara otomatis menyesuaikan sehingga jika

tidak sesuai atau tidak rapi perlu mengatur kembali ukurannya.



Untuk penggunaan font-size, dapat menggunakan px dan em. Untuk

em lebih fleksibel dari px, karena em juga akan menyesuaikan dengan

browser yang digunakan sehingga akan lebih memudahkan user

mengatur ukuran tulisan yang digunakan untuk mengisi halamn web

tersebut.



Untuk penggunaan grid dan konten dalam pembuatan sebuah halaman

web digunakan agar lebih efisien. Grid digunakan untuk membentuk

elemn-elemen html secara merata, sehingga pengaturannya lebih

mudah diklasifikasikan.



Penggunaan float terkadang merepotkan user dalam mengatur tata

letak box/konten yang menyusun sebuah ahlaamn web, maka demikian

dapat menggunakanfungsi clear fix untuk membersihkan float yang

tidak rapi.

G. Daftar Pustaka

Modul Praktikum.2012 . Desain Web (Layout dan Menu). Universitas Negeri

Malang Fakultas Teknik Jurusan Teknik Elektro.

http://camex.wen.ru/Sampel/Warna.html

file:///C:/Users/Ananda/Downloads/lama/%5BK-LYRIC%5B%20Sunny

%20SNSD%20%E2%80%93%20Finally%20Now%20~%20with%20Indonesian

%20translation%20%20.html

(1)

Screenshoot:

-

Bagian beranda:

(2)

-

Bagian artikel:

Penjelasan:

- Untuk program studi kasus yang saya buat ini, saya menggunakan 2 file css untuk

membuat sebuha halaman browser yang memiliki 2 link, sehingga jika membuka halaman

beranda, ada menu navigasi ke halaman lainnya yang saya letakkan pada bagain top(atas).

Bagian menu bar, saya meletakkan pada posisi kanan, dengan menggunakan margin-left

sebesar 400px. Untuk background dari div row saya menggunakan background gambar

agar lebih menarik.

(3)

.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

.container{ //deklarasi id container

background : #F08080;

margin : 5px; padding : 5px; width : 960px; }

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

margin : 10px 0; }

(4)

.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

border-top : 1px solid #F08080; color : #191970;

margin-bottom : 0; }

(5)

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

background : #FF7F50; margin : 0 auto; text-align : left; }

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;

}

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

border : 1px solid #F08080; color : #FFB6C1;

padding : 3px 8px; text-decoration : bold; }

.menu li a.active, // deklarasi untuk menu active ( menu yang diklik) menggunaka background color warna #F08080 dan warna tulisan #3CB371