Cara Membuat Website statis Sederhana dengan html tanpa css, tampilan akan jadi seperti ini
Jika ingin mencoba silahkan simak, jika tidak ya jangan simak :3
WARNING, Untuk yg udah pro jangan baca!! ini untuk newbie aja!
Pada permulaan siapkan aplikasi berikut untuk memudahkan pembuatan website
· Sublime Text atau Notepad++
· Xampp
· Browser (bebas, contoh Opera atau Chrome)
Aplikasi Sublime Text atau Notepad++ berguna untuk memudahkan saat memasukan bahasa program pada pembuatan website, bahasa program dalam website ada 3 macam yang akan kita pakai, yaitu html,css dan php.
Fungsinya adalah sebagai server yang berdiri sendiri (localhost), yang terdiri atas program Apache HTTP Server, MySQL database, dan penerjemah bahasa yang ditulis dengan bahasa pemrograman PHP dan Perl. Jadi dengan aplikasi ini kita bisa membuat server website offline untuk uji coba pembuatan website kita.
Browser tentu saja untuk menampikan web yang telah kita buat sebelumnya.
Selanjutnya setelah bahan-bahan sudah di siapkan, mari kita masak!!
Buka folder htdoc pada xampp, atau buka folder pada dicertory “C:\xampp\htdocs”
Buat folder dengan nama “latihan”
Buka sublime atau notepad++ juga gk masalah, tapi di sini saya akan menerangkan menggunakan sublime
Buat file baru dengan sublime, save dengan nama index.php pada folder yang sebelumnya kita buat
Di “C:\xampp\htdocs\latihan”
Setelah itu masukan script dasar bahasa html untuk membuat website
<html>
<head><title></title></head>
<body>
</body>
</html>
|
Keterangan:
<html> untuk mengindentifikasi bahwa ini adalah bahasa html, jika kamu mencoba tidak menggunakan ini di awal maka bahasa html tidak akan berjalan dengan semestinya!
<head> saya sendiri menyebutnya kepala, gunanya untuk membuat suatu perintah html yang tidak di tampilkan di body, misal untuk judul atau untuk memanggil css
<body> adalah sebuah tempat yang akan menampilkan isi dari web, kebanyakan code html akan di masukan di sini!
Sekarang kita coba untuk memasukan judul dan isi di web percobaan kita,
Masukan kata “web coba-coba” sebagai judul dan “selamat datang” sebagai isi dari web.
Jadinya seperti di bawah ini:
<html>
<head><title>Web Coba-Coba</title></head>
<body>
Selamat datang di websiteku
</body>
</html>
|
Untuk melihat hasil buka browser bebas, misal browser opera, lalu tulis “localhost/latihan” di link
Dan hasil akan terlihat seperti ini:
Kalo kamu bertanya-tanya kok sederhana banget?? Ini belum selesai bang, simak sampe ahir!!
Selanjutnya mari kita buat judul dan keterangan seperti ini
<html>
<head><title>Web Coba-Coba</title></head>
<body>
<h1>WEBSITEKU</h1>
<p>Selamat datang di website ku, kalo mau ngopi silahkan cari ke dapur dan seduh kopi sendiri!! Itupun kalo di dapur kamu ada kopi, klo gak ada beli sendiri, itupun kalo kamu punya duit!! Klo gk punya duit minjem ke temen, itupun klo kamu punya temen!! Jangan minta ke orang tua!! Lu gk malu klo hidup lu nyusahin orang tua?</p>
</body>
</html>
|
Keterangan code
<h1> adalah ukuran font pada text, selain h1 kamu juga bisa menggunakan <h2>,<h3>,<h4> dan seterusnya, semakin besar nomor akan semakin kecil ukuran font yang di hasilkan.
<p> di gunakan untuk membuat sebuah paragraph
Hasil akan jadi seperti ini:
Selanjutnya mari kita beri masukan gambar, tambahkan script berikut kedalam body
Sebelum memasukan script/coding, pertama pindahkan dahulu gambar yang ingin kita masukan ke website kedalam folder latihan yang telah kita buat tadi, klo lupa directorynya saya ingetin lagi ini: “C:\xampp\htdocs\latihan”
Gambar bebas, klo bingung silahkan download gambar ini:
Dan masukan ke dalam folder latihan, agar lebih mudah saat pemanggilan nanti, ubah nama gambar ini dengan nama “gambar1”,cobalah ingat nama gambar beserta format’y lalu kembali ke aplikasi sublime, tambahkan script ini ke dalam body
<img src=”gambar1.gif”>
Tag img berguna untuk memanggil gambar, dan src di isi dengan nama gambar beserta formatnya yang ada di folder htdoc.
Dan akan jadi seperti ini:
<html>
<head>
<title>Website Coba-Coba</title>
</head>
<body>
<h1>WEBSITEKU</h1>
<p>
Selamat datang di website ku, kalo mau ngopi silahkan cari ke dapur dan seduh kopi sendiri!! Itupun kalo di dapur kamu ada kopi, klo gak ada beli sendiri, itupun kalo kamu punya duit!! Klo gk punya duit minjem ke temen, itupun klo kamu punya temen!! Jangan minta ke orang tua!! Lu gk malu klo hidup lu nyusahin orang tua?
</p>
<img src="ngantuk.gif">
</body>
</html>
|
Simpan dan buka browser dan gambar akan muncul:
Nah gambar memasukan gambar ke website telah berhasil!!
Sekarang ayo kita ganti background putih di website kita ini dengan gambar supaya lebih menarik!!
Pertama sepertihanya gambar1, masukan dahulu file gambar yang akan di jadikan background ke folder latihan, jika bingung gambar apa yang ingin di gunakan untuk background, silahkan download gambar berikut!
Beri nama “back”, dan kembali ke aplikasi sublime
pada tag <body> tambahkan atribut background seperti ini
<body background=”back.gif”>
Dan hasil akan jadi seperti ini:
<html>
<head>
<title>Website Coba-Coba</title>
</head>
<body background="back.gif">
<h1>WEBSITEKU</h1>
<p>
Selamat datang di website ku, kalo mau ngopi silahkan cari ke dapur dan seduh kopi sendiri!! Itupun kalo di dapur kamu ada kopi, klo gak ada beli sendiri, itupun kalo kamu punya duit!! Klo gk punya duit minjem ke temen, itupun klo kamu punya temen!! Jangan minta ke orang tua!! Lu gk malu klo hidup lu nyusahin orang tua?
</p>
<img src="gambar1.gif">
</body>
</html>
|
Dan buka browser, fresh halaman dan background akan terlihat!
Dan selesai tutor dari saya, klo kalian berfikir sederhana banget yah memang sederhana karna tutor ini di buat untuk pemula kayak saya, saya harap tutor ini dapat membuat kalian mengerti tentang
· Fungsi <html> //mengindetifikasi html
· Fungsi <head> //sebagai kepala
· Fungsi <title> //untuk membuat judul kecil web
· Fungsi <body> //sebagai badan utama yang akan menampilkan isi web
· Fungsi <h1> //ukuran besar text
· Funsi <p> //paragraf
· Fungsi <img> //memasukan gambar
Terimakasi telah membaca dan jangan lupa untuk tinggalkan jejak!
Tutor di buat oleh: web-ku-web.blogspot.com (by al khoir)
EmoticonEmoticon