MEMBUAT WEBSITE DENGAN HTML Dibuat oleh : Dea Arri Rajasa, SE., S.Kom HTML (Hyper Text Markup Language) STRUKTUR HTML <head> <title> Judul Website ditulis disini </title> </head> <body> Kode kode HTML lainya ditulis disini </body> Tampilan di website 1. Tag <!--> Untuk membuat suatu komentar <!-- Disini ditulis Komentar --> Tampilan di website (Tidak Tampil karena hanya memberi informasi bagi pembuat )
2. Tag <a> Singkatan dari anchor, digunakan untuk membuat sebuah tautan atau (link) antar web <a href =http://www.google.com> Link ke Google </a> Tampilan di website 3. Tag <b> Digunakan untuk membuat teks cetak tebal <b> Teks ini dicetak tebal </b> Tampilan di website 4. Tag <big> Digunakan untuk membuat sebuah tulisan agar tampak lebih besar <head> <title> Contoh Penggunaan Tag b dan big </title> </head> <body> <b> Ini menggunakan bold </b> <br> <big> Ini Menggunakan big</b> </body>
5. Tag <body> Merupakan bagian dari struktur HTML yang digunakan untuk menandai badan (body) dari suatu HTML. <head> <title> BELAJAR HTML </title> </head> <body> <!-- Disini Body --> Disini body </body> 6. Tag <br> Digunakan untuk mengakhiri satu barisan tulisan. lalu pindah ke baris baru di bawahnya <b> ini menggunakan bold </b> <br> <big> ini menggunakan big </big>
7. Tag < button> Digunakan untuk membuat tombol di web browser <button type= button > Klik disini </button> Tampilan di Website 8. Tag <caption> Digunakan untuk membuat judul sebuah table <table border= 1 > <caption>judul Tabel</caption> <tr> <th> Bulan </th> <th> Saldo </th> </tr> <tr> <th> January </th> <th> Rp.1.000.000 </th> </tr> <tr> <th>february </th> <th> Rp.2.000.000 </th> </tr> </table> Tampilan di Webiste
9. Tag <center> Digunakan untuk menengahkan suatu teks halaman <head> <title> BELAJAR HTML </title> </head> <body> <center>coba tulisan center atau tulisan di tengah </body> Tampilan di Website 10. Tag <div> Digunakan untuk mendefinisikan bagian dari suatu halaman web dengan format atau style tertentu 11. Tag <font> Digunakan untuk memformat bentuk font, warna, ukuran dari sebuah teks <font size= 3 color= red > Tulisan Warna Merah dengan ukuran 3 </font> <br> <font size= 2 color= blue > Tulisan Warna Biru dengan ukuran 3 </font> <br> <font face= verdana color= green > Tulisan Warna Hijau dengan jenis font verdana </font> <br> Tampilan di Website
12. Tag <form> Tag yang digunakan oleh pengguna untuk memasukan data. Tag ini biasanya dibantu oleh beberapa komponen lain, seperti : Input, Button, Option dan lainya <body> <form action= forminput.php method= get > Nama Anda : <input type= text name= varnama /> <br> Alamat : <input type= text name= varalamat /> <br> <input type="submit" value="kirim"/></form> </body> Tampilan di Website 13. Tag <frame> dan <frameset> Tag ini digunakan untuk menampilkan halaman web lain dalam sebuah halaman web yang dibuat. Halaman dapat dibuat terpisah dengan menampilkan halaman web lain yang berbeda-beda <frameset cols= 25%,50%,25% > <frame src="http://www.detik.com/"/> <frame src="http://www.faceboook.com/"/> <frame src="http://www.tweeter.com/"/> </frameset>
14. Tag <head> Digunakan untuk membuat header / Judul Website <head><title>judul Website</title></head> <body> </body>
15. Tag <h1> sampai dengan <h6> Digunakan untuk membuat tulisan buat judul yang ukuran tulisan kecil sampai besar <h1>menggunakan h1</h1> <h2>menggunakan h2</h2> <h3>menggunakan h3</h3> <h4>menggunakan h4</h4> <h5>menggunakan h5</h5> <h6>menggunakan h6</h6> 16. Tag <hr> Digunakan untuk membuat garis horizontal <p>diatas garis</p> <hr/> <p>dibawah garis</p>
17. Tag <i> Digunakan untuk membuat cetak miring <i>tulisan miring 18. Tag <img> Digunakan untuk menampilkan suatu gambar <img src="bunga.jpg" alt="ini Gambar Bunga" width="30%" height = "30%" />
19. Tag <li> Digunakan untuk menampilkan symbol data berurut seperti bullet dan nomor. Untuk urutan bernomor diawali dengan tag <ol> Untuk urutan simbol bullet diawali tag <ul> <ol> <li>satu </li> <li>dua </li> <li>tiga </li> </ol> <ul> <li> gula </li> <li> garam </li> <li> susu </li> </ul> 20. Tag <link> Digunakan biasanya pada saat website menggunkan css <head> <link rel= stylesheet type= txt/css </head>
21. Tag <ol> Digunakan untuk urutan data bernomor atau numeric. Juga Alfabet seperti contoh pada <li> <ol> <li>satu </li> <li>dua </li> <li>tiga </li> </ol> <ul> <li> gula </li> <li> garam </li> <li> susu </li> </ul> 22. Tag <option> Digunakan sebagai suatu elemen yang bisa dipilih <select> <option>jakarta</option> <option>surabaya</option> <option>makasar</option> </select>
23. Tag <p> Digunakan untuk mendefinisikan suatu paragraph Contoh <p>ini paragraph ke 1<p>ini paragraph ke 2 24. Tag <style> Digunakan untuk mendefinisikan bentuk-bentuk dokumen <head> <style type = text/css > h1 {color:green} p {color:blue} </style> </head> <body> <h1>contoh header</h1> <p>contoh paragraph</p> </body>
25. Tag <sub> Digunakan untuk membuat huruf / teks subscript Menulis rumus kimia H 2 O H<sub>2</sub>O 26. Tag <sup> Tag ini merupakan kebalikan dari subscript Menulis rumus X n X<sup>n<sup>
27. Tag <table> Digunakan untuk membuat layout tampilan halaman website. Memiliki beberapa atribut untuk halaman website yaitu : align, bgcolor, border, cellpading, cellspacing dan width. Tag untuk menentukan baris dan kolom table adalah <tr> dan <td> 28. Tag<tr> Digunakan untuk mendefinisikan baris dalam sebuah table. 29. Tag<td> Digunakan untuk mendefinisikan kolom (cell)pada baris dalam sebuah table. 30. Tag<u> Digunakan untuk memberi garis bawah suatu huruf / teks 31. Tag<ul> Digunakan untuk membuat symbol bullet. Sama seperti penggunaan tag dalam <li>
PENTING!!! Untuk Contoh penggunaan nomer 27 sampai 31 bisa dilihat contoh dibawah ini <head> <title>belajar HTML</title> </head> <table border="1px" width="100%" height="100%"> <!-- Baris Pertama Untuk Header --> <tr> <!-- Memmbuat 2 kolom menjadi 1 Untuk Header /Judul Website --> <td colspan="2" width="100%" height="10%"> <center> WEBSITEKU DENGAN HTML </td> </tr> <tr> <!-- Baris Pertama Untuk Menu dan Isi Berita --> <td valign ="top" width ="20%"> <a href="/daftarberita.php">daftar Berita</a><br> <a href="/editberita.php">edit Berita</a><br> <a href="/hapusberita.php">hapus Berita</a><br> <td valign ="top"> <center><h1> Isi Berita </h1><br> <img src="bunga.jpg" alt="ini Bunga Tulip" width ="20%" height="30%"/> <br>ini Bunga Tulip <br>nama Kelompok <ul> <li> Doni </li> <li> Ita kusumawati </li> <li> Anton </li> </ul> </td> </tr>
<tr> <!-- Baris Ketiga Untuk Nama Pembuat Website --> <td align="center" colspan="2" height="10%"> Copyright@Dea Ari 2016 </td> </tr> </table>