Selasa, 13 Desember 2011

Belajar Dasar HTML Merancang Web atau Blog

Seperti yang sudah anda ketahui pada posting saya terdahulu tentang Mengenal Hypertext Markup Language (HTML),  secara ringkas HTML adalah kode yang terdiri dari rangkaian tag untuk menampilkan suatu visual pada halaman Web atau World Web Wide (WWW). Kode HTML ini memungkinkan anda untuk membuat halaman web dan menempatkan  apapun yang anda suka.

Baiklah, mari kita langsung ke intinya. Disini anda akan mempelajari sebenarnya betapa mudahnya untuk membuat sebuah web atau blog. Bahkan pada saat anda selesai membaca posting saya ini , saya yakin anda akan bisa membuat web anda sendiri.
Semudah itukah…? Jawabynya iyaa!, jika anda tekun dan selalu bersemangat, OK!.

Langkah-langkah didalam menyusun sebuah web/blog umumnya adalah sebagai berikut :

1.    Membuat dan menyimpan file HTML
2.    Masukkan kode HTML
3.    Lihat hasilnya di browser (preview)
4.    Ulangi langkah 3 dan 4 jika perlu

Baiklah, mari kita bahas langkah-langkah diatas dengan lebih rinci satu-persatu.

1. Membuat dan menyimpan file HTML
Sebuah file HTML adalah sebuah file teks yang disimpan dalam bentuk  ekstensi “html”.
Jalankan program Notepad editor pada komputer jika anda menggunakan OS Windows, TextEdit jika anda menggunakan Mac. Anda juga dapat  menggunakan pengolah teks HTML khusus seperti Dynamic HTML Editor, Notepad++ dan lain sebagainya.

2. Masukkan kode HTML
-  Buat sebuah file baru pada Notepad anda
-  Simpan file dengan nama  “web pertamaku.html” (tanpa tanda kutip).

Ketik atau copy paste kode HTML berikut  ini ke Notepad anda :


<DOCTYPE HTML PUBLIC "- / / W3C / / DTD HTML 4.01 / / EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
          <title> Contoh Halaman Web Sederhana </title>
    </Head>
          <body> <p> INILAH WEB PERTAMAKU…! </p></Body>
</Html>


3. Lihat hasilnya di web browser (Preview)
Lihat hasilnya di web browser anda, tau caranya?, jalankan web browser anda (Firefox atau Internet Explorer), pada menu klik File -> Open File , lalu arahkan ke direktori dimana anda menyimpan file “web pertamaku.html” tadi, dan lihat hasilnya.

---- Cara lain ----
Arahkan ke direktori dimana anda menyimpan file “web pertamaku.html” menggunakan windows explorer, lalu klik 2 kali pada  file tersebut.

blogbudaqdegil.blogspot Belajar Dasar HTML Merancang Web atau Blog

4. Ulangi langkah 3 dan 4 jika perlu
Anda bakalan sering melakukan hal diatas, meng-edit kode html anda kemudian melihatnya lagi di web browser, akan sangat sering, begitu terus berulan-ulang, karena saya yakin anda ingin memastikan hasil dari kreasi anda terlihat apik dan optimal.
Tapi jangan khawatir , hal itu wajar, suatu saat anda akan mengerti mengapa saya berkata demikian.

Penjelasan sederhana dari kode-kode dan tag diatas
OK, sebelum kita lanjutkan, saya akan menjelaskan secara sederhana apa arti dari kode-kode atau tag html diatas.

Sekelompok kode tag HTML ini memerintahkan browser anda apa dan dimana akan menampilkan suatu konten.

Anda juga mungkin sudah mengamati  bahwa pada setiap tag "pembuka" selalu diakhiri dengan tag "penutup", seperti <html> - </html>, <title> - </title>, <head> - </head>, <body> - </body>, perhatikan juga  konten atau materi yang ingin ditampilkan selalu diapit di antaranya. Sebagian besar  tag HTML harus dibentuk dengan tag pembuka dan penutup.

Sebuah halaman web pada umumnya minimal harus berisikan kode tag seperti pada contoh diatas.

Perhatikan  tag :


 <head>
              <title> Contoh Halaman Web Sederhana </title>
    </Head>


Tag “<title> Contoh Halaman Web Sederhana </title>“  ini ditampilkan pada Judul Tab dan Judul Halaman dari web browser (perhatikan gambar).

Sedangkan tag “<body> <p> INILAH WEB PERTAMAKU…! </p></body>” tampil di halaman utama (body).

Selamat mencoba.

11 komentar:

Cendana Wira mengatakan...

tengkyu infony gan
salam kenal

Fahrul walid mengatakan...

keren bos..sharing mode on...salam kenal

epulsa-elektrik mengatakan...

Terus terang iniinfomasi sangat menarik sehingga dapat
menambah wawasan dan pengetahuan saya
Terima kasih, ditunggu posting lainnya.

dhul mengatakan...

good




http://leazousnet.90op.com/

Matori Kunduran mengatakan...

makasih infonya jgn lupa mpir jg ke www.matorikunduran.blogspot.com kritik saranya y.

raja listrik mengatakan...

cool...
Online Shop

hengki kristianto mengatakan...

trims infonya gan, bermanfaat buat saya yang masih newbie..
Gan, kalau ada waktu kunjungi blog saya, tolong di koment ya.. tolong bantu blog saya yang masih newbie nih.. Ini blog saya http://hengkikristiantoateng.blogspot.com
(belajar menjadi blogger), trims b4

van cesc mengatakan...

nice share, thanks ya jadi nambah ilmu nih.

Roller Blind

Rio Andreas mengatakan...

Mksih dah brbagi ilmu...

akrom faaza mengatakan...

makasih banget gan! Q blogger pemula nih... Tolong sobat2 blogger kasih masukan untuk blogQ, gmn biar tambah siiip, gitu!
http://www.tazakkagroup.blogspot.com

MalaysiaBandung.com mengatakan...

Terima kasih informasinya. Sangat membantu sekali bagi yang ingin belajar membuat website. Terus diupdate kontenya ya gan

Poskan Komentar