SCIENCE CENTER

Untuk membuat text area saya rasa sudah banyak blogger yang tahu, tapi mungkin saja ada yang sudah lupa atau memang belum tahu membuatnya. Oleh karena itu, kali ini saya akan sedikit share tentang cara membuat text area,  sebelumnya sudah saya publish mengenai text area untuk link postingan. Text area adalah suatu form yang disediakan untuk menulis kode HTML agar bisa ditampilkan di halaman posting atau di sidebar untuk berbagai keperluan, seperti membuat artikel, membuat LinkExchange, dll. Lihat postingan sebelumnya Cara Menampilkan Kode HTML.
        Textarea diperlukan dalam pembuatan blog atau website saat membuat text atau tulisan di dalam box. Hasil penulisan text di dalam Textarea tersebut akan ditulis tanpa merubah ukuran dari texarea itu sendiri (sebelumnya char width (cols) dan rows didefinisikan terlebih dahulu). Apabila text yang ditulis melebihi kapasitas ukuran textarea, maka textarea tersebut akan otomatis membuat scrollbar di sebelah kanan.
Dalam text area, penulisan kode HTML dan CSS, atau script lain dapat ditulis tanpa perlu menggunakan entitas HTML atau dengan kata lain seluruh text, kode, dan script yang ditulis pada textarea akan tampil apa adanya setelah diposting.
Para blogger biasanya menggunakan textarea sebagai tempat untuk menyimpan kode HTML, CSS, atau script yang lain misalnya url download, script tukar link, script banner exchange, dan lain-lain. Berikut ini akan saya jelaskan cara membuat textarea pada blog jika suatu saat dibutuhkan untuk menempatkan atau menyimpan kode HTML. Cols berfungsi untuk mendefinisikan jumlah karakter ke samping yang akan ditampilkan pada textarea, Rows berfungsi untuk mendefinisikan jumlah baris pada textarea.
Contoh 1 :
Penulisan text di dalam textarea dengan ukuran char width 40 dan jumlah baris 4 :
Penulisan kode HTML :
<textarea cols="40" rows="4">Tulisan ini berada didalam textarea </textarea>
Tampilan setelah diposting : 
Tulisan ini berada didalam textarea  
Contoh 2 :
Penulisan text di dalam textarea dengan ukuran char width 40 dan jumlah baris 4 tetapi tulisan melebihi kapasitas textarea:
Penulisan kode HTML :
<textarea cols="40" rows="4">Tulisan ini ada di dalam textarea dengan ukuran char width 40 dan jumlah baris 4, perhatikan penulisan ini akan melebihi batas textarea sehingga secara otomatis akan tampil scrollbar di sebelah kanan. Untuk membaca sisa text yang tidak terlihat bisa dengan menggeser scrollbar tersebut.</textarea>
Tampilan setelah diposting :
Tulisan ini ada di dalam textarea dengan ukuran char width 40 dan jumlah baris 4, perhatikan penulisan ini akan melebihi batas textarea sehingga secara otomatis akan tampil scrollbar di sebelah kanan. Untuk membaca sisa text yang tidak terlihat bisa dengan menggeser scrollbar tersebut.
Cara Membuat Text Area dengan Tombol  "Select All" Button
cara membuat text box area, "select all" button pada text area atau text box area.
Text area yang terdapat tombol "Select All" adalah area atau tempat yang dibuat untuk menyimpan tulisan baik berupa text maupun berupa kode HTML/Javascript yang akan memudahkan pembaca dalam melakukan copy-paste hanya dengan sekali klik pada button Select All, seluruh text didalam text area langsung dapat ter-copy.
Perhatikan kedua contoh berikut :
Contoh 1. Text Area Tanpa Select All Button:
Untuk membuat textarea yang ketika diklik tulisan dalam textarea akan langsung terpilih semua (HighLight) tanpa menggunakan tombol bantu select all, maka gunakan kode berikut ini :
<p align="left"><textarea name="code" rows="4" cols="40" onclick="this.focus();this.select();">Isi dengan tulisan Anda disini, bisa berupa text biasa dan juga text berupa kode HTML/Javascript.</textarea></p>
Ganti tulisan"Isi dengan tulisan Anda disini, bisa berupa text biasa dan juga text berupa kode HTML/Javascript  yang Anda miliki. Klik publish dan lihat hasilnya.
Tampilan setelah di publish :
Penjelasan:

• <p align="left"> dan </p> digunakan untuk menentukan posisi text area nantinya, dalam hal ini saya pasang di sebelah kiri (“left”).
• <onclick="this.focus();this.select();" > Kode ini artinya ketika tombol Select All di klik, maka seluruh text yang ada didalamnya akan di select all (dipilih dan di block semua agar dapat di copy sekaligus)
• <textarea name="code" rows="4" cols="40" dan </textarea> adalah tag untuk membuat teks area.
• rows adalah untuk menentukan tingginya.
• cols adalah untuk menentukan lebarnya text area.

Contoh 2. Text Area Dengan Select Button:
Untuk membuat textarea  dengan memasang  tombol bantu Select All  ,  jika tombol Select All ditekan maka teks dalam area  langsung terpilih semua (HighLight) , maka gunakan kode berikut ini :
<div><form name="copy"><div align="center">  <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All"> </div><div align="center"></div><p align="center"><textarea style="WIDTH: 200px; HEIGHT: 90px" name="txt" rows="100" wrap="VIRTUAL" cols="55"> isikan dengan  tulisan Anda disini, bisa berupa text biasa dan juga text berupa kode HTML/Javascript, jika tombol Select All ditekan maka seluruh teks di area ini akan terpilih/highlight </textarea></p></div></form>
Ganti tulisan " isikan dengan  tulisan Anda disini, bisa berupa text biasa dan juga text berupa kode HTML/Javascript, jika tombol Select All ditekan maka seluruh teks di area ini akan terpilih/highlight " dengan text atau HTML/javascript yang Anda miliki.
Klik terbitkan atau publish, lihat hasilnya.
Tampilan setelah di publish :

Pada bagian Contoh 2. Text Area Dengan Select Button terdapat dua bagian element html, pertama adalah element kode html pembuatan Select All button dan yang kedua adalah element kode html untuk membuat text area.
Berikut adalah beberapa element penting yang mungkin perlu Anda ketahui:
Element within text area with Select All button:

1. <div align="center">. Kata center artinya posisi button akan berada di tengah. Jadi, jika Anda ingin posisi button/tombol berada disebelah kiri, ganti saja dengan kata
   left. Dan jika ingin berada disebelah kanan, ganti dengan kata
   right.
2. <input onclick="javascript:this.form.txt.focus ();this.form.txt.selec()">. , sebaiknya jangan merubah tulisan ini.
3. Value="Select All". Kata Select All adalah kata yang akan muncul didalam button/tombol. Tulisan select all dapat Anda ganti sesuai selera.

Element within manual text area :

1. <p align="center">. Menunjukan bahwa text area akan berada di tengah, jika Anda ingin text area berada disebelah kiri, ganti kata center dengan kata left untuk kiri atau right untuk dikanan.
2. <text style="WIDTH: 200px"> kata "WIDTH:200px", adalah lebar text area sebanyak 200 pixel. Jika Anda ingin merubah lebar text
   area, Anda dapat menggantinya dengan angka yang anda inginkan, misalnya; 400px;

Semoga panduan ini bermanfaat bagi Anda.

Sebelumnya pada blog ini dijelaskan mengenai HTML  dasar sampai tingkat lanjutan kini saatnya saya akan mencoba memaparkan kepada sobat netter tentang aplikasi program HTML  untuk blog atau website, kali ini saya akan mencoba posting mengenai pembuatan link text postingan untuk blog, terkadang di dalam postingan kita ingin buat kotak teks (text area), di dalam kotak teks bisa diisi dengan teks, link, banner, dll. Ada banyak cara / script yang bisa anda gunakan untuk membuat kotak teks (text box) tersebut. Kotak teks ini biasanya digunakan untuk membuat form untuk tukaran link dengan blog lain, membuat teks penjelasan tentang isi dari link postingan.
        Sebagai contoh di bawah ini adalah beberapa macam cara membuat kotak teks (text box) dengan script yang berbeda.
Contoh 1:

• Teks rata tengah = text-align: center; center bisa diganti dengan left, right,justify
• Background warna ungu = background-color: rgb((200, 30, 200);   angka 200,30dan 200  bisa anda ubah sesuai keinginan (untuk mengubah warnanya)
  Script: (dimasukkan di dalam postingan atau widget blogger)
• <FONT COLOR = "white">, Sebenarnya sudah dijelaskan diblog ini tentang belajar dasar 1-3 HTML yaitu tentang warna untuk font  , <FONT COLOR = "white">, untuk membuat teks warna putih, bisa diubah dengan warna lain green, blue, gray dll.

Kode script HTML untuk memasang link ditengah dalam area text dengan laterbelakang warna :
<p style="border: 1px solid rgb(204, 204, 204); padding: 15px; display: block; background-color: rgb(200, 30, 200); text-align: center;"><a href=http://bisnisonlinetop1.blogspot.com><FONT COLOR = "white">Tips dan Trik Sukses Bisnis Online</a></p></font>
Tampilannya setelah dipublish :
Contoh 2:

• Teks otomatis rata kiri
• Background warna abu-abu = background-color: gray ; gray bisa diganti dengan warna lain seperti white, red, blue, green, dsb, warna lainnya bisa dilihat disini daftar warna
• Link diisi hingga baris pertama penuh kemudian akan berpindah ke baris 2
• Tinggi kotak teks  100 px (pixel) = height: 100px; angka 100 bisa diubah sesuai kebutuhan
• Script (dimasukkan di dalam postingan) .

Contoh scriptnya :
<div style="border: 0px solid rgb(202, 61, 217); padding: 1px; overflow: auto; height: 100px; background-color: gray; "><br>
<a href=http://bisnisonlinetop1.blogspot.com/>strategi bisnis online</a>                                                         <a href="http://bisnisonlinetop1.blogspot.com/2011/04/langkah-awal-bisnis-online.html/">tips sukses bisnis online</a><br>
</div>
Tampilannya setelah dipublish :

Contoh 3:

• Teks otomatis rata kiri
• Background transparan
• Link diisi per baris 1 link
• Tinggi kotak teks  200 px (pixel) = height: 100px; angka 100 bisa diubah sesuai kebutuhan
• Script: (dimasukkan di dalam postingan)

Contoh Script HTML nya :
<div style="border: 1px solid rgb(202, 61, 217); padding: 1px; overflow: auto; height: 200px; "> <br> <a href="http://bisnisonlinetop1.blogspot.com">strategi bisnis online</a> <br>                                                    <a href="http://bisnisonlinetop1.blogspot.com/2011/04/langkah-awal-bisnis-online.html/" target="_blank">tips sukses bisnis online</a><br> </div>
Tampilannya setelah dipublish :
kode di atas dimasukkan saat membuat entri baru / edit entri dalam mode "Edit HTML"
Contoh 4 :
Menampilkan isi link postingan dalam textarea, dengan cara ini dapat menghemat tempat jika postingan kita sudah terlalu banyak dan dapat juga untuk membuat teks penjelasan tentang isi dari link postingan. :
Contoh scriptnya :
<div style="border-right: rgb(153,153,153) 0px solid; border-top: rgb(153,153,153) 0px solid; overflow: auto; border-left: rgb(153,153,153) 0px solid; width: 380px; border-bottom: rgb(153,153,153) 0px solid; height: 200px; text-align: left">    <ul type="square">                                                 <li><a href="http://bisnisonlinetop1.blogspot.com/2011/04/3-situs-web-penghasil-dollar-cepat.html"><span style="font-family:Verdana;font-size:100%;color:#008080;">Situs-situs PTC yang membayar membersnya &amp; cepat process cashoutnya. </span></a>
</li>    <li><a href="http://bisnisonlinetop1.blogspot.com/2011/04/cara-mendaftar-ptc-neobux.html"><span style="font-family:Verdana;font-size:100%;color:#008080;">Cara mendaftar PTC NEOBUX </span></a>
</li>    <li><a href="http://bisnisonlinetop1.blogspot.com/2011/04/strategy-menghasilkan-100-500-perhari.html"><span style="font-family:Verdana;font-size:100%;color:#008080;">Cara menghasilkan $100-$200 perhari dengan PTC NEOBUX </span></a>
</li>    <li><a href="http://bisnisonlinetop1.blogspot.com/2011/04/cara-daftar-ptc-onbux.html"><span style="font-family:Verdana;font-size:100%;color:#008080;">Cara mendaftar PTC ONBUX </span></a>
</li>    <li><a href="http://bisnisonlinetop1.blogspot.com/2011/04/strategy-menghasilkan-ratusan-dollar.html"><span style="font-family:Verdana;font-size:100%;color:#008080;">Strategy ampuh menghasilkan $200-$500 perhari dengan mengikuti PTC ONBUX </span></a>
</li>    <li><a href="http://bisnisonlinetop1.blogspot.com/2011/04/strategy-sukses-ptc-incrasebux.html"><span style="font-family:Verdana;font-size:100%;color:#008080;">Tips sukses dengan PTC Incrasebux</span></a>
</li></ul>
</div>
Tampilan pada saat di publishing :

Kode di atas dimasukkan saat membuat entri baru / edit entri dalam mode "Edit HTML" blok atau website, dan dapat juga dimasukan pada menu seting pemasangan widget di blog.
Semoga bermanfaat bagi Anda…!!!

HTML-Tingkat lanjutan 2
Setelah  Anda mempelajari HTML-Tingkat lanjutan 1 pada postingan ini sebelumnya mudah-mudahan Anda sudah memahami tentang elemen – element  utama HTML tentang Format Font dan Text, , sekarang saya akan memaparkan tentang fungsi-fungsi elemen Hyperlink, Background ,  Alternatif link gambar , menentukan posisi gambar pada tingkatan HTML-lanjutan 2 ini, yang tentunya akan dibutuhkan jika Anda ingin memanipulasi content website Anda agar dengan mudah Anda memaksimalkan teknik SEO untuk mempromosikan  website atau blog Anda. 
Hyperlink HTML
Hyperlink digunakan untuk menghubungkan antar halaman dokumen di dalam web.
Tag HTML Hyperlink biasa disebut dengan anchor (a) kemudian diikuti dengan href
sebagai alamat tujuan dari link tersebut. Berikut kita akan membuat suatu Hyperlink
ke suatu alamat url:
<html>
<head></head>
<body>
<p>Aku sekarang sedang membuat hyperlink</p>
Jika anda ingin mengunjungi Microsoft
<a href="http://www.microsoft.com/">Klik disini</a><br>
<a href="http://www.yahoo.com/">Link ini</a> akan membawa anda ke Yahoo.com
<p>Untuk membuat hyperlink url agar dibuka pada jendela browser yang baru:<p>
<a href="http://www.mp3.com/"target="_blank">Website Musik</a>
<p>Agar hyperlink tidak bergaris bawah:<p>
<a href="http://www.mp3.com/"target="_blank" style="text-decoration: none">Website Musik</a>
<p>Hyperlink ke suatu halaman tertentu dalam web:<p>
<!--dengan catatan anda harus tau nama halaman tujuan tersebut-->
<a href="http://wordpress.htmlcssguides.com/belajar-css/">Link ini</a> akan membawa anda ke halaman belajar css.
</body>
</html>

Untuk membuat hyperlink dengan menggunakan gambar (image). Pastikan gambar tersebut berada pada folder yang sama dengan dokumen html Anda dan harus tahu nama dan extentionnya, kemudian ganti ke atribut yang bertuliskan scr, misalkan jika nama gambar tersebut adalah yahoo.gif, maka :
<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31"></a>

Img merupakan atribut untuk suatu image (gambar), border adalah garis yang mengelilingi sisi image, width dan height merupakan lebar dan tinggi dari image. Kreatiflah untuk menganti nilai yang ada diantar tanda "…"sehingga anda akan lebih mengerti. Untuk memposisikan gambar, tambahkan dengan atribut align="…", left= kiri, center= tengah dan right= kanan.
<a href="http://www.yahoo.com"> <img src="yahoo.gif" border="0" width="147" height="31" align="left"></a>
Sekarang coba geser mouse Anda ke gambar di atas, jangan di-klik, perhatikan akan ditampilkan suata tulisan singkat mengenai gambar tesebut, ini disebut dengan screen tips, cara membuatnya adalah menambahkan title pada tag anchor (a) sehingga menjadi :
<a href="http://www.yahoo.com" title="Hai...Klik gb. ini maka Anda akan dibawa ke Yahoo."><img src="contoh.jpg" border="0" width="147" height="31" align="left" alt="yahoo"></a>
   Agar cepat mengakses internet kita boleh mengatur browser untuk tidak menampilkan image (gambar). Dan semua gambar akan ditampilkan dengan teks alternatif (alt), jika gambar tesebut tidak memiliki alternatif teks maka hanya akan dilambangkan dengan lambang x.
<a href="http://www.yahoo.com"> <img border="0" src="contoh.jpg" width="120" height="30" align="left" alt="Text Alternatif Yahoo.com"></a>

Background HTML
Dengan menggunakan latar belakang (background) maka website kita akan nampak semakin menarik. Untuk memasukkan latar belakang kita bisa menggunakan pilihan warna maupun grafik (gambar).
Sekarang kita mulai dengan menggunakan pilihan warna:
<html>
<head></head>
<body bgcolor="#FF99FF">
<p>Hai.. Saat ini saya sedang belajar membuat latar belakang dengan warna</p>
<p>Kalau anda kurang suka dengan warnanya... ganti aja deh... kode warnanya... </p>
</body>
</html>
  
Untuk nilai dari atribut bgcolor diatas Anda bisa menggunakan Kode hexadecimal, Nilai RGB atau Nama dari warna tersebut.
Coba anda ganti nilai dari atribut bgcolor dengan contoh dibawah ini:

<body bgcolor="#FFFF00">                              <body bgcolor="rgb(250,250,0)">                       <body bgcolor="yellow">

Memasukan grafik atau gambar.
Memasukan gambar bisa dari harddisk CPU kita ataupun dari URL.untuk memasukangambar kedalam halaman web kode HTML yang dipakai adalah

<img src="alamat url gambar">

Untuk mengambil gambar menggunakan link URL, kita bisa menggunakan penyedia jasa penyimpanan gambar seperti photo bucket atau image schack, yang nantinya kita akan ambil link penyimpanan gambarnya untuk kita panggil dihalaman web kita, contohnya seperti ini, jika kita sudah  mengupload gambar kita disalah satu penyedia jasa penyimpanan gambar tersebut maka yang harus kita lakukan adalah meng-copy paste direct link gambar tersebut. Contohnya direct link dari gambar
yang telah diupload adalah :
http://img665.imageshack.us/img665/3066/flower250x150.gif
maka untuk memanggilnya :
<img src=http://img665.imageshack.us/img665/3066/flower250x150.gif
Menentukan posisi gambar align
Untuk membuat gambar bisa berada diposisi kanan, kiri atau tengah maka kode HTML
yang digunakan adalah align="posisi gambar yang diinginkan" contohnya berikut ini :
<img src="http://img665.imageshack.us/img665/3066/flower250x150.gif" align="left">
untuk menentukan posisi gambar juga bisa menggunakan cara seperti ini :
<center><img src="http://img665.imageshack.us/img665/3066/flower250x150.gif" align="left"></center>
Memberikan keterangan pada gambar "Alt"
Jika Anda melihat gambar pada halaman Web, apabila kursor mouse mengenai gambar maka akan muncul keterangan pada gambar tersebut, agar gambar yang kita masukan kedalam web ada keterangan gambarnya, maka kode HTML yang digunakan adalah "alt" atau disebut juga alternative, dengan menambahkan keterangan pada gambar bisa membantu website kita cepat terindex oleh search engine google. Contohnya sebagai berikut :
<img src="http://img665.imageshack.us/img665/3066/flower250x150.gif” alt="keterangangambar">
Selanjutnya membuat latar belakang dengan grafik atau gambar.
Pertama anda harus punya gambar yang ber-extention .gif atau .jpg yang akan dijadikan background, masukkan (copy) gambar tersebut ke folder tempat file dokumen HTML anda berada, dan harus tahu nama dan perluasan (extention) dari file tersebut, misalkan nama filenya adalah: background.jpg
<html>
<head></head>
<body background="background.jpg">
<font color="blue"><h1 color="red">Selamat datang di Websiteku</h1></font><hr color="#ff0000" size="2">
<p><font face="Verdana" size="4" color="black">Halo semua Saat ini saya sedang belajar membuat latar belakang dengan gambar,<br>
Masukanlah gambar yang menarik bagi Anda...</font></p>
</body>
</html>
Kemudian latar belakang dapat juga menggunakan gambar yang ada di website orang lain, tapi dengan catatan anda harus sedang terhubung ke internet (online) dan harus tahu alamat url dari gambar tersebut di internet. Untuk mengetahui alamat suatu gambar klik kanan gambar tersebut kemudian pilih properties dan lihat image location, copy alamat tersebut dan ganti ke contoh dibawah ini diawali dari http:
<html>                                                    <head></head>                                                         <body background="http://i1188.photobucket.com/albums/z405/ animated_favicon1.gif">                                       <p>Saat ini saya sedang belajar membuat latarbelakang dengan menggunakan gambar dari website orang lain!</p>                <p>semoga dapat memperindah tampilan website Anda…</p>               </body>                                                             </html>

HTML Tingkat lanjutan 1
Jika Anda baru terjun di dunia maya khususnya ingin mengikuti bisnis secara online alias pemula (newbie) diharuskan Anda  belajar tentang program web HTML. Di blog-bisnisonlinetop1 ini Anda akan mendapatkan tutorial, tips, triks dan artikel-artikel tentang bagaimana cara belajar HTML untuk membantu Anda dalam menjalani bisnis online tentang bagaimana membuat website agar profesional.
Di Internet sebenarnya kita bisa saja mendapatkan banyak template baik yang gratis maupun yang berbayar, namun untuk lebih baiknya agar Anda dapat memanipulasi tampilan website/blog secara elegan dan profesional khususnya script-script HTML yang berkaitan dengan promosi iklan Anda agar Anda tidak mengalami kesulitan untuk me-reposisikan tampilan-tampilan banner atau gambar, teks Link,  dan untuk mempercantik tampilan website/blog Anda.
Di blog-bisnisonlinetop1 ini Anda akan mendapatkan tutorial belajar HTML yang disertai dengan contoh-contoh mulai dari dasar, sehingga akan mudah dipahami dan sangat cocok bagi Anda yang masih pemula.
Sebelumnya sudah dijelaskan pada blog ini tentang belajar dasar-dasar HTML untuk  pemula dari dasar 1 , dasar 2 sampai dasar 3, agar Anda lebih mahir lagi mengenai HTML silahkan Anda mempelajari tingkat lanjutannya diblog ini , tentunya Anda sudah mengetahui untuk belajar program HTML Anda dapat menggunakan software program HTML seperti Ms FrontPage, Dreamweaver atau Text Editor (Notepad), sesuai dengan selera Anda masing-masing. Namun untuk tutorial ini akan diajarkan dengan menggunakan teks editor yang simpel yaitu Notepad yang sudah dijelaskan sebelumnya di blog ini, jika Anda ingin teks editor yang lebih interaktif Anda bisa menggunakan Notepad.
Dalam belajar sebaiknya Anda langsung praktek di program HTML Anda, sehingga akan lebih mudah untuk dipahami, Anda bisa ketik atau copy/paste contoh-contoh HTML-nya di Notepad program HTML Anda, simpan file dengan extention .html dan tampilkan di browser untuk melihat hasilnya.
Pengenalan HTML lanjutan :
Pengertian singkat tentang HTML
Sebenarnya sudah dijelaskan diblog ini tentang apa itu HTML ? HTML (Hyper Text Markup Language) merupakan bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti texs, grafik, animasi link maupun audio-video.
Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat, baca dan dengar. Contoh dari Web Browser adalah Internet Exsplorer, Netscape Navigator, Mozilla Firefox, Opera, Safari dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi Anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
Sebelumnya sudah dijelaskan juga diblog ini tentang contoh suatu dokumen HTML  yang sangat sederhana dengan menggunakan software text dokument HTML Notepad, pada bagian ini dijelaskan hanya untuk tingkat lanjutan belajar program HTML.
Format Font HTML
Tag HTML untuk font adalah <font>…</font>, dengan tag ini kita bisa menentukan jenis font (face), warna (color), dan ukuran (size), untuk lebih jelasnya mari kita perhatikan contoh berikut ini:
<html>
<head></head>
<body>
Untuk membuat jenis font (face):
<h1><font face="Verdana">Judul dengan font Verdana</font></h1>
<p><font face="Times">Konten dengan font Times</font></p>
Untuk membuat ukuran (size):
<h1><font size="5">Judul dengan size 5</font></h1>
<p><font size="3">Konten dengan size 3</font></p>
Untuk membuat warna font (color):
<h1><font color="blue">Judul dengan warna biru</font></h1>
<p><font color="red">Konten dengan warna merah</font></p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<h1><font face="Verdana" size="4" color="green">Judulnya Tentang Font</font></h1>
<p><font face="Arial" size="3" color="#660000">Ini adalah contoh tulisan dengan <i>pengaturan font</i> yang menggunakan<br>
tag HTML elemen <b>font</b> dengan atribut face, size dan color...</font></p>
</body>
</html>

Berikut adalah sebagai referensi bagi Anda untuk memanipulasi atribut face, color dan size:

Atribut : face="Jenis font yang digunakan", contoh: face="Tahoma"
size="Ukuran dari font (1-7)", contoh: size="3"
size="Memperbesar ukuran font", contoh: size="+1"
size="Memperkecil ukuran font", contoh: size="-1"
color="Warna dari font", contoh: color="blue"
color="Warna dari font", contoh: color="#FF0000"

Sesuai dengan recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag <font> tidak dipergunakan lagi, sebagai gantinya dibuat tag <style> atau disebut dengan Cassading Style Sheets (CSS). Dengan CSS penggunaanya akan lebih kompleks dan lebih luas lagi karena dapat dikombinasikan dengan tag elemen-elemen lainnya di dalam dokumen HTML. Berikut adalah contoh penggunaan tag style sheets:
<html>
<head></head>
<body>
Untuk membuat jenis font (face):
<h1 style="font-family:verdana">Judul Menggunakan font verdana</h1>
<p style="font-family:tahoma">Konten menggunakan font tahoma</p>
Untuk membuat ukuran (size):
<h1 style="font-size:150%">Judul dengan ukuran 150%</h1>
<p style="font-size:80%">Konten dengan ukuran 80%</p>
Untuk membuat warna font (color):
<h1 style="color:blue">Judul dengan warna Biru</h1>
<p style="color:red">Konten dengan warna merah</p>
Contoh komplit untuk membuat jenis font (face),size dan color:
<p style="font-family:verdana;font-size:80%;color:green">
Ini adalah contoh tulisan pengaturan font dengan <i>Cassading Style Sheets</i> (CSS) yang<br>
menggunakan tag HTML elemen <b>style:</b> font-family, font-size dan color...</p>
</body>
</html>

Untuk mengetahui lebih lanjut tentang pemrograman CSS, nanti akan dibuat tutorial khusus untuk membahas hal ini.
Format text HTML
Untuk menulis biasanya ada paragraf dan baris baru, lantas bagaiman cara menuliskannya di dokumen HTML?. Dari contoh yang sudah kita buat sebelumnya, coba tambahkan dengan tag-tag berikut ini:
<html>
<head>
<title>Selamat Datang di Websiteku</title>
</head>
<body>
Ini adalah halaman Program HTML pertamaku.
<p>Aku sedang membuat paragraf dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf keduaku, tapi de-<br>
ngan baris baru.<br>
Ini baris paragraf baru yang lain.</p>
</body>
</html>

Untuk membuat suatu paragraf, tag elemennya adalah <p>…</p>, dan untuk baris baru adalah <br>, perlu diketahui bahwa sebagian tag elemen HTML tidak memerlukan tag penutup, sebagai contoh adalah <br> ada juga <hr>, apa itu <hr>?, coba lanjutkan lagi dengan contoh berikut ini:
<html>
<head>
<title>Selamat Datang di Websiteku</title>
</head>
<body>
<hr>
<h1>Ini adalah halaman HTML pertamaku.</h1>
Dikerjakan oleh: <!-- Tolong isikan dengan nama Anda -->
<hr>
<p>Aku sedang membuat paragraf dan ini contohnya.</p>
<p>Ini contoh paragraf yang lainnya.</p>
<p>Ini juga paragraf keduaku,…tapi de-<br>
ngan baris baru.<br>
Ini baris baru yang lain.</p>
</body>
</html>

Sampai disini mudah-mudahan Anda memahami apa itu <hr>. Garis Horizontal <hr> juga tidak menggunakan tag penutup. Kemudian ada <h1>…</h1> disebut dengan Heading, merupakan ukuran teks yang biasa di pakai untuk judul, bab, maupun sub-bab lainnya. Ukurannya ada 6 jenis mulai dari <h1> sampai <h6>, ukuran yang paling besar adalah h1 dan yang terkecil adalah h6.
Selanjutnya tag <!–…–> adalah Comments digunakan untuk memasukkan (menyisipkan) suatu komentar di dalam HTML. Suatu comments akan diabaikasn oleh browser. Kamu dapat menggunakan komentar untuk menjelaskan sesuatu hal.
Dibawah ini adalah contoh format teks yang sering digunakan di dalam dokumen HTML :
<html>
<head></head>
<body>
<hr>
<h1>Ini adalah halaman HTML pertamaku.</h1>
Dikerjakan oleh: <!-- Tolong isikan dengan nama anda -->
<hr>
<p>Aku sedang mempelajari format-format teks.<br>
Contoh-contohnya adalah sebagai berikut:</p>
<p>Teks Normal<br>
<tt>Teks mesin ketik</tt><br>
<b>Teks tebal (bold)</b><br>
<strong>Teks tebal dengan perintah Strong</strong><br>
<i>Teks dengan italic (miring)</i><br>
<em>Teks miring dengan perintah Emphasized</em><br>
<u>Teks bergaris bawah (underline)</u><br>
<strike>Teks tercoret (strike)</strike><br>
<big>Teks lebih besar dari normal</big><br>
<small>Teks lebih kecil dari normal</small><br>
Teks menggunakan Subscript: Molekul Air adalah H<sub>2</sub>O<br>
Teks menggunakan Superscript: Hasil dari 10<sup>2</sup>=100<br></p>
</body>
</html>

Kemudian untuk menampilkan teks sesuai dengan yang tertulis kita gunakan tag <pre>…</pre>, misalnya jika anda menuliskan syair sebuah lagu atau puisi:
<html>
<body>
<pre>
    <b>BELAJAR ITU INDAH</b>
    Hari ini...
    Aku sedang belajar HTML...
    Belajar tentang HTML itu ternyata mudah.
       Tidak sulit 'ntuk dimengerti,
       Karena mudah di fahami teks-teks nya.
       Tapi saya tetap belajar,… biarlah...
    Akan kucoba belajar terus...
    Sampai aku mahir.
</pre>
</body>
</html>

Sampai disini semoga Anda benar-benar memahami tentang format font dan paragraf dengan program HTML,  untuk lanjutan  belajar HTML dengan elemen gambar dan Hypertext silahkan Anda klik disini yaitu Belajar HTML tingkat lanjutan bagian ke 2

Belajar HTML-Dasar 3

Setelah Anda mempelajari HTML – Dasar 2 pada blok ini mengenai element-element text, kali ini saya akan mencoba memaparkan tentang mengenai elemen-elemen dasar Link <A> mudah-mudahan dengan mempelajari bagian ini anda dapat memahami penggunaan element-element untuk menghubungkan ke internal atau eksternal halaman web dan juga dilengkapi dengan elemen Daftar urutan yang nantinya berguna untuk membuat website atau blog Anda lebih kelihtan rapi.

Link/AnchorLink <A>

Objektif :
Setelah mempelajari materi Link ini diharapkan anda dapat memahami penggunaan element-element untuk menghubungkan ke internal atau eksternal halaman web.
Element :
Element  </A>
Element </a> , befungsi untuk menghubungkan ke internal ataupun eksternal halaman web. Element ini mempunyai attribute href, name, dan target.  Attribute href berfungsi sebagai hypertext reference yang mempunyai nilai URI (uniform resource identifier) yang akan menghubungkan ke eksternal halaman web. Attribute name berfungsi untuk menghubungkan ke tempat tujuan dalam halaman web (anchor). Attribute target berfungsi untuk menampilkan halaman web pada suatu jendela frame atau jendela baru.
Sintaks:

<a href="uri" name="name" target="_blank"|"parent"|"_top"|"_self">
   ...........................
</a>                                                                                                                              -------------

Element </a> sering disebut juga dengan perintah anchor <A> digunakan untuk membuat suatu link. Untuk membuat link ke dokumen HTML lain digunakan perintah <A HREF = “nama_dokumen”>Teks pada browser</A>.
Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut. Nama anchor dibuat dengan menambahkan atribut NAME pada tag <A>. Misalnya <A NAME = “Bugs”</A>. Cara melakukan link ke bagian tersebut adalah <A HREF = “#nama_anchor”>teks pada browser</A>.
Contoh:
<HTML>
<HEAD>
<TITLE>Link</TITLE>
</HEAD>
<BODY>
<A NAME="traffic">3 Cara meningkatkan traffic blog :</A>
<BLOCKQUOTE>
<P>1.Pakai Teknis SEO,<A HREF="http://bisnisonlinetop1.blogspot.com/2011/05/cara-cerdas-meningkatkan-pagerange.html">Baca selengkapnya</A>
<P>2.Niche Content
<P>3.Gratiskan apa yang bisa digratiskan
<P>
<A HREF="http://bisnisonlinetop1.blogspot.com/2011/05/keyword-teknis-seo.html">Untuk penjelasan lebih lanjut silahkan klik disini</A>
</BLOCKQUOTE>
<P><A NAME="traffic">link no error</A>
<BLOCKQUOTE>
<P>Pastikan tidak ada link yang error di blok Anda
<BR>Tidak kebayangkan pengunjung yang kecewa dan pergi karena ada link yang rusak.
</BLOCKQUOTE>
<P><A HREF="http://bisnisonlinetop1.blogspot.com/2011/05/seo-anchor-text-dan-teknis-optimasi-seo.html">Untuk cara teknis SEO baca selengkapnya</A>
<BLOCKQUOTE>
<P>Link navigasi blok harus tersusun secara rapi
<BR>Dan tidak membingungkan pengunjung.
</BLOCKQUOTE>
<P><A HREF="#traffic">kembali ke atas</A>
</BODY>
</HTML>
 
3 HTML Daftar Urutan
Objektif :
Setelah mempelajari materi ini diharapkan anda dapat memahami penggunaan element-element untuk pembuatan daftar urutan.
Element  :
Element OL(ordered list), Element UL(unordered list), Element LI(list item).
1. Element OL (Orderd List).
Element OL berfungsi untuk membuat nomor daftar urut. Element ini mempunyai attribute yaitu start, dan type. Attribute start berfungsi untuk memberikan nilai awal dari daftar urutan, attribute type berfungsi untuk memilih bentuk daftar urutan yaitu A untuk abjad huruf besar, a untuk abjad huruf kecil, I untuk abjad romawi besar, i untuk abjad romawi kecil, 1 untuk angka decimal (default: start="1" type="1" ). Dalam element OL harus terdapat beberapa element LI.
Sintaks:

<ol start="number" type="A"|"a"|"I"|"i"|"1">
........................
</ol>

Ordered list digunakan untuk membuat daftar dimana tiap bagiannya memiliki nomor secara berurut. Ordered list dimulai dengan menggunakan tag <OL> dan diakhiri </OL>. Untuk menyatakan tiap bagiannya digunakan tag <LI> dimana tag ini tidak menggunakan penutup.
Contoh:

<HTML>
<HEAD><TITLE>Ordered List</TITLE></HEAD>
<BODY>
5 situs PTC yang sangat direkomendasikan
<OL>
<LI>NEOBUX                                                  <LI>ONBUX                                                 <LI>INCREASEBUX                                             <LI>ClikSense   <LI>SchnaapKliks                                                           </OL>
</BODY>
<HTML>

Ketika menggunakan perintah ordered list maka default penomoran adalah 1, 2, 3, …, Anda bisa mengubah nomor tersebut menggunakan atribut TYPE pada tag <OL>.

• TYPE = 1 ; daftar berurut dengan nomor 1, 2, 3 (default)
• TYPE = I ; daftar berurut dengan menggunakan bilangan Romawi besar (I, II, III, IV, …)
• TYPE = I ; daftar berurut dengan menggunakan bilangan Romawi huruf kecil (i, ii, iii, iv, …)
• TYPE = A ; daftar berurut dengan menggunakan abjad besar (A, B, C, D, …)
• TYPE = a ; daftar berurut dengan menggunakan abjad kecil (a, b, c, d, …)

Selain mengubah jenis penomoran, HTML juga menyediakan perintah untuk menentukan nilai awal penomoran. Atribut yang digunakan adalah START = n, dimana n adalah nilai awal penomoran.
Contoh:
<HTML>
<HEAD>
<TITLE>OL atribut type</TITLE>
</HEAD>
<BODY>
<OL TYPE=A>
<LI>Tiga Payment Processor Yang Legitimasi :                        <OL TYPE=I>
<LI>PayPal                                                  <LI>AlertPay
<LI>LibertyReserve
</OL><LI>Tiga Lainnya :                                             <OL TYPE=1 START=4>
<LI>Netteler                                                 <LI>HooPays                                                          <LI>WebMoney                                               
</OL>
</BODY>
<HTML>


2. Element UL (Unordered List)
Element UL berfungsi untuk membuat daftar tanpa nomor urut (dalam format bullet). Element ini mempunyai attribute yaitu type. Attribute type berfungsi untuk memilih bentuk bullet yang digunakan. Nilai dari pada attribute type ini adalah "circle", "square" dan "disc" . Dalam element UL harus terdapat beberapa element LI.
Sintaks:

<ul  type="circle"|"square"|"disc">
      ..........................
</ul>

Berbeda dengan ordered list, dalam unordered list tidak dijumpai urutan dalam suatu daftar. Setiap bagian dari unordered list ditandai dengan tanda bullet. Tanda bullet menjadi defaultdalam unordered list. Untuk membuat daftar dengan tanda ini digunakan tag awal <UL> dan tag akhir </UL>. Sama seperti ordered list, untuk tiap-tiap bagian digunakan <LI> tanpa tag penutup.
Contoh:
<HTML>
<HEAD>
<TITLE>Element Unordered List</TITLE>
</HEAD>
<BODY>
Tiga Situs Bisnis Internet                                        <UL>
<LI>PTC ( Paid To Click )
<LI>PTSurv. ( Paid To Surveys )
<LI>PPC ( Paid Per Click )                                  
</UL>
</BODY>
<HTML>

Selain default tanda bullet, Anda bisa menggunakan tanda cakram/disk, lingkaran, atau kotak. Caranya dengan menggunakan atribut TYPE pada tag <UL>
Contoh:
<HTML>
<HEAD>
<TITLE>Element UL dengan atribut</TITLE>
</HEAD>
<BODY>
Jenis bisnis Internet Marketing                                   <UL TYPE=square>
<LI>Ad Network                                                <LI>Art Supply Store                                       <LI>Amazon                                                        <LI>etc.
</UL>
</BODY>
<HTML>

3. Element LI (List Item)
Element LI merupakan isi dari pada daftar. Element ini harus berada di dalam element OL atau UL. Element ini mempunyai attribute type dan value. Nilai attribute type adalah A,a,I,i,1,circle,square,disc dan attribute value berisikan nilai nomor urutan dari attribute type.
Sintaks:

<li type="A"|"a"|"I"|"i"|"1"|"circle"|"square"|"disc">
      ..........................
</li>

Sampai disini saya harap Anda sudah dapat memahami seluiruh element dasar utama pada  program HTML, untuk lebih memperdalamnya lagi silahkan Anda melanjutkannya ke tingkat lanjutan …!!!