LEMBAR ASISTENSI

PRAKTIKUM PEMROGRAMAN WEB

LABORATORIUM TEKNIK KOMPUTER
JURUSAN TEKNIK ELEKTRO FAKULTAS TEKNIK
UNIVERSITAS LAMPUNG

Judul Praktikum : CSS, CSS LAYOUT, CSS ANIMATION

Praktikan : Fani Pebrianto (2115061061)
Asisten : Aldo Wijaya (2015061012)
Kelas : Teknologi Informasi

No Catatan Tanggal Paraf

Bandar Lampung, 2023

.............................................................
NPM.
I. JUDUL PERCOBAAN

CSS, CSS LAYOUT, CSS ANIMATION

II. TUJUAN PERCOBAAN

Adapun tujuan dari percobaan ini adalah :

1. Mahasiswa memahami penggunaan styling pada HTML
2. Mahasiswa dapat memahami dan menggunakan CSS untuk melakukan styling
3. Mahasiswa memahami bagaimana layout dilakukan menggunakan CSS
4. Mahasiswa dapat membuat layout menggunakan CSS
5. Mahasiswa memahami bagaimana animasi pada CSS bekerja
6. Mahasiswa dapat membuat animasi dengan CSS

III. TEORI DASAR

CSS adalah singkatan dari cascading style sheets, bahasa tampilan website yang
berguna untuk mengelola elemen website seperti font, warna background, hingga
layout.
Di dunia web development, CSS digunakan bersama dengan HTML atau XML
yang merupakan bahasa markup. Bahkan, menurut sejarahnya, CSS diciptakan agar
coding menggunakan HTML menjadi lebih praktis sehingga pekerjaan developer
kian mudah.
Ceritanya, pada tahun 1996, Hakon Wium Lie yang saat itu bekerja di CERN
menciptakan bahasa style ini. Jadi, CSS bukan bahasa pemrograman.
Sebelum adanya CSS, perubahan format tampilan seperti warna dan jenis font harus
dilakukan berulang-ulang. Itu berarti web developer harus selalu menuliskan tag
elemen di semua halaman HTML yang dibuat.
Fungsi CSS adalah mengelola tampilan atau estetika dari halaman website yang
dibuat. Penjelasan lengkapnya bisa dijabarkan seperti ini:
1. Memudahkan Pengelolaan Kode
fungsi CSS adalah memungkinkan web developer untuk melakukan coding agar
pembuatan website menjadi lebih efisien.
Ketika ada CSS yang melengkapi peran HTML, pembuatan struktur dan konten
website serta penataan tampilannya bisa dibuat terpisah. Ini penting baik pada saat
pembuatan maupun perbaikan website ke depannya. karena Kalau developer ingin
mengubah warna teks di seluruh situs web, ia hanya perlu mengubahnya di satu
tempat saja, yaitu di file CSS, bukan di setiap file HTML.
Yang tak kalah penting, dengan hanya menggunakan satu aturan tertentu, tampilan
website di setiap halaman akan jadi lebih konsisten.
2. Menawarkan Lebih Banyak Variasi Tampilan
Tanpa adanya CSS, tampilan website akan terlihat membosankan. Alasannya,
fungsi CSS adalah memastikan website bisa terlihat lebih menarik berkat perubahan
pada jenis font yang dipakai, ukuran, warna background yang akan digunakan, serta
variasi layout.
kalau semua website di dunia saat ini hanya mengandalkan HTML. Tak hanya akan
membuat tampilan website terlihat sama, tapi juga akan membuat pengalaman
mengunjungi website menjadi kurang menyenangkan.
3. Membuat Website Tampil Rapi di Semua Ukuran Layar
CSS memungkinkan mereka untuk membuat desain yang mobile responsive. Ini
sekaligus terkait dengan fungi CSS pertama terkait efektivitas coding. Jadi,
pembuatan layout cukup dilakukan sekali untuk berbagai skenario akses website.
Tanpa fungsi ini, programmer harus menyediakan berbagai versi untuk tampilan
website baik di desktop ataupun di gadget. Itupun mungkin belum tentu terlihat
menarik apabila ukuran yang ditentukan kurang pas. Bahkan, untuk media yang
ditampilkan juga bisa terkesan berantakan.
4. Mempercepat Loading Halaman Web
Salah satu cara yang sering digunakan untuk membuat website lebih cepat adalah
dengan menentukan penggunaan dari gambar. Beberapa tekniknya adalah
membatasi resolusi gambar, hingga menggunakan lossless compression.
Yang paling populer adalah menyematkan fitur lazy loading. Yang akan terjadi dari
fungsi CSS ini adalah proses loading halaman dilakukan bertahap dari yang paling
atas, dibanding me-loading semua bagian halaman sekaligus.
cara kerja CSS adalah memberitahukan browser bagaimana sebuah website
ditampilkan dengan memanfaatkan selector dan melakukan declaration.
Selector adalah elemen HTML yang nantinya akan diubah stylenya. Sedangkan,
declaration adalah perubahan yang diinginkan pada elemen HTML tersebut.
Proses ini berlangsung dengan sangat cepat, tapi akan melewati beberapa tahapan
cara kerja CSS sebagai berikut:
Browser akan membaca dokumen HTML yang berisi konten
Browser akan membaca file CSS untuk mengetahui style apa yang ditentukan
Browser mencocokan HTML dengan aturan CSS yang diinginkan, biasa disebut
rendering.
Browser menampilkan tampilan sempurna dari coding HTML dan CSS dokumen
online tersebut.
berikut merupakan jenis jenis css:
1. Inline CSS
CSS adalah jenis CSS yang penerapannya langsung pada elemen HTML yang
diinginkan. Sifat dari tipe CSS ini itu individual, dalam arti tidak mempengaruhi
style dari elemen yang lain.
2. internal css
Kalau inline CSS diterapkan di elemen HTML, internal CSS ditempatkan pada
bagian Head. Jenis CSS ini membuat penerapan sebuah style CSS akan berlaku
untuk satu halaman sekaligus. Pun begitu, tak akan berlaku ketika kamu memiliki
halaman HTML yang berbeda.
3. eksternal css
Kebalikan dari jenis CSS di atas, external CSS merupakan CSS yang penerapannya
menggunakan file yang terpisah dari file HTML.
IV. PROSEDUR PERCOBAAN

