PENGENALAN HTML
PENGENALAN KODE HTML
D. Mengatur Paragraf
Sekarang kita akan belajar mengatur paragraf pada website kita. Ikuti langkah berikut :
1. Buka notepad melalui Start – All programs – Accesories – Notepad
2. 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
3. Simpan file notepad dengan mengklik file – save us – namafile.html 4. Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox
5. Jangan lupa dihafalkan kode html nya ya.
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
2. 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>
3. Simpan file notepad dengan mengklik file – save us – namafile.html 4. 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>
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>
seperti pada gambar :
3. Simpan file notepad dengan mengklik file – save us – namafile.html 4. 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
2. 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>
3. Simpan file notepad dengan mengklik file – save us – namafile.html 4. 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 :
2. Ketik di notepad tulisan di bawah ini : ‘<html> ‘<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>
‘</body> ‘</html>
3. Simpan file notepad dengan mengklik file – save us – namafile.html 4. 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 :
2. 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>
3. Simpan file notepad dengan mengklik file – save us – namafile.html 4. Coba buka nama tersebut dengan Internet Explorer atau Mozilla Firefox
5. 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.