1 KONSEP DASAR HTML DALAM PEMBUATAN HALAMAN WEB MEMBUAT DOKUMEN HTML Sebelum kita memulai menulis dokumen HTML pertama kali yang harus anda lakukan ad...
MEMBUAT DOKUMEN HTML Sebelum kita memulai menulis dokumen HTML pertama kali yang harus anda lakukan adalah menentukan lokasi atau folder untuk menyimpan dokumen dan program editor yang akan digunakan. Untuk membuat dokumen HTML ini anda memerlukan editor yang disediakan Microsoft windows, misalnya Notepad. HTML merupakan bahasa bertanda, menggunakan, rangkaian teks tertentu (tag) untuk menandai teks yang mempunyai interpretasi khusus. Formatting TAG pada HTML mengandung dua TAG, yaitu TAG pembuka dan TAG penutup dan TAG pembuka saja. Formatting TAG pembuka adalah suatu TAG yang diawali dengan dan diakhiri dengan . Sedangkan TAG pembuka saja adalah TAG yang hanya dibuat dibagian awalnya saja yaitu tanpa ditutup dengan tag penutup lagi. Selain itu dokumen HTML harus dibungkus dengan . Artinya dibagian awal anda harus menuliskan dan dibagian akhir dokumen tersebut juga harus ditutup denga juga. Supaya dokumen yang kita buat tersebut dikenali dengan baik oleh program browser yang digunakan.
Menulis dokumen HTML. Untuk membuat dokumen HTML prosedur yang harus anda lakukan adalah sebagai berikut: 1. klik start windows. 2. Klik dan pilih all Programs. 3. Klik dan pilih Accessories. 4. Klik dan pilih notepad. Setelah itu jendela notepad akan tampil. Kemudian sebagai latihan ketikkan dokumen HTML berikut:
5
Latihan menulis dokumen html
Menyimpan dokumen Untuk menyimpan dokumen yang telah anda buat, prosedurnya sebagai berikut: 1. dari jendela notepad tampilkan Menu File 2. pilih Save, setelah itu akan tampil kotak dialog Save as. 3. tentukan lokasi drive atau folder tempat dokumen html tersebut akan disimpan. 4. ketikkan nama file HTML anda, lengkap dengan akhiran (extention) HTM atau HTML,misalnya LATIHAN1.HTML 5. klik tombol save.
Menjalankan dokumen HTML Untuk menjalankan dokumen HTML anda harus memasang atau menginstal program browser misalnya Internet Explorer. Setelah program browser tersebut anda instal baru anda bisa menampilkan hasil pekerjaan anda tersebut. Untuk browser Internet Explorer biasanya sudah otomatis terpasang ketika kita menginstal sistem operasi windows. Prosedur yang harus anda lakukan untuk menampilkan hasil pekerjaan anda adalah sebagai berikut:
1. Jalankan program Internet Explorer sehingga tampil sbb:
6
. 2. Pilih dan klik menu File 3. Klik Open. Setelah itu akan tampil kotak dialog open seperti pada gambar dibawah ini.
4. klik tombol browse. 5. setelah itu akan tampil kotak dialog open. 6. tentukan lokasi atau folder tempan menyimpan dokumen latihan1.html 7. klik nama file yang akan ditampilkan,misalnya latihan1.html 8. klik tombol Open 9. Klik OK. Setelah itu akan tampil di jendela Internet Explorer seperti gambar dibawah ini :
7
1. Heading Heading adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen HTML. Contoh1.html <TITLE>Heading
Heading level 1
Heading level 2
Heading level 3
Heading level 4
Heading level 5
Heading level 6
8
2. Paragraf Untuk membuat paragraph digunakan tag
. setelah tag
anda dapat menuliskan isi paragraph dan paragraph tersebut harus diakhiri dengan tag penutup
. Anda dapat mengatur isi paragraph dengan menggunakan attribut ALIGN. Attribut ALIGN diikuti dengan posisi yang diinginkan (LEFT/RIGTH/CENTER). Contoh2.html <TITLE>Paragraf
Beberapa tahun yang lalu, seorang hartawan meninggal dunia sedangkan ia tidak memiliki ahli waris. Kepada pengacaranya, ia meninggalkan dua buah surat yang disegel.Yang sebuah berisi permintaan agar jenazahnya dikuburkan pada jam empat dini hari. Surat yang kedua belum diketahui isinya karena disampulnya tertulis pesan agar dibuka seusai pemakaman jenazah
Sesuai dengan wasiat, jenazah itu dikebumikan pada pukul empat dini hari. Karena tidak lazimnya waktu pemakaman pada jam tersebut, yang ikut mengantar jenazahnya hanya empat orang kawannya yang paling setia
9
Seusai pemakaman, surat wasiat yang kedua dibuka. Betapa terkejutnya pengacara ketika membaca isinya, ialah wasiat bahwa seluruh harta warisan (yang bernilailebih dari 800.000 pound) dibagi rata kepada orang-orang yang mengantarkan jenazahnya ke pemakaman. Dengan demikian, yang berhak memperoleh harta yangbanyak itu hanya empat orang, sebagai imbalan bagi kesetiaan mereka. Sumber humor, kisah dan pepatah
Hasilnya adalah :
3. BR (Line Break) Tag line break (BR) digunakan untuk menulis teks pada baris berikutnya. Tag membuat baris baru tanpa memberi baris kosong. Contoh3.html <TITLE>Line Break
10
Banyak cara yang dapat digunakan untuk melakukan instalasi FreeBSD. Namun ada tiga cara yang paling sering dilakukan , yaitu : Instalasi melalui FTP Instalasi melalui CDROM Instalasi melalui partisi DOS
4. Font Untuk mengatur huruf dokumen HTML digunakan tag . Tag memiliki beberapa attribut untuk mengatur ukuran huruf, jenis dan warna dari huruf.
Ukuran Huruf: Contoh4a.html <TITLE>Ukuran font Ukuran font 1
11
Ukuran Ukuran Ukuran Ukuran Ukuran Ukuran
font font font font font font
2 3 4 5 6 7
Jenis Huruf : Contoh4b.html <TITLE>Jenis Font Arial , contoh AC Milan
Verdana , contoh Persebaya
Tahoma , contoh Indonesia
12
Warna Huruf : Contoh4c.html
<TITLE>Warna Font Manado – Jakarta - Bali
tetap PSM Makassar kan
Ini baru Persebaya
13
5. Link Perintah anchor (A) digunakan untuk membuat suatu link. Untuk membuat link ke dokumen HTML lain digunakan perintah Teks pada Browser. Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu disediakan nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan attribut NAME pada tag . Contoh IPEN. Cara melakukan link ke bagian tersebut adalah Teks dibrowser. Contoh5a.html
Maaf, hanya sedikit Chamot Dida Shevchenko kembali
15
6. Ordered list Ordered list digunakan untuk membuat daftar di mana tiap bagiannya memiliki nomor secara berurut, Ordered list dimulai dengan tag
dan diakhiri dengan tag penutup . Untuk menyatakan tiap bagiannya digunakan tag
dimana tag ini tidak menggunakan tag penutup. Dengan menggunakan ordered list anda tidak perlu memberi nomor untuk tiap-tiap bagian.
Contoh6a.html <TITLE>Ordered List Empat besar pemain termahal di dunia
Luis Figo
Hernan Crespo
Christian Vieri
Nicolas Anelka
secara default ordered list akan melakukan penomoran 1,2,3… untuk mengubah nomor tersebut digunakan attribut TYPE pada tag . Berikut adalah daftar attribut TYPE. TYPE = 1 Nomor urut 1,2,3,… (default) TYPE = I Urutan I, II, III, … TYPE = i Urutan i, ii, iii,… 16
TYPE = A Urutan A, B, C,… TYPE = a Urutan a, b, c, … Contoh6b.html <TITLE>OL dengan atribut
Daftar empat pemain termahal didunia
Luis Figo
Hernan Crespo
Christian Vieri
Nicolas Anelka
Urutan lima sampai delapan
Denilson
Gabriel Batigol
Ronaldo
Amoroso
17
7. Unordered List Berbeda dengan ordered list, dalam unordered list tidak di jumpai urutan dalam suatu daftar. Setiap bagian dari unordered list ditandai dengan tanda bullet. Tanda bullet menjadi default dalam unordered list. Untuk menggunakan unordered list digunakan tag
dan tag penutup
dan sama dengan ordered list setiap bagiannya digunakan tag
.
Contoh7a.html <TITLE>Unordered List Empat besar Seri-A Liga Indonesia
Manado
Tondano
Tomohon
Kawangkoan
18
Sama seperti Ordered List, unorderlist mempunyai attribut TYPE. Berikut adalah daftar attribut TYPE TYPE = circle Tanda lingkaran (default) TYPE = disk Tanda Cakram TYPE = square Tanda Kotak Contoh7b.html <TITLE>UL dengan atribut Klub sepakbola di Jawa Timur
Persebaya Surabaya
Persela Lamongan
Persij Jember
8. Image dalam HTML Untuk memperindah situs biasanya orang menambahkan gambar dalam file HTML. Untuk menambah image pada HTML digunakan tag . Dalam tag juga terdapat attribut SRC dimana untuk menentukan dimana letak sumber gambar. Contoh8a.html
19
<TITLE>Grafik dalam halaman web
I Love you so much!!!
9. Tabel Tabel banyak digunakan karena dapat menampilkan informasi dengan bentuk yang ringkas dan mudah dibaca. Untuk membuat tabel digunakan tag awal
dan tag penutup
. Tag
memiliki beberapa bagian penting yaitu : 1.
…
digunakan untuk membentuk judul tabel. Judul ini terletak di luar table 2.
…
berfungsi untuk meletakkan judul tabel di bagian paling atas. 3.
…
dipakai untuk membentuk baris pada suatu tabel. 4.
…
digunakan untuk menulis data dan batas dari cell.
Contoh9.html <TITLE>Tabel
Seputar Calciomeecato
Nama Klub
Berita
Fiorentina
Fiorentina mendatangkan Nuno Gomes untuk menggantikan sang legenda Batigol
Lazio
20
Lazio menjadi klub dengan rekor pembelian pemain sebesar 240 miliar lira!
Perugia
Ahn Jung-Whan resmi menjadi pemain pinjaman Perugia
Udinese
Pemain Spanyol berusia 23 tahun, Luis Helguera menjadi pemain Udinese dengan transfer senilai 349 juta lira
Perataan pada table digunakan attribut ALIGN=”left/right/center” untuk horizontal, sedangkan untuk perataan table untuk vertikal menggunakan attribut VALIGN=”top/middle/bottom” Untuk tinggi dan lebar digunakan attribut WIDTH dan HEIGHT Contoh9a.html
21
<TITLE>Tabel dengan WIDTH dan ALIGN
Lihatlah VALIGN="top" Janganlah merasa malu mempelajari sesuatu yang tidak diketahuinya
Bandingkan dengan VALIGN ="middle"
bagaimana dengan ini VALIGN ="bottom"
kalo ini ALIGN="left"
ALIGN="center"
Dunia diciptakan untuk semua makhluk, bukan untuk kepentingan dunia itu sendiri, dan ini dengan ALIGN = "right"
22
Untuk membuat jarak spasi antara cell dan spasi antara cell dan text digunakan attribut CELLSPACING dan CELLPADDING Contoh9b.html <TITLE>Tabel dengan CELLSPACING dan CELLPADDING
baris 1, kolom 1
baris 1, kolom 2
baris 2, kolom 1
baris 2, kolom 2
23
Untuk menggabungkan beberapa kolom digunakan attribut COLSPAN, sedangkan untuk menggabungkan beberapa baris (row) digunakan attribute ROWSPAN.
Latihan9c.html <TITLE>Tabel dengan ROWSPAN dan COLSPAN
baris 1, kolom 1
baris 2, kolom 1
baris 1, kolom 2
baris 2, kolom 2
baris 3, kolom 1
baris 3, kolom 2
24
Pewarnaan pada tabel digunakan attribut BGCOLOR untuk latar belakang, sedangkan pewarnaan pada border menggunakan attribut BORDERCOLOR. Contoh9d.html <TITLE>Tabel dengan ROWSPAN dan COLSPAN
25
10. Form dan Input Tag attribut METHOD memiliki dua nilai yaitu POST dan GET. Metode GET mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL (Uniform Resource Locator) yang ditunjuk. Metode Post mengirimkan datanya secara terpisah. Jika datamasukan banyak, disarankan menggunakan metode POST. Attribut ACTION berisi URL dari program yang dipanggil oleh form tersebut.
b. Texbox Adalah input untuk memasukkan data Contoh10b.html <TITLE>Form Input dengan Text box 26
Rancangan awal BUKU TAMU
Nama
:
Alamat
:
Sekolah
:
c. Cek Box Adalah input yang menampilkan pilihan-pilihan Contoh10c.html
27
<TITLE>Form Input dengan Check box
Pilih yang Anda suka
Daftar Jurusan
Teknik Elektro Pertanian Kedokteran Teknik Informatika
d. Radio Adalah input pilihan. Berbeda dengan cekbox radio hanya diwajibkan memilih satu pilihan setiap group optionnya. Contoh10d.html <TITLE>Form Input dengan Radio box
28
Pilih salah satu
Usia Anda
< Tahun 15-19 Tahun 19-25 Tahun 25-35 Tahun > 35 Tahun
15
e. Submit dan Reset Dalam form sangat penting dan harus ada tombol Submit dan Reset. Tombol ini berfungsi untuk mengirimkan data yang sudah diinput dari elemen-elemen form. Syntaxnya adalah : Contoh10e.html <TITLE>BUKU TAMU
