Pengertian HTML

on 05/03/10

HTML (Hypertext Markup Language) adalah sebuah format data yang digunakan untuk membuat dokumen hypertext yang dapat dibaca dari satu platform ke platform lain tanpa membuat perubahan apa pun. Dokumen HTML sebenarnya adalah dokumen teks biasa, sehingga platform apapun dapat membaca dokumen.
Dokumen HTML markup language yang disebut karena mengandung tanda-tanda tertentu yang digunakan untuk menentukan tampilan teks dan tingkat kepentingan dalam dokumen, seperti menentukan di mana sebuah gambar akan muncul dan apa jenis format yang diterapkan pada kumpulan teks tertentu, bahkan juga dapat membuat sebuah tabel, bentuk atau dengan bingkai di dalamnya dengan menggunakan tanda HTML.

Hypertext Markup Language adalah bahasa World Wide Web digunakan untuk mengatur dan bentuk dokumen yang akan ditampilkan pada browser program. Dalam HTML link hypertext, atau gunakan teks link dengan dokumen lainnya. Dengan demikian dokumen bias pengguna melompat dari satu dokumen ke dokumen lain dengan mudah.

HTML Editor Program


Pada dasarnya, untuk membuat dokumen HTML ada dua cara, yaitu:
a. Menggunakan editor teks (default Windows), seperti Notepad.
b. Alat bantu perangkat lunak, seperti Ultra Edit, Ms. Front Page, dan lain-lain.

Resources


Sumber daya harus siap untuk mempelajari HTML adalah:
a. Komputer dengan sistem operasi Windows.
b. Program Notepad pada Windows (bias ditemukan di Start / Program / Accessories / Notepad).
c. Program browser di Windows, seperti Internet Explorer atau Netscape Navigator.

Struktur dasar bahasa HTML


Seperti kebanyakan dokumen, dokumen HTML terdiri dari teks, teks dan bahkan lebih dari itu.
Dokumen HTML juga dapat berisi gambar, suara atau video.
Satu hal yang membedakan dokumen HTML dengan dokumen lain, yaitu adanya elemen HTML dan tag. Elemen dan tag HTML untuk memformat atau fungsi untuk menandai bagian tertentu dari dokumen HTML dan juga untuk menentukan struktur bagian tersebut dalam dokumen HTML. Elemen dan tag yang merupakan karakteristik dari suatu dokumen. Struktur dasar bahasa HTML adalah sebagai berikut:

<html> ----> mulai HTML

<head> ----> memulai judul

<title> ... .... </ title> judul konten ---->

</ head> ----> akhir judul

<body> ... .... </ body> ----> memulai dokumen HTML

</ html>



kepala berisi informasi tentang dokumen, seperti judul dokumen, menjembatani hubungan antara dokumen, menceritakan browser untuk membuat form pencarian.

<title> ... .... </ title> , tag ini digunakan untuk menampilkan judul dokumen, dan biasanya akan ditampilkan dalam judul browser bar atau di atas dokumen.

Tubuh berisi layout atau desain halaman web. Semua teks atau gambar tag diketik antara <body> ... .... </ body> akan ditampilkan oleh browser jendela utama yang dibaca.

a)

Konsep Dasar Elemen


Dalam dokumen HTML, elemen dibagi menjadi dua kategori utama, yaitu <head> unsur-unsur yang menyediakan informasi seperti dokumen, seperti judul dokumen atau hubungan dengan dokumen lain serta <body> unsur-unsur yang menentukan bagaimana isi dokumen dapat dilihat oleh browser, seperti paragraf, daftar, tabel, dan lain-lain .

b)

Konsep Dasar Tag


Pada saat browser menampilkan suatu halaman web, browser akan membaca teks dalam HTML dan dokemen menemukan kode khusus yang disebut tag . Tag ini diungkapkan oleh tanda lebih kecil (<). Tag biasanya pasangan yang disebut tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk , sedangkan tag akhir dinyatakan dalam bentuk .

Baca Selengkapnya...

Cara Merubah Title Blog Menjadi Title Postingan

Untuk membuat blog kita lebih SEO Friendly memang kita harus melakukan sedikit cara. Salah satunya adalah merubah title blog menjadi title postingan. Dan begaimana cara melakukan itu? caranya sangat gampang sekali. Saya akan menjelaskan sedikit tentang hal itu, caranya yaitu:

  • Masuk ke menu Layout-->Edit HTML
  • Cari kode seperti berikut ini:
<title><data:blog.title/></title>
  • Kalau sudah ketemu ganti kode tersebut dengan kode di bawah ini:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>
  • Klik Save
Nach sekarang pelajaran kita yang sedikit tapi bermanfaat ini sudah selesai dan lihat hasilnya.
(Halaman utama titlenya akan tetap title blog kamu, tapi kalau kumu membuka salah satu dari title postingan maka title postinganmu akan menjadi title blog).
Selamat mencoba dan semoga behasil. Siiip...

Baca Selengkapnya...

Cara Setting Domain di co.cc

on 04/03/10

Di dalam artikel ini saya akan menjelaskan bagaimana cara mensetting domain di co.cc. Dalam pengaturan di co.cc memiliki tiga tipe yaitu Managed DNS, Zone Records, URL Forwarding. Ketiganya mempunyai fungsi tersendiri dan di sini saya akan sedikit berbicara khusus mensetting di co.cc tipe pengaturannya Zone Records, karena Zone Records sangat cocok digunakan di Blogger/Blogspot. Berikut ini adalah cara mensettingnya:

  • Pertama buka dulu situs co.cc
  • Masukkan alamat blog anda pada kolom yang disediakan dan klik Check availability
  • Kalau situs anda sudah terdaftar, maka anda akan menemui beberapa kolom
  • Pada kolom Host isikan nama domain yang sudah anda daftarkan tadi dan jangan lupa beri "www" di depannya
  • Pada kolom TTL pilih 1D (atau dibiarkan saja)
  • Pada kolom Type pilih yang CNAME
  • Untuk kolom Value isikan dengan ghs.google.com
  • Klik tombol Save Setting
Nach perjalanan di co.cc cukup sampai di sini dan langkah selanjutnya adalah merubah settingan di Blogger, caranya adalah:
  • Login dulu di Blogger dan masuk ke menu Setting-->Publishing
  • Kemudian pilih Switch to : Custom Domain
  • Selanjutnya klik pada Already own a domain? Switch to advanced settings
  • Kemudian isikan nama domain anda yang baru anda dftarkan tadi di kolom Your Domain
  • klik tombol Save Setting
Dan selesai dech. Domain anda akan aktif dalam beberapa jam mungkin sampai sehari, jadi sabar menunggu saja. Blog anda akan tetap bisa di akses melalui domain yang lama kok... ok
Selamat mencoba dan semoga berhasil.... Amin.

Baca Selengkapnya...

Cara Menampilkan Recent Post(Postingan Terbaru)

on 03/03/10

Bingung mau menampilkan Recent Post/Postingan Terbaru di Side bar? Tidak usah khawatir di sini saya akan sedikit menulis artikel tentang bagaimana cara mengatasi masalah di atas. Pertama-tama yang harus kita lakukan adalah


1. Login dulu di Blogger
2. Pilih menu Layout
3. Klik Page Element terus pilih Add a Gadget
4. Pilih HTML/JavaScript (tempatnya terserah kamu)
5. Copy Paste kode berikut pada tempat yang disediakan:


<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>


6. Ganti tulisan YOURBLOGNAME dengan nama blog kamu
7. Angka 10 menunjukkan banyaknya Recent Post yang akan ditampilkan (kamu bisa menggantinya sesuai dengan selera kamu)
8. Kalau sudah klik Save

Dan lihat sekarang Recent Post kamu sudah jadi.
Selamat mencoba dan semoga sukses. ok

Baca Selengkapnya...

Cara Membuat Translate Berbentuk Bendera

on 27/02/10

Pernah ada seorang teman bertanya kepada saya "Bagaimana cara membuat translate berbentuk bendera?". Setelah mendapat pertanyaan seperti itu saya langsung mencari tahu bagaimana caranya membuatnya. Dan akhirnya baru kemarin saya mendapatkan jawabannya, yaitu dengan cara seperti di bawah ini:



1. Login dulu di Blogger
2. Klik Tata Letak
3. Klik tab Elemen Halaman
4. Klik Tambah Gadget
5. Pilih Tambah HTML/JavaScript
6. Copy Paste kode yang ada di bawah ini:


<style>
.google_translate img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
border:0;
}
.google_translate:hover img {
filter:alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
.google_translatextra:hover img {
filter:alpha(opacity=0.30);
-moz-opacity: 0.30;
opacity: 0.30;
border:0;
}
</style>
<div>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="English" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cen&hl=en'); return false;"><img alt="English" border="0" align="absbottom" title="English" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidgBtDqvKt96DyK_3BTZmg3RACOFPZpjDny8DJw8cKuFvSN8IsepTQGLUBtvdFrQ9zzi9T2uUGPFVZA6LDecWJY32i6NbYo3-O8eaXwyZKl1YNGZVeXZG4DUjBu_XC_dd79YFz05yM1-Y/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="French" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cfr&hl=en'); return false;"><img alt="French" border="0" align="absbottom" title="French" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg6J8e3ey4c13NoO-Gv4dFB4F9nw10NEUh4fNleOYDVs_OCGKkVQUbtUvV7sWQ6zR8dWg1k1IJ8kgb_ABsDw8h7EkIUShqg-4E3aBvfAJlbTkoP5Zf7ayhjTKyVH5ayV4rqyxN2C-oTU4o/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="German" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cde&hl=en'); return false;"><img alt="German" border="0" align="absbottom" title="German" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilt2L5lmg67r5JE7u_-F-Z0A_UsEFnTZNItpIWRnq1nn8MeCS3Xm9Va10pqqLuF24CFauSLPhOCZke2663pWUSDrrvEiKP4FtG4PcSpcwsII7h98GQQHUy8uTH5dPYUc_IJNTlMyvg8GdW/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Spain" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Ces&hl=en'); return false;"><img alt="Spain" border="0" align="absbottom" title="Spain" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijT2y3OUdIDxJ5f7qYB6GnymCgZiuJTroCVK31e9R6krRt0TvKyPxGdg3pl9IXeoNCyrKWCCVPKH2ybRoqsOHbRTjVGoNmrwL3xffnxpe_kqw3M2fH-WantLkje-nEVGWyeIKVnJXbAI0O/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Italian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cit&hl=en'); return false;"><img alt="Italian" border="0" align="absbottom" title="Italian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0nHAH5GoykykeU8n0C0iCBkZMOFc12RbgYdDxBLhZwzxeFyMShxpgud2fkbru9zuPGKM1S8zP__vIIJCPoqrqSkKmZmPYH3NtUl4GXtuiVK3YcQ6WHDaogMbil5RvsMz28MwwTjMjSFI/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Dutch" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cnl&hl=en'); return false;"><img alt="Dutch" border="0" align="absbottom" title="Dutch" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg23W5qp3bsnxkgAtkIYQ2cD9_QSJFWtzx2eCq5mFRN4PrIyUa2KT1lYP8v9SYOfFznuEqaj2A-8KD3Mq0qaQvRdKx3j2JABo8-LYWEv96pr4GkZ6A_XjVTcfT8XOh0lbTuhhWUD7bCJSU/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<br /><br />

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Russian" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cru&hl=en'); return false;"><img alt="Russian" border="0" align="absbottom" title="Russian" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYjqWGHMHexzn2XDl2DfAoBmftKo0Mps9YSLOtkIEBmpz_-1raOdUSVETrit3wcL0QUUImF_UuK2cgXkwqhpudqTYojF9uf_B8dgotVyaDPMx8_o4WovglpYFGobKsc1n6s3Sbs7gQ9S4/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Portuguese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cpt&hl=en'); return false;"><img alt="Portuguese" border="0" align="absbottom" title="Portuguese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjd2-SMKjHvXWUixqyfxy99lafyMTRpMkap-WwW5vf0d9v_LhH8nOvrmtncXa_Ef_-OQjwSdpi9jKfFHKlUM1JkAFtB5iioVEv4CiDQqIllcJZtqIw8qiqMye5TqU0vUIBc5u3jkbkTavY/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Japanese" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cja&hl=en'); return false;"><img alt="Japanese" border="0" align="absbottom" title="Japanese" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4m2N-_vZl3eStTYMY8sU1ZDXhHDuEUoXmRwn9l_zuw0niT9DuIvQxQJY0SUFRHfsvVsN_qZ6oK299Y55gEWr0aA7DqR0Lvso-aBqCt-WWXYeT4efEjYZ9-oXqPnvMdmo6KmpiuOqmIgSQ/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Korean" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Cko&hl=en'); return false;"><img alt="Korean" border="0" align="absbottom" title="Korean" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaK4Fg1bCf27LLEd1P9tgiea14NtvYOtcWyl2FO0BfzDfEMNOZ2sWFgIfM9xE-fw2S1NlvVvRq1BsqUsscof4RjBZi_6qPlgiNJnw0-WvDIUiV9a_Zv96ifjSiduiJDesMPOG6fqtyj_Y/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Arabic" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Car&hl=en'); return false;"><img alt="Arabic" border="0" align="absbottom" title="Arabic" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0D3FsiV4R2KmLGr8HOV4aPiHPEPn3CU0-SwAvOX5wOBr6Lx6aty8EcbDQVi9ovn9pZIIHjcoQu36jtngNjLhh3YLi-30a8hjip-aRQnGlwjI_o7ELvNqGnuBpp0KaPiXQSntcPC0dqmw/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>

<a class="google_translate" href="#" target="_blank" rel="nofollow" title="Chinese Simplified" onclick="window.open('http://translate.google.com/translate?u='+encodeURIComponent(location.href)+'&langpair=id%7Czh-CN&hl=en'); return false;"><img alt="Chinese Simplified" border="0" align="absbottom" title="Chinese Simplified" height="32" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif7SiavHCIGqtL4hM6xHBj3w1D14ved7kItlwHepnslucBYJdRJ71ZgQk3QDIke47I96DStmv72Uz9ZljLauPqa0kyPywc7HOtImQevviinjWucFg8_6KPCjYqVWfejQL7V3w4lcVL3AI/?imgmax=800" style="cursor: pointer;margin-right:10px" width="24"/></a>
</div> <div style="font-size:10px;margin:8px 0px 3px 0px">
by : <a href=http://www.blogspottutorial.com/>BTF</a>
</div>



7. Kalau sudah selesai, klik Save dan jadilah Translate bentuk bendara yang cantik.
Selamat mencoba dan semoga berhasil.


Baca Selengkapnya...

Cara Membuat Read More/ Baca Selengkapnya

on 06/02/10

Para blogger utamanya para pemula (seperti saya) kalau melihat postingannya banyak akan merasa senang terlebih hasil karyanya itu sangat bagus dan banyak orang yang berkunjung ke blognya. Tapi tidak jarang juga orang yang akan bosan jika melihat dan membaca isi postingan kita yang di depan terlalu panjang.
Dengan kasus yang seperti itu, di sini saya akan sedikit bercerita tentang bagaimana mengatasi masalah itu. Salah satunya kita harus membuat sebuah tulisan yang fungsinya ajaib bin nyata yaitu kita harus membuat yang namanya Read More/ Baca Selengkapnya... yang biasanya ada pada sebuah blog milik blogger yang sudah profesional.

Saya tidak akan bicara panjang lebar (kalau panjang kasihan ibunya kalau lebar kasihan bapaknya), saya akan memberikan caranya buat anda.

  • 1. Pertama buka menu Layout--> Edit HTML
  • 2. Terus beri tanda centang di Expand Widget Templates
  • 3. Cari kode seperti di bawah ini, biar mudah carinya tekan Ctrl+F pada keyboard lalu masukkan kode yang ada di bawah:


    <p><data:post.body/></p>


  • 4. Kalau sudah ketemu ganti kode tersebut sehingga akan berubah seperti di bawah ini:



  • <b:if cond='data:blog.pageType == "item"'>
    <style>.fullpost{display:inline;}</style>
    <p><data:post.body/></p>
    <b:else/>
    <style>.fullpost{display:none;}</style>

    <p><data:post.body/></p>

    <a expr:href='data:post.url'>Read More......</a>
    </b:if>



    Kalau kamu pengen yang muncul bukan Read More melainkan Baca Selengkapnya... ganti tulisan Read More di atas dengan Baca Selengkapnya...
  • 5. Kalau semuanya sudah beres, baru kamu simpan hasilnya

  • 6. Kemudian kamu pilih/klik menu Setting-->Formatting
  • .
  • 7. Lihat kotak yang ada di bawah yaitu Post Template, lalu isi kotak tersebut dengan kode di bawah ini:


    <span class="fullpost">


    </span>



  • 8. Ketika akan memposting pilih yang menu Edit HTML, secara otomatis kode di atas akan muncul di area tempat poting.

  • 9. letakkan artikel yang kemu inginkan yang akan muncul dihalaman depan di atas kode
    <span class="fullpost"> dan sisanya taruh di bawahnya kode tersebut/di antara kode <span class="fullpost"> dan </span>.


  • Nach jadilah artikel hemat yang kamu inginkan. Selamat mencoba dan semoga sukses... :)

    Baca Selengkapnya...