Senin, 27 Oktober 2014

Membuat Halaman Web dengan Menggunakan HTML5

  • Apa itu HTML5?

Hypertext Mark up Language atau biasa dikenal dengan HTML merupakan suatu metode untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program. HTML merupakan protokol yang digunakan untuk mentransfer data atau dokumen dari web server ke dalam browser.


Pengertian HTML sendiri bila dijabarkan berdasarkan kata-kata penyusunannya HTML dapat diartikan lebih dalam lagi menjadi: 

  • Hypertext : link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju. 
  • Markup : pada pengertiannya disini markup menunjukan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan  pada WWW.
  • Language : meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa intruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen. 
Pada awalnya HTML dikembangkan sebagi subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana dari pada SGML yang lebih di tekankan pada format dokumen yang berorientasi pada aplikasi.

HTML sendiri memiliki banyak versi dan versi terbaru saat ini yaitu HTML5. HTML5 adalah versi terbaru teknologi hypertext/web yang sekarang ini masih dalam tahap  pengembangan. HTML5 ini akan menjadi trend teknologi internet masa depan karena sudah diperkaya dengan fitur-fitur ungulan yang tentunya akan menjadi standard pengembangan media informasi berbasis web.

  • Tujuan dibuatnya HTML5
  1.  Fitur baru harus didasarkan pada HTML, CSS, DOM , dan JavaScript.
  2. Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
  3. Penanganan kesalahan yang lebih baik.
  4. Lebih banyak markup untuk menggantikan scripting. 
  5. HTML5 merupakan perangkat mandiri. 
Sekarang HTML5 sudah mulai digunakan pada beberapa situs-situs besar sebagai uji coba kelayakan fitur serta teknologi baru yang masih terus dikembangkan dari versi sebelumnya yaitu HTML 4.01. Fitur serta perbaikan yang ditanamkan dalam teknologi ini dintaranya adalah video dan audio, database lokal dan CSS3. 
Ada beberapa tambahan elemen serta atribut yang memungkinkan HTML5 ini lebih baik dari sebelumnya, walaupun secara mendasar perintah-perintah yang digunakan sangat mirip dengan HTML versi 4.01. 

Berikut adalah beberapa browser yang dapat mendukung HTML yaitu: 
  1. Opera Web Browser (mulai dari Opera 9.2 sampai yang terbaru saat ini yaitu opera 10) 
  2. Safari (mulai dari versi 3.1)
  3. FireFox (Mulai dari FireFox 3 )
  4. Google Chrome (Mulai dari versi 3)
  5. Internet Explorer (Mulai dari versi 8)
  • Cara Membuat HTML dengan Menggunakan Notepad++
Apa itu notepad++? 
Notepad++ adalah sebuah penyunting teks dan penyunting kode sumber yang berjalan di sistem operasi Windows. Notepad++ menggunakan komponen Scintilla untuk dapat menampilkan dan menyuntingan teks dan berkas kode sumber berbagai bahasa pemrograman. Dengan Notepad++ kita akan lebih mudah belajar HTML karena tampilan notepad++ yang bisa membuat setiap kode memiliki warna bervariasi dan berpasangan langsung dengan pasangan-pasangannya (misal <html> insert text </html> )


Saya disini akan mencoba menjelaskan cara membuat html menggunakan notepad++.

Cara pertama ialah cara yang paling sederhana, yaitu:

<html>
<head>
<title>Titel tugas 1</title>
</head>
<body>
dokumen HTML 5
</body>
</html>


Simpan file tersebut ke C:\My Documents dengan nama "Tugas 1.html" 
Ketika menyimpan file tersebut dengan Notepad++ ganti "save as type"-nya 
dengan "all files". Kemudian buka browser, dari menu File klik Open dan 
tujukan ke C:\My Documents\tugas 1.html "klik OK" maka halaman website pertama anda akan ditampilkan.

Elemen HTML kemudian ada yang memiliki atribut dan nilai tertentu, seperti contoh untuk membuat warna latar belakang (background): <body bgcolor="550ee">, body merupakan elemen, bgcolor adalah atribut dan 550ff merupakan nilai (value).

Elemen HTML mempunyai tiga hal penting yaitu: tag pembuka, isi, dan tag penutup.

Sebagai contoh: Elemen html mempunyai tag pembuka " <html>" dan tag penutup " </html>" dan yang berada diantaranya merupakan isi atau konten dari elemen html tersebut. Untuk menuliskan Elemen HTML bisa menggunakan huruf besar maupun huruf kecil. Contoh: <HTML>, <HtMl>, <HTml>, <html>, semuanya adalah sama.

Tag Dasar HTML:
  
Komponen  dasar dari suatu dokumen HTML terdiri dari tag elemen HTML, HEAD dan BODY. Berikut ini adalah penjelasan dari Tag Elemen tersebut:

<html>
<head>
<title>TUGAS 2 </title>
</head>
<body>
Tugas 2 Mengenai Indonesia
</body>
</html>


1. Tag pertama pada dokumen HTML diatas adalah: " <html>" tag ini merupakan awal dari suatu dokumen HTML, dan tag " </html>" merupakan akhir dari dokumen HTML. Isi keseluruhan dari suatu dokumen HTML selalu berada diantara tag <html>…</html>.

2.  Kemudian tag " <head>…</head>" (header) adalah informasi dari dokumen HTML. Informasi di dalam header meliputi: title, meta, style, script dll. Selain Title informasi di dalam header ini nantinya tidak akan di tampilkan di web browser.

3. Tag berikutnya adalah " <title>…</title>" merupakan bagian dari Head, tag ini adalah sebagai Titel dari dokumen HTML, titel ini akan tampil di titel dan tab browser. Sebagai contoh sewaktu anda membuka file contoh diatas perhatikan akan muncul tulisan "Tugas 2".

4.  Tag "<body>…</body>" merupakan isi dari suatu dokumen HTML yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file berupa teks, grafik, link, animasi maupun audio-video (multimedia).
  
5. Terdapat banyak kode kode dasar tertentu untuk mendukung pembuatan halaman web seperti:

Tag untuk mengubah atau mengedit text dalam sebuah dokumen HTML 5
1.       <b> </b> untuk membuat huruf menjadi tebal atau bold
2.       <i> </i> untuk membuat huruf menjadi miring atau italic
3.       <u> </u> untuk membuat huruf menjadi bergaris bawah atau underline

Tag  untuk mengatur paragraf:
1.       <p> </p> ini untuk membuat paragraf
2.       <br> untuk membuat baris baru
3.       <center></center> untuk membuat tulisan menjadi ditengah atau center

Tag membuat bullets dan numbering
1.       <ul></ul> ini untuk membuat bullets
2.       <ol></ol>ini  untuk membuat numbering
3.       <li></li> ini bagian dari tag ul ataupun li

Contoh pemakaiannya seperti
                <ul>
                                <li>text</li>
                                <li>text</li>
                </ul>

Tag untuk mengubah-ubah warna pada text :
1.       <font size=”text” color=”text” face=”text”>text</font>.

Keterangan , SIZE untuk mengubah ukuran huruf , COLOR untuk mengubah warna, lalu FACE untuk mengubah jenis huruf.

Berikut Contoh file HTML5 sederhana dengan mengaplikasikan tag-tag diatas :




Dan ini hasilnya ketika ditampilkan di browser :

Kelebihan-kelebihan HTML antara lain:
  • Merupakan bahasa penkodean yang lintas platform (cross platform), maksudnya HTML dapat digunakan pada berbagai jenis mesin komputer yang berbeda dan berbagai macam sistem operasi yang berbeda. Jadi bersifat fleksibel karena ditulis cukup dengan menggunakan editor karakter ASCII.
  • Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk menggunakan gambar untuk dijadikan hyperlink.
  • Dapat disisipi animasi berupa Java Applet atau file-file animasi dari Macromedia Flash atau Macromedia Shockwave (untuk keperluan ini, browser harus memiliki plug-in khusus untuk menjalankan file-file animasi ini).

Kekurangan dari HTML ini adalah:
  
  • Menghasilkan halaman yang statis, untuk memperoleh halaman yang dinamis harus menggunakan bahasa pemrograman tertentu seperti Javascript  dan animasi seperti Flash.
  • Memiliki tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih awam.
  • Tidak dapat menghasilkan halaman yang interaktif. 


 Demikian, artikel yang bisa saya share. Semoga bermanfaaat dan selamat mencoba!

 [Ira Fitri Auliana / 1306470792]

Sumber :

  • https://www.academia.edu/5242952/MAKALAH_MENGENAL_HTML5_Disusun_untuk_Memenuhi_Tugas_Mata_Kuliah_Teknologi_Informasi_dan_Komunikasi_Yang_diampu_oleh_Septia_Lutfi?login=ira.auliana@gmail.com&email_was_taken=true
  • http://id.wikipedia.org/wiki/Notepad%2B%2B
  • http://id.wikipedia.org/wiki/HTML5

Tidak ada komentar:

Posting Komentar