Panduan Pemrograman HTML - Boby Candra

Panduan Mudah Singkat Lengkap Pemrograman HTML 2010

BUKU Panduan
Pemrograman HTML
www.PemburuGratis.Co.Cc

Oleh :

Boby Candra(CS)
www.JasaBikinSitus.Co.Cc
www.RahasiaBikinWebGratis.Co.Cc
email : bobycandra@programmer.net

Copyright © 2010 Boby CS |Hak cipta dilindungi undang-undang 1


PERINGATAN

Hak Cipta Dilindungi
Undang-Undang

Anda BOLEH Menyebarkan E-Book Ini
GRATIS dengan Cara Apapun
Asal Tidak Melanggar Aturan

Dilarang Merubah/Menyalin Isi E-Book Ini
Tanpa Seijin Penulis

Terima Kasih,

Boby CS



Seri Penuntun Praktis

Panduan Pintar Cepat & MUdah
Pemrograman HTML

Oleh

Boby CS

www.JasaBikinSitus.Co.Cc
www.RahasiaBikinVideo.Co.Cc

Sanksi Pelanggaran Pasal 22 :
Undang-undang Nomor 19 Tahun 2002
Tentang Hak Cipta

1. Barangsiapa dengan sengaja melanggar dan tanpa hak melakukan perbuatan
sebagaimana dimaksud dalam pasal 2 ayat (1) atau Pasal 49 Ayat (1) dan Ayat
(2) dipidana masing-masing paling singkat 1 (satu) bulan dan/atau denda paling
sedikit Rp. 1.000.000,00 (satu juta rupiah) atau pidana penjara paling lama 7
(tujuh) tahun dan/atau denda paling banyak Rp 5.000.000.000,00 (lima milyar
rupiah)

2. Barang siapa dengan sengaja menyiarkan,memamerkan,mengedarkan atau
menjual kepada umum suatu ciptaan atau barang hasil pelanggaran hak cipta
atau hak terkait sebagai dimaksud pada ayat (1) dipidana dengan pidana
penjara paling lama 5 (lima) tahun dan/ denda paling banyak Rp
500.000.000,00 (lima ratus juta rupiah)



Sepatah Kata

Assalamualaikum wr wb..
Salam sejahtera untuk kita semua…
Alhamdullilh senantiasa terucap di bibir ini atas Rahmat dan Hidayahnya-Nya
sehingga tutorial ini dapat hadir dan terselesaikan sesuai rencana.Begitu
banyak hambatan yang saya temui selama membuat tutorial ini,namun
berkat ketekatan dan semangat yang tak pernah pudar.Akhirnya tutorial
“Panduan Pintar Pemrograman HTML” ini dapat juga rampung tepat waktu.

Tak lupa saya mengucapkan terima kasih yang tak terhingga kepada kedua
orang tua saya yang tak pernah henti mendoakan kebaikan untuk anaknya.
Tak lupa juga saya mengucapkan banyak terima kasih kepada para guru
yang telah membantu saya dalam berbagai hal dan memberikan banyak
pengalaman dan pengetahuan.Terima kasih juga saya haturkan kepada
sahabat-sahabat yang telah mendukung dan memberikan support yang
besar demi terselesainya tutorial saya ini.

Yang tak kalah pentingnya,ijinkan saya pribadi mengucapkan banyak
terima kasih kepada para pembaca sekalian yang telah mau mendownload
dan mempelajari buku tutorial “Panduan Pintar Pemrograman HTML”. Saya
merasa usaha dan kerja keras yang saya lakukan ini tidak sia-sia dan mampu
membantu para pembaca.Karena E-book saya ini tidak ada artinya tanpa
para pembaca sekalian.

Akhirnya semoga E-book ini dapat membantu dan bernilai lebih untuk
membantu para pembaca sekalian.Besar harapan agar e-book ini kelak
dapat bersaing dengan e-book lainya diluar sana.
Assalamualaikum wr wb..

Banyuwangi,1 Oktober 2010


Bab 1 Tag Utama HTML

Tag utama HTML adalah tag yang digunakan untuk memanipulasi dokumen HTML.
Misalnya untuk mengatur paragraf,ganti baris dan lain-lain. Tag utama HTML terdiri
dari :

1.1 Heading
1.2 Paragraf
1.3 Font
1.4 Break Line
1.5 Horizontal Line
1.6 Marquee

1.1 Heading

Tag heading adalah tag yang digunakan untuk membuat judul dari sebuah isi
dokumen HTML. Tag heading memiliki 6 buah bilangan terdiri dari 1,2,3,4,5 dan 6.
Masing-masing bilangan yang terdapat pada tag heading berfungsi untuk mewakili
ukuran dari besarnya tag heading. Bilangan pertama merupakan ukuran terbesar dari
tag heading,sedangkan bilangan terakhir pada tag heading merupakan ukuran terkecil.
Lebih lengkapnya sebagai berikut…

<hn [properti]>………………………………………………......</hn [properti]>

Keterangan :
1. n adalah bilangan yang terdiri dari 1 sampai dengan 6.
2. properti adalah kemampuan tambahan yang dimiliki tag heading.

Properti Keterangan
Align Pengaturan letak heading

Contoh 1 : Penggunaan Tag Heading dengan Notepad

<html>
<head>
<title>Penggunaan Heading 1 Rata Kiri - Dengan NotePad</title>
</head>
<body>
<h1 align="left">Penggunaan Heading 1 Rata
Kiri</h1>
Kiri</h2>
Kiri</h3>
Kiri</h4>
Kiri</h5>
Kiri</h6>
</body>
</html>
Simpan dengan nama Contoh 1.1.htm,lalu jalankan pada web browser seperti
gambar berikut :

Contoh Teks
denga Rata
Kiri / Left

