HTML apa sih?
Sejarah HTML
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 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 2.0 ini merupakan penyempurnaan dari HTML+ (1993).
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).
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 2.0 ini merupakan penyempurnaan dari HTML+ (1993).
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).
Struktur Dokumen HTML
Secara
sederhana HTML terdiri dari dua bagian yaitu Header dan Body. Struktur HTML
diapit oleh tag awal <HTML> dan tag akhir </HTML>. Di bawah ini
adalah standar penulisan HTML :
<HTML>
<HEAD>
Deskrisi dokumen
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>
<HEAD>
Deskrisi dokumen
</HEAD>
<BODY>
Isi dokumen
</BODY>
</HTML>
Contoh:
<HTML>
<HEAD>
<TITLE>Selamat datang di Homepage Saya</TITLE>
</HEAD>
<BODY>
Halo, apakabar?. Homepage ini merupakan hasil karya saya yang pertama.
</BODY>
</HTML>
<HEAD>
<TITLE>Selamat datang di Homepage Saya</TITLE>
</HEAD>
<BODY>
Halo, apakabar?. Homepage ini merupakan hasil karya saya yang pertama.
</BODY>
</HTML>
1. Heading
Heading
adalah sekumpulan kata yang menjadi judul atau subjudul dalam suatu struktur
HTML. Heading berbeda dengan tag <TITLE> yang tidak bisa
muncul dalam halaman web. HTML menyediakan enam tingkatan heading. Heading level 1 biasanya untuk judul utama.
biasanya ini berpengaruh ke seo nya google, Dan title pada stuktur HTML juga
berpengaruh pada seo google.
Contoh:
<HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY>
<H1>Heading Level 1</H1>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5>Heading Level 5</H5>
<H6>Heading Level 6</H6>
</BODY>
</HTML>
<HEAD>
<TITLE>Headings</TITLE>
</HEAD>
<BODY>
<H1>Heading Level 1</H1>
<H2>Heading Level 2</H2>
<H3>Heading Level 3</H3>
<H4>Heading Level 4</H4>
<H5>Heading Level 5</H5>
<H6>Heading Level 6</H6>
</BODY>
</HTML>
2. Paragraf
Untuk
membuat paragraf digunakan tag <P>. Setelah tag <P> Anda bisa
menulis isi paragraf dan paragraf tersebut harus diakhiri dengan penutup </P>.
Anda
bisa mengatur posisi paragraf dengan attribut ALIGN.
Atribut
ALIGN
diikuti dengan posisi yang diinginkan. LEFT untuk rata kiri,
<P ALIGN=”left”> Artikel </P>
CENTER untuk rata
tengah
<P ALIGN=”center”> Artikel </P>
dan
RIGHT
untuk rata kanan.
<P ALIGN=”right”> Artikel </P>
Contoh:
<HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN=”right”>
Beberapa tahun yang lalu, seorang hartawan meninggal dunia sedangkan ia tidak memiliki ahli waris. Kepada pengacaranya, ia meninggalkan dua buah surat yang disegel.Yang sebuah berisi permintaan agar jenazahnya dikuburkan pada jam empat dini hari. Surat yang kedua belum diketahui isinya karena disampulnya tertulis pesan agar dibuka seusai pemakaman jenazah
<P ALIGN=”center”>
Sesuai dengan wasiat, jenazah itu dikebumikan pada pukul empat dini hari. Karena tidak lazimnya waktu pemakaman pada jam tersebut, yang ikut mengantar jenazahnya hanya empat orang kawannya yang paling setia
<P ALIGN=”left”>
Seusai pemakaman, surat wasiat yang kedua dibuka. Betapa terkejutnya pengacara ketika membaca isinya, ialah wasiat bahwa seluruh harta warisan (yang bernilai lebih dari 800.000 pound) dibagi rata kepada orang-orang yang mengantarkan jenazahnya ke pemakaman. Dengan demikian, yang berhak memperoleh harta yang banyak itu hanya empat orang, sebagai imbalan bagi kesetiaan mereka. Sumber humor, kisah dan pepatah
</P>
</BODY>
</HTML>
<HEAD>
<TITLE>Paragraf</TITLE>
</HEAD>
<BODY>
<P ALIGN=”right”>
Beberapa tahun yang lalu, seorang hartawan meninggal dunia sedangkan ia tidak memiliki ahli waris. Kepada pengacaranya, ia meninggalkan dua buah surat yang disegel.Yang sebuah berisi permintaan agar jenazahnya dikuburkan pada jam empat dini hari. Surat yang kedua belum diketahui isinya karena disampulnya tertulis pesan agar dibuka seusai pemakaman jenazah
<P ALIGN=”center”>
Sesuai dengan wasiat, jenazah itu dikebumikan pada pukul empat dini hari. Karena tidak lazimnya waktu pemakaman pada jam tersebut, yang ikut mengantar jenazahnya hanya empat orang kawannya yang paling setia
<P ALIGN=”left”>
Seusai pemakaman, surat wasiat yang kedua dibuka. Betapa terkejutnya pengacara ketika membaca isinya, ialah wasiat bahwa seluruh harta warisan (yang bernilai lebih dari 800.000 pound) dibagi rata kepada orang-orang yang mengantarkan jenazahnya ke pemakaman. Dengan demikian, yang berhak memperoleh harta yang banyak itu hanya empat orang, sebagai imbalan bagi kesetiaan mereka. Sumber humor, kisah dan pepatah
</P>
</BODY>
</HTML>
3. Blockquote
Perintah tag<BLOCKQUOTE>
digunakan untuk menulis kutipan teks. Dengan perintah ini browser akan
menampilkan teks yang menjorok ke dalam.Contoh:
<HTML><HEAD><TITLE>BLOCKQUOTE</TITLE></HEAD><BODY><H3>Sesuatu
yang tidak perlu dicoba</H3><BLOCKQUOTE>Sesuatu
yang kelihatan mengasyikkan tapi sebenarnya lebih banyak menambah masalah pada
remaja adalah narkoba, seks, alkohol dan merokok. Jangan sekali-kali mencoba
jika tidak ingin membuat masalah baru</BLOCKQUOTE></BODY></HTML>4. Begin Row (BR)
Tag
<BR> membuat
baris baru atau tulisan baru tanpa memberi baris kosong di bawahnya. Contoh:
<HTML><HEAD><TITLE>Begin
Row</TITLE></HEAD><BODY><P>Macam
– Macam script web seperti contoh di bawah ini:<BR>html<BR>php<BR>htm</BODY></HTML>6. Ukuran Font
Untuk mengatur huruf dokumen HTML digunakan tag
<FONT SIZE>. Tag <FONT SIZE> memiliki beberapa
atribut untuk mengatur ukuran huruf (Font) yang akan digunakan.Contoh:
<HTML><HEAD><TITLE>Ukuran
font</TITLE></HEAD><BODY><FONT SIZE=1>Ukuran font 1</FONT><FONT
SIZE=2>Ukuran font 2</FONT><FONT
SIZE=3>Ukuran font 3</FONT><FONT
SIZE=4>Ukuran font 4</FONT><FONT
SIZE=5>Ukuran font 5</FONT><FONT
SIZE=6>Ukuran font 6</FONT><FONT
SIZE=7>Ukuran font 7</FONT></BODY></HTML>
Atribut
FACE digunakan
untuk mengatur jenis huruf yang diinginkan. Atribut FACE harus diisi dengan string jenis
font seperti Arial, Times New Roman,Verdana, dan sebagainya.Contoh:
<HTML><HEAD><TITLE>Jenis
Font</TITLE></HEAD><BODY><FONT
SIZE=5><FONT FACE = “Arial”>Arial, contoh komputer
<P><FONT
FACE = “Verdana”>Verdana , contoh html <P><FONT
FACE = “Times New Roman”>Times New Roman, contoh web Indonesia <P></BODY></HTML>8. Warna Font
AtributCOLOR digunakan
untuk mengatur warna font yang akan digunakan. Untuk memberi nilai pada atribut
color, ada dua cara. Cara pertama dengan menuliskan nama warna seperti Merah,
Biru, Kuning, Putih dllContoh:
<HTML><HEAD><TITLE>Warna
Font</TITLE></HEAD><BODY><FONT
SIZE=5><FONT COLOR = “FF0000”>kaoskaki<P><FONT
COLOR = “#FF0000″>kaoskaki.net<P><FONT
COLOR = “#00FF00″>website kaoskaki<P></BODY></HTML>9. Membuat Link
Perintah anchor<A>
digunakan untuk membuat suatu linkUntuk membuat link ke dokumen HTML lain digunakan perintah
<A HREF=”linktujuan.html”>kalo
mau tahu lagi klik disini</A>Anda juga bisa membuat link dalam sebuah dokumen HTML. Untuk itu perlu dipersiapkan nama anchor lokasi tujuan dari link tersebut.
Contoh :<HTML><HEAD><TITLE>Link
tujuan</TITLE></HEAD><BODY><P
ALIGN=”center”> Maaf, hanya sedikit<BR>Rino<BR>Nico<BR>Tino!!<BR><A
HREF=”linktujuan.html”>kembali</A></BODY></HTML>10. Membuat link image :
Perintah anchor
<A>
digunakan untuk membuat suatu linkCodenya:
<a href="http://www.yahoo.com"> <img src="http://kaoskaki.net/kaoskaki.png"></a>
Jika dimasukkan se html :
<HTML><HEAD><TITLE>Link
tujuan</TITLE></HEAD><BODY><a href="http://www.kaoskaki.net"> <img src="http://kaoskaki.net/kaoskaki.png"></a
></BODY></HTML>11.Membuat background html :<body bgcolor="#FF99FF">
#
FF99FF adalh code warna bisa diganti dengan melihat code warna di photoshop.Codenya :
<body bgcolor="#FF99FF">
Script html nya :
<html>
<head></head>
<body bgcolor="#FF99FF">
<p>Hai.. Saat ini saya sedang belajar membuat latar belakang dengan warna</p>
<p>Kalau anda kurang suka dengan warnanya... ganti aja deh... kode warnanya... </p>
</body>
</html>
Contoh tag-tag Html yang lain yang bisa anda kembangkan
untuk membuat web sederhana :
Contoh
tag yang daapat dipakai untuk tulisan berupa kalimat, karakter, ataupun kata:
·
tag
<b>..</b> fungsinya untuk menebalkan huruf
·
tag
<i>…</i> fungsinya untuk memiringkan huruf (membuat huruf cetak
miring)
·
tag
<u>…</u> fungsinya untuk mencetak huruf bergaris bawah
·
tag
<blink>…</blink> digunakan untuk membuat tulisan berkedip
·
tag
<marquee>…</marquee> digunakan untuk membuat tulisan berjalan
contoh
web html:
Web
yang berekstensi html adalah web html.
Nb
:
Setelah
menulis script html nya setelah itu di save, beri namafile coba.html /
coba.htm.
Categories:
Blogcorner
0 komentar:
Posting Komentar