Memulai terjun kedalam aktifitas blogging mau-tidak mau akan berhadapan dengan pekerjaan koding / coding atau pengkodean baik itu bersifat dasar atau lanjutan seperti PHP programming. Boleh - boleh saja jika ada yang mengatakan blogging tak perlu mengetahui membuat kode, memodifikasi kode, tapi blogDUIT beranggapan tidak sepenuhnya benar. Pada tingkat lanjutan maka aktifitas 'oprek' source code adalah aktifitas penting yang suka atau tidak akan kita temui dan harus kita kerjakan apalagi bagi seseorang yang suka membuat template blog dan web designer.
Memang semakin mudahnya blogging karena ada software siap pakai berupa script CMS dan layanan blog gratis siap pakai menyebabkan banyak orang menganggap "tak perlu lah belajar coding yang rumit itu". Memang bagi pemula yang baru pertama kali mengenal dunia web sebaiknya memang jangan dulu memasuki wilayah coding yang berat.
Namun beberapa tag HTML umum yang mendasar ini perlu diketahui dan sifatnya 'fardu' agar tidak akan banyak menemukan kesulitan dalam mengisi konten atau memodifikasi blog atau web. Bahkan ketika berkomentar di blog lain pun pengetahuan dasar ini penting. blogduit.blogspot.com akan menjelaskan tag-tag HTML dasar beserta fungsi dan format-formatnya secara terperinci dan cukup lengkap.
Kita awali dari 'HTML Document structure' :
Sebuah dokumen HTML atau halaman web memiliki struktur dasar yang sama, yaitu :
<html>
<head>
Wilayah ini adalah area untuk header halaman salah satunya tempat menempatkan meta tag dan title tag
</head>
<body>
Wilayah ini adalah wilayah isi dokumen yang akan terlihat dalam browser
</body>
</html>
Yang harus diingat adalah bahwa setiap tag HTML itu direpresentasikan dalam bentuk buka tutup misalnya dalam tag link :
buka tutup berpasangan :
buka : <a>
tutup: </a>
atau single buka tutup misalnya
<hr/>
Harap ingat ingat juga perbedaan peletakan garis miring (/) pada tag yang buka tutup berpasangan dengan yang single, jika salah maka akan ditemukan error dalam desain web page misalnya menyebabkan salah penampilan atau layout dan lain sebagainya. Tag yang single, garis miring penutupnya disimpan diakhir misalnya <namatag/> sedangkan yang berpasangan disimpan diawal misalnya <namatag></namatag>. Dan ingat tag penutup itu tidak bisa kita isi dengan elemen tambahan.
Format - Format Tag HTML standar yang umum dan mendasar dalam aktifitas blogging :
Format Title Tag :
<title>Judul Halaman</title>
Tujuan penggunaan : menampilkan judul halaman baik di browser atau di hasil pencarian search engine seperti google
Format Meta Tag Description :
<meta name="description" content="deskripsi halaman"/>
Tujuan penggunaan : menampilkan deskripsi halaman yang akan ditampilkan mesin pencari
Format Meta Tag Keyword :
<meta name="keywords" content="keyword1, keyword2, dst..."/>
Tujuan penggunaan : merepresentasikan kata kunci halaman yang menginformasikan isi halaman sehingga mudah ditemukan di search engine.
contoh : <a href="http://blogduit.blogspot.com">BlogDuit</a>
Tujuan penggunaan : membuat link pada halaman untuk navigasi ke halaman lain atau web site lain
Format Tag Image :
format standar : <img src="url sumber image" width="ukuran lebar px" height="ukuran tinggi px"/>
Tujuan penggunaan : menampilkan gambar dalam halaman web yang pengaturannya dilakukan melalui elemen tambahan seperti width dan height atau melalui CSS (cascading style sheet).
Format Elemen tambahan :
Elemen tambahan ini bisa digunakan dan dimasukan kedalam tag pembuka
Format Text & Isi :
</style>
Tujuan penggunaan : mengatur style, gaya dan format halaman web dengan lebih efisien, umumnya diletakan di area tag <head> contoh :
<head>
</head>
Format Script / Javascript
<script type="text/javascript">
</script>
Tujuan penggunaan : script yang digunakan untuk menampilkan kontent lebih dinamis dan interaktif untuk berbagai fungsi dan tujuan
Format Form :
<form action="url tujuan" method='GET atau POST'>
</form>
Tujuan penggunaan : untuk melakukan request berdasarkan variable-variable didalamnya misalnya mencari, submit di kontak form, upload dan lain sebagainya
Tag input berikut digunakan di dalam area tag form diatas.
Umumnya tag ini berupa single tag yang penutupnya disimpan diakhir melalui garis miring
Tag Blocking :
div
div, bisa digunakan untuk melakukan blocking konten dengan format berdasarkan id-nya atau classnya, peletakan juga layout, yang ditentukan dalam CSS atau langsung dalam tag div bersangkutan. Misalnya ketika ingin membuat konten text dalam satu blok dengan alignment left, center, justify maka div bisa digunakan. Contoh :
<div style="text-align: center;">
Isi teks
</div>
div juga sering dipakai dalam membloking ads script atau iklan agar letaknya lebih sesuai dengan format yang kita tentukan.
Format Tag Comment / Komentar :
tag komentar disini maksudnya bukan komentar di blog tetapi komentar dalam source code halaman agar tidak dirender dan ditampilkan misalnya saat memberi keterangan bahwa halaman ini adalah halaman pemesanan barang.
format standarnya : <!-- isi komenetar-->
contoh : <!--halaman pemesanan barang-->
Semoga menambah wawasan
Memang semakin mudahnya blogging karena ada software siap pakai berupa script CMS dan layanan blog gratis siap pakai menyebabkan banyak orang menganggap "tak perlu lah belajar coding yang rumit itu". Memang bagi pemula yang baru pertama kali mengenal dunia web sebaiknya memang jangan dulu memasuki wilayah coding yang berat.
Namun beberapa tag HTML umum yang mendasar ini perlu diketahui dan sifatnya 'fardu' agar tidak akan banyak menemukan kesulitan dalam mengisi konten atau memodifikasi blog atau web. Bahkan ketika berkomentar di blog lain pun pengetahuan dasar ini penting. blogduit.blogspot.com akan menjelaskan tag-tag HTML dasar beserta fungsi dan format-formatnya secara terperinci dan cukup lengkap.
Kita awali dari 'HTML Document structure' :
Sebuah dokumen HTML atau halaman web memiliki struktur dasar yang sama, yaitu :
<html>
<head>
Wilayah ini adalah area untuk header halaman salah satunya tempat menempatkan meta tag dan title tag
</head>
<body>
Wilayah ini adalah wilayah isi dokumen yang akan terlihat dalam browser
</body>
</html>
Yang harus diingat adalah bahwa setiap tag HTML itu direpresentasikan dalam bentuk buka tutup misalnya dalam tag link :
buka tutup berpasangan :
buka : <a>
tutup: </a>
atau single buka tutup misalnya
<hr/>
Harap ingat ingat juga perbedaan peletakan garis miring (/) pada tag yang buka tutup berpasangan dengan yang single, jika salah maka akan ditemukan error dalam desain web page misalnya menyebabkan salah penampilan atau layout dan lain sebagainya. Tag yang single, garis miring penutupnya disimpan diakhir misalnya <namatag/> sedangkan yang berpasangan disimpan diawal misalnya <namatag></namatag>. Dan ingat tag penutup itu tidak bisa kita isi dengan elemen tambahan.
Format - Format Tag HTML standar yang umum dan mendasar dalam aktifitas blogging :
Format Title Tag :
<title>Judul Halaman</title>
Tujuan penggunaan : menampilkan judul halaman baik di browser atau di hasil pencarian search engine seperti google
Format Meta Tag Description :
<meta name="description" content="deskripsi halaman"/>
Tujuan penggunaan : menampilkan deskripsi halaman yang akan ditampilkan mesin pencari
Format Meta Tag Keyword :
<meta name="keywords" content="keyword1, keyword2, dst..."/>
Tujuan penggunaan : merepresentasikan kata kunci halaman yang menginformasikan isi halaman sehingga mudah ditemukan di search engine.
Format Tag Link :
format standar : <a href="url">teks yang muncul</a>contoh : <a href="http://blogduit.blogspot.com">BlogDuit</a>
Tujuan penggunaan : membuat link pada halaman untuk navigasi ke halaman lain atau web site lain
Format Tag Image :
format standar : <img src="url sumber image" width="ukuran lebar px" height="ukuran tinggi px"/>
Tujuan penggunaan : menampilkan gambar dalam halaman web yang pengaturannya dilakukan melalui elemen tambahan seperti width dan height atau melalui CSS (cascading style sheet).
Format Elemen tambahan :
Elemen tambahan ini bisa digunakan dan dimasukan kedalam tag pembuka
- Rel : <a rel="nofollow" ..... : menyatakan kepada search engine bahwa linknya nofollow
- Title <a title="judul untuk tool tips .... : menampilkan tool tips saat mouse melewati diatasnya
- Target <a target="_blank" .... : mengarahkan agar link dibuka di tab baru atau halaman baru
- Alt <img alt="Keterangan gambar" ... : menampilkan alternatif deskripsi sebuah gambar jika gambar tidak muncul.
Format Text & Isi :
- Break atau sama dengan karakter enter. Formatnya : <br/>
- Paragraph baru, formatnya : <p/>
- Garis horizontal, formatnya : <hr/>
- Bold, menebalkan text : <b>isi text <b/>
- Italic, miringkan text : <i>isi text </i>
- Color, mewarnai foreground text color, formatnya bisa dimasukan dalam tag yang ada misalnya dalam tag link <a href="http://blogduit.blogspot.com" style="color: red;">Blogduit</a>
- Heading h1, h2, h3, h4, h5 dst, membuat format text sebagai heading yang umumnya berukuran besar, formatnya : <h1>Isi teks</h1>
- Blockquote, <blockquote>Isi </blockquote>, membuat isi dalam format blockquote umumnya agak indent-nya agak menjorok kedalam. Biasanya dipakai untuk menandai sebuah kata-kata kutipan.
- Background, mengatur warna background misalnya : <a style="background:green;" ....
Format CSS / Style
<style type='text/css'></style>
Tujuan penggunaan : mengatur style, gaya dan format halaman web dengan lebih efisien, umumnya diletakan di area tag <head> contoh :
<head>
<style type='text/css'>
<!--
<!--
a{background:red;}
h1{color:green;}
-->
</style>
</style>
</head>
Format Script / Javascript
<script type="text/javascript">
</script>
Tujuan penggunaan : script yang digunakan untuk menampilkan kontent lebih dinamis dan interaktif untuk berbagai fungsi dan tujuan
Format Form :
<form action="url tujuan" method='GET atau POST'>
</form>
Tujuan penggunaan : untuk melakukan request berdasarkan variable-variable didalamnya misalnya mencari, submit di kontak form, upload dan lain sebagainya
Tag input berikut digunakan di dalam area tag form diatas.
Umumnya tag ini berupa single tag yang penutupnya disimpan diakhir melalui garis miring
- Hiden variable : <input type='hidden' name='nama' value='isi'/>
- Tombol : <input type='submit' name='nama-tombol' value='isi atau label'/>
- Input Text Satu Baris : <input type='text' name='nama' value='isi'/>
- Input Text Area : <input type='text-area' name='nama' value='isi'/>
Tag Blocking :
div
div, bisa digunakan untuk melakukan blocking konten dengan format berdasarkan id-nya atau classnya, peletakan juga layout, yang ditentukan dalam CSS atau langsung dalam tag div bersangkutan. Misalnya ketika ingin membuat konten text dalam satu blok dengan alignment left, center, justify maka div bisa digunakan. Contoh :
<div style="text-align: center;">
Isi teks
</div>
div juga sering dipakai dalam membloking ads script atau iklan agar letaknya lebih sesuai dengan format yang kita tentukan.
Format Tag Comment / Komentar :
tag komentar disini maksudnya bukan komentar di blog tetapi komentar dalam source code halaman agar tidak dirender dan ditampilkan misalnya saat memberi keterangan bahwa halaman ini adalah halaman pemesanan barang.
format standarnya : <!-- isi komenetar-->
contoh : <!--halaman pemesanan barang-->
Semoga menambah wawasan
0 Komentar