Anjar Agus Setiawan

Jumat, 03 April 2009

Kisi-kisi UTS

MULOK : WEB & Javascript

1. Bahasa pemrograman yang ditempatkan/ditempelkan pada HTML dan akan diproses oleh web client adalah:
2. Pemrograman dengan skrip PHP berjalan pada komputer :
3. Dibawah ini Bahasa Pemrograman yang mempunyai licence copyright dan harus membelinya adalah â�¦

<FRAMESET ROWS="90,*" border=1>
<FRAME SRC="judul.html" SCROLLING=NO NORESIZE>
<FRAMESET COLS="160,*,100">
<FRAME SRC="menu.html" NORESIZE>
<FRAME SRC="prakata.html" NAME="FRAME-3">
<FRAME SRC="menu4.html" NAME="FRAME-4">
</FRAMESET>
</FRAMESET>

4. Dari script diatas Berapa jumlah frame yang dibuat :
5. Masih dari skrip diatas, Frame yang digunakan sebagai halaman inti untuk isi website adalah :
<html>
<body background="bg2.jpg">
<font size=7>Entry Data Siswa</font>
Ketik data-data siswa dibawah ini :<br />
<form id="form1? name="form1? method="post" action="isisiswa.php">
<table><tr><td>Nama Siswa</td><td><input type="text" name="nama" id="nama" /></td></tr>
<tr><td>Nomor Induk</td><td><input type="text" name="induk" id="induk" /></td></tr>
<tr><td>Kelas</td><td><input type="text" name="kelas" id="kelas" /></td></tr>
</table>
<input type="submit" name="Submit" id="Submit" value="Kirim" />
</form>
</body>
</html>

6. Perhatikan skrip diatas :
Skrip diatas bertugas untuk melakukan operasi :
7. Tetap dari skrip diatas hasil dari skrip tersebut akan ditangani oleh file :
<html>
<body>
<?php
$nama = $_POST['nama'];
$induk = $_POST['induk'];
$kelas = $_POST['kelas'];
$conn = mysql_connect("localhost","root","");
if (!$conn) {
echo "Could not connect to db";
exit(1);
}
$db = mysql_select_db("latihan",$conn);
$sqlText = "insert into siswa(nama, induk, kelas)
values('$nama','$induk','$kelas')";
mysql_query($sqlText);
?>Data telah dimasukkan dalam database<br />
</body>
</html>

8. Perhatikan skrip diatas, skrip diatas bertugas untuk melakukan operasi :
9. Masih dari skrip diatas, nama database dan tabel yang dimaksud skrip tersebut adalah :
10. Tag HTML untuk membuat link adalah:
11. HTML singkatan dari:

12. Properti yang berguna untuk mengatur warna bingkai tabel adalah:
13. Tag HTML yang menandakan kita menggunakan Javascript adalah
14. Apa guna function dalam Javascript
15. Tag yang digunakan untuk ganti baris
16. Tag HTML untuk menjalankan program Javascript yang disimpan dalam bentuk file adalah
17. Tag yang digunakan untuk membuat paragraf adalah
18. Pasangan tag <STYLE> dan </STYLE> digunakan untuk
19. Tag HTML untuk menampilkan gambar adalah
20. Untuk membuat judul tabel digunakan tag

Selasa, 31 Maret 2009

Proyek Baru

Sistem administrasi sekolah merupakan salah satu pengembangan sistem tempo dulu....yang biasa di gunakan dalam administrasi sekolah...
Mau tau gimana buatna?????

Yuukk....kita liat.....^^

1.Seperti Biasa Instal Dulu server mis : xampp, wamp and??? and so on..
2.Instal Macromedia Dreamweaver.....
Kalau udh ada ya gag usah di install lagi...
3.Buat file index Biasana...namanya....index.html atau juga index.php
atao yang lain juga boleh..Hahaha..

Ne contoh na... :

Xsript file Indexsas.html

<HTML>
<HEAD>
<TITLE>Program Sistem Informasi Sekolah</TITLE>
</HEAD>
<FRAMESET ROWS="180,*" border=2>
<FRAME SRC="judulsas.html" SCROLLING=NO NORESIZE>
<FRAMESET COLS="200,*">
<FRAME SRC="menusas.html" NORESIZE>
<FRAME SRC="prakata.html" NAME="FRAME-3">

</FRAMESET>
</FRAMESET>

</HTML>

4.Buat file-file pendukung yang mau di tampilkan di indexsas.html tersebut...

Ne example punYa Team Qwu...

Script file judul.html

Script file menu.html

<<style>
body{background-image:url(street_me_up_by_wahdjoe.jpg);
</style>

<html>
<head></head>
<title></title>
</head>

<body>
<font face="Comic Sans MS">
<br>
DAFTAR MENU
<br>
<br>

<A HREF="profil sekolah.html" TARGET="FRAME-3">Profil Sekolah</A><br>
Sekilas SMA<br>
Data Siswa<br>
<A HREF="entrydatasiswa.php" TARGET="FRAME-3">Entry Data Siswa</A><br>
<A HREF="lihatdatasiswa.php" TARGET="FRAME-3">Lihat Data Siswa</A><br>
<A HREF="dataguru.php" TARGET="FRAME-3">Data Guru</A><br>
Saran Prasarana<br>
Kurikulum<br>
Humas<br>
<A HREF="bukutamusiswa.php" TARGET="FRAME-3">Mengisi Buku Tamu</A><br>
<A HREF="lihatbukutamusiswa.php" TARGET="FRAME-3">Melihat Buku Tamu</A><br>
<A HREF="list tugas TIK.php" TARGET="FRAME-3">Tugas TIK</A><br>
</font>
</body>
</html>

Script file prakata.html

<html>
<head>
<title>
</title>
</head>
<body background="imageshow-6.jpg">
<br>
<font face="Courier New"_font color="#FFFF00">
<h1>Selamat Datang</h1>
<P><i>
Program Sistem Informasi Sekolah ini dibuat untuk memenuhi
kebutuhan informasi yang semakin pesat. Dengan adanya program
ini diharapkan informasi semakin cepat sampai pada pihak-pihak
yang membutuhkannya.
<br>
Program ini masih sangat sederhana dan sangat membutuhkan masukan dari
berbagai pihak , demi kemajuan dimasa mendatang. Untuk itu masukan-masukan anda
sangat kami harapkan. Anda dapat mengisi buku tamu untuk memberikan saran ,
kritik atau masukan-masukan yang lain.
<br>
Untuk menelusuri bagian-bagian program ini silahkan Anda pilih
menu-menu yang berada disebelah kiri halaman ini.
<br></i>
Terimakasih
</P>

</font>
</body>
</html>

Script File Profil sekolah.php

<html>

<body background=InSPRINGation_by_DrSensey.jpg>
<br>
<font face="Courier New">
<h1><font color="#66FF00">Sejarah SMA Negeri 1 Kepanjen</font></h1>
<P>
<b><font color="#FF0099"_font size="4">SMA NEGERI KEPANJEN
SMA Negeri 1 Kepanjen atau yang sering kita kenal dengan sebutan "SMANEKA" berdiri tanggal 13 Agustus 1977, sesuai dengan peresmian kategori
Kelas Jauh (<em>Filial</em>) SMA Negeri 1 Malang menjadi SMA Negeri 1 Kepanjen, yang peresmiannya dilakukan oleh Kepala Bidang Pendidikan Menengah Umum
Propinsi Jawa Timur dan Bupati KDH tingkat II Malang SK Menteri P dan K tanggal 30 Mei Ni.0166/ 01/ 1977.
Pimpinan sekolah saat itu adalah Bapak Sikin ( yang juga Kepala SMA Negeri 1 Malang ), wakil kepala sekolah adalah Bapak Soejono
</font></b>
</P>
</font>
</body>
</html>

Script entrydatasiswa.php

<html>

<body background="Like_a_Butterfly_by_00Velvet00Dreams00.jpg">

<font size=16>Entry Data Siswa</font>
<br />
<hr>
Ketik data-data siswa dibawah ini :<br />
<br />
<br />
<form id="form1? name="form1? method="post" action="isidatasiswa.php">
<table>
<tr><td>Nama Siswa</td><td><input type="text" name="nama" id="nama" /></td></tr>

<tr><td>Nomor Induk</td><td><input type="text" name="induk" id="induk" /></td></tr>

<tr><td>Kelas</td><td><input type="text" name="kelas" id="kelas" /></td></tr>

</table>
<br />
<br />

<hr>
<input type="submit" name="Submit" id="Submit" value="Kirim" />
</form>
</body>

</html>

Script lihatdatasiswa.php

<html>
<body background="Glamour_Collection__Amber_No_3_by_va_deam.jpg">
<br>

<font size="5" ><center>DAFTAR SISWA</center><br />
</font>
<?php
$conn = mysql_connect("localhost","root","");
if (!$conn) {
echo "Could not connect to db";
exit(1);
}
$db = mysql_select_db("data",$conn);

$sqlText = "select * from entrydata";
$result = mysql_query($sqlText);
echo "<table border=1 align=center >";
echo "<tr><td width=150><b><center>Nama Siswa</center></b></td>
<td width=150><b><center>Nomor Induk</center></b></td></b>
<td width=150><b><center>Kelas</center></b></td></b></tr>";

while($row=mysql_fetch_object($result))
{
echo "<tr><td>$row->nama</td><td align=center>$row->induk</td><td align=center>$row->kelas</td></tr>";
}

echo "</table>";
?>
</body>
</html>

Script dataguru.php

<html>
<head>
<title>Data Guru</title>
</head>
<body background="Field.jpg">
<body>
<center>
<Br><B></B><font color="PURPLE">GURU SMA NEGERI 1 KEPANJEN</font></B></BR>
<BR><BR>
<table width="550" border="1" cellpadding="0" cellspacing="0" bordercolor="#666699" class="tblDua">
<tbody>
<tr bgcolor="#cccccc">
<td align="center" height="10" width="25"><strong>No.</strong></td>
<td align="center" width="80"><strong>NIP</strong></td>
<td align="center" width="177"><strong>Nama</strong></td>
<td align="center" width="118"><strong>Jabatan</strong></td>
</tr>
<tr>
<td height="25"> 1.</td>
<td> 130521822</td>
<td>Dra. Sulastri</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 2.</td>
<td> 131288315</td>
<td>Drs. H. Dwi Tjahjono Widajat, M.Si</td>
<td>Kepala Sekolah</td>
</tr>
<tr>
<td height="25"> 3.</td>
<td> 130521822</td>
<td>Sri Mastriyastuti</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 4.</td>
<td> 130672168</td>
<td>Titiek Sumarlien, S.Pd</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 5.</td>
<td> 130796863</td>
<td>Dra. Endah Puspitaningsih</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 6.</td>
<td> 130810271</td>
<td>Sri Fatimah Wijaya, S.Pd</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 7.</td>
<td> 130880550</td>
<td>Suryani Sulistyawati, S.Pd</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 8.</td>
<td> 130880559</td>
<td>Thomas Supriyanto, S.Pd</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 9.</td>
<td> 130887304</td>
<td>Noorchamid Ichsan, S.Pd</td>
<td>Guru</td>

</tr>
<tr>

<td height="25"> 10.</td>
<td> 130934621</td>
<td>Drs. Sugito</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 11.</td>
<td> 130882356</td>
<td>Drs. Sarijono</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 12.</td>
<td> 130886131</td>
<td>Suyanti, S.Pd</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 13.</td>
<td> 131287519</td>
<td>Dra. Sulistin</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 14.</td>
<td> 131479753</td>
<td>Drs. Achmad Suhari</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 15.</td>
<td> 131408494</td>
<td>Dra. Suyanti</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 16.</td>

<td> 131408494</td>
<td>Drs. Gaguk Hadi Sujarwo</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 17.</td>
<td> 131666756</td>
<td>Drs. Budi Hartono</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 18.</td>
<td> 131866253</td>
<td>Drs. M. Rofi'il</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 19.</td>
<td> 131667864</td>
<td>Drs. Agus Sungkono</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 20.</td>
<td> 131858411</td>
<td>Dra. Ngadinah</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 1.</td>
<td>131102362</td>
<td>Bambang Prajitno, S.Pd.</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 2.</td>
<td> 130932128</td>
<td>Drs. Sri Widodo</td>
<td>Guru</td></tr>
<tr>
<td height="25"> 3.</td>
<td>130932754</td>
<td>Utiek Madelan, S.Pd</td>
<td>Guru</td></tr>
<tr>
<td height="25"> 4.</td>
<td> 131103655</td>
<td>Nur Haida, S.Pd.</td>
<td>Guru</td>
</tr>
<tr>
<td height="25"> 5.</td>
<td> 131399125</td>
<td>Dra. Isnadi</td>
<td>Guru</td></tr>
<tr><td height="25"> 6.</td><td> 131103587</td><td>Fadjar Siswanto, S.Pd.</td><td>Guru</td></tr><tr><td height="25"> 7.</td><td> 131103264</td><td>Djoko Pramono</td><td>Waka Kesiswaan</td></tr><tr><td height="25"> 8.</td><td> 131290173</td><td>Drs. Raspan</td><td>Waka Kurikulum</td></tr><tr><td height="25"> 9.</td><td> 131265033</td><td>Mochammad Tohar</td><td>Guru</td></tr><tr><td height="25"> 10.</td><td> 131900426</td><td>Drs. Sigit Umbar Purnomo</td><td>Guru</td></tr><tr><td height="25"> 11.</td><td> 131386063</td><td>Sahadi, S.Pd.</td><td>Waka Humas</td></tr><tr><td height="25"> 12.</td><td> 131625653</td><td>Dra. Sukana Sri Utami</td><td>Guru</td></tr><tr><td height="25"> 13.</td><td> 130684587</td><td>Injuhrati, S.Pd</td><td>Guru</td></tr><tr><td height="25"> 14.</td><td> 131290174</td><td>Niniek Sri Sugiarti, S.Pd</td><td>Waka Sarana</td></tr><tr><td height="25"> 15.</td><td> 131467118</td><td>Abdul Wahid, S.Pdi</td><td>Guru</td></tr><tr><td height="25"> 16.</td><td> 131660351</td><td>Kastinah, S.Pd</td><td>Guru</td></tr><tr><td height="25"> 17.</td><td> 131813104</td><td>Umu Halimah</td><td>Guru</td></tr><tr><td height="25"> 18.</td><td> 131834014</td><td>Dra. Yuniartiningsih</td><td>Guru</td></tr><tr><td height="25"> 19.</td><td> 131614184</td><td>Sri Purwantini, S.Pd</td><td>Guru</td></tr><tr><td height="25"> 20.</td><td> 131666222</td><td>Siti Fadilah, S.Pd</td><td>Guru</td>
</tr>
<tr>
<td height="25"> 1.</td><td> 131771603</td><td>Aspirin Prasetyaninhsih, S.Pd</td><td>Guru</td></tr><tr><td height="25"> 2.</td><td> 131837475</td><td>H. Lukman Huri, S.Pd</td><td>Guru</td></tr><tr><td height="25"> 3.</td><td> 131849502</td><td>Sri Purwati, S.Pd</td><td>Guru</td></tr><tr><td height="25"> 4.</td><td> 131872891</td><td>Sri Pontjowati, S.Pd.</td>
<td>Guru</td>
</tr><tr><td height="25"> 5.</td><td> 131764972</td><td>Dyah Rahmawati</td><td>Guru</td></tr><tr><td height="25"> 6.</td><td> 132189550</td><td>Hesti Indriana, S.Pd.</td><td>Guru</td></tr><tr><td height="25"> 7.</td><td> 132211438</td><td>Syarifatus Rofiah, S.Pd.</td><td>Guru</td></tr><tr><td height="25"> 8.</td><td> 150250473</td><td>Drs. Ruslan Ohoirat</td><td>Guru Depag</td></tr><tr><td height="25"> 9.</td><td> 132700898</td><td>Rachmah, S.Pd.</td><td>Guru Bantu</td></tr><tr><td height="25"> 10.</td><td> 0</td><td>Hartadi, S.Ag.</td><td>GTT</td></tr><tr><td height="25"> 11.</td><td> 0</td><td>Sri Dewiati, S.Pd</td><td>Guru</td></tr><tr><td height="25"> 12.</td><td> 0</td><td>Asri Nur'aini, S.Pd.</td><td>GTT</td></tr><tr><td height="25"> 13.</td><td> 0</td><td>Endah Ardiyani, S.Pd.</td><td>GTT</td></tr><tr><td height="25"> 14.</td><td> 0</td><td>Fajar Indrawanti, S.Pd</td><td>GTT</td></tr>
</tbody>
</table>
</center>
</body>
</html>

Script bukutamusiswa.php

<html>
<head>
<title>Halaman Buku tamu</title>
</head>
<body background="I_do_not_want_to_return_by_00Velvet00Dreams00.jpg">
<body>
Buku tamu - <a href="lihatbukutamusiswa.php">Lihat Isi Buku Tamu Siswa</a><br />
<br />
<hr>
Isilah buku tamu kami<br />
<br />
<br />
<form id="form1? name="form1? method="post" action="isibukutamusiswa.php">
Nama
<input type="text" name="nama" id="nama" />
<br />
<br />
Pesan
<textarea name="pesan" id="pesan" cols="45? rows="5?></textarea>
<br />
<br />
<hr>
<input type="submit" name="Submit" id="Submit" value="Submit" />
</form>
</body>

</html>

Script lihatbukutamusiswa.php

<html>
<head>
<title>Daftar Data yang ada di MySQL</title>
</head>

<body background="Vector_Wallpaper_by_mlody_bog.jpg">
<a href=bukutamusiswa.php>Isi Buku Tamu</a><br />
<font color="#FFFFFF" size="3">Isi buku tamu<br />
<br />
<?php
$conn = mysql_connect("localhost","root","");
if (!$conn) {
echo "Could not connect to db";
exit(1);
}
$db = mysql_select_db("latihan",$conn);

$sqlText = "select * from bukutamu";
$result = mysql_query($sqlText);
while($row=mysql_fetch_object($result))
{
?>
<strong>Nama</strong>: <?php echo $row->nama;?><br />
<strong>Pesan</strong>: <?php echo $row->pesan;?><br />
<br />
<?php } ?>
<marquee>
</marquee>
</font> <font color="#FFFFFF">
<marquee>
</marquee>
</font>
<marquee>
<font color=white size="3">Terimakasih Telah Mengisi Buku Tamu Kami</font>
</marquee>
</body>
</html>

That'sssssssss Alllllll...........
Waduhhh...Capekna.....^^
Wasslamau'alaikumm...
.

Rabu, 18 Februari 2009

Jawaban latihan semester

1. Tag HTML untuk membuat link adalah:
A. < a href=”URL/nama file”> </a>

2. HTML singkatan dari:
B. Hyper Text Markup Language

3. CSS singkatan dari:
B. Cascading Style Sheet

4. Properti yang berguna untuk mengatur warna bingkai tabel adalah:
C. border-color

5. Suatu bentuk hubungan interaktif dimana client dapat mengirimkan masukan ke server, dan server mengolah masukan tersebut kemudian dikembalikan kepada client, adalah konsep dari
A. CGI

6. Perl adalah singkatan dari:
A. Practical Extraction and Reporting Language

7. Tag HTML yang menandakan kita menggunakan Javascript adalah
A. < script language=”javascript”> </script>

8. Apa guna function dalam Javascript
D. menyatukan beberapa perintah

9. Tag yang digunakan untuk ganti baris
D. < br>

10. Tag HTML untuk menjalankan program Javascript yang disimpan dalam bentuk file adalah
D. < script> “file.js” </script>

11. Tag yang digunakan untuk membuat paragraf adalah
A. < p>

12. Pasangan tag <STYLE> dan </STYLE> digunakan untuk
C. Mendefinisikan style sheet

13. Bahasa pemrograman yang ditempatkan/ditempelkan pada HTML dan akan diproses oleh web client adalah
C. PHP

14. Tag HTML untuk menampilkan gambar adalah
D. < img src=”file.jpg”>

15. Untuk membuat judul tabel digunakan tag
C. < th>

Kamis, 12 Februari 2009

Cara membuat Buku Tamu

Mau tahu cara membuat buku tamu? Lihat di bawah ini....

Pertama siapkan dulu Programs-programs kayak di bawah ini :
TOOL : WEB SERVER (WAMP/ XAMP), NOTEPAD, BROWSER

first :

1.PAstikan web server sudah terpasang dengan cara di panggil dari browser http://localhost

2.Buat di PHP my admi data base baru

Create database : latihan
Crate table : bukutamu field 3
Nama fieldnya :
NAMA VARCHAR 30
PESAN TEXT
TANGGAL DATE

BUAAT PROGRAM PHP :
Buat 3 buah file PHP yakni :
1.bukutamu.php
2.isi.php
3.lihat.php

File bukutamu.php

<html>
<head>
<title>Halaman Buku tamu</title>
</head>

<body>
Buku tamu - <a href="lihat.php">lihat isi buku tamu</a><br />
<br />
<hr>
Isilah buku tamu kami<br />
<br />
<br />
<form id="form1? name="form1? method="post" action="isi.php">
nama
<input type="text" name="nama" id="nama" />
<br />
<br />
pesan
<textarea name="pesan" id="pesan" cols="45? rows="5?></textarea>
<br />
<br />
<hr>
<input type="submit" name="Submit" id="Submit" value="Submit" />
</form>
</body>

</html>

file isi.php

<html>
<head>
<title>Input Data dari Form ke MySQL</title>
</head>

<body>
<?php
$nama = $_POST['nama'];
$pesan = $_POST['pesan'];
$conn = mysql_connect("localhost","root","");
if (!$conn) {
echo "Could not connect to db";
exit(1);
}
$db = mysql_select_db("latihan",$conn);

$sqlText = "insert into bukutamu(nama, pesan,tanggal)
values('$nama','$pesan',NOW(''))";
mysql_query($sqlText);

?>
Buku tamu - <a href=lihat.php>lihat isi buku tamu</a><br />

</body>
</html>

file lihat.php

<html>
<head>
<title>Daftar Data yang ada di MySQL</title>
</head>

<body bgcolor="#000000">
<a href=bukutamu.php>Isi Buku Tamu</a><br />
<font color="#FFFFFF" size="3">Isi buku tamu<br />
<br />
<?php
$conn = mysql_connect("localhost","root","");
if (!$conn) {
echo "Could not connect to db";
exit(1);
}
$db = mysql_select_db("latihan",$conn);

$sqlText = "select * from bukutamu";
$result = mysql_query($sqlText);
while($row=mysql_fetch_object($result))
{
?>
<strong>Nama</strong>: <?php echo $row->nama;?><br />
<strong>Pesan</strong>: <?php echo $row->pesan;?><br />
<br />
<?php } ?>
<marquee>
---
</marquee>
</font> <font color="#FFFFFF">
<marquee>
</marquee>
</font>
<marquee>
<font color="#FF0000" size="3">AYO KAMU BISA BIKIN PROGRAM PAKE PHP
running text</font>----
</marquee>
</body>
</html>

Udah deh... mudahkan?

Rabu, 04 Februari 2009

PHP

Rabu, 28 Januari 2009

bagian isi atau tampilan diletakkan disini

baris pertama

baris kedua

ukuran satu

ukuran dua

ukuran tiga

ukuran empat

ukuran lima

ukuran enam

ukuran tujuh

berwarna biru

berwarna merah

berwarna hijau

1.isi pertama	2.isi kedua
3. isi ketiga	4. isi keempat

Selasa, 18 November 2008

HTML

Apa itu HTML ?

HTML singkatan dari Hyper Text Markup Language adalah file teks atau file ASCII yang berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari sebuah halaman web. Didalam file HTML terdapat beberapa "tag" atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor.

File HTML dapat dibuat dengan aplikasi text editor apapun di sistem operasi apapun, antara lain : Notepad di Windows, emasc atau vi di Unix atau SimpleText di Macintosh. File HTML ini juga bisa dibuat di aplikasi word processor apapun asalkan saat menyimpan file tersebut disimpan dengan format text-only.

Salah satu kelebihan file HTML adalah cross platform, artinya file HTML dapat ditampilkan di beberapa Operating System (OS) yang berbeda dan memiliki tampilan yang sama walaupun saat pembuatannya menggunakan satu OS tertentu saja.

Sedangkan Web browser adalah sebuah progam yang dapat menterjemahkan kode perintah dari dokumen HTML tersebut sehingga dapat kita lihat dan kita baca. Contoh dari Web Browser adalah Internet Exsplorer, Netscape Navigator, Mozilla Firefox dll.
HTML mempunyai file perluasan (extention) htm atau html. Dimana kedua perluasan tersebut adalah sama, jadi anda boleh menyimpan file dokumen HTML dengan extention ".htm" atau ".html".
Untuk menuliskan kode-kode HTML anda bisa menggunakan Texs Editor misalnya Notepad, Word Pad, Microsoft Word dll. Di bawah ini adalah contoh suatu dokumen HTML yang sangat sederhana. Start Notepad, silahkan mulai dengan mengetikkan (copy/paste) texs di bawah ini:

Titel Websiteku

Ini adalah dokumen
HTML pertamaku

Simpan file dengan pilihan "save as" dengan nama "latihan.htm".
Kemudian Start Internet Explorer. Pilih menu File, Open dan tujukan ke C:\My Documents\websiteku.htm " klik Ok, maka halaman website pertama anda akan ditampilkan.
*Lakukan hal yang sama untuk contoh-contoh selanjutnya.
Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti Tag, elemen, atribut dan nilai. Tag terdiri dari lambang-lambang khusus seperti: "<", ">" dan "/", untuk menuliskannya di dalam dokumen HTML dimulai dengan tag pembuka "<...>"dan diakhiri dengan tag penutup "". Kemudian di dalam tag tersebut terdapat teks seperti contoh diatas :html, head, title,body dan yang lainnya ini disebut dengan Elemen HTML.
Elemen HTML kemudian ada yang memiliki atribut dan nilai tertentu, seperti contoh untuk membuat warna latar belakang (background): , body merupakan elemen, bgcolor adalah atribut dan 0000ff merupakan nilai (value).
Elemen HTML mempunyai tiga hal penting yaitu: tag pembuka, isi, dan tag penutup. Sebagai contoh: Elemen html mempunyai tag pembuka ";lt&html>" dan tag penutup ";lt&/html>" dan yang berada diantaranya merupakan isi dari elemen html. Untuk menuliskan Elemen HTML bisa menggunakan huruf besar maupun huruf kecil. Contoh: , , , , semuanya adalah sama