Recomendados
Mais conteúdo relacionado
Destaque
Semelhante a Tutorial HTML
Semelhante a Tutorial HTML (20)
Último
Último (20)
Tutorial HTML
- 2. Dasar HTML <HTML> <HEAD> <TITLE>Judul dokumen</TITLE> </HEAD> <BODY> Isi dokumen </BODY> </HTML> • • • • HTML: menandai awal dan akhir dokumen HTML HEAD: menandai bagian header dokumen HTML TITLE: memberi judul pada dokumen HTML BODY: menandai awal dan akhir isi dokumen (yang ditampilkan) Page 2
- 3. Contoh Isi Dokumen HTML <html> <html> <head> <head> <title>Re Riski Dwi Andika</title> <title>Re Riski Dwi Andika</title> </head> </head> <body> <body> <h1>Ane</h1> <h1>Ane</h1> <h2>Ganteng</h2> <h2>Ganteng</h2> <p align=”center”>Nama saya Re Riski Dwi Andika <p align=”center”>Nama saya Re Riski Dwi Andika <b>pertama</b> saya, karena saya baru belajar tentang <b>pertama</b> saya, karena saya baru belajar tentang cara membuat <b></b>. cara membuat <b></b>. </p> </p> </body> </body> </html> </html> Page 3
- 4. Daftar Tag • • • • • • • • • • • • • • • • <html> <head> <title> <body> <h1>…<h6> <p> <b>,<i>,<u> <br> <font> <li>,<ol>,<ul> <img> <a> <table> <!-- --> <form> <input>,<select> Dokumen Header Judul dokumen Isi dokumen Judul paragraf Paragraf Ganti baris Font Enumerasi Gambar Link Tabel Komentar Formulir isian Komponen isian pada formulir Page 4
- 5. Tag Judul (Heading) <hn>Judul paragraf</hn> n = 1,2,3,4,5,6 (tingkat judul) Untuk menuliskan judul suatu paragraf <h1>Judul Tingkat 1</h1> <h1>Judul Tingkat 1</h1> <h2>Judul Tingkat 2</h2> <h2>Judul Tingkat 2</h2> <h3>Judul Tingkat 3</h3> <h3>Judul Tingkat 3</h3> <h4>Judul Tingkat 4</h4> <h4>Judul Tingkat 4</h4> <h5>Judul Tingkat 5</h5> <h5>Judul Tingkat 5</h5> <h6>Judul Tingkat 6</h6> <h6>Judul Tingkat 6</h6> Judul Tingkat 1 Judul Tingkat 2 Judul Tingkat 3 Judul Tingkat 4 Judul Tingkat 5 Judul Tingkat 6 Page 5
- 6. Tag Paragraf (Paragraph) <p>paragraf</p> Untuk menandai suatu paragraf. Suatu paragraf akan terlihat dibatasi oleh satu baris kosong sebelum dan sesudahnya. <p> <p> Ini adalah homepage pertama Ini adalah homepage pertama saya, karena saya baru belajar saya, karena saya baru belajar tentang cara membuat homepage. tentang cara membuat homepage. </p> </p> <p>Homepage ini masih dalam tahap <p>Homepage ini masih dalam tahap pengembangan, oleh karena itu pengembangan, oleh karena itu tampilannya masih terlalu tampilannya masih terlalu sederhana.</p><p>Saya akan sederhana.</p><p>Saya akan berusaha untuk terus memperbaiki berusaha untuk terus memperbaiki homepage saya ini, sehingga homepage saya ini, sehingga semakin lama semakin menarik untuk semakin lama semakin menarik untuk dilihat.</p> dilihat.</p> Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu sederhana. Saya akan berusaha untuk terus memperbaiki homepage saya ini, sehingga semakin lama semakin menarik untuk dilihat. Page 6
- 7. Tag Atribut 1 <b>Kalimat yang dicetak tebal</b> <i>Kalimat yang dicetak miring</i> <u>Kalimat yang digarisbawahi</u> Untuk menandai bagian kalimat agar dicetak tebal, miring, dan/atau digarisbawahi. <p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>, <p>Kata dapat dicetak <b>tebal</b>, <i>miring</i>, <u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan <u>garis bawah</u>, <b>tebal <i>miring</i></b>, dan <b><i><u>kombinasi</u></i></b> di tengah huruf <b><i><u>kombinasi</u></i></b> di tengah huruf normal</p> normal</p> Kata dapat dicetak tebal, miring, garis bawah, tebal miring, dan kombinasi di tengah huruf normal Page 7
- 8. Tag Ganti Baris (Break line) <br> Untuk pindah ke baris berikutnya. Bentuk penulisan lain yang dianjurkan (XML style) : <br /> Ganti baris <p>Perkenalkan,<br /> <p>Perkenalkan,<br /> nama saya ..... Ini nama saya ..... Ini adalah<br />homepage pertama adalah<br />homepage pertama saya,<br /> karena saya baru saya,<br /> karena saya baru belajar tentang cara<br /> belajar tentang cara<br /> membuat homepage.</p> membuat homepage.</p> Perkenalkan, nama saya ..... Ini adalah homepage pertama saya, karena saya baru belajar tentang cara membuat homepage. <p>Homepage ini masih dalam <p>Homepage ini masih dalam tahap pengembangan, oleh tahap pengembangan, oleh karena itu tampilannya masih karena itu tampilannya masih terlalu sederhana.</p> terlalu sederhana.</p> Homepage ini masih dalam tahap pengembangan, oleh karena itu tampilannya masih terlalu Paragraf sederhana. Paragraf Page 8
- 9. Tag Tabel (Table) - data <table> definisi tabel </table> Menampilkan data dalam bentuk tabel Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom. Tag untuk penanda baris adalah <tr> definisi baris </tr> Tag untuk penanda kolom adalah <td>data</td> <table border="1"> <table border="1"> <tr> <tr> <td>aaa</td> <td>aaa</td> <td>bbb</td> <td>bbb</td> <td>ccc</td> <td>ccc</td> </tr> </tr> <tr> <tr> <td>ddd</td><td>eee</td><td>fff</td> <td>ddd</td><td>eee</td><td>fff</td> </tr> </tr> </table> </table> Page 9
- 10. Tag Tabel (Table) - data <table> definisi tabel </table> Menampilkan data dalam bentuk tabel Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom. Tag untuk penanda baris adalah <tr> definisi baris </tr> Tag untuk penanda kolom adalah <td>data</td> <table border="1"> <table border="1"> <tr> <tr> <td>aaa</td> <td>aaa</td> <td>bbb</td> <td>bbb</td> <td>ccc</td> <td>ccc</td> </tr> </tr> <tr> <tr> <td>ddd</td><td>eee</td><td>fff</td> <td>ddd</td><td>eee</td><td>fff</td> </tr> </tr> </table> </table> Page 9