panduan pemrograman html - boby candra

Panduan Mudah Singkat Lengkap Pemrograman HTML 2010

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

BBUUKKUU PPaanndduuaann PPeemmrrooggrraammaann HHTTMMLL

www.PemburuGratis.Co.Cc

Oleh :

Boby Candra(CS)

www.JasaBikinSitus.Co.Cc www.RahasiaBikinWebGratis.Co.Cc email : [email protected]



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"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Kiri</font></h1> <h2 align="left"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Kiri</font></h2> <h3 align="left"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Kiri</font></h3> <h4 align="left"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Kiri</font></h4> <h5 align="left"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Kiri</font></h5> <h6 align="left"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Kiri</font></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"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Tengah</font></h1> <h2 align="center"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Tengah</font></h2> <h3 align="center"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Tengah</font></h3> <h4 align="center"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Tengah</font></h4> <h5 align="center"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Tengah</font></h5> <h6 align="center"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Tengah</font></h6> </body> </html>

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

Contoh Teks denga Rata Tengah / Center




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


Contoh Teks denga Rata Kanan / Right




<html> <head> <title>Penggunaan Heading 1 Rata Kanan - Kiri - Dengan NotePad</title> </head> <body> <h1 align="justify"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Kanan - Kiri</font></h1> <h2 align="justify"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Kanan - Kiri</font></h2> <h3 align="justify"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Kanan - Kiri</font></h3> <h4 align="justify"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Kanan - Kiri</font></h4> <h5 align="justify"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Kanan - Kiri</font></h5> <h6 align="justify"><font face="Comic Sans MS">Penggunaan Heading 1 Rata Kanan - Kiri</font></h6> </body> </html>


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 : <p [properti]> ………………………………………………......</P> 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> <p align="left">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 <b>Al Azhar University</b>,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.</p> </body> </html>




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> <p align="center">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 <b>Al Azhar University</b>,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.</p> </body> </html>




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> <p align="right">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 <b>Al Azhar University</b>,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.</p> </body> </html>




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> <p align="justify">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 <b>Al Azhar University</b>,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.</p> </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 : <font [property]>…………………………………………….<font> 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> <p align="justify"><font face="Arial" style="font-size: 14pt" color="#FF0000">Ini merupakan novel bergenre romance,sekaligus novel dakwah yang mencerdaskan,memotivasi,dan mendidik</font>.</p> <p align="justify"><font face="Arial" style="font-size: 13pt">Novel ini seolah menjadi setitik cahaya ditengah rasa pesimisme anak muda negeri ini untuk teguh memegang prinsip-prinsip islami dalam kehidupan mereka.</font></p> <p align="justify"><font color="#0000FF"> <font face="Comic Sans MS" style="font-size: 13pt">Tampaknya inilah alasan utama yang dipilih novelis fenomenal Habiburrahman El Shirazy.Sarjana jebolan <b>Al Azhar University</b>,Cairo ini lebih mengedepankan aspek keagamaan.</font></font></p> <p align="justify"><font color="#808080"> <font face="Century Gothic" style="font-size: 13pt">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</font><font face="Century Gothic">.</font></font></p> </body> </html>




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…….<br>…….kalimat………..<br> Contoh 1 : Pengunaan Tag Font dengan Notepad <html> <head> <title>Contoh Penggunaan Tag Break Line</title> </head> <body> <h1>Tari Golek</h1> <p align="left"><font face="Cambria" style="font-size: 14pt">Komposisi tari tunggal puteri gaya Yogyakarta<br> yang lazim ditarikan oleh seorang gadis remaja.<br> Tari ini bersumber pada tari klana Alus yang mulai berkembang sejak<br> akhir abad ke 19. Golek menggambarkan seorang gadis remaja yang sedang suka bersolek<br> seperti <font color="#FF0000"><i>berbedak, mengenakan hiasan ,berdandan, berkaca, dan sebagainya</i></font>. <br> Di Yogyakarta dahulu tari golek ditarikan oleh seorang pemuda remaja <br> berpawakan kecil dan berparas cantik.</font></p> </p> </body> </html>


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> <p align="left">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 <b>Al Azhar University</b>,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.</p><br> <hr size="6" color="#0000FF" width="80%"><p><span style="font-family: Book Antiqua">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</span><font face="Book Antiqua"> </font></p> </html>



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><font face="Comic Sans MS"><marquee style="font-size: 18pt">Tutorial Gratis dari Boby CS -Teks Ini Akan Berjalan Ke Kiri</marquee></font></h2> </body> </html>




