Jumat, 28 Juni 2013

Belajar Membuat HTML lewat NotePad (Bab Pengaturan Sederhana)



Meneruskan "Bab Pengenalan" yang saya tulis beberapa jam lalu, kali ini saya beranjak ke "Bab Pengaturan Sederhana" dalam pembuatan html.
Langsung saja ya, Check it out!

Cara membuat favicon html:
Setelah anda menulis tag <head> maka tuliskan tag <link href='nama file beserta formatnya' rel='shortcut icon' type='image/x-icon'/>
Contoh:  <link href='icon.jpeg' rel='shortcut icon' type='image/x-icon'/>
Catatan: Jika icon tetap tidak mau muncul maka cek kembali format file yang anda gunakan.

Cara mengganti warna background html:
Ganti saja tag <body> pada notepad anda dengan <body bgcolor='warna yang anda inginkan'>
Contoh: <body bgcolor='blue'>
Catatan:
Warna yang anda tuliskan harus dalam bahasa inggris (hehe).
Anda juga bisa memasukkan warna yang lebih inovatif dengan menggunakan warna-warna yang ada di program photoshop ataupun coreldraw, dengan cara memasukkan kode warna yang anda inginkan.
contoh: <body bgcolor='c71633'>

Cara mengganti background html dengan gambar/foto:
Ganti saja tag <body> pada notepad anda dengan <body background='nama file beserta formatnya'> 
Contoh: <body background='background utama.jpg'>

Cara memasukkan gambar/foto kedalam html: 
Selain teks, kita juga bisa memasukkan gambar/foto kedalam html dan tentunya semua itu dituliskan diantara tag <body> dan </body>.
Nah caranya yaitu dengan menuliskan <img src='nama file beserta formatnya' width='ditulis dalam angka' height='ditulis dalam angka' />
Contoh: <img src='foto1.jpg' width='200' height='200' />
Catatan:
Width dan height bisa digonta-ganti sesuai dengan selera anda.
Apabila file gambar/foto terletak pada folder yang sama dengan file html itu, maka kita bisa menggunakan format diatas. Namun apabila file gambar/foto terletak dalam folder yang berbeda maka kita juga harus mengikutsertakan nama folder tersebut dengan cara menulis <img src='nama folder/nama file beserta formatnya' width='ditulis dalam angka' height='ditulis dalam angka'>
Contoh:
<img src='gambar/foto1.jpg' width='200' height='200'>

Cara mengatur format font:
Sebelum menulliskan sebuah teks maka terlebih dulu tulislah tag <font face='nama font' size='ditulis dalam angka' color='warna yang anda inginkan'>
Contoh: <font face='Cambria' size='6' color='white'>

Cara mengatur alignment:
Alignment dalam membuat html sama halnya dengan yang ada di MS Word. Sebelum menuliskan format font maka terlebih dahulu tulislah tag <p align='pengaturan alignment yang anda inginkan'>. Pengaturan alignment sendiri terdiri dari  center, left, right dan justify.
Contoh: <p align='center'> 

Cara membuat foto dan teks bergerak:
Gimana sih bikin tulisan atau foto gerak-gerak gitu? Oke, caranya mudah yaitu dengan hanya menambahkan tag <marquee>.
Contoh untuk teks:
<marquee>Dikarang oleh: Pujangga Sejati</marquee>
Contoh untuk gambar:
<marquee><img src='gambar/FINAL1.jpg' width='500' height='200' /></marquee>
Catatan: Jangan lupa menyertakan tag </marquee>, tujuannya yaitu sebagai batas penentu sampai dimana teks atau gambar ingin anda gerakkan.


Sepertinya hal-hal yang sudah ditulis diatas sudah cukup untuk membuat dasar html anda. Semoga bermanfaat! Selamat Mencoba, Dreamers! \^o^/

 

5 komentar :