2. Bahan Ajar 3 - Adi Zulkarnain

BAHAN AJAR :

PEMROGRAMAN WEB DAN

PERANGKAT BERGERAK

2

PENDAHULUAN

3

PENDAHULUAN

» Float merupakan sebuah properti yang banyak digunakan di dalam pembuatan

sebuah website, ada 4 value yang biasa kita gunakan di dalam properti ini, yaitu
Left, Right, Initial dan Inherit.

» Jika diartikan Float memiliki arti "mengapung", Maksud mengapung disini berarti

elemen yang memilik float tersebut akan dipindahkan ke halaman kiri (left)
ataupun kanan (right), seperti yang disebutkan di penjelasan diatas

» Tujuan utama float adalah untuk mengatur text agar melipat di sekitar elemen

image (gambar). Akan tetapi, float juga bisa digunakan untuk layout dan style
lainnya.

» Elemen yang tidak mengalami float berada pada posisi normal, yaitu berada pada

arah berlawanan dengan elemen yang mengelilinginya (bertumpuk dari atas
kebawah atau dari kiri ke kanan). Sedangkan, Elemen yang mengalami float tidak
mengikuti kaidah sebagaimana semestinya. Property float tidak bisa digunakan
untuk elemen-elemen yang memiliki posisi absolute (position: absolute;)

4

Kompetensi Dasar

» Menerapkan style pada halaman web
» Membuat kode html untuk menampilkan style tertentu pada halaman

web

5

Indikator Pencapaian Kompetensi

Pengetahuan :
Mengimplementasikan hasil pembuatan style dalam program tampilan halaman
web.
Keterampilan :
Menguji program tampilan web dengan style dalam halaman web

6

Tujuan Pembelajaran

Pengetahuan :

Melalui pengamatan terhadap beberapa model web secara online dan melakukan diskusi
dan tanya jawab, serta pemanfaatan media pembelajaran peserta didik dapat
Mengimplementasikan hasil pembuatan style dalam program tampilan halaman web dengan
kreatif, rasa ingin tahu dan tanggung jawab.

Keterampilan :

» Melalui penggunaan perangkat Teknologi informasi dan penggunaan modul, serta melalui
ekplorasi di internet, dan pengerjaan project peserta didik dapat Menguji program tampilan
web dengan style dalam halaman web dengan Percaya diri dan tanggung jawab.

⋄

7

MANFAAT BAHAN AJAR

» Dengan memperajari bahan ajar ini peserta didik
mampu mengetahui cara membuat halaman web
secara responsive dengan kode CSS. dan mampu
membuat sebuah halaman web style dengan kode
css yang akan diterapkan pada sebuah halaman
web

8

SISTEMATIKA BAHAN AJAR

KEGIATAN INTI :

» Kegiatan 2 : Bagaimana menyusun tata letak penggunaan style halaman web
» Sains : peserta didik mengenali mengenal berbagai penyusunan tata letak style halaman web dengan

berbagai format

» Teknologi : Alat yang akan digunakan dalam menerapakan style halaman web ini dengan menggunakan

media komputer/laptop dengan spesifikasi minimal.

» Engineering : Cara kerja dalam menerapkan pembuatan layout style halaman web menggunakan text

editor (sublime text, note++, notepad) atau menggunakan media online media online menggunakan
https://www.w3schools.com/

» Art : Estetika keindahan penempatan tata letak style pada sebuah layout halaman web, meliputi komposisi

warna dalam mewarna .

» Math : menerapkan kode css untuk mengatur style halaman dalam perhitungan ukuran halaman web

(width: 65%;) dalam kode css untuk mengatur layout dalam ukuran tertentu

9

Persiapan sebelum menggunakan
bahan ajar tersebut

» Pahami tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.
» Tanyakan kepada Guru apabila ada hal-hal yang kurang jelas
» Pastikan anda sudah mempelajari materi sebelumnya tentang penggunaan tag

penulisan style halaman web pada modul 2.

