Dan seperti kita ketahui sebuah dimana bahasa pemograman selalu memiliki struktur dan penyusunan yang jelas, jadi tentu saja HTML ini sangat berbeda dengan bahasa kita sehari-hari. Bahkan mungkin kita akan sangat perlu belajar serius untuk benar-benar bisa mengerti bagaimana cara menulis dengan HTML yang valid dan bisa dimengerti oleh komputer.
Saya membuat postingan ini, karna kemarin ada yang bertanya kepada saya : Bagaimana Cara membuat template dengan HTML yang benar? maka saya menjawab : Anda setidaknya Harus belajar tentang HTML terlebih dahulu.
Nah, muncul lagi pertanyaan Dimanakah saya bisa belajar HTML yang terbaik, terlengkap dan bisa dimengerti oleh pemula.
Terus terang saya bukan pelku desaigner yang mengerti bentuk dan pintar dalam bahasa HTML. Ilmu saya tidak akan bisa membuat anda mampu pintar dan cakap dalm mempelajarinya karna pengetahuan saya masih sangat dasar dalam bahasa HTML.
Mengenal Struktur HTML Dasar
Jika anda benar-benar sangat pemula, maka setidaknya anda harus mengerti
dan mengetahui contoh dan strukturnya si HTML ini. Secara dasar, anda
bisa melihat bagaimana struktur HTML tersebut seperti dibawah ini.
Contoh Halaman Web dengan Bahasa HTML dasar:
<html>Dari struktur tersebut terlihat jelas bahwa sebuah HTML Menampilkan tulisan pada halaman website dengan menggunakan kode-kode atau source. Dimana Kode source HTML tersebut tidak akan ditampilkan pada browser (tidak terlihat pleh si pembaca), namun kode2 HTML inilah yang akan memerintahkan browser untuk menampilkan seperti apa halaman yang kita buat. Seperti kode source diatas jika ditampilkan maka akan terlihat:
<head>
<title>Judul Belajar TML Pemula</title>
</head>
<body>
Selamat pagi pemirsa, nama saya pemula. Saya mau belajar agar pintar HTML. dimanakah tempat belajar HTML yang terlengkap, terbaik dan pas buat saya?
</body>
</html>
Title = Judul Belajar TML Pemula
Isi = Selamat pagi pemirsa, nama saya pemula. Saya mau belajar agar pintar HTML. dimanakah tempat belajar HTML yang terlengkap, terbaik dan pas buat saya?
Kode Warna
KODE WARNA HTML Contoh:Putih =>#ffffff;
biru kode:0000ff
hitam kode:000000
brown kode:a52a2a
crap blue kode:5f9ea0
coklat kode:d2691e
corn flow kode:6495ed
crimson kode:dc143c
cyan kode:00ffff
violet kode:00008b
something kode:b8860b
dark gray kode:a9a9a9
khaki kode:bdb76b
orange order kode:ff8c00
scorned kode:8b0000
fish paste kode:e9967a
sea weed kode:8fbc8f
slate blue kode:483d8b
violet kode:9400d3
pink kode:ff1493
skyblue kode:00bfff
bricks kode:b22222
trees n shit kode:228b22
grany house kode:dcdcdc
going for gold kode:ffd700
orange peel kode:daa520
green kode:008000
flamingos kode:ff69b4
indigo kode:4b0008
grass kode:7cfc00
marooned kode:800000
blue two kode:0000cd
purple kode:9370d8
minty kode:00fa94
midnight kode:191970
merah kode:ff4500
sand kode:ff4a460
silver kode:c0c0c0
kuning kode:ffff00
putih kode:ffffffbiru kode:0000ff
hitam kode:000000
brown kode:a52a2a
crap blue kode:5f9ea0
coklat kode:d2691e
corn flow kode:6495ed
crimson kode:dc143c
cyan kode:00ffff
violet kode:00008b
something kode:b8860b
dark gray kode:a9a9a9
khaki kode:bdb76b
orange order kode:ff8c00
scorned kode:8b0000
fish paste kode:e9967a
sea weed kode:8fbc8f
slate blue kode:483d8b
violet kode:9400d3
pink kode:ff1493
skyblue kode:00bfff
bricks kode:b22222
trees n shit kode:228b22
grany house kode:dcdcdc
going for gold kode:ffd700
orange peel kode:daa520
green kode:008000
flamingos kode:ff69b4
indigo kode:4b0008
grass kode:7cfc00
marooned kode:800000
blue two kode:0000cd
purple kode:9370d8
minty kode:00fa94
midnight kode:191970
merah kode:ff4500
sand kode:ff4a460
silver kode:c0c0c0
kuning kode:ffff00
Oke sobat, sebagai contoh coba ketikan listing Html di bawah ini di notepad :
<html>
<head>
<title> new page 1</title>
</head>
<body>
<p>
<marquee bgcolor=”#C0C0” loop=”4” direction=”right” scrolldelay=”2” scrollmount=”8” align=”middle” width=”291” height=”19”> Mari Berjalan</marquee>
</p>
</body>
</html>
Jika sudah selesai simpan dengan nama Coba.html dan pastikan type document nya All File,
Jika sudah di save coba sobat buka dengan Mozila Firefox.
Apakah view nya sama seperti gambar di atas, jika sama, berarti html sobat berhasi.
Coba Anda ketikkan perintah-perintah HTML berikut ini, kemudian Anda jalankan di browser !
<html>
<head>
<title> Latihan Pertamaku </title>
</head>
<body color="#000000">
<p align="left">
Paragraf ini akan rata kiri<br />
Paragraf ini akan rata kiri<br />
Paragraf ini akan rata kiri<br />
<p>
br digunakan untuk ganti baris <br /><br />
<b>Kalimat ini akan dicetak Bold </b> <br />
<i>Kalimat ini akan dicetak Italic </i> <br />
<b><i>Kalimat ini akan dicetak Bold dan Italic</i></b>
<hr width="1000"><br />
Perintah hr digunakan untuk membuat garis
</body>
</html>
Simpan perkerjaan Anda dengan nama latihan_2.html. Jika benar, seharusnya ditampilkan
seperti berikut ini:
3
Gambar 1.2 Hasil dari latihan_2.html
Perhatikan perintah berikut ini:
<p align="left">
tag atribut
P pada perintah di atas disebut dengan tag, sedangkan align disebut dengan atribut. Atribut
merupakan perintah yang menyertai tag.
Berikut beberapa perintah HTML dan fungsinya:
Tag Atribut/Contoh penulisan Fungsi
<body> <body bgcolor="”red”">
<body bgcolor="”#FF0000”">
text=” ... “
link=” ...”
vlink=”...”
alink=”...”
<body
background=”D:\Gambar.jpg”>
Backgorund halaman berwarna
merah
Memberi warna pada teks
Warna link
Warna link yang sudah dikunjungi
Warna link yang aktif
Memberi background gambar
pada halaman
<a> ...</a>
<a
href=”D:\home.html”>Home</a>
<a
href="http://www.yahoo.com/">Ya
hoo!</a>
<a
href="mailto:name@domain.com"
>here</a> to email me!
Membuat hyperlink/link
<img> <img src="person.jpg" width="50"
height="50"border="0"
alt="Person" align="left" />
Memasukkan gambar dengan
nama file gambar person.jpg,
lebar 50px, tinggi 50px, border 0,
rata kiri, dan jika gambar tidak
muncul akan keluar teks Person
4
<img src=”C:\Documents and
Settings\All Users\Documents\My
Pictures\Sample
Pictures\Sunset.jpg />
<span>... /font>
<span
style="font-family:arial;font-size:85%;color:#FFFF00;">...</span>
Mengatur font dengan ukuran 2,
warna kuning, jenis huruf Arial
<big>...</big> <big>Contoh </big> Membuat teks Contoh menjadi
lebih besar
<small>...</small> <small> Contoh</small> Membuat teks Contoh menjadi
lebih kecil
<b>...</b> Teks bold/dicetak lebih tebal
<i>…</i> Teks italic/miring
<strike>...</strike> Teks tercoret
<u>...</u> Teks underlined
<h1>...</h1> Teks heading 1. Tingkat heading
bisa sampai tingkat 6. Semakin
besar tingkar heading, maka teks
aka dicetak semakin kecil
<hr /> <hr width="”600”">
<hr align=”center” size=”5”
width=”80%”
Garis dengan lebar 600. Tag <hr />
tidak perlu ditutup
Garis dengan tinggi 5, lebar 80%
dari lebar layar browser dan rata
tengah
<p align="”center’"> ...
</p>
Paragraf rata tengah. Perintah ini
juga dapat ditulis dengan tag
<center>...</center>
<br /> Tag untuk ganti baris Tag <br /> tidak perlu ditutup
<sup>...</sup> Teks superscript
<sub>...</sub> Teks subscript
<marquee> ....
</marquee>
Teks berjalan. Memiliki atribut
direction, behavior dan lain-lain.
Contoh:
<marquee direction="”right”">
....</marquee>
<marquee behavior="”alternate”">
... </marquee>
TABLE
Beberapa perintah penting untuk membuat tabel:
1. <table border="”1”"> .... </table> merupakan perintah utama dalam pembuatan tabel,
tabel dengan ketebalan 1px
2. <tr> ... </tr> tag untuk membuat baris
3. <td> ... </td> tag untuk membuat kolom/cell
4. colspan merge/melebarkan kolom/cell
5. rowspan merge/melebarkan baris
Atribut tabel dan fungsinya
Tag Atribut/Contoh penulisan Fungsi
<table>
...
</table>
border=”...” Ketebalan tabel.
Contoh:
<table border="”1”">
5
align=”...” Pengaturan tabel (rata tengah,
kanan atau kiri)
width=”...” Lebar tabel. Bisa diisi dengan
satuan pixel atau persen.
Contoh:
<table width="”80%”"> atau
<table width="”600”">
valign=”...” Perataan secara vertikal dari
suatu cell.
(top, middle, bottom)
bordercolor=”...” Warna border
bgcolor=”...” Warna background tabel,
baris atau cell
Agar cell dalam tabell kosong, maka dapat digunakan perintah
Contoh 1:
Tulislah perintah HTML untuk membuat tabel seperti berikut ini:
Satu Dua
Tiga Empat
Jawab:
<html>
<head>
<title> Latihan Table</title>
</head>
<body>
<table border="”1”">
<tr>
<td align="”center”">Satu</td>
<td align="”center”">Dua</td>
</tr>
<td align="”center”">Tiga</td>
<td align="”center”">Empat</td>
</table>
</body>
</html>
Contoh 2:
Tulislah perintah HTML untuk membuat tabel seperti berikut ini:
Satu
Dua Tiga
Jawab:
<html>
<head>
<title> Latihan Table Dua </title>
</head>
<body>
<table border="”1”">
<tr>
<td colspan="”" align="”center”">Satu</td>
</tr>
<tr>
<td align="”center”">Dua</td>
<td align="”center”">Tiga</td>
</tr>
6
</table>
</body>
</html>
PERTEMUAN 1
Ketikklah perintah-perintah HTML berikut, kemudian modifikasilah agar diperoleh tampilan yang
maksimal ! Pahami setiap perintah/tag HTML-nya !
<html>
<head>
<title> Latihan Pertemuan 2 </title>
</head>
<body bg text="#FFFFFF" style="color:#000000;">
<table border="1" align="center" width="80%">
<tr>
<td colspan="2" align="center" height="100" bg style="color:#3A2BD1;">
<span style="font-family:Arial;font-size:16;">SITUSKU.COM </span><br />
<hr width="500"> <br />
<marquee direction="right">Terdepan Dalam Berita dan
Gosip</marquee>
</td>
</tr>
<tr valign="top">
<td width="200"height="450" bgcolor="green">Home</td>
<td bgcolor="#F75454">Selamat Datang di <b><i>SITUSKU.COM</i></b><br />
Situsku.Com akan selalu konsisten dengan berita-berita terbaru dari
segala penjuru Indonesia.<br /><br />
Dapatkan berita-berita menarik tentang: politik, hukum, keamanan, gosip
artis dan kuliner di Indonesia.
</td>
</tr>
</table>
</body>
</html>
PERTEMUAN 2
Buatlah halaman situs dengan layout seperti berikut ini:
JUDUL.COM
“Slogan Here”
Home
Profile
Gallery
Konten/Isi Situs/Gambar
Copyright © JUDUL.COM
All right reserved 2008
8
Ketentuan:
1. Pengaturan halaman/format terserah Anda (ukuran, jenis font, warna dll)
2. Jumlah halaman = 3, denga ketentuan:
a. halaman Home: berisi ucapan selamat datang, deskripsi situs Anda dll
b. halaman Profile: berisi profil Anda, nama, kelas, alamat, tempat/tanggal lahir dll
c. halaman Gallery berisi gambar-gambar yang berkaitan dengan situs Anda
3. Setiap halaman harus memuat hyperlink/link
4. Halaman Gallery wajib memuat gambar-gambar
5. Usahakan untuk menambahkan link-image pada halaman Gallery
- Selamat Mengerjakan -
Modul dapat di download di:
More tutorial:
http://www.htmlcodetutorial.com
Contoh ini mungkin sangat mendasar dan tentu saja anda tidak puas dengan ini. Masih banyak kode-kode source lainnya untuk bisa menampilkan sebuah halaman web supaya lebih cantik dan seperti yang kita inginkan. Saatnya anda mulai untuk menyiapkan diri baik fisik maupun mental yang siap untuk untuk memepelajari html ini.
Bagaimana, apakah anda sudah siap Belajar HTML?
Pertanyaan ini sederhana tapi cukup semangat. Ini tentu saja adalah
keinginan seorang pemula untuk bisa belajar HTML. lalu dimanakah kita
bisa mempelajarinya?
Tempat belajar HTML terlengkap dan benar-benar bisa membuat anda lebih dalam untuk pintar bahasa pemograman web adalah di www.w3schools.com/html/ atau bisa juga di www.w3.org/html/.
Tidak ada komentar:
Posting Komentar