Adapun prosedur percobaan yang dilakukan adalah sebagai berikut

4.1 Percobaan 3-1: Selector CSS

Gambar 4.1 Percobaan 1: Selector CSS

4.2 Percobaan 3-2: Penggunaan CSS

Gambar 4.2.1 Percobaan 3-2: Penggunaan CSS

Gambar 4.2.2 Percobaan 3-2: Penggunaan CSS file style1.css

4.3 Percobaan 4-1: Layout

Gambar 4.3 Percobaan 4-1: Layout

4.4 Percobaan 4-2: Block

Gambar 4.4 Percobaan 4-1: Block

4.5 Percobaan 5-1: Text Slide

Gambar 4.5 Percobaan 5-1: Text Slide

V. PEMBAHASAN

Adapun pembahasan dari percobaan adalah sebagai berikut:

5.1 Percobaan 3-1: Selector CSS
5.1.a Source Code Percobaan 3-1: Selector CSS

5.1.a Source Code Percobaan 3-1: Selector CSS

Pada baris ke-1 ada <!DOCTYPE html> yang digunakan untuk mendeklarasikan
doctype untuk dokumen HTML5 yang memberitahu browser bahwa dokumen ini
menggunakan standar HTML5. Pada baris ke-2 ada <html> yang digunakan
sebagai elemen akar dari halaman web. Pada baris ke-4 ada <head> yang digunakan
sebagai elemen yang berisi metadata tentang halaman web yang dapat berisi
karakter set ataupun judul halaman. Pada baris ke-5 ada <title> yang merupakan
elemen yang digunakan untuk menentukan judul halaman web yang ditampilkan.
Pada baris ke-6 ada <style> yang digunakan untuk menyisipkan kode CSS kedalam
dokumen HTML. Pada baris ke-7 sampai 9 ada selektor h1 dimana merupakan judul
level 1 yang mana teks di judul h1 diatur agar berwarna ungu dan ukuran font
diubah menjadi 3em. Pada baris ke-11 sampai 13 ada selektor untuk tag <p> yang
dimana elemen p akan diubah warna menjadi warna hijau, dan ukuran font akan
menjadi 1.2em. pada baris ke-15 sampai 17 ada selektor class judul yang mana akan
warnanya akan diubah menjadi warna kuning dan ukuran font menjadi 32px. Pada
baris ke-19 sampai 22 ada selektor untuk class paragraf yang dimana akan diubah
warnanya menjadi merah dan ukuran font menjadi 1.1em. pada baris ke-23 sampai
26 ada selektor untuk id judul yang dimana akan mengatur warna pada id judul
menjadi biru muda dengan ukuran font 2em. Pada baris ke-27 sampai 30 ada
selektor untuk id identitas yang mana akan mengatur warna dari id identitas menjadi
warna merah dan font berukutan 1.7em. Pada baris ke-34 ada tag <body> yang
merupakan konten utama yang akan ditampilkan dalam html. Pada baris ke-35 ada
tag <h1> yang mana merupakan judul level 1 yang berisi “Selector Tag”. Pada baris
ke-36 ada tag <p> yang merupakan paragraf dalam html yaitu “Dihias
menggunakan selector Tag”. Pada baris ke-37 ada tag <h1> yaitu judul level 1 yang
memiliki atribut class dengan nama judul yang akan berisi kalimat “Selector Tag”.
Pada baris ke-38 ada tag <p> yang merupakan paragraf dalam html yaitu “Dihias
menggunakan selector Tag”. Pada baris ke-39 ada tag <p> yang merupakan
paragraf dalam html yaitu “Dihias menggunakan selector Class” yang memiliki
atribut class dengan nama “paragraf”. Pada baris ke-40 ada tag <h1> yaitu judul
level 1 yang memiliki atribut id dengan nama judul yang akan berisi kalimat
“Selector ID”. Pada baris ke-41 ada tag <p> yang merupakan paragraf dalam html
yaitu “Dihias menggunakan selector Tag”. Pada baris ke-43 dan 44 ada tag <p>
yang merupakan paragraf dalam html yaitu “Dihias menggunakan selector ID”
yang memiliki atribut id dengan nama “identitas”.
5.1.b Output Percobaan 3-1: Selector CSS

