About

Sabtu, 23 November 2013

Belajar HTML

04.49    No comments


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 :
  1. Buka Notepad melalui Start – All programs – accessories – notepad
  1. Ketik tulisan berikut :
‘<html>
‘<head>
‘<title> Belajar HTML </title>
‘</head>
‘<body>
Apa kabar teman-teman ? Marilah kita belajar HTML bersama Ardan Sirodjuddin
‘</body>
‘</html>
Catatan : tanda petik didepan kode program jangan ditulis
  1. Simpan file notepad dengan mengklik file – save us – namafile.html
  2. 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 :
  1. Buka notepad melalui Start – All programs – Accesories – Notepad

  1. 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
  1. Simpan file notepad dengan mengklik file – save us – namafile.html
  2. 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 :
  1. Buka notepad melalui Start – All programs – Accesories – Notepad
  1. 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>

  1. Simpan file notepad dengan mengklik file – save us – namafile.html
  2. 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 :
  1. Buka notepad melalui Start – All programs – Accesories – Notepad

  1. Ketik tulisan berikut :
‘<html>
<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
  1. Simpan file notepad dengan mengklik file – save us – namafile.html
  2. Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox

  1. 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 :
  1. Buka notepad melalui Start – All programs – Accesories – Notepad
  1. 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>

Catatan : tanda petik didepan kode program jangan ditulis
  1. Simpan file notepad dengan mengklik file – save us – namafile.html
  2. 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 :
  1. Buka Notepad dengan cara klik start – all program – accesories – notepad
  2. Ketik di notepad tulisan di bawah ini :
<html>
<head>
<title>membuat hyperlink</title>
</head>
<body>
Buat yang seperti ini!
<a href=”http:// www.SMKN 8 Semarang”> Buka Blog siska purvitasari</a>
<br>
Berikut ini adalah link menuju situs SMKN 8 Semarang :
<a href=”http://www.elearning elias> Buka web </html>  </a>
<br>
</body>

seperti pada gambar :

  1. Simpan file notepad dengan mengklik file – save us – namafile.html
  2. 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 :
  1. Buka Notepad melalui Start – All programs – accessories – notepad
  1. 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>
‘</body>
‘</html>
Catatan : tanda petik didepan kode program jangan ditulis.
  1. Simpan file notepad dengan mengklik file – save us – namafile.html
  2. 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 :
  1. Buka Notepad melalui Start – All programs – accessories – notepad
  1. Ketik di notepad tulisan di bawah ini :
‘<html>
‘<head>
‘<title>membuat unorderlist</title>
‘</head>
‘<body>
ANNGOTA XMM1 :<br>
‘<ul type=disc>
 ’<li> afrila kemala</li>
 ’<li> anita </li>
 ’<li> arum </li>
 ’<li> bela </li>
 ’<li> bayu </li>
‘</ul>
Makanan khas XMM1 :<br>
‘<ul type=circle>
 ’<li> Soto </li>
 ’<li> Pempek </li>
 ’<li> Tiwul </li>
 ’<li> Sagu </li>
 ’<li> Roti </li>
‘</ul>
‘</body>
‘</html>
seperti pada gambar :
  1. Simpan file notepad dengan mengklik file – save us – namafile.html
  2. 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 :
  1. Buka Notepad melalui Start – All programs – accessories – notepad
  1. Ketik di notepad tulisan di bawah ini :
‘<html>
‘<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>
‘</body>
‘</html>
seperti pada gambar :
  1. Simpan file notepad dengan mengklik file – save us – namafile.html
  2. Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox
  1. 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.

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)