RSS Feed
Twitter
07.01
Unknown
Dewasa
ini, hampir semua dokumen web dibuat dengan bahasa HTML (Hypertext Mark-up
Language). Meskipun anda bisa saja membuat web page (halaman web) tanpa
mengerti sedikitpun HTML, yakni dengan menggunakan editor HTML berjenis WYSIWYG
seperti Microsoft FrontPage, Adobe PageMill atau Netscape Composer, namun
sangat disarankan bahkan nyaris diharuskan, agar anda mengerti bahasa HTML.
Terutama agar anda bisa memanfaatkan secara optimal berbagai fasilitas browser
dan mengingat sejumlah kelemahan yang terdapat pada editor WYSIWYG seperti di
atas. Untuk itu langkah pertama bagi Anda yang bercita-cita memiliki website
sendiri adalah belajar HTML.
HTML
(Hypertext Markup Language) adalah
bahasa program yang digunakan untuk menulis format dokumen yang dapat digunakan
dalam Web. Dengan HTML, teks ASCII (file *.txt) dapat dipoles (di-mark-up)
dengan kode-kode tertentu yang disebut tag untuk menjadi dokumen HTML (file *.htm
atau *.html). Oleh karena itu, untuk membuat dokumen HTML, anda bisa
menggunakan semua program teks editor biasa, mulai dari Notepad hingga MS Word.
Untuk mudahnya, kita gunakan program Notepad. Bukalah program Notepad. Bila
anda belum tahu caranya, klik Start > Programs > Accessories
lalu Notepad. Sekarang ikutilah dengan seksama latihan-latihan
berikut satu demi satu.
PENGENALAN
KODE HTML
Dalam
program Notepad anda, tulislah seperti ini:
|
<HTML>
</HTML>
|
Masing-masing
baris di atas disebut tag. Tag adalah kode yang digunakan untuk
me-mark-up (memoles) teks ASCII menjadi file HTML. Setiap tag diapit dengan
tanda kurung runcing. Ada tag pembuka yaitu <HTML> dan ada tag
penutup yaitu </HTML> yang ditandai dengan tanda slash (garis
miring) di depan awal tulisannya. Tag di atas memberikan faidah bahwa yang akan
ditulis diantara kedua tag tersebut adalah isi dari dokumen HTML. Perlu anda
ketahui bahwa tag-tag html dapat ditulis dengan huruf besar ataupun huruf
kecil. Artinya, penulisan <HTML> atau <html> atau <Html> sama
saja hasilnya. Namun perlu selalu diingat bahwa penulisan tag yang salah meskipun
hanya satu karakter akan berpengaruh terhadap dokumen HTML
Ikuti
langkah berikut :
- Buka Notepad melalui Start – All programs – accessories – notepad
- Ketik tulisan berikut :
‘<html>
‘<head>
‘<title> Belajar HTML </title>
‘</head>
‘<body>
Apa kabar teman-teman ? Marilah kita belajar HTML bersama Ardan Sirodjuddin
‘</body>
‘</html>
‘<head>
‘<title> Belajar HTML </title>
‘</head>
‘<body>
Apa kabar teman-teman ? Marilah kita belajar HTML bersama Ardan Sirodjuddin
‘</body>
‘</html>
- Simpan file notepad dengan mengklik file – save us – namafile.html
- Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox
B. Membuat Warna Background
Melanjutkan
tulisan saya yang kemarin, kali ini kita akan belajar membuat warna background
pada website kita. Ikuti langkah berikut :
- Buka notepad melalui Start – All programs – Accesories – Notepad
- Ketik tulisan berikut :
‘<html>
‘<head>
‘<title> Belajar Membuat Warna Background </title>
‘</head>
‘<body>
<!.. Latar belakang warna hijau ..>
<body bgcolor=”green”>
Sekarang warna latar belakang web adalah hijau
‘</body>
‘</html>
Catatan : tanda petik didepan kode program jangan ditulis
‘<head>
‘<title> Belajar Membuat Warna Background </title>
‘</head>
‘<body>
<!.. Latar belakang warna hijau ..>
<body bgcolor=”green”>
Sekarang warna latar belakang web adalah hijau
‘</body>
‘</html>
Catatan : tanda petik didepan kode program jangan ditulis
- Simpan file notepad dengan mengklik file – save us – namafile.html
- Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox
C. Mengatur warna teks
Melanjutkan
tulisan saya belajar HTML, kali ini kita akan belajar mengatur warna teks pada
website kita. Ikuti langkah berikut :
- Buka notepad melalui Start – All programs – Accesories – Notepad
- Ketik tulisan berikut :
<html>
<head>
<title> Mengatur Warna Teks </title>
</head>
<body>
<!-warna teks #ff0022 ..>
<body text=”#ff0022″>
Warna teks web nya berubah
</body>
</html>
<head>
<title> Mengatur Warna Teks </title>
</head>
<body>
<!-warna teks #ff0022 ..>
<body text=”#ff0022″>
Warna teks web nya berubah
</body>
</html>
- Simpan file notepad dengan mengklik file – save us – namafile.html
- Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox
Latihanlah warna teks di atas dengan warna yang lain. Untuk mengetahui kode warna, silahkan anda buka adobe Photosop.
D. Mengatur Paragraf
Sekarang
kita akan belajar mengatur paragraf pada website kita. Ikuti langkah berikut :
- Buka notepad melalui Start – All programs – Accesories – Notepad
- Ketik tulisan berikut :
‘<html>
<head>
<title> Mengatur Paragraf </title>
</head>
<body>
<head>
<title> Mengatur Paragraf </title>
</head>
<body>
<p>
Ini adalah paragraf pertama yang terdiri dari empat baris yaitu
baris satu. Baris dua . baris tiga . baris empat</p>
<p align=”left”> Ini adalah paragraf kedua yang terdiri dari dua baris
yaitu baris satu. Baris dua </p>
<p align=”center”> Ini adalah paragraf ketiga yang terdiri dari tiga
baris
yaitu baris satu. baris dua. baris tiga </p>
<p align=”right”> Ini adalah paragraf keempat yang terdiri dari dua
baris
yaitu baris satu. baris dua. </p>
</body>
</html>
Catatan : tanda petik didepan kode program jangan ditulis
Keterangan : Left = rata kiri, right = rata kanan, center = rata tengah, justify = rata kanan dan kiri
baris satu. Baris dua . baris tiga . baris empat</p>
<p align=”left”> Ini adalah paragraf kedua yang terdiri dari dua baris
yaitu baris satu. Baris dua </p>
<p align=”center”> Ini adalah paragraf ketiga yang terdiri dari tiga
baris
yaitu baris satu. baris dua. baris tiga </p>
<p align=”right”> Ini adalah paragraf keempat yang terdiri dari dua
baris
yaitu baris satu. baris dua. </p>
</body>
</html>
Catatan : tanda petik didepan kode program jangan ditulis
Keterangan : Left = rata kiri, right = rata kanan, center = rata tengah, justify = rata kanan dan kiri
- Simpan file notepad dengan mengklik file – save us – namafile.html
- Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox
- Jangan lupa dihafalkan kode html nya ya.
Memisahkan Baris
Kesulitan
mengetik dalam HTML adalah tidak otomatis tulisan akan berpindah ke bawah
ketika batas kanan terlewati. Agar tulisan berganti baris, perlu belajar kode
program tertentu, dalam hal ini adalah ‘<br>. Ikuti langkah berikut :
- Buka notepad melalui Start – All programs – Accesories – Notepad
- Ketik tulisan berikut :
‘<html>
‘<head>
‘<title> Memisahkan baris </title>
‘</head>
‘<body>
‘<p> Pancasila terdiri dari lima sila yaitu :<br>Sila Kesatu Ketuhanan Yang Maha Esa. <br> Sila Kedua Kemanusiaan Yang Adil dan Beradab . <br> Sila Ketiga Persatuan Indonesia. <br> Sila Keempat Kerakyatan yang dipimpin oleh hikmat kebijaksanaan dalam permusyawaratan/perwakilan . <br> Sila Kelima Keadilan sosial bagi seluruh rakyat Indonesia.
‘</p>
‘</body>
</html>
‘<head>
‘<title> Memisahkan baris </title>
‘</head>
‘<body>
‘<p> Pancasila terdiri dari lima sila yaitu :<br>Sila Kesatu Ketuhanan Yang Maha Esa. <br> Sila Kedua Kemanusiaan Yang Adil dan Beradab . <br> Sila Ketiga Persatuan Indonesia. <br> Sila Keempat Kerakyatan yang dipimpin oleh hikmat kebijaksanaan dalam permusyawaratan/perwakilan . <br> Sila Kelima Keadilan sosial bagi seluruh rakyat Indonesia.
‘</p>
‘</body>
</html>
Catatan :
tanda petik didepan kode program jangan ditulis
- Simpan file notepad dengan mengklik file – save us – namafile.html
- Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox
Membuat hyperlink.
Hyperlink
adalah salah satu cara di website untuk menghubungkan satu halaman web dengan
halaman lain. Ketika kita melakukan klik terhadap suatu tulisan yang sudah
diberi kode hyperlink maka halaman web akan berpindah menuju halaman yang
dituju. Langkah membuat hyperlink adalah sebagai berikut :
- Buka Notepad dengan cara klik start – all program – accesories – notepad
- Ketik di notepad tulisan di bawah ini :
‘<html>
<head>
<title>membuat hyperlink</title>
</head>
<head>
<title>membuat hyperlink</title>
</head>
<body>
Ini adalah hyperlink ke blog Ardan Sirodjuddin :
<a href=”http://www.ardansirodjuddin.wordpress.com”> Buka Blog Ardan Sirodjuddin </a>
<br>
Ini adalah hyperlink ke blog Ardan Sirodjuddin :
<a href=”http://www.ardansirodjuddin.wordpress.com”> Buka Blog Ardan Sirodjuddin </a>
<br>
Ini adalah
hyperlink ke web Dinas P dan K Jawa Tengah :
<a href=”http://www.pdkjateng.go.id> Buka web Dinas P dan K Jawa Tengah </a>
<br>
</body>
</html>
<a href=”http://www.pdkjateng.go.id> Buka web Dinas P dan K Jawa Tengah </a>
<br>
</body>
</html>
seperti
pada gambar :
- Simpan file notepad dengan mengklik file – save us – namafile.html
- Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox
Melanjutkan
tulisan saya, kali ini kita akan belajar membuat hyperlink ke file. Langkah-langkahnya
sebagai berikut :
- Buka Notepad melalui Start – All programs – accessories – notepad
- Ketik tulisan berikut :
‘<html>
‘<head>
‘<title>membuat hyperlink ke file</title>
‘</head>
‘<body>
Ini adalah hyperlink ke file membuat hyperlink :
‘<a href=”G:\blog\Materi\HTML\hyperlink\membuat_hyperlink.html”> Buka file membuat hyperlink </a>
‘<br>
Ini adalah hyperlink ke file membuat hyperlink :
‘<a href=”G:\blog\Materi\HTML\hyperlink\membuat_hyperlink.html”> Buka file membuat hyperlink </a>
‘<br>
‘</body>
‘</html>
‘</html>
Catatan
: tanda petik didepan kode program jangan ditulis.
- Simpan file notepad dengan mengklik file – save us – namafile.html
- Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox
Setelah
kita belajar membuat link, langkah belajarnya selanjutnya adalah kita belajar
membuat list. Tag <ul> digunakan untuk membuat sebuah Unordered List. Tag
<ul> memiliki atribut TYPE yang dapat digunakan untuk menentukan bentuk
bullet yang digunakan dalam list. Ada tiga macam bentuk yang dapat dipilih pada
atribut TYPE yaitu dic, square dan circle. Setiap teks yang akan dimasukkan
dalam list, ditandai dengan tag <ul> dibagian depan teks tersebut.
Sekarang kita coba dengan langkah-langkah sebagai berikut :
- Buka Notepad melalui Start – All programs – accessories – notepad
- Ketik di notepad tulisan di bawah ini :
‘<html>
‘<head>
‘<title>membuat unorderlist</title>
‘</head>
‘<head>
‘<title>membuat unorderlist</title>
‘</head>
‘<body>
Ibu Kota Indonesia adalah :<br>
‘<ul type=disc>
’<li> Jakarta </li>
’<li> Medan </li>
’<li> Semarang </li>
’<li> Surabaya </li>
’<li> Jambi </li>
‘</ul>
Makanan khas daerah Palembang adalah :<br>
‘<ul type=circle>
’<li> Soto </li>
’<li> Pempek </li>
’<li> Tiwul </li>
’<li> Sagu </li>
’<li> Roti </li>
‘</ul>
Ibu Kota Indonesia adalah :<br>
‘<ul type=disc>
’<li> Jakarta </li>
’<li> Medan </li>
’<li> Semarang </li>
’<li> Surabaya </li>
’<li> Jambi </li>
‘</ul>
Makanan khas daerah Palembang adalah :<br>
‘<ul type=circle>
’<li> Soto </li>
’<li> Pempek </li>
’<li> Tiwul </li>
’<li> Sagu </li>
’<li> Roti </li>
‘</ul>
‘</body>
‘</html>
‘</html>
seperti
pada gambar :
- Simpan file notepad dengan mengklik file – save us – namafile.html
- Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox
Pada
postingan kali ini, kita akan belajar membuat numbering pada tulisan. Jika pada
Unorder list kita menggunakan tag <ul> maka pada numbering kita gunakan
tag <ol>. .Ikuti langkah berikut :
- Buka Notepad melalui Start – All programs – accessories – notepad
- Ketik di notepad tulisan di bawah ini :
‘<html>
‘<head>
‘<title>membuat orderlist</title>
‘</head>
‘<head>
‘<title>membuat orderlist</title>
‘</head>
‘<body>
Ibu Kota Indonesia adalah :<br>
‘<ol type=1>
’<li> Jakarta </li>
’<li> Medan </li>
’<li> Semarang </li>
’<li> Surabaya </li>
’<li> Jambi </li>
‘</ol>
Makanan khas daerah Palembang adalah :<br>
‘<ol type=i>
’<li> Soto </li>
’<li> Pempek </li>
’<li> Tiwul </li>
’<li> Sagu </li>
’<li> Roti </li>
‘</ol>
Ibu Kota Indonesia adalah :<br>
‘<ol type=1>
’<li> Jakarta </li>
’<li> Medan </li>
’<li> Semarang </li>
’<li> Surabaya </li>
’<li> Jambi </li>
‘</ol>
Makanan khas daerah Palembang adalah :<br>
‘<ol type=i>
’<li> Soto </li>
’<li> Pempek </li>
’<li> Tiwul </li>
’<li> Sagu </li>
’<li> Roti </li>
‘</ol>
‘</body>
‘</html>
‘</html>
seperti
pada gambar :
- Simpan file notepad dengan mengklik file – save us – namafile.html
- Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox
- Seperti terlihat pada tulisan di atas terdapat numbering. Kesulitan yang sering kita dapatkan adalah ketika kita menekan tanda numbering pada toolbar di atas maka penomoran bukan pada tempat yang kita inginkan. Untuk mengatasinya, silahkan anda buka HTML dan pindahkan tag <ol> <li> pada tempat yang diinginkan. Selamat mencoba.
Posted in 
0 komentar:
Posting Komentar