ETS PWEB D 2021

Nama: Kirana Zea S M

NRP: 05111940000081

Kelas: PWEB D

1. Jelaskan istilah-istilah berikut kemudian berikan contohnya

HTML Element

Elemen HTML adalah nama tag atau isi dari tag yang berada diantara tag pembuka dan tag penutup. Sebuah dokumen HTML didefinisikan menggunakan elemen-elemen HTML. Elemen HTML merupakan semua yang berada diantara start tag sampai end tag. Elemen dasar yang membentuk suatu dokumen HTML, antara lain: elemen HTML, head, title, dan body.

Elemen HTML (<html>) berfungsi sebagai tag pembuka dan tag penutup suatu dokumen HTML.

Contoh:

<html> ... </html>

Elemen head (<head>) merupakan header dari dokumen HTML. Terletak diantara tag <html> dan </html>.

Contoh:

<html> 
	<head> ... </head>
</html>

Elemen title (<title>) merupakan judul dari dokumen HTML yang ditampilkan pada browser. Terletak diantara tag <head> dan </head>.

Contoh:

<html>
	<head>
		<title> ... </title>
	</head>
</html>

Elemen body (<body>) merupakan elemen yang akan menampilkan isi dari dokumen HTML. Terletak dibawah tag </head>.

Contoh:

<html>
	<head>
		<title> ... </title>
	</head>
	<body>
		...
	</body>
</html>

HTML Tag

Tag HTML merupakan markup/pembungkus yang terdiri dari 2 bagian yang disebut dengan tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk <nama tag> dan tag akhir dinyatakan dalam bentuk </nama tag>.

Contoh:

<namatag> ... </namatag>

CSS Selector

CSS Selector adalah keyword yang digunakan pada CSS untuk menyeleksi atau memilih elemen HTML. CSS Selector memiliki 5 macam, antara lain: Tag Selector, Class Selector, ID Selector, Attribute Selector, dan Universal Selector.

Tag Selector atau Type Selector akan memilih elemen berdasarkan nama tag.

Contoh:

p {
	color: blue;
}

Artinya memilih semua elemen <p> lalu ubah warna text nya menjadi biru.

Class Selector adalah selektor yang memilih elemen berdasarkan nama class yang diberikan. Class Selector dibuat dengan tanda titik '.' di depannya.

Contoh:

.pink {
	color: white;
	background: pink;
	padding: 5px;
}

Artinya mengubah class yang bernama pink dengan style seperti diatas.

ID Selector mirip dengan Class Selector tetapi hanya boleh digunakan untuk satu elemen saja. Ditandai dengan tanda pagar '#' di depannya.

Contoh:

#header {
	background: teal;
	color: white;
	height: 100px;
	padding: 50px;
}

Artinya elemen header akan diubah sesuai style seperti diatas.

Attribute Selector adalah selektor yang memiliki elemen berdasarkan atribut.

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

Universal Selector adalah selektor yang digunakan untuk menyeleksi semua elemen pada jangkauan (scope) tertentu.

Contoh:

* {
    border: 1px solid grey;
}

Artinya semua elemen akan memiliki garis solid dengan ukuran 1px dan berwarna grey.

Ajax

Ajax merupakan singkatan dari Asynchronous Javascript And XML. Ajax berfungsi untuk mengambil data dari server secara background, update tampilan web tanpa harus reload browser, dan mengirim data ke server secara background.

Pada dasarnya Ajax hanya menggunakan objek XMLHttpRequest untuk berkomunikasi dengan server.

Contoh:

<script language="javascript">
        var XMLHttpRequestObject = false;
        if (window.XMLHttpRequest) {
            XMLHttpRequestObject = new XMLHttpRequest();
        } 
        else if (window.ActiveXObject) {
            XMLHttpRequestObject = new ActiveXObject("Microsoft.XMLHttp");
        }

        function getdata(url, divhasil) {
            if (XMLHttpRequestObject) {
                var obj = document.getElementById(divhasil);
                XMLHttpRequestObject.open("GET", url);
                XMLHttpRequestObject.onreadystatechange = function() {
                    if (XMLHttpRequestObject.readyState == 4 && XMLHttpRequestObject.status == 200) {
                        obj.innerHTML = XMLHttpRequestObject.responseText;
                    }
                }
            
                XMLHttpRequestObject.send(null);
            }
        }
    </script>

Contoh diatas adalah untuk mengambil data dari file lain tanpa me-refresh halaman.

2. Desain front end penanganan pelayanan pelanggan