MENAMBAHKAN KODE HTML PADA BLOGSPOT

Berkreasi terhadap blog kita terutama blogspot sangat banyak macamnya. Salah satunya dengan menambah kode html. Bagi anda yang tidak begitu mengerti tentang kode-kode html, anda tidak perlu khawatir. Karena blogspot memberikan kemudahan yang bisa anda rasakan ketika melakukan edit widget. Anda hanya perlu menggeser-geser widget ditempat yang sesuai keinginan,

Ikuti langkah ini untuk menambah kode html blogspot :

1. Login di blogger untuk masuk ke akun blogspot anda

2. Pilih layout, lalu Page Element, dan Add Gadget

3. Ketika muncul jendela baru, pada kategori basic gadget pilih HTML/Javascript

4. Pada kolom yang kosong anda bisa tulis kode html sesukamu atau copy paste kode html yang kamu inginkan.

Misalnya <a href="http://www.bloggerafif.com">Blogerafif</a>

5. Setelah selesai jangan lupa disimpan.

Sangat mudah kan. Kamu  tidak perlu repot-repot edit html via template. Untuk lebih berkreasi dengan html kamu juga bisa Membuat 2 Kolom Sidebar Blogspot

MEMBUAT TEXT AREA

Text Area Biasa

Biasanya text area di gunakan untuk menyimpan kode-kode Html/Javascript ataupun text lainnya agar bisa di copy oleh para pengunjung.

Untuk membuat text area, silahkan anda Copy kode di bawah ini :

---

<p align="center"><textarea name="code" rows="5" cols="20" readonly>


Aku Orang yang ganteng,kaya,mobilku banyak,istriku banyak,cantik-cantik,orang pada ngiri ama aku karena aku terlalu tampan!! :)


</textarea></p>

---

Keterangan :
rows="6", menunjukan tinggi dari text area.
Cols="20", menunjukan lebar dari text area.

Hasilnya akan seperti di bawah ini :

---

Aku Orang yang ganteng,kaya,mobilku banyak,istriku banyak,cantik-cantik,orang pada ngiri ama aku karena aku terlalu tampan!! :)

---

Text Area dengan memakai HighLight /Select

Highlight atau Select All,yaitu dimana saat kita tekan tombol Select All,maka kode dalam text area akan otomatis terblok semua.

Untuk kodenya,copy paste di bawah ini :

---

<div>
<form name="Select All code">
<p align="left" style="margin-top: 0; margin-bottom: 0"><textarea style="width: 184; height: 120" name="txt" rows="100" wrap="VIRTUAL" cols="55" readonly>

Aku Orang yang ganteng,kaya,mobilku banyak,istriku banyak,cantik-cantik,orang pada ngiri ama aku karena aku terlalu tampan!! :)

</textarea></p>
</div>
<p align="left" style="margin-top: 0; margin-bottom: 0">

<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" type="button" value="Select All">

---

Contoh hasilnya :

---

Aku Orang yang ganteng,kaya,mobilku banyak,istriku banyak,cantik-cantik,orang pada ngiri ama aku karena aku terlalu tampan!! :)

---

Yang berperan penting untuk highlightnya sebenarnya hanya pada kode

<input onclick="javascript:this.form.txt.focus();this.form.txt.selec()">

jadi,jangan sampai dirubah ya :)

---

Text Area Select Otomatis

Anda pasti pernah khan mengunjungi suatu situs yang memberikan sebuah kode html,seperti kode Adsense,dll.

Ya,kode akan terblok sendiri,hanya dengan menggerakkan mouse diatas bidang kodenya.

Untuk kode dan contohnya lihat disini

Selamat mencoba :)

Apa itu HTML?

HTML singkatan dari Hyper Text Markup Language,dalam arti umum,sebuah web adalah sebuah dokumen HTML,yang mana sebuah HTML itu sendiri merupakan bahasa yang menggunakaan tanda-tanda tertentu(Tag)untuk menyatakan kode-kode yang harus diterjemahkan oleh Browser,agar halaman dapat di tampilkan secara benar.HTML sendiri,sebenarnya hanya dokument biasa,hanya dokumen ini dapat dilakukan untuk pemformatan text,peletakan object,maupun Hypertext yakni text yang berfungsi ganda sebagai penghubung (Link)antara halaman satu dengan yang lain.
Nah!link inilah yang menjadi ciri sekaligus membentuk suatu www (Jaringan global antar text / halaman)

---

