Anda di halaman 1dari 9

Nama : Nauval Nazib Farhansyah

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

<! DOCTYPE html> Deklarasi untuk mendefinisikan dokumen menjadi HTML


<html> Tag pembuka untuk membuat dokumen HTML
<head> Informasi meta tentang dokumen
Membuat judul halaman yang nantinya akan ditampilkan
<title>
di browser
Tempat dibuatnya semua konten website menggunakan
<body>
HTML

4. Client-side Web Programming

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.

Contoh dari client side scripting ini antara lain

 HTML,
 XHTML, 
 CSS, 
 JavaScript, 
 XML. 
 JQUERY

Server-side Web Programming

Server side scripting merupakan bahasa pemrograman web yang pengolahannya


dilakukan dalam server, maksudnya ialah web server yang sudah telah terintegrasi oleh
web engine. Disini peran web engine ialah memproses semua script yang ada termasuk
kategori client side scripting. Web engine biasanya harus diinstal dalam komputer
terlebih dahulu dari bagian terpisah web server.
Contoh dari server side scripting ialah

 Active server pages (ASP), 


 PHP : Hypertext preprocessor (PHP), 
 Java sever pages (JSP).
 ColdFusion 
 ASP (Active Server Page)
 JSP (Java Server Page)
 Lasso 
 SSI

5. Cara Membuat Tabel dengan kode HTML

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

Struktur Penulisan Kode dalam CSS

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.

7. Pengertian Property CSS

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.

Pengertian Value CSS

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 ID ditandai dengan tanda pagar (#) di depannya.

Selektor Atribut

Selektor atribut adalah selektor yang memilik elemen berdasarkan atribut.


Selektor ini hampir sama seperti selektor Tag.

Selektor Universal

Selektor universal adalah selektor yang digunakan unutk menyeleksi semua


elemen pada jangkaua (scope) tertentu.

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;">

<h1 style="color:white;padding:30px;">Hostinger Tutorials</h1>


<p style="color:white;">Something usefull here.</p>

</body>
</html>

10. Penulisan Kode Html untuk membuat layout web site

<!DOCTYPE html>
<html>
<head>
<title>Layout Dasar Dokumen Web</title>

<style type="text/css">
body {
width: 960px;
}

header, nav, aside, section, footer {


background: #14BCE6;
border: 1px solid white;
color: white;
font-size: 2em;
font-variant: small-caps;
text-align: center;
}

header, nav, footer {


width: 100%;
}

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>

<aside>Sidebar</aside> <section id="content">Content</section>

<footer>Footer</footer>
</body>
</html>

Anda mungkin juga menyukai