Hasil Web Html & Css

TOKO ONLINE
Tahun Ajaran 2023/2024

Disusun Oleh:

-Adinda Washeila Velis Ocksanti (01)

-Elisabeth Gusti Rhema Wasita (10)

-Khansa Zahra Fadilla (17)

-Nindia Rachel Dwi Putri (27)

Berikut adalah cara membuat website HTML dan CSS yang terakhir adalah
mengaksesnya di browser secara bersamaan dengan text editor.
Caranya, cari file bernama “index.html” yang terletak di folder image
(dari file explorer), kemudian buka melalui web browser. Muat ulang
halaman setiap kali kamu melakukan perubahan untuk melihat hasilnya
secara langsung.

“Hi, Guys!”
“WELCOME TO OUR PET SHOP”
“We stock pet supplies, pet food, and provide vetenary care”
“Jalan Raya Mangkang km16, Semarang”

Untuk kata diatas kami menggunakan <div class="text-container">

A. Div merupakan tag yang sangat sederhana dan sangat fleksibel untuk
digunakan dalam kondisi apapun.

B. Class container adalah salah satu class pada CSS yang digunakan
untuk mengatur tata letak elemen dalam halaman web. Class ini
digunakan untuk membuat kotak atau wadah (container) di dalam
halaman web yang berisi elemen lain, seperti teks, gambar, dan video.
 Logo “VELNISA PET SHOP’

Untuk logo “VELNISA PET SHOP” kami mengeditnya dengan

menggunakan aplikasi Canva.

Kami menggunakan gambar “paw” kucing sebagai hiasan agar sama

dengan judul yang kami buat, yaitu “VELNISA PET SHOP”.

“Contact me” & “Portofolio”

Untuk kata diatas kami menggunakan <button class="hire-btn"> &

<button class="down-cv"> serta menutupnya dengan kata </button>

A. Button class adalah istilah yang umumnya merujuk pada elemen

tombol dalam pemrograman berbasis objek, seperti dalam
pengembangan antarmuka pengguna.
B. Hire-btn digunakan untuk memetakan gaya/tata letak tombol
perekrutan (hire button) pada suatu situs web/aplikasi.
C. Down-cv digunakan sebagai singkatan/penamaan kelas, fungsi,
atau elemen tertentu.
D. </button> adalah tag penutup html yang digunakan untuk
menutup elemen <button>.

Gambar “Facebook, Instagram, Whatsapp, Twitter, Tiktok”

Untuk gambar tersebut kami menggunakan <!--social-->
<div class="<a social-icons">
A. <!—social--> adalah contoh komentar html
B. Div class adalah elemen html <div> yang memiliki atribut class.
C. “<a social-icons”> digunakan untuk membuat tautan dalam html.
“menu home,about,service,testimonial”
Untuk menu tersebut kami menggunakan <li><a href="#"
A. <li> adalah tag html digunakan untuk membuat elemen daftar dalam
dokumen.
B. <a href=”#” digunakan dalam atributu href pada tag html <a> untuk
membuat tautan yang merujuk pada halaman yang sama/elemen
tertentu dihalaman tersebut.

“What do I Offer?”
Untuk kata tersebut kami menggunakan <div class="services-text ">
A. <div class=”services-text”> adalah elemen <div> dalam html yang
memiliki atribut class dengan nilai “services-text”.

“1” “Pet Food” “We sell the highest quality pet food” “Read More”
“2” “Animal Equipment” “We stock a full range of pet supplies so
you can easlly find what you need” “Read More”
“3” “Animal Care” “We will take good care of your pet and also
make your pet healthy”
 Untuk kata diatas kami menggunakan <span></span> <p
class="heading"></p> <p class="details"></p> <button></button>

A. <span> adalah elemen inline dalam html yang digunakan untuk

mengelompokkan dan memformat Sebagian teks/elemen dalam sebuah
dokumen tanpa mempengaruhi struktur blok dokumen secara
keseluruhan
B. <p class=”heading”> adalah elemen paragraph <p> dalam html yang
memiliki atribut class dengan nilai “heading”
C. <p class=”details”> adalah elemen paragraph <p> dalam html yang
memiliki atribut class dengan nilai “details”

“Gambar Kolom Testimoni”

Untuk gambar diatas kami menggunakan <i class="fas fa-star"></i>

A. <I class=”fas fa-star”> digunakan untuk menunjukkan ikon,dan kelas

“fas fas-star” menentukan jenis ikon yang akan ditampilkan.
“How to Hire My Services?”
Untuk kata diatas kami menggunakan <footer>
A. digunakan untuk menentukan bagian bawah atau penutup dari sebuah
halaman web atau bagian tertentu dari halaman tersebut.

“I do my work with the results and according to what you want.

Revision and money back guartee if you are not satisfied with my work”
Untuk kata diatas kami menggunakan <p></p>
A. <P></P> digunakan untuk mendefinisikan dan membuat elemen
paragraph dalam dokumen web.

“Copyright by Velnisa”
Untuk kata diatas kami menggunakan <p class="copyright"></p>
A. <p class=”copyright”></p> adalah tag html yang membuat elemen
paragraph dengan memberikan atribut class yang bernilai copyright.