2 of 31

Perbedaan Web Statis dan Dinamis

Static	Dynamic
Prebuilt content is same every time the page is loaded.	Content is generated quickly and changes regularly.
It uses the HTML code for developing a website.	It uses the server side languages such as PHP,SERVLET, JSP, and ASP.NET etc. for developing a website.
It sends exactly the same response for every request.	It may generate different HTML for each of the request.
The content is only changed when someone publishes and updates the file (sends it to the web server).	The page contains "server-side" code which allows the server to generate the unique content when the page is loaded.
Flexibility is the main advantage of static website.	Content Management System (CMS) is the main advantage of dynamic website.

3 of 31

Web Statis dan Dynamis

4 of 31

Hyper Text Markup Language (HTML)

HTML menggambarkan struktur halaman Web
HTML terdiri dari serangkaian elemen
Elemen HTML memberi tahu browser cara menampilkan konten
Elemen HTML diwakili oleh tag
HTML memberi label (markup) pada konten seperti "heading", "paragraf", "table", dan sebagainya
Browser tidak menampilkan tag HTML, tetapi menggunakannya untuk membuat konten halaman
HTML tidak Case Sensitive

5 of 31

Element HTML

6 of 31

Contoh Tag HTML

<!DOCTYPE html> deklarasi versi HTML
<html> and </html> deklarasi dokumen html
<head> and </head> menggambarkan informasi tentang dokumen HTML
<title> and </title> menyediakan informasi tentang judul dokumen
<body> and </body> menjelaskan isi yang akan ditampilan
<h1> and </h1> menjelaskan tentang heading
<p> and </p> menjelaskan sebuah paragrap

8 of 31

Headings

Judul didefinisikan dengan tag <h1> hingga <h6>
Mesin pencari menggunakan judul untuk mengindeks struktur dan konten halaman web Anda.
Pengguna sering membaca halaman dengan judulnya. Penting untuk menggunakan judul untuk menunjukkan struktur dokumen.

9 of 31

Paragraph

Elemen HTML <p> mendefinisikan paragraf:

10 of 31

Table

Tabel HTML didefinisikan dengan tag <table>.
Setiap baris tabel ditentukan dengan tag <tr>.
Header tabel didefinisikan dengan tag <th>.
Data tabel / sel didefinisikan dengan tag <td>.
Untuk membuat rentang sel lebih dari satu kolom, gunakan atribut colspan.
Untuk membuat sel yang berentang banyak baris, gunakan atribut rowspan.
Gunakan elemen HTML <caption> untuk menentukan keterangan table.
Gunakan atribut id untuk secara unik mendefinisikan satu table.

12 of 31

List

Gunakan <ul> untuk mendefinisikan daftar yang tidak diurapi
Gunakan <ol> untuk mendefinisikan daftar yang diurutkan
Gunakan atribut tipe untuk menentukan tipe penomoran
Gunakan <li> untuk mendefinisikan item daftar
Gunakan <dl> untuk mendefinisikan daftar deskripsi
Gunakan <dt> untuk mendefinisikan istilah deskripsi
Gunakan <dd> untuk menggambarkan istilah dalam daftar deskripsi
Daftar dapat bersarang di dalam daftar
Daftar item dapat berisi elemen HTML lainnya

14 of 31

Image

Dalam HTML, gambar didefinisikan dengan tag <img>.
Tag <img>, hanya berisi atribut, dan tidak memiliki tag penutup.
Atribut src menentukan URL (alamat web) dari Gambar.
Kita harus memasukkan nama folder dalam atribut src.
Kita dapat menggunakan atribut style untuk menentukan lebar dan tinggi gambar.
Source gambar bisa diambil dari alamat web

16 of 31

Link / Hyperlink

Link memungkinkan user untuk pindah dari page satu ke page lainnya

Syntax: <a href="url">link text</a>

element <a> untuk mendefinisikan link

atribut href untuk mendefinisikan alamat link (URL)

atribut target untuk mendefinisikan bagaimana cara membuka link

elemen <img> untuk menambahkan image sebagai link

Link merupakan penunjuk URL yang disajikan dalam suatu laman web
Beberapa macam link:

Link local
Link eksternal

17 of 31

Atribut target Link

Atribut target menentukan tempat untuk membuka dokumen yang ditautkan.
Atribut target dapat memiliki salah satu dari nilai berikut:

_blank - Membuka dokumen yang ditautkan di jendela atau tab baru
_self - Membuka dokumen yang ditautkan di jendela / tab yang sama dengan yang diklik (ini default)
_parent - Membuka dokumen yang ditautkan dalam bingkai induk
_top - Membuka dokumen yang ditautkan di seluruh jendela
framename - Membuka dokumen yang ditautkan dalam bingkai bernama

18 of 31

Form

Elemen HTML <form> mendefinisikan formulir yang digunakan untuk mengumpulkan input pengguna.
Elemen <input> adalah elemen bentuk yang paling penting.
Elemen <input> ditampilkan dalam beberapa cara, tergantung pada atribut type.

19 of 31

Input

Input Type Text
Input Type Password
Input Type Submit
Input Type Reset
Input Type Radio
Input Type Checkbox
Input Type Button
Input Type Color
Input Type Date
Input Type Email
Input Type File
Input Type Month
Input Type Number

20 of 31

Cascading Style Sheet (CSS)

CSS merupakan bahasa stylesheet yang menyajikan dokumen HTML atau XML
CSS menggambarkan bagaimana suatu elemen harus disajikan pada layar/kertas/media lainnya

body {� background-color: lightblue;�}��h1 {� color: white;� text-align: center;�}��p {� font-family: verdana;� font-size: 20px;�}

Tag HTML

21 of 31

HTML + CSS

Header

Lef tside (Link)

Right side

Body/ content

Footer

22 of 31

Syntax

Selektor menunjuk ke elemen HTML yang ingin Anda gaya.
Blok deklarasi berisi satu atau lebih deklarasi yang dipisahkan oleh tanda titik koma.
Setiap deklarasi menyertakan nama properti CSS dan nilai, dipisahkan oleh titik dua.
Deklarasi CSS selalu diakhiri dengan tanda titik koma, dan blok deklarasi dikelilingi oleh kurung kurawal.

23 of 31

Selector

Selector CSS digunakan untuk memilih elemen HTML.

Selector dibagi menjadi lima kategori:

Simple selectors (pilih elemen berdasarkan nama, id, kelas)
Combinator Selector (elemen pilih berdasarkan hubungan tertentu)
Pseudo-class-selector (pilih elemen berdasarkan kondisi tertentu)
Pseudo-elements selectors (pilih bagian dari elemen)
Attribute selectors (elemen pilih berdasarkan atribut atau nilai atribut)

24 of 31

Simple Selector

25 of 31

Universal Selector

26 of 31

Grouping Selector

27 of 31

Cara Menyematkan CSS

External CSS: mengubah tampilan hanya dengan satu file CSS di luar documen html.
Internal CSS: mengubah tampilan dengan cara menyematkan CSS di dalam dokumen html
Inline CSS: mengubah tampilan dengan cara menyertakan CSS dalam tag html

28 of 31

External	Internal	Inline

1 of 31