<html>
<head>
<title>Penggunaan Heading 1 Rata Tengah - Dengan NotePad</title>
</head>
<body>
<h1 align="center">Penggunaan Heading 1 Rata
Tengah</h1>
Tengah</h2>
Tengah</h3>
Tengah</h4>
Tengah</h5>
Tengah</h6>
</body>
</html>

gambar berikut :

Contoh Teks
denga Rata
Tengah / Center

<html>
<head>
<title>Penggunaan Heading 1 Rata Kanan - Dengan NotePad</title>
</head>
<body>
<h1 align="right">Penggunaan Heading 1 Rata
Kanan</h1>
Kanan</h2>
Kanan</h3>
Kanan</h4>
kanan</h5>
kanan</h6>
</body>
</html>

gambar berikut :

Contoh Teks
denga Rata
Kanan / Right

<html>
<head>
<title>Penggunaan Heading 1 Rata Kanan - Kiri - Dengan NotePad</title>
</head>
<body>
<h1 align="justify">Penggunaan Heading 1 Rata
Kanan - Kiri</h1>
</body>
</html>

gambar berikut :

Contoh Teks denga
Rata Kanan-Kiri /
Justify

1.2 Paragraf

Informasi yang ditampilkan di sebuah halaman web sangatlah bervariasi dan
beragam dengan mengikuti kaidah-kaidah penulisan yang benar,diantaranya adalah
penggunaan paragraf.
Berikut sintak yang digunakan untuk penulisan paragraf dalam dokumen berbasis
HTML :

 ………………………………………………......

Keterangan :
1. Properti adalah kemampuan yang ditambahkan pada tag paragraf.

Properti Keterangan
Align Pengaturan letak paragraf. Nilainya adalah left <rata kiri>;
center(rata tengah);right(rata kanan) dan Justify (rata kanan-kiri)

Contoh 1 : Pengunaan Tag Paragraf dengan Notepad (Left/Rata Kiri)

<html>
<head>
<title>Penggunaan Tag Paragraf dengan Notepad Rata Kiri</title>
</head>
<body>
<h1 align="left">Resensi Ketika Cinta Bertasbih 2</h1>
Ini merupakan novel bergenre
romance,sekaligus novel dakwah yang mencerdaskan,memotivasi,dan
mendidik.Novel
ini seolah menjadi setitik cahaya ditengah rasa pesimisme anak muda negeri ini
untuk teguh memegang prinsip-prinsip islami dalam kehidupan mereka.Tampaknya
inilah alasan utama yang dipilih novelis fenomenal Habiburrahman El
Shirazy.Sarjana jebolan Al Azhar University,Cairo ini lebih mengedepankan
aspek
keagamaan.Dengan sentuhan kata-kata lembut dan memikat,penulis mengajak kita
semua untuk banyak merenung dan kembali melihat betapa indahnya hidup dalam
naungan Al-Qur’an.
</body>
</html>
gambar berikut :

Contoh 2 : Pengunaan Tag Paragraf dengan Notepad (Tengah/center)

<html>
<head>
<title>Penggunaan Tag Paragraf dengan Notepad Rata Tengah</title>
</head>
<body>
<h1 align="center">Resensi Ketika Cinta Bertasbih 2</h1>
Ini merupakan novel bergenre
mendidik.Novel
aspek
</body>
</html>
gambar berikut :

Contoh 2 : Pengunaan Tag Paragraf dengan Notepad (Rata Kanan/Right)

<html>
<head>
<title>Penggunaan Tag Paragraf dengan Notepad Rata Kanan</title>
</head>
<body>
<h1 align="right">Resensi Ketika Cinta Bertasbih 2</h1>
Ini merupakan novel bergenre
mendidik.Novel
aspek
</body>
</html>

gambar berikut :

Contoh 2 : Pengunaan Tag Paragraf dengan Notepad (Rata Kanan – Kiri /
Justify)

<html>
<head>
<title>Penggunaan Tag Paragraf dengan Notepad Rata Kanan - Kiri</title>
</head>
<body>
<h1 align="justify">Resensi Ketika Cinta Bertasbih 2</h1>
Ini merupakan novel bergenre
mendidik.Novel
aspek
</body>
</html>

Simpan dengan nama Contoh 1.8.htm ,lalu jalankan pada web browser seperti
gambar berikut :

1.3 Font

Tag font digunakan untuk mengatur bentuk dan tampilaqn suatu tulisan dihalaman
HTML. Sintaknya sebagai berikut :

…………………………………………….

Keterangan :
1. Properti adalah kemampuan yang dimiliki pada tag font.

Properti Keterangan
Face Bentuk dan nama huruf
Size Ukuran Font
Color Warna huruf

Contoh 1 : Pengunaan Tag Font dengan Notepad

<html>
<head>
<title>Penggunaan Tag Font dengan Notepad</title>
</head>
<body>
<h1 align="justify">Resensi Ketika Cinta Bertasbih 2</h1>
Ini
merupakan novel bergenre
mendidik.
Novel
untuk teguh memegang prinsip-prinsip islami dalam kehidupan mereka.

Tampaknya
aspek
keagamaan.

Dengan sentuhan kata-kata
lembut dan memikat,penulis mengajak kita
naungan Al-Qur’an.
</body>
</html>


gambar berikut :

Note : Perhatikan perubahan setiap kalimat


1.4 Break Line

Untuk memotong kalimat dalam suatu paragraf dalam pemrograman HTML maka di
perlukan perintah br (Break Line). Sintaknya sebagai berikut :

…….kalimat……. …….kalimat……….. 

Contoh 1 : Pengunaan Tag Font dengan Notepad

