Selasa, 21 Maret 2017

HTML Bahasa Pemrograman Berbasis Web Base


HTML
Hyper Text Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).
Sejarah
HTML pada awalnya dikembangkan oleh Tim Berners-Lee sementara di CERN, dan dipopulerkan oleh browser Mosaic dikembangkan di NCSA. Selama tahun 1990-an telah berkembang dengan pertumbuhan eksplosif Web. Selama waktu ini, HTML telah diperpanjang dalam beberapa cara. Web tergantung pada halaman Web penulis dan vendor berbagi konvensi yang sama untuk HTML. Hal ini telah termotivasi bekerja bersama spesifikasi untuk HTML.
HTML 2.0 (November 1995, lihat [RFC1866] [p.356]) telah dikembangkan di bawah perlindungan dari Internet Engineering Task Force (IETF) untuk mengkodifikasi praktik umum di akhir tahun 1994. HTML + (1993) dan HTML 3.0 (1995, lihat [HTML30] [p.355]) mengusulkan jauh lebih kaya versi HTML. Meskipun tidak pernah menerima konsensus dalam standar diskusi, konsep ini mengarah pada adopsi berbagai fitur baru. Upaya dari World Wide Web Consortium’s HTML Working Group untuk menata Common praktek pada tahun 1996 menghasilkan HTML 3.2 (Januari 1997, lihat [HTML32] [p.356]). Perubahan dari HTML 3.2 dirangkum dalam Lampiran A [p.311] 21 24 Desember 1999 18:26 Pengenalan HTML 4
Kebanyakan orang setuju bahwa dokumen HTML harus bekerja dengan baik di berbagai browser dan platform. Mencapai interoperabilitas menurunkan biaya untuk penyedia konten karena mereka harus mengembangkan hanya satu versi dokumen. Jika upaya ini tidak dilakukan, ada risiko yang lebih besar bahwa Web akan berpindah ke dalam dunia perangkat lunak berpemilik
format tidak sesuai, akhirnya mengurangi potensi komersial Web untuk semua peserta.
Setiap versi HTML telah berupaya untuk merefleksikan konsensus di antara industri yang lebih besar pemain sehingga investasi yang dilakukan oleh penyedia konten tidak akan sia-sia dan bahwa dokumen mereka tidak akan menjadi tak terbaca dalam waktu singkat.
HTML telah dikembangkan dengan visi bahwa segala macam perangkat tersebut harus berada dapat menggunakan informasi di Web: PC dengan tampilan grafis dengan berbagai resolusi dan kedalaman warna, telepon selular, perangkat tangan manusia, perangkat untuk pidato untuk output dan input, komputer dengan bandwidth yang tinggi atau rendah, dan seterusnya.

Kegunaan
Dengan menggunakan HTML anda dapat membuat antara lain :
Memodifikasi format teks
Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini adalah :
- Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
- Kita dapat menampilkan teks dalam bentuk cetakan tebal
- Kita dapat menampilkan sekelompok kata dalam bentuk miring
- Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
- Kita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.
Menampilkan daftar sesuatu dalam bentuk point-point (item)
Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam bentuk point-point sehingga lebih mudah dibaca dan dipahami
Membuat link
Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web. Ada tiga macam link yang dapat kita gunakan :
- Link menuju bagian lain dari page
- Link menuju page lain dalam satu web site
- Link menuju resource atau web site yang berbeda
Menyisipkan citra
Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan informatif untuk mendukung data-data lainnya dalam bentuk teks.
Menampilkan informasi dalam bentuk tabel
Penampilan informasi dalam bentuk tabel ini akan mempermudah pembaca untuk memahami informasi yang kita tawarkan. Penggunaan tabel ini juga dapat dilakukan untuk menambah nilai estetika dari page yang akan kita rancang.



Dokumen HTML sederhana
Secara garis besar, terdapat 4 jenis elemen dari HTML:

Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, <h1>Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1
Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,
Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.wikipedia.org/"> Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),
Elemen widget yang membuat objek-objek lain seperti tombol (<button>), daftar (<li>), dan garis horizontal (<hr>). Konsep hiperteks pada HTML memungkinkan pembuatan tautan pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web,
Ada tiga macam pranala (link) yang dapat digunakan:

Pranala menuju bagian lain dari page.
Pranala menuju page lain dalam satu web site.
Pranala menuju resource atau web site yang berbeda.[16]
Selain markup presentasional, markup yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets.

Contoh
Untuk HTML 4 Strict [17]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
                "http://www.w3.org/TR/html4/strict.dtd">
<html>
                <head bgcolor=black text=white>
                                <title>Selamat Datang HTML</title>
                </head>
                <body>
                                <p>Halo dunia!</p>
                </body>
</html>

Untuk HTML 5 [18]

<!DOCTYPE HTML>
<html>
                <head style="background-color: black; color: white;">
                                <title>Selamat Datang HTML</title>
                </head>
                <body>
                                <p>Halo dunia!</p>
                </body>
</html>

Head
Dokumen HTML diapit oleh tag <HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Header juga memuat tag META yang biasanya dapat digunakan untuk menentukan informasi tertentu mengenai dokumen HTML. Anda bisa menentukan author name, keywords, dan lainnya pada tag META.
Contoh:
<meta name="author" content="ubuntu-online">

Body
Bagian BODY, yang dinyatakan dengan tag <BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML di mana anda meletakan informasi yang akan ditampilkan pada browser.
Tag
HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).
Tag biasanya merupakan suatu pasangan yang disebut dengan:
Tag awal, dinyatakan dalam bentuk <nama tag>
Tag akhir, dinyatakan dalam bentuk </nama tag>
Formatnya: <nama tag> teks yang ditampilkan </nama tag>.
Contoh: untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML <i>Teks ini terlihat miring di browser Anda</i>
Atribut
Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya, <P STYLE="text-align:left"> digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah STYLE dengan nilai "text-align:left". Nilai atribut STYLE ditulis dalam bahasa CSS.
Fitur HTML 5
FITUR YANG TERDAPAT PADA HTML5
Pada kali ini saya akan berbagi mengenai fitur apa sajakah yang terdapat pada HTML5, poko bahasan yang lainnya mengenai HTML5 akan dibahas pada blog lain yang akan saya berikan di bagian bawah pada postingan ini, semoga bermanfaat 🙂
Sebagai informasi, html5 adalah generasi berikutnya dari html 4, dimana pada html 5 ini ditambahkan fitur – fitur baru yang mengedepankan penjalanan konten yang berat pada device dengan tenaga rendah yang pastinya membuat para programer lebih mudah dalam menerapkannya dan berakibat lebih user friendly dari sisi pengguna.

Pada HTML5 terdapat fitur elemen <video>, <audio> dan <canvas>, tetapi juga integrasi dari konten gambar grafis vektor (yang sebelumnya kita ketahui dengan tag <object>). Artinya, konten multi media dan grafis dalam website akan dapat ditangani dan dieksekusi dengan lebih mudah dan lebih cepat, tanpa membutuhkan plugin dan dan API tambahan. Adapun fitur yang tersedia :
<canvas>, memungkinkan menggambar menggunakan script kode seperti JavaScript. Dibandingkan dengan versi terdahulunya yang perlu menggunakan aplikasi tambahan untuk membuat interaksi seperti flash.
<audio> dan <video>, merupakan tag penanda untuk konten audio dan video. Jadi kita dapat menyisipkan konten audio dan video secara langsung, berbeda dengan generasi sebelumnya yang harus menggunakan flash untuk menyisipkan konten ini.
, digunakan untuk menampilkan konten interaktif (plugin) atau aplikasi eksternal.
<section>, digunakan untuk mendefinisikan section apapun pada dokumen. Dapat dikategorikan bekerja seperti div yang memisahkan section yang berbeda.
<article>, mendifinisikan artikel, komentar pengguna atau sesuatau konten yang independen.
Local Storage, berfungsi sebagai pengganti cache sebagai media penyimpan halaman history web. memungkinkan menyimpan data cache lebih banyak pada local dibanding dengan browser biasa.
Web Workers, pada dasarnya membuat proses load java script yang kadang kali mengganggui dengan menjadikan proses lambat menjadi lebih cepat, shingga dapat dilakukan proses multi tasking.

Semantic , membuat halaman web lebih dinamis, diantaranya akan menghentikan programer dalam menggunakan tag div  atau nav sebagai navigasi.

Tidak ada komentar:

Posting Komentar