Gambar 5.1.b Output Percobaan 3-1: Selector CSS

Berdasarkan Gambar 5.1.b Output Percobaan 3-1: Selector CSS yang ditampilkan
pada output yaitu “Selector Tag” berasal pada source code pada baris ke-35 dengan
menggunakan tag <h1> yang dimana warna dan ukuran font pada kalimat selector
tag diatur dalam css pada baris ke-7 sampai 8 yang dengan menggunakan selector
tag. Pada kalimat di baris ke-2, 4 dan 6 ada kalimat yang sama ukuran maupun
warnanya yang berasal dari source code pada baris ke-36, 38, dan 41 dimana warna
dan ukuran font diatur dengan menggunakan selector tag <p> pada css yang berasal
dari baris ke-11 sampai 14. Kemudian kalimat “Selector Class” pada baris ke-3
pada output berasal dari penghiasan h1 yang menggunakan atribut class dengan
nama “judul” yang ukuran font beserta warna diatur dalam css pada baris ke-15
sampai 18. Kemudian kalimat “Selector Class” pada baris ke-5 pada output berasal
dari penghiasan h1 yang menggunakan atribut class dengan nama “paragraf” yang
ukuran font beserta warna diatur dalam css pada baris ke-19 sampai 22. Kemudian
pada baris ke-10 dan 11 pada output berasal dari source code pada baris ke-43 dan
44 yang mana menggunakan tag <p> yang memiliki atribut id kemudian css
menggunakan selector id “identitas” pada attribut untuk mengatur ukuran font
beserta warna di css ini sesuai pada source code pada baris ke-27 sampai 30.
5.1.c Soal dan Jawaban Percobaan 3-1: Selector CSS

1. Bagaimana hierarki tag, class dan id?

Jawab : hirarki pada source code 5.1.a Percobaan 3-1: Selector CSS adalah sebagai
berikut gaya css yang mengatur untuk tag lebih umum dan berlaku untuk semua tag
<h1> ataupun <p> yang tidak memiliki atribut class atau id. kemudian class adalah
atribut yang digunakan untuk mengelompokan elemen yang memiliki karakteristik
atau gaya yang sama. Kemudian ID adalah atribut yang digunakan untuk
mengidentifikasi elemen secara unik dalam halaman web.

2. Apakah ukuran font class judul dan id judul berbeda?

Jawab : ukuran font pada class judul dan id judul berbeda dikarenakan pada source
code didefinisikan gaya css yang berbeda untuk keduanya dalam <style> pada
dokumen html. Untuk class judul ukuran font didefinisikan sebagai dengan ukuran
font adalah 32px yang dimana px adalah satuan absolut. Sedangkan id judul ukuran
font nya adalah 2em yang dimana em adalah satuan relatif terhadap ukuran font
elemen terkait.
5.2 Percobaan 3-2: Penggunaan CSS
5.2.a Source Code Percobaan 3-2: Penggunaan CSS

Gambar 5.2.a Source Code Percobaan 3-2: Penggunaan CSS

Pada baris ke-1 ada <!DOCTYPE html> yang digunakan untuk mendeklarasikan
doctype untuk dokumen HTML5 yang memberitahu browser bahwa dokumen ini
menggunakan standar HTML5. Pada baris ke-2 ada <html> yang digunakan
sebagai elemen akar dari halaman web. Pada baris ke-4 ada <head> yang digunakan
sebagai elemen yang berisi metadata tentang halaman web yang dapat berisi
karakter set ataupun judul halaman. Pada baris ke-5 ada <title> digunakan sebagai
elemen untuk menentukan judul halaman yang akan ditampilkan pada tab browser.
Pada baris ke-6 ada tag <link> yang mana digunakan untuk menghubungkan
dokumen html dengan berkas css eksternal yang bernama style1.css. Pada baris ke-
7 ada <style> yang digunakan untuk menyisipkan kode css. Pada baris ke-8 sampai
11 ada selector h1 yang mana merupakan judul level 1 yang warnanya akan diatur
menjadi ungu dan ukuran font 3em. Kemudian pada baris ke-12 sampai 15 ada
selector untuk tag <p> yang dimana akan mengatur warna font menjadi biru dan
ukuran font yaitu 1.2em. pada baris ke-18 ada <body> yang mana merupakan
elemen yang berisi konten utama dari halaman web. Pada baris ke-19 ada tag <h1>
yang menjadikan kalimat “Penggunaan CSS” sebagai judul level 1 pada halaman
web. Pada baris ke-20 ada tag <p> yang dimana merupakan tag paragraf yang akan
menampilkan kalimat “Bagaimana caranya menggunakan css” pada halaman web.
5.2.b Source Code Percobaan 3-2: Penggunaan CSS file style1.css

Gambar 5.2.b Percobaan 3-2: Penggunaan CSS file style1.css

Pada baris ke-1 sampai 5 merupakam selector untuk tag <h1> yang digunakan
untuk mengubah warna, ukuran font dan warna background pada item dari tag <h1>
pada file html. Kemudian pada baris ke-6 sampai 9 merupakan selector yang
memiliki tag <p> yang mengatur warna dan ukuran font pada tag <p>
5.2.c Output Percobaan 3-2: Penggunaan CSS

Gambar 5.2.b Output Percobaan 3-2: Penggunaan CSS