Note : Perhatikan Arah gerah Teks Berjalan….



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

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




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

<html> <head> <title>Penggunaan Teks Berjalan / Marquee pada Notepad</title> </head> <body> <h2><font face="Comic Sans MS"> <marquee style="font-size: 18pt; font-family:Tahoma; color:#0000FF" direction="right" behavior="slide">Tutorial Gratis dari Boby CS -Teks dengan Behavior Slide</marquee></font></h2> </body> </html>


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> <title>Penggunaan Teks Berjalan / Marquee pada Notepad</title> </head> <body> <h2><font face="Comic Sans MS"> <marquee style="font-size: 18pt; font-family:Harlow Solid Italic; color:#008000" behavior="alternate">Tutorial Gratis dari Boby CS -Teks dengan Behavior Alternate</marquee></font></h2> </body> </html>


Teks dengan efek behavior Alternate



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

<html> <head> <title>Penggunaan Teks Berjalan / Marquee pada Notepad</title> </head> <body> <h2><font face="Comic Sans MS"> <marquee style="font-size: 18pt; font-family:serif; color:#FF0000" behavior="alternate" bgcolor="#00FFFF">Tutorial Gratis dari Boby CS -Teks dengan Background Color</marquee></font></h2> </body> </html>


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 <b>……</b> 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> <p align="left"><b>Ini merupakan novel bergenre romance,sekaligus novel dakwah yang mencerdaskan,memotivasi,dan mendidik</b>.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 <b>Habiburrahman El Shirazy.</b></p> </body> </html>




2.1.2 Cetak Miring <i>…………</i> Contoh 2 : Pengunaan Tag Cetak Miring

<html> <head> <title>Contoh Format Text dengan Notepad</title> </head> <body> <h1 align="left">Resensi Ketika Cinta Bertasbih 2 by Boby CS</h1> <p align="left">Ini merupakan novel bergenre romance,sekaligus novel dakwah yang <i>mencerdaskan,memotivasi,dan mendidik</i>.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 <i>Habiburrahman El Shirazy.</i></p> </body> </html>




2.1.3 Garis Bawah <u>…………………………….</u> Contoh 3 : Pengunaan Tag Cetak Garis Bawah

<html> <head> <title>Contoh Format Text dengan Notepad</title> </head> <body> <h1 align="left">Resensi Ketika Cinta Bertasbih 2 by Boby CS</h1> <p align="left">Ini merupakan novel bergenre romance,sekaligus novel dakwah yang <u>mencerdaskan,memotivasi,dan mendidik</u>.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 <u>Habiburrahman El Shirazy</u><i>.</i></p> </body> </html>




2.1.4 Mengecilkan Huruf <small>,……………….</small> Contoh : Pengunaan Tag Mengecilkan Huruf / small

<html> <head> <title>Contoh Format Text dengan Notepad</title> </head> <body> <h1 align="left">Resensi Ketika Cinta Bertasbih 2 by Boby CS</h1> <p align="left">Ini merupakan novel bergenre romance,sekaligus novel dakwah yang <small>mencerdaskan,memotivasi,dan mendidik.</small>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<i>.</i></p> </body> </html>


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><font face="Book Antiqua" color="#000080">Sistem Peredaran Darah</font></h1> <p align="center"><font face="Times New Roman"><big>Sistem peredaran darah manusia terdiri dari darah,pembuluh darah,serta jantung.</big></font></p> <p><font face="Times New Roman">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.</font></p> <p align="center"><u><b><font face="Comic Sans MS" color="#0000FF">Tutorial Gratis by Boby CS Hak Cipta Dilindungi Undang-undang</font></b></u></p> </body> </html>




