Berikut adalah contoh sebuah web sederhana yang saya buat dengan menggunakan Notepad (yang biasa, bukan Notepad ++) menggunakan bahasa HTML tanpa CSS. Web ini terdiri dari 6 halaman, semoga bermanfaat.
HOME/INDEX
<html>
<head>
<title>Diah Edogawa</title>
</head>
<body>
<center>
<table border=”0″ width=”1000″ height=”300″ cellspacing=”0″ cellpadding=”20″ margin=”1″>
<tr>
<td colspan=”2″ bgcolor=”pink” align=”center”>
<img src=”foto3.jpg” width=”1000″ height=”300″></td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”magenta” align=”center”>
<center><marquee><b>Ni Putu Diah Sumariani — Diah Edogawa</b></marquee></center></td>
</tr>
<tr>
<td width=”200″ height=”700″ bgcolor=”pink” valign=”top”>
<table width=”200″ border=”5″ bgcolor=”cyan” bordercolor=”green”>
<center>
<tr>
<th>DAFTAR MENU</th>
</tr>
<tr>
<td height=”30″><center><b><a href=”index.html”>Home</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”profile.html”>Profile</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”contact.html”>Contact</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”galery.html”>Galery</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”about.html”>About</a></center></td>
</tr>
</table>
</td>
<td width=”796″ height=”700″ bgcolor=”green” valign=”top” >
<p><b><center><blink>Kata Pengantar</blink></center></b></p><br>
<p align=”justify”>Puji syukur saya panjatkan ke hadapan Ida Sang Hyang Widhi Wasa, Tuhan Yang Maha Kuasa.<br>
<br>Karena atas rahmat dan berkat-Nya saya dapat menyelesaikan Tugas Pemrograman Web ini tepat pada waktunya. Saya berharap isi dalam web ini dapat bermanfaat untuk kita semua. Dalam pembuatan web ini, saya menggunakan bahasa <a href=”html.html”>html</a>, dengan memanfaatkan tag table beserta atribut-atributnya. Dalam Web ini saya menggunakan beberapa warna sebagai latar belakang / background, yaitu :
<ul>
<li><font color=”cyan”>Cyan</font></li>
<li><font color=”pink”>Pink</font></li>
<li><font color=”magenta”>Magenta</font></li>
<li><font color=”lime”>Green</font></li>
</ul>
Saya juga menambahkan beberapa gambar sebagai latar belakang meskipun penggunaanya masih terbatas. Saya menyadari masih banyak kekurangan dalam web ini yang perlu saya perbaiki. Untuk itu saya memohon saran serta kritik yang membangun dari saudara-saudara sekalian.<br>
<br>Akhir kata saya ucapkan terima kasih.
<br><br><br> Sukawati, Oktober 2010
<br>Penulis
</p>
</td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”magenta”><center><b><marquee>Sekolah Tinggi Ilmu Komputer Indonesia – Jurusan Teknik Informatika – Konsentrasi Design Grafis & Multimedia</b></marquee></center></td>
</tr>
</table>
</body>
</html>
Tampilan :
LINK TEXT – “HTML”
<html>
<head>
<title>Diah Edogawa</title>
</head>
<body>
<center>
<table border=”0″ width=”1000″ height=”300″ cellspacing=”0″ cellpadding=”20″ margin=”1″>
<tr>
<td colspan=”2″ bgcolor=”pink” align=”center”>
<img src=”foto3.jpg” width=”1000″ height=”300″></td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”magenta” align=”center”>
<center><marquee><b>Ni Putu Diah Sumariani — Diah Edogawa</b></marquee></center></td>
</tr>
<tr>
<td width=”200″ height=”700″ bgcolor=”pink” valign=”top”>
<table width=”200″ border=”5″ bgcolor=”cyan” bordercolor=”green”>
<center>
<tr>
<th>DAFTAR MENU</th>
</tr>
<tr>
<td height=”30″><center><b><a href=”index.html”>Home</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”profile.html”>Profile</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”contact.html”>Contact</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”galery.html”>Galery</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”about.html”>About</a></center></td>
</tr>
</table>
</td>
<td width=”796″ height=”700″ bgcolor=”green” valign=”top” >
<p><b><center><blink>Kata Pengantar</blink></center></b></p><br>
<p align=”justify”>
HTML (Hypertext Markup Language) merupakan bahasa yang digunakan untuk membuat website. Menggunakan tag untuk mendeklarasikan sesuatu dan tag tersebut tidak ditampilkan tetapi tag tersebut memberi tahu browser bagaimana cara menampilkan dokumen website. Serta dapat saling berhubungan dengan dokumen HTML lain yang dikenal dengan istilah link. HTML (Hyper Text Markup Language) bisa juga dikatakan sebagai bahasa standar untuk membuat suatu dokumen HTML (halaman web) yang terdiri dari kode-kode singkat tertentu, dimana dengan kode-kode tersebut akan memerintahkan Web browser bagaimana untuk menampilkan halaman Web yang terdiri dari berbagai macam format file seperti texs, grafik, animasi link maupun audio-video.
<br>Suatu halaman website sebenarnya hanya sebuah halaman teks, jika anda menggunakan browser internet explorer dan anda mengklik view – source, maka anda dapat melihat teks dari web tersebut. Tetapi teks tersebut diterjemahkan oleh browser menjadi halaman website yang enak dilihat. Teks merupakan bahasa universal bagi komputer, yang berarti setiap dokumen teks (termasuk website) yang anda buat melalui Windows dapat dibaca di sistem perasi lain seperti Mac OS, Linux, Unix dan lainnya. HTML pada awalnya dikembangkan oleh Tim Berners-Lee sementara di CERN, dan dipopulerkan oleh browser Mosaic dikembangkan di NCSA. Selama tahun 1990-an telah berkembang dengan pertumbuhan eksplosif Web. Selama waktu ini, HTML telah diperpanjang dalam beberapa cara. Web tergantung pada halaman Web penulis dan vendor berbagi konvensi yang sama untuk HTML. Hal ini telah termotivasi bekerja bersama spesifikasi untuk HTML. HTML 2.0 (November 1995, lihat [RFC1866] [p.356]) telah dikembangkan di bawah perlindungan dari Internet Engineering Task Force (IETF) untuk mengkodifikasi praktik umum di akhir tahun 1994. HTML + (1993) dan HTML 3.0 (1995, lihat [HTML30] [p.355]) mengusulkan jauh lebih kaya versi HTML. Meskipun tidak pernah menerima konsensus dalam standar diskusi, konsep ini mengarah pada adopsi berbagai fitur baru. Upaya dari World Wide Web Consortium’s HTML Working Group untuk menata Common praktek pada tahun 1996 menghasilkan HTML 3.2 (Januari 1997, lihat [HTML32] [p.356]). Perubahan dari HTML 3.2 dirangkum dalam Lampiran A [p.311] 21 24 Desember 1999 18:26 Pengenalan HTML 4
<br><br>Kebanyakan orang setuju bahwa dokumen HTML harus bekerja dengan baik di berbagai browser dan platform. Mencapai interoperabilitas menurunkan biaya untuk penyedia konten karena mereka harus mengembangkan hanya satu versi dokumen. Jika upaya ini tidak dilakukan, ada risiko yang lebih besar bahwa Web akan berpindah ke dalam dunia perangkat lunak berpemilik format tidak sesuai, akhirnya mengurangi potensi komersial Web untuk semua peserta. Setiap versi HTML telah berupaya untuk merefleksikan konsensus di antara industri yang lebih besar pemain sehingga investasi yang dilakukan oleh penyedia konten tidak akan sia-sia dan bahwa dokumen mereka tidak akan menjadi tak terbaca dalam waktu singkat. HTML telah dikembangkan dengan visi bahwa segala macam perangkat tersebut harus berada dapat menggunakan informasi di Web: PC dengan tampilan grafis dengan berbagai resolusi dan kedalaman warna, telepon selular, perangkat tangan manusia, perangkat untuk pidato untuk output dan input, komputer dengan bandwidth yang tinggi atau rendah, dan seterusnya. <br></br>XHTML merupakan singkatan dari eXtensible HyperText Markup Language. XHTML merupakan bentuk reformulasi dari HTML menggunakan paradigma XML XHTML adalah bahasa markup penerus dan pengembangan dari HTML yang memiliki kemampuan yang kurang lebih mirip HTML, tapi dengan aturan sintaks yang lebih ketat. HTML merupakan aplikasi dari SGML (Standard Generalized Markup Language) yang sangat fleksibel, sedangkan XHTML adalah aplikasi dari XML, turunan SGML yang lebih terbatas.Karena XHTML harus memiliki keteraturan-bentuk (mengikuti sintaks yang tepat), dokumen XHTML dapat diproses otomatis dengan menggunakan standar pemroses XML – tidak seperti HTML yang membutuhkan pemroses yang cukup sulit dan kompleks. XHTML dapat dianggap sebagai perpaduan antara HTML dan XML karena merupakan formulasi ulang HTML dalam bentuk XML. XHTML 1.0 telah menjadi rekomendasi W3C atau World Wide Web Consortium pada tanggal 26 Januari 2000
<br><br>XHTML adalah sebuah kombinasi dari HTML dan XML (Extensible Markup Language) & merupakan bentuk sempurna (dalam arti, lebih ketat dan bersih dibandingkan HTML). Tujuan XHTML adalah menggantikan HTML. XHTML adalah bentuk HTML yang didefinisikan sebagai aplikasi XML yang berarti XHTML berisi semua elemen dalam HTML 4.01 dikombinasikan dengan sintaks XML. XHTML adalah bahasa markup sebagaimana HTML, tetapi dengan gaya bahasa lebih baik. XHTML merupakan versi HTML yang memenuhi persyaratan XML dan merupakan sebuah dokumen HTML, dan XHTML menjadi standar internasional dengan spesifikasi yang ditetapkan oleh W3C (World Wide Web Consortium).
</p>
</td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”magenta”><center><b><marquee>Sekolah Tinggi Ilmu Komputer Indonesia – Jurusan Teknik Informatika – Konsentrasi Design Grafis & Multimedia</b></marquee></center></td>
</tr>
</table>
</body>
</html>
Tampilan :
PROFILE
<html>
<head>
<title>Diah Edogawa</title>
</head>
<body>
<center>
<table border=”0″ width=”1000″ height=”300″ cellspacing=”0″ cellpadding=”20″ margin=”1″>
<tr>
<td colspan=”2″ bgcolor=”pink” align=”center”>
<img src=”foto3.jpg” width=”1000″ height=”300″></td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”magenta” align=”center”>
<center><marquee><b>Ni Putu Diah Sumariani — Diah Edogawa</b></marquee></center></td>
</tr>
<tr>
<td width=”200″ height=”700″ bgcolor=”pink” valign=”top”>
<table width=”200″ border=”5″ bgcolor=”cyan” bordercolor=”green”>
<center>
<tr>
<th>DAFTAR MENU</th>
</tr>
<tr>
<td height=”30″><center><b><a href=”index.html”>Home</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”profile.html”>Profile</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”contact.html”>Contact</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”galery.html”>Galery</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”about.html”>About</a></center></td>
</tr>
</table>
</td>
<td width=”796″ height=”700″ bgcolor=”green” valign=”top” >
<p><b><center><blink>Profile</blink></center></b></p><br>
<table>
<tr>
<td>Nama</td>
<td>:</td>
<td>Ni Putu Diah Sumariani</td>
</tr>
<tr>
<td>NIM</td>
<td>:</td>
<td>09101298</td>
</tr>
<tr>
<td>Jurusan</td>
<td>:</td>
<td>Teknik Informatika – Design Grafis & Multimedia</td>
</tr>
<tr>
<td>Tgl Lahir</td>
<td>:</td>
<td>19 Februari 1989</td>
</tr>
<td>Zodiac</td>
<td>:</td>
<td>Pisces</td>
</tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td>Perempuan</td>
</tr>
<td>Hoby</td>
<td>:</td>
<td>Membaca apa saja yang bisa dibaca</td>
</tr>
<td>Photo</td>
<td>:</td>
<td>
<img alt=”diah” title=”diah” src=”diah.jpg” width=”336px” height=”347px”>
</td>
</table>
</tr>
<tr>
<td colspan=”2″ bgcolor=”magenta”><center><b><marquee>Sekolah Tinggi Ilmu Komputer Indonesia – Jurusan Teknik Informatika – Konsentrasi Design Grafis & Multimedia</b></marquee></center></td>
</tr>
</table>
</body>
</html>
Tampilan :
CONTACT
<html>
<head>
<title>Diah Edogawa</title>
</head>
<body>
<center>
<table border=”0″ width=”1000″ height=”300″ cellspacing=”0″ cellpadding=”20″ margin=”1″>
<tr>
<td colspan=”2″ bgcolor=”pink” align=”center”>
<img src=”foto3.jpg” width=”1000″ height=”300″></td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”magenta” align=”center”>
<center><marquee><b>Ni Putu Diah Sumariani — Diah Edogawa</b></marquee></center></td>
</tr>
<tr>
<td width=”200″ height=”700″ bgcolor=”pink” valign=”top”>
<table width=”200″ border=”5″ bgcolor=”cyan” bordercolor=”green”>
<center>
<tr>
<th>DAFTAR MENU</th>
</tr>
<tr>
<td height=”30″><center><b><a href=”index.html”>Home</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”profile.html”>Profile</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”contact.html”>Contact</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”galery.html”>Galery</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”about.html”>About</a></center></td>
</tr>
</table>
</td>
<td width=”796″ height=”auto” bgcolor=”green” valign=”top” >
<p><b><center><blink>Contact</blink></center></b></p><br>
<table>
<tr>
<td>Nama</td>
<td>:</td>
<td>Ni Putu Diah Sumariani</td>
</tr>
<tr>
<td>a.k.a</td>
<td>:</td>
<td>Diah Edogawa</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>Sukawati, Gianyar, Bali </td>
</tr>
<tr>
<td>No Hp</td>
<td>:</td>
<td>081999756xxx</td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td>diah.edogawa@gmail.com <br>
diah192@yahoo.com</td>
</tr>
<tr>
<td>Facebook</td>
<td>:</td>
<td><a href=”http://www.facebook.com/diah.edogawa”>http://www.facebook.com/diah.edogawa</a></td>
</tr>
<tr>
<td>Twitter</td>
<td>:</td>
<td><a href=”http://www.twitter.com/diah_edogawa”>http://www.twitter.com/diah_edogawa</a></td>
</tr>
<tr>
<td>Plurk</td>
<td>:</td>
<td><a href=”http://www.plurk.com/diah99″>http://www.plurk.com/diah99</a></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”magenta”><center><b><marquee>Sekolah Tinggi Ilmu Komputer Indonesia – Jurusan Teknik Informatika – Konsentrasi Design Grafis & Multimedia</b></marquee></center></td>
</tr>
</table>
</body>
</html>
Tampilan :
GALERY
<html>
<head>
<title>Diah Edogawa</title>
</head>
<body>
<center>
<table border=”0″ width=”1000″ height=”300″ cellspacing=”0″ cellpadding=”20″ margin=”1″>
<tr>
<td colspan=”2″ bgcolor=”pink” align=”center”>
<img src=”foto3.jpg” width=”1000″ height=”300″></td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”magenta” align=”center”>
<center><marquee><b>Ni Putu Diah Sumariani — Diah Edogawa</b></marquee></center></td>
</tr>
<tr>
<td width=”200″ height=”700″ bgcolor=”pink” valign=”top”>
<table width=”200″ border=”5″ bgcolor=”cyan” bordercolor=”green”>
<center>
<tr><th>DAFTAR MENU</th></tr>
<tr>
<td height=”30″><center><b><a href=”index.html”>Home</a></center></td></tr>
<tr>
<td height=”30″><center><b><a href=”profile.html”>Profile</a></center></td></tr>
<tr>
<td height=”30″><center><b><a href=”contact.html”>Contact</a></center></td></tr>
<tr>
<td height=”30″><center><b><a href=”galery.html”>Galery</a></center></td></tr>
<tr>
<td height=”30″><center><b><a href=”about.html”>About</a></center></td></tr>
</table>
</td>
<td width=”796″ height=”700″ bgcolor=”green” valign=”top” >
<p><b><center><blink>Galery Photo</blink></center></b></p><br>
<table>
<tr><td><img src=”foto9.jpg”></td> </tr>
<tr><td><img src=”foto8.jpg”></td> </tr>
<tr><td><img src=”foto4.jpg”></td> </tr>
<tr><td><img src=”foto7.jpg”></td> </tr>
</table>
</td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”magenta”><center><b><marquee>Sekolah Tinggi Ilmu Komputer Indonesia – Jurusan Teknik Informatika – Konsentrasi Design Grafis & Multimedia</b></marquee></center></td>
</tr>
</table>
</body>
</html>
Tampilan :
ABOUT
<html>
<head>
<title>Diah Edogawa</title>
</head>
<body>
<center>
<table border=”0″ width=”1000″ height=”300″ cellspacing=”0″ cellpadding=”20″ margin=”1″>
<tr>
<td colspan=”2″ bgcolor=”pink” align=”center”>
<img src=”foto3.jpg” width=”1000″ height=”300″></td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”magenta” align=”center”>
<center><marquee><b>Ni Putu Diah Sumariani — Diah Edogawa</b></marquee></center></td>
</tr>
<tr>
<td width=”200″ height=”700″ bgcolor=”pink” valign=”top”>
<table width=”200″ border=”5″ bgcolor=”cyan” bordercolor=”green”>
<center>
<tr><th>DAFTAR MENU</th></tr>
<tr>
<td height=”30″><center><b><a href=”index.html”>Home</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”profile.html”>Profile</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”contact.html”>Contact</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”galery.html”>Galery</a></center></td>
</tr>
<tr>
<td height=”30″><center><b><a href=”about.html”>About</a></center></td>
</tr>
</table>
</td>
<td width=”796″ height=”700″ bgcolor=”green” valign=”top” >
<p><b><center><blink>Perhatian!!!</blink></center></b></p><br>
<p align=”justify”>Web ini fiktif belaka. Web ini dibuat hanya untuk kepentingan tugas semata. Apabila terdapat kesamaan nama, tokoh, serta alur cerita, itu hanyalah kebetulan belaka<br>
</p>
</td>
</tr>
<tr>
<td colspan=”2″ bgcolor=”magenta”><center><b><marquee>Sekolah Tinggi Ilmu Komputer Indonesia – Jurusan Teknik Informatika – Konsentrasi Design Grafis & Multimedia</b></marquee></center></td>
</tr>
</table>
</body>
</html>
Tampilan :
Diah Edogawa 