Struktur dasar HTML 5 dan persiapannya

HTML 5 memiliki struktur dasar yang berbeda dengan format HTML sebelumnya, pada bagian ini akan dijelaskan Tag struktur dasar HTML 5. Dengan menggunakan struktur dasar File HTML 5 akan membuat dokumen kita dapat lebih terstruktur terhadap isi dari masing-masing section sehingga program search engine akan dapat lebih mudah dalam melakukan index. Tentu saja bila search engine mendapatkan lebih banyak data maka secara otomatis akan meningkatkan peringkat SEO (Search Engine Optimization) web yang kita buat.

STRUKTUR DASAR HTML 5

Praktek Siswa

  • Jalankan program Brackets
    • Pilih menu File, Open Folder
    • buka kembali lokasi folder tempat kerja anda
      • misalnya My Document/HTML-CSS
  • Buka kembali file index.html
    • hapus seluruh isi body dan sisakan hanya struktur dasar saja seperti contoh dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Nicola Tesla</title>
</head>
<body>

</body>
</html>
  • lakukan copy paste ketikan teks berikut dan masukkan ke dalam area body
    • ketikan ini dikutip dari website wikipedia link
  • Bila gambar belum anda download pada praktek yang ke 1, maka buka link berikut untuk download gambar foto, simpan di folder yang sama dengan index.html
Nikola Tesla (lahir di Smiljan, Kroasia, 10 Juli 1856 – meninggal di New York City, 7 Januari 1943 pada umur 86 tahun) adalah seorang penemu, fisikawan, teknisi mekanika, dan teknisi listrik Amerika Serikat.

tesla_sarony.jpg

Tesla dianggap sebagai salah satu penemu terpenting dalam sejarah dan merupakan salah seorang teknisi terbesar dalam akhir abad ke-19 dan abad ke-20. Tesla merupakan seorang perintis elektromekanik, tanpa kabel, dan daya listrik. Ia berketurunan Serbia dan menjadi warga negara Amerika Serikat pada 1891 selagi bekerja di negara tersebut.

Paten Tesla dan kerja teorinya merupakan dasar dari daya listrik arus bolak-balik (bahasa Inggris: Alternating Current, AC) modern termasuk distribusi daya polyphase, dan motor AC, yang ia umumkan pada Revolusi Industri Kedua. Setelah pendemonstrasian komunikasi tanpa kabel pada 1893 dan memenangkan "Perang Arus", Tesla dianggap sebagai salah satu teknisi listrik AS terhebat. Tesla memiliki pengalaman di telepon dan teknik elektro sebelum berimigrasi ke Amerika Serikat pada tahun 1884 untuk bekerja dengan Thomas A. Edison di New York City.

Tesla terkenal karena prestasi dan kecakapan memainkan pertunjukan, akhirnya sebagian masyarakat Amerika menyebutnya sebagai " ilmuwan gila . " Dari hak paten membuatnya mendapatkan sejumlah uang yang banyak, banyak yang digunakan untuk membiayai proyek-proyek sendiri dengan berbagai tingkat keberhasilan. Sebagian besar masa pensiunnya dihabiskan dalam serangkaian di hotel New York. Dia meninggal pada 7 Januari 1943. 

Pada tahun 1870, Tesla pindah ke Karlovac , Kroasia untuk bersekolah di Gymnasium Tinggi nyata , di mana ia sangat dipengaruhi oleh seorang guru matematika Martin Sekulic. Tesla mampu melakukan kalkulus integral.

Pada tahun 1873, Tesla kembali ke birthtown nya, Smiljan. Tak lama setelah ia tiba, Tesla terjangkit kolera, dia terbaring di tempat tidur selama sembilan bulan dan hampir mati beberapa kali. Ayah Tesla, di saat-saat putus asa, berjanji akan mengirimnya ke sekolah teknik terbaik jika ia pulih dari penyakit (ayahnya awalnya ingin dia menjadi pendeta).

