2. BAHAN AJAR KE 2

BAHAN AJAR :

PEMROGRAMAN WEB DAN
PERANGKAT BERGERAK

2

» D⋄aftar isi ebook :Pendahuluan (3)
⋄ Kompetensi Dasar (6)
⋄ Indikator Pencapaian Kompetensi (7)
⋄ Tujuan Pembelajaran (8)
⋄ Manfaat Bahan Ajar (9)
⋄ Sistematika Bahan Ajar (10)
⋄ Persiapan (12)
⋄ Uraian Materi 1 (14)
⋄ Uraian Materi 2 (20)
⋄ Link Video Pembelajaran (43)
⋄ Evaluasi (44)
⋄ Rangkuman (48)
⋄ Daftar Pustaka (49)
⋄ Penutup (50)

3

PENDAHULUAN

PENGENALAN MATERI STYLE
HALAMAN WEB

4

PENDAHULUAN

» MARI BELAJAR …
» Untuk menjawab pertanyaan ini perhatikan ilustrasi gambar di bawah ini:

» Saat membangun sebuah website saya ilustrasikan seperti membuat kerangka

bangunan rumah, html ibaratnya komponen-komponen untuk membangun
sebuah rumah sedangkan CSS akan membuat komponen-komponen tersebut
menjadi satu kesatuan yang utuh sehingga rumah tersebut bisa dibangun dengan
pas dan menarik.

5

PENDAHULUAN

» Pada kesempatan kali ini kita akan membahas cara membuat website

dengan menggunakan html dan css. Namun harus di pastikan
setidaknya kalian sudah memahami dasar-dasar html.

» Sebetulnya saat ini untuk membuat website itu sangat mudah, bahkan

ada beberapa CMS yang telah menyediakan fitur website builder
sehingga kita bahkan tidak perlu sedikitpun untuk ngoding. Namun
sangat baik jika kalian memahami cara membuat website dari nol tanpa
bantuan tools atau CMS yang ada saat ini.

» Secara umum website yang sering kita jumpai di internet menggunakan

bahasa markup HTML dan CSS (Cascading Style Sheet) serta bahasa

pemrograman javascript dan PHP. Namun untuk membuat website
sederhana bersifat statis cukup dengan HTMLdan CSS saja.

6

Kompetensi Dasar

Pengetahuan :

» Menerapkan style pada halaman Web

Keterampilan :

» Membuat kode html untuk menampilkan style tertentu pada halaman web

7

Indikator Pencapaian Kompetensi

Pengetahuan :

» Menerapkan tata cara peletakan style dalam halaman web

Keterampilan :

» Membuat program untuk menampilkan style dalam halaman web

8

Tujuan Pembelajaran

» Melalui pengamatan, diskusi dan tanya jawab terhadap beberapa model

web secara online tentang beberapa tampilan web dengan style peserta
didik dapat menerapkan tata cara peletakan style dalam halaman web
dengan Percaya diri, rasa ingin tahu dan kreatif.

» Melalui penggunaan perangkat Teknologi informasi dan penggunaan

modul, serta melalui ekplorasi di internet, peserta didik dapat Membuat
program untuk menampilkan style dalam halaman web dengan Percaya diri,
Kreatif dan Tanggung Jawab.

»

9

MANFAAT BAHAN AJAR

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

10

SISTEMATIKA BAHAN AJAR

» Prosedur penerapan tataletak style halaman web
dengan menggunakan format CSS
⋄ Merancang tata letak Layout
⋄ Membuat Layout dengan format CSS

11

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

12

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

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

13

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

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

~ Eric Raymond ~

”

14

1.

Uraian Materi

Merancang Layout

15

Langkah 1 : Mengatur Lebar dan Tinggi Elemen

» Beberapa elemen secara bawaan akan diletakkan dengan
menempati hamper keseluruhan browser, sedangkan tingginya
disesuaikan dengan isi. Namun, sesungguhnya kita bias
mengatur lebar suatu elemen dengan menggunakan properti
width dan mengatur tingginya melalui height

16

Langkah 2: Menggunakan Properti float

» float secara etimologi berarti "mengapung" atau "mengambang".
Properti float digunakan untuk menentukan apakah sebuah

elemen box harus mengapung (float) atau tidak. Selain itu,

properti float juga dapat digunakan untuk mengatur posisi, tata

letak (layout) dan style lainnya.

» Sebuah elemen bisa diposisikan seakan-akan berada mengapung
diantara elemen setelahnya. Mengapung disini, berarti elemen
yang mengalami float tersebut akan dipindahkan ke tepi paling
kiri atau tepi paling kanan dari element induknya.

17

Langkah 3 : Menggunakan Properti position

» Property position berguna untuk mengatur peletakan elemen.
Dengan menggunakan property ini dimungkinkan untuk membuat
dua elemen yang saling bertindihan

» Position digunakan untuk menentukan sifat posisi suatu elemen
di suatu dokument. Sifat di sini dalam artian elemen bisa
berubah, tetap , dan lain lain . Nilai dari propety bisa berbentuk
static, relative, abosulute, atau fixed. Mari kita pahami satu
persatu value dari property css position.

18

» Langkah 4 : Mengenal Properti display

» Suatu elemen dapat dikelompokkan menjadi 2 kategori, yaitu
elemen blok dan elemen inline
⋄ Elemen blok adalah elemen yang memakan semua tempat
tersisa dikanan pada ortunya. Yang termasuk elemen ini
adalah h1, h2, p, dan div
⋄ Elemen inline adalah elemen yang memungkinkan tempat
tersisa di sebelah kanannya pada elemen ortu bisa dipakai
elemen yang lain bila memang mencukupi. Contoh elemen
ini adalah a, img, dan span

19

» Langkah 5 : Menampilkan Elemen di Tengah

Menampilkan Elemen di Tengah Misalnya kita punya
sebuah tabel. Bagaimana cara agar tabel tersebut
ditampilkan di bagian tengah pada arah horizontal?
Solusinya adalah dengan mengatur left-margin dan
right-margin agar bernilai auto

20

2.

Uraian Materi

Membuat Layout dengan format CSS

21

CSS BOX MODEL

22

23

TAMPILAN BOX DALAM “Facebook”

24

25

26

MENGENAL “MARGIN”

27

28

29

30

31

32

33

BOX MODEL PADDING

34

35

BOX MODEL BORDER

36

37

BOX MODEL

BOX SIZING

38

39

LATIHAN 1

40

Langkah 1 : Buatlah folder project web

» Buatlah sebuah folder baru dalam di rektori kalian,
contoh dibawah ini saya membuat folder web-saya

» Selanjutnya buatlah folder gambar yang berisi
gambar untuk kebutuhan konten website

41

Langkah 2 : Buatlah file index melalui teks editor

» Buatlah sebuah file dengan nama index.html
melalui teks editor yang kalian miliki, saran saya

kalian bisa menggunakan sublime text atau teks
editor lainnya yang kalian miliki dan sukai.

42

Langkah 3 : Membuat Style CSS

» Dapat di lihat setelah kita menambahkan style CSS tampilan website

menjadi lebih menarik.

» Pada tahap ini kita baru membuat satu halaman yaitu halaman index

selanjutnya masih ada halaman lainnya yang perlu dibuat.

43

LINK PEMBELAJARAN DARING

BAHAN AJAR :

LKPD
MEDIA

44

LINK PEMBELAJARAN DARING

EVALUASI PENGETAHUAN :

https://docs.google.com/forms/d/e/1FAIpQLSdNKxl-
0EwPV0ByrA1JGzLEwvxNCuqGUJYlNNpMckAQJ6YcYA/viewform

EVALUASI KETERAMPILAN :

h t tps://docs.google. com/forms/d/e/1FAIpQLSc05Nxiv7eXGyzVKhJZ
ASTDJfGI2cwO9BhslfnkAiD6_c_KJg/viewform

45

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.

46

Contoh Fasilitas Web :

» Header judul web

» Navigasi Tombol

» Banner (Gambar)

» Isi

» Footer

» Ukurannya sesuikan dengan
layar.

» Tambahkan pembuatan css
dalam web tersebut

47

THANKS!

Any questions?

48

Rangkuman

» Saat ini untuk membuat website itu sangat mudah, bahkan ada beberapa CMS

yang telah menyediakan fitur website builder sehingga kita bahkan tidak perlu
sedikitpun untuk ngoding. Namun sangat baik jika kalian memahami cara
membuat website dari nol tanpa bantuan tools atau CMS yang ada saat ini.

» Secara umum website yang sering kita jumpai di internet menggunakan

bahasa markup HTML dan CSS (Cascading Style Sheet) serta bahasa
pemrograman javascript dan PHP. Namun untuk membuat website sederhana
bersifat statis cukup dengan HTMLdan CSS saja.

» Didalam css sebuah elemen dapat diatur tata letak lokasi atau posisi akan

ditempatkan seperti apa dan bagaimana, yaitu dengan menggunakan
properti position, nah dalam tutorial ini kita akan membahas cara
mengatur position di css dengan penjelasan-penjelasan yang mudah
dimengerti..

49

Daftar Pustaka

» https://bahasaweb.com/mengatur-position-di-css/
» https://www.eplusgo.com/mengatur-tata-letak-gambar-dengan-css/
» https://www.irving.web.id/2009/08/06/101-kutipan-terkenal-seputar-

pemrograman-komputer/

» https://www.codepolitan.com/mudah-mengatur-layout-html-dengan-css-grid-

5a24ad5811065

» https://www.lautankode.com/mengatur-tata-letak-elemen-pada-css/
» https://king-octahasan.blogspot.com/2018/07/float-dan-clear.html
» https://www.slideshare.net/sandhikagalih/css-layouting-3-box-

model?from_action=save

50

PENUTUP

SELAMAT
ANDA TELAH MENYELESAIKAN PEMBEJARAN

DENGAN BAHAN AJAR INI

SELANJUTNYA, ANDA DIPERSILAHKAN UNTUK MEMPELAJARI
MATERI SELANJUTNYA 