Membuat HTML
HyperText Markup Language
(HTML) 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).
Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.
Pendahuluan
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: Tampilan Tebal maka penulisannya dilakukan dengan cara:
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: Tampilan 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.
Markup/Tanda
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.wikipedia.org/">Wikipedia</a>akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu), - Elemen widget yang membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis horizontal (<hr>).
Selain markup presentational ,
markup yang lain tidak menentukan bagaimana tampilan dari sebuah teks.
Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan
telah dianjurkan untuk mulai ditinggalkan dan sebagai gantinya digunakan
Cascading Style Sheets.
Contoh dokumen HTML sederhana
HTML BERJALAN
<html>
<head>
<title>Logo</title>
</head>
<body bgcolor=magenta scrolling=”no”>
<h3><marquee>Selamat Datang di Idham.com</marquee></h3>
<h5 align=center > <marquee>Web layanan gratis</marquee> </h5>
</body>
<head>
<title>Logo</title>
</head>
<body bgcolor=magenta scrolling=”no”>
<h3><marquee>Selamat Datang di Idham.com</marquee></h3>
<h5 align=center > <marquee>Web layanan gratis</marquee> </h5>
</body>
</html>
HTML Paragraf
<html>
<head>
<title>idham.com</title>
</head>
<body bgcolor=chine>
<!—Cara membuat paragrap —>
<P>Cara membuat tulisan dengan paragrap 1
<br>dilanjut dengan pindah baris ke dua
<P>Cara membuat tulisan dengan paragrap 2
<br>dilanjut dengan pindah baris ke dua
</body>
<head>
<title>idham.com</title>
</head>
<body bgcolor=chine>
<!—Cara membuat paragrap —>
<P>Cara membuat tulisan dengan paragrap 1
<br>dilanjut dengan pindah baris ke dua
<P>Cara membuat tulisan dengan paragrap 2
<br>dilanjut dengan pindah baris ke dua
</body>
</html>
HTML Insert
<html>
<head>
<title>idham.com</title>
</head>
<body bgcolor=chine>
<P>Cara membuat tulisan menjorok kedalam dengan insert simbol<br>
<ul type=scquare>
<li>No
<li>Tgl
<li>Nama
<li>Instruktur
</ul>
<P>Cara membuat tulisan menjorok kedalam dengan insert angka
<ol type=”I” start=1>
<li>No
<li>Tgl
<li>Nama
<li>Instruktur
</ol>
</body>
<head>
<title>idham.com</title>
</head>
<body bgcolor=chine>
<P>Cara membuat tulisan menjorok kedalam dengan insert simbol<br>
<ul type=scquare>
<li>No
<li>Tgl
<li>Nama
<li>Instruktur
</ul>
<P>Cara membuat tulisan menjorok kedalam dengan insert angka
<ol type=”I” start=1>
<li>No
<li>Tgl
<li>Nama
<li>Instruktur
</ol>
</body>
</html>
HTML Table
<html>
<head>
<title>idham.com</title>
</head>
<body bgcolor=chine>
<!—Cara membuat table —>
<P>Cara membuat table
<table border=1 width=100% bgcolor=yellow cellpadding=2>
<caption align=bottom><div align=center><b><i><h2>Jadwal Training</h2></i></b></div></caption>
<tr bgcolor=#008000>
<th>no.<th>tgl<th>Materi<th>Instruktur
</tr>
<tr align=center>
<td>1.<td>2-3-2003<td>Tqs<td>hendry
</tr>
<tr align=center>
<td>2.<td>2-3-2003<td colspan=2 bgcolor=#87ceeb>dua kolom jadi satu
<tr align=center>
<td>3.<td rowspan=2>dua baris jadi satu<td>MQ<td>Huzaini
</tr>
<tr align=center>
<td>4.<td>tqm<td>ismail
</tr>
</table>
<table border=1 width=100% bgcolor=yellow cellpadding=0>
<caption align=top><div align=center><b><i><h2>Jadwal Training</h2></i></b></div></caption>
<tr bgcolor=#008000>
<th>no.<th>tgl<th>Materi<th>Instruktur
</tr>
<tr align=center>
<td>1.<td>2-3-2003<td>Tqs<td>hendry
</tr>
<tr align=center>
<td>2.<td>2-3-2003<td colspan=2 bgcolor=#87ceeb>dua kolom jadi satu
<tr align=center>
<td>3.<td rowspan=2>dua baris jadi satu<td>MQ<td>Huzaini
</tr>
<tr align=center>
<td>4.<td>tqm<td>ismail
</tr>
</table>
</body>
<head>
<title>idham.com</title>
</head>
<body bgcolor=chine>
<!—Cara membuat table —>
<P>Cara membuat table
<table border=1 width=100% bgcolor=yellow cellpadding=2>
<caption align=bottom><div align=center><b><i><h2>Jadwal Training</h2></i></b></div></caption>
<tr bgcolor=#008000>
<th>no.<th>tgl<th>Materi<th>Instruktur
</tr>
<tr align=center>
<td>1.<td>2-3-2003<td>Tqs<td>hendry
</tr>
<tr align=center>
<td>2.<td>2-3-2003<td colspan=2 bgcolor=#87ceeb>dua kolom jadi satu
<tr align=center>
<td>3.<td rowspan=2>dua baris jadi satu<td>MQ<td>Huzaini
</tr>
<tr align=center>
<td>4.<td>tqm<td>ismail
</tr>
</table>
<table border=1 width=100% bgcolor=yellow cellpadding=0>
<caption align=top><div align=center><b><i><h2>Jadwal Training</h2></i></b></div></caption>
<tr bgcolor=#008000>
<th>no.<th>tgl<th>Materi<th>Instruktur
</tr>
<tr align=center>
<td>1.<td>2-3-2003<td>Tqs<td>hendry
</tr>
<tr align=center>
<td>2.<td>2-3-2003<td colspan=2 bgcolor=#87ceeb>dua kolom jadi satu
<tr align=center>
<td>3.<td rowspan=2>dua baris jadi satu<td>MQ<td>Huzaini
</tr>
<tr align=center>
<td>4.<td>tqm<td>ismail
</tr>
</table>
</body>
</html>
HTML Gambar
<html>
<head>
<title>idham.com</title>
</head>
<body bgcolor=magenta text=”#ffffff” link=blue vlink=red alink=”#00ff00″>
<!—Cara membuat tex mengelilingi gambar —>
<head>
<title>idham.com</title>
</head>
<body bgcolor=magenta text=”#ffffff” link=blue vlink=red alink=”#00ff00″>
<!—Cara membuat tex mengelilingi gambar —>
<a href=tulisan.html> <img
width=90 height=30 border=3 src=paint10_title.gif ALT=”gambar corell”
align=left ></a><div align=left><font face=”arial”>
<b><font size=+2>D</b></font>alam cerita Ramayana, dikhabarkan dewi Shinta menginginkan Rama untuk menangkap sebuah kijang yang disebut kijang kencana.
Pada awalnya Rama menolak untuk menangkap kijang tersebut.</font></div>
</body>
<b><font size=+2>D</b></font>alam cerita Ramayana, dikhabarkan dewi Shinta menginginkan Rama untuk menangkap sebuah kijang yang disebut kijang kencana.
Pada awalnya Rama menolak untuk menangkap kijang tersebut.</font></div>
</body>
</html>
HTML Form
<html>
<head>
<title>idham.com</title>
</head>
<body bgcolor=magenta text=”#ffffff” link=blue vlink=red alink=”#00ff00″>
<!—Cara membuat form —>
<form method=”post”>
Nama
<input type=text name=nama size=30><br>
Alamat
<input type=text name=alamat size=30><br>
<form method=”post”>
Jenis kelamin<br>
Laki-laki
<input type=radio name=jk Value=l><br>
Perempuan
<input type=radio name=jk Value=p><br>
</form>
</body>
<head>
<title>idham.com</title>
</head>
<body bgcolor=magenta text=”#ffffff” link=blue vlink=red alink=”#00ff00″>
<!—Cara membuat form —>
<form method=”post”>
Nama
<input type=text name=nama size=30><br>
Alamat
<input type=text name=alamat size=30><br>
<form method=”post”>
Jenis kelamin<br>
Laki-laki
<input type=radio name=jk Value=l><br>
Perempuan
<input type=radio name=jk Value=p><br>
</form>
</body>
</html>
HTML MENU 1
<html>
<head>
<title>idham.com</title>
</head>
<body bgcolor=cyan align=leff>
<!—Cara membuat tulisan berjalan —>
<ul type=scquare>
<li><a href=paragrap.html target=f1>paragrap</a>
<li><a href=simbol.html target=f1>inset simbol</a>
<li><a href=table.html target=f1>table</a>
<li><a href=gambar.html target=f1>tulisan mengelilingi gambar</a>
<li><a href=form.html target=f1>form</a>
<li><a href=”myprog.idc” target=f1>data peserta</a>
</ul>
</body>
<head>
<title>idham.com</title>
</head>
<body bgcolor=cyan align=leff>
<!—Cara membuat tulisan berjalan —>
<ul type=scquare>
<li><a href=paragrap.html target=f1>paragrap</a>
<li><a href=simbol.html target=f1>inset simbol</a>
<li><a href=table.html target=f1>table</a>
<li><a href=gambar.html target=f1>tulisan mengelilingi gambar</a>
<li><a href=form.html target=f1>form</a>
<li><a href=”myprog.idc” target=f1>data peserta</a>
</ul>
</body>
</html>
HTML Java script
<html>
<!— program javaScript pertama —->
<pre>
<b>Obyek pada JavaScript</b>
<!— program javaScript pertama —->
<pre>
<b>Obyek pada JavaScript</b>
JavaScript mempunyai <i>obyek hirarkhi</i> yang disebut sebagai”window”.
-Window
-Location
-History
-Document
-Forms
-Anchors
<B>Window</b>
Obyek berisi metoda dan properti yang berinteraksi dengan window aktual.
Setiap Window dapat merepresentasikan Frame.
-Window
-Location
-History
-Document
-Forms
-Anchors
<B>Window</b>
Obyek berisi metoda dan properti yang berinteraksi dengan window aktual.
Setiap Window dapat merepresentasikan Frame.
<b>Location</B>
Berisi Properti dan metoda yang berkaitan dengan lokasi URL (Universal Resource Locator).
Berisi Properti dan metoda yang berkaitan dengan lokasi URL (Universal Resource Locator).
<b>History</b>
Berisi informasi tentang daftar dari history historyb tempat/ URL yang telah dikunjungi.
Berisi informasi tentang daftar dari history historyb tempat/ URL yang telah dikunjungi.
<b>Documen</b>
obyek yang paling banyak digunakan dalam javaScript, termasuk menggunakan <i>forms, links,
string </i> (teks) dan lainnya.
</pre>
obyek yang paling banyak digunakan dalam javaScript, termasuk menggunakan <i>forms, links,
string </i> (teks) dan lainnya.
</pre>
</html>
HTML Menu 2
<html>
<head>
<title>idham.com</title>
</head>
<body bgcolor=cyan>
<!—Cara membuat tulisan berjalan —>
<ul type=scquare>
<head>
<title>idham.com</title>
</head>
<body bgcolor=cyan>
<!—Cara membuat tulisan berjalan —>
<ul type=scquare>
<li><a href=js.html target=f1>JavaScript
</body>
</html>
HTML Frame
<html>
<head>
<title>idham.com</title>
</head>
<p style=”font: 12pt arial”>
<frameset cols=25%,50%,25% border=0 scrolling=no>
<frame src=menu1.html>
<frameset rows=20%,* border=0 scrolling=no>
<frame src=logo.html>
<frame src=logo.html name=f1>
</frameset>
<frame src=menu2.html name=f2>
</frameset>
</p>
<head>
<title>idham.com</title>
</head>
<p style=”font: 12pt arial”>
<frameset cols=25%,50%,25% border=0 scrolling=no>
<frame src=menu1.html>
<frameset rows=20%,* border=0 scrolling=no>
<frame src=logo.html>
<frame src=logo.html name=f1>
</frameset>
<frame src=menu2.html name=f2>
</frameset>
</p>
</html>
0 komentar:
Posting Komentar