Hypertext Markup Language (HTML) adalah bahasa yang digunakan untuk menulis halaman web. HTML merupakan pengembangan dari standar pemformatan dokumen teks yaitu Standard Generalized Markup Language (SGML). HTML sebenarnya adalah dokumen ASCII atau teks biasa, yang dirancang untuk tidak tergantung pada suatu sistem operasi tertentu.
HTML dibuat oleh Tim Berners-Lee ketika masih bekerja untuk CERN dan dipopulerkan pertama kali oleh browser Mosaic. Selama awal tahun 1990 HTML mengalami perkembangan yang sangat pesat. Setiap pengembangan HTML pasti akan menambahkan kemampuan dan fasilitas yang lebih baik dari versi sebelumnya.
Namun perkembangan resmi dikeluarkan pada bulan November 1995 oleh IETF (Internet Engineering Task Force).
HTML 3.0 (1995) memberikan kemampuan lebih daripada versi sebelumnya.
Sebuah usaha dari World Wide Web Consortium’s (W3C) HTML Working Group pada
tahun 1996 menghasilkan HTML 3.2. HTML versi ini secara resmi diterbitkan pada
bulan Januari 1997. HTML versi terbaru adalah HTML 4.01 yang dikeluarkan secara
resmi oleh W3C pada tanggal 24 April 1998. HTML merupakan perbaikan dari HTML
4.0 yang lebih dulu diterbitkan. (18 Desember 1997).
(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:
1. Menggunakan HTML Editor, seperti Microsoft FrontPage, Adobe Dreamweaver,
dan lain-lain. Dapatkan editor HTML lainnya disini.
2. Dengan cara menuliskan sendiri secara manual satu persatu tag-tag HTML ke
dalam dokumen HTML.
(PERKEMBANGAN HTML) Sebelum suatu HTML disahkan sebagai suatu
dokumen HTML standar, ia harus disetujui dulu oleh W3C untuk dievaluasi secara
ketat. Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser
pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru
tersebut. Sebab jika tidak, browser tak akan bisa menampilkan HTML tersebut.
HTML versi 1.0
Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraph, hypertext,
list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image
pada dokumennya tanpa memperbolehkan meletakkan teks disekelilingnya
(wrapping).
HTMl versi 2.0
Pada versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk
menampilkan suatu form pada dokumen. Dengan adanya form ini, maka kita dapat
memasukkan nama, alamat, serta saran/kritik. HTML versi 2.0 ini merupakan pionir
dari adanya homepage interaktif.
HTML versi 3.0
HTML versi 3.0 menambahkan beberapa fasilitas baru seperti table. Versi ini
yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML
versi 3.2.
HTML versi 4.0
HTML versi 4 ini merupakan HTML versi terakhir pada saat sumber ini diambil.
HTML ini memuat banyak sekali perubahan dan revisi dari pendahulunya. Perubahan
ini terjadi di hampir segala perintah-perintah HTML seperti table, image, link, text,
meta, imagemaps, form, dan lain- lain.
Kemudian lahir HTML versi 4.01 yang dikeluarkan secara resmi oleh W3C pada
tanggal 24 April 1998. HTML 4.01 menjadi standart pada tahun 1999. HTML 4.01
merupakan perbaikan dari HTML versi 4.0 yang terlebih dahulu diterbitkan (18
Desember 1997). HTML versi HTML 4.01 masih standart resmi sampai sekarang ini .
HTML 5
HTML 5 merupakan perkembangan html generasi saat ini dan merupakan
generasi terakhir dan mungkin akan berkembang lagi mengikuti perkembangan
jaman.
KEKURANGAN DAN KELEBIHAN HTML
Seperti yang kita tahu bahwa, setiap bahasa dan program mempunyai kelebihan
dan Kekurangan. Ada baiknya kita mengetahui kelebihan dan kekurangan dari HTML
sehingga kita bisa memaksimalkan pengetahuan dan wawasan kita dalam
mengeksplorasi dunia browser.
Kelebihan-kelebihan HTML antara lain:
1. 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.
2. Dapat disisipi gambar baik gambar statis atau dinamis (animasi) termasuk
menggunakan gambar untuk dijadikan hyperlink. Gambar di sini digunakan untuk
merujuk pada suatu halaman web, dimana setiap titik-titik yang sudah
didefinisikan berupa rectangular (kotak), poligon (kurva tak beraturan) atau
lingkaran digunakan untuk ‘jump’ ke halaman lain, atau link ke halaman di luar
web yang bersangkutan.
3. 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).
4. Dapat disisipi bahasa pemrograman untuk mempercantik halaman web seperti
Javascript, VBScript, Active Server Pages, Perl, Tcl, PHP dan sebagainya. Bukan
merupakan bahasa pemrograman jadi tidak memerlukan kompiler. Cara
menjalanakannya cukup dengan menggunakan browser.
Adapun kekurangan dari HTML ini adalah:
1. Menghasilkan halaman yang statis, yang saya tahu untuk memperoleh halaman
yang dinamis harus menggunakan bahasa pemrograman tertentu seperti
Javascript atau VBScript dan animasi seperti Flash atau Shockwave.
2. Memiliki tag-tag yang begitu banyak sehingga susah dipelajari untuk yang masih
awam. Tidak dapat menghasilkan halaman yang interaktif. Interaktif di sini
maksudnya client dapat berinteraksi dengan server. Untuk keperluan itu, HTML
harus disisipi bahasa pemrograman yang dapat menangani hal tersebut,
contohnya Perl atau Tcl. (Sumber: http://www.burung-net.com/2015/05/pengertian-html-fungsi htmlserta-sejarah-html.html).
Struktur HTML & Tag -Tag Dasar
Praktikum 1
-Bukalah notepad atau program text editor yang lain.
-Ketikkan script berikut :
<html>
<head>
<title>Contoh</title>
</head>
<body>
SEDANG BELAJAR PEMROGRAMAN WEB
</body>
</html>
-Simpan (File|Save As), dengan nama PRAKTIKUM1. html, pada kolom Save As
-Type, pilihlan All Files(*.*).
-Buka web browser anda (internet explorer)
-Bukalah dokumen yang anda buat tadi. (File|Open)
-Klik browse: arahkan ke file PRAKTIKUM1.html, klik OK
-Lihatlah hasilnya :
Praktikum 2
Pada praktikum 2 kali ini kita akan belajar menambahkan warna background, dan
pemformatan tampilan teks.
-Buka kembali file web.html pada program teks editor anda (notepad).
-Ubah perintah berikut <BODY bgcolor=”#0000ff” text="#ff0000" >
<html>
<head>
<title>Contoh2</title>
</head>
<body bgcolor=”#0000ff” text=”#ff0000” >
SEDANG BELAJAR PEMROGRAMAN WEB
</body>
</html>
Praktikum 3
(Paragraf)
Tag yang digunakan <p>… di tutup dengan tanda </p> Digunakan untuk membuat paragraf
Atribut: - align
-Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
-Simpan dengan nama paragraf.html.
<html>
<head>
<title>Paragraf</title>
</head> <body>
<p>SELAMAT DATANG</p>
<p>Di Dunia HTML</p>
<p>Elemen paragraf ditandai dengan tag P
dan setiap paragraf baru di tampilkan pada baris
baru</p>
<p align=”left”> rata kiri</p>
<p align=”right”>rata kanan</p>
<p align=”center”> rata tengah</p>
<p align=”justiyf”> rata kiri kanan</p>
</body>
</html>
Praktikum 4
(Line Break)
Tag <BR> digunakan untuk pindah baris
-Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
-Simpan dengan nama Line Break.html.
<html> <head>
<title>Paragraf</title>
</head> <body>
<p>Elemen paragraf <BR>ditandai dengan tag P <BR> dan
setiap paragraf baru <BR> di tampilkan pada baris
baru</p>
</body>
</html>
Praktikum 5
(Heading)
Heading biasanya digunakan untuk judul topik dan tag yang digunakan adalah
< H1> . . . <H6>
Makin besar angka dibelakang H, maka huruf yang akan ditampilkan semakin kecil
-Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
-Simpan dengan nama Heading.html.
<html> <head>
<title>Heading</title>
</head> <body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Praktikum 6
(Membuat garis)
Tag <HR> disisipkan pada tempat garis akan ditampilkan
-Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
-Simpan dengan nama Garis.html.
<html> <body color="silver">
Garis Lebar 80%, rata kiri<hr width="80%" align="left">
Garis Lebar 80%, rata kanan<hr width="80%" align="right">
Garis normal rata tengah<hr align="center">
Garis ukuran "10", rata tengah, lebar "70%"<hr size="10"
align="center" width="70%">
Garis lebar "65%", rata Kiri, ukuran "15" noshade <hr
width="65%" align="left" size="15" noshade>
<p><hr>
<i>Copyright © nama anda</i>
</body>
</html>
BAB 3
Formating Text HTML
Praktikum 1
(Format Font)
Teks dokumen HTML dapat diformat secara khusus u/ menunjukkan perbedaan dan
penekanan terhadap isi dan maksud dokumen.
-Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
-Simpan dengan nama Format_Font.html.
<HTML>
<HEAD>
<TITLE> Formatting Font </TITLE>
</HEAD>
<BODY>
<b>Bold</b>
<BR>
<u>Underline</u>
<BR>
<I>Italic</I>
<BR>
<strong>Strong</strong>
<BR>
<em>Emphasis</em>
<BR>
<cite>Citation</cite>
<BR>
<s>ini di coret</s>
<BR>
X<sup>3</sup> + 2X<sup>2</sup> - 5
<BR>
H<sub>2</sub>O
</BODY></HTML>
Praktikum 2
(Karakter - Karakter Khusus)
-Simpan dengan nama Karakter_Khusus.html.
<HTML>
<HEAD>
<TITLE> karakter khusus </TITLE>
</HEAD>
<BODY>
Copyright © <br>
Trademark ™ <br>
Registered ® <br>
Poundsterling £ <br>
Yen ¥ <br>
Euro €<br>
</BODY>
</HTML>
Praktikum 3
(Indentasi)
Disamping mengatur perataan, kita pun bisa mengatur posisi baris-baris paragraf dari
margin (tepi halaman). Tag-tag indentasi paragraph yaitu <DD>, <BLOCKQUOTE>,
<DL>,<DT>.
-Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
-Simpan dengan nama Indentasi.html.
<html>
<head>
<title>Ceritaku Ceritamu</title>
</head>
<body>
<DD>Engkau datang membawa sejarah_
dari kota kecil menuju kota besar_
Indonesia rindu pemimpin sepertimu_
semoga ada tempat bagimu untuk dipilih_</DD>
<BLOCKQUOTE>Memimpin negeri ini bukanlah surga_
meyambung warisan panasnya neraka_
Tak semudah balikkan punggung tangganmu_
mesti seirama beresolusi_</BLOCKQUOTE>
<DL>
<DT>kami gantung harapan kami_
di bahu pemimpin kami</DT>
</DL>
</body>
</html>
BAB 4
List dan Link
Praktikum 1
(List)
List merupakan bentuk yang umum yang biasa kita gunakan untuk menguraikan
daftar sesuatu.
Jenis-jenis list dalam HMTL :
-List dengan nomor (OL : Ordered List)
Nomor item pada ordered list secara default adalah menggunakan angka 1,2,3..,
dst sampai sejumlah item dalam list tersebut. Bila nomor ingin diganti dengan
type yang lain (romawi, abjad huruf besar/kecil), maka kita tinggal mengisi atribut
type pada tag <ol>
Contoh untuk list dengan angka romawi : <ol type=”I”>
Type Arti
I Romawi Besar
i Romawi Kecil
A Abjad Huruf Besar
a Abjad Huruf Kecil
-List tanpa nomor (UL: Unordered List)
Jenis bullet pada unordered list bisa diganti dengan mengisikan atribut type pada tag <ul>
Contoh <ul type=”box”> : bila ingin bullet berbentuk kotak.
Type Arti
Disc Bulatan Penuh
Circle Bulatan Kosong
Square Segi empat penuh
Praktikum 1a
-Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
-Simpan dengan nama List_OL.html.
<HTML>
<BODY>
<B>SISTEM KOMPUTER</B>
<OL TYPE="I">
<B><LI>BRAIN WARE</B>
<B><LI>HARDWARE</B>
<OL Type="A" >
<LI>Input Device
<LI>Output Device
<LI>CPU
<LI>Storage Device
</OL>
<B><LI>SOFTWARE</B>
<OL Type="a">
<LI>Sistem Operasi
<OL Type="i">
<LI>Windows
<LI>Linux
</OL>
<LI>Aplikasi
<OL >
<LI>MS. Word
<LI>CorelDraw
</OL></OL></OL>
</BODY>
</HTML>
Praktikum 1b
-Buatlah sebuah dokumen HTML untuk tulisan berikut ini :
-Simpan dengan nama List_UL.html.
<HTML><BODY>
<B>SISTEM KOMPUTER</B>
<UL TYPE="Disc">
<B><LI>HARDWARE</B>
<UL Type="Circle" >
<LI>Input Device
<LI>Output Device
<LI>CPU
<LI>Storage Device
</UL>
<B><LI>SOFTWARE</B>
<UL Type="square">
<LI><U>Sistem Operasi </U>
<LI><U>Aplikasi</U>
</UL></UL></BODY></HTML>
Praktikum 2
(Link)
HTML menggunakan tag <a> tag Anchor untuk membuat link
Sintaknya:
<a href=“Source”> Teks Tampilan</a>
Jenis Link:
- Link Relatif
- Link Absolut
- Link dalam satu dokumen
Link Relatif
Link dalam page ke page yang lain dalam satu komputer
Contoh:
<a href=“Jaring2.html”>Berikut</a>
<a href=“/jaringan/Jaring2.html”> Berikut</a>
Link Absolut
Membuat link web page ke web site lain di Internet.
Contoh:
<A href=“http://www.facebook.com”> Facebook</A>
Link ke Bagian lain dalam Dokumen
Link jenis ini dibuat apabila dokumen html cukup panjang
Link ini berpasangan dengan tag
<A HREF="#yang_baru">Yang Baru Hari Ini</A>
<A NAME="yang_baru"></A>
<B><U>Yang Baru Hari Ini:</U></B>
Pratikum 2a
-Terlebih dahulu, buatkan folder untuk latihan dokumen HTML berikut ini dengan
nama Link
-Buatlah sebuah dokumen HTML untuk tulisan berikut ini, Simpan dengan nama
Latihan1.html
<html>
<head>
<title>Latihan1</title>
</head>
<body bgcolor="red">
<p>Latihan Satu</p>
<body>
</html>
-Buatlah sebuah dokumen HTML untuk tulisan berikut ini, Simpan dengan nama
Latihan2.html.
<html>
<head>
<title>Latihan2</title>
</head>
<body bgcolor="blue">
<p>Latihan Dua</p>
<body>
</html>
-Buatlah sebuah dokumen HTML untuk tulisan berikut ini, Simpan dengan nama
Latihan3.html.
<html>
<head>
<title>Latihan3</title>
</head>
<body bgcolor="yellow">
<p>Latihan Tiga</p>
<body>
</html>
-Kemudian buatlah sebuah dokumen HTML untuk tulisan berikut ini,
-Simpan dengan nama Link_Menu.html
<html>
<head>
<title>Latihan Link</title>
</head>
<body link="red">
Selamat Belajar :
<UL Type="A">
<LI> <a href="Latihan1.html">Latihan 1</a></LI>
<LI> <a href="Latihan2.html">Latihan 2</a></LI>
<LI> <a href="Latihan3.html">Latihan 3</a></LI>
</UL>
<body>
</html>
Pratikum 2b
-Buatlah sebuah dokumen HTML untuk tulisan berikut ini, Simpan dengan nama
Jenis_Link.html
<HEAD>
</HEAD>
<BODY>
<A NAME="TOP">
<BR>
<H1>Link secara relatif, lihat contoh di bawah
ini:</H1>
<P>
<A HREF="page_2.html">Klik di sini </A> jika mau ke
halaman berikutnya
</P>
<H1>Link secara absolut, lihat contoh di bawah
ini:</H1>
<P>
Klik <A HREF="http://www.facebook.com">facebook</A>
menuju ke facebook
</P>
<P>
<H1>Membuat window baru untuk link:</H1>
Open <A HREF="http://www.mangosoft.com"
TARGET="_blank"> my home page</A>
with new window.
</P><H1>Membuat link tanpa garis bawah:</H1><P>
<A HREF="http://www.mangosoft.com" style=" textdecoration:
none">Klik
This Link </A> , Looks it's not use underline.
</P></P>
<H1>Membuat link pada suatu pesan mail:</H1>
<BR> kirim email ke <a
href="mailto:syafriadi82@gmail.com">
syafriadi82@gmail.com</a>
</p>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><A HREF="#TOP">
kembali ke atas</A>
</BODY>
</HTML>
SEKIAN DAN TERIMA KASIH.......!!!
DAFTAR PUSTAKA
Syafriadi.2016.Praktikum pengrograman HTML Laboratorium Komputer.Laboratorium komputer Universitas Cokroaminoto Palopo.hal. (1-3,11-21)
Tidak ada komentar:
Posting Komentar