Thursday, July 05, 2007

Tutorial HTML 1

Untuk bisa membuat template Blogger (classic) atau yang lain, pertama harus punya pemahaman tentang dasar-dasar HTML (hypertext Markup Language). HTML merupakan kumpulan tag-tag yang nantinya akan menyusun halaman dan variasinya.

HTML versi terakhir adalah XHTML, menggantikan versi sebelumnya HTML 4.01. W3C (world wide web consortium) merekomendasikan untuk menggunakan XHTML.

Dasar HTML.
Semua halaman HTML akan mempunyai susunan dasar:

<html>
<head>
</head>
<body>
</body>
<html>

Yang harus diperhatikan dalam menulioskan tag XHTML:
Selalu menggunakan huruf kecil:

<BODY> ini salah
<body> ini benar

harus ada tag penutup

<p> 'ini adalah paragraf salah
'dalam html ini boleh, tapi dalam XHTML tidak boleh
'ini yang benar:
<p> ini paragraf yang benar</p>

Susunan harus tepat (nested)

<b><i>Tulisan miring</b></i> ini salah
<b><i>Tulisan miring</i></b> ini benar


untuk memberikan nilai harus ada tanda petik:

<table width=100px> ini salah
<table width="100px"> ini benar


untuk elemen yang tidak ada penutupnya diakhiri dengan garis miring /

<br/> seperti spasi enter
<img /> menampilkan gambar
<hr /> garis
<meta ../> elemen meta


Contoh susunan Template untuk 3 kolom 3 baris

<table width="750px" cellpadding="0" cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
'script diatas untuk baris pertama
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
baris kedua

<td></td>
<td></td>
<td></td>
</tr>
baris ketiga


Tempatkan script di atas diantara tag <body>...</body>

tag-tag HTML:

<table> table
<tr> baris
<td> kolom
<i> tulisan miring
<strong> tulisan tebal
<texarea> textarea
<img> menampilkan gambar
<a> menamilkan link

Contoh penggunaan
Membuat link ke url:

<a href="url">nama link</a>
<img src="url" width="300px" />
<ul>
<li>ini list 1</li>
<li>ini list 2</li>
<li>ini list 3</li>
</ul>

[bersambung]

7 comments:

fahdLuvJapan said...

mau tanya, kalau tag untuk nyusun artikel di blog supaya jadi rapih (justify)..makasih

DetikPhoto said...

@atas
Khan ada tombol justify di menunya postingan blog.

meds said...

u fahdluvjapan,

bisa dengan dua cara, seperti yang ditulis detikpoto, dengan tombol justify. Atau membuat pemformatan justify untuk paragrap di main sidebar. untuk yang kedua akan menghasilkan rata kiri kanan secara default.

contoh: .main p { text-align:justify}

sudutblog said...

tanya mas, saya mau menambahkan blog lain melalui "elemen" termasuk gambar dan teks, caranya gimana yah mas...
trims.

meds said...

u sudutblog, untuk menampilkan isi blog lain ke blog kita pakai saja elemen feed, masukkan url "alamatblog/atom.xml", hasilnya list judul blog lain, tapi hanya 5 list.

untuk menampilkan halaman lain secara utuh saya belum tahu.

Sangkaisar said...

Saya sampai sekarang masih bingung nih... mengenai pemisahan category... kalo diblog aku yang sekarang yang ada kan arcieve .. sementara aku rencana mau memperlebar topik .. tidak hanya mengenai making money and marketing. nah agar postingan tidak campur aduk ga karuan .. gimana cara misahinnya?... kalau memakai label ... gila ampe puluhan keluar otomatis. apakah tag/keywordnya yg kita revisi. trus cara update label gimana? aku ga tau deletenya .

please dibantu ya ...

meds said...

u sang kaisar,
wah untuk urusan ini saya kira saya yang harus beguru pada anda, tampilan di pfBlog saya malah tidak tahu.

mengenai update label juga, saya tidak tahu bagaimana editnya. kecuali manual, stau-satu. tapi untuk blog dengan jumlah postingan ratusan ya repot.

Mohon maaf ya, saya juga brau belajar.