2.1.6 Teks yang ditebalkan / strong <strong>…………….….teks……………..……..</strong> Contoh : Pengunaan Tag menebalkan teks dengan Notepad <html> <head> <title>Sistem Peredaran Darah</title> </head> <body> <h1><span style="font-weight: 400"><font face="Book Antiqua" color="#FF0000"><strong>Sistem Peredaran Darah</strong></font></span></h1> <p align="center"><font face="Times New Roman" size="4"><strong>Sistem peredaran darah manusia terdiri dari darah,pembuluh darah,serta jantung.</strong></font></p> <p><font face="Times New Roman">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.</font></p> <p align="center"><font face="Comic Sans MS" color="#808080"><strong>Tutorial Gratis by Boby CS Hak Cipta Dilindungi Undang-undang</strong></font></p> </body> </html>




2.1.7 Penekanan Teks / Emphasize <em>…………….teks……………..</em> Contoh : Pengunaan Tag emphasize dengan Notepad <html> <head> <title>Panduan Pemrograman HTML</title> </head> <body> <h1 align="center"><font face="Times New Roman" size="4"><em>Sistem peredaran darah manusia terdiri dari darah,pembuluh darah,serta jantung.</em></font></h1> <p><font face="Times New Roman">Darah manusia terdiri dari plasma darah dan sel-sel darah yaitu <em>sel darah merah,sel darah putih dan keping darah</em>. 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.</font></p> <p align="center"><font face="Comic Sans MS" color="#808080"><em>Tutorial Gratis by Boby CS Hak Cipta Dilindungi Undang-undang</em></font></p> </body> </html>




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"> <p>E-book Bisnis Modal Kecil Harga Lama Rp <strike>200.000</strike>,- Harga Baru Rp 130.000,-</p> <p>E-book Kunci Sukses Bisnis Afiliasi Harga Lama Rp <strike>480.000</strike>,- Harga Baru Rp 250.000,-</p> <p>E-book Blog Bisnsi Internet Harga Lama Rp <strike>360.000</strike>,- Harga Baru Rp 230.000,-</p> </body> </html>




2.1.9 Subsript dan Superscript Subscript : <sub>………………..teks……………</sub> Superscript : <sup>………………..teks…………….</sup> Contoh : Pengunaan Subscript & superscript dengan Notepad

<html> <head> <title>Panduan Pemrograman HTML by Boby CS</title> </head> <body> <h2 align="center"><font face="Arial" color="#0000FF">Contoh Penerepan Subscript & Superscript by Boby CS</font></h2> <hr width="90%" size="4"> <h2 align="center"><font face="Arial" color="#0000FF"> </font></h2> <p><font face="Cambria" color="#000080">1. 2<sup>2</sup> + 5<sup>2</sup> adalah 57</font></p> <p><font face="Cambria" color="#000080">2. rumus kimia asam sulfat adalah H<sub>2</sub>SO<sub>4</sub></font></p> </body> </html>


Contoh Superscript

Contoh Subscript



2.2.1 Variable <var>…………………………….teks…………………………..</var> Contoh : Pengunaan Variable dengan Notepad

<html> <head> <title>Panduan Pemrograman HTML by Boby CS</title> </head> <body> <h2><font face="Georgia" color="#0000FF"> <span style="background-color: #00FF00">Perkembangan Dunia Internet by Boby CS</span></font> </h2> <p align="center"><font face="Georgia" style="font-size: 14pt"><var>Kemajuan dunia maya atau internet dewasa ini mengalami peningkatan yang sangat pesat. </var></font></p> <p><font face="Georgia">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</font></p> </body> </html>




2.2.2 Computer - Code <code>…………..teks……………..</code> Contoh : Pengunaan Computer - code dengan Notepad <html> <head> <title>Panduan Pemrograman HTML by Boby CS</title> </head> <body> <h2 align="center"><font face="Verdana"><font color="#800000">Sistem</font><font color="#800000"> Peredaran Darah Manusia</font></font></h2> <p align="center"><code><span style="font-size: 10pt">Darah manusia terdiri dari plasma darah dan sel-sel darah yaitu sel darah merah,sel darah putih dan keping darah.</span></code></p> <p>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.</p> </body> </html>




2.2.3 Keyboard <kbd>………………teks…………………….</kbd> Contoh : Pengunaan keyboard dengan Notepad

<html> <head> <title>Panduan Pemrograman HTML by Boby CS</title> </head> <body> <h2 align="center"><font face="Book Antiqua" color="#00FF00"> <span style="background-color: #000000">Sistem Peredaran Darah Manusia</span></font></h2> <p align="center"><kbd>Darah manusia terdiri dari plasma darah dan sel-sel darah yaitu sel darah merah,sel darah putih dan keping darah.</kbd></p> <p><font color="#0000FF" face="Comic Sans MS">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 </font> </p> </body> </html>




2.3.1 Citation <cite>………………….teks………………….</cite> Contoh : Pengunaan Citation dengan Notepad

<html> <head> <title>Panduan Pemrograman HTML by Boby CS</title> </head> <body> <h2 align="center"><font face="Broadway" color="#FF0000">Sistem Peredaran Darah Manusia</font></h2> <p><font face="Tahoma" style="font-size: 14pt"><cite>Darah manusia terdiri dari plasma darah dan sel-sel darah yaitu sel darah merah,sel darah putih dan keping darah.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</cite></font> </p> </body> </html>




2.3.2 Definition

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

Contoh : Pengunaan Definition code dengan Notepad

<html> <head> <title>Panduan Pemrograman HTML by Boby CS</title> </head> <body> <h2 align="center"><font face="Broadway" color="#0000FF">Sistem Peredaran Darah Manusia</font></h2> <p><font face="Tahoma" style="font-size: 14pt"><span style="font-style: normal"> <dfn>Darah manusia terdiri dari plasma darah dan sel-sel darah yaitu sel darah merah,sel darah putih dan keping darah.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</dfn></span></font><span style="font-style: normal"><dfn> </dfn></span> </p> </body> </html>




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> <title>Panduan Pemrograman HTML by Boby CS</title> </head> <body> <p> <img border="0" src="file:///D:/Stay_alive%20(Soft)/IMAGES/Album_foto/Jerry%20p/filter/ADEKKU.jpg" width="147" height="110" align="left"></p><br><br><br><br><br><br> <p align="center"> <img border="0" src="file:///D:/Stay_alive%20(Soft)/IMAGES/Album_foto/Jerry%20p/filter/ADEKKU.jpg" width="147" height="110"></p><br><br><br> <img border="0" src="file:///D:/Stay_alive%20(Soft)/IMAGES/Album_foto/Jerry%20p/filter/ADEKKU.jpg" width="147" height="110" align="right"><br><br><br> </body> </html>


Perataan Tengah (center)

Perataan Kiri

Perataan Kanan



3.2 Ukuran Gambar Contoh : Pengunaan Tag ukuran Gambar dengan Notepad <html> <head> <title>Panduan Pemrograman HTML by Boby CS</title> </head> <body> <p> <img border="0" src="file:///D:/Stay_alive%20(Soft)/IMAGES/Album_foto/Jerry%20p/filter/ADEKKU.jpg" width="164" height="122" align="left"></p> <br><br><br><br><br><br> <p> <img border="0" src="file:///D:/Stay_alive%20(Soft)/IMAGES/Album_foto/Jerry%20p/filter/ADEKKU.jpg" width="136" height="104" align="left"></p> <br><br><br><br><br><br> <p> <img border="0" src="file:///D:/Stay_alive%20(Soft)/IMAGES/Album_foto/Jerry%20p/filter/ADEKKU.jpg" width="105" height="81" align="left"></p> </body> </html>


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> <title>Panduan Pemrograman HTML by Boby CS</title> </head> <body> <p align="center"> <img border="0" src="file:///D:/Stay_alive%20(Soft)/IMAGES/Album_foto/Jerry%20p/filter/jeryy%20baru_filtered.jpg" width="628" height="471" alt="Adek Pose Narsis"></p> </body> </html>


Ini adalah teks yg muncul pd gambar



3.4 Link Gambar Contoh : Pengunaan Tag link Gambar dengan Notepad

<html> <head> <title>Panduan Pemrograman HTML by Boby CS</title> </head> <body> <p align="center"> <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></p> </body> </html>


Tanda ini bisa menunjukkan bahwa gambar ini terdapat link



3.5 Image Pada Paragraf Contoh : Pengunaan Tag Image Paragraf dengan Notepad <html> <head> <title>Panduan Pemrograman HTML by Boby CS</title> </head> <body> <p align="justify"> <span style="font-size: 13pt"> <img border="0" src="file:///E:/rahasia%20Bikin%20Web%20Gratis/images/E-book%20RahasiaBikinWebGratis.jpg" width="321" height="309" align="left"></span><font face="Comic Sans MS"><span style="font-size: 13pt">Master E-book <u><b>"Rahasia Bikin Web Gratis"</b></u> 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...<b>GRATIS</b>...</span></font></p> </body> </html>




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 Entitas

Nomor Entitas

Hasil Keterangan

© © © 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> <title>Panduan Pemrograman HTML by Boby CS</title> </head> <body> <p align="center"><b><font face="Arial" color="#0000FF"> <marquee behavior="alternate" style="font-size: 20">Contoh Penggunaan Entitas Karakter Dalam Dokumen HTML</marquee></font></b></p> <p>1.© </p> <p>2.® </p> <p>3. </p> <p>4.& </p> <p>5.« </p> <p>6.» </p> <p>7." </p> <p>8.< </p> <p>9.> </p> <p>10.× </p> <p>11.&divide </p> <p>12.™</p> </body> </html>




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 3

Halaman 4

Halaman 5

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> <p align="center"><font face="Comic Sans MS" style="font-size: 13pt">Halaman ini akan mendemonstrasikan penerapan link relatif pada dokumen HTML</font></p> <p><font face="Comic Sans MS" style="font-size: 14pt"> <a href="file:///E:/Dataku/Panduan%20Mudah%20Singkat%20Lengkap%20HTML/Contoh%203.5.htm"> Klik disini untuk melihat Contoh 3.5</a></font></p> <p><font face="Comic Sans MS" style="font-size: 14pt"> <a href="file:///E:/Dataku/Panduan%20Mudah%20Singkat%20Lengkap%20HTML/Contoh%204.1.htm"> Klik disini untuk melihat Contoh 4.1</a></font></p> </body> </html>




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> <title>Panduan Pintar Pemrograman HTML by Boby CS</title> </head> <body> <h1 align="center">Contoh Penerapan Link Absolut</h1> <p align="center"><font face="Comic Sans MS" style="font-size: 13pt">Halaman ini akan mendemonstrasikan penerapan link absolut pada dokumen HTML</font></p> <hr width="80%" size="4"> <p align="center"><b> <span style="font-size: 13.0pt; line-height: 115%; font-family: Comic Sans MS"> <a title="http://www.RahasiaBikinWebGratis.Co.Cc" href="http://www.rahasiabikinwebgratis.co.cc"> E-book Gratis Untuk Anda</a></span></b></p> <p align="right"><font face="Verdana" size="2"><b>Tutorial Gratis by Boby CS</b></font></p> </body> </html>


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

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

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

List Bernomer VS List Tanpa Nomer



6.1 List Bernomer <ol [atribut] <li>……isi list…..</li> <li>……isi list…..</li> <li>……isi list…..</li> <li>……isi list…..</li> </ol> Contoh : Penerapan List Bernomer dengan Notepad

<html> <head> <title>Panduan Pintar Pemrograman HTML by Boby CS</title> </head> <body> <h3 align="center"><font face="Verdana" color="#0000FF">Contoh Penggunaan List Bernomer Pada Dokumen HTML</font></h3> <hr> <p><font face="Comic Sans MS">Daftar Search Engine Dalam Internet</font></p> <ol> <li><font face="Comic Sans MS">google.com</font></li> <li><font face="Comic Sans MS">Yahoo.com</font></li> <li><font face="Comic Sans MS">MSn.com</font></li> <li><font face="Comic Sans MS">Altavista.Com</font></li> </ol> <p><font face="Comic Sans MS">Situs Penyedia E-book Gratis Siap Pakai</font></p> <ol type="I"> <li><font face="Comic Sans MS">RahasiaBikinWebGratis.Co.Cc</font></li> <li><font face="Comic Sans MS">RahasiaBikinVideo.Co.Cc</font></li> <li><font face="Comic Sans MS">SEOLITE.Co.CC</font></li> <li><font face="Comic Sans MS">PanduanBisnisMOdalKecil.Co.Cc</font></li> </ol> <p><font face="Comic Sans MS">Situs Penyedia Blog Gratis Siap Pakai</font></p> <ol type="A"> <li><font face="Comic Sans MS">blogger.Com</font></li> <li><font face="Comic Sans MS">wordpress.Com</font></li> <li><font face="Comic Sans MS">Blogdetik.Com</font></li> <li><font face="Comic Sans MS">Blog.Com</font></li> </ol> </body> </html>



6.2 List Tanpa Nomer <ul [atribut] <li>……isi list…..</li> <li>……isi list…..</li> <li>……isi list…..</li> <li>……isi list…..</li> </ul> Contoh : Penerapan List Tanpa nomer dengan Notepad

<html> <head> <title>Panduan Pintar Pemrograman HTML by Boby CS</title> </head> <body> <h3 align="center"><font face="Verdana" color="#0000FF">Contoh Penggunaan List Tanpa Nomer Pada Dokumen HTML</font></h3> <hr> <p><font face="Comic Sans MS">Daftar Search Engine Dalam Internet</font></p> <ul> <li><font face="Comic Sans MS">google.com</font></li> <li><font face="Comic Sans MS">Yahoo.com</font></li> <li><font face="Comic Sans MS">MSn.com</font></li> <li><font face="Comic Sans MS">Altavista.Com</font></li> </ul> <p><font face="Comic Sans MS">Situs Penyedia E-book Gratis Siap Pakai</font></p> <ul type="circle"> <li><font face="Comic Sans MS">RahasiaBikinWebGratis.Co.Cc</font></li> <li><font face="Comic Sans MS">RahasiaBikinVideo.Co.Cc</font></li> <li><font face="Comic Sans MS">SEOLITE.Co.CC</font></li> <li><font face="Comic Sans MS">PanduanBisnisMOdalKecil.Co.Cc</font></li> </ul> <p><font face="Comic Sans MS">Situs Penyedia Blog Gratis Siap Pakai</font></p> <ul type="square"> <li><font face="Comic Sans MS">blogger.Com</font></li> <li><font face="Comic Sans MS">wordpress.Com</font></li> <li><font face="Comic Sans MS">Blogdetik.Com</font></li> <li><font face="Comic Sans MS">Blog.Com</font></li> </ul> </body> </html>



Bab 7 Membuat Tabel Contoh : Penerapan Tabel dengan Notepad

<html> <head> <title>Panduan Pintar Pemrograman HTML by Boby CS</title> </head> <body> <h2 align="center"><font face="Book Antiqua" color="#FF0000">Contoh Penggunaan Tabel HTML</font></h2> <hr width="80%" size="3"> <p> </p> <table border="1" width="72%"> <tr> <td width="51" align="center"><font face="Comic Sans MS">NO</font></td> <td width="406" align="center"><font face="Comic Sans MS">Nama Siswa</font></td> <td align="center"><font face="Comic Sans MS">Nilai Rata-Rata</font></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="51" align="center">2</td> <td width="406" align="center">Siti Munasaroh Mifta</td> <td align="center">75</td> </tr> <tr> <td width="51" align="center">3</td> <td width="406" align="center">Adi Pranata Sudirja</td> <td align="center">85</td> </tr> </table> </body> </html>



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 jumlah halaman : 30 hal penulis : Boby CS edisi : Agustus 2010 peminat : 339 pengunjung Ket : Tutotial lengkap mendapatkan dan mengklaim sebuah domain professional gratis.



E-book panduan " Rahasia Bikin Video " format : pdf jumlah halaman : 40 hal penulis : boby candra edisi : ketiga di tahun 2010 peminat : 758 pengunjung 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 jumlah halaman : 44 hal penulis : boby candra edisi : kedua di tahun 2010 peminat : 593 pengunjung 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 jumlah halaman : 37 hal penulis : boby candra edisi : pertama di tahun 2010 peminat : 339 pengunjung 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 : [email protected] ( konsultasi 24 jam)

[email protected] ( pemesanan gratis) HP : 082 141 052 152 ( sms / mms 24 jam )

panduan pemrograman html - boby candra

Education