Bagaimana contoh sederhana bentuk sebuah halaman HTML?
Sebagaimana Pengertian Blog pada posting pelajaran-blog.blogspot.com beberapa waktu lalu,bahwa sebuah halaman web yang baik,secara fisik akan terdiri dari sebuah Header,Body,Sidebar dan Footer.
Untuk membentuk sebuah halaman HTML secara sederhana,kita memanfaatkan Notepad pada komputer anda.
Tapi sebelum itu,pergi ke My Document,pilih Folder Option,lalu pilih View,kosongkan check box pada Hide Extentions for Known Filetypes,inihanya untuk memperlihatkan File type dari setiap file di komputer anda.
Setelah itu,buka Notepad dan tuliskan kode di bawah ini :

---

<html><head>
<title>Belajar HTML</title>
</head>
<body>
<p>Hallo! aku sedang belajar blog di Pelajaran Blog !</p>
</body>
</html>

---

Setelah itu simpan dengan nama "belajar",yang nantinya di komputer anda akan menjadi "belajar.txt",setelah itu,klik kanan file tersebut pilih Rename rubah menjadi "belajar.htm".
Setelah itu,Open file tersebut,dan anda sudah bisa melihat suatu tampilan halaman HTML yang di maksud.
Apa keterangan dari kode-kode di atas?

Kode HTML,dalam setiap kodenya di awali dengan tanda <> dan di akhiri dengan </>
contoh:
<html>merupakan penandaan bahwa halaman HTML di mulai.
</html>merupakan tanda bahwa halaman html ditutup.
<Head>artinya merupakan awal kepala
</Head>artinya merupakan akhir bagian kepala.
<Title>menujukkan judul yang akan keluar pada Bar atas yang ditutup dengan </title>
<body>isi dari halaman tesebut,seperti contoh HTML diatas,isinya berupa kata "Hallo! aku sedang belajar blog di Pelajaran Blog !"yang ditutup dengan akhir isi halaman,yaitu </body>
Sedangkan tanda <p> yaitu pembentukan alinea baru,seperti halnya anda menekan Enter pada Ms Word untuk membentuk kursor baru pada Alinea baru,yang mana diakhiri pula dengan tanda </p>.
Untuk membentuk alinea baru bisa juga menggunakan kode <br> dan diakhiri dengan </br>
Gimana? masih kurang jelas?untuk kode-kode pengoptimalan,seperti mempertebal huruf,miring,garis bawah,membuat tabel dan lain-lain silahkan kunjungi di sini.

DASAR-DASAR KODE HTML

Kode-kode dasar HTML

Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML,bisa baca disini
Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.

---

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

Belajar

---

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

Belajar

---

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

Belajar

---

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :
Belajar

---

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :
Belajar

---

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :
Belajar

---

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :
<b><i><u>Belajar</u></i></b> hasilnya seperti :
Belajar

---

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :
Belajar

---

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :
Belajar
Namanya juga hidden..ya..ga keliatan..

---

Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
Belajar

---

Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar

---

Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4₂</p>hasilnya seperti ini:
4₂

---

Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4²</p> hasilnya seperti ini:
4²

---

Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf

---

Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
Belajar

---

Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar

---

Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar

---

Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar

---

Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:

Belajar

---

Membuat tabel border solid gunakan kode:

<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>

hasilnya seperti :

Text

---

Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:

Text

---

Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :

Text

---

Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:

Text

---

Untuk kode-kode HTML yang lain anda bisa mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML.

DASAR-DASAR PENULISAN KODE HTML

DASAR -DASAR PENULISAN KODE HTML
Bagi anda yang pengin belajar tentang penulisan kode HTML berikut adalah sedikit mengenai dasar - dasar cara penulisannya. Tulisan ini hanya memuat perintah kode HTML yang sangat sederhana. Tulisan ini mkungkin sangat cocok bagi mereka yang baru mengenal HTML.

