Tugas Praktikum Asinkronus 03

(1)

TUGAS PRAKTIKUM ASINKRONUS 3

LEARNING FREE CODE CAMP BUILDING A PHOTO GALLERY Firasya Salsabila Ramadhani

210214604001

STEP 1

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

DOCTYPE berfungsi sebagai deklarasi jenis html yang digunakan di bagian atas dokumen sehingga browser mengetahui jenis dokumen yang dibacanya

Attribute “en” untuk menentukan bahasa halaman web.

Elemen adalah wadah untuk metadata (data tentang data) dan ditempatkan di antara tag dan tag.

Metadata adalah data tentang dokumen HTML. Metadata tidak ditampilkan. Metadata biasanya menentukan judul dokumen, rangkaian karakter, gaya, skrip, dan informasi meta lainnya. Tag mendefinisikan badan dokumen. Elemen berisi semua konten dokumen HTML, seperti judul, paragraf, gambar, hyperlink, tabel, daftar, dll. Hanya ada satu elemen dalam dokumen HTML.

STEP 2

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

Elemen “meta” adalah rangkaian kode HTML yang biasa digunakan untuk mempermudah Google dan browser untuk mengidentifikasi seluruh konten yang ada dalam website tersebut. Sedangkan Content digunakan untuk memberikan nilai yang berkaitan dengan http-equiv atau nama atribut. Pada atribut content terdapat nilai width=device-width yang artinya layout website akan

(2)

menyesuaikan dengan ukuran layar perangkat yang mengakses website. Sedangkan initial- scale=1.0 adalah bagian untuk set tingkatan zoom saat pertama kali halaman di muat oleh browser.

Charset (Universal Character Set) adalah kumpulan dari beberapa jenis pengkodean karakter baik huruf, angka, symbol, dll. Untuk untuk saat ini pengkodean UTF-8 telah menjadi standarisasi untuk pengkodean dalam system operasi, bahasa pemrograman, API, dan software.

STEP 3

<!DOCTYPE html>

<head>

<title>Photo Gallery</title>

</head>

<body>

</body>

</html>

Tag <title> diartikan judul dokumen. Judul harus berupa teks saja, dan ditampilkan di bilah judul browser atau di tab halaman. Tag <title> diperlukan dalam dokumen HTML! Tidak boleh memiliki lebih dari satu elemen <title> dalam dokumen HTML.

Tag <link> mendefinisikan hubungan antara dokumen saat ini dan sumber daya eksternal. Tag

STEP 4

<!DOCTYPE html>

<html>

</head>

(3)

<body>

<h1>css flexbox photo gallery</h1>

</header>

</body>

</html>

Tag <header> digunakan untuk bagian halaman web yang merupakan header. Tag ini bisa muncul lebih dari 1 kali, tergantung kebutuhan.

“class” berfungsi untuk menyeleksi elemen berdasarkan nama class Attribut <h1> mendefinisikan judul yang paling penting.

STEP 5

<!DOCTYPE html>

<html>

</head>

<body>

<h1>css flexbox photo gallery</h1>

</header>

<img>

</div>

(4)

</body>

</html>

<div> berfungsi sebagai tempat untuk menempatkan beberapa elemen menjadi satu bagian untuk mempermudah pembuatan web dengan model CSS

“class” berfungsi untuk menyeleksi elemen berdasarkan nama class

<div class=”gallery”> digunakan untuk membuat bingkas yang berada pada luar gallery.

<img> digunakan untuk memasukkan gambar pada halaman web yang akan dibuat

STEP 6 <div class="gallery">

</div>

“src” digunakan setelah<img> berfungsi untuk memasukkan gambar yang berasal dari google atau searchengine lainnya sesuai dengan link

STEP 7

* {

box-sizing: border-box;

}

Properti box-sizing berfungsi untuk kita memasukkan padding dan perbatasan dalam total lebar dan tinggi elemen. Jika kita menyetel box-sizing: border-box; pada sebuah elemen, padding dan border disertakan dalam lebar dan tinggi:

STEP 8 .gallery img {

width: 100%;

max-width: 350px;

(5)

height: 300px;

}

Untuk mengatur lebar (.gallery img ) mengunakan width.“width” berfungsi menetapkan lebar elemen(100%). Lebar elemen tidak termasuk padding, border, atau margin. Properti ketinggian mengatur ketinggian elemen.

"max-width" untuk mengatur maximum pada lebar, dan "min-width" untuk mengatur minimum pada lebar.

“height” berfungsi untuk mengatur tinggi (300px) pada suatu halaman web.”height” ini tidak termasuk padding,border ataupun margin.

STEP 9

body { margin: 0;

font-family: sans-serif;

background-color: #f5f6f7;

}

