Dokumen HTML secara ketat terorganisir. Setiap bagian dari dokumen dibedakan, diumumkan dan tertutup dalam tag tertentu. Dalam tutorial ini kita akan melihat bagaimana membangun struktur global dokumen HTML dan unsur-unsur semantik baru yang tergabung dalam HTML5.
DOCTYPE
Pertama, kita perlu menunjukkan jenis dokumen yang kita buat. Dalam HTML5 ini sangat sederhana:
<! DOCTYPE html>
Baris ini harus menjadi baris pertama dari file Anda, tanpa ruang atau baris sebelum. Ini adalah cara untuk mengaktifkan modus standar dan memaksa browser untuk menafsirkan HTML5 ketika itu mungkin atau mengabaikannya sebaliknya.
<Html>
Setelah menyatakan jenis dokumen, kita harus membangun struktur pohon HTML. Seperti biasa, elemen root untuk pohon ini adalah <html> elemen. Elemen ini akan menyertakan semua kode HTML kita.
| <! DOCTYPE html> <html lang = "en"> </ html> |
Atribut lang dalam tag pembuka <html> adalah satu-satunya atribut yang kita perlu menentukan di HTML5. Atribut ini mendefinisikan bahasa manusia dari isi dokumen kita menciptakan-dalam hal ini, en untuk bahasa Inggris.
HTML5 sangat fleksibel mengenai struktur dan unsur-unsur yang digunakan untuk membangunnya. <Html> elemen dapat dimasukkan tanpa atribut atau bahkan diabaikan sama sekali. Untuk kompatibilitas, dan untuk beberapa alasan tidak layak disebutkan di sini, kami sarankan Anda mengikuti beberapa aturan dasar. Kami akan mengajarkan Anda bagaimana membangun dokumen HTML sesuai dengan apa yang kita anggap praktik terbaik.
<Head>
Mari kita terus membangun template kami. Kode HTML disisipkan di antara <html> tag harus dibagi menjadi dua bagian utama. Seperti yang terjadi di versi HTML sebelumnya, bagian pertama adalah kepala dan kedua tubuh. Jadi langkah selanjutnya adalah membuat kedua bagian dalam kode menggunakan unsur-unsur yang sudah dikenal <head> dan <body>.
The <head> berjalan pertama, tentu saja, dan seperti sisa elemen struktur, ia memiliki bukaan dan tag penutup.
| <! DOCTYPE html> <html lang = "en"> <head> </ head> </ html> |
Tag itu sendiri tidak berubah dari versi sebelumnya, dan tujuannya akan persis sama. Dalam <head> tag kita akan menentukan judul halaman web kami, menyatakan pengkodean karakter, memberikan informasi umum tentang dokumen, dan memasukkan file eksternal dengan gaya, script atau gambar bahkan diperlukan untuk membuat halaman. Kecuali untuk judul dan beberapa ikon, sisa informasi dimasukkan ke dokumen antara <head> tag biasanya tidak terlihat.
<Body>
Bagian besar berikutnya yang merupakan bagian dari organisasi utama dokumen HTML adalah tubuh. Tubuh adalah bagian yang terlihat dari dokumen dan ditetapkan dengan <body> tag.
Tag ini tidak berubah dari versi sebelumnya HTML:
| <! DOCTYPE html> <html lang = "en"> <head> </ head> <body> </ body> </ html> |
<meta>
Sekarang saatnya untuk membangun kepala dokumen. Ada beberapa perubahan dan inovasi dalam kepala, dan salah satunya adalah tag yang mendefinisikan pengkodean karakter dokumen. Ini adalah tag meta dan menentukan bagaimana teks harus disajikan di layar.
| <! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> </ head> <body> </ body> </ html> |
Inovasi untuk elemen ini di HTML5, seperti dalam banyak kasus, itu hanya penyederhanaan. Meta tag baru untuk pengkodean karakter yang lebih pendek dan sederhana. Tentu saja Anda dapat mengubah utf-8 untuk pengkodean Anda memilih untuk menggunakan, dan meta tag lain seperti deskripsi atau kata kunci dapat ditambahkan, seperti yang ditunjukkan dalam contoh berikut:
| <! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "description" content = "Ini adalah contoh HTML5"> <meta name = "keywords" content = "HTML5"> </ head> <body> </ body> |
</ html> Catatan: Selain dari judul atau beberapa ikon, sebagian besar informasi yang disisipkan di antara <head> tag tidak terlihat oleh pengguna. The <meta> tag menentukan jenis dan konten menyatakan nilainya, namun tidak satupun dari nilai-nilai ini ditampilkan di layar. Di HTML5, tidak perlu tag diri dekat dengan garis miring di akhir, tapi kami sarankan selfenclosing untuk kompatibilitas alasan.
<title>
<Title> tag, seperti biasa, hanya menentukan judul dokumen, dan tidak ada yang baru untuk berkomentar tentang hal itu.
<Title> tag, seperti biasa, hanya menentukan judul dokumen, dan tidak ada yang baru untuk berkomentar tentang hal itu.
| <! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf- 8 "> <meta name = "description" content = "Ini adalah contoh HTML5"> <meta name = "keywords" content = "HTML5"> <title> judul dokumen </ title> </ head> <body > </ body> </ html> |
Catatan: Biasanya teks ini ditunjukkan oleh browser di bagian atas jendela.
<Link>
Elemen penting lainnya yang masuk di kepala dokumen ini <link>. Elemen ini digunakan untuk menggabungkan gaya, script, gambar atau ikon dari file eksternal dalam dokumen. Salah satu penggunaan yang paling umum dari <link> adalah untuk menggabungkan gaya memasukkan file CSS eksternal:
| <! DOCTYPE html> <html lang = "en"> <head> <meta charset = "utf-8"> <meta name = "description" content = "Ini adalah contoh HTML5"> <meta name = "keywords" content = "HTML5"> <title> Teks ini adalah judul dokumen </ title> <link rel = "stylesheet" href = "edu4javastyles.css"> </ head> <body> </ body> </ html > |
Dalam HTML5, itu tidak lagi diperlukan untuk menentukan jenis style sheet kita memasukkan, sehingga jenis atribut dihilangkan.Kita hanya perlu dua atribut untuk menggabungkan gaya kami 'file: rel dan href . Atribut rel berarti hubungan dan ini adalah tentang hubungan antara dokumen dan file kita menggabungkan. Dalam hal ini atribut rel memiliki stylesheet nilai yang memberitahu browser bahwa file edu4javastyles.css adalah file CSS dengan gaya yang dibutuhkan untuk membuat halaman.
Catatan : Sebuah style sheet adalah sekelompok aturan format yang akan membantu kita mengubah tampilan contoh dokumen-untuk kami, ukuran dan warna teks. Tanpa aturan ini, teks dan unsur lainnya akan ditampilkan pada layar dengan menggunakan gaya standar yang disediakan oleh browser (ukuran standar, warna, dll).
Hasil kode kita pada saat ini akan menjadi;
0 Komentar untuk "Tutorial Html5 – STRUKTUR PENULISAN HTML5"