0

0

0

share

0 Reaksi

0 Komentar

Pengenalan HTML5 | Belajar HTML

Profile
Damar Yosa Aji•

16 Mei 2016

Pengenalan HTML5 | Belajar HTML - Halo teman- teman sebelum kita belajar html kali ini saya akan membahas pengenalan HTML, fungsi HTML, konsep HTML, cara kerja HTML dan cara penulisan HTML dari dasar, pasti sudah pada tau dong apa itu HTML? HTML adalah singkatan Hyper Text Markup Language, Hyper Text Markup Language dapat kita kelompokan menjadi dua suku kata yaitu :

Hyper Text berarti teks aktif maksudnya adalah sebuah teks yang memiliki kemampuan dapat terhubung antara teks suatu halaman dengan halaman yang lain.

Markup Language menjelaskan bahwa dokumen HTML ini disusun oleh tag- tag markup dan setiap tag pada HTML menjelaskan perintah isi dokumen yang berbeda- beda.

Baca juga : Melihat Halaman HTML Pertama di Dunia

Apa Fungsi dari HTML?

HTML adalah teknologi dasar yang digunakan untuk membuat dasar dari sebuah halaman web dengan menghubungkan teks / link antar halaman, memberi struktur dan membagikan informasi yang terkait dengan sebuah halaman web. Lalu kenapa HTML pada Web bisa menampilkan animasi- animasi dan efek-efek yang bagus?Hal itu dikarenakan Konten sebuah web selain teks dapat bermacam- macam seperti video, audio, gambar, dan agar tampilan web kita semakin menarik biasanya didalam sebuah web di tambahkan Javascript sebagai animasi, dan CSS (Cascading Style Sheet) sebagai pemberi make-up atau style.

Bagaimana cara penulisan HTML? atau struktur HTML?

Sebelum kita bahas cara penulisan HTML kalian harus memiliki aplikasi text editor, apa itu text editor? text editor adalah sebuah aplikasi yang digunakan untuk membuat atau mengedit teks. Ada banyak sekali aplikasi text editor yang dapat digunakan dalam membuat dokumen HTML seperti sublime text, notepad, dreamweaver, notepad++. Berikut ini tampilan salah satu text editor untuk membuat file HTML :

Notepad++

[caption id="attachment_9789" align="aligncenter" width="459"]
gambar text editor notepad++
gambar text editor notepad++ | [/caption]

Setelah itu ada beberapa poin yang harus kalian ingat- ingat dan kalian perhatikan, peraturan pertama didalam struktur HTML terdapat TAG dan ATRIBUT.

Apa itu Tag? apa yang dimaksud dengan Tag?

Tag adalah suatu tanda pengenal dokumen pada html yang terdiri 2 bagian yaitu tag pembuka contoh <nama_tag> dan tag penutup contoh </nama_tag>, tanda "/" pada tag penutup menandakan bahwa sifat yang dibawa oleh tanda pengenal berakhir. Namun ada beberapa Tag yang berdiri sendiri diantaranya : <br/>, <hr/>, <img src="" />. Tag - tag ini bersifat unik karena tag ini tidak perlu menggunakan tag penutup.

Apa itu Atribut? apa yang dimaksud dengan Atribut?

Atribut adalah suatu sifat khusus yang dapat diberikan pada tag pembuka contoh <nama_tag atribut="nilai"> isi dokumen </nama_tag>, dan didalam satu Tag kita dapat memberikan beberapa atribut contoh <nama_tag atribut1="nilai" atribut2="nilai"> isi dokumen </nama_tag>, bagaimana? sudah paham? yuk kita bahas ke contoh penulisan dokumen HTML.

Baca juga : Belajar HTML – Memahami Konsep Elemen HTML

Langkah Pertama, Cara menulis code HTML

Buka aplikasi text editor, lalu ketikan code HTML dibawah ini.

<!DOCTYPE html>
<html>
<head>
     <meta charset="UTF-8">
     <title>Judul dari Web</title>
</head>
<body>
     <!-- Ini untuk Komentar bagian atas-->
     <p>
          Teks yang akan ditampilkan
     </p>
</body>
</html>

Langkah Kedua, Cara melakukan save file HTML

Setelah code HTML dimasukan, kita akan mulai melakukan save file HTML dengan cara klik "File", pilih menu "Save As", Kemudian pilih lokasi sesuai dengan keinginan. Disini yang harus diperhatikan yaitu untuk "File Name" kalian bisa mengisikan nama file bebas, dan untuk "Save as type" kalian ubah menjadi "Hyper Text Markup Language".

[caption id="attachment_9794" align="aligncenter" width="404"]
save
proses penyimpanan file dokumen HTML[/caption]

Langkah Ketiga, Cara membuka dokumen HTML

Untuk melihat tampilan atau membuka file dokumen HTML, kita butuh aplikasi Web Browser, contoh Browser : Google Chrome, Mozilla Firefox, Opera, Dll. Jika aplikasi Web browser belum terinstall maka install terlebih dahulu dan jika sudah terinstall di komputer kalian, pertama kalian buka lokasi file HTML yang kalian simpan tadi, lalu klik 2x pada file tersebut.

[caption id="attachment_9795" align="aligncenter" width="358"]
tempat file html
Sorot dan klik file dokumen HTML[/caption]
[caption id="attachment_9796" align="aligncenter" width="356"]
tampilan file html
Tampilan dari hasil code HTML[/caption]

Dari dokumen yang kita buat di atas kita telah berhasil menampilkan tulisan "Teks yang akan ditampilkan". Jika teman- teman ingin membuat tulisan heading atau membuat paragraf di HTML kalian bisa melihat tutorial :

Penjelasan Struktur HTML

Didalam struktur HTML dapat kita lihat setiap Tag yang di buka contoh <nama_tag> harus di tutup kembali dengan tag </nama_tag> , tapi kenapa tag  <!DOCTYPE html> tidak ditutup? mari kita simak penjelasan tentang struktur HTML :

Tag <!DOCTYPE html> adalah sebuah deklerasi atau untuk mengidentifikasi jenis dokumen HTML yang digunakan agar browser dapat menentukan bagaimana memperlakukan kode tersebut. Proses deklarasi ini cukup dilakukan sekali saja saat dokumen HTML dijalankan.

Tag <html>...</html>

Tag <HTML> tugasnya adalah sebagai root, maksudnya semua tag yang berada didalam tag <HTML> merupakan gambaran dari dokumen HTML.

Tag <head>...</head>

Tag <HEAD> tugasnya adalah memberikan informasi tentang dokumen, maksudnya didalam tag <head> kita bisa menambahkan tag- tag yang biasanya digunakan untuk memberikan informasi berupa penulis, judul dokumen, kata kunci pada dokumen dan masih banyak lagi informasi yang bisa di tambahkan pada tag ini.

Tag <title>...</title>

Tag <TITLE> tugasnya adalah memberikan informasi berupa judul dokumen HTML.

Tag <body>...</body>

Tag <BODY> tugasnya adalah memberikan isi dari suatu dokumen yang akan ditampilkan oleh web browsernya.

Tag <p>...</p>

Tag <P> tugasnya adalah untuk membuat sebuah paragraf.

Tag <!-- komentar -->

Tag <!-- komentar --> tugasnya adalah memberikan komentar pada sebuah dokumen HTML, namun tulisan yang dimasukan dalam tag ini tidak akan terlihat pada Web browser saat dijalankan tetapi dapat dilihat pada source program.

Apa itu HTML5 lalu apa perbedaannya HTML dengan HTML5?

HTML5 adalah singkatan Hyper Text Markup Language Versi 5, HTML5 merupakan sebuah teknologi penerus dari generasi sebelumnya yang dikeluarkan oleh W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group). dengan tambahan feature- feature baru untuk memperbaiki dan melengkapi dari HTML versi sebelumnya.

Apa saja Feature baru pada HTML5?

  1. New Semantic Elements : Ini seperti pada elemen <header>, <footer>, and <section>.
  2. Forms 2.0 : Perbaikan form web HTML di mana atribut baru telah diperkenalkan tag <input>.
  3. Persistent Local Storage : Untuk menghilangkan ketergantungan pada plugin pihak ketiga.
  4. WebSocket : Sebuah generasi teknologi terbaru komunikasi dua arah untuk aplikasi web.
  5. Server-Sent Events : memperkenalkan even yang mengalir dari web server ke web browser yang disebut Server-Sent Events (SSE).
  6. Canvas : Ini mendukung gambar dua dimensi surface yang dapat diprogram dengan JavaScript.
  7. Audio & Video : Anda dapat menanamkan/embed audio atau video pada halaman web Anda tanpa menggunakan plugin pihak ketiga.
  8. Geolocation : Pengunjung dapat memilih untuk berbagi lokasi fisik mereka dengan aplikasi web Anda..
  9. Microdata : Ini memungkinkan Anda membuat kosakata Anda sendiri di luar HTML5 dan memperluas halaman web Anda dengan kostum semantics.
  10. Drag and drop : Drag dan drop item dari satu lokasi ke lokasi lain pada halaman web yang sama.