» Menyiapkan aplikasi web editor secara online atupun offline
» Menyiapkan web browser yang akan digunakan dalam menampilkan hasil
» Baca petunjuk pada bahan ajar ini dengan teliti dan selesaikan beberapa tugas

didalamnya untuk pendalaman materi pada modul ini.

10

“Pendidikan Ilmu Komputer
tidak dapat membuat
siapapun menjadi ahli
pemrograman, sama

seperti mempelajari kuas
dan cat tidak membuat
siapapun menjadi ahli lukis.

~ Eric Raymond ~

”

11

1.

Uraian Materi

Merancang Layout (float)

12

Penerapan CSS FLOAT

» Syntax
Penggunaan Sintaksis CSS float

» float: left | right | none | inherit
» Values

Nilai CSS float
» CSS property float memiliki value: left, right, none dan inherit.

Secara default float memiliki nilai none

13

PENERAPAN FLOAT CSS PROPERTY

» float: left;

Digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float)
disebelah kiri dari posisi containing block (elemen blok yang menampungnya).

» float: right;

Digunakan untuk menentukan bahwa sebuah elemen harus mengapung (float)
disebelah kanan dari posisi containing block (elemen blok yang menampungnya).

» float: none;

Digunakan untuk menentukan bahwa sebuah elemen tidak boleh mengapung (float).

» float: inherit;
» value dari property float, mengikuti induk element sebelumnya.

14

Contoh CSS float

Css file :
» article { float:left }
» aside { float:right }
» footer { clear: both; text-align: center }

PENJELASAN
» float apabila digunakan untuk design layout, selalu beriringan dengan

css property clear. Silahkan pelajari pembahasan mengenai Belajar CSS
Property Clear

15

Latihan / Tugas

Gambar B : Template Layout float :left
Gambar A : Template Layout normal flow

» Buatlah sebuah tampilan web sederhana dengan menerapkan
style layout dengan kode css sesuai dengan yg sudah anda
pelajari…

16

Video Pembelajaran

Video Pembelajaran 1

17

2.

Uraian Materi

Menguji dan Evaluasi Pembuatan halaman web

18

Video Pembelajaran

Video Pembelajaran 2

19

Evaluasi

1. Buatlah web profile perusahaan.

2. Lengkapi dengan pembuatan kode css yang akan
diterapkan pada sebuah halaman web.

3. Buatlah rencana pengerjaan project

4. Buatlah timescedule pembuatan project

5. Hasilnya selanjutnya akan di ujikan melalui
presentasi.

20

Contoh Fasilitas Web :

» Header judul web

» Banner (Gambar)

» Isi (2 kolom)

» Footer

» Ukurannya sesuikan dengan
layar.

» Tambahkan format style
dalam web tersebut

21

Rangkuman

» Desain Web Responsif (bahasa Inggris:Responsive Web Design (RWD)) adalah

sebuah metode atau pendekatan sistem web desain yang bertujuan
memberikan pengalaman berselancar yang optimal dalam berbagai perangkat,
baik mobile maupun komputer meja. Dengan metode ini, web akan
beradaptasi jika dibuka dari perangkat mobile berukuran kecil maupun
perangkat komputer meja dengan ukuran monitor besar.[1] Ukuran huruf, user
interface, gambar dan tata letak akan menyesuaikan dengan lebar layar
dan resolusi layar monitor yang tersedia. Hasilnya pengguna akan merasakan
pengalaman mudah membaca, nyaman dan melihat informasi web tersebut
sama dengan jika ia melihat melalui perangkat komputer meja.[2]

22

Daftar Pustaka

» https://www.youtube.com/watch?v=cis0O2GgUVI&list=PLFIM07
18LjIUu4Ju9GUL5zpLcuq08TKYr&index=11

» https://www.apacara.com/tutorial/css/css-property-float.html
» https://www.awonapa.com/2019/05/belajar-css-float-pada-

css.html
» https://www.dropbox.com/s/2r72va0jutnvvmf/layout-latihan-

float.pdf?dl=0

23

Umpan balik dan Tidak lanjut

Silahkan Menuju ke Link berikut ini :
: BUKA LMS googleclassroom

24

THANKS!

SELESAI