Berdasarkan Gambar 5.2.b Output Percobaan 3-2: Penggunaan CSS pada kalimat
“Penggunaan CSS” yang merupakan isi dari judul level 1 yang menggunakan tag
<h1> yang warna pada font berasal dari selector tag <h1> pada baris ke-8 sampai
11. Kemudian background warna pada kalimat tersebut di dapatkan dari file
eksternal css dengan nama style1.css yang dihubungkan menggunakan tag <link>.
Kemudan kalimat “Bagaimana caranya menggunakan css inline” yang berasal dari
<p> yaitu paragraf yang didapat dari source code pada baris ke-20 yang warna font
dan ukuran nya diatur dengan menggunakan css dengan selector tag <p> sedangkan
bockground yang berwarna hijau di dapatkan dari file external css.
5.2.d Soal dan Jawaban Percobaan 3-2: Penggunaan CSS

1. implementasi CSS yang mana yang diaplikasikan?

Jawab: implementasi CSS yang mana yang diaplikasikan adalah berkas eksternal
dengan nama style1.css yang mana dihubungkan dengan menggunakan tag <link>
di dalam bagian <head> dokumen html. Di dalam berkas eksternal tersebut
didefinisikan gaya untuk elemen <h1> yang warna teks nya berwarna putih, ukuran
font menjadi 2em, dan latar belakang menjadi merah. Kemudian pada elemen <p>
didefinisikan untuk earna teks menjadi kuning dan ukuran font menjadi 0.8em.
kemudian didalam tag <style> dibagian <head> yang mana elemen <h1> warna
teks akan menjadi ungu dan ukuran font menjadi 3em. Kemudian elemen <p>
didefinisikan warna teks menjadi biru dengan ukuran font 1.2em. kemudian ada
gaya inline dalam elemen <span> dalam <p> mendefinisikan beberapa beberapa
inline seperti warna latar belakang (green) dan gaya huruf miring (italic)

2. Apakah ukuran font class judul dan id judul yang berbeda?

Jawab: tidak ada elemen dengan class "judul" atau ID "judul". Oleh karena itu,
pertanyaan tentang ukuran font class "judul" dan ID "judul" tidak relevan dalam
konteks dokumen tersebut. Dalam dokumen, hanya ada elemen-elemen <h1> dan
<p>, tetapi tidak ada elemen yang menggunakan class "judul" atau ID "judul".
Sehingga, tidak ada pengaruh dari definisi CSS untuk class "judul" atau ID "judul"
pada elemen-elemen dalam dokumen .
5.3 Percobaan 4-1: Layout

5.3.a Source Code Percobaan 4-1: Layout

Gambar 5.3.a Source Code Percobaan 4-1: Layout

Pada baris ke-1 ada <!DOCTYPE html> yang digunakan untuk mendeklarasikan
doctype untuk dokumen HTML5 yang memberitahu browser bahwa dokumen ini
menggunakan standar HTML5. Pada baris ke-2 ada <html> yang digunakan
sebagai elemen akar dari halaman web. Pada baris ke-3 ada <head> yang digunakan
sebagai elemen yang berisi metadata tentang halaman web yang dapat berisi
karakter set ataupun judul halaman. Pada baris ke-5 ada <title> digunakan sebagai
elemen untuk menentukan judul halaman yang akan ditampilkan pada tab browser.
Pada ke-6 ada tag <style> ini merupakan tag yang berisi kode css. Pada baris ke-7
sampai 10 ada selector yang memilih tag <body> yang mengatur ukuran lebar font
dan mengatur jenis font pada teks yang terdapat dalam tag <body>. Pada baris ke-
11 sampai 25 terdapat selector class dari berita yang mana akan mengatur tampilan
teks berita. Dalam hal ini, digunakan beberapa properti CSS untuk mengatur kolom
(column) dalam teks berita, termasuk jumlah kolom (3 kolom), warna garis pemisah
kolom, dan jarak antara kolom (column-gap). Kemudian pada baris ke-28 ada tag
<body> yang berisi konten utama dari halaman web. Pada baris ke-29 ada tag <h1>
ini merupakan elemen judul utama level 1. Pada baris ke-31 sampai 42 ada tag <p>
yang dimana merupakan paragraf dan memiliki atribut class dengan nama “berita”
yang nantinya digunakan pada selector css.
5.3.b Output Percobaan 4-1: Layout

