Hyper Text Markup Language Akrom abdullah, M.Kom (c)2012

HTML – HTML adalah bahasa untuk mendeskripsikan halaman web. – HTML bukan bahasa pemrograman, tetapi bahasa markup – Sebuah bahasa markup adalah seperangkat markup dari tag – Tujuan dari tag adalah untuk menggambarkan isi halaman Tag HTML – Tag HTML menggunakan tanda kurung lancip/sudut <> – Tag HTML biasanya berpasangan seperti dan

Editor HTML Notepad Notepad++ DreamWeaver EditPLUS Dll.

Elemen dan Atribut Elemen Adalah teks apapun yang berada diantara tag pembuka dan tag penutup.

Atribut – Memberikan informasi tambahan dari elemen HTML. – Menambahkan Fungsi Tambahan dari elemen HTML yang masih memiliki fungsi standar. Contoh:

Tag HTML Heading – tag Heading Line – tag Garis Horizontal Comment – Komentar/Catatan Paragraf – tag paragraf Line Break – tag ganti baris atau

Format Teks – Tag,,,,,, dan. Contoh: This text is bold This text is strong This text is big This text is italic This text is emphasized This is computer output This is subscript and superscript

This text is bold This text is strong This text is big This text is italic This text is emphasized This is computer output This is subscript and superscript

Links – Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat di-klik untuk melompat ke dokumen baru atau bagian baru dalam dokumen yang sama. – Bila Anda memindahkan kursor di atas link di halaman Web, tanda panah akan berubah menjadi tangan kecil. – Link menggunakan tag.

Contoh LinkKeterangan link ke file.html Link dalam folder yang sama dengan teks Link dalam folder yang sama dengan gambar Link ke Google.com Link ke luar menuju ke website google Kirim Link ke alamat surat dengan subject: Hallo Disini bagian Penjelasan Link ke bagian penjelasan Link dalam bagian tertentu dalam halaman web yang sama

Image – Image/gambar/foto yang digunakan biasanya menggunakan format JPG, GIF atau PNG. – PNG dan GIF adalah format image yang mendukung efek transparan. – Image harus menyesuaikan ukuran layar (pixel) dan besarnya file (misalnya:kilobyte) – Tag yang digunakan adalah

Contoh tag ImageKeterangan Menampilkan gambar yang berada pada folder img Menampilkan gambar dengan ukuran lebar 300px dan tinggi 200px Gambar Dengan posisi rata bawah Menampilkan posisi gambar rata bawah dengan teksnya Gambar posisi kiri dari teks Menampilkan posisi gambar sebelah kiri dengan teksnya Contoh Gambar yang dimaping dilengkapi Link berdasarkan angka kordinat.

Tabel – Tabel didefinisikan dengan tag. – Sebuah tabel terdiri atas baris (tag ), dan pada setiap baris dibagi menjadi sel-sel data (tag ). – td singkatan dari tabel data. – Dalam tabel memiliki tag header (tag ). – Sebuah tag dapat berisi teks, link, gambar, daftar, bentuk, tabel lain, dll. – Penggabungan baris menggunakan tag – Penggabungan kolom menggunakan tag

Contoh Tabel Header 1 Header 2 baris 1, kolom 1 baris 1, kolom 2 baris 2, kolom 1 baris 2, kolom 2

Menggabungkan 2 kolom: Nama Telepon Bin Fulan Menggabungkan 2 baris: Nama Fulan Telepon: atribut cellspacing: pertama baris kedua baris atribut cellpadding: <table border="1" cellpadding="10"> First Row Second Row

List – Untuk membuat Daftar/List menggunakan Tag atau. – Tag (Onerdered List) membuat daftar berupa numbering/angka. – Tag (Unordered List) membuat daftar berupa bullet/simbol. – Sedangkan elemen untuk kedua tag diatas menggunakan tag. – Tag berisi satuan item dari daftar.

Contoh List Teh Kopi Teh kopi

Form – Form diperlukan untuk menghubungkan data ke server. – Form berisi elemen input field teks, checkbox, radio button, textarea dan lain sebagainya. – Mendefinisikan Form dimulai dengan Tag. – Text Fields – Password Field – Radio Buttons – Checkboxes – Submit Button – Drop-down list Volvo Audi – Textarea

iframe – Menampilkan halaman web dalam halaman web – Tag yang digunakan adalah – Ukuran tinggi (height) dan lebar (width) defaultnya pixel tapi bisa juga persen. – Bingkai iframe menggunakan tag frameborder. – Memberikan identitas frame menggunakan atribut name..

HTML Advance – Bukanlah tag HTML. Ini adalah informasi/deklarasi ke browser tentang versi HTML yang ditulis. – Diletakkan/ditulis pada bagian atas tag.... – Contoh diatas masuk dalam HTML versi 5. – Beberapa Versi HTML: HTML=1991, HTML+=1993; HTML 2.0=1995; HTML 3.2=1997; HTML 4.01=1999; XHTML 1.0=2000; HTML5=2012

Head – Elemen pada tag merupakan tempat untuk semua elemen diantara head. Elemen di dalam dapat berisi script, menginstruksikan browser untuk menemukan style sheet, memberikan informasi meta, dan masih banyak lagi. – Beberapa tag berikut ini dapat ditambahkan pada bagian head:,,,,, dan. – Element : – Element : Keyword Search Engine:

Object – Tujuan dari elemen adalah untuk mendukung Plug-In HTML. – Plug-in tersebut bisa digunakan untuk memutar audio dan video (dan banyak lagi). Plug-in HTML menggunakan tag.

Contoh Object QuickTime Flash Windows Media Player

Audio – Banyak cara menjalankan file Video. – Bisa dengan plugi-in dan – Dalam HTML 5 dapat menggunakan tag – Menggunakan Player Audio dari luar, misalnya: yahoo media player: Play Sound – Dengan Hyperlink : Play the sound Contoh Audio:

Video – Banyak cara menjalankan file Video. – Bisa dengan plugi-in dan – Dalam HTML 5 dapat menggunakan tag

Youtube Video – Menjalankan Video Youtube bisa melalui tag atau bisa dengan plugi-in

Cascading Style Sheet

CSS singkatan dari Cascading Style Sheets Styles mendefinisikan bagaimana menampilkan elemen HTML Style Sheets Eksternal disimpan dalam format file CSS

CSS

id dan class Selain menetapkan model/gaya untuk elemen HTML, CSS memungkinkan juga menentukan sendiri Selector melalui "id" dan "class".

id selector Digunakan dalam menentukan gaya elemen tunggal yang unik. Menggunakan atribut id elemen HTML. Didefinisikan dengan "#".... #para1 { text-align:center; color:red; } Hello Kawan!... #para1 { text-align:center; color:red; } Hello Kawan!...

class selector digunakan dalam menentukan gaya sekelompok elemen. Berbeda dengan pemilih id Paling sering digunakan pada beberapa elemen. Hal ini memungkinkan Anda untuk menetapkan gaya tertentu untuk elemen HTML banyak dengan kelas yang sama. Menggunakan atribut class HTML, dan didefinisikan dengan ".".center { text-align:center; } Center-aligned heading Center-aligned paragraph..center { text-align:center; } Center-aligned heading Center-aligned paragraph.

CSS Inline styles Huruf dengan model verdana, warna ungu

Embedded style sheets.... h1 { color: green; text-decoration: underline; } body { background-color:ffff66; margin-left:100px} a { font-familiy:tahoma} Selamat Belajar CSS

External style sheets

Kode Warna

Gray ShadesColor HEX # # # # # # # # # # # # # # # # # # # # #A0A0A0 #A8A8A8 #B0B0B0 #B8B8B8 #C0C0C0 #C8C8C8 #D0D0D0 #D8D8D8 #E0E0E0 #E8E8E8 #F0F0F0 #F8F8F8 #FFFFFF

CC0000FF CC0033FF CC0066FF CC0099FF 00CC0000CC3300CC6600CC9900CCCC00CCFF 00FF0000FF3300FF6600FF9900FFCC00FFFF CC3300FF CC3333FF CC3366FF CC3399FF 33CC0033CC3333CC6633CC9933CCCC33CCFF 33FF0033FF3333FF6633FF9933FFCC33FFFF CC6600FF CC6633FF CC6666FF CC6699FF 66CC0066CC3366CC6666CC9966CCCC66CCFF 66FF0066FF3366FF6666FF9966FFCC66FFFF CC9900FF CC9933FF CC9966FF CC9999FF 99CC0099CC3399CC6699CC9999CCCC99CCFF 99FF0099FF3399FF6699FF9999FFCC99FFFF CC0000CC0033CC0066CC0099CC00CCCC00FF CC3300CC3333CC3366CC3399CC33CCCC33FF CC6600CC6633CC6666CC6699CC66CCCC66FF CC9900CC9933CC9966CC9999CC99CCCC99FF CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF FF0000FF0033FF0066FF0099FF00CCFF00FF FF3300FF3333FF3366FF3399FF33CCFF33FF FF6600FF6633FF6666FF6699FF66CCFF66FF FF9900FF9933FF9966FF9999FF99CCFF99FF FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

head menu footer foto Keterangan foto video Ket. video Kolom banner Berita (tanggal, judul,isi) Pilkada DKI Jakarta 20-September-2012 Pada Tanggal 20 September 2012 akan dilangsungkan Pilkada DKI yang akan....