<html>
<head>
<title>Contoh Penggunaan Tag Break Line</title>
</head>
<body>
<h1>Tari Golek</h1>
Komposisi tari tunggal
puteri gaya Yogyakarta yang lazim
ditarikan oleh seorang gadis remaja. Tari ini bersumber pada tari klana Alus
yang mulai berkembang sejak akhir abad ke 19. Golek menggambarkan seorang
gadis
remaja yang sedang suka bersolek seperti berbedak,
mengenakan hiasan ,berdandan,
berkaca, dan sebagainya. Di Yogyakarta dahulu tari golek ditarikan
oleh seorang
pemuda remaja berpawakan kecil dan berparas cantik.

</body>
</html>

gambar berikut :

Teks yg
sudah di
Break Line

1.5 Horizontal Line

Horizontal line adalah suatu garis yang memisahkan antara paragraph atau kalimat
satu dengan kalimat yang lain.Sintaknya sebgai berikut:

<hr [properties]>
Keterangan:
1. Properti adalah kemampuan yang dimiliki pada tag horizontal line.

Properti Keterangan
Align Letak Horizontal line. Nilainya ada left,center,right dan justify
Size Ukuran ketebalan size. Default atau normalnya adalah 2
Width Lebar horizontal line. Satuannya dalam persen

Contoh 1 : Pengunaan Tag Horizontal Line dengan Notepad

<html>
<head>
<title>Penggunaan Tag Horizontal Line Pada Notepad</title>
</head>
<body>
<h1 align="left">Resensi Ketika Cinta Bertasbih 2 By Boby CS</h1>
mendidik.Novel
aspek
naungan Al-Qur’an.  <hr size="6" color="#0000FF"
width="80%">Novel ini dibuka
dengan pemaparan keindahan suasana dini hari di pesantren Darul Qur’an.Juga
kehadiran seorang gadis jelita yang khusyuk beribadah.Seorang mahasiswi jebolan Al
Azhar,University ialah Anna Althafunnisa.Seorang putri dari kiai lutfi,pemilik
pondok pesantren Darul Qur’an.Kisah berlanjut dengan pemaparan suasana
kegundahan hati seorang master lulusan terbaik pula dari Universitas tertua di
dunia itu. Furqan.Tapi ia juga harus rela menyandang predikat sebagai pengidap
HIV 
</html>


gambar berikut :


1.6 Marquee

Marquee adalah sebuah teks berjalan pada dokumen HTML. Sintaknya sebagai
berikut :

<marquee [property] ……..Isi/text Marquee…….</marquee>

Keterangan ;

1. Properti adalah kemampuan yang dimiliki pada tag marquee.

Properti Keterangan
Behavior Cara untuk menjalankan teks. Nilainya adalah scroll atau
mengulang searah teks,slide ataumengulang searah teks dan
alternate teks berjalan bulak-balikl.
Direction Arah gerak jalan
Width Lebar dari marquee. Nilainya percent % atau pixels
Continously Pengulangan teks secara terus menerus.Nilainya adalah loop
sebanyak n kali . Apabila anda menginginkan marquee berjalan
secara terus menerus,maka properti ini tidak perlu dicantumkan.
Karena secara default properti continously akan mengulang
secara otomatis.
Bgcolor Warna latar marquee. Nilainya bisa anda cantumkan tanpa harus
menuliskan kode warna apabila anda tidak hafal.Anda bisa
melihat tabel kode warna.
Style Kemampuan tambahan

Contoh 1 : Pengunaan Tag Marquee dengan Notepad ( berjalan ke kiri )

<html>
<head>
<title>Penggunaan Teks Berjalan / Marquee pada Notepad</title>
</head>
<body>
<h2><marquee style="font-size: 18pt">Tutorial Gratis
dari Boby CS -Teks Ini Akan
Berjalan Ke Kiri</marquee></h2>
</body>
</html>

gambar berikut :


Note : Perhatikan Arah gerah Teks Berjalan….


Contoh 2 : Pengunaan Tag Marquee dengan Notepad ( berjalan ke kanan )

<html>
<head>
</head>
<body>
<h2>
<marquee style="font-size: 18pt" direction="right">Tutorial Gratis dari Boby CS -
Teks Ini Akan
Berjalan Ke Kanan</marquee></h2>
</body>
</html>
gambar berikut :

Contoh 3 : Pengunaan Tag Marquee dengan Notepad ( Behavior Slide )

<html>
<head>
</head>
<body>
<marquee style="font-size: 18pt; font-family:Tahoma; color:#0000FF"
direction="right" behavior="slide">Tutorial Gratis dari Boby CS -Teks dengan
Behavior Slide</marquee></h2>
</body>
</html>
gambar berikut :

Untuk arah gerak teks
(direction) bisa anda
tentukan sendiri. Bisa ke
kiri atau kekanan

Contoh 4 : Pengunaan Tag Marquee dengan Notepad ( behavior Alternate )

<html>
<head>
</head>
<body>
<marquee style="font-size: 18pt; font-family:Harlow Solid Italic; color:#008000"
behavior="alternate">Tutorial Gratis dari Boby CS -Teks dengan Behavior
Alternate</marquee></h2>
</body>
</html>

gambar berikut :

Teks dengan efek
behavior Alternate

Contoh 5 : Pengunaan Tag Marquee dengan Notepad ( behavior Alternate )

<html>
<head>
</head>
<body>
<marquee style="font-size: 18pt; font-family:serif; color:#FF0000"
behavior="alternate" bgcolor="#00FFFF">Tutorial Gratis dari Boby CS -Teks dengan
Background Color</marquee></h2>
</body>
</html>

gambar berikut :

Ini merupakan
background warna


Bab 2 Format Teks
Untuk membuat sebuah dokumen HTML agar tampilannya menarik,terutama untuk
menonjolkan bentuk atau tampilan teks agar berbeda dengan teks yang lainnya,maka
dalam sebuah dokumen HTML perlu dibuat format teks. Ada 3 kelompok besar dalam
pemformatan teks pada dokumen HTML. Diantaranya adalah sebagai berikut :

2.1 Format Text
2.2 Text Efek
2.3 Citation dan Definition

2.1 Format Text

2.1.1 Cetak Tebal / bold
2.1.2 Cetak Miring
2.1.3 Garis Bawah
2.1.4 Mengecilkan Huruf
2.1.5 Membesarkan huruf
2.1.6 Teks yang ditebalkan / strong
2.1.7 Penekanan Teks / Emphasize
2.1.8 Mencoret Teks / Strike
2.1.9 Subsript dan Superscript

2.2 Tekt Efek

2.2.1 Variable
2.2.2 Computer - Code
2.2.3 Keyboard

2.3 Citation,Quotation dan Definition

2.3.1 Citation
2.3.2 Definition


2.1.1 Cetak Tebal / bold

……

Contoh 1 : Pengunaan Tag Cetak Tebal / Bold

<html>
<head>
<title>New Page 1</title>
</head>
<body>
<h1 align="left">Resensi Ketika Cinta Bertasbih 2 by Boby CS</h1>
Ini merupakan novel bergenre
mendidik.Novel
inilah alasan utama yang dipilih novelis fenomenal Habiburrahman El
Shirazy.
</body>
</html>
gambar berikut :

2.1.2 Cetak Miring

…………

Contoh 2 : Pengunaan Tag Cetak Miring

<html>
<head>
<title>Contoh Format Text dengan Notepad</title>
</head>
<body>
romance,sekaligus novel dakwah yang mencerdaskan,memotivasi,dan
mendidik.Novel
inilah alasan utama yang dipilih novelis fenomenal Habiburrahman El
Shirazy.
</body>
</html>

gambar berikut :

2.1.3 Garis Bawah

…………………………….

Contoh 3 : Pengunaan Tag Cetak Garis Bawah

<html>
<head>
</head>
<body>
romance,sekaligus novel dakwah yang mencerdaskan,memotivasi,dan
mendidik.Novel
inilah alasan utama yang dipilih novelis fenomenal Habiburrahman El
Shirazy.
</body>
</html>

gambar berikut :

2.1.4 Mengecilkan Huruf

,……………….
Contoh : Pengunaan Tag Mengecilkan Huruf / small

<html>
<head>
</head>
<body>
romance,sekaligus novel dakwah yang mencerdaskan,memotivasi,dan
mendidik.Novel
Shirazy.
</body>
</html>

gambar berikut :

Font menjadi lebih
kecil

2.1.5 Membesarkan huruf

<big> ………teks……………</big>

Contoh : Pengunaan Tag Membesarkan Huruf dengan Notepad

<html>
<head>
<title>New Page 1</title>
</head>
<body>
<h1>Sistem Peredaran
Darah</h1>
<big>Sistem peredaran darah
manusia terdiri dari
darah,pembuluh darah,serta jantung.</big>
Darah manusia terdiri dari plasma darah dan
sel-sel darah yaitu <big>sel darah merah,sel darah putih dan keping darah</big>.
Didalam
sel darah merah terdapat pigmen protein pengikat oksigen dan karbon dioksida
yaitu hemoglobin.Sel darah putih terdiri dari leukosit granulosit dan leukosit
agranulosit.Trombosit berfungsi membekukan darah.Di dalam serum terdapat zat
antibodi.
Tutorial
Gratis by Boby CS Hak Cipta Dilindungi Undang-undang
</body>
</html>

gambar berikut :

2.1.6 Teks yang ditebalkan / strong

…………….….teks……………..……..

Contoh : Pengunaan Tag menebalkan teks dengan Notepad

<html>
<head>
<title>Sistem Peredaran Darah</title>
</head>
<body>
<h1>Sistem Peredaran Darah</h1>
Sistem
peredaran darah manusia terdiri dari
darah,pembuluh darah,serta jantung.
sel-sel darah yaitu <big>sel darah merah,sel darah putih dan keping darah</big>.
Didalam
Tutorial
Gratis by
Boby CS Hak Cipta Dilindungi Undang-undang
</body>
</html>
gambar berikut :

2.1.7 Penekanan Teks / Emphasize

…………….teks……………..

Contoh : Pengunaan Tag emphasize dengan Notepad

<html>
<head>
<title>Panduan Pemrograman HTML</title>
</head>
<body>
<h1 align="center">Sistem
peredaran darah manusia terdiri dari
darah,pembuluh darah,serta jantung.</h1>
sel-sel darah yaitu sel darah merah,sel darah putih dan keping darah.
Didalam
Tutorial
Gratis by
Boby CS Hak Cipta Dilindungi Undang-undang
</body>
</html>

gambar berikut :

2.1.8 Mencoret Teks / Strike

<strike>…………………….teks………………</strike>

Contoh : Pengunaan Tag Strike dengan Notepad

<html>
<head>
<title>Panduan Pemrograman HTML by Boby CS</title>
</head>
<body>
<h2 align="center">Daftar Harga E-book Boby CS Terbaru 2010 </h2>
<hr width="80%" size="3">
E-book Bisnis Modal Kecil Harga Lama Rp <strike>200.000</strike>,- Harga
Baru
Rp 130.000,-
E-book Kunci Sukses Bisnis Afiliasi Harga Lama Rp <strike>480.000</strike>,-
Harga Baru Rp 250.000,-
E-book Blog Bisnsi Internet Harga Lama Rp <strike>360.000</strike>,- Harga
Baru Rp 230.000,-
</body>
</html>

gambar berikut :