Gambar 5.3.b Output Percobaan 4-1: Layout

Berdasarkan Gambar 5.3.b Output Percobaan 4-1: Layout hasil ini kalimat “Taman
Kupu-Kupu Gita Persada” didapatkan dari source code pada baris ke-29
menggunakan tag <h1> yang dimana konten utama yang diatur dengan tag body
pada selector di css pada source code pada baris ke-7 sampai 10 yang dimana
mengatur tinggi dan jenis font pada kalimat yang terdapat dari file css tersebut.
Kemudian isi berita dituliskan menggunakan tag <p> dimana dimana memiliki
class dengan nama berita, dimana class berita akan diberikan pengaturan dengan
menggunakan selector class berita yang didalamnya di tag <p> dibagi menjadi 3
kolom dengan jarak masing masing kolom adalah 18px.
5.3.c Soal dan Jawaban Percobaan 4-1: Layout

1. bagaimana kolom yang dibuat?

Jawab: properti column-count digunakan untuk menentukan jumlah kolom yang

digunakan untuk mengatur menjadi 3 kolom. Kemudian column-gap digunakan
untuk mengatur jarak antara kolom yang memberikan ruang antara kolom sebesar
18px. Kemudian column-rule digunakan untuk menentukan garis pemisah antara
kolom dengan garis pemisah ketebalan 1px dengan warna solid blue.
5.4 Percobaan 4-2: Block
5.4.a Source Code Percobaan 4-2: Block

Gambar 5.4.a Source Code Percobaan 4-2: Block

Pada baris ke-1 ada <!DOCTYPE html> yang digunakan untuk mendeklarasikan
doctype untuk dokumen HTML5 yang memberitahu browser bahwa dokumen ini
menggunakan standar HTML5. Pada baris ke-2 ada <html> yang digunakan
sebagai elemen akar dari halaman web. Pada baris ke-3 ada <head> yang digunakan
sebagai elemen yang berisi metadata tentang halaman web yang dapat berisi
karakter set ataupun judul halaman. Pada baris ke-4 ada <meta charset="utf-8">
yang digunakan sebagai tak meta yang mengatur karakter set dokumen sehingga
dapat mendukung karakter khusus dan internasional dalam dokumen. Pada baris
ke-5 ada <title> digunakan sebagai elemen untuk menentukan judul halaman yang
akan ditampilkan pada tab browser. Pada baris ke-6 ada <style> ini merupakan
elemen yang digunakan untuk menyisipkan kode CSS dalam html. Pada baris ke-7
sampai 10 yang mana ada selector dengan id pancasila yang digunakan untuk
mengatur lebar 600px dan margin 0. Kemudian pada baris ke-11 sampai 14
menggunakan selector untuk mengatur id silla1 pada bagian maksimal lebar yaitu
600px dan margin 0. Kemudian pada baris ke-18 ada <div> elemen div dengan id
pancasila. Pada baris ke-19 terdapat tag <h1> digunakan untuk mengatur teks
menjadi judul level 1. Pada baris ke-20 ada tag <ol> ini digunakan untuk
memberikan daftar list yang berurut. Pada baris ke-21 sampai 26 ada <li> yang
digunakan untuk mengisi item dari list berurut. Pada baris ke-29 ada <div> dengan
atribut id sila1. Pada baris ke-31 ada tag <ol> ini digunakan untuk memberikan
daftar list yang berurut. Pada baris ke-32 sampai 41 ada <li> yang digunakan untuk
mengisi item dari list berurut.
5.4.b Output Percobaan 4-2: Block

Gambar 5.4.b Output Percobaan 4-2: Block

Berdasarkan Gambar 5.4.b Output Percobaan 4-2: Block didapatkan pada kalimat
“pancasila” didapat dari tag <h1> pada baris ke-19 yang dimana kalimat itu
merupakan judul level 1. Kemudian list berurut dari pancasila didapatkan dari
menggunakan tag <ol> dan item dari list tersebut menggunakan tag <li> pada
source code pada baris ke-20 sampai 27. kemudian kalimat “butir sila ke-1
ketuhanan yang maha esa.” Terdapat pada source code pada baris ke-30 yang
dimana menggunakan tag <h2> yaitu judul level 2. Kemudian poin dibawah kalimat
butir sila ke-1 didapatkan dari source code pada baris ke-31 sampai 42 dimana
menggunakan tag <ol> untuk daftar list terurut dan <li> untuk item yang di list.
5.4.c Soal dan Jawaban Percobaan 4-2: Block

1. Apa yang terjadi jika lebar web browser lebih kecil dari 600px

Jawab : Ketika lebar web browser lebih kecil dari 600px, elemen dengan ID
"pancasila" akan tetap memiliki lebar yang ditentukan yaitu 600px, dan elemen
dengan ID "sila1" juga akan tetap memiliki lebar yang ditentukan yaitu 600px.

Ini berarti elemen-elemen tersebut tidak akan mengecil saat lebar layar berkurang,
yang dapat mengakibatkan tampilan horizontal (scroll horizontal) jika lebar
browser sangat sempit.

2. Apa perbedaan max-width dan width

Jawab : perbedaan utama antara width dan max-width adalah bagaimana mereka
menangani situasi di mana lebar alami elemen melebihi nilai yang diatur. width
akan selalu mempertahankan lebar yang diatur, sementara max-width hanya
membatasi lebar elemen saat lebar alaminya lebih besar daripada nilai max-width.
5.5 Percobaan 5-1: Text Slide
5.5.a Source Code Percobaan 5-1: Text Slide

Gambar 5.5.a Source Code Percobaan 5-1: Text Slide

Pada baris ke-1 ada <!DOCTYPE html> yang digunakan untuk mendeklarasikan
doctype untuk dokumen HTML5 yang memberitahu browser bahwa dokumen ini
menggunakan standar HTML5. Pada baris ke-2 ada <html> yang digunakan
sebagai elemen akar dari halaman web. Pada baris ke-3 ada <head> yang digunakan
sebagai elemen yang berisi metadata tentang halaman web yang dapat berisi
karakter set ataupun judul halaman. Pada baris ke-4 ada <meta charset="utf-8">
yang digunakan sebagai tak meta yang mengatur karakter set dokumen sehingga
dapat mendukung karakter khusus dan internasional dalam dokumen. Pada baris
ke-5 ada <title> digunakan sebagai elemen untuk menentukan judul halaman yang
akan ditampilkan pada tab browser. Pada baris ke-6 ada <style> ini merupakan
elemen yang digunakan untuk menyisipkan kode css. Kemudian pada baris ke-7
ada selector yang mengatur tag p yang dimana mengatur durasi dari animasi yaitu
3 detik, dan efek animasi nya yaitu slidein. Pada baris ke-11 sampai 20 @keyframes
slidein: Ini adalah aturan untuk mendefinisikan animasi dengan nama "slidein."
Dalam aturan ini, terdapat dua tahap animasi yang dijelaskan dengan from (dari)
dan to (hingga). Animasi ini memulai elemen dengan margin kiri sejauh 100% dari
lebar elemen dan lebar elemen sebesar 300%, dan berakhir dengan margin kiri 0%
dan lebar elemen sebesar 100%. Dengan kata lain, teks akan mulai di luar layar dan
kemudian "meluncur" ke dalam tampilan dengan durasi animasi 3 detik. Pada baris
ke-24 ada <p> yang dimana merupakan paragraf “Gawi atau begawi adalah acara
adat yang tingkatannya paling tinggi dalam adat Lampung.” Yang dimana teks ini
yang akan di animasikan.
5.5.b Output Percobaan 5-1: Text Slide

