Untuk membuat suatu website memang banyak sekali caranya. Ada yang menggunakan program program seperti Microsoft FrontPage, Macromedia DreamWeaver, PHP, HTML, dan sebagainya. Dan pada kesempatan kali ini kita akan belajar membuat website sederhana dengan menggunakan HTML. Adapun program yang dibutuhkan bisa dengan PHP Coder ataupun hanya dengan NotePad saja. Jika anda tidak punya PHP Coder, maka anda bisa menggunakan NotePad yang sudah pasti terinstall disetiap komputer yang mempunyai sistem operasi Windows XP.
Nah, sekarang kita mulai saja belajar HTML ini. Untuk langkah pertama, bukalah Notepad. Bagi yang lupa atau belum tahu, NotePad terletak pada START – ALL PROGRAMS – ACCESSORIES – NOTEPAD. Setelah program NotePad dijalankan, tulislah kode kode atau listing program HTML dibawah ini : (sedangkan hasil dari tulisan tersebut dapat anda lihat pada gambar.
<html>
<head>
<title>halaman 1</title>
</head>
<body text=”white” bgcolor=”blue”>
ini untuk percobaan……
<br>
testing…testing…testing
<br>
<p align=”center”> <font size=15 >
selamat datang di websiteku
<hr size=10 color=”red” width=75%>
<font size=6 color=”yellow”>
<marquee>assalamualaikum</marquee>
<br>
<br>
<font size=4 color=”white”>
selamat belajar HTML dasar.
<br>
ini adalah halaman pertama.
<br>
silahkan mencoba.
<br>
<br>
<center> <img src=”C:\gambar\sanji.jpg”>
<p align=”center”>
mari kita menuntut ilmu
<br>
<br>
<br>
pencet gambar zoro di bawah ini untuk menuju ke halaman 2
<br>
<a href=”dua.html”><img src=”C:\gambar\zoro.jpg”></a>
</body>
</html>
PENJELASAN dari listing program HTML diatas adalah:
- Setiap kali menulis program HTML, pada bagian teratas harus ditulis kata <html> yang menandakan bahwa ini adalah awal dari kode program HTML yang kita buat. Sedangkan pada bagian terbawah harus ditulis kata </html> yang menandakan bahwa ini adalah akhir dari kode program HTML yang kita buat.
- Ingatlah bahwa pada beberapa format tulisan, kita harus mengawali dengan tanda <> dan mengakhirinya dengan tanda </>. anda dapat melihat perbandingannya dengan melihat pada listing program diatas.
- Pada program HTML terdiri dari 2 bagian utama yaitu:
1. HEAD atau bagian kepala yang biasanya berisi title atau judul dari program HTML yang kita buat.
bagian ini diawali dengan kata <head> dan diakhiri dengan kata </head>
2. BODY atau tubuh yang berisi isi utama dari program yang kita buat.
bagian ini diawali dengan kata <body> dan diakhiri dengan kata </body>
- Pada bagian HEAD, tulislah Title atau judul dari halaman program yang kita buat ini. Caranya seperti yang sebelumnya yaitu Diawali dengan kata <title> dan diakhiri dengan kata </title> (judul ditulis ditengah diantara awal dan akhir kata tersebut).
- Selanjutnya dibawah ini kita membahas bagian BODY.
- body text=”white” bgcolor=”blue” maksudnya adalah: warna tulisan pada halaman web yang kita buat akan menjadi berwarna putih sedangkan warna latar belakang atau background dari halaman web tersebut berwarna biru.
- Pada bagian body jika ingin menuliskan sesuatu, kita tinggal tulis saja tulisan yang kita inginkan seperti contoh diatas saya menulis kalimat “ini untuk percobaan…… ” dan kalimat “testing…testing… testing” .
- UNTUK PINDAH PARAGRAF BARU GUNAKAN KODE <br>.
- Perhatikanlah bahwa tulisan “selamat datang di website ku” posisi tulisannya berada di tengah dan ukuran fontnya 15.
Untuk merubah posisi tulisan tersebut digunakan kode <p align=” “>. Jika ingin posisi tulisan ditengah, gunakan p align=”center”. Jika ingin posisi tulisan dikiri, gunakan p align=”left”. Jika ingin posisi tulisan dikanan, gunakan p align=”right” .
Untuk merubah besarnya tulisan digunakan kode <font size= > isilah dengan ukuran berapa saja sesuai dengan keinginan anda.
- selanjutnya kita membuat garis dengan kode <hr>
untuk merubah besar kecilnya garis gunakan SIZE, untuk merubah warna garis gunakan COLOR dan untuk merubah lebar garis gunakan WIDTH dengan menggunkan persen.
- Berikutnya saya menulis kalimat “Assalamualaikum” dengan ukuran tulisan (font size) =6 dan warna tulisan (font color) =kuning.
Sedangkan kata <marquee> digunakan untuk membuat tulisan “Assalamualaikum” tadi bergerak dan berjalan sendiri ke samping. (menarik khan !).
- Pindah paragraf baru lagi dengan kode <br>
- Untuk selanjutnya saya merubah tulisan dibawah sampai seterusnya menjadi berukuran 4 (font size) dan berwarna putih (font color). dan isi tulisannya terserah anda.
- Sebagaimana yang anda lihat pada hasil halaman web yang telah jadi, disitu ada gambar tokoh kartun dari film one piece yaitu sanji.
Adapun cara untuk meletakkan gambar tersebut adalah dengan menuliskan kode <img src=”letak gambar dan nama gambar beserta tipenya”>.sebagai contoh letak gambar yang saya pakai ada di drive C dan didalam folder Gambar. sedankan nama gambar yang saya pakai adalah sanji. dan tipe gambar tersebut adalah .jpg. Anda bisa merubah gambar tersebut sesuai keinginan anda.
Adapun maksud dari kode <center> adalah posisi dari gambar tersebut menjadi ke tengah. anda bisa merubah letak dari gambar tersebut menjadi ke kiri (left) atau kanan (right).
- Jika ingin merubah posisi tulisan gunakan kode <p align=” posisi tulisan “> (seperti pada tulisan “mari kita menuntut ilmu”sedangkan untuk merubah posisi gambar cukup langsung ditulis posisinya saja contoh: <center> (seperti pada gambar Sanji One Piece yang tadi).
- Untuk membuat LINK atau menuju ke suatu objek misalkan saja ingin menuju ke halaman lain, gunakan kode <a href=”objek yang dituju”> dan jangan lupa diakhiri dengan kode </a>
Sebagai contoh, saya menulis kode <a href=”dua.html”><img src=”C:\gambar\zoro.jpg”></a> maksudnya jika saya memencet gambar ZORO (lihat hasil halaman web yang sudah jadi), maka saya akan pindah menuju ke halaman dua.
- Demikianlah tutorial untuk belajar HTML halaman pertama untuk selanjutnya kita menuju ke halaman ke dua. Terima kasih !
By: OPIX HOLMES
opix.holmes@yahoo.com
www.islamicunderground.wordpress.com
Tidak ada komentar:
Posting Komentar