Pada postingan kali ini, Saya akan sedikit memberikan tutorial tentang berbagai macam tag dasar HTML5 yang diperuntukkan untuk memenuhi tugas Pemrograwan Web . Struktur dasar halaman HTML5 secara umum adalah sebagai berikut;
- <header>
- <nav>
- <article>
- <section>
- <aside>
- <footer>
Berikut adalah langkah-langkah membuat tag dasar HTML 5 :
1. Pertama kita membuka aplikasi netbeans > File > New Project atau bisa juga langsung klik CTRL+Shift+New secara bersamaan
2. Setelah memilih New Project akan muncul tampilan seperti ini.
Pilih PHP project dibagian Categories lalu pilih PHP Application dibagian projectnya seperti gambar dibawah ini, lalu klik next>
3. Setelah itu klik next dan akan muncul tampilan dibawah ini.
Nah, dibagian ini kita akan memberi nama project kita sesuai apa yang ingin kita buat. Disini saya memberi nama projeknya TutorialHTML5. Karena kali ini kita akan membahas tentang tag dasar HTML 5. Setelah projek diberi nama langsung klik Finish teman. Maka kita berhasil masuk ke dalam halaman projek yang akan kita buat seperti gambar berikut:
Setelah kita masuk ke dalam halaman projek kita, Mari kita simak apa saja source code yang dibutuhkan untuk membuat sebuah tag halaman dasar web HTML 5
1. HEADER(kepala)
Didalam elemen inilah kita dapat meletakkan kepala atau judul halaman website yang kita buat. Mungkin ada dari teman-teman yang bertanya, apa bedanya dengan tag <head>. Perlu teman - teman ketahui, tag <head> dan <header> berbeda penggunaannya, dari tipenya pun juga berbeda. <head> merupakan elemen non visual yang berfungsi sebagai parsing atau pengurai informasi singkat tentang halaman. Sedangkan elemen <header> merupakan elemen visual yang diletakkan di dalam elemen <body>, tujuan dari elemen <header> ini adalah memberikan ruang untuk kita meletakkan kepala halaman seperti judul, logo, dan lainnya. Contoh penulisan sintaknya seperti dibawah ini:
2. NAV(navigasi)
Jika kita lihat dari namanya saja kita akan tahu, bahwa ruang didalam elemen navigasi ini digunakan untuk meletakkan elemen-elemen yang bertugas sebagai navigator. Penulisan elemen ini dengan menggunakan tag <nav> dan ditutup dengan tag </nav>. Elemen ini juga merupakan elemen baru yang disediakan dalam HTML5. Dalam penggunaannya, ruang didalam elemen <nav> biasanya untuk meletakkan menu-menu navigasi. Menu tersebut dapat berupa link atau tautan ke website luar, atau bisa juga tautan ke halaman lain dalam website yang sama. Contoh penulisan sintak tag nav sebagai berikut:
3. ARTICLE(artikel)
Tag <article> juga merupakan tag baru yang disediakan HTML5. Penulisan sintaknya dengan menggunakan tag <article> dan ditutup dengan tag </article>. Secara umum elemen article digunakan untuk meletakkan konten utama dalam halaman website yang kita buat. Konten utama yang dimaksud seperti isi dari artikel, berita, judul berita, dan lain sebagainya. Biasanya didalam elemen inilah kita meletakkan paragraph tulisan. Contoh penulisan sintak pada tag <article> sebagai berikut:
4. SECTION(bagian)
Elemen <section> adalah bagian dari elemen <article>. Maksudnya adalah <section> biasanya di letakkan didalam elemen <article>, dapat kita sebut ini adalah elemen di dalam elemen. Sintak penulisannya menggunakan tag <section> dan ditutup dengan tag </section>. Menunjukkan bahwa ia merupakan bagian dari sebuah artikel. Contoh bagian dari sebuah artikel misalnya seperti pendahuluan dari sebuah artikel, isi inti dari sebuah artikel, juga kaki atau penutup artikel. kita bisa melihat scriptnya pada bagian no 3 yang letaknya berada di dalam article.
5. ASIDE(samping)
Aside juga merupakan elemen baru didalam HTML5 yang tidak lagi direkomendasikan pemakaiannya pada versi HTML4. Penulisan aside dengan menggunakan tag <aside> dan ditutup dengan tag </aside>. Dari namanya, ini berarti terletak disamping. Pada contoh gambar struktur halaman diatas saya contohkan berada disamping kanan, itu bersifat umum. Kita dapat meletakkannya juga disebelah kiri. Didalam elemen <aside> ini biasanya diletakkan link-link yang tertaut pada artikel terbaru, terpopuler, relasi link, dan lain sebagainya. Jika kamu ingin menambahkan menu sidebar atau menu samping, direkomendasikan untuk meletakkanya didalam elemen aside.
6. FOOTER(kaki)
Elemen footer ditulis dengan menggunakan tag <footer> dan ditutup dengan tag </footer>. Dalam HTML5, dianjurkan untuk meletakkan kaki halaman di elemen ini. Biasanya terdiri dari menu atau link kontak, kebijakan privasi, aturan penggunaan, copyright, alamat, dan lain sebagainya. Contoh penulisan sebagai berikut
Demikian lah pembahasan mengenai Tag HTML 5. Lebih kurangnya mohon ditambahkan jika masih ada yang kurang menurut anda :)
Tidak ada komentar:
Posting Komentar