1 HTML Amir Ar Razzaaq Sekolah Tinggi Agama Islam Darunnajah2 Tentang HTML HTML : HyperText Markup Language adalah bahasa yang digunakan untuk membuat...
HTML Amir Ar Razzaaq Sekolah Tinggi Agama Islam Darunnajah
Tentang HTML • HTML : HyperText Markup Language adalah bahasa yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajahan web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. • Kegunaan Mengintegerasikan gambar dengan tulisan. Mengintegerasikan berkas suara dan rekaman gambar hidup. Membuat form interaktif.[2]
Skema Dasar Dokumen HTML
<TITLE>Judul dokumen Isi dokumen
• • • •
HTML: menandai awal dan akhir dokumen HTML HEAD: menandai bagian header dokumen HTML TITLE: memberi judul pada dokumen HTML BODY: menandai awal dan akhir isi dokumen (yang ditampilkan)
<body> <h1>…<h6> <p> <b>,<i>,<u>,<sup>,<sub> <br> <font> <li>,<ol>,<ul> <hr> <img> <a> <table> <!-- --> <frame>,<frameset>,<iframe> <form> <input>,<textarea>,<select> <map> <span>,<div><br />
<br />
Dokumen Header Judul dokumen Isi dokumen Judul paragraf Paragraf Atribut Ganti baris Font Enumerasi Garis mendatar Gambar Link (kaitan/rujukan) Tabel Komentar Frame (bingkai) Formulir isian Komponen isian pada formulir Link berdasar area pada gambar Pengelompokan elemen dokumen<br />
<br />
Contoh Isi Dokumen HTML<br />
<br />
<html> <head> <title>Homepage saya
Saya
Perkenalan
Perkenalkan, nama saya ..... Ini adalah homepagepertama saya, karena saya baru belajar tentang cara membuat homepage.
Tag Judul (Heading) Judul paragraf
n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf
Judul
Judul
Judul
Judul
Judul
Judul
Tingkat Tingkat Tingkat Tingkat Tingkat Tingkat
1
2 3 4 5 6
Judul Tingkat 1 Judul Tingkat 2 Judul Tingkat 3 Judul Tingkat 4 Judul Tingkat 5 Judul Tingkat 6
Tag Paragraf (Paragraph)
paragraf
Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.
Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.
Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.
Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.
Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.
Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.
Tag Atribut 1 (Bold, Italic, Underline) Kalimat yang dicetak tebalKalimat yang dicetak miringKalimat yang digarisbawahi
Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi.
Kata dapat dicetak tebal, miring, garis bawah, tebal miring, dan kombinasi di tengah huruf normal
Kata dapat dicetak tebal, miring, garis bawah, tebal miring, dan kombinasi di tengah huruf normal
Tag Atribut 2 (Superscript, Subscript) <sup>bagian yang dicetak tinggi <sub>bagian yang dicetak rendah
Untuk menandai bagian karakter agar dicetak tinggi atau rendah, biasanya untuk rumus matematika atau kimia.
Tag Ganti Baris (Break line) Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) : Ganti baris
Perkenalkan, nama saya ..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.
Perkenalkan, nama saya ..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage.
Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.
Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu Paragraf sederhana.
Paragraf
Tag Font (size) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color kalimat kalimat n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf) m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf) Ukuran satu, dua, tiga, empat, lima, enam, tujuh
Ukuran satu, dua, tiga, empat, lima,
enam, tujuh
Tag Font (face) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color kalimat nama font = Times New Roman, Arial, Courier New, Verdana, dll.
face="Times New Roman">Homepage ini masih dalam tahap pengembangan face="Arial">Homepage ini masih dalam tahap pengembangan face="Courier New">Homepage ini masih dalam tahap pengembangan face="Verdana">Homepage ini masih dalam tahap pengembangan
Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan Homepage ini masih dalam tahap pengembangan
Tag Font (color) Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu. Tag : font Parameter : size, face, color kalimat RR = 00 .. FF (intensitas warna merah dalam heksadesimal) GG = 00 .. FF (intensitas warna hijau dalam heksadesimal) BB = 00 .. FF (intensitas warna biru dalam heksadesimal) Red Maroon Lime Green Blue Navy Yellow Fuchsia Aqua
Red Maroon Lime Green Blue Navy Yellow Fuschia Aqua
Tag Enumerasi
(List, Unordered List, Ordered List)
item
Untuk menandai suatu item dari daftar (enumerasi), diawali dengan simbol • (bullet) Kelompok item harus diapit oleh tag
dalam daftar bertingkat. Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan tag Ada beberapa sektor potensial:
Pariwisata
Seni
Budaya
Sektor tersebut merupakan ...
Fasilitas penginapan di Indonesia:
Losmen
Losmen merupakan tempat penginapan yang berskala kecil
Hotel
Hotel melati
Hotel berbintang
Perkembangan dalam ...
Ada beberapa sektor potensial: Pariwisata Seni Budaya Sektor tersebut merupakan … Fasilitas penginapan di Indonesia: 1. Losmen Losmen merupakan tempat penginapan yang berskala kecil 2. Hotel o Hotel melati o Hotel berbintang Perkembangan dalam ...
Tag Garis Mendatar (Horizontal Line) membentuk garis pemisah mendatar. Bentuk penulisan lain yang dianjurkan (XML style) : Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.
Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.
Tag Gambar (Image)
NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG.
Untuk menampilkan sebuah file gambar. Bentuk penulisan lain yang dianjurkan (XML style) :
Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.
Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya
masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.
Tag Tabel (Table) - data
definisi tabel
Menampilkan data dalam bentuk tabel
Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom. Tag untuk penanda baris adalah
definisi baris
Tag untuk penanda kolom adalah
data
aaa
bbb
ccc
ddd
eee
fff
Tag Tabel (Table) - layout Untuk menata letak (layout) isi dokumen
Header kiri
Header tengah
Header kanan
Menu kiri
Bagian Isi
Footer tengah
Footer kanan
Desain/Layout Halaman Logo
Navigasi
Navigasi
Logo
Navigasi Navigasi
Navigasi
Tag Link (Anchor) Kata yang di-clickKata yang dituju Link = Alamat URL atau nama file dan/atau acuan yang dituju Acuan = Kata sembarang sebagai penanda (bookmark)
Lebih dari satu dokumen dapat ditampilkan secara bersamaan dalam satu tampilan Setiap dokumen ditampilkan dalam sebuah frame Sebuah frameset menentukan tata letak, ukuran, dan banyaknya frame yang akan ditampilkan Di dalam frameset boleh ada frameset lain (beranak) Dibutuhkan satu dokumen tersendiri yang berisi definisi frameset. Dokumen tersebut tidak mempunyai isi dokumen (tidak ada ) Skema dasar dokumen frameset :
Judul dokumen
Contoh Dokumen Frameset
Document Frameset
iframe (inline frame) • • • •
Di dalam sebuah dokumen (induk) dapat ditampilkan satu atau beberapa dokumen lain (anak) Setiap dokumen (anak) yang disisipkan diletakkan dalam sebuah iframe Dokumen induk merupakan dokumen biasa yang mempunyai isi dokumen Skema dasar dokumen dengan iframe :
Judul dokumen …isi dokumen… <iframe src="namafile"> bagian ini ditampilkan jika browser tidak mendukung frame …isi dokumen…
Contoh inline frame
Kisah Sekolah
Kisah-kisah di sekolah
Masa sekolah adalah masa yang menyenangkan bagiku. Sebagian besar waktu hidupku sampai saat ini dihabiskan untuk sekolah, dan aku sangat menikmati saat-saat itu. Inilah sebagian kisah-kisahku di sekolah.
Semua pengalaman dan teman-teman yang kudapat sungguh sangat mewarnai hidupku dan memberikan pengaruh besar terhadap diriku.
form • • • • • • • •
Sebuah dokumen interaktif dapat menangani input dari user Analoginya : bahwa dokumen adalah sebuah formulir isian Sebuah dokumen dapat mengandung satu atau beberapa form Setiap form mewakili sebuah task spesifik (login, mengisi biodata, memilih bahasa, dll) Setiap form dapat menghimpun satu atau beberapa elemen input Ada beberapa jenis elemen input untuk menangani berbagai karakteristik data input Di setiap form harus ditentukan nama program (di sisi server) yang akan menangani data isian yang dikirim (di-submit) Skema dasar dokumen form :
•
Contoh sebuah form sederhana untuk meminta nama user :
Karakteristik data input •
Teks satu baris (single-line text)
•
Teks banyak baris (multi-line text)
•
Teks rahasia (password)
•
Pilihan tunggal (single selection) , <select>
•
Pilihan majemuk (multiple selections) <select multiple>
•
Centang (on/off)
•
Data bawaan/tersembunyi (hidden)
•
File
•
Koordinat 2D dalam sebuah bidang gambar
•
Aksi user melalui penekanan tombol , , ,
Tag input • type : text, password, radio, checkbox, image, submit, reset, button, hidden, file name : identifier untuk sisi server id : identifier untuk sisi browser value : nilai default disabled : jika disebutkan maka elemen tidak aktif (tidak digunakan)
• readonly : jika disebutkan maka elemen tidak bisa diubah nilainya size : ukuran lebar dalam banyaknya karakter (bisa di-override oleh CSS) maxlength : banyaknya karakter maksimal yang dapat dimasukkan user
•
checked>
checked : jika disebutkan maka defaultnya adalah dalam keadaan dipilih
• src : nama file gambar alt : teks yang ditampilkan bila browser tidak dapat menampilkan gambar
Tag textarea, select, button • nilai : nilai default rows : banyaknya baris yang ditampilkan (tinggi) cols : banyaknya kolom/karakter yang ditampilkan (lebar)
• <select name="nama" multiple size="r"> … multiple : jika disebutkan maka pilihan boleh lebih dari satu (sambil menekan tombol Ctrl) size : banyaknya baris pilihan yang ditampilkan (default=1) selected : jika disebutkan maka defaultnya dalam keadaan terpilih
• type : submit, reset, button tampilan : kode dalam HTML yang akan menjadi tampilan untuk tombol
Contoh form (1)
Contoh form (2)
Contoh form (3)
Link pada bidang gambar • •
Link dapat didefinisikan pada satu atau beberapa area pada sebuah bidang gambar Skema : <map name="peta"> <area shape="bentuk1" coords="koordinat1" href="url1" alt="teks1"> <area shape="bentuk2" coords="koordinat2" href="url2" alt="teks2"> ... src : nama file gambar usemap : nama definisi peta yang digunakan shape : default, rect, circle, poly coords : koordinat, dengan format : default : x1,y1,x2,y2 rect : x1,y1,x2,y2 circle : x,y,r poly : x1,y1,x2,y2,x3,y3,…,xn,yn href : URL yang dituju bila area di-klik
Contoh penggunaan map
Klik pada wajah untuk melihat biodata <map name="aadc"> <area shape="circle" coords="131,82,37" href="titi.html" alt="Titi Kamal"> <area shape="rect" coords="172,52,238,129" href="adinia.html" alt="Adinia"> <area shape="poly" coords="300,85,311,103,308,137,306,172,295,198,219,259,224,239,210,224,213,161,248,127,273,86,273,86" href="dian.html" alt="Dian Sastro"> <area shape="rect" coords="314,105,355,170" href="ladya" alt="Ladya Cheryl"> <area shape="circle" coords="387,134,30" href="sissy.html" alt="Sissy Priscillia"> <area shape="default" nohref> Klik pada wajah untuk melihat biodata
Pengelompokan elemen dokumen •
•
Beberapa elemen dokumen (teks, paragraf, gambar, tabel, dll) dapat dikelompokkan untuk menambahkan struktur lojik pada dokumen Pengelompokkan ada dua jenis : – –
• •
<span> dan
biasanya digunakan dengan parameter id dan class Struktur lojik ini dapat digunakan untuk : – –
•
inline (alur, flow) : <span> block (blok) :
mempermudah menginterpretasi isi dokumen memberikan tampilan sesuai struktur lojik dengan memanfaatkan CSS
Perkenalkan, nama saya ... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu 
sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.
Homepage detik.com.
<map name="aadc"> <area shape="circle" coords="131,82,37" href="titi.html" alt="Titi Kamal"> <area shape="rect" coords="172,52,238,129" href="adinia.html" alt="Adinia"> <area shape="poly" coords="300,85,311,103,308,137,306,172,295,198,219,259,224,239,210,224,213,161,248,127,273,86,273,86" href="dian.html" alt="Dian Sastro"> <area shape="rect" coords="314,105,355,170" href="ladya" alt="Ladya Cheryl"> <area shape="circle" coords="387,134,30" href="sissy.html" alt="Sissy Priscillia"> <area shape="default" nohref> Klik pada wajah untuk melihat biodata