Belajar
CSS/HTML Bersama Kang Ipeenk
PART 1
Memahami Strukur HTML
Dalam membuat program dibahasa pemrograman
HTML anda mesti memahami Struktur HTML
itu sendiri, karena
jika anda tidak mengetahui
strukturnya maka anda
akan kebingungan dalam merancang
sebuah website nantinya. Maka dari
pada itu saya akan menjelaskan struktur dalam HTML.
Berikut
adalah strukturnya.
Struktur
HTML
Struktur
Standar Dokumen HTML
Membuat
Background Bergambar
Pada
tag Body anda dapat memberikan background
atau latar belakang dalam
suatu pembuatan atau rancangan dalam website. Fungsinya
agar suatu halaman website yang nanti kita buat akan
lebih terlihat professional. Dan juga tidak membosankan.
Dengan atribut background yang terdapat pada
tag body anda bisa memasukan gambar apapun kedalam latar belakang suatu webpage atau halaman
yang sedang anda rancang, untuk dapat mengubahnya anda
cukup mendeklarasikannya menggunakan atribut <background> pada tag <body>, seperti
berikut.
<body background="alamat gambar
file">...isi...</body>
Contoh script dengan background bergambar
adalah sebagai berikut :
Kemudian
hasilnya seperti berikut ini :
Memberi
Warna Text
Latar
belakang atau background
secara standar akan menampilkan suatu
warna putih, maka secara otomatis halaman akan memberikan text
defaultnya berwarna hitam, seperti halnya
anda mengetikan suatu kalimat
pada lembaran atau halaman
di Microsoft Word maka latar
belakang berwarna putih dan teks
berwarna hitam. Tapi jika anda jenuh melihat
warna itu-itu saja.
maka anda bisa merubah
warna tulisannya.
Dengan mendeklarasikan atribut text pada
bagian tag body seperti berikut.
<body text=”tentukan warnanya”>…isi
halamannya…</body>
Contoh script dengan teksberwarna adalah
sebagai berikut :
Kemudian seperti berikut ini :
Menentukan
Warna Pada Link
Link
digunakan untuk menghubungkan
webpage lain pada website,
anda dapat memberikan warna
yang berbeda pada link
dengan teks standar
yang dituliskan dalam halaman web atau webpage. Pemberian
warna link pada HTML yaitu ada 3 macam
atribut yang digunakan untuk
mendeklarasikannya. Atribut
tersebut yaitu LINK,
VLINK, dan ALINK.
<body link=”pilih warna” vlink=”pilih
warna’ alink=”pilih warna”>
Penjelasan
dari atribut diatas :
·
LINK : Menentukan warna link yang belum dimasuki
halaman.
·
VLINK : Menentukan warna link yang halamannya telah
dimasuki
·
ALINK : Menentukan warna untuk link yang telah aktif
setelah dimasuki halamannya.
Tata
Letak Area Kerja
Area
Kerja tempat dimana
letak kursor pertama
dalam menuliskan semua isi webpage.
Seperti halnya anda meletakan kursor
pertama kali dalam
pembuatan kalimat
atau
paragraph pada Microsoft Word maka akan
terlihat bahwa huruf pertama kali berada disebelah kiri dan batasannya
telah diatur secara otomatis, tapi bisa juga batasan antara kiri, kanan, atas
dan bawah dalam
Microsoft Word anda atur sendiri.
Begitu
pula di dalam halaman
web, anda bisa mengatur halaman itu
sesuai keinginan anda
sendiri dengan menggunakan atribut pada body, sebagai berikut.
<body leftmargin=”nilai”
topmargin=”nilai” marginwidth=”nilai” marginheight=”nilai”>
Penjelasan
dari atribut diatas :
·
Leftmargin : Menentukan batas kiri
·
Topmargin : Menentukan batas atas
·
Marginwidth : Menentukan batas lebar
·
Marginheight : Menentukan batas tinggi.
Contoh
script tata letak area kerja sebagai berikut :
Hasilnya
sebagai berikut :
Membuat
Pemformatan Teks
Tehnik
dalam Pemformatan teks
yang diharuskan di dalam
semua bahasa pemrograman baik
visual maupun non visual. Begitu pula di pemrograman HTML disediakan juga tag yang
berfungsi dalam pemformatan
teks. Pekerjaan tersebut didalam
tag HTML dapat dilakukan sangat mudah dan cepat.
Tag yang digunakan untuk pengaturan teks
Ini
adalah contoh scriptnya :
Berikut
hasilnya :
Pemformatan
model Matematika
Dengan
menggunakan HTML anda
akan diajarkan bagaimana
membuat format seperti model
matematika, cukup dengan menggunakan tag
<sub> untuk format
teks menjorok ke bawah dan tag <sup> untuk format teks menjorok ke
atas.
Tag yang digunakan untuk membuat model
matematika.
Contoh
scriptnya sebagai berikut.
Hasilnya
sebagai berikut.
Menentukan
Ukuran pada huruf beserta warna
Ukuran
huruf didalam sebuah
halaman web atau webpage
sangat penting perannya,
karena tidak mungkin membuat
ukuran dalam suatu
halaman memiliki ukuran yang sama
karena nantinya akan terlihat kurang berkualitas juga professional. Maka dengan
menggunakan tag font
anda dapat menentukan ukuran huruf
juga warna yang
nantinya akan anda terapkan dalam halaman web yang anda desain.
<font size=”nilai” color=”pilih warna”
face=”pilih huruf>
Keterangan
dari atribut font diatas sebagai berikut.
·
Size : Dapat
anda masukan nilai angka mulai dari 1 sampai 7 jika anda ingin ukuran yang
lebih besar bisa menggunakan operator tambah(+), contoh(+3).
·
Color : Menentukan warna pada teks atau hurufnya.
·
Face : Menentukan jenis hurufnya contohny(arial,verdana,Calibri)
Contoh scriptnya sebagai berikut.
Hasilnya
sebagai berikut.
Berganti
Baris dan paragraph
Kali
ini akan dijelaskan
bagaimana membuat sebuah paragraph dengan menggunakan tag <p>, kemudian
untuk berganti baris dari satu paragraph ke paragraph lain digunakan tag
<br>. Berikut contohnya.
<p>Paragraf………<br>
Paragraf………<br>
</p>
Berikut adalah contoh scriptnya
Hasilnya
Membuat
Identitas Halaman
Identitas
halaman adalah suatu
tehnik pemformatan dengan teks
menjorok kedalam, untuk dapat membuat identitas halaman HTML gunakan tag
<blockquote>, berikut penulisannya.
<blockquote>…Isi teks…</blockquote>
Berikut scriptnya.
Dan
berikut hasilnya
Membuat
Teks Model Komputer
Kali
ini kita akan
membuat paragraph atau
teks dengan tampilan atau
bentuk huruf menyerupai
teks pada komputer dengan
menggunakan tag <pre>.
Berikut
penulisannya.
<pre>…Isi teks…</pre>
Contoh scriptnya
Berikut
hasilnya
Membuat
Teks Surat atau Alamat
Biasanya
ketika anda ingin mengirim surat
ke saudara, keluarga, dll,
biasanya anda akan menyertakan sebuah alamat untuk mengirim balasan. Didalam
HTML juga telah disediakan bagaimana
membuat teks seperti
surat menggunakan tag <address>.
Berikut
penulisannya.
<address>…Isi teks…</address>
Contoh scriptnya sebagai berikut.
Hasilnya
sebagai berikut.
Membuat
Judul
Kali
ini akan dibahas
bagaimana membuat suatu teks yang
dimana digunakan untuk membuat
suatu judul dari halaman maupun
paragraph, dalam penggunaannya disini anda mesti menggunakan tag <H1>
sampai <H6>.
Berikut
penulisannya.
<h1>…Isi Judul…</h1>
<h2>…Isi Judul…</h2>
<h3>…Isi Judul…</h3>
<h4>…Isi Judul…</h4>
<h5>…Isi Judul…</h5>
<h6>…Isi Judul…</h6>
Berikut
script penulisannya.
Hasilnya
sebagai berikut
Membuat
Teks Animasi
Kali
ini akan dijelaskan
bagaimana membuat sebuah
teks animasi yang
dapat berjalan sendiri dengan menggunakan tag <marquee>. Anda bisa menggunakannya
untuk
halaman
webpage anda agar lebih cantik. Berikut penulisannya.
<marquee behavior=”nilai”
direction=”nilai” loop=”nilai”
bgcolor=”warna”>…isi…teks</marquee>
Berikut
penjelasan atribut pada tag marquee.
Berikut
contoh scriptnya.
Berikut
hasilnya.
Membuat
Garis
Sebagai pembatas judul dengan isi. Anda dapat
menggunakan garis dalam HTML telah
tersedia sebuah tag <hr>
yang berfungsi untuk membuat sebuah garis dengan posisi horizontal, <hr>
kependekan dari horizontal row.
Adapun
penulisannya sebagai berikut.
<hr size=”nilai” color=”warna” align=”nilai” width=”nilai”>
Penjelasan atribut pada tag HR
Contoh
scriptnya sebagai berikut
Hasilnya
sebagai berikut
Membuat
Daftar
List adalah sebuah
metode menampilkan sekumpulan data dengan
cara penomoran atau symbol, contohnya pada sat ada pertanyaan seperti
“Anda Tinggal dimana ?”, maka dari pertanyaan tersebut pastilah akan memerlukan
daftar jawaban dengan pilihan, misalnya
“Cirebon atau Tegal”. Ok langsung saja
menuju opsi pembuatan
scriptnya :p
berikut.
Tag yang digunakan dalam pembuatan daftar
yaitu
Script
menggunakan tag <UL> berikut.
Maka
hasilnya sebagai berikut.
PART
2
Membuat
Tabel
Tabel sangat penting perannya dalam membuat
Website, pada saat pembuatan sebuah
halaman web, tabel
biasanya dijadikan sebagai media
yang berfungsi sebagai kerangka untuk meletakan
komponen-komponen isi web. Maka sebab itu penggunaan tabel tidak bisa anda tinggalkan
begitu saja. Karena sangat penting
perannya didalam perancangan
website anda nantinya. Ok langsung saja berikut pembuatan tabelnya.
Untuk dapat membuat tabel anda dapat
menggunakan tag <TABLE> dan diakhiri dengan </TABLE> yang kemudian
diikuti dengan tag <TR> dan <TD>.
Contoh
Script
Script
membuat tabel
Hasilnya
sebagai berikut
Tabel
dan beberapa baris
Sebelumnya telah anda buat bagaimana tabel
dengan satu baris, berikut ini akan dijelaskan
bagaimana membuat tabel dengan banyak
baris, selanjutnya anda
harus mendefinisikan tag
<TR> beserta <TD> untuk membuat beberapa baris dan kolomnya. Ok
berikut langsung saja anda buat scriptnya.
Contoh
Hasilnya
sebagai berikut
Penjelasan
atribut yang digunakan di tag Table
Penjelasan
atribut pada tag TR
Menggabungkan
beberapa Kolom dan Baris
Kali
ini anda akan
dijelaskan bagaimana membuat
gabungan antara beberapa kolom menjadi satu bagian, untuk
dapat membuat beberapa kolom itu menjadi
satu bagian atau dapat digabungkan tentu
anda harus menggunakan
atribut <colspan>. Dan untuk membuat
gabungan beberapa baris anda
juga mesti menggunakan
atribut <rowspan>.
Berikut
contoh scriptnya.
Hasilnya
dari gabungan beberapa kolom
Dan
berikut adalah gabungan beberapa baris
Ini
adalah hasinya
PART
3
Memahami
Pembuatan Form
Form
adalah sebuah metode yang
digunakan dalam website yang mengizinkan seorang pengujung
untuk dapat berinteraksi dengan
server ataupun dengan
pengelola website tersebut. Dengan
adanya proses interaksi tersebut, maka
pengguna akan mendapatkan
beberapa kemudahan yang diberikan pada portal/website tersebut.
Untuk
dapat membuat form
anda membutuhkan tag <form> yang
nantinya memudahkan anda dalam
pembuatan form, dengan bantuan
tag <form> nantinya
anda akan dapat membuat interaksi dengan seorang pengunjung website anda.
Penjelasan dari tag
Dan
berikut atribut yang ada didalam tag Form
Nilai
dari atribut pada method ada 2 yaitu.
Berikut
contoh gambaran umum pembuatan sebuah form.
<form action=”alamat webpage lain” method=”GET/POST” name=”nama form”
>
<input>
……………………….
<input>
</form>
Komponen
yang dibutuhkan didalam form.
Contoh
script pembuatan form
Hasilnya
sebagai berikut
Memasukan
Gambar
Kali ini akan dijelaskan bagaimana memasukan
gambar didalam halaman website anda
agar telihat lebih
menarik untuk dikunjungi, dalam
penggunaan gambar kita
perlu
menggunakan tag <img> dan
beberapa atribut agar gambar itu
bisa ditampilkan kedalam halaman website anda nantinya,
berikut penggunaannya.
<img src=”nama file” width=”nilai” height=”nilai” >
Berikut contoh script gambar.
Hasilnya
sebagai berikut
Membuat
Link
Metode berikut akan mengajarkan bagaimana
membuat suatu hubungan dengan halaman web satu dengan yang lainnya, atau
bagaimana memanggil suatu webpage, objek yang kita klik lalu muncul halaman
selanjutnya yaitu disebut link.
<a href=”alamat file” target=”_self /
_blank / _parent / _top>…Isi teks…</a>
Berikut contoh scriptnya
Untuk
script link tujuan
Hasilnya
berikut.
Halaman
tujuan link
