Apa kabar sob? langsung saja kali ini saya ceritanya dapet tugas nihh,,, nah, tugas nya itu membuat file HTML yang dibuat dari nol. Cara membuat file HTML dari nol bisa dibilang gampang gampang susah karena pada dasar nya mirip dengan saat kita mengedit blog lewat HTML, bedanya ini kita mulai dari nol. nahh, sedangkan membuatnya sendiri menggunakan notepad, mungkin sobat blogger banyak yang sudah senior dalam bidang ini, jadi mohon maklum jika ada kesalahan pada artikel kali ini (maklum ilmu baru dari sekolah).
Sebelum kita bahas cara membuat nya kita perkenalan dulu pada kode-kode HTML.
Untuk membuat file HTML sendiri sobat harus buka notepad lalu pastekan kode-kode html nya, setelah itu save file dengan akhiran .html (ex. namafile.html). Berikut ini pembahasan tentang HTML nya.
Pada dasarnya HTML terdiri dari beberapa tag wajib, artinya beberapa tag ini harus ada pada sebuah file HTML. nahh berikut ini contohnya :
<html>
<head>
<title> Judul </title>Ket.
</head>
<body>
Isi halaman.
</body>
</hmtl>
- Tag <html> sebagai pembuka pada semua file HTML dan tag ini harus ada pada setiap file HTML. Sedangkan tag </html> adalah tag penutup dari <html>
- Tag <head> sebagai kepala sebuah file HTML biasa nya didalam head diisi dengan tag <title>...</title> sebagai judul dari file HTML tersebut. Sedangkan tag </head> adalah penutup tag <head>
- Setelah kepalanya sudah ada, maka yang dibutuhkan adalah tag <body>. Tag ini berguna sebagai tubuh file HTML yang bisa diisi dengan file-file, teks, dan lain lain. untuk penutup tag ini digunakan </body>
Diatas adalah file HTML paling dasar. nahh, lanjut ke tugas saya, membuat file HTML yang berisi dengan gambar berjalan dan simple form. Untuk memanggil sebuah file gambar kita bisa gunakan tag <img src="image.jpg"> Ket. Memanggil gambar dengan nama image.jpg. Karena yang diinginkan gambarnya jalan maka saya tambahkan tag <marquee> menjadi :
<marquee direction="up" scrollamount="3"> <img src="image.jpg"> </marquee>Ket. Memanggil gambar dengan nama file image.jpg dan membuat gambar tersebut berjalan keatas dengan kecepatan 3
Nahh, yang diatas adalah membuat gambar berjalan keatas, sekarang membuat gambar nya jalan bolak-balik. Kita cukup ganti pada tag marquee menjadi :
<marquee behavior="alternate" scrollamount="3"><img src="image.jpg"</marquee>Ket. Memanggil gambar dengan nama image.jpg dan membuat gambar tesebut berjalan dari ujung kanan ke ujung kiri dengan kecepatan 3
NB: untuk tag gambar image.jpg diganti dengan nama file gambar sobat. Dan agar bisa dibaca gambarnya, taruh gambar pada folder yang sama dengan file HTML
Nahh, soal pertama selesai. Soal kedua, Membuat simple form. Sebenarnya banyak tag yang bisa digunakan untuk form. Seperti form-form login lainnya saya cuman gunakan tag USERNAME dan PASSWORD tak lupa juga SUBMIT. Untuk hasilnya akan menjadi seperti ini :
Username :
Password :
Simple form diatas bisa didapatkan dengan Script dibawah ini :
Username : <input name="username" maxlength="12" size="25" type="username" >Ket.
Password : <input name="password" maxlength="12" size="20" type="password" >
<input type="submit" value="Login" >
- Username : <input name="username" maxlength="12" size="25" type="username" >
Membuat kotak input bertipe teks dengan nama username dengan besar 25 dan karakter maksimum 12 - Password : <input name="password" maxlength="12" size="20" type="password" >
Membuat kotak input bertipe password dengan nama password dan besarnya 20 dan karakter maksimum 12 - <input type="submit" value="Login" >
- Membuat kotak input bertipe submit (jika sobat membuat ini otomatis akan berbentuk tombol), Value adalah teks yang ditampilkan
Sekarang giliran satukan tag-tag nya sehingga menjadi :
<html>Ada tag-tag yang saya tambah sendiri untuk memberikan variasi.
<head>
<title>Tugas membuat page HTML</title>
<body bgcolor="blue " >
<h1 align="center">Tugas Pertama : Menambahkan gambar bergerak keatas dan kesamping</h1><br>
<b>1. Berikut ini contoh gambar bergerak keatas</b><br>
<marquee direction="up" scrollamount="3"><img src="image.jpg" ></marquee><br>
<b>2. Berikut ini contoh gambar bergerak kesamping bolak-balik</b><br>
<marquee behavior="alternate" scrollamount="3"><img src="image.jpg"></marquee><br>
<br>
<h1 align="center"> Tugas Kedua : Membuat simple form</h1> <br>
<b>Berikut ini adalah contoh form login</b><br>
<form>
Username : <input type="text" name="username" maxlength="12" size="25"><br>
Password : <input type="password" name="password" maxlength="12" size="20"><br>
<input type="submit" value="Login"><input type="reset" value="Batal">
</form>
</body>
</html>
Ket.
- Tag <body bgcolor="blue " > memberikan warna pada background
- Tag <h1 align="center">Tugas Pertama : Menambahkan gambar bergerak keatas dan kesamping</h1><br> atau juga
<h1 align="center"> Tugas Kedua : Membuat simple form</h1> <br>
Tag <h1> berguna untuk mengubah besar font - Tag <br> untuk berganti baris
- Tag <b> untuk menceteak tebal font (Bold)
- <form> sebagai pembuka pada form dan ditutup dengan </form>
- Email :
Form email bisa digunakan script dibawah :Email :<input type="email" name="email" size="29">
- Status Hubungan :
Form options bisa digunakan script dibawah ini :Status Hubungan :
<select name=hubungan>
<option selected value=lajang>Lajang
<option value=mencari>Sedang mencari
<option value=berjalan>Sedang berjalan...
<option value=bertunangan>Bertunangan
<option value=menikah>Menikah
<option value=bercerai>Bercerai
<option value=rumit>Rumit
</select>
- Pendidikan :
SD
SMP
SMA
Lainnya
Form radio options menggunakan script dibawah ini :Pendidikan :
<input type=radio name=pendidikan value=sd> SD
<input type=radio name=pendidikan value=smp> SMP
<input type=radio name=pendidikan value=sma> SMA
<input type=radio name=pendidikan value=lainnya> Lainnya
Script - script diatas bisa langsung dipasang di file HTML sobat dan sobat bisa berinovasi sendiri. Saya memberikan apa yang saya tahu, dan sobat bisa buat jauh lebih bagus dari ini.
Special post for TKJ 3
gomawo buat infonya...
ReplyDeletetenang wae sob or bakal pdo kro cntone
Oke sob,,
ReplyDeletegood luck yaa,,, :D
thank sobb..... iam virtual email...
Deletethe alim arifan
:d
great!! (o)
Delete