HTML menggunakan element untuk mengetahui struktur dari apa yang diperintahkan oleh pengguna untuk menyimpan suatu informasi atau perintah ketika akan memasukkan suatu konten yang di awali dengan tag pembuka dan di akhiri dengan tag penutup. Struktur dari element sendiri adalah
<tag pembuka element>isi tag dari element</tag penutup element>
Contoh tag ada pada table 1 di bawah ini
| Tag Element | Artian |
|---|---|
| <html></html> | Element untuk membuat sebuah dokumen HTML |
| <head></head> | Element pembuka atau sebagai pengangkut dokumen baik embed maupun inline *seperti Javascript,Bootsrap,Css ll |
| <title></title> | Sebagai judul dari HTML yang kita buat dan di tempatkan di bagian <head> |
| <body></body> | element yang mengangkut isi dari HTML yang akan kita buat . |
| <h1></h1> | Header atau heading dari paragraf yang akan kita buat |
| <i></i> <b></b> <u></u> |
Masing-masing dari elemetn tersebut berguna sebagai text style yang dimana memiliki artian untuk italic bold dan underline |
| <br> | berfungsi sebagai line break dan tanpa tag penutup |
Caranya
- Buka text editor , bisa menggunakan notepad,sublime,phpstorm,notepad++,bracket dsb
- Copas tulisan HTML dalam 'Text HTML' dibawah ini dan save as dengan extensi .html
- Buka file yang sudah di save tadi menggunakan browser .. ex : Chrome,mozzilla,IE,Safari dsb
<!DOCTYPE html> <html> <head> <title>Ini contoh judul HTML</title> </head> <body> <h1><u>Ini adalah contoh Heading dengan Underline</u></h1> <h1>heading 1</h1> <h2>heading 2</h2> <h3>heading 3</h3> <h4>heading 4</h4> <h5>heading 5</h5> <h6>heading 6</h6> <b> Ini tulisan Bold </b> <br> <i>Ini tulisan italic/i> <br> <u>ini tulisan Underline </u> <b><i>contoh tulisan Bold dan italic </i></b> <b><i><u>contoh tulisan bold,italic,dan underline</u></i></b> <h1><i>Italic heading</i></h1> <h3><u>Underlined heading</u></h3> </body> </html>
Dan akan menghasilkan output seperti gambar 1 di bawah ini
 |
| Gambar 1 |
Dan itulah sebuah contoh dari element pada HTML , kita jumpa pada artikel HTML lainnya dan semoga membantu .
Post A Comment:
0 comments: