Newsletter

Senin, 22 September 2014

Home » » Yukk belajar HTML ^^

Yukk belajar HTML ^^

By  07.10.00  No comments

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 kode  atau script 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 mulai belajar HTML kita akan menggunakan Texs Editor, Notepad. Di bawah ini adalah contoh suatu dokumen HTML yang sangat sederhana. Buka Notepad, silahkan mulai dengan mengetikkan (copy/paste) kode di bawah ini:
<html>
<head>
<title>Titel Websiteku</title>
</head>
<body>


Ini adalah dokumen HTML pertamaku
</body>

</html>


atau seperti ini 



<html>



<head>



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



<metaname="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>





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.



Contoh :
color="#ed260b"



mudah - mudahan jelas ya.








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



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 :







lalu saya akan berbagi cara membuat tabel dengan script sperti ini :



<html>



<head>



<title>Membuat Tabel</title>



</head>



<body>







<table width="400"
border="1">



<tr>



<td>&nbsp;</td>



<td>&nbsp;</td>



</tr>







<tr>



<td>&nbsp;</td>



<td>&nbsp;</td>



</tr>






<tr>



<td>&nbsp;</td>



<td>&nbsp;</td>



</tr>



</table>



</body>



</html>






hasil dari penullisan kode HTML adalah sebagai berikut : 







selanjutnya saya
akan berbagi cara membuat kolom dengan script sperti ini : 


<html>


<head>


<title>Membuat Tabel</title>


</head>  




<body>


<table width="400" border="1">


<tr>


<td colspan="2">&nbsp;</td>


</tr>


<tr>


<td>&nbsp;</td>


<td>&nbsp;</td>






</tr>


</table>


</body>


</html>



hasil
dari penullisan kode HTML adalah sebagai berikut :







belajar mebuat kolam udah
baris udah elanjutnya apaa yaaa.. nah kita akan membuat gabungan baris dan
kolom ahaaaa silahkan liat scriptnya ya :


<html>


<head>


<title>Membuat Tabel</title>


</head>


<body>


<table width="400" border="1">


<tr>


<td rowspan="2">&nbsp;</td>


<td>&nbsp;</td>


</tr>


<tr>


<td>&nbsp;</td>


</tr>


</table>


</body>


</html>



hasil
dari penullisan kode HTML adalah sebagai berikut :






emm kayanya kurang ya mau bikin apa lagi? Mau bikin olshop lewat html? Yukkk mari kita coba


1.  Pertama tama kita harus cari tema  ol shop apa yg akan kita jual, setelah dipikir yg akan dijual cari atau foto gambar barang yg akan dijual, cari gambarnya lebih dari 1 yaaa J 


2.  Mari kita buat header di photoshop ukurannya 


    kita coba dengan script ini 











buka lewat note pad atau note pad ++ juga bisa :)

header.gif atau nama background dirubah menjadi nama foto kita dan jangan lupa format nama belakang ditambah .jpg/.gif yaa  J 





bgcolor="#FAD4D4">
dapat diubah euai warna keinginan kita dapat dilihat diatas lagi








dan disitu tertulis<pstyle="text-shadow:2px 2px 8px #BEF174;">



Apa sih rtinya? Kegunaan dr syntax tersebut merupakan bayangan dari tulisan yg kita
buat dengan warna  #BEF174 atau sesuai
selera





dan setelah mencoba membuat sytax yg sama mari kita lihat hasilnya... jangan lupa ya semua gambar dan foto jadikan satu folder :)



dan taaaraaaa.....




































































0
komentar:
        
















Posting Komentar