Nim : 19.01.0.0003
Makul : Pemogramman web
Kelas : TI C Semester 2 (Sore)
1. Definisi HTML
Hypertext Mark Up Language atau biasa disebut HTML adalah bahasa standar
pemrograman untuk membuat suatu website yang bisa diakses dengan internet. Dengan kata lain
halaman website yang kita lihat dan kita baca disusun dengan menggunakan bahasa ini dan
kemudian diterjemahkan oleh komputer agar dapat dipahami oleh penggunanya. Html
merupakan standar pembuatan website secara luas agar laman website dapat ditampilkan pada
layar komputer.
Sejarah HTML
Hypertext Markup Language (HTML) adalah sebuah bahasa markah yang digunakan
untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah
penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format
ASCII agar dapat menghasilkan tampilan wujud yang terintegrasi. Dengan kata lain, berkas yang
dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga
menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang
sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML
(Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara
luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang
didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).
HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di
CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa)
2. DOCTYPE
Digunakan untuk memberikan informasi kepada browser mengenai versi HTML yang
digunakan oleh dokumen. Pada listing~ref{code:struktur-html}, versi HTML yang digunakan
adalah HTML5.
Tag HTML
Elemen ini mengandung keseluruhan dokumen HTML, yang berarti tag pembuka elemen
HTML merupakan tanda awal dokumen HTML, dan tag penutup adalah tanda akhir dokumen.
Tag head
Elemen head pada dokumen digunakan untuk menguraikan berbagai meta data (informasi
yang berkaitan dengan dokumen), judul dokumen, dan tautan dokumen ke berkas-berkas
eksternal. Berbagai data yang ada di dalam elemen head tidak akan nampak pada halaman web
hasil tampilan browser.
Tag title
Memberikan judul dokumen.
Tag body
Elemen ini merupakan penampung dari isi konten dokumen yang akan ditampilkan
kepada pengguna.
3. Fungsi dari tag tag html
Client side scripting merupakan salah satu jenis bahasa pemrograman web yang
proses pengolahannya dilakukan di sisi client. Proses penerjemahan atau pengolahannya
dilakukan oleh web browser sebagai client-nya, didalam web browser sudah terdapat
library yang mampu menerjemahkan semua perintah dihalaman web yang menggunakan
client side scripting.
HTML,
XHTML,
CSS,
JavaScript,
XML.
JQUERY
<!DOCTYPE html>
<html>
<head>
<title>Penggunaan Tag Tabel</title>
</head>
<body>
<h1>Belajar Tag Tabel</h1>
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
<td>Baris 1, Kolom 3</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
<td> Baris 2, Kolom 3</td>
</tr>
<tr>
<td> Baris 3, Kolom 1</td>
<td> Baris 3, Kolom 2</td>
<td> Baris 3, Kolom 3</td>
</tr>
<tr>
<td> Baris 4, Kolom 1</td>
<td> Baris 4, Kolom 2</td>
<td> Baris 4, Kolom 3</td>
</tr>
</table>
</body>
</html>
6. Definisi CSS
CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet
language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan
menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain
sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk
segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.
Internal CSS
Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Intarnal CSS
juga dikenal dengan sebutan Embeded CSS.
Eksternal CSS
Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML.
Eksternal CSS ditulis disebuah file khusus yang berekstensi .css.
Inline CSS
Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML.
Setiap elemen HTML memiliki atribut style, di sana lah inline CSS ditulis.
Property CSS adalah jenis style, atau elemen apa yang akan diubah dari sebuah
tag HTML. CSS memiliki puluhan property yang dapat digunakan agar menampilkan
hasil akhir yang kita inginkan. Hampir semua property dalam CSS dapat dipakai untuk
seluruh selector.
Jika selector digunakan misalnya untuk “mencari seluruh tag <p>“, maka property
adalah “efek apa yang ingin dimanipulasi dari tag p tersebut“, seperti ukuran text, warna
text, jenis fontnya, dll.
Value CSS adalah nilai dari property. Misalkan untuk property background-color
yang digunakan untuk mengubah warna latar belakang dari sebuah selector, value atau
nilainya dapat berupa red, blue, black, atau white.
8. 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.
Selektor Class
Selektor class adalah selektor yang memilih elemen berdasarkan nama class yang
diberikan. Selektor class dibuat dengan tanda titik di depannya.
Selektor ID
Selektor ID hampir sama dengan class. Bedanya, ID bersifat unik. Hanya boleh
digunakan oleh satu elemen saja.
Selektor Atribut
Selektor Universal
9. Internal CSS
Internal CSS adalah kode CSS yang ditulis di dalam tag <style>. Intarnal CSS
juga dikenal dengan sebutan Embeded CSS.
Contoh penulisannya :
<head>
<style type="text/css">
p {color:white; font-size: 10px;}
.center {display: block; margin: 0 auto;}
#button-go, #button-back {border: solid 1px black;}
</style>
</head>
Eksternal CSS
Eksternal CSS adalah kode CSS yang ditulis terpisah dengan kode HTML.
Eksternal CSS ditulis disebuah file khusus yang berekstensi .css.
Contoh penulisannya :
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Inline CSS
Inline CSS adalah kode CSS yang ditulis langsung pada atribut elemen HTML.
Setiap elemen HTML memiliki atribut style, di sana lah inline CSS ditulis.
Contoh penulisannya :
<!DOCTYPE html>
<html>
<body style="background-color:black;">
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Layout Dasar Dokumen Web</title>
<style type="text/css">
body {
width: 960px;
}
header, footer {
height: 100px;
}
nav {
height: 50px;
}
aside {
float: left;
height: 250px;
width: 29.5%;
}
section#content {
float: right;
height: 250px;
width: 70%;
}
footer {
clear: both;
}
</style>
</head>
<body>
<header>Header</header>
<nav>Navigation</nav>
<footer>Footer</footer>
</body>
</html>