Modul 3 Praktikum Rekweb

Modul Praktikum Rekayasa Web

 

 

Pertemuan ke-3: HTML dan CSS

 

 

 

 

 

 

 

Disusun oleh

Dr. Uung Ungkawa, MT

 

 

 


Modul 3

Hypertext Markup Language (HTML) dan Cascading Style Sheet (CSS)

 

Tujuan :

Menunjang mata kuliah Rekayasa Web

Mengetahui, mengenal dan memahami dokumen HTML

Mengenal dan memahami styling dengan CSS

 

Jenis Praktikum :

Eksplorasi HTML dan CSS

 

Persyaratan :

Praktikan harus menyiapkan terminal (Windows) perintah.

Praktikan harus menyiapkan penyunting teks (text editor). Disrankan menggunakan Eclipse, Visual Studio Code, Netbean, Notepad++.

Praktikan harus menyiapkan browser (Chrome, Firefox).

 

Perangkat praktikum :

PC / Notebook

 

Materi

 

Untuk menampilkan halaman web, HTML hanya mendefinisikan elemen elemen yang akan ditampilkan di halaman tersebut dengan style (corak, ragam) bawaan, apa adanya. Untuk menentukan style yang lain dengan aneka corak dan ragam, digunakan lembar corak (styling sheet) yang disebut CSS (Cascading Style Sheet). CSS menjelaskan bagaimana corak elemen di dalam halaman web ditampilkan di layar.

Dengan adanya berbagai sintak pemilihan elemen, dan gabungan elemen, CSS dapat mengatur beberapa halaman web sekaligus, sehingga dapat menghemat waktu. CSS berfungsi mirip seperti Style di dokumen Word (docx) sehingga dapat mempermudah pengaturan style. Dengan CSS juga dapat dilakukan styling secara dinamis yaitu style berubah-ubah saat ditampilkan di layar sesuai pengaturan.

Sintaks CSS

Sintaks penulisan CSS adalah sebagai berikut:

Selektor {deklarasi; deklarasi; …}

Selektor memilih dan menunjuk ke elemen HTML sedangkan deklarasi berupa pasangan nama properti CSS dengan nilai yang dipisahkan tanda titik dua (colon). Beberapa deklarasi dipisahkan dengan titik koma (semicolon) dan satu blok deklarasi dilingkupi kurung kurawal (curly braces).

Contoh:

h1 {color:blue; font-size:12px;}

Deklarasi di atas berarti, memilih elemen h1 untuk diberi corak (styling). Properti color bernilai blue yang berarti teks elemen h1 berwarna biru dengan ukuran font 12 px.

Cara Pencorakan

Ada tiga cara pencorakan: inline, internal dan eksternal. Cara inline berarti pencorakan langsung di dalam tag pembuka HTML dengan atribut style, seperti:

<p style=”color:red;”>Teks dalam peragraf ini berwarna merah</p>

Cara inline digunakan untuk memilih elemen secara tunggal, tidak efektif jika digunakan untuk pencorakan lebih dari satu elemen.

Pencorakan internal menggunakan pasangan tag <style> dan </style> di dalam HTML:

<head>

<style>

body {color:black;}

h1 {color:maroon;}

</style>

</head>

Cara ini baik digunakan untuk satu halaman web. Jika beberapa halaman web (dokumen HTML) menggunakan style yang sama sebaiknya digunakan cara eksternal, disimpan di dalam berkas tersendiri dan digunakan melalui tag <link>:

<head>

<link rel=”stylesheet” href=”corak.css”>

</head>

Selektor

Selektor digunakan untuk memilih elemen HTML yang akan dicoraki (to style). Selektor CSS dapat dibagi ke dalam lima kategori:

    • Selektor sederhana (memilih elemen berdasarkan nama, id, dan kelas/class).
    • Selektor kombinasi (memilih elemen berdasarkan pada hubungan antar elemen).
    • Selektor Pseudo-class (memilih elemen berdasarkan keadaan tertentu).
    • Selektor Pseudo-element (memilih bagian elemen).
    • Selektor atribut (memilih elemen berdasarkan atribut atau nilai atribut).

Selektor Sederhana

Selektor sederhana bisa berupa memilih nama, id atau kelas:

Pertama, selektor dengan cara memilih nama langsung, contoh:

p { text-align:center; color:red;}

Kedua, selektor dengan memilih id yakni menggunakan atribut id. Atribut id bersifat unik, hanya ada satu dalam dokumen. Sintaks menggunakan tanda pagar (karakter hash):

#parag1 { text-align:center; color:red;}

Di dalam badan HTML ada elemen dengan id parag1 seperti:

<p id =”parag1”>Isi Paragraf 1</p>

Ketiga, selektor dengan memilih kelas yaitu menggunakan atirbut class dengan sintaks menggunakan tanda titik (period):

.kelas1 { text-align:center; color:red;}

Di dalam badan HTML ada satu atau lebih elemen dengan kelas kelas1:

<h2 class=”kelas1”>Isi Judul 2</h2>

<p class=”kelas1”>Isi Paragraf 2</p>

Ada selektor universal, berlaku untuk semua elemen menggunakan tanda bintang (*):

* { text-align:center; color:red;}

Selektor Kombinasi

Selektor kombinasi terdiri dari:

    • Selektor anak dengan tanda >
    • Selektor turunan (descendant), sintaks menggunakan spasi.
    • Selektor sudara terdekat dengan tanda +.
    • Selektor saudara secara umum dengan tanda ~.

Selektor anak memilih elemen yang menjadi anak elemen pertama. Di bawah ini menunjukkan memilih elemen <p> yang menjadi anak elemen <div>:

div > p {background-color: yellow;}

Sedangkan selektor turunan mencakup semua elemen di dalam elemen pertama, tidak hanya elemen anak tetapi elemen cucu dan seterusnya, asalkan tercakup elemen pertama. Di bawah ini menunjukkan semua elemen <p> di dalam elemen <div>:

div p {background-color: yellow;}

Berikutnya adalah selektor saudara terdekat, adjacent sibling. Elemen dikatan bersaudara jika memiliki elemen induk yang sama dan terdekat berarti adik langsungnya, tidak terselip elemen lainnya. Berikut ini contoh memilih elemen <p> yang menjadi adik langsung elemen <div>:

div + p {background-color: yellow;}

Berbeda dengan adik langsung, maka selektor saudara secara umum (general siblings) memilih semua elemen saudara dari elemen pertama. Berikut adalah contohnya:

div ~ p {background-color: yellow;}

Selektor Pseudo-Class

Pseudo-Class digunakan untuk mendefinisikan keadaan khusus suatu elemen, seperti untuk menentukan corak ketika mouse menghampiri di atasnya (hover), corak link yang belum dan sudah dikunjungi, corak elemen ketika mendapatkan fokus (seperti isian fom yang sedang dipilih, diklik).

Sintaks

Sintaks pseudo class terdiri dari selektor diikuti tanda titik dua dan diikuti pseudo-class:

selektor:pseudo-class {property:nilai; …}

Contoh:

/* unvisited link */

a:link {color:#FF0000;}

/*visited link */

a:visited {color:#00FF00;}

/*mouse over link */

a:hover {color:#FF00FF;}

/* selected link */

a:active {color:#0000FF;}

Pseudo-class dapat digabung dengan kelas CSS:

a.highlight:hover{background-color:lightblue;}

Pseudo-class hover dapat digunakan juga untuk elemen <div>:

div:hover {background-color:lightblue;}

Hover pada elemen <div> dapat digunakan juga untuk menampilkan paragraf yang semula tersembunyi:

p {display:none; backgound-color:lightblue;}

div:hover P {display:block;}

Pseudo-class first-chlid digunakan untuk memilih anak pertama dari suatu elemen. Berikut ini memilih paradraf pertama anak suatu elemen:

p:first-child {color:red;}

Berikut ini memilih elemen <i> pertama dalam suatu paragraf:

p i:first-child {color:blue;}

Pseudo-element

Pseudo-element digunakan untuk memilih dan memberi corak bagian tertentu dari suatu elemen, seperti memilih huruf atau baris pertama suatu elemen, atau menyisipkan sesuatu sebelum, atau sesudah suatu elemen:

Sintaks

Sintaks pseudo-element terdiri dari selektor, diikuti dua buah titik dua dan diikuti pseudo-element seperti berikut:

selektor::pseudo-elemen {properti;nilai; …}

Pseudo-element first-line digunakan untuk mencoraki baris pertama teks. Berikut ini menunjukkan pencorakan baris pertama pada elemen <p>:

p::first-line {color:#f0f0f0; font-variant:small-caps;}

Perlu diingat bahwa pseudo-element first-line hanya bisa diterapkan di elemen level block. Berikut ini beberapa properti yang bisa digunakan dalam pseudo-element first-line:

    • properti font
    • color
    • background
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • line-height
    • clear

Pseudo-element first-letter digunakan untuk pencorakan huruf pertama suatu teks, dan hanya berlaku untuk element level block. Berikut properti yang bisa diterapkan dalam pseudo-element first-letter:

    • font properties
    • color properties
    • background properties
    • margin properties
    • padding properties
    • border properties
    • text-decoration
    • vertical-align (only if "float" is "none")
    • text-transform
    • line-height
    • float
    • clear

Selanjutnya, pseudo-element before digunakan untuk menyisipkan suatu konten sebelum suatu elemen: Berikut ini contoh menyisipkan gambar sebelum elemen <h1>:

h1::before {content:url(flower.jpg);}

Seperti pseudo-element before, maka pseudo-element after digunakan untuk menyisipkan suatu konten setelah suatu elemen.

h1::after {content:url(flower.jpg);}

Pseudo-elemen selection digunakan untuk pencorakan elemen yang dipilih (selected) pengguna. Properti yang bisa digunakan: color, background, cursor dan outline. Contoh berikut membuat teks yang dipilih berwarna putih dengan latar belakang biru:

::selection{color:white; background:blue;}

Pemilih atribut

Kita dapat mencoraki elemen yang memeiliki atribut tertentu atau yang memiliki atribut dengan nilai tertentu. Pemilih atribut menggunakan sintaks sepeti berikut:

a[target] {background-color:yellow;}

Sedangkan pemilih elemen dengan atribut bernilai tertentu memiliki format berikut:

a[target=”_blank”] {background:yellow;}

Selain operator =, ada operator lain: operator ~= digunakan untuk memilih elemen dengan nilai atribut yang mengandung kata tertentu. Berikut ini contoh pencorakan judul yang mengandung kata flower:

[title~=”flower”] {background:yellow;}

Operator |= digunakan untuk memilih elemen dengan nilai atribut yang dimulai dengan suatu nilai tertentu, dengan syarat nilai harus berupa kata yang utuh baik sendirian seperti class=”top” atau diikuti tanda hubung (-) seperti class=”top-text”. Sebaliknya dengan operator ^= yang digunakan untuk memilih elemen yang nilai atributnya berawalan nilai tertentu. Nilai tidak harus kata yang utuh, semua yang berawalan nilai tertentu, akan terpilih.

Operator $= digunakan untuk memilih elemen dengan nilai atribut yang diakhiri nilai tertentu, sedangkan operator *= digunakan untuk memilih elemen yang nilai atributnya mengandung nilai tertentu, meskipun bukan berupa kata utuh.

Mencoraki Form

Elemen form dan isiannya dapat dicoraki. Isian input dapat ditentukan lebarnya dengan width:

input {width:100%;}

Contoh di atas memilih semua jenis isian input. Untuk memilih isian input dengan jenis tertentu, digunakan tanda kurung kotak:

input[type=text]

Contoh di atas hanya memilih input jenis teks.

Gunakan padding untuk indentasi isi di dalam isian input:

input[type=text]{padding:10px;}

Kita juga bisa mengatur warna isian input, batas isian input, corak ketika input mendapat fokus, input dengan ikon dan dapat menganimasi input. Selain isian input, kita juga dapat mencoraki textarea, menu select, tombol.

Media Query

Media query digunakan untuk mendefinisikan corak sesuai tipe media yang digunakan berkaitan dengan alat: komputer, printer, handphone, maupun fitur dan kondisi alat yang dipakai: tinggi dan lebar layar, orientasi portrait atau landscap dan reolusinya. Dengan demikian, corak akan tetap tampak baik di segala media dan segala resolusi layar. Sintaks media query adalah:

@media not|only mediatype and (ekspresi) {kode CSS}

Hasil query adalah benar jika jenis media yang ditentukan sesuai dengan media yang menampilkan dokumen dan semua ekspresi yang tercantum juga benar. Jika hasilnya benar, maka corak yang ditentukan berlaku. Jika tidak menggunakan not atau only, maka berlaku untuk semua jenis media.

Animasi

CSS memungkinkan animasi elemen HTML tanpa script seperti Javascript ataupun Flash. Elemen bisa berubah secara bertahap. Perubahan itu mencakup banyak properti CSS, selama sekian kali. Untuk membuat animasi, gunakan keyframe yang menyimpan corak elemen pada saat-saat tertentu.

Aturan @keyframe

Ketika kita menentukan corak di dalam aturan @keyframe, animasi akan secara bertahap berubah dari corak sekarang ke corak yang baru selama waktu tertentu. Agar suatu elemen bisa beranimasielemen tersebut perlu dihubungkan dengan keyframe. Berikut ini contoh cara menghubungkan elemen <div> dengan animasi example:

div {

width:50px;

height:50px;

border: solid red 1px;

animation-name: example;

animation-duration: 2s;

animation-iteration-count: infinite;

}

@keyframes example {

from {background-color:red;}

to {background-color:blue;}

}

Properti animation-duration menentukan berapa animasi berlangsung dalam satu perioda. Jika tidak ditentukan, tidak terjadi animasi karena defaultnya 0. Nilai 2s berarti 2 seconds (detik). Di dalam contoh ini menggunakan from untuk menentukan corak awal dan to untuk menentukan corak akhir. Kita juga bisa menggunakan nilai persentasi: 0% (awal), 100% (akhir). Bahkan bisa juga dipecah lagi menjadi beberapa tahapan seperti: 0% (mulai), 50%, 75%, 100% (selesai).

Properti animation-iteration-count menentukan berapa kali animasi terjadi. Jika ingin terus berlangsung tanpa henti, gunakan nilai infinite. Kita juga bisa menunda dulu beberapa saat sebelum animasi terjadi dengan animation-delay. Jika nilai animation-delay negatif berarti seolah-olah animasi sudah berlangsung selama sekian detik. Proses animasi bisa berjalan maju atau mundur dengan properti animation-direction. Animation direction bisa bernilai: normal (default), reverse (mundur), alternate (maju kemudian mundur) dan alternate-reverse (mundur dulu kemudian maju).

Kurva kecepatan animasi juga bisa ditentukan dengan properti animation-timing-function:

    • ease menentukan animasi lambat di awal, kemudian cepat, dan lambat di akhir.
    • linear: kecepatan yang tetap.
    • ease-in: menentukan animasi lambat di awal
    • ease-out: lambat di akhir
    • ease-in-out: lambat di awal dan lambat di akhir.
    • cubic-bezier(n,n,n,n): nilai fungsi Bezier.

Untuk memperpendek aturan/spesifikasi animasi, penulisannya bisa disingkat menjadi seperti:

div {animation: example 5s linear 2s infinite alternate}

Latihan

Eksplorasi Penggunaan CSS dan HTML

Siapkan browser Chrome atau Firefox

Siapkan penyunting teks (text editor) seperti Eclipse, VS Code, Netbean, Notepad++ atau yang lainnya.

Buatkan tata letak (layout) halaman web dengan struktur yang lengkap: header, menu navigasi, isi kiri, isi utama, isi kanan dan footer. Buatkan file dengan ekstensi html. Gunakan cara internal dan eksternal.

Buka file tersebut dengan browser.

 

Tugas Akhir

1. Buatkan menu navigasi seperti Gambar 1 berikut:

Gambar 1. Menu horisontal

2. Buatkan menu seperti di atas tapi menu “News” berupa dropdown.

3. Buatkan menu seperti di atas tetapi sticky.

4. Buatkan menu yang responsif. Jika layar lebar, seperti Gambar 2 dan jika layar sempit, kurang dari 400 pixel seperti Gambar 3.

Gambar 2. Menu Horisontal Responsif

Gambar 3. Menu Vertikal

5. Buatkan animasi terhadap elemen <div> yang berisi tulisan nama anda. Ukuran div 100x100 px, dengan batas warna biru 1px. Animasi ini memutar elemen div 360o terus menerus. Gunakan keyframe, tanpa script.


Last modified: Sunday, 11 October 2020, 12:16 AM