2.1.9 Subsript dan Superscript

Subscript : ………………..teks……………
Superscript : ………………..teks…………….

Contoh : Pengunaan Subscript & superscript dengan Notepad

<html>
<head>
</head>
<body>
<h2 align="center">Contoh Penerepan
Subscript & Superscript by Boby CS</h2>
<h2 align="center"> </h2>
1. 22 + 52
adalah 57
2. rumus kimia asam sulfat adalah
H2SO4
</body>
</html>

gambar berikut :

Contoh Superscript

Contoh Subscript

2.2.1 Variable

<var>…………………………….teks…………………………..</var>

Contoh : Pengunaan Variable dengan Notepad

<html>
<head>
</head>
<body>
<h2>
Perkembangan Dunia Internet by Boby
CS
</h2>
<var>Kemajuan
dunia maya atau internet dewasa ini mengalami peningkatan yang sangat pesat.
</var>
Ditandai dengan banyaknya para penyedia provider dan
para pemilik warnet. Diharapkan kedepannya masalah-masalah yang timbul dengan
adanya peningkatan dan kemajuan ini dapat ditanggulangi sedini mungkin
</body>
</html>

gambar berikut :

2.2.2 Computer - Code

<code>…………..teks……………..</code>

Contoh : Pengunaan Computer - code dengan Notepad

<html>
<head>
</head>
<body>
<h2 align="center">Sistem
Peredaran Darah Manusia</h2>
<code>Darah manusia terdiri dari
plasma darah dan
sel-sel darah yaitu sel darah merah,sel darah putih dan keping
darah.</code>
Didalam
antibodi.
</body>
</html>

gambar berikut :

2.2.3 Keyboard

<kbd>………………teks…………………….</kbd>

Contoh : Pengunaan keyboard dengan Notepad

<html>
<head>
</head>
<body>
<h2 align="center">
Sistem Peredaran Darah
Manusia</h2>
<kbd>Darah manusia terdiri dari plasma darah dan
sel-sel darah yaitu sel darah merah,sel darah putih dan keping darah.</kbd>
Didalam
antibodi


</body>
</html>
gambar berikut :

2.3.1 Citation

<cite>………………….teks………………….</cite>

Contoh : Pengunaan Citation dengan Notepad

<html>
<head>
</head>
<body>
<h2 align="center">Sistem Peredaran
Darah
Manusia</h2>
<cite>Darah manusia terdiri dari
plasma darah dan
sel-sel darah yaitu sel darah merah,sel darah putih dan keping darah.Didalam
antibodi</cite>

</body>
</html>

gambar berikut :

2.3.2 Definition

<dfn>……………………….teks…………………………..</dfn>

Contoh : Pengunaan Definition code dengan Notepad

<html>
<head>
</head>
<body>
<h2 align="center">Sistem Peredaran
Darah
Manusia</h2>

<dfn>Darah manusia terdiri dari plasma darah dan
sel-sel darah yaitu sel darah merah,sel darah putih dan keping darah.Didalam
antibodi</dfn><dfn>
</dfn>

</body>
</html>

gambar berikut :

Bab 3 Format Images
Images dalam sebuah dokumen HTML digunakan sebagai daya tarik sendiri untuk
menarik perhatian dan untuk menambah kualitas dokumen itu sendiri. Namun dengan
bertambahnya sebuah dokumen gambar maka akan bertambah pula ukuran
byte.Berikut cara tepat dan mudah menambahakan dan mengolah gambar pada
dokumen HTML.

3.1 Perataan Teks Pada Gambar
3.2 Ukuran Gambar
3.3 Teks Pada Gambar
3.4 Link Gambar
3.5 Image Pada Paragraf

<img src=”gambar/sumber gambar”>

3.1 Perataan Teks Pada Gambar

Contoh : Pengunaan Perataan Teks Pada Gambar dengan Notepad

<html>
<head>
</head>
<body>

<img border="0"
src="file:///D:/Stay_alive%20(Soft)/IMAGES/Album_foto/Jerry%20p/filter/ADEKK
U.jpg" width="147" height="110" align="left"> 

<img border="0"
U.jpg" width="147" height="110"> 
<img border="0"
U.jpg" width="147" height="110" align="right"> 
</body>
</html>

gambar berikut :

Perataan Tengah (center)

Perataan Kiri

Perataan Kanan

3.2 Ukuran Gambar

Contoh : Pengunaan Tag ukuran Gambar dengan Notepad

<html>
<head>
</head>
<body>

<img border="0"
U.jpg" width="164" height="122" align="left">
 

<img border="0"
 

<img border="0"
</body>
</html>

gambar berikut :

164 x 122

136 x 104

105 x 81

3.3 Teks Pada Gambar

<img src=”gambar/lokasi gambar” width=”…” height=”….” Alt=”….isi
teks….”>

Contoh : Pengunaan Teks Pada Gambar dengan Notepad

<html>
<head>
</head>
<body>

<img border="0"
src="file:///D:/Stay_alive%20(Soft)/IMAGES/Album_foto/Jerry%20p/filter/jeryy%20
baru_filtered.jpg" width="628" height="471" alt="Adek Pose Narsis">
</body>
</html>

gambar berikut :

Ini adalah teks yg
muncul pd gambar

3.4 Link Gambar

Contoh : Pengunaan Tag link Gambar dengan Notepad

<html>
<head>
</head>
<body>

<a target="_blank" href="http://www.rahasiabikinwebgratis.co.cc">
<img border="0" src="../../rahasia%20Bikin%20Web%20Gratis/images/e-
book%20banyak.jpg" width="460" height="350"></a>
</body>
</html>

gambar berikut :

Tanda ini bisa menunjukkan
bahwa gambar ini terdapat
link

3.5 Image Pada Paragraf

Contoh : Pengunaan Tag Image Paragraf dengan Notepad

<html>
<head>
</head>
<body>


<img border="0" src="file:///E:/rahasia%20Bikin%20Web%20Gratis/images/E-
book%20RahasiaBikinWebGratis.jpg" width="321" height="309"
align="left">Master
E-book "Rahasia Bikin Web Gratis" adalah sebuah
ebook tutorial
yang dibangun dan dikembangkan langsung oleh Boby CS. Situs resmi untuk dapat
mengunjunginya adaah di <a href="http://www.RahasiaBikinWebGratis.Co.CC">
www.RahasiaBikinWebGratis.Co.CC</a> . E-book ini dijual dengan harga yang
sangat
fantastis.Mengapa demikian..??? Sebab untuk dapat memiliki dan mempelajari
E-book ini anda tidak perlu untuk merogoh kocek sepersen pun. Sebab e-book
Master ini dijual gratis. Benar murah tapi tidak murahan...Kualitas dan gaya
bahasa tidak jauh kalah dengan e-book berbayar lainnya.Untuk itulah kami
sarankan anda untuk cepat mendownloadnya sekarang
juga...GRATIS...
</body>
</html>

gambar berikut :

Bab 4 Entitas HTML
Pada dasarnya setiap dokumen HTML/Web,dibangun dengan menggunakan
tag-tag,sehingga akan tampak sebuah dokumen yang menarik dan inovatif. Tetapi
apabila dokumen HTML akan dilengkapi dengan karakter tertentu yang bersifat
khusus,maka dokumen html harus dilengkapi dengan entitas karakter di dalam source
dalam sebuah dokumen HTML.
Entitas karekter dalam dokumen HTML bersifat case sensitive dan memiliki :
1. Ampersand atau tanda “&”
2. Nama Entitas / “#” dengan nomor entitas
3. Tanda “;” / semicolon.

Entitas karakter yang sering di gunakan :

Nama Nomor Hasil Keterangan
Entitas Entitas
© © © Copyright
® ® ® Registered Trademark
™ ™ Trademark
  ¡ Non-Breaking Space
& & & Ampersand
« « « Left-pointing double angle
» &#187 » Right-pointing double angle
" &#34 " Tanda kutip
< < < Lebih kecil
> &#61 > Lebih besar
× &3215 × Tanda Kali
&divide &#247 ÷ Tanda bagi

Contoh : Pengunaan Tag Entitas Karakter dengan Notepad

<html>
<head>
</head>
<body>

<marquee behavior="alternate" style="font-size: 20">Contoh Penggunaan
Entitas Karakter Dalam Dokumen HTML</marquee>
1.©

2.®

3. 

4.&

5.«

6.»

7."

8.<

9.>

10.×

11.&divide

12.™
</body>
</html>

gambar berikut :

Bab 5 Link HTML
Dokumen HTML merupakan sebuah dokumen yang dilengkapi dengan
kemampuan untuk dapat berpindah dari halaman yang satu denga halaman yang lain
atau melompat dari halaman satu ke halaman yang lainnya. Dengan memberikan
sebuah perintah dalam dokumen HTML.
Hyperlink dalam sebuah dokumen HTML menggunakan tag Anchor<a> dan
diakhiri </a>. Sintaknya adalah sebagai berikut :

<a href=”nama_dokumen yang di link” [atribut]>…teks/gambar…</a>

Dalam dokumen HTML,hyperlink secara garis besar dibagi menjadi 3 yang
terdiri atas :

5.1 Link Relatif
5.2 Link Absolut
Halaman 1

Halaman 2 Halaman 4

Halaman 5

Halaman 3

Halaman 6

5.1 Link Relatif

Link relatif adalah link yang digunakan untuk mengaitkan halaman web yang
satu dengan web yang lainnya di dalam satu komputer tanpa harus menuliskan secara
lenkap alamat situs internet.

<a href=”Lokasi contoh Latihan….. “>klik disini untuk melihat contoh…. </a>

Contoh : Pengunaan Tag Link Relatif dengan Notepad

<html>
<head>
<title>Panduan Pintar Pemrograman HTML by Boby CS</title>
</head>
<body>
<h1 align="center">Contoh Penggunaan Link Relatif</h1>
Halaman ini
akan mendemonstrasikan penerapan link relatif  pada dokumen
HTML

<a
href="file:///E:/Dataku/Panduan%20Mudah%20Singkat%20Lengkap%20HTML/Cont
oh%203.5.htm">
Klik disini untuk melihat Contoh 3.5</a>

<a
href="file:///E:/Dataku/Panduan%20Mudah%20Singkat%20Lengkap%20HTML/Cont
oh%204.1.htm">
Klik disini untuk melihat Contoh 4.1</a>
</body>
</html>

gambar berikut :


Jika di klik disini maka kita
akan menuju contoh 4.1


5.2 Link Absolut

Link absolut adalah link yang digunakan untuk mengaitkan halaman web yang satu
dengan yang lainnya di dalam satu internet.

<a href =http://www.RahasiaBikinWebGratis.Co.Cc>E-book Gratis Untuk
Anda</a>

Contoh : Penerapan Link Absolut dengan Notepad

<html>
<head>
</head>
<body>
<h1 align="center">Contoh Penerapan Link Absolut</h1>
Halaman ini
akan mendemonstrasikan penerapan link absolut  pada dokumen
HTML


<a title="http://www.RahasiaBikinWebGratis.Co.Cc"
href="http://www.rahasiabikinwebgratis.co.cc">
E-book Gratis Untuk Anda</a>
Tutorial Gratis by Boby
CS
</body>
</html>

gambar berikut :