Pada tahun 1874, Tesla mengelak bahwa akan direkrut menjadi tentara Austro-Hungaria di Smiljan, dengan melarikan diri ke Tomingaj , dekat Gračac . Di sana, ia menjelajahi pegunungan dengan mengenakan pakaian pemburu. Tesla mengatakan bahwa berkontak dengan alam membuatnya lebih kuat, baik secara fisik maupun mental. Dia membaca banyak buku sementara di Tomingaj, dan kemudian mengatakan bahwa buku karya Mark Twain telah membantunya secara ajaib sembuh dari penyakit sebelumnya.   

source from: https://id.wikipedia.org/wiki/Nikola_Tesla
  • dari ketikan diatas, ubahlah menjadi seperti dibawah ini
    • Jangan melakukan copy - paste tapi cobalah menambahkan dengan mengetik langsung tag-tagnya dengan tip-tip berikut:
      • ketik seperti perintah berikut header>(hgroup>h1+h2)+(nav>ul>li*3>a)
        • saat kursor berada di baris paling belakang jangan dienter tapi tekan tombol tab
        • emmet akan membantu membuat strukture sesuai dengan perintah yang anda berikan
        • tanda > (lebih besar) artinya di dalam header ada topik lain
        • tanda () (kurung) artinya adalah pengelompokan suatu tag
        • tanda + (plus) artinya menyambung sibling / teman sejajar
        • tanda * (asteriks) artinya pengalian, artinya bila li*3 berarti tag li akan ditulis 3x
          • ingat tanda li*3 tidak bisa dibalik 3*li
    • dengan mencontoh dari tampilan dibawah ini, sisipkan tag dengan cara berikut:
      • blok suatu area teks
      • tekan tombol Control + Alt + J
      • ketik nama tag yang ingin disisipkan misalnya ****
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML 5, CSS 3 dan SASS</title>
</head>
<body>

<header>
    <hgroup>
        <h1>Nikola Tesla</h1>
    </hgroup>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
</header>
<main>
    <section>

        <article>
            <h3>Kisah singkat</h3>
            <p>Nikola Tesla (lahir di Smiljan, Kroasia, 10 Juli 1856 – meninggal di New York City, 7 Januari 1943 pada umur 86 tahun) adalah seorang penemu, fisikawan, teknisi mekanika, dan teknisi listrik Amerika Serikat.
            </p>
            <figure>
                <img src="tesla_sarony.jpg" alt="Gambar pak Tesla">
                <figcaption>Figure 1. Foto pak tesla</figcaption>
            </figure>

            Tesla dianggap sebagai salah satu penemu terpenting dalam sejarah dan merupakan salah seorang teknisi terbesar dalam akhir abad ke-19 dan abad ke-20. Tesla merupakan seorang perintis
            <ol>
                <li>elektromekanik</li>
                <li>tanpa kabel</li>
                <li>daya listrik</li>
            </ol>
            Ia berketurunan Serbia dan menjadi warga negara Amerika Serikat pada 1891 selagi bekerja di negara tersebut.

            <p>Paten Tesla dan kerja teorinya merupakan dasar dari daya listrik arus bolak-balik (bahasa Inggris: Alternating Current, AC) modern termasuk distribusi daya polyphase, dan motor AC, yang ia umumkan pada Revolusi Industri Kedua. Setelah pendemonstrasian komunikasi tanpa kabel pada 1893 dan memenangkan "Perang Arus", Tesla dianggap sebagai salah satu teknisi listrik AS terhebat. Tesla memiliki pengalaman di telepon dan teknik elektro sebelum berimigrasi ke Amerika Serikat pada tahun 1884 untuk bekerja dengan Thomas A. Edison di New York City.</p>

            <p>Tesla terkenal karena prestasi dan kecakapan memainkan pertunjukan, akhirnya sebagian masyarakat Amerika menyebutnya sebagai " ilmuwan gila . " Dari hak paten membuatnya mendapatkan sejumlah uang yang banyak, banyak yang digunakan untuk membiayai proyek-proyek sendiri dengan berbagai tingkat keberhasilan. Sebagian besar masa pensiunnya dihabiskan dalam serangkaian di hotel New York. Dia meninggal pada 7 Januari 1943. </p>

            <p>Pada tahun 1870, Tesla pindah ke Karlovac , Kroasia untuk bersekolah di Gymnasium Tinggi nyata , di mana ia sangat dipengaruhi oleh seorang guru matematika Martin Sekulic. Tesla mampu melakukan kalkulus integral.</p>

            <p>Pada tahun 1873, Tesla kembali ke birthtown nya, Smiljan. Tak lama setelah ia tiba, Tesla terjangkit kolera, dia terbaring di tempat tidur selama sembilan bulan dan hampir mati beberapa kali. Ayah Tesla, di saat-saat putus asa, berjanji akan mengirimnya ke sekolah teknik terbaik jika ia pulih dari penyakit (ayahnya awalnya ingin dia menjadi pendeta).</p>

            <p>Pada tahun 1874, Tesla mengelak bahwa akan direkrut menjadi tentara Austro-Hungaria di Smiljan, dengan melarikan diri ke Tomingaj , dekat Gračac . Di sana, ia menjelajahi pegunungan dengan mengenakan pakaian pemburu. Tesla mengatakan bahwa berkontak dengan alam membuatnya lebih kuat, baik secara fisik maupun mental. Dia membaca banyak buku sementara di Tomingaj, dan kemudian mengatakan bahwa buku karya Mark Twain telah membantunya secara ajaib sembuh dari penyakit sebelumnya.</p>

            <small>source &copy; from: https://id.wikipedia.org/wiki/Nikola_Tesla</small>
            </article>
    </section>
</main>
    <footer>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>  
    </footer>
</body>
</html>
  • Simpan dan lihat hasilnya dengan memilih menu File, Live Preview.

Penjelasan Elemen yang ada di HTML 5

  • Penting untuk dimengerti bawah dalam HTML sebelumnya kita melakukan pengelompokan suatu bagian dengan menggunakan tag DIV.
    • sebenarnya elemen yang ada di HTML 5 adalah modifikasi untuk mempersingkat penulisan.
    • misalnya ....
    • sebelumnya kita menulis dengan ....
  • Apakah penggunaan elemen-elemen ini berguna?
    • berguna untuk menghasilkan outline dokumen
    • dengan menggunakan format elemen dokumen yang tertata rapi akan memudahkan dokumen kita untuk dicatat oleh mesin pencari google
    • dan apabila mudah dicatat oleh mesin pencari, maka apabila orang melakukan search, akan menempatkan halaman web kita di depan halaman google
  • Main
    • bisa dikatakan dalam satu halaman HTML hanya boleh ada satu tag main.
    • tag ini digunakan untuk menunjukkan bagian dari dokumen yang utama
    • dalam satu main bisa terdiri dari beberapa section / article
  • Section
    • untuk mengelompok isi dari web yang memiliki tema yang sama
    • misalnya dalam satu halaman web ada bagian article dan bagian tanya jawab, maka dapat dibagi menjadi 2 section
  • Article
    • fungsinya sama dengan section hanya kalau section untuk mengelompokkan elemen web yang saling berhubungan, sedangkan article berfungsi untuk menempatkan kumpulan informasi yang saling berhubungan.
    • umumnya digunakan untuk post berita blog, news.
  • Header
    • biasanya digunakan untuk menempatkan judul web dan menu
  • Footer
    • biasanya digunakan untuk menempatkan informasi pembuat web,
  • Nav
    • Untuk membuat daftar menu-menu yang berisi hyperlink pada halaman web
  • Aside
    • digunakan untuk menempatkan menu di samping kiri / kanan
    • bisa juga informasi yang berhubungan dengan site secara keseluruhan
  • Figure/figcaption
    • biasanya digunakan untuk menunjukkan gambar utama
    • misalnya pada dokumen diatas kita bercerita tentang Nicola Tesla, maka figure diisi dengan gambar foto dari nicola

Melakukan validasi

  • Anda dapat pula melakukan validasi halaman web yang baru saja anda buat
  • buka website https://validator.nu/
  • pada pilihan address ganti menjadi teks
    • lakukan copy - paste kode html yang sudah anda buat diatas
    • kemudian klik pada tombol validate
  • Bila anda melakukan validasi pada halaman web yang kita buat
    • anda akan menemukan satu warning, bagian manakah itu?