Sabtu, 12 Maret 2016

HTML (Hyper Text Markup Language)



SEJARAH HTML
Pada tahun 1980 Tim Berners-Lee ketika masih bekerja untuk CERN mengembangkan sebuah bahasa pemograman dimana text dan format sebuah dokumen dijadikan satu dalam bahasa pemrograman yang sering kita sebut sebagai HTML (Hyper Text Markup Language). Yang kemudian dipopulerkan oleh IBM, akan tetapi pada saat itu pihak IBM memberikan sebuah nama GML (Generalized Markup Language).
Pada tahun 1986 ISO mengeluarkan sebuah standarisasi tentang bahasa pemograman tersebut dan menyatakan sebuah nama baru dari GML tersebut dengan sebutan SGML (Standard Generalized Markup Language). HTML merupakan sebuah standar yang digunakan secara luas untuk menampilkan halaman web. Saat ini HTML merupakan standar Internet yang didefinisikan dan dikendalikan oleh World Wide Web Consortium (W3C).
Pertama kali muncul internet berbasis teks, web yang sangat monoton hanya berisikan teks yang kurang menarik, seperti halnya sebuah file.txt. Dalam mengaksesnya user menggunakan sebuah terminal, itu sangat tidak menyenangkan. Berikut adalah rincian perkembangan HTML :
·         Tahun 1980 mengembangkan sebuah bahasa pemograman yang dimana teks dan format dokumen dijadikan jadi satu yang sekarang disebut dengan HTML, tetapi saat itu IBM memberikan sebuah nama GML (Generalized Markup Language).
·         Tahun 1986 GML diganti namanya oleh ISO dengan SGML (Standard Generalized Markup Language).
·         Tahun 1989 Caillau Tim dengan Banners Lee Robert yang bekerja di CERN memberi nama HTML, dan mempopulerkanya pertama kali dengan browser Mosaic.
·         Tahun 1990 HTML sangat berkembang sangat cepat hingga mencapai HTML versi 5.0 yang digarap pada 4 Maret 2010 oleh W3C.
·         HTML Versi 1.0 merupakan HTML Pionir yang di dalamnya masih terdapat banyak sekali kelemahan sehingga wajar jika tampilanyang di hasilkan sangat sederhana.Kemampuan yang dimiliki versi 1.0 ini antara lain heading,paragraf,hyper. Text,list,serta cetak tebal dan miring pada teks.Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan meletakkan text di sekelilingnya.
·         Tahun 1996 tanggal 14 Januari, HTML versi 2.0 versi ini menjadikan sebuah pioneer dalam perkembangan homepage interaktif.
·         Tahun 1997 tanggal 18 Desember, HTML versi 3.0, sering disebut sebut sebagai HTML+ yang mempunyai penambahan fitur table dalam paragraph, akan tetapi versi ini tidak bertahan lama.
·         Tahun 1996 bulan Mei , dikeluarkan HTML versi 3.2 digunakan oleh pengembang browser yang dapat diterima, dan dikatakan bahwa versi 3.2 ini merupakan versi 3.0 yang dikembangkan oleh beberapa pengembang browser seperti Netscape dan Microsoft.
·         Tahun 1999 tanggal 24 Desember yaitu HTML versi 4.0 sebagai penyempurnaan versi 3.2.
·         Tahun 2010 tanggal 4 Maret, HTML versi 5.0 yang dikembangkan oleh W3C dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0.

HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language) merupakan sebuah jenis teks dokumen khusus yang membuat sebuah halaman web yang digunakan oleh Web browser untuk mempresentasikan teks dan gambar . Dan didalam teks tersebut terdapat tag markup. File HTML adalah berisi beberapa instruksi atau perintah yang kemudian diterjemahkan oleh browser yang ada dikomputer user,  sehingga isi informasinya dapat ditampilkan secara visual dikomputer user. HTML dikenal sebagai standar bahasa yang digunakan untuk menampilkan dokumen web. Sedangkan dokumen HTML sering disebut sebagai “halaman Web”. Browser mengambil halaman Web dari Web server dan karena adanya Internet, Halaman tersebut bisa berada di manapun di dunia.
Cara Penulisan / Sintaks HTML sebagai berikut :

<html>
<head>   </head>
<body>  teks </body>
</html>
Atau bisa dengan bagian yang lebih rinci lagi :
<html>
<title> teks <title>  sebagai judul page/ halaman
<h1> teks </h1>  sebagai header
<body>  teks </body> untuk isi dari web browser
</html>

Berikut ini kode – kode HTML yang umum digunakan :

<b> teks </b> untuk membuat teks BOLD/ tebal.
<i> teks </i>  untuk membuat teks Italic / teks miring.
<u> teks </u>  untuk membuat teks Underline/ garis bawah.
<br> teks </br >  untuk membuat teks memulai bais baru/ enter.
<ol> teks </ol>  untuk membuat penomeran.
<ul> teks </ul>  untuk membuat bullet.
<center> teks </center>  untuk membuat teks berada ditengah-tengah.
<right> teks </right>  untuk membuat teks rata kanan.
< left> teks </left>  untuk membuat teks rata kiri.
< justify> teks </justify>  untuk membuat teks rata kanan-kiri.
<font color =” yellow”> teks </color>  untuk membuat teks berwarna kuning.
</hr>  untuk membuat garis.
<marquee> teks </marquee>  untuk membuat teks berjalan.
<strike> teks </strike>  untuk membuat teks bergaris ditengahnya.


HTML +
HTML + merupakan HTML versi pertama yang mempunyai beberapa kemampuan diantaranya :
a. Heading.
b. Paragraph.
c. Hypertext.
d. List.
e. Cetak tebal dan miring pada teks.
f. Peletakan image pada dokumen tanpa teks disekelilingnya (wrapping).

HTML 5
HTML5 merupakan sebuah prosedur pembuatan tampilan web baru dari penggabungan antara CSS, HTML dengan Java Script. Teknologi ini mulai diluncurkan pada tahun 2009, namun sampai saat ini masih dalam tahap pengembangan. Nah, ini ada beberapa kelebihan yang dimiliki oleh HTML5, yaitu:
1.      Cleaner code, kode terlihat lebih sederhana.
2.      Greater consistency, penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana
3.      Improve Semantics, standarisasi kode, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav, footerdan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”.
4.      Improved Accessibility struktur pembangunan sebuah web lebih mudah.
5.      Client-side Database, menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.
6.      Geolocation, empunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.
7.      Offline Aplication Cache, pengguna dapat melakukan  interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.
8.      Smarter Forms, semacam reguler expression (regex) yang membuat form mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password dll)
Sharper focus on Web Application Requiments, membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis dan masih banyak lagi tentunya.
»HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. 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 berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser. HTML dokumen tersebut mirip dengan dokumen teks biasa,  hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat teks ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh teks yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. Secara garis besar, terdapat 4 jenis elemen dari HTML:
·         structural. tanda yang menentukan level atau tingkatan dari sebuah teks (contoh, <h1>Golf</h1> akan memerintahkan browser untuk menampilkan “Golf” sebagai teks tebal besar yang menunjukkan sebagai Heading 1
·         presentational. tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentational saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan teks,
·         hypertext. tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.ilmukita.com/">IlmuKita</a> akan menampilkan IlmuKita sebagai sebuah hyperlink ke URL tertentu),
·         Elemen widget yang membuat objek-objek lain seperti tombol (<button>), list (<li>), dangaris horizontal (<hr>).
Dasar-Dasar HTML
Mendesain HTML berarti melakukan suatu tindakan pemrograman. Namun HTML bukanlah sebuah bahasa pemrograman. Namun HTML hanyalah berisi perintah-perintah yang telah terstruktur berupa tag-tag penyusun. Menuliskan tag-tag HTML tidaklah sebatas hanya memasukkan perintah-perintah tertentu agar HTML kita dapat di akses oleh browser. Mendesain HTML adalah adalah sebuah seni tersendiri. Homepage yang merupakan implementasi dari HTML adalah refleksi dari orang yang membuatnya. Untuk itu kita perlu mendesainnya dengan baik agar para pengunjung homepage yang kita buat merasa senang dan bermanfaat.
Mendesain HTML dapat dilakukan dengan dua cara:
·         Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver, dan lain-lain. Dapatkan editor HTML lainnya disini.
·         Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke dalam dokumen HTML.
HTML penulis memberikan cara untuk:
·         Menerbitkan dokumen online dengan judul, teks, tabel, daftar, foto, dll Mengambil informasi online melalui hypertext link, di klik tombol.
·         Desain formulir untuk melakukan transaksi dengan layanan jarak jauh, untuk digunakan dalam mencari informasi, membuat reservasi, memesan produk, dll
·         Sertakan menyebar-lembaran, klip video, klip suara, dan aplikasi lainnya secara langsung di dokumen mereka.
Fungsinya HTML
1.     Membuat, mendesain, dan mengontrol tampilan dari Web Page (Halaman Web) dan isinya.
2.     Mempublikasikan document secara online sehingga bias diakses, dilihat dan dari dan keseluruh dunia.
3.     Membuat online form yang bias di gunakan untuk menangani pendaftaran, transaksi secara online.
4.     Menambahkan object – object seperti image, audio, video dan juga java applet (aplikasi java seperti java game dll) dalam document HTML.

Ada kelebihan dan kekurangan dari dua cara mendesain HTML. Cara pertama kelebihannya adalah HTML Editor merupakan sebuah program yang khusus didesain untuk membuat, melakukan editing bahkan mem-publish ke internet. Dengan kemampuannya menggabungkan kemudahan dan kecanggihan teknologi internet ke dalam dokumen HTML maka cara ini sangat disukai oleh para pemula dan desainer yang tidak ingin belajar lebih mendalam mengenai HTML. Sedangkan cara kedua adalah menuliskan secara manual satu persatu tag-tag HTML. Hal ini sangat disarakan sulit dikarenakan akan memakan tenaga dan waktu ekstra untuk melakukannya, ditambah lagi Anda harus melakukan cara-cara konvensional untuk melihat hasilnya pada web browser. Namun pada cara kedua adalah dasar dari segala bentuk HTML yang akan Anda pelajari, karena dengan cara itulah Anda akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa dipakai pada bahasa HTML.
Cara Membuat Web Sederhana dengan Menggunakan HTML
Dalam Membuat HTML Aplikasi yang bisa anda Gunakan Antara Lain : Notepad, Dreamweaver, dll. dan di HTML, ada Beberapa Kode-kode penting yang harus anda ketahui,dan dibawah ini adalah kode-kode yang harus ada dalam membuat HTML.

<html>  : Untuk memulai sebuah HTML
<title> : Untuk memberi judul pada yang nantinya akan muncul di Tab Browser
<head>  : Untuk Bagian Header atau Atas
</head> : Untuk Penutup Header dan diawali dengan GARIS MIRING "/"
<body>  : Untuk Bagian Body atau Isi dalam HTML
</body> : Untuk Penutup/menutup Body dan diawali dengan GARIS MIRING "/"
</html> : Untuk Menutup Sebuah HTML dan diawali juga dengan GARIS MIRINg "/"

Nah Itu kode-kode Dasar untuk membuat sebuah HTML
Dalam HTML juga ada Tag-tag nah dibawah ini ada beberapa Tag yang saya ketahui dalam HTML.

<h1> : ini adalah Tag Heading, yang berlevel 1, selain <h1> ada juga <h2>, <h3>, <h4>, <h5>, <h6>
<b>  : (Bold) Fungsinya untuk membuat Huruf menjadi Tebal
<i>  : (Italic) Fungsinya untuk membuat Huruf menjadi Miring
<u>  : (Underline) Fungsinya untuk membuat dibawah huruf berisi garis
<p>  : Untuk membuat sebuah Paragraf
<br> : untuk Membuat sebuah baris baru atau enter
<hr> : untuk membuat sebuah garis Horizontal
<center> : untuk membuat tulisan atau gambar berada di tengah-tengah
<img src="gambar-anda.jpg atau Url gambar anda"> : fungsinya untuk memasukan sebuah gambar
<body bgcolor="black"> : Fungsinya untuk memberi warna untuk background atau latar belakang dan "black" bisa diganti sesuai keinginan anda, misalnya "red", "yellow"
<font color="red"> : Untuk mengatur warna Text dan ditutup dengan </font>
<font size="12"> : untuk mengatur Ukuran Sebuah Text dan ditutup dengan </font>
<font face="arial"> : Untuk mengatur jenis Font atau Text yang akan digunakan
<marquee> : untuk membuat sebuah text ataupun gambar bergerak

cara membuat sebuah WEB sederhana menggunakan HTML

1. Buka Aplikasi yang anda Gunakan, Disini Saya Menggunakan Notepad, dan anda juga bisa membuat HTMl menggunakn aplikasi Seperti Adobe Dreamweaver yang lebih lengkap.

2. Masukan Kode HTML dibawah Ini kedalam Notepad atau Notepad++

<html>
<head>
<title>Belajar HTML</title>
</head>
<body>
<body bgcolor="red">
<h1>Saya Sedang Belajar HTML</h1>

<center>
<font size="13" color="black" face="arial">
<p>Membuat HTML Itu Mudah Lo</p>
<b>HTML adalah Hyper Text Markup Leanguage</b>
<i>Dan Fungsi HTML itu adalah Untuk menginput Text, Gambar, Audio, Video</i>
<u>Itu semua mudah jika anda serius mempelajarinya :)</u>
</font>
<br>
<marquee>
<img src="gambar.jpg atau memasukan URL gambar"> //* Satukan File HTML dengan gambar yg anda masukan agar dapat dibaca
</marquee>
</center>
</body>
</html>
3. Simpan dan beri nama sesuka anda tapi di akhirnya diberi .html agar file dibaca sebagai file HTML dan Type : All Files
ohh ya jika anda ingin menambahkan gambar kedalam html tanpa menggunakan URL, caranya gabungkan file Gambar yang anda ingin masukan dan file HTML dalam 1 Folder.
 4. Nah Sekarang kita coba test bagaimana hasilnya dengan cara Klik Kanan di file HTML yang tadi anda buat dan pilih Open With dan pilih Browser yang anda gunakan, misalnya Google Chrome atau Mozilla Firework 
5. Nah seperti ini hasilnya :) dan anda bisa mengedit sesuai keinginan anda :)

SUMBER:
Linda, Marwati. “Sejarah HTML”.  13 Maret 2016. https://lindamawa2.wordpress.com/2013/09/14/sejarah-html/
Anonim. “Sejarah dan Penjelasan bahasa HTML”. 13 Maret 2016. http://soddis.blogspot.co.id/2014/01/sejarah-dan-penjelasan-bahasa-html.html
Anonim. “Sejarah HTML (Hyper Text Markup Language”. 13 Maret 2016. https://goesmedia.wordpress.com/2013/12/10/sejarah-html-hypertext-markup-language/
Dhea, Chairunnisa. “ Sejarah Perkembangan HTML”. 13 Maret 2016 http://dheaabigael.blogspot.co.id/
Amelia, Ekawati. “Makalah Web”. 13 Maret 2016. https://sismartamelia.wordpress.com/2013/04/18/makalah-html/
Tiara, Lestari. “Sejarah HTML”. 13 Maret 2016. http://tiaralestari06.blogspot.co.id/2013/10/makalah-html.html
Didik, Ariyani. “Cara Membuat Web Sederhana”. 13 Maret 2016. http://www.didik16.com/2014/12/cara-membuat-web-sederhana-menggunakan.html




Tidak ada komentar:

Posting Komentar