"margin" pada CSS digunakan untuk memberikan ruang space diluar elemen, bukan didalam elemen.

"font-family" untuk mengganti tulisan seperti yang kita mau seperti sans-serif

Background color berfungsi untuk mengubah warna background web sedangkan color berfungsi untuk mengubah warna font pada web dengan warna #f5f6f7.

STEP 10

.header {

text-align: center;

text-transform: uppercase;

padding: 32px;

background-color: #0a0a23;

color: #fff;

border-bottom: 4px solid #fdb347;

}

"text-align" menjadikan teks menjadi rata tengah, pinggir kanan atau kiri. pada "text-align" disini keterangan "center" agar menjadi rata tengah

text-transform berfungsi adalah untuk memanipulasi teks pada HTML.

"padding" adalah ruang kosong/space antara satu konten dengan konten yang lain

(6)

Background color berfungsi untuk mengubah warna background web sedangkan color berfungsi untuk mengubah warna font pada web

Border bottom berfungsi untuk memberi garis border pada bagian bawah STEP 11

.gallery { display: flex;

}

Display digunakan menentukan penempatan elemen HTML yang berada di kelompok yang sama STEP 12

flex-direction: row;

}

Dengan properti flex-direction Anda bisa menggunakannya untuk menentukan arah (direction) untuk item-item yang berada didalam container flexbox

STEP 13 .gallery {

display: flex;

flex-wrap: wrap;

}

flex-wrap digunakan untuk mendefinisikan bahwa elemen item di dalam container flexbox tidak harus disejajarkan dalam satu baris.

display: flex;

flex-wrap: wrap;

justify-content: center;

}

Justify-content digunakan untuk mengatur posisi horizontal dari item-item di dalam suatu container. Saat properti ini diterapkan pada container, item-item di dalamnya akan diatur sedemikian rupa sehingga posisinya akan berada di tengah container secara horizontal.

(7)

display: flex;

flex-wrap: wrap;

align-items: center;

}

align-items: center digunakan untuk mengatur posisi vertikal elemen yang dipilih pada kontainer.

Ketika diterapkan pada elemen HTML, properti ini akan membuat kontainer menempatkan elemen tersebut secara vertikal tengah atau rata tengah dalam kontainer.

STEP 16

flex-wrap: wrap;

padding: 20px 10px;

max-width: 1400px;

margin: 0 auto;

}

“padding” berfungsi untuk memberikan jarak antara konten dengan website (dengan 20px dan 10px)

"max-width" untuk mengatur maximum pada lebar, dan "min-width" untuk mengatur minimum pada lebar.

Untuk mengatur margin di (.two) menggunakan margin: 0 auto. Margin 0 auto adalah margin yang ditentukan oleh halaman web untuk di sesuaikan

STEP 17 .gallery img {

width: 100%;

max-width: 350px;

height: 300px;

object-fit: cover;

(8)

}

object-fit: cover digunakan untuk mengatur tampilan suatu gambar atau video pada suatu area tertentu pada halaman web. Properti object-fit: cover digunakan untuk memastikan bahwa gambar atau video selalu diatur untuk menutupi seluruh area atau memenuhi container pada element HTML yang dipilih.

STEP 18

flex-wrap: wrap;

max-width: 1400px;

margin: 0 auto;

padding: 20px 10px;

gap: 16px;

}

Gap: 16px pada HTML merujuk pada jarak antara elemen dalam sebuah tata letak atau layout.

Biasanya digunakan dalam tata letak CSS grid atau flexbox untuk mengatur jarak antara elemen- elemen tersebut. Gap dapat didefinisikan menggunakan properti CSS seperti grid-gap atau gap pada flexbox. Misalnya, jika kita ingin membuat jarak 16px antara kolom pada sebuah grid, kita dapat menggunakan properti grid-gap: 16px; pada elemen induk grid tersebut.

STEP 19

.gallery img { width: 100%;

max-width: 350px;

height: 300px;

object-fit: cover;

border-radius: 10px;

}

Border-radius yang berfungsi untuk membuat tepian yang melengkung sejumlah 10 pixel STEP 20

.gallery::after { content: "";

width: 350px;

(9)

}

Fungsi utama content pada CSS adalah untuk menampilkan konten tambahan pada halaman web tanpa perlu mengedit kode HTML atau JavaScript.

“width” berfungsi menetapkan lebar elemen (35con0px).

STEP 21

<img alt="Cat Photo" src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/

1.jpg">

2.jpg">

3.jpg">

4.jpg">

5.jpg">

6.jpg">

7.jpg">

8.jpg">

9.jpg">

Alt pada HTML adalah atribut yang digunakan untuk memberikan deskripsi alternatif pada gambar atau elemen multimedia yang ditampilkan pada halaman web.