Bab Vii Float 7.1 Apa Itu Float

BAB VII
FLOAT
7.1 Apa itu Float

Float merupakan properti pada CSS untuk mengatur
posisi sebuah elemen, sebuah elemen dapat dipaksa untuk
berada di sebelah kiri atau kanan dari elemen parent atau
pembungkusnya dengan menggunakan properti float.
7.2 Value Float

Value pada float terdiri dari :
1. None : nilai default pada float
2. Left berfungsi untuk memposisikan elemen berada pada
posisi kiri dari elemen induk.
3. Right berfungsi untuk memposisikan elemen berada pada
posisi kanan dari elemen induk.
4. Inherit berfungsi mengikuti nilai (value) pada elemen
sebelumnya.
Berikut ini merupakan contoh dari elemen-elemen pada

CSS tanpa menggunakan float. Ketiga elemen tersebut tampil
dengan posisi elemen berbaris sejajar secara vertikal.
Gambar 7.1 Tanpa Float
Perancangan dan Pemrograman Web

By : Evi Fadilah, M.Kom
7.3 Penggunaan Float
Dalam penggunaan float biasanya dibagi menjadi
beberapa jenis untuk mengimplementasikan float tersebut
yaitu text wrapping, image gallery, dan multi column layout.
1. Text wrapping
Penggunaan float pada text wrapping digunakan untuk
membuat teks mengelilingi gambar atau elemen lain.
Contoh:
Buatlah file html untuk mendesain halaman website yang
terdiri dari gambar dan paragraf, simpan file dengan nama
TextWrapping.html,syntax dapat dilihat seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title> Text Wrapping</title>
<link rel="stylesheet" type="text/css"
href="TextWrappingStyle.css">
</head>
<body>
<div class="countainer">
<img src="kucing4.jpg" alt="kucing">
<p>
Lorem ipsum dolor sit amet, consectetur
adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip
ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p>
</div>
</body>
</html>

Buat file CSS untuk memformat tampilan dari
TextWrapping.html lalu simpan file dengan nama
TextWrappingStyle.css
.countainer{
width: 400px;
margin: auto;
padding: 5px;
border: 3px dotted aqua;
}
img{
float: left;
margin: 5px;
width: 150px;
height: 150px;
}
p{
text-align: justify;
}
Tampilan penggunaan TextWrapping pada halaman

Browser:
Gambar 7.2 Penggunaan Float Pada Text Wrapping

2. Image Gallery
Penggunaan float pada image gallery digunakan untuk
membuat serangkaian gambar menjadi sebuah gallery.
Contoh:
Buatlah file html untuk mendesain halaman website berisikan
gallery image dengan float, simpan file dengan nama
ImageGallery.html, syntax dapat dilihat seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title> Image Gallery </title>
href="ImageGalleryStyle.css">
</head>
<body>
<div class="kotak">1</div>
</div>
</body>
</html>

ImageGallery.html lalu simpan file dengan nama
ImageGallery Style.css
.countainer{
width: 500px;
margin: auto;
padding: 5px ;
border: 3px dotted aqua;}
.kotak{
width: 90px;
height: 90px;
background-color: SeaShell ;
border: 2px PaleVioletRed groove;

color: BlueViolet ;
text-align: center;
line-height: 90px;
font-size: 20px;
margin:2px;
float: left;
}
Tampilan image gallery pada halaman Browser:
Gambar 7.3 Penggunaan Float Pada Image Gallery
3. Multi Column Layout

Multi Column Layout merupakan bagian terpenting
dalam mendesain halaman website, dimana dengan multi
column layout para desainer dapat menentukan dan membuat
beberapa kolom pada satu halaman website.
Contoh:
Buatlah file html untuk mendesain halaman website dengan
multi column layout, simpan file dengan nama
Multicolumn.html, syntax dapat dilihat seperti berikut :

<!DOCTYPE html>
<html>
<head>
<title> Multi Column Layout </title>
href="MultiColumnStyle.css">
</head>
<body>
<div class="container">
<div class="kiri"></div>
<div class="tengah"></div>
<div class="kanan"></div>
</div>
</body>
</html>
Buat file CSS untuk memformat tampilan dari Multi

Column.html lalu simpan file dengan nama ImageGallery
Style.css
.container{
width: 800px;
border:groove 2px red;
margin: auto;
padding: 5px;
}
.kiri{
width: 200px;
background-color: DarkSalmon ;
height: 600px;
float: left;
}
.tengah{
width: 400px;
background-color: Bisque ;
height: 600px;
float: left;
}
.kanan{
width: 200px;
height: 600px;
float: left;
}

Tampilan Multi Column Layout pada halaman Browser:
Gambar 7.4 Penggunaan Float Pada Multi Column Layout
7.4 Clear
Clear merupakan property pada CSS yang berfungsi
untuk menghentikan atau membersihan float yang telah
dibuat pada halaman website.
Value pada property Clear

1. Clear:Left berfungsi untuk membersihkan float pada
bagian kiri elemen, sehingga posisi elemen akan berada
dibagian sebelah kiri dan di bawah elemen tersebut.
2. Clear:Right berfungsi untuk membersihkan float pada
bagian kanan elemen, sehingga posisi elemen akan berada
dibagian sebelah kanan dan di bawah elemen tersebut.
3. Clear:Both berfungsi untuk membersihkan float kiri dan
kanan pada elemen sehingga posisi elemen akan berada
pada bagian bawah elemen.

