Elemen Dasar HTML
Heading (H1 sampai H6)
Tag heading biasanya digunakan pada judul sebuah teks pada halaman HTML dan penggunaanya tentu disesuaikan dengan kebutuhan.
Contoh:
Cobalah anda ketik pada notepad script berikut :
<html>
<head> <title>Contoh Penggunaan Elemen Heading</title> </head>
<body>
<h1 align=”center”> Contoh Heading Satu</h1>
<h2 align=”center”> Contoh Heading Dua</h2>
<h3 align=”center”> Contoh Heading Tiga</h3>
<h4 align=”center”> Contoh Heading Empat</h4>
<h5 align=”center”> Contoh Heading Lima</h5>
<h6 align=”center”> Contoh Heading Enam</h6>
</body>
</html>
Kemudian simpan dengan nama heading.html, selanjutnya bukalah file yang anda simpan tadi dan perhatikan apa yang terjadi?.
Kalau mau, coba anda buka file tadi dengan notepad dan gantilah nilai atribut (property) align menjadi left atau right.
Paragraf (P)
Tag ini digunakan untuk menuliskan sebuah paragraf.
Contoh:
Buatlah script berikut pada notepad:
<html>
<head>
<title>Pemformatan Paragraf</title> </head>
<body>
<h3>2BProgrammer</h3>
<p>2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming.</p>
<hr/><h2>Dibawah ini Contoh Paragraf Ditambah Property Align dengan Value Justify (rata kanan-kiri)</h2>
<p align="justify"> Nasib adalah kualitas hidup yang ada di dalam tanggung jawab pribadimu. Jika hatimu baik, pikiranmu baik, yang kau katakan baik, dan yang kau lakukan baik, maka baiklah nasibmu. Maka ikhlaskanlah hati, pikiran, kata-kata, dan keseluruhan gerak tubuhmu kepada kebaikan. Sesungguhnya, lebih mudah bagimu mendekatkan dirimu kepada kebaikan, daripada mengeluarkan dirimu dari kesulitan karena keburukan.
Hari ini … mulailah nasib baikmu dengan memasang senyum di wajahmu, mensyukuri kebaikan mereka yang di sekitarmu, bersegeralah berterima kasih, bersegeralah melakukan yang telah kau janjikan, dan pastikanlah mereka tahu bahwa engkau berbahagia menjadi bagian dari kehidupan mereka.</p>
<p align="justify"> Sesungguhnya, dengan hati, pikiran, dan tindakanmu yang baik itu - engkau akan sudah merasakan kebahagiaan, walau rezeki tambahan yang kau minta dari Tuhanmu belum turun. Kebaikanmu adalah rezeki pertamamu, yang menjadi penunjuk jalan bagi rezeki-rezeki besar untuk sampai kepadamu. Ingatlah, hadiah pertama bagimu yang melakukan kebaikan, adalah kebaikan. Dan jika hati, pikiran, dan tindakan keseharianmu baik, maka hari-hari dalam hidupmu akan baik. Dan dengannya, nasibmu akan baik. </p>
<p align="justify"> Sesungguhnya, dan jangan sedikit pun kau ragukan ini, bahwa Tuhan telah menyerahkan kewenangan untuk membaikkan nasibmu, sepenuhnya kepadamu. Terimalah, dan jangan kecewakan Tuhan yang telah sangat mempercayai kebijakan jiwamu.</p>
<p align="justify"> Engkaulah penentu kebaikan nasibmu.</p>
<p align="justify"> Oleh Mario Teguh - Loving you all as always.</p>
</body>
</html>
Kemudian simpan dengan nama paragraf.html, selanjutnya bukalah file yang anda simpan tadi dan perhatikan apa yang terjadi?.
Break Line
Break line digunakan untuki memotong sebuah kalimat pada dokumen HTML.
Bentuk umum Break Line adalah:
……kalimat……..<br>…….kalimat………..<br>
Contoh:
Cobalah anda ketikl script berikut :
<html>
<head>
<title>Penggunaan Break Line</title> </head>
<body>
<h2> Contoh Kalimat Tanpa Break Line </h2>
Janganlah berkecil hati jika kebaikanmu diabaikan.
Sesungguhnya kebaikanmu adalah untuk dirimu sendiri.
Itu sebabnya, jika engkau ingin menemukan kedamaian dalam kebaikanmu, janganlah mengharapkan terima kasih dan pujian dari orang lain.
Berterima-kasihlah kepada dirimu sendiri, dan pujilah Tuhan yang mengasihi jiwa baikmu.
Yakinilah ini, bahwa kebaikan yang kau lakukan akan menemuimu di surga, melalui jalan yang damai di dunia ini.
Engkau jiwa yang baik, bersabarlah dalam kebaikanmu.
Oleh Mario Teguh - Loving you all as always
<h2> Contoh Kalimat Dengan Break Line </h2>
Janganlah berkecil hati jika kebaikanmu diabaikan. <br>
Sesungguhnya kebaikanmu adalah untuk dirimu sendiri. <br>
Itu sebabnya, jika engkau ingin menemukan kedamaian dalam kebaikanmu, <br>janganlah mengharapkan terima kasih dan pujian dari orang lain. <br>
Berterima-kasihlah kepada dirimu sendiri, dan pujilah Tuhan yang mengasihi jiwa baikmu. <br><br>
Yakinilah ini, <br> Bahwa kebaikan yang kau lakukan akan menemuimu di surga, melalui jalan yang damai di dunia ini. <br>
Engkau jiwa yang baik, bersabarlah dalam kebaikanmu. <br><br>
Oleh Mario Teguh - Loving you all as always<br>
</body>
</html>
Horizontal Rules(HR)
Horizontal Rule atau Horizontal Line tag digunakan untuk membuat garis horizontal sebagai pemisah antar paragraf dalam document HTML.
Bentuk Umum:
…kalimat…
<hr [property]>
…kalimat…
Contoh:
<html>
<head>
<title>Penggunaan Break Line</title> </head>
<body>
<h2> Contoh Kalimat Tanpa Break Line </h2>
Janganlah berkecil hati jika kebaikanmu diabaikan.
Sesungguhnya kebaikanmu adalah untuk dirimu sendiri.
Itu sebabnya, jika engkau ingin menemukan kedamaian dalam kebaikanmu, janganlah mengharapkan terima kasih dan pujian dari orang lain.
Berterima-kasihlah kepada dirimu sendiri, dan pujilah Tuhan yang mengasihi jiwa baikmu.
<hr size=”3” color=”blue”>
Yakinilah ini, bahwa kebaikan yang kau lakukan akan menemuimu di surga, melalui jalan yang damai di dunia ini.
Engkau jiwa yang baik, bersabarlah dalam kebaikanmu.
Oleh Mario Teguh - Loving you all as always.
</body>
</html>
Sekian dulu tutorial @ 2BProgrammer. Semoga Bermanfaat!!
Tag heading biasanya digunakan pada judul sebuah teks pada halaman HTML dan penggunaanya tentu disesuaikan dengan kebutuhan.
Contoh:
Cobalah anda ketik pada notepad script berikut :
<html>
<head> <title>Contoh Penggunaan Elemen Heading</title> </head>
<body>
<h1 align=”center”> Contoh Heading Satu</h1>
<h2 align=”center”> Contoh Heading Dua</h2>
<h3 align=”center”> Contoh Heading Tiga</h3>
<h4 align=”center”> Contoh Heading Empat</h4>
<h5 align=”center”> Contoh Heading Lima</h5>
<h6 align=”center”> Contoh Heading Enam</h6>
</body>
</html>
Kemudian simpan dengan nama heading.html, selanjutnya bukalah file yang anda simpan tadi dan perhatikan apa yang terjadi?.
Kalau mau, coba anda buka file tadi dengan notepad dan gantilah nilai atribut (property) align menjadi left atau right.
Paragraf (P)
Tag ini digunakan untuk menuliskan sebuah paragraf.
Contoh:
Buatlah script berikut pada notepad:
<html>
<head>
<title>Pemformatan Paragraf</title> </head>
<body>
<h3>2BProgrammer</h3>
<p>2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming. 2BProgrammer untuk indonesia blognya para pecinta programming.</p>
<hr/><h2>Dibawah ini Contoh Paragraf Ditambah Property Align dengan Value Justify (rata kanan-kiri)</h2>
<p align="justify"> Nasib adalah kualitas hidup yang ada di dalam tanggung jawab pribadimu. Jika hatimu baik, pikiranmu baik, yang kau katakan baik, dan yang kau lakukan baik, maka baiklah nasibmu. Maka ikhlaskanlah hati, pikiran, kata-kata, dan keseluruhan gerak tubuhmu kepada kebaikan. Sesungguhnya, lebih mudah bagimu mendekatkan dirimu kepada kebaikan, daripada mengeluarkan dirimu dari kesulitan karena keburukan.
Hari ini … mulailah nasib baikmu dengan memasang senyum di wajahmu, mensyukuri kebaikan mereka yang di sekitarmu, bersegeralah berterima kasih, bersegeralah melakukan yang telah kau janjikan, dan pastikanlah mereka tahu bahwa engkau berbahagia menjadi bagian dari kehidupan mereka.</p>
<p align="justify"> Sesungguhnya, dengan hati, pikiran, dan tindakanmu yang baik itu - engkau akan sudah merasakan kebahagiaan, walau rezeki tambahan yang kau minta dari Tuhanmu belum turun. Kebaikanmu adalah rezeki pertamamu, yang menjadi penunjuk jalan bagi rezeki-rezeki besar untuk sampai kepadamu. Ingatlah, hadiah pertama bagimu yang melakukan kebaikan, adalah kebaikan. Dan jika hati, pikiran, dan tindakan keseharianmu baik, maka hari-hari dalam hidupmu akan baik. Dan dengannya, nasibmu akan baik. </p>
<p align="justify"> Sesungguhnya, dan jangan sedikit pun kau ragukan ini, bahwa Tuhan telah menyerahkan kewenangan untuk membaikkan nasibmu, sepenuhnya kepadamu. Terimalah, dan jangan kecewakan Tuhan yang telah sangat mempercayai kebijakan jiwamu.</p>
<p align="justify"> Engkaulah penentu kebaikan nasibmu.</p>
<p align="justify"> Oleh Mario Teguh - Loving you all as always.</p>
</body>
</html>
Kemudian simpan dengan nama paragraf.html, selanjutnya bukalah file yang anda simpan tadi dan perhatikan apa yang terjadi?.
Break Line
Break line digunakan untuki memotong sebuah kalimat pada dokumen HTML.
Bentuk umum Break Line adalah:
……kalimat……..<br>…….kalimat………..<br>
Contoh:
Cobalah anda ketikl script berikut :
<html>
<head>
<title>Penggunaan Break Line</title> </head>
<body>
<h2> Contoh Kalimat Tanpa Break Line </h2>
Janganlah berkecil hati jika kebaikanmu diabaikan.
Sesungguhnya kebaikanmu adalah untuk dirimu sendiri.
Itu sebabnya, jika engkau ingin menemukan kedamaian dalam kebaikanmu, janganlah mengharapkan terima kasih dan pujian dari orang lain.
Berterima-kasihlah kepada dirimu sendiri, dan pujilah Tuhan yang mengasihi jiwa baikmu.
Yakinilah ini, bahwa kebaikan yang kau lakukan akan menemuimu di surga, melalui jalan yang damai di dunia ini.
Engkau jiwa yang baik, bersabarlah dalam kebaikanmu.
Oleh Mario Teguh - Loving you all as always
<h2> Contoh Kalimat Dengan Break Line </h2>
Janganlah berkecil hati jika kebaikanmu diabaikan. <br>
Sesungguhnya kebaikanmu adalah untuk dirimu sendiri. <br>
Itu sebabnya, jika engkau ingin menemukan kedamaian dalam kebaikanmu, <br>janganlah mengharapkan terima kasih dan pujian dari orang lain. <br>
Berterima-kasihlah kepada dirimu sendiri, dan pujilah Tuhan yang mengasihi jiwa baikmu. <br><br>
Yakinilah ini, <br> Bahwa kebaikan yang kau lakukan akan menemuimu di surga, melalui jalan yang damai di dunia ini. <br>
Engkau jiwa yang baik, bersabarlah dalam kebaikanmu. <br><br>
Oleh Mario Teguh - Loving you all as always<br>
</body>
</html>
Horizontal Rules(HR)
Horizontal Rule atau Horizontal Line tag digunakan untuk membuat garis horizontal sebagai pemisah antar paragraf dalam document HTML.
| Property | Description |
| Align | menetukan posisi dari HR, dengan value : canter | right | left. |
| Width | Untuk menentukan panjang HR default 100% |
| Size | Untuk menentukan tebal dari HR dalam pixel, defaulnya adalah 2 |
| NoShade | Efek bayangan. |
| Color | Untuk memberi warna pada HR |
Bentuk Umum:
…kalimat…
<hr [property]>
…kalimat…
Contoh:
<html>
<head>
<title>Penggunaan Break Line</title> </head>
<body>
<h2> Contoh Kalimat Tanpa Break Line </h2>
Janganlah berkecil hati jika kebaikanmu diabaikan.
Sesungguhnya kebaikanmu adalah untuk dirimu sendiri.
Itu sebabnya, jika engkau ingin menemukan kedamaian dalam kebaikanmu, janganlah mengharapkan terima kasih dan pujian dari orang lain.
Berterima-kasihlah kepada dirimu sendiri, dan pujilah Tuhan yang mengasihi jiwa baikmu.
<hr size=”3” color=”blue”>
Yakinilah ini, bahwa kebaikan yang kau lakukan akan menemuimu di surga, melalui jalan yang damai di dunia ini.
Engkau jiwa yang baik, bersabarlah dalam kebaikanmu.
Oleh Mario Teguh - Loving you all as always.
</body>
</html>
Sekian dulu tutorial @ 2BProgrammer. Semoga Bermanfaat!!
0 komentar:
Posting Komentar