Pengenalan HTML
HTML DASAR
HTML : HyperText Markup Language adalah suatu dokumen teks
yang dirancang sedemikian rupa dalam bentuk tag-tag sehingga pada
saat dibaca oleh BROWSER akan menampilkan pesan/informasi/tampilan sesuai
keinginan perancang
Hypertext Markup Language (HTML) merupakan standard
bahasa yang digunakan untuk
menampilkan dokumen web, HTML bukan termasuk bahasa pemrograman
Untuk membuat dokumen web yang bisa ditampilkan di browser, perlu menuliskan kode HTML baik secara langsung misal pada editor Notepad, maupun secara tidak langsung misal melalui software Adobe
Dreamweaver
TAG : Kode khusus yang merupakan komponen fundamental pada
dokumen web dan akan dikenali oleh browser
ATURAN PENULISAN TAG
-
Nama tag ditulis di dalam tanda < > dan
untuk tag penutup tambahkan tanda </ >
-
Boleh ditulis dengan huruf besar maupun kecil
-
Digunakan sepasang, contoh : <H1> dan
</H1>
Pengecualian untuk tag
<BR> = untuk memberikan karakter ENTER<HR> = untuk memberikan garis Horizontal
ATRIBUT : Suatu informasi tambahan yang bisa
disertakan pada suatu elemen HTML. Suatu elemen dapat memiliki atribut. Atribut
ini memberikan informasi tambahan tentang elemen yang bersangkutan
VALUE : Nilai dari Atribut yang disertakan, selalu
gunakan tanda “ (petik ganda) untuk mendefinisikan nilai
CONTOH PENGGUNAAN
<a href="http://www.devclod.blogspot.co.id/">Pemrograman</a>
a : Nama TAG, digunakan untuk berpindah ke halaman yang
dituju / Link
href : Atribut yang disertakan pada TAG <a>
http://www.pemrograman.org/ : Nilai yang masukkan pada
atribut href
STURKTUR DASAR DOKUMEN HTML
<HTML><HEAD><TITLE>Judul dokumen</TITLE></HEAD><BODY>Isi dokumen</BODY></HTML>
- { 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) }
DAFTAR TAG :
<html> Dokumen<head> Header<title> Judul dokumen<body> Isi dokumen<h1>…<h6> Judul paragraf<p> Paragraf<b>,<i>,<u>,<sup>,<sub> Atribut<br> Ganti baris<font> Font<li>,<ol>,<ul> Enumerasi, Membuat Daftar<hr> Garis mendatar<img> Gambar<a> Link (kaitan/rujukan)<table> Tabel<!-- --> Komentar<frame>,<frameset>,<iframe> Frame (bingkai)<form> Formulir isian<input>,<textarea>,<select> Komponen isian pada formulir<map> Link berdasar area pada gambar<span>,<div> Pengelompokan elemen dokumen
LATIHAN 1 :
Buat file baru pada Notepad++, beri nama Latihan001.html
Ketikkan Tag-tag Dibawah ini kemudian buka hasilnya lewat
browser Firefox atau Internet Explorer
<html><head><title>Homepage saya</title></head><body bgcolor=“blue”><h1>Saya</h1><h2>Perkenalan</h2><p>Perkenalkan, nama saya along Ini adalah <i>homepage</i><b>pertama</b> saya, karena saya baru belajar tentangcara membuat <b><i>homepage</i></b>.</p></body></html>
HEADING <Hn>:
HTML menyediakan 6 buah tag yang digunakan untuk mengatur ukuran teks yang
dijadikan sebagai judul dalam badan dokumen (n = nilai 1 s/d 6)
<h1> ... </h1> sampai dengan <h6> ... </h6>
Dapat ditambahkan atribut misal align dengan value : left,
right, justify
LATIHAN 2 :
Buat file baru pada Notepad++, beri nama Latihan002.html
Ketikkan Tag-tag Dibawah ini kemudian buka hasilnya lewat
browser Firefox atau Internet Explorer
<html><head><title>Homepage saya</title></head><body><h1>Hello World !!</h1><h2>Hello World !!</h2><h3 align=“left”>Hello World !!</h3><h4 align=“center”>Hello World !!</h4><h5 align=“right”>Hello World !!</h5><h6>Hello World !!</h6></body></html>
Pengenalan
TAG HTML Dasar
PARAGRAF <P>: Untuk menandai suatu paragraf. Suatu
paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya.
<p>paragraf</p>
Dapat ditambahkan atribut misal align dengan value : left,
right, justify
LATIHAN 3 :
Buat file baru pada Notepad++, beri nama Latihan003.html
Ketikkan Tag-tag Dibawah ini kemudian buka hasilnya lewat
browser Firefox atau Internet Explorer
<p align=“left”>Ini adalah homepage pertama<br/>saya, karena saya baru belajar<br/>tentang cara membuat homepage.<br/></p><p>Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.</p><p>Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat.</p>
Tag Atribut (Bold, Italic, Underline ) : Untuk
menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi.
<b>Kalimat yang dicetak tebal</b><i>Kalimat yang dicetak miring</i><u>Kalimat yang digarisbawahi</u>
Kata dapat dicetak tebal, miring, garis
bawah, tebal miring, dan kombinasi di
tengah huruf normal
LATIHAN 4 :
Buat file baru pada Notepad++, beri nama Latihan004.html
Ketikkan Tag-tag Dibawah ini kemudian buka hasilnya lewat
browser Firefox atau Internet Explorer
<p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>, <u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan <b><i><u>kombinasi</u></i></b> di tengah huruf normal</p>
Tag Atribut BR : Digunakan untuk pindah ke baris
berikutnya.
<br>Untuk pindah ke baris berikutnya. <br /><br />Bentuk penulisan lain yang dianjurkan (XML style) :<br/>
Baris Terakhir
Tag ini tidak mempunyai pasangan
LATIHAN 5 :
Buat file baru pada Notepad++, beri nama Latihan005.html
Ketikkan Tag-tag Dibawah ini kemudian buka hasilnya lewat
browser Firefox atau Internet Explorer
<p>Perkenalkan,<br/>nama saya ..... Ini adalah<br />homepage pertama saya,<br/> karena saya baru belajar tentang cara<br/>membuat homepage.</p>
<p>Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana.</p>
Tag Atribut HR : Digunakan untuk membuat baris
Horizontal
<hr>Baris Pertama<br/><hr> <hr>Baris Kedua
Tag ini tidak mempunyai pasangan
Attribut dari HR
size : Menentukan ketebalan garis
width : Menentukan lebar garis
align : Menetukan peletakan teks dalam baris
noshade : Mengatur agar garis tidak disertai bayangan
LATIHAN 6 :
Buat file baru pada Notepad++, beri nama Latihan006.html
Ketikkan Tag-tag Dibawah ini kemudian buka hasilnya lewat
browser Firefox atau Internet Explorer
Ini Baris Pertama
<hr>Ini Baris Kedua<hr size=“5” color=“red” >
Tag Atribut <!- --> : Untuk memberikan komentar
yang nantinya akan diabaikan oleh browser, digunakan tanda <!- -->
<!- Tulisan Ini Akan Diabaikan Oleh browser
-->
LATIHAN 7 :
Buat file baru pada Notepad++, beri nama Latihan007.html
Ketikkan Tag-tag Dibawah ini kemudian buka hasilnya lewat
browser Firefox atau Internet Explorer
<B>Cetak tebal Baris Pertama</B> <BR/><!– Baris Ini Tidak akan ditampilkan oleh browser --><U>Baris Kedua bergaris bawah</U>
Tag Atribut Sub : Digunakan untuk karakter agar
dicetak rendah
Tag Atribut Sup : Digunakan untuk karakter agar
dicetak tinggi
<sup>bagian yang dicetak tinggi</sup><sub>bagian yang dicetak rendah</sub>
Biasanya untuk rumus matematika atau kimia.
BONUS : Tuliskan dalam bentuk HTML dari Rumus Matematika
dan Kimia dibawah
(x1
+ x2)2 = x12 + x22
+ 2x1x2
2H2
+ O2 = 2 H2O
X4
- (X3 + X4)X + X3 X4
0 comments: