ETS PWEB D
by Hana Machmudah
1. Jelaskan istilah-istilah
berikut kemudian berikan contohnya
- html element
- html tag
- CSS Selector
- Ajax
Jawab:
- HTML element
HTML elemen yaitu blok pembangun dasar HTML yang
didefinisikan oleh tag awal (pembuka), beberapa konten, dan tag akhir (penutup).
Dalam penulisan HTML element memiliki
sintaks:
· Elemen HTML dimulai dengan tag awal
· Elemen HTMLdengan akhir tag
terminasi
· Elemen konten adalah isi daritag
awal dan tag akhir
· Beberapa elemen HTML memiliki konten
kosong (konten kosong), contohnya <br>
· Elemen kosong ditutup pada tag awal
(untuk mengakhiri tag awal dan akhir), contohnya <br>
·
Sebagian besar elemen HTML dapat memiliki
atribut,
contohnya
<p align=”center”>Hello,
World!</p>
Contoh:
<h1>Website Warung Tegal</h1>
<body>Nasi Padang</body>
|
Start tag |
Element content |
End tag |
|
<h1> |
Website Warung Tegal |
</h1> |
|
<body> |
Nasi Padang |
</body> |
|
<br> |
Tidak ada |
Tidak ada |
- HTML tag
HTML tag
juga merupakan wadah untuk semua elemen HTML lainnya sebagai penanda awalan dan akhiran dari
sebuah elemen di HTML. HTML tag dibuat dengan kurung siku (<...>), lalu
di dalamnya berisi nama tag dan kadang juga ditambahkan dengan atribut. HTML tag
selalu ditulis berpasangan. Ada tag pembuka dan ada tag penutupnya. Namun, ada
juga beberapa tag yang memiliki pasangan penutup. HTML tag penutup ditulis
dengan menambahkan garis miring (/)
di depan nama tag. Setiap tag memiliki fungsi masing-masing.
Contoh:
<p>, <a>, <body>, <head>, dan sebagainya.
|
Tag |
Fungsi |
|
<html> |
untuk memulai dokumen HTML |
|
<head> |
untuk membuat bagian head |
|
<body> |
untuk membuat bagian body |
|
<h1> sampai <h6> |
untuk membuat heading pada artikel
|
|
<p> |
untuk membuat paragraf |
|
<!-- --> |
untuk membuat komentar |
- CSS Selector
CSS Selector adalah salah satu rule set dari CSS
yang berfungsi untuk memilih suatu elemen yang akan diubah style CSS-nya.
Terdapat 5 macam selektor di CSS:
1.
Selektor Tag
Selektor Tag
disbut juga Type Selector. Selektor ini akan memilih elemen berdasarkan
nama tag. Contoh:
p {
color: blue;
}
Artinya:
Pilih semua elemen <p> lalu atur warna teksnya menjadi biru.
2. Selektor Class
Selektor
class adalah selektor yang memilih elemen berdasarkan nama class yang
diberikan. Selektor class dibuat dengan tanda titik di depannya. Contoh:
.pink {
color: white;
background: pink;
padding: 5px;
}
Artinya : Kita
memiliki selektor class beranam .pink. Nah cara menggunakan selektor ini di
HTML adalah dengan menambahkan atribut class di dalamnya.
Pada HTML:
<p class ="pink">>Saya sedang
belajar</p>
3. Selektor ID
Selektor ID
hampir sama dengan class. Bedanya, ID bersifat unik. Hanya boleh digunakan oleh
satu elemen saja. Selektor ID ditandai dengan tanda pagar (#) di depannya. Contoh:
#header
{
background: teal;
color: white;
height: 100px;
padding: 50px;
}
Pada kode
HTML:
<header id="header">
<h1>Selamat Datang di Warung Tegal</h1>
</header>
4. Selektor Atribut
Selektor
atribut adalah selektor yang memilik elemen berdasarkan atribut. Selektor ini
hampir sama seperti selektor Tag. Contoh:
input[type=text] {
background: none;
color: cyan;
padding: 10px;
border: 1px solid cyan;
}
Artinya:
kita akan memilih semua elemen <input> yang memiliki atribut type='text'.
Pada kode
HTML:
<input type="text" placeholder="ketik
sesuatu..." />
5. Selektor Universal
Selektor
universal adalah selektor yang digunakan untuk menyeleksi semua elemen pada
jangkaua (scope) tertentu. Contoh:
* {
border: 1px solid grey;
}
Artinya: semua
elemen akan memiliki garis solid dengan ukuran 1px dan berwarna grey.
- Ajax
AJAX
adalah sebuah singkatan dari Asynchronous Javascript and XML dan mengacu
pada sekumpulan teknis pengembangan web (web development) yang memungkinkan aplikasi
web untuk bekerja secara asynchronous (tidak langsung) – memproses
setiap request yang datang ke server di sisi background. Seperti dengan
namanya AJAX menggunakan bahasa Javascript.
Contoh
penggunaan AJAX:
fitur
Google Autocomplete. Ketika sedang mengetik kata kunci di Google, fitur ini
akan memberikan penyelesaian. Meskipun keywordnya berubah-ubah secara real
time, tampilan halamannya tetap sama. Pada awal tahun 90-an, di mana
internet belum secanggih dan semasif sekarang, fitur tersebut mengharuskan
Google untuk memuat halaman setiap kali rekomendasi kata kunci baru muncul di
layar. Saat ini, dengan adanya AJAX, pertukaran data dan layar yang menampilkan
data akan bekerja secara bersamaan tanpa menginterfensi atau mengganggu fungsi
masing-masing.
Komentar
Posting Komentar