ETS PWEB D

by Hana Machmudah


1. Jelaskan istilah-istilah berikut kemudian berikan contohnya

  1. html element
  2. html tag
  3. CSS Selector
  4. Ajax

 

Jawab:

  1. 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

 

 

  1. 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

 

 

  1. 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.

 

  1. 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

Postingan populer dari blog ini

BagShop

ETS PBKK

Website Pendaftaran Menggunakan MySQL + PHP