JIka ada yang mengklik tulisan ini
maka,yang berangkutan akan
dibawa ke situs
www.rahasiabikinwebgratis.co.cc

Bab 6 List HTML
List adalah sebuah uraian yang terdiri dari item-item dari suatu daftar yang
dilengkapi dengan nomer baik nomer alfabetik ataupun numerik. Dalam dokumen
HTMl,terdapat beberapa bentuk daftar list,yaitu sebagai berikut :

6.1 List Bernomer
6.2 List Tanpa Nomer

List Bernomer VS List Tanpa Nomer

<ol [atribut] <ul [atribut]
<li>……isi list…..</li> <li>……isi list…..</li>
</ol> </ul>

6.1 List Bernomer

<ol [atribut]
<li>……isi list…..</li>
</ol>

Contoh : Penerapan List Bernomer dengan Notepad

<html>
<head>
</head>
<body>
<h3 align="center">Contoh Penggunaan
List
Bernomer Pada Dokumen HTML</h3>
<hr>
Daftar Search Engine Dalam Internet
<ol>
<li>google.com</li>
<li>Yahoo.com</li>
<li>MSn.com</li>
<li>Altavista.Com</li>
</ol>
Situs Penyedia E-book Gratis Siap
Pakai
<ol type="I">
<li>RahasiaBikinWebGratis.Co.Cc</li>
<li>RahasiaBikinVideo.Co.Cc</li>
<li>SEOLITE.Co.CC</li>
<li>PanduanBisnisMOdalKecil.Co.Cc</li>
</ol>
Situs Penyedia Blog Gratis Siap Pakai
<ol type="A">
<li>blogger.Com</li>
<li>wordpress.Com</li>
<li>Blogdetik.Com</li>
<li>Blog.Com</li>
</ol>
</body>
</html>


gambar berikut :


6.2 List Tanpa Nomer

<ul [atribut]
</ul>

Contoh : Penerapan List Tanpa nomer dengan Notepad

<html>
<head>
</head>
<body>
<h3 align="center">Contoh Penggunaan
List
Tanpa Nomer Pada Dokumen HTML</h3>
<hr>
Daftar Search Engine Dalam Internet
<ul>
<li>google.com</li>
<li>Yahoo.com</li>
<li>MSn.com</li>
<li>Altavista.Com</li>
</ul>
Situs Penyedia E-book Gratis Siap
Pakai
<ul type="circle">
<li>RahasiaBikinWebGratis.Co.Cc</li>
<li>RahasiaBikinVideo.Co.Cc</li>
<li>SEOLITE.Co.CC</li>
<li>PanduanBisnisMOdalKecil.Co.Cc</li>
</ul>
Situs Penyedia Blog Gratis Siap Pakai
<ul type="square">
<li>blogger.Com</li>
<li>wordpress.Com</li>
<li>Blogdetik.Com</li>
<li>Blog.Com</li>
</ul>
</body>
</html>


gambar berikut :


Bab 7 Membuat Tabel
Contoh : Penerapan Tabel dengan Notepad

<html>
<head>
</head>
<body>
<h2 align="center">Contoh
Penggunaan
Tabel HTML</h2>
 
<table border="1" width="72%">
<tr>
<td width="51" align="center">NO</td>
<td width="406" align="center">Nama
Siswa</td>
<td align="center">Nilai Rata-
Rata</td>
</tr>
<tr>
<td width="51" align="center">1</td>
<td width="406" align="center">Suhanda Mega Putra</td>
<td align="center">80</td>
</tr>
<tr>
<td width="406" align="center">Siti Munasaroh Mifta</td>
</tr>
<tr>
<td width="406" align="center">Adi Pranata Sudirja</td>
</tr>
</table>
</body>
</html>


gambar berikut :



Penutup
Akhirnya,selesailah kita pada penutup di Panduan Pintar Pemrograman HTML
ini.Tentunya anda tidak akan langsng menguasai buku panduan ini hanya
dengan sekali membaca.Tentu ini harus dilakukan secara berulang-ulang
dan pastinya dengan terus berlatih.Selain itu akan lebih baik bila anda juga
bisa mempraktekkan demo ini langsung secara online.

Selanjutnya besar harapan kami agar buku panduan ini dapat bermanfaat
dan dapat bernilai lebih untuk para pembaca sekalian.Semoga apa yang
kami buat dengan susah payah ini dapat membantu khusunya bagi mereka
yang ingin belajar cara membuat website gratis.

Alhamdulillah, buku panduan saya yang lainnya sudah selesai dan sudah
bisa di download saat ini juga (GRATIS). ,,,. Memperkenalkan,,..

“ Panduan Bikin Video dg Window Movie Marker “

Penulis : Boby CS

format : pdf
halaman : 50 hal
tahun Terbit : 2010
Situs resmi : www.RahasiaBikinWebGratis.Co.Cc



Siapa Lagi Yang mau Membuat Situs
GRATIS, Mudah &
Menghasilkan..???
10 Menit dari Sekarang
Tetapi Semuanya Ini Tidak Terjadi Dengan Mudah...
Sewaktu saya mulai membuat... saya
sangat kesulitan mencari panduan yang
lengkap dan jelas yang dapat
mengajarkan bagaimana caranya.

Nah setelah melakukan berbagai uji
coba, dan belajar sendiri dalam jangka
waktu yang PANJANG...Akhirnya saya
menemukan caranya, dan bisa membuat
banyak website...dan saya putuskan
untuk membuat panduan yang JELAS
bagaimana cara membuat web anda
sendiri dengan mudah dan cepat... 10
menit dari sekarang.

"CONTEK dan TIRU
Saja", Isi Didalam E-
book Panduan Ini. Saya
Menantang Anda Untuk Dapat Membuat website
pada hari ini juga "
Untuk membuat tampilan pada web anda maka yang
pertama di butuhkan adalah sebuah template
website.Template ini akan berfungsi juga sebagai penarik
para pengunjug untuk mendatangi situs web anda,mengapa
demikian..?? jika template anda menarik dan elegan,maka
akan terasa sebuah website yang professional.disini
template pun beraneka ragam,ada yang gratisan ada juga
yang berbayar.Bagi anda yang masih dalam kategori
pemula,maka saya sarankan anda untuk mendownload
template website gratisan di www.minisitegallery.com .

Mendapatkan sebuah domain .Banyak situs yang
menyediakan domain gratis,Dalam dunia bisnis online, nama
menjadi sangatlahpenting. Nama domain (domain name)



selain sebagai alamat anda dicyberspace, ia sekaligus juga
berperan sebagai brand bisnis atau diri Anda.Karena
pentingnya nama di dunia maya, maka sangat disarankan
untukmemilih domain name yang singkat, mudah dilafalkan
atau diucapkan, unik,mudah untuk diingat, dan mengandung
keyword yang anda target.Untuk memiliki nama domain,
anda bisa memilih yang berbayar atau gratis.Yang berbayar
tentu memiliki berbagai kelebihan, namun sebagai
pemulatidak ada salahnya memanfaatkan fasilitas domain
gratis seperti yang akanaya uraikan lebih lanjut melalui e-
book ini.Berikut adalah beberapa penyedia nama domain
gratis di internet.

http://www.domain.co.nr ,
http:// www.dot.tk ,
http://www.co.cc.

Dari ketiga penyedia nama domain tersebut, saya paling
menyukai “co.cc”karena adanya fasilitas DNS server
sehingga bisa di add-on ke web server yangkita gunakan.
Sedangkan “dot.tk” dan “co.nr” hanya berfungsi sebagai
redirecturl
Mendapatkan hosting.Web hosting adalah salah satu komponen
utama yang diperlukan agar file kitabisa diakses melalui web
browser. Web hosting atau web server adalah tempatuntuk
menyimpan file website yang kita buat agar bisa ditampilkan
di internet.Dari segi biaya, webhosting juga terbagi dua,
yakni ada hosting berbayar danada pula hosting
gratisan.Pada tutorial ini saya akan menguraikan bagaimana
mendapatkan fasilitaswebhosting gratisan semi professional
dengan berbagai fitur yang hampir samadengan yang
berbayar. Adapun fitur-fitur tersebut di antaranya :

 Kapasitas space yang cukup besar untuk menyimpan file
yakni sebesar243 MB.
 Bandwidth bulanan yang cukup besar yakni sebesar 20
GB lebih.
 Vista Control Panel yang mirip dengan cPanel pada
hosting berbayar
 Support PHP dan MySQL
 Automatic Script Installer yang mirip dengan Fantastico di
hostingberbayar
 Gratis unlimited e-mail7
 Fasilitas addon domain dan parked domain
 Support FTP transfer menggunakan software FTP Client.
 Dan berbagai fitur lainnya.

Dan Masih Banyak lagi. Silahkan Anda mencoba... GRATISS



E-book panduan " Panduan Bikin Blog Gratis "
format : pdf
jumlah halaman : 65 hal
penulis : Boby CS
edisi : Agustus 2010
peminat : 489 pengunjung
Ket : Panduan lengkap membuat blog wordpress / blogspot / website dinamis
dengan install wordpress terbaru , dilengkapi dengan screenshot yang sangat jelas.



E-book panduan " Tutorial Bikin Domain Gratis "
format : pdf
penulis : Boby CS
edisi : Agustus 2010
Ket : Tutotial lengkap mendapatkan dan mengklaim sebuah domain professional
gratis.



E-book panduan " Rahasia Bikin Video "
format : pdf
penulis : boby candra
edisi : ketiga di tahun 2010
Ket : Anda akan di ajak untuk mengedit,membuat dan menyisipkan berbagai efek
menarik ke dalam video anda



E-book panduan " Tutorial PhotoShop CS4 "
format : pdf
edisi : kedua di tahun 2010
Ket : Di e-book saya kali ini kita akan belajar bagaimana membuat foto terkesan
menarik dan professional sehingga layak untuk di perjualbelikan sebagai salah
satu lahan bisnis.



E-book panduan " Tutorial Efek PhotoScapes "
format : pdf
edisi : pertama di tahun 2010
Ket : Anda akan dibawa untuk mahir dalam hal melakukan menentukan background
dan latar belakang suatu gambar,sehingga akan nampak dinamis dan elegan (
mewah ).



Sepatah Kata Penulis

Terakhir saya mengucapkan terima kasih kepada para pembaca sekalian
yang sudi dan mau untuk mendownload dan membaca buku panduan
yang saya buat ini.

Mohon maaf jika anda ada yang kurang suka atas tulisan saya.Mungkin
disana sini banyak terdapat kesalahan dan kekurangan,hal itu semata-mata
memang diluar kesengajaan.Oleh sebab itulah saya mencoba untuk lebih
terbuka menerima kritik dan saran dari para pembaca sekalian.

Semoga kritik dan saran dari anda semua dapat bermanfaat khususnya bagi
saya dalam merancang dan membuat buku panduan selanjutnya.

Hormat Saya

Boby Candra
Data Kontak :

Website : www.RahasiaBikinWebGratis.Co.Cc
Blog : www.peluangbisnismodalkecil.co.cc
Email : BobyCandra@ConsuLtant.Com ( konsultasi 24 jam)
BobyCandra@Programmer.Net ( pemesanan gratis)
HP : 082 141 052 152 ( sms / mms 24 jam )


Panduan Pemrograman HTML - Boby Candra

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (9)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Panduan Pemrograman HTML - Boby Candra