Html singkatan dari hypertext markup language, merupakan program penulisan informasi sebuah homepage. Dalam Tulisan ini akan coba saya perkenalkan dasar – dasar penulisan Kode HTML. Sebagai latihan Anda bisa menulis kode – kode HTML berikut ke Microsoft frontpage, atau program lainnya untuk mengetahui hasil setiap perintah kode HTML. (Untuk FrontPage setelah anda membuka halaman kosong sebagai latihan tulis kode HTML di Bagian menu “HTML” kemudian untuk melihat hasilnya silahkan tekan tombol “Preview” atau “Normal” yang ada disebelahnya. Saya menyarankan pakai FrontPage karena kebanyakan program tersebut sudah terinstal di komputer.

Sebelumnya ada saran dikit: cara yang baik dengan mempelajari bagaimana orang lain telah menuliskan kode-kode nya pada setiap halaman html adalah lakukan : klik menu "View" dan klik "Source". Cobalah lakukan langkah ini pada saat anda sedang membuka halaman html dokumen orang lain yang anda buka, download atau copy dari internet. Dengan langkah ini maka anda akan melihat sendiri di layar monitor komputer anda berbagai kode yang dituliskan pada halaman html tersebut.

1. Menulis judul pada halaman homepage

Setiap dokumen HTML sebuah homepage perlu diberi judul. Berikut adalah tampilan pada saat anda melakukan perintah penulisan judul atau title :

<title>Sinungku document</title>

Ubahlah teks "Sinungku document" dengan judul artikel anda. Penulisan judul biasanya dimulai dengan tanda tag <title> dan diakhiri dengan tanda tag </title>. Judul tulisan sebaiknya dituliskan pada awal dokumen anda.

2. Menambahkan sub-sub judul dan paragraphnya

Apabila anda telah biasa mempergunakan Microsoft Word, anda sudah biasa pula dengan model-model kodifikasi sub judul (heading) dengan tingkatan kepentingannya. Dalam bahasa HTML ada enam tingkat sub judul (heading). H1 adalah sub judul yang paling penting, H2 adalah sub judul yang agak kurang penting, begitu seterusnya sampai H6, yang paling sedikit kepentingannya..

Berikut adalah bagaimana caranya menambahkan sub judul (heading) :

<h1>Judul Penting</h1>

dan berikut adalah penulisan sub judul selanjutnya :

<h2>Judul Kurang Penting</h2>

Setiap paragraph yang anda tulis sebaiknya dimulai dengan sebuah kode tag <p>. Kode tag </p> hanya dipergunakan bila perlu. Kecuali pada penulisan sub judul biasanya diakhiri dengan kode tag </p>. Contoh :

<p>Paragraph Pertama.</p>

<p>Paragraph kedua.</p>

Untuk membuat lay-out tulisan kode yang dipakai :

<p align=”justify”>Teks anda</p>      : Rata kiri kanan

<p align=”right”>Teks anda</p>        : Rata Kanan                   

<p align=”center”>Teks anda</p>       : Rata Tengah

<p align=”left”>Teks anda</p>         : Rata Kiri

3. Menambahkan emphasis / Huruf Miring

Anda dapat menambahkan emphasis yang terdiri dari sebuah kata atau beberapa kata dengan menuliskan kode tag <em> pada awal emphasisnya dan diakhiri dengan kode tag </em>. Atau kode : <i> dan diakhiri </i> Contoh

Sinung putriku <em>pertama</em> yang cantik. Atau :

Sinung putri <i>pertama</i> dari Wahyo. 

4. Membuat Huruf Tebal / Bold

Contoh :  Sinung putri <b>pertama</b> dari Wahyo. 

5. Membuat Huruf Bergaris bawah

Contoh :  Sinung putri <u>pertama</u> dari Wahyo. 

6. Membuat Warna Huruf

Contoh :  Sinung putriku <font color=”#0000ff”>pertama</font>yang cantik. 

0000ff adalah kode warna huruf, anda bisa menggantinya dengan kode yang lain.

7. Membuat Warna Background Huruf

Contoh :  Sinung putriku <span style=”#0000ff”>pertama</span>yang cantik.

8. Membuat ukuran / size Huruf

Contoh :  Sinung putriku <font size=”3”>pertama</font>yang cantik. 

9. Mengubah Jenis Huruf

Contoh :  Sinung putriku <font face=”Times New Roman”>pertama</font>yang cantik. 

10. Menambahkan gambar (images)

Gambar (atau images) dapat ditambahkan kedalam halaman Web anda agar semakin informatif dan menolong penyampaian pesan anda. Cara sederhana untuk menambahkan sebuah gambar adalah dengan menggunakan kode tag <img>. Misalkan anda hendak menambahkan sebuah file gambar "sinungku.jpeg" dalam folder atau direktori yang sama dimana file dokumen HTML anda simpan. Gambar ini memiliki lebar 200 pixel dan tingginya 150 pixel.Maka menulisnya sebagai berikut :

<img src="sinungku.jpeg" width="200" height="150">

Lebar dan tinggi tidaklah terlalu penting akan tetapi ukuran gambar yang kecil akan menolong cepatnya tampilan halaman web anda diakses oleh orang lain di internet. Namun masih ada kekurangannya ! Orang lain yang tidak dapat melihat gambar anda, akan memerlukan deskripsi gambarnya. Anda dapat menambahkan deskripsinya dengan cara sebagai berikut :

<img src="sinungku.jpeg" width="200" height="150"

alt="Putriku yang Pertama">

Atribut alt dipergunakan untuk menuliskan perintah deskripsi singkat yaitu " Putriku yang Pertama ". Untuk gambar-gambar yang kompleks, anda akan membutuhkan deskripsi yang lebih banyak. Misalkan perintah ini akan dituliskan dalam file "sinungku.html", anda dapat menambahkan atribut deskripsi yang panjang seperti dalam contoh berikut :

<img src="sinungku.jpeg" width="200" height="150"

alt="Putriku yang Pertama " longdesc="sinungku.html">

Anda dapat membuat gambar dengan beberapa cara, dapat dengan mempergunakan kamera digital, scanner, atau membuat gambar dengan program pembuatan gambar seperti Photoshop, Corel, Microsoft Photoeditor, LViewpro dll. Kebanyakan program browser dapat membaca format gambar GIF dan JPEG, program browser yang terbaru juga dapat membaca format PNG. Untuk mencegah lambatnya gambar anda diakses di internet sebaiknya anda menerapkan ukuran file gambar yang tidak terlalu besar.

Secara umum, format JPEG adalah format terbaik untuk fotografi dan memperhalus berbagai jenis gambar, sedangkan format GIF dan PNG baik untuk grafis seperti bidang datar berwarna, garis dan teks. Ketiga bentuk format itu memiliki kemampuan "progressive rendering" yaitu kemampuan mengirimkan gambar kasarnya terlebih dahulu dan kemudian dilanjutkan dengan menambahkan detailnya sampai gambar tersebut tampil seluruhnya dengan baik.

11. Menambahkan link (tanda berhubungan) dengan halaman lain

Yang membuat Web demikian efektif adalah adanya kemampuan untuk membuat hubungan (link) dari satu halaman dengan halaman lainnya dan halaman lain yang berhubungan ini dapat dikerjakan cukup dengan satu kali klik saja.

Hubungan atau Link biasa ditulis dengan kode tag <a>. Misalkan sebuah hubungan atau link hendak dibuat pada file "sinungku.html":

This a link to <a href="Sinungku.html">Sinung's page</a>.

Teks antara kode tag <a> dengan kode tag </a> adalah keterangan tentang hubungan atau link yang akan dibuat. Umumnya keterangan ini diberi garis bawah. Warna teks dan garis bawah dibuat berwarna biru.

Untuk membuat link ke tempat Web yang lain anda perlu menambahkan alamat internet Web selengkapnya (biasanya disebu URL), contoh untuk link ke w3c anda perlu menuliskan :

This is a link to <a href="http://www.w3c.org/">W3C</a>.

Anda dapat juga membuat gambar logo memiliki link ke halaman lain. Contoh penulisan berikut memungkinkan gambar logo anda dapat berhubungan dengan home page.

<a href="/"><img src="logo.gif" alt="home page"></a>

12. Tiga macam daftar

Bahasa HTML memiliki kemampuan membuat tiga jenis daftar (list). Pertama daftar dengan kode bulat (bulleted list), biasa disebut unordered list. Penulisannya mempergunakan kode tag <ul> dan kode tag <li>, contoh :

<ul>

<li>Sinung putriku pertama</li>

<li>Wahyo adalah ayahnya</li>

<li>Dyah adalah ibunya</li>

</ul>

Perhatian, anda selalu harus menuliskan kode tag </ul> pada bagian akhir daftar anda, tetapi kode tag </li> bersifat tambahan atau bisa juga tidak dipergunakan. Jenis daftar kedua disebut daftar bernomor atau disebut juga ordered list. Ini dituliskan dengan kode tag <ol> dan kode tag <li>. Contoh :

<ol>

<li>Sinung putriku pertama</li>

<li>Lahir tanggal 18 Agustus</li>

<li>Hari lahir Jum`at jam 20.05 WIB</li>

</ol>

Seperti daftar pertama, anda selalu perlu mengakhiri daftar dengan kode tag </ol> , tetapi kode tag </li> pada bagian akhir adalah tambahan dan dapat dihilangkan.

Daftar ke tiga dan terakhir adalah daftar berdefinisi (definition list). Dengan daftar ini memungkinkan anda membuat daftar terminologi dan definisinya. Daftar ini ditulis dengan kode tag <dl> pada awal tulisan dan diakhiri dengan kode tag </dl>. Masing-masing terminologi dimulai dengan kode tag <dt> dan setiap definisi dimulai dengan kode tag <dd>. Contoh :

<dl>

<dt>the first term</dt>

<dd>its definition</dd>

<dt>the second term</dt>

<dd>its definition</dd>

<dt>the third term</dt>

<dd>its definition</dd>

</dl>

Kode tag </dt> dan </dd> adalah tambahan dan bisa tidak dipergunakan. Catatan, tiap daftar dapat disubkan antara satu daftar dengan daftar lainnya.Contoh :

<ol>

<li>the first list item</li>

<li>

the second list item

<ul>

<li>first nested item</li>

<li>second nested item</li>

</ul>

</li>

<li>the third list item</li>

</ol>

Anda bahkan dapat membuat paragraph dan headingnya dan lain-lainl.pada daftar yang lebih panjang.