Gambar 5.5.b Output Percobaan 5-1: Text Slide

Berdasarkan Gambar 5.5.b Output Percobaan 5-1: Text Slide Hasil dari kode ini
adalah sebuah halaman web yang menampilkan teks paragraf dengan efek animasi
slide dari luar layar ke dalam layar selama 3 detik yang diatur pada source code
pada baris ke-7 sampai 10. Animasi ini mengikuti aturan yang telah didefinisikan
dalam aturan @keyframes slidein pada baris ke-7 sampai 20.
5.5.c Soal dan Jawab Percobaan 5-1: Text Slide

1. Apakah Slidein?

Jawab : animation-name: slidein; adalah properti yang menentukan nama animasi

yang akan digunakan. Dalam hal ini, nama animasi adalah "slidein," yang sesuai
dengan aturan animasi yang didefinisikan kemudian. Di bawahnya, mendefinisikan
aturan animasi @keyframes slidein, yang menggambarkan animasi yang akan
terjadi. from adalah titik awal animasi. didefinisikan bahwa pada titik awal, elemen
memiliki margin-left sejauh 100% dari lebar elemen, dan width sebesar 300% dari
lebar elemen. to adalah titik akhir animasi. didefinisikan bahwa pada titik akhir,
elemen memiliki margin-left sejauh 0% dari lebar elemen, dan width sebesar 100%
dari lebar elemen.
VI. KESIMPULAN

Adapun kesimpulan yang didapatkan dari pembahasan adalah sebagai berikut:

1. Berdasarkan 5.1.a Percobaan 3-1: Selector CSS walaupun ukuran dan warna
font yang diatur menggunakan selector pada tag <h1> ataupun <p> akan
berlaku secara umum namun apabila tag <h1> atau <p> memiliki atribut class
atau id maka tag tersebut dapat diatur secara berbeda dari selector yang tidak
menggunakan atribut.
2. Berdasarkan 5.2. Percobaan 3-2: Penggunaan CSS pada html dapat
mengaplikasikan CSS dengan memberikan pemrograman di dalam tag <style>
ataupun dengan menggunakan file eksternal yang berisi kode css yang dapat
dihubungkan menggunakan tag <link>
3. Berdasarkan 5.3. Percobaan 4-1: Layout didapatkan bahwa kolom pada
halaman utama web dapat diatur menggunakan style css yang mana
menggunakan properti column-count kemudian pengguna dapat menentukan
sendiri berapa kolom yang digunakan pada halaman web utama.
4. Berdasarkan 5.4. Percobaan 4-2: Block didapatkan bahwa pengguna dapat
mengatur style ukuran lebar block yang dengan menggunakan properti width
dan juga max-width yang dimana apabila menggunakan width Jika kontennya
lebih lebar dari nilai yang diatur dengan width, maka elemen akan terpotong
atau overflow, dan pengguna mungkin perlu menggunakan scroll horizontal
untuk melihat seluruh kontennya. Dan apabila jika kontennya lebih lebar dari
nilai yang diatur dengan max-width, maka elemen akan menyesuaikan
lebarnya sehingga tidak terpotong atau overflow. Ini memberikan responsivitas
yang baik dalam desain web, terutama pada tampilan perangkat berukuran
berbeda.
5. Berdasarkan 5.5 Percobaan 5-1: Text Slide didapatkan bahwa pengguna dapat
menggunakan animasi sederhana menggunakan style css dimana di dalam
percobaan ini menggunakan animasi slide in yang diatur melalui @keyframes,
dan durasi dari animasi tersebut dapat diatur menggunakan properti animation-
duration
 DAFTAR PUSTAKA

ENTERPRISE, Jubilee. pengenalan HTML dan CSS. Elex Media Komputindo,

2016.
SETIAWAN, Didik. Buku sakti pemrograman web: html, css, php, mysql &
javascript. Anak Hebat Indonesia, 2017.
LEWENUSA, Irvan. Dasar Penggunaan CSS pada Pengembangan Web. Irvan
Lewenusa, M. Kom, 2020.