BAB 1: Tag-tag pada HTML

BAB2: Breakrows berguna untuk memberi baris baru/pindah baris:

• ini adalah contoh kode Breakrows:

• Dan hasil dari kode Breakrows adalah:

Paragraf berguna untuk membuat sebuah paragraf:

• ini adalah contoh kode paragraf 1 dari HTML:

• Dan hasil dari kode paragraf1 adalah:

ini adalah contoh kode paragraf2 yang menggunakan align center pada HTML:

dan ini adalah hasil paragraf 2 yang menggunakan align center:

Center berguna untuk perataan tengah terhadap teks atau gambar:

ini adalah contoh kode center pada HTML:

dan ini adalah hasil dari kode center pada HTML:

Heading berguna untuk menunjukkan awal dari suatu header atau judul dari dokumen HTML:

ini adalah contoh kode Heading pada HTML:

dan hasil dari kode heading adalah:

Garis berguna unruk membuat garis horizontal:

ini adalah contoh kode garis pada HTML:

dan hasil dari kode garis pada HTML:

Devisi berguna untuk mendefinisikan sebuah section dalam HTML:

ini adalah contoh kode devisi pada HTML:

dan hasil dari kode devisinya:

latihan 1

hasil dari lathan 1 dan 2:

BAB 3 :Teks fisik dan logis berguna untuk mengatur bentuk teks fisik dan logis:

ini adalah contoh kode teks fisik:

dan hasil teks fisiknya:

ini adalah contooh kode teks logis:

dan hasil dari kode teks logis pada HTML:

Tag pre berguna untuk membuat teks dgn ukuran yg sama dan ini adalah contoh dari kode tag pre:

dan hasil dari kode tag pre adalah:

blockquote beguna untuk mendefinisikan sebuah kutipan panjang dan ini adalah contoh kodenya:

dan hasil dari kode tersebut adalah:

acronym berguna untuk mendefinisikan akronim dan ini adalah contoh kode acronym:

dan hasil dari kode tersebut adalah :

font berguna untuk mengatur jenis,ukuran,dan warna dan ini adlah contoh kode font:

dan hasil dari kode tersebut adalah:

ini adalah contoh kode bgcolor:

ini adlah hasil dari kode bgcolor:

Tag basefont berguna untuk menentukan default font dan ini adalah contooh kode tag basefont:

dan ini adalah hasil kode tag basefont:

charakter berguna untuk menampilkan karakter-karakter khusus dan ini adalah contoh kode charakter:

dan ini adalah hasil dari kode charakter:

latihan soal: ini adalah contoh kode latihan soal:

dan ini adlah hasil dari latihan soalnya:

BAB 4:bullet and numbering merupakan simbol khusus yang diletakkan di depan suatu teks. dan ini adlah contoh kode bullet pada HTML:

dan hasil dari kode tersebut:

ini adlah contoh kode bullet yg menggunakan tag li:

dan hasil dari kode tersebut adlah:

ini adlah contoh kode numbering yg menggunakan tag ol:

dan hasil dari kode tersebut adalah:

daftar definisi menyediakan tampilan dengan format mirip kamus, dan ini adalah contoh kode definisi:

dan hasil dari kode di atas adalah:

latihan soal: ini adalah contoh kode latihan soalnya:

dan hasil dari kode latihan soal tersebut adlah:

BAB 5:gambar pada kode HTML digunakan untuk memperbagus tampilan dokumen HTML.ini adalah contoh kodenya:

dan hasil dari kode tersebut adalah:

background pada kode HTML berguna untuk memperbagus latar belakang pada tampilan dokumen HTML,dan ini adalah contoh kodenya:

hasil dari kode tersebut adalah:

peletakan teks pada HTML digunakan untuk meletakkan posisi teks pada gambar,dan ini adlah contoh kodenya:

hasil dari kode tersebut adalah:

tag alternatif,ini adalah contoh kodenya:

dan hasil dari kode tersebut adlah:

Atribut ukuran gambar pada HTML brguna untuk membuat perubahan ukuran gambar sesuai dgn area yg kita sediakan,dan ini adlah contoh kodenya:

•         dan hasil dari kode tersebut adalah:

Atribut ruang gambar digunakan untuk mengatur jarak gambar terhadap teks,dan ini adalah contoh kodenya:

•        dan ini adalah hasil dari kode tersebut:

Latihan soal: contoh kode latihan soal

•        dan hasil dari kode tersebut adalah:

•        ini latihan ke2:

•        ini adalah hasilnya:

BAB 6:tabel

ini adalah contoh kode tabel:

dan hasil dari kode tersebut adalah:

contoh kode tabel 2:

dan hasil dari kode tersebut:

ini adalah contoh kode judul tabel:

dan ini hasil dari kode tersebut:

ini adalah contoh kode warna tabel:

dan hasil dari kode tersebut adalah:

penggabungan sel pada tabel menggunakan rowspan,dan ini adalah contoh dari kode rowspan:

ini adalah hasil dari kode tersebut:

yang kedua adalah colspan,dan ini adalah contoh kodenya:

ini adalah hasil dari kode tersebut:

alignment TH pada tabel,ini adalah contoh kode align TH pada tabel:

ini adalah hasil dari kode tersebut:

yang kedua adalah contoh kode dari align TD pada tabel:

ini adalah hasil dari kode tersebut:

pengaturan sel HEIGHT pada tabel,ini adalah contoh kode sel HEIGHT pada tabel:

dan ini adalah hasil kode tersebut:

yang kedua adalah contoh kode sel HEIGHT pada tag tr,dan ini adalah contoh kodenya:

dan hasil dari kode tersebut adalah:

pengaturan sel width pada tabel,dan ini adalah contoh kodenya:

dan hasil dari kode tersebut adalah:

selanjutnya sel WIDTH pada tag tr,dan ini adalah contoh kodenya:

dan hasil dari kode tersebut:

jarak tabel mengatur sel jarak pada tabel,ini adalah contoh kodenya:

ini adalah hasil dari kode tersebut:

tabel dan gambar,ini adalah contoh kode tabel dan gambar:

ini adalah hasil dari kode tersebut:

ini adalah contoh kode latihan-latihan:

ini adalah hasil dari kode tersebut:

contoh kode latihan 3 dan 4:

ini adalah hasil dari kode latihan 3 dan 4:

BAB7:membuat hyperlink:

Addres:Tag-tag pada HTML:
kembali ke menu utama
profil:
profil
utama:
silakan klik pilihan anda:
<a href="http://www.blogger.com/tabelgambar.html">tabel dan gambar</a>
<a href="http://www.blogger.com/aligntableTH.html">align tabel TH</a>
<a href="http://www.blogger.com/jarak%20table.html">jarak pada tabel</a>

weblink yang lain:
komik msnga
macam-macam web
latihan soal cpns
contoh kode warna link:




hasilnya:




bookmark:
Bookmark.html 
<html> 
<head> 
<title>Membuat Link</title> 
<body> 
<center>
 
<h1>
 Realita Kehidupan </h1>
<br><br> 
<b>Daftar Isi :</b><br> 
<a href =”#bag1”>Bagian Pertama</a> 
<a href =”#bag2”> Bagian Kedua</a> 
<a href =”#bag3”> Bagian ketiga</a> 
<a href =”#penutup”> Baagian Penutup</a> 
<hr>
<hr>
 
<a name=”#bag1”> 
<h3>
Bagia Pertama</h3>
Bagian ini merupakan isi cerita pada bagian pertama …. 
……… <br> 
……… <br> 
……… <br> 
……… <br> 
……… <br>
<hr>
 
<a name=”#bag2”> 
<h3>
Bagian Kedua</h3>
Bagian ini merupakan isi cerita pada bagian kedua …. 
……… <br> 
……… <br> 
……… <br> 
……… <br> 
……… <br> 
<hr>
 
<a name=”#bag3”> 
<h3>
Bagian Ketiga</h3>
Bagian ini merupakan isi cerita pada bagian ketiga …. 
……… <br> 
……… <br> 
……… <br> 
……… <br> 
……… <br> 
<hr>
 
