HTML 4.01 Transitional

Transcript HTML 4.01 Transitional

HTML
ADVANCE
HTML DOCTYPE
Sebuah deklarasi DOCTYPE mengacu pada aturanaturan untuk bahasa markup, sehingga browser
membuat konten dengan benar.
Contoh document dongan doctype 4.01 Transitional :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
30/10/2015
By : Suwondo, S.Kom
2
HTML DOCTYPE
 Deklarasi
DOCTYPE bukanlah tag HTML,
melainkan adalah perintah kepada web browser
tentang versi HTML yang ditulis.
 Deklarasi DOCTYPE mengacu pada Dokumen
Type Definition (DTD). DTD menetapkan
aturan untuk bahasa markup, sehingga browser
dapat membuat konten dengan benar.
 Deklarasi DOCTYPE harus dituliskan pertama
dalam dokumen HTML, sebelum tag <html>.
30/10/2015
By : Suwondo, S.Kom
3
HTML DOCTYPE
HTML 4.01 Strict
DTD ini berisi semua elemen HTML dan atribut, tetapi tidak termasuk elemen
presentasi atau elemen khusus (seperti font dan center). Framesets disini tidak
diperbolehkan:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
DTD ini berisi semua elemen HTML dan atribut, TERMASUK elemen presentasi dan
elemen khusus (seperti font). Framesets disini tidak diperbolehkan:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
30/10/2015
By : Suwondo, S.Kom
4
HTML DOCTYPE
HTML 4.01 Frameset
DTD ini sama dengan HTML 4.01 Transitional, namun memungkinkan
penggunaan Frameset:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
30/10/2015
By : Suwondo, S.Kom
5
HTML STYLES
External Style Sheet
Sebuah style sheet eksternal lebih mudah digunakan ketika style diterapkan
untuk banyak halaman. Dengan style sheet eksternal, kita dapat mengubah
tampilan sebuah situs web keseluruhan dengan mengubah satu file. Setiap
halaman harus link ke style sheet menggunakan tag <link>. Tag <link> masuk
ke dalam bagian <head>:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
30/10/2015
By : Suwondo, S.Kom
6
HTML STYLES
Internal Style Sheet
Sebuah style sheet internal dapat digunakan jika satu dokumen tunggal
memiliki style yang unik. Style internal didefinisikan dalam <head> dari
sebuah halaman HTML, dengan menggunakan tag <style>, seperti ini:
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
30/10/2015
By : Suwondo, S.Kom
7
HTML STYLES
Inline Styles
Style inline dapat digunakan jika style yang unik yang akan diterapkan ke
satu kejadian tunggal dari suatu elemen.
Untuk menggunakan style inline, menggunakan atribut style pada tag yang
relevan. Atribut style dapat berisi properti CSS. Contoh di bawah ini
menunjukkan cara mengubah warna teks dan margin kiri paragraf:
<p style="color:blue;margin-left:20px">This is a paragraph.</p>
30/10/2015
By : Suwondo, S.Kom
8
HTML HEAD
Elemen head adalah wadah untuk semua elemen kepala. Elemen
dalam <head> dapat termasuk script, menginstruksikan browser
di mana bisa menemukan style sheet, memberikan informasi
meta, dan banyak lagi. Tag berikut dapat ditambahkan pada
bagian head : <title>, <base>, <link>, <meta>, <script>, dan
<style>.
Tag <title> untuk mendefinisikan judul pada dokumen.
Tag <base> menentukan alamat default atau target standar untuk
semua link pada halaman:
<head>
<base href="http://www.w3schools.com/images/" />
<base target="_blank" />
</head>
30/10/2015
By : Suwondo, S.Kom
9
HTML HEAD
Tag <link> mendefinisikan hubungan antara dokumen dan
sumber eksternal. Tag <link> paling digunakan untuk link
ke style sheet:
Tag <style> digunakan untuk mendefinisikan informasi
gaya untuk dokumen HTML. Di dalam elemen style yang
Anda tentukan bagaimana elemen HTML harus render di
browser:
Tag <meta> menyediakan metadata tentang dokumen
HTML.
30/10/2015
By : Suwondo, S.Kom
10
HTML META
Metadata adalah informasi tentang data.
Tag <meta> menyediakan metadata tentang dokumen
HTML. Metadata tidak akan ditampilkan pada halaman,
Meta elemen biasanya digunakan untuk menentukan
halaman deskripsi, kata kunci, penulis dokumen,
terakhir dimodifikasi, dan metadata lainnya.
Tag <meta> selalu berjalan di dalam elemen head.
Metadata ini dapat digunakan oleh browser (bagaimana
menampilkan konten atau reload halaman), mesin
pencari (kata kunci), atau layanan web lainnya.
30/10/2015
By : Suwondo, S.Kom
11
HTML META
Keyword untuk Search Engine
Beberapa mesin pencari akan menggunakan atribut nama dan isi elemen meta
untuk mengindeks halaman Anda.
Elemen meta berikut mendefinisikan suatu deskripsi halaman:
<meta name="description" content="Free Web tutorials on HTML, CSS, XML" />
Elemen meta berikut mendefinisikan kata kunci untuk halaman:
<meta name="keywords" content="HTML, CSS, XML" />
Maksud dari atribut nama dan konten adalah untuk menjelaskan konten halaman.
Catatan : Banyak webmaster telah menggunakan tag <meta> untuk spamming,
seperti kata kunci mengulangi (atau menggunakan kata kunci yang salah) untuk
peringkat lebih tinggi. Oleh karena itu, kebanyakan mesin pencari telah berhenti
menggunakan tag <meta> ke indeks / halaman peringkat.
30/10/2015
By : Suwondo, S.Kom
12
HTML ENTITIES
Beberapa karakter dalam HTML telah tersedia. Hal ini tidak mungkin
untuk menggunakan kurang dari (<) atau lebih besar dari (>) tanda-tanda
dalam teks Anda, karena browser akan bercampur dengan tag. Untuk
benar-benar menampilkan karakter reserved, kita harus menggunakan
entitas karakter dalam kode sumber HTML.
Sebuah entitas karakter terlihat seperti ini:
&entity_name; OR &#entity_number;
30/10/2015
By : Suwondo, S.Kom
13
HTML URLs
URL adalah kata lain untuk suatu alamat web.
Sebuah URL dapat terdiri dari kata-kata, seperti "w3schools.com", atau
Internet Protocol (IP) alamat: 192.68.20.50. Kebanyakan orang masukkan
nama situs web ketika browsing, karena nama lebih mudah diingat daripada
angka.
Ketika Anda mengklik link dalam halaman HTML, sebuah poin mendasar tag
<a> ke alamat di web di seluruh dunia.
Sebuah Uniform Resource Locator (URL) digunakan untuk alamat dokumen
(atau data lain) di world wide web.
Sebuah alamat web, seperti ini: http://www.w3schools.com/html/default.asp
aturan sintaks berikut ini:
scheme://host.domain:port/path/filename
30/10/2015
By : Suwondo, S.Kom
14
HTML URLs
•
skema - menentukan jenis layanan Internet. Jenis yang paling umum adalah
http
•
host - mendefinisikan host domain (host default untuk http www)
•
domain - menentukan nama domain Internet, seperti w3schools.com
•
port - mendefinisikan nomor port di host (port default untuk http adalah
nomor 80)
•
jalan - menentukan jalur di server (Jika diabaikan, dokumen tersebut harus
disimpan pada direktori root dari situs web)
•
filename - menentukan nama dokumen / sumber daya.
30/10/2015
By : Suwondo, S.Kom
15