3.1. Tujuan Praktikum
1. Mahasiswa mampu memahami semantik HTML
2. Mahasiswa mampu membuat layuot mackop dengan semantik HTML 3. Mahasiswa mampu mengkreasikan HTML dan CSS
3.2. Dasar Teori a. Pengertian CSS
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan sebuah dokumen yang ditulis dalam bahasa markup. CSS diperkenalkan untuk pengembangan website kurang lebih pada tahun 1996. Nama CSS didapat dari fakta bahwa setiap deklarasi style yang berbeda dapat diletakkan secara berurutan, yang kemudian akan membentuk hubungan parent-child pada setiap style.
CSS menentukan bagaimana elemen HTML ditampilkan yang meliputi bentuk, warna dan posisi suatu tag atau elemen HTML. Selain itu CSS digunakan untuk mengatur tampilan beberapa halaman web sekaligus dalam sebuah file.
Pengetahuan CSS adalah pengetahuan wajib dimiliki oleh web designer atau developer.
Ada 3 cara untuk memasang CSS pada dokumen HTML yaitu, External Style Sheet yang merupakan aturan CSS disimpan pada suatu file sehingga terpisah dari dokumen HTML, Internal Style Sheet merupakan aturan CSS ditulis pada bagian HEAD dokumen HTML menggunakan tag <style>, dan Inline Style Sheet Aturan CSS ditulis langsung pada tag HTML yang akan diatur tampilannya menggunakan atribut style
11
12
b. CSS 3
CSS3 adalah singkatan dari Cascading Style Sheets Level 3. Itu adalah versi terbaru dari bahasa pemrograman CSS yang digunakan untuk mengatur tampilan dan tata letak pada halaman web. CSS3 memberikan fitur baru dan peningkatan dari versi sebelumnya, CSS2. Beberapa fitur CSS3 termasuk selektor yang lebih kuat dan fleksibel, media queries untuk desain responsif, transisi dan animasi yang halus, flexbox untuk tata letak yang fleksibel, gradient dan efek bayangan, serta banyak lagi. Ini semua bertujuan untuk memberikan fleksibilitas yang lebih besar dalam mendesain dan mempercantik tampilan halaman web.
3.3. Praktikum
1. Penerapan CSS pada Semantik HTML
Berikut merupakan langkah-langkah yang diperlukan dalam melakukan penerapan CSS pada semantik html.
Langkah pertama ialah menyalakan XAMPP dan memulai modul “Apache”
dan “MySql” untuk membuat web serversebagai penyimampan file halaman web.
Selanjutnya membuat file php, dengan nama “index.php” dan simpan kedalam folder baru dengan nama folder “praktikum 3”. Lalu edit file tersebut menggunakan kode editor dan kodinglah sesuai arahan yang telah diberikan.
Gambar 3.1 Aplikasi XAMPP
Gambar 3.2 Kode pada index.php
14
Setelah itu buatlah file baru dengan nama “style.css” dan letakan pada folder yang sama, lalu kodinglah sesuai arahan.
Gambar 3.3 Kode pada style.css
Kemudian buatlah folder baru dengan nama images pada folder yang sama dengan sebelumnya dan isi folder tersebut dengan gambar sebagai background haeder dan artikel, dan jangan lupa sesuaikan nama gambarnya dengan sintak yang terdapat pada file index.php dan style.css.
Terakhir lihat hasil kodingan tadi melalui web browser dengan cara mengetik url localhost/praktikum3.
Gambar 3.4 folder images dan isi foldernya
Gambar 3.5 Hasil Kodingan
16
3.4. Kesimpulan dan Saran 1. Kesimpulan
Kesimpulannya, praktikum ini telah membantu kami memahami pentingnya semantik HTML dan penerapannya dalam merancang halaman web yang lebih berarti dan mudah dimengerti oleh mesin pencari dan pembaca manusia. Selain itu, kami juga telah mengasah keterampilan dalam menggunakan CSS3 untuk mengatur tampilan dan responsifitas halaman web. Semua pengetahuan dan keterampilan yang kami peroleh selama praktikum ini akan menjadi landasan penting dalam perjalanan kami sebagai pengembang web
2. Saran
Untuk pertemuan selanjutkan penulis berharap agar dapat dijelaskan lebih lanjut tentang prinsip aksesibilitas dan pentingnya menggunakan atribut dan teknik semantik dalam konteks aksesibilitas web. Hal ini sebaiknya dilakukan agar mahasiswa dapat memahami setiap fungsi dari masing-masing sintak-sintak yang terdapat pada semantik html.
JUDUL : Semantik Lanjutan
NAMA : Ahmad Prayogi
NIM : 0701202249
PROGRAM STUDI : ILMU KOMPUTER
Medan, 14 Juni 2023 Menyetujui, Asisten Laboratorium
Paris Alvitto
Mengetahui, Laboran
Muhammad Fahri Syuhada, S.Kom
17