Contoh Penggunaan Clear:Left
Buatlah file html untuk mendesain halaman website berisikan
gallery image dengan property float dan property clear,
simpan file dengan nama ClearLeft.html, syntax dapat dilihat
seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title> Clear Left </title>
href="ImageGalleryStyle.css">
</head>
<body>
<div class="bersih"></div>
</div>
</body>
</html>
Buat file CSS untuk memformat tampilan dari ClearLeft.html

lalu simpan file dengan nama ClearLeftStyle.css
.countainer{
width: 500px;
margin: auto;
padding: 5px ;
border: 3px dotted aqua;
}
.kotak{
width: 90px;
height: 90px;
background-color: SeaShell ;
border: 2px PaleVioletRed groove;
color: BlueViolet ;
text-align: center;
line-height: 90px;

font-size: 20px;
margin:2px;
float: left;
}
.bersih{
clear: left;
}
Tampilan Penggunaan Clear:Left pada halaman Browser:
Gambar 7.5 Penggunaan Clear : Left Pada Objek
Contoh 2 : Penggunaan Clear:Both

Buatlah file html untuk mendesain halaman website
dengan tiga column layout, simpan file dengan nama
ClearBoth.html, syntax dapat dilihat seperti berikut :
<!DOCTYPE html>
<html>
<head>
<title> ClearBoth </title>
href="ClearBothStyle.css">
</head>
<body>
<div class="container">
<div class="kiri"></div>
<div class="tengah"></div>
<div class="kanan"></div>
<div class="bersih"></div>
</div>
</body>
</html>

ClearBoth.html lalu simpan file dengan nama
ClearBothStyle.css
.container{
width: 800px;
border:groove 2px red;
margin: auto;
padding: 5px;
}
.kiri{
width: 200px;
height: 600px;
float: left;
}
.tengah{
width: 400px;
background-color: Bisque ;
height: 600px;
float: left;
}
.kanan{
width: 200px;
height: 600px;
float: right;
}
.bersih{
clear: Both;
};
Tampilan Penggunaan Clear:Both pada halaman

Browser:

Gambar 7.6 Penggunaan Clear : Both
Latihan: Gallery Foto

 Buatlah sebuah halaman galerry foto yang berisi 16 foto.
 Gallery foto dibuat menjadi 4 baris, masing-masing baris
berisi 4 buah foto.
 Untuk pengaturan masing-masing foto gunakan tag float
agar foto menjadi rapi.
 Content halaman terdiri dari judul menggunakan heading
beserta efek bayangan pada teks serta 2 buah garis
horizontal dibagian bawah judul.
 Contoh tugas dapat dilihat pada Gambar 7.7.

Gambar 7.7 Latihan Gallery Foto

BAB VIII
NAVIGASI CSS
8.1 Navigasi CSS

Navigasi pada halaman web merupakan suatu yang
sangat penting. Navigasi merupakan sebuah daftar link yang
berfungsi untuk menghubungan dari halaman satu ke
halaman yang lain, halaman tersebut memiliki informasi
lebih detail. Navigasi pada halaman web biasanya terbagi
menjadi dua bentuk yaitu Menu navigasi secara horiontal dan
Menu Navigasi secara vertikal. Pembuatan navigasi
menggunakan Tag <ul> dan <li>.
8.2 Jenis-Jenis Navigasi Pada CSS
8.2.1Menu Navigasi Vertikal

Menu navigasi vertikal biasanya berada pada bagian
sebelah kiri atau kanan dari halaman website.
Contoh:
Gambar Tampilan Menu Vertikal

Buatlah desain halaman menu navigasi vertikal pada halaman
website, simpan file dengan nama NavigasiVertikal.html.

Buatlah Coding CSS untuk memformat tampilan Layout Web, Simpan
dengan nama : StyleMenuVertikal.css


Bab Vii Float 7.1 Apa Itu Float

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Bab Vii Float 7.1 Apa Itu Float

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB VII

7.1 Apa itu Float

7.2 Value Float

Berikut ini merupakan contoh dari elemen-elemen pada

Gambar 7.1 Tanpa Float

Perancangan dan Pemrograman Web

Perancangan dan Pemrograman Web

Tampilan penggunaan TextWrapping pada halaman

Gambar 7.2 Penggunaan Float Pada Text Wrapping

Perancangan dan Pemrograman Web

Buat file CSS untuk memformat tampilan dari

Perancangan dan Pemrograman Web

Tampilan image gallery pada halaman Browser:

Gambar 7.3 Penggunaan Float Pada Image Gallery

3. Multi Column Layout

Perancangan dan Pemrograman Web

Buat file CSS untuk memformat tampilan dari Multi

Perancangan dan Pemrograman Web

Gambar 7.4 Penggunaan Float Pada Multi Column Layout

Value pada property Clear

Perancangan dan Pemrograman Web

Buat file CSS untuk memformat tampilan dari ClearLeft.html

Perancangan dan Pemrograman Web

Tampilan Penggunaan Clear:Left pada halaman Browser:

Gambar 7.5 Penggunaan Clear : Left Pada Objek

Contoh 2 : Penggunaan Clear:Both

Perancangan dan Pemrograman Web

Tampilan Penggunaan Clear:Both pada halaman

Perancangan dan Pemrograman Web

Latihan: Gallery Foto

Perancangan dan Pemrograman Web

Perancangan dan Pemrograman Web

8.1 Navigasi CSS

8.2 Jenis-Jenis Navigasi Pada CSS

8.2.1Menu Navigasi Vertikal

Gambar Tampilan Menu Vertikal

Perancangan dan Pemrograman Web

Perancangan dan Pemrograman Web

Perancangan dan Pemrograman Web

Anda mungkin juga menyukai