<a name=”#penutup”> 
<h3>
Bagian Penutup</h3>
Bagian ini merupakan isi cerita pada bagian Penutup …. 
……… <br> 
……… <br> 
……… <br> 
……… <br> 
……… <br> 
<hr>
 
</center>
</body> 
<html>

Membuka Jendela Baru,ini adalah contoh kodenya :

latihan soal:

Apakah Yang dimaksud dengan Hyperlink ?

n perpindahan halaman sesuai dengan yang kita inginkan.

Sebutkan jenis-jenis hyperlink, dan jelaskan cara penulisannya kedalam kode HTML ?

Simpan Program 1, berikut dengan nama file “alamat.html”

Alamat.html <html> <head><title>Membuat Link</title></head> <body> <pre> Address : Green Kost Production Jl. Jambu 1 No.12 Gedung Meneng Bandar Lampung 35145 <a href="utama.html">kembali ke menu utama</a> </pre> </body> <html>

Link ke Situs Web Lain:

<html> <head><title>Membuat Link</title></head> <body> <pre> ……. Alamat Website Pilihan : ……. Silahkan Klik Pilihan Anda : <a href =”www.8tanda.com”>Situs Astrologi</a> <a href =”www.sikuncung.com”>Galery Anak</a> <a href =”www.kezia.web.id”>Koleksi Dongeng Untuk Anak</a> </pre> </body> <html>

Warna Hyperlink:

<html> <head> <title>Membuat warna Link</title></head> <body link=”green”> <pre> ……. Alamat Website Pilihan : ……. Silahkan Klik Pilihan Anda : <a href =”www.8tanda.com”>Situs Astrologi</a> <a href =”www.sikuncung.com”>Galery Anak</a> <a href =”www.kezia.web.id”>Koleksi Dongeng Untuk Anak</a> </pre> </body> <html> Jelaskan perbedaan LINK, ALINK dan VLINK ?

ALINK : Berguna untuk menentukan link aktif, yaitu link yang telah diklik pemakai, tetapi halaman belum selesai dibuka.

VLINK : Berguna untuk menentuka warna link yang halaman web Terkaitnya atau yang dilink telah dikunjungi.

Buatlah link dengan gambar seperti yang terlihat pada tampilam berikut ini.

kode latihannya

hasil dari kode latihannya:

BAB 8 FRAME PADA HALAMAN WEB

contoh kode framesetcols:

hasil dari kode framesetcols:

contoh kode framesetrows:

hasil dari kode framesetrows:

contoh kode border pada frame:

hasil dari kode border pada frame:

contoh kode scrolling pada frame:

hasil dari kode scrolling pada frame:

contoh kode penggunaan noresize pada frame:

hasil dari kode penggunaan noresize pada frame:

contoh kode penggabungan frame:

hasil dari kode penggabungan frame:

BAB 9 FORMULIR PADA HALAMAN WEB

latihan:

Sebutkan dan jelaskan fungsinya dari komponen-komponen yang ada pada formulir:
Dasar Penggunaan Formulir

ACTION digunakan untuk menentukan tujuan apabila sebuah tombol pada formulir dijalankan

METHOD digunakan untuk menentukan teknis penyampaian informasi setelah tombol dijalankan untuk mengakses atau mengirim sebuah informasi. Umumnya method terdiri dari dua jenis yaitu get dan post. Bila menggunakan get berarti informasi yang ditampilkan akan diperoleh pada halaman itu sendiri dalam hal ini url pada action.

Tag Input Pada Formulir

Atribut Catatan NAME Untuk menentukan nama data SIZE Menentukan ukuran kotak masukan untuk teks dan password MAXLENGTH Menentukan jumlah teks yang dapat dimasukan pada area tertentu misal pada input teks dan password VALUE Memberikan nilai awal untuk kotak masukan sebelum mulai diinputkan teks baru CHECKED Diberikan supaya kotak cek dalam keadaan terpilih. TYPE Menentukan tipe kotak masukan, seperti password, text, submit, reset dan lain-lain

ini adalah contoh kode latihsn formulir pada halaman web:

hasil dari kode formulir pada halaman web: