Monday 21st of May 2012


news menu leftnews menu right
Cara Membuat Website

Cara membuat website sederhana sebenarnya cukup mudah, namun untuk mengembangkannya diperlukan kreativitas dari masing - masing orang. sebelum membahas cara embuat website, di sini saya ingin terlebih dahulu memisahkan apa yang sering disebut orang sebagai website dan satunya lagi adalah blog. Kalau menurut saya pribadi, antara website dan blog adalah sama saja, yang membedakan adalah secara historis kalau blog adalah awalnya digunakan sebagai jurnal harian oleh pemiliknya. Namun seiring perkembangan jaman blog telah digunakan sebagai situs utama, bahkan banyak digunakan oleh perusahaan untuk menunjang pemasarannya. Blog adalah cara membuat website yang sangat mudah tanpa harus menguasai bahasa HTML. Sedangkan website pada awalnya dibangun dengan bahasa pemrograman seperti HTML, untuk membuat website diperlukan software web editor seperti Dreamweaver. Untuk cara singkat membuat website, kita tinggal cari template Dreamweaver, kemudian diedit dengan software Dreamweaver. Namun diperlukan pengetahuan bahasa HTML untuk membuat website dengan cara ini. Read more...

Masukkan email anda untuk berlangganan artikel gratis:

Delivered by FeedBurner


Ads on: Special HTML

Login Form



mod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_counter
mod_vvisit_counterToday312
mod_vvisit_counterYesterday887
mod_vvisit_counterThis week1199
mod_vvisit_counterLast week5020
mod_vvisit_counterThis month14134
mod_vvisit_counterLast month22478
mod_vvisit_counterAll days120535

We have: 8 guests online
Your IP: 38.107.179.220
 , 
Today: May 21, 2012
Belajar HTML, Modul Dasar Cara Membuat Kode HTML PDF Print E-mail
Internet dan Komputer
AddThis Social Bookmark Button

Belajar HTML,  Modul Dasar

Cara Membuat Kode HTML


Belajar HTML sebernarnya diperlukan kalau kita ingin terjun di dunia online, misalnya bisnis online karena sedikit banyak akan menuntut kemampuan kita dalam mengedit kode - kode HTML. Walaupun kita menggunakan blog engine seperti Wordpress yang mempunyai plugin - plugin yang lengkap, namun sering ditemui kita harus mengedit sidebar, menempatkan kode HTML, mengedit kode warna HTML, menempatkan tabel dan banyak kasus lainnya kita harus menguasai dasar - dasar HTML.

Untuk belajar HTML anda tidak perlu membeli modul khusus cara membuat kode HTML, dengan membaca artikel berikut ini saja anda sudah bisa belajar HTML sesuai keperluan anda untuk mengedit website anda. Pengertian HTML secara awam seperti saya adalah serangkaian kode - kode bahasa pemrograman yang digunakan untuk membangun website yang akan membentuk halaman - halaman situs setelah dionlinekan ke internet.

Untuk mempermudah anda dalam belajar HTML, di sini juga akan saya berikan contoh penerapan kode atau script HTML sehingga anda dapat mengikutinya dengan praktek pula. Bagi anda yang masih pemula, langsung saja kita lihat pembahasan kode HTML berikut ini :


Struktur kode HTML yang harus selalu ada di setiap halaman situs adalah:

<html>

<head>

<title>Tulis Judul Anda di Sini</title>

<meta name="description" content="tulis deskripsi/penjelasan singkat situs anda di sini">

<meta name="keyword" content="tulis kata kunci halaman anda di sini">

</head>

<body>

Di sini adalah konten / isi halaman anda

</body>

</html>

Cara membuat link atau tautan :

misalnya : kata yang terlihat dalam link adalah "cara membuat website"

alamat/URL dari halaman tersebut adalah  http://edyutomo.com/internet-dan-komputer/cara-membuat-website

maka kode HTML nya adalah :

<a href="http://edyutomo.com/internet-dan-komputer/cara-membuat-website">cara membuat website</a>

hasilnya adalah  cara membuat website

Belajar kode warna HTML untuk mengedit warna teks :

<font color="red">kata yang diedit</font>, ini akan mengubah warna teks menjadi merah.

Kombinasi kode warna HTML, paragraf baru, ukuran huruf dan jenis huruf :

<p align="left"><font face="arial" size="6" color="red">kata yang diedit</font></p>

ini akan membuat paragraf menjadi rata kiri, dengan jenis huruf arial, ukuran 6 dan warna teks menjadi merah.

Lalu bagaimana untuk membuat warna menjadi warna campuran, ah... itu gampang. Caranya anda buka photoshop, lihat gambar di bawah :

klik kotak merah yang saya lingkari, kemudian akan muncul kotak dialog color picker, lalu cari warna yang anda inginkan, lalu copy code warna yang ada di bawah ( saya tandai ), setelah itu anda paste pada kode warna HTML untuk mengedit warna. mudah - mudahan jelas ya.

Kode HTML lainnya :

<p>isi paragraf</p> , untuk membuat paragraf baru

<br>isi kalimat</br> , untuk membuat baris baru

<b>kata/kalimat</b> , untuk membuat teks tebal

<i>kata/kalimat</i> , untuk membuat kata miring

<u>kata/kalimat</u> , untuk membuat garis bawah

Belajar cara menyisipkan kode HTML untuk gambar :

Sebelum kita menyisipkan gambar, terlebih dahulu kita harus mengupload foto atau gambar untuk mendapatkan link dari gambar tersebut untuk keperluan menyisipkan gambar yang telah kita tentukan. Lihat cara upload foto atau gambar.

sebagai contoh saya telah mengupload gambar pada situs image hosting http://photobucket.com, sehingga saya mendapatkan url link gambar seperti berikut ini :

http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif

Sebagai contoh, lihat ilustrasi contoh penerapan kode HTML di bawah ini :

<p>di bawah ini adalah contoh gambar :</p>

<img src="http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif">

hasil dari penullisan kode HTML adalah sebagai berikut :

Belajar  kode HTML untuk  menyisipkan link pada gambar

Sebagai contoh, berdasarkan gambar di atas, kita akan menyisipkan link menuju halaman  http://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak, maka kode HTML yang perlu dibuat adalah sebagai berikut :

<a href="http://edyutomo.com/anak-dan-balita/kumpulan-puisi-anak"><img src="http://i1095.photobucket.com/albums/i480/satujambi/contoh1.gif"></a>

Hasilnya akan menjadi sebagai berikut :



Coba anda klik gambar di atas, pasti akan terbuka halaman yang dituju. Selamat anda sudah dapat membuat link pada gambar.

Artikel Terkait Lainnya :

 


Powered by Joomla!. Designed by: joomla templates celebrity search Valid XHTML and CSS.