Apa saja Feature yang dihapus pada HTML5?
  1. Acronym : Mendefinisikan akronim / fungsi tag ini kurang lebih sama dengan tag <abbr>
  2. Applet : Digunakan untuk memasukan file java kedalam dokumen HTML
  3. Basefont : Membuat atribut teks default, seperti warna, ukuran, jenis font untuk semua teks dalam dokumen
  4. Big : Memperbesar ukuran teks sebesar satu point dari defaultnya
  5. Center : Untuk perataan tengah terhadap teks atau gambar
  6. Dir : Mendefinisikan sebuah daftar direktori
  7. Font : Mendefinisikan jenis font, warna dan ukuran untuk teks
  8. Frame : Mendefinisikan frame dalam fremeset
  9. Frameset : Mendefinisikan satu set frame
  10. Noframes : Jika browser user tidak mendukung frame
  11. Strike : Untuk memberi garis tengah pada teks/mencoret teks, fungsi tag ini sama dengan tag <del>
  12. Tt : Mendefinisikan teletype text

Dokumen HTML5

HTML5 memiliki dukungan yang lebih baik terhadap struktur penulisan Tag HTML, berikut ini merupakan hasil kembangan pada HTML5 : 
<!DOCTYPE html>
<html>
     <head>
          <meta charset="utf-8">
          <title>Pengenalan HTML5</title>
     </head> 
     <body> 
          <header role="banner">
               <h1>Contoh Struktur Dokumen HTML5</h1>
               <p>HTML5 memiliki dukungan yang lebih baik terhadap struktur penulisan Tag HTML.</p>
          </header> 
          <nav> 
               <ul>
                    <li><a href="#">Pengenalan HTML5</a></li>
                    <li><a href="#">Elemen, Tag dan Atribut</a></li>
                    <li><a href="#">Heading dan Paragraf</a></li>
                    <li><a href="#">Formating</a></li>
               </ul> 
          </nav> 
          <article>
               <section>
                    <h3>Satu artikel dapat memiliki lebih dari satu sections</h3>
               </section>
          </article> 
          <aside>
               <p>Ini adalah aside, bagian dari konten yang hanya sedikit berhubungan dengan sisa halaman</p>
          </aside> 
          <figure align="right">
              <img src="https://www.codepolitan.com/wp-content/themes/open_cp/assets/img/codepolitan_new_logo.png" alt="Code Politan" width="350" height="100">
          </figure> 
          <footer>
              <p>Created by <a href="#">Code Politan</a></p>
          </footer> 
     </body>
</html>
Contoh hasil tampilan code diatas
[caption id="attachment_9859" align="alignnone" width="350"]
belajar html5
tampilan html5 dengan feature baru[/caption]

Penjelasan Struktuk Dokumen HTML5

Tag <section>...</section>

Tag <SECTION> merupakan dokumen atau aplikasi bagian generik. Hal ini dapat digunakan bersama-sama dengan h1-h6 untuk menunjukkan struktur dokumen.

Tag <article>...</article>

Tag <ARTICLE> merupakan sepotong independen isi dokumen, seperti sebuah blog atau artikel koran.

Tag <aside>...</aside>

Tag <ASIDE> merupakan gambaran dari sebagian konten yang berhubungan dengan isi halaman.

Tag <header>...</header>

Tag <HEADER> merupakan bagian kepala dari dukumen.

Tag <footer>...</footer>

Tag <FOOTER> merupakan bagian catatan kaki yang dapat berisi informasi tentang penulis, informasi hak cipta, dll

Tag <nav>...</nav>

Tag <NAV> merupakan bagian dari dokumen yang dimaksudkan untuk memudahkan dalam proses navigasi.

Tag <figure>...</figure>

Tag <FIGURE> dapat digunakan untuk menghubungkan keterangan bersama-sama dengan beberapa konten tertanam, seperti gambar atau video.

Oke, Pengenalan HTML5 sudah selesai, kita akan sambung belajar HTMLnya pada kesempatan berikutnya, sampai ketemu lagi keep watch and learn at CodePolitan.

Referensi Pengenalan HTML5 :

0

0

0

share