Postingan saya kali ini adalah membahas kumpulan Tag pada HTML beserta fungsinya. Nah...sebelum itu saya ingin membuat artikel di dalam website. Nantinya saya akan menjelaskan tag apa saja yang saya gunakan untuk membuat website tersebut menggunakan HTML dan CSS yang hasilnya akan seperti gambar di bawah ini;
 |
| Gambar 1.1 |
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" href="styleARTIKEL.css" type="text/css">
<title>Artikel</title>
</head>
<body background="computer1.jpg">
<div class="head">
<marquee align="left"><font face="cooper std"><h1>WELCOME TO ELFA'S BLOG^^, ENJOY READING...</h1></font></marquee>
<hr>
</div>
<div>
<h1><center> SEJARAH DAN PERKEMBANGAN HTML </center></h1>
<h3><center> ( Hyper Text Markup Language) </center></h3>
<br><p align="justify">Hyper Text Markup Language <b>(HTML)</b> 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. <del>Dengan kata lain</del>, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan <sup>perintah</sup>-<sub>perintah</sub> HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML <i>(Standard Generalized Markup Language)</i>, HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh <i>World Wide Web Consortium</i> (W3C). HTML dibuat oleh <font color="#009900">kolaborasi Caillau TIM</font> dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 <u>(CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).</u> </p>
<p> Selanjutnya akan membahas mengenai sejarah dan perkembangan HTML. Klik tombol di bawah ini untuk masuk ke halaman berikutnya .</p>
</div>
<div>
<a href="SejarahHTML.html"><button>SEJARAH HTML</button></a>
</div>
<div>
<a href="perkembanganHTML.html"><button>PERKEMBANGAN HTML</button></a>
</div>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="styleARTIKEL.css" type="text/css">
<title>Artikel</title>
</head>
<body background="computer1.jpg">
<div class="head">
<marquee align="left"><font face="cooper std"><h1>WELCOME TO ELFA'S BLOG^^, ENJOY READING...</h1></font></marquee>
<hr>
</div>
<div>
<h1><center> SEJARAH DAN PERKEMBANGAN HTML </center></h1>
<h3><center> ( Hyper Text Markup Language) </center></h3>
<br><p align="justify">Hyper Text Markup Language <b>(HTML)</b> 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. <del>Dengan kata lain</del>, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan <sup>perintah</sup>-<sub>perintah</sub> HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML <i>(Standard Generalized Markup Language)</i>, HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh <i>World Wide Web Consortium</i> (W3C). HTML dibuat oleh <font color="#009900">kolaborasi Caillau TIM</font> dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 <u>(CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).</u> </p>
<p> Selanjutnya akan membahas mengenai sejarah dan perkembangan HTML. Klik tombol di bawah ini untuk masuk ke halaman berikutnya .</p>
</div>
<div>
<a href="SejarahHTML.html"><button>SEJARAH HTML</button></a>
</div>
<div>
<a href="perkembanganHTML.html"><button>PERKEMBANGAN HTML</button></a>
</div>
</body>
</html>
Nah agar tampilan web seperti gambar di atas saya menambahkan beberapa kode pada file CSS:
div {width:900px; margin:20px auto;}
button {background: linear-gradient(to bottom, #FF9999, #FFCCFF);
border:1px solid #FF9999;
color:#000066;
margin: 4px 10px;
padding: 5px; width: 900px;
cursor:pointer}
.head {color:#FF9999;}
#sejarah {padding:15px; background-color:#CCCCCC;}
button {background: linear-gradient(to bottom, #FF9999, #FFCCFF);
border:1px solid #FF9999;
color:#000066;
margin: 4px 10px;
padding: 5px; width: 900px;
cursor:pointer}
.head {color:#FF9999;}
#sejarah {padding:15px; background-color:#CCCCCC;}
Jika anda melihat Gambar 1.1 anda akan menemukan tampilan seperti gambar di bawah ini;
 |
| Gambar 1.2 |
 |
| Gambar 2.1 |
 |
| Gambar 2.2 |
Sebelumnya terlebih dahulu anda membuat kode html untuk link object "SEJARAH HTML." dan "PERKEMBANGAN HTML". Di bawah ini adalah kode HTML;
- SEJARAH HTML
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" href="styleARTIKEL.css" type="text/css">
<title>Sejarah HTML</title>
</head>
<div>
<body background="html.jpg">
<div id="sejarah">
<h1><center> SEJARAH HTML </font></center></h1>
</div>
<p align="justify">Awalnya HTML(Hyper Text Markup Language) merupakan sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan disebut dengan 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).</p>
<img src="h1.png" height="274" width="375">
<p align="justify">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:
<ol><li>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).</li>
<li>Tahun 1986 GML diganti namanya oleh ISO dengan SGML (Standard Generalized Markup Language).</li>
<li>Tahun 1989 Caillau Tim dengan Banners Lee Robert yang bekerja di CERN memberi nama HTML, dan mempopulerkanya pertama kali dengan browser Mosaic.</li>
<li>Tahun 1990 HTML sangat berkembang sangat cepat hingga mencapai HTML versi 5.0 yang digarap pada 4 Maret 2010 oleh W3C.</li>
<li>Tahun 1996 tanggal 14 Januari, HTML versi 2.0 versi ini menjadikan sebuah pioneer dalam perkembangan homepage interaktif.</li>
<li>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.</li>
<li>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.</li>
<li> Tahun 1999 tanggal 24 Desember yaitu HTML versi 4.0 sebagai penyempurnaan versi 3.2.</li>
<li> 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.</li>
</ol>
</p>
</body></div>
</html>
<html>
<head>
<link rel="stylesheet" href="styleARTIKEL.css" type="text/css">
<title>Sejarah HTML</title>
</head>
<div>
<body background="html.jpg">
<div id="sejarah">
<h1><center> SEJARAH HTML </font></center></h1>
</div>
<p align="justify">Awalnya HTML(Hyper Text Markup Language) merupakan sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan disebut dengan 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).</p>
<img src="h1.png" height="274" width="375">
<p align="justify">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:
<ol><li>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).</li>
<li>Tahun 1986 GML diganti namanya oleh ISO dengan SGML (Standard Generalized Markup Language).</li>
<li>Tahun 1989 Caillau Tim dengan Banners Lee Robert yang bekerja di CERN memberi nama HTML, dan mempopulerkanya pertama kali dengan browser Mosaic.</li>
<li>Tahun 1990 HTML sangat berkembang sangat cepat hingga mencapai HTML versi 5.0 yang digarap pada 4 Maret 2010 oleh W3C.</li>
<li>Tahun 1996 tanggal 14 Januari, HTML versi 2.0 versi ini menjadikan sebuah pioneer dalam perkembangan homepage interaktif.</li>
<li>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.</li>
<li>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.</li>
<li> Tahun 1999 tanggal 24 Desember yaitu HTML versi 4.0 sebagai penyempurnaan versi 3.2.</li>
<li> 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.</li>
</ol>
</p>
</body></div>
</html>
- PERKEMBANGAN HTML
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" href="styleARTIKEL.css" type="text/css">
<title>Perkembangan HTML</title>
</head>
<body background="html.jpg">
<div id="sejarah">
<h1><center>PERKEMBANGAN HTML</center></h1>
</div>
<div>
<p><font face="Arial, Helvetica, sans-serif">Didalam HTML telah mengalami berbagai perkembangan dari tiap-tiap versinya. Berikut adalah versi-versi dari perkembangan HTML tersebut:</font></p>
<table border="2">
<tr><th><h3>HTML Versi 1.0</h3></th>
<td>HTML Versi 1.0 merupakan pionir yang di dalamnya masih terdapat banyak sekali kelemahan hingga wajar jika tampilan yang dihasilkan sangat sederhana. Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraf, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan teks di sekelilingnya (wraping).</p></td></tr>
<tr><th><h3>HTML Versi 2.0</h3></th>
<td>Pada HTML Versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, kita dapat memasukkan nama, alamat, serta saran dan kritik. HTML versi 2.0 ini merupakan pionir dari adanya web interaktif.</td></tr>
<tr><th><h3>HTML Versi 3.0</h3></th>
<td>Versi HTML 3.0 menambahkan beberapa fasilitas baru seperti FIGURE yang merupakan perkembangan dari IMAGE untuk meletakkan gambar dan tabel. Selain itu, HTML ini juga mendukung adanya rumus-rumus matematika dalam dokumennya. Versi ini yang disebut HTML+- tidak bertahan lama dan segera digantikan dengan versi 3.2.</td></tr>
<tr><th><h3>HTML Versi 3.2</h3></th>
<td>HTML versi ini merupakan HTML yang sering digunakan. Di dalamnya terdapat suatu teknologi untuk meletakkan teks di sekeliling gambar, gambar sebagai latar belakang, tabel, frame, style sheet dan lain-lain. Selain itu pada HTML versi ini Kita bisa menggunakan script di luar HTML untuk mendukung kinerja HTML kita tersebut, seperti Javascript, VBScript dan lain-lain.</td></tr>
<tr><th><h3>HTML Versi 4</h3></th>
<td>HTML ini memuat banyak sekali perubahan dan revisi dari pendahulunya yaitu HTML 3.2. Perubahan ini hampir terjadi di segala perintah HTML seperti tabel, image, link, text, meta, imagemaps, form dan lain-lain.</td></tr>
<tr><th><h3>HTML Versi 4.01</h3></th>
<td>HTML versi 4.01 merupakan revisi dari HTML 4.0. Versi terbaru ini memperbaiki kesalahan-kesalahan kecil (minor errors) pada versi terdahulunya. HTML 4.01 ini juga menjadi standarisasi untuk elemen dan atribut dari script XHTML 1.0.</td></tr>
<tr><th><h3>HTML Versi 5.0</h3></th>
<td>Teknologi ini mulai diluncurkan pada tahun 2009, tetapi pada tanggal 4 Maret 2010 terdapat sebuah informasi bahwa W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0 telah mengmbangkan versi HTML terbaru, yaitu versi 5.0. HTML 5 adalah sebuah prosedur pembuatan tampilan web baru yang merupakan penggabungan antara CSS, HTML itu sendiri dengan JavaScript.
Beberapa fitur baru di HTML 5 sebagai berikut:
<ul> <li> Unsur kanvas untuk menggambar. </li>
<li> Video dan elemen audio untuk media pemutaran. </li>
<li> Element baru, seperti artikel, footer, header, dan navigasi.</li>
<li> Dukungan lebih baik untuk penyimpanan offline local.</li>
<li>Kontrol bentuk baru, seperti kalender, tanggal, waktu, email, URL, dan Search.</li>
</ul> </td></tr>
</p>
</table>
</body></div>
</html>
<html>
<head>
<link rel="stylesheet" href="styleARTIKEL.css" type="text/css">
<title>Perkembangan HTML</title>
</head>
<body background="html.jpg">
<div id="sejarah">
<h1><center>PERKEMBANGAN HTML</center></h1>
</div>
<div>
<p><font face="Arial, Helvetica, sans-serif">Didalam HTML telah mengalami berbagai perkembangan dari tiap-tiap versinya. Berikut adalah versi-versi dari perkembangan HTML tersebut:</font></p>
<table border="2">
<tr><th><h3>HTML Versi 1.0</h3></th>
<td>HTML Versi 1.0 merupakan pionir yang di dalamnya masih terdapat banyak sekali kelemahan hingga wajar jika tampilan yang dihasilkan sangat sederhana. Kemampuan yang dimiliki versi 1.0 ini antara lain heading, paragraf, hypertext, list, serta cetak tebal dan miring pada teks. Versi ini juga mendukung peletakan image pada dokumennya tanpa memperbolehkan teks di sekelilingnya (wraping).</p></td></tr>
<tr><th><h3>HTML Versi 2.0</h3></th>
<td>Pada HTML Versi ini, penambahan kualitas HTML terletak pada kemampuannya untuk menampilkan suatu form pada dokumen. Dengan adanya form ini, kita dapat memasukkan nama, alamat, serta saran dan kritik. HTML versi 2.0 ini merupakan pionir dari adanya web interaktif.</td></tr>
<tr><th><h3>HTML Versi 3.0</h3></th>
<td>Versi HTML 3.0 menambahkan beberapa fasilitas baru seperti FIGURE yang merupakan perkembangan dari IMAGE untuk meletakkan gambar dan tabel. Selain itu, HTML ini juga mendukung adanya rumus-rumus matematika dalam dokumennya. Versi ini yang disebut HTML+- tidak bertahan lama dan segera digantikan dengan versi 3.2.</td></tr>
<tr><th><h3>HTML Versi 3.2</h3></th>
<td>HTML versi ini merupakan HTML yang sering digunakan. Di dalamnya terdapat suatu teknologi untuk meletakkan teks di sekeliling gambar, gambar sebagai latar belakang, tabel, frame, style sheet dan lain-lain. Selain itu pada HTML versi ini Kita bisa menggunakan script di luar HTML untuk mendukung kinerja HTML kita tersebut, seperti Javascript, VBScript dan lain-lain.</td></tr>
<tr><th><h3>HTML Versi 4</h3></th>
<td>HTML ini memuat banyak sekali perubahan dan revisi dari pendahulunya yaitu HTML 3.2. Perubahan ini hampir terjadi di segala perintah HTML seperti tabel, image, link, text, meta, imagemaps, form dan lain-lain.</td></tr>
<tr><th><h3>HTML Versi 4.01</h3></th>
<td>HTML versi 4.01 merupakan revisi dari HTML 4.0. Versi terbaru ini memperbaiki kesalahan-kesalahan kecil (minor errors) pada versi terdahulunya. HTML 4.01 ini juga menjadi standarisasi untuk elemen dan atribut dari script XHTML 1.0.</td></tr>
<tr><th><h3>HTML Versi 5.0</h3></th>
<td>Teknologi ini mulai diluncurkan pada tahun 2009, tetapi pada tanggal 4 Maret 2010 terdapat sebuah informasi bahwa W3C (World Wide Web Consortium) dan IETF (Internet Engineering Task Force) yaitu sebuah organisasi yang menangani HTML sejak versi 2.0 telah mengmbangkan versi HTML terbaru, yaitu versi 5.0. HTML 5 adalah sebuah prosedur pembuatan tampilan web baru yang merupakan penggabungan antara CSS, HTML itu sendiri dengan JavaScript.
Beberapa fitur baru di HTML 5 sebagai berikut:
<ul> <li> Unsur kanvas untuk menggambar. </li>
<li> Video dan elemen audio untuk media pemutaran. </li>
<li> Element baru, seperti artikel, footer, header, dan navigasi.</li>
<li> Dukungan lebih baik untuk penyimpanan offline local.</li>
<li>Kontrol bentuk baru, seperti kalender, tanggal, waktu, email, URL, dan Search.</li>
</ul> </td></tr>
</p>
</table>
</body></div>
</html>
Kemudian lanjut membahas tag apa saja beserta fungsinya yang saya gunakan untuk membuat artikel website di atas antara lain:
<!DOCTYPE>
|
Mendefinisikan informasi tipe dokumen
| |
<HTML>
|
Mendefiniskan dokumen HTML
| |
<BODY>...</BODY>
|
Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth
|
Mendefinisikan body/isi dokumen HTML, berfungsi untuk menentukan bagaimana isi suatu dokumen
|
<HEAD>
|
Mendefinisikan bagian head dalam dokumen HTML
| |
<TITLE>
|
Membuat title bar pada web browser
| |
<P>
|
Align
|
Membuat sebuah Paragraf teks
|
<FONT>
|
Face, Color, Type, Size
|
Mendefinisikan jenis font, warna dan ukuran untuk teks
|
<BR>
|
Ganti baris / fungsi ENTER dalam aplikasi dokumen
| |
<HR>
|
Width
|
Membuat garis horisontal
|
<MARQUEE>
|
Direction, Behavior, Scrollamount, Delay
|
Membuat teks berjalan dengan attribut penentuan arah, tipe (Alternate atau scroll),kecepatan dan perlambatan
|
<FIELDSET>
|
Mengelompokkan objek form
| |
<B>
|
Membuat teks cetak tebal
| |
<I>
|
Membuat teks cetak miring
| |
<U>
|
Membuat teks bergaris bawah
| |
<H1>...<H6>
|
Membuat heading teks, judul dokumen HTML
| |
<DIV>
|
mendefinisikan suatu bagian dalam dokumen HTML
| |
<IMG>
|
SRC, Width, Height, Alt
|
Menampilkan file gambar
|
| <LINK REL> | Mengelompokkan file CSS kedalam HTML | |
<DEL>
|
SRC
|
Mencoret tulisan/font
|
<A>
|
HREF
|
Membuat link object (teks, gambar)
|
<TABLE>
|
Width, Height, Border
|
Mendefiniskan tabel dalam dokumen HTML
|
<CAPTION>
|
Membuat caption pada tabel
| |
<TR>
|
WIDTH, BACKCOLOR
|
Mendefiniskan baris/row dalam tabel
|
<TD>
|
ROWSPAN, COLSPAN, WIDTH, BACKCOLOR
|
Mendefinisikan sel atau kolom dalam tabel
|
<TH>
|
Mendefiniskan heading dalam tabel
| |
<OL>
|
Type
|
Membuat order list (numbering)
|
<UL>
|
Type
|
Membuat unorder list (fungsi bullet)
|
<LI>
|
Membuat item dari order list maupun unorder list
| |
<SUB>
|
Untuk menulis subscript.
| |
<SUP>
|
Untuk menulis superscript.
| |
Semoga bermanfaat :)
0 komentar:
Posting Komentar