Tugas 1: Pengertian dan Contoh HTML
1. PENGERTIAN HTML
HTML (HyperText Mark up Language) merupakan suatu metoda untuk mengimplementasikan konsep hypertext dalam suatu naskah atau dokumen. HTML sendiri bukan tergolong pada suatu bahasa pemrograman karena sifatnya yang hanya memberikan tanda (marking up) pada suatu naskah teks dan bukan sebagai program.
Pengertian HTML bila di jabarkan berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :
Hypertext
Link hypertext adalah kata atau frase yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskah-naskah lainnya. Jika kita klik pada kata atau frase untuk mengikuti link ini maka web browser akan memindahkan tampilan pada bagian lain dari naskah atau dokumen yang kita tuju.
Markup
Pada pengertiannya di sini markup menunjukkan bahwa pada file HTML berisi suatu intruksi tertentu yang dapat memberikan suatu format pada dokumen yang akan ditampilkan pada World Wide Web.
Language
Meski HTML sendiri bukan merupakan bahasa pemrograman, HTML merupakan kumpulan dari beberapa instruksi yang dapat digunakan untuk mengubah-ubah format suatu naskah atau dokumen.
Pada awalnya HTML dikembangkan sebagai subset SGML (Standard Generalized Mark-up Language). Karena HTML didedikasikan untuk ditransmisikan melalui media Internet, maka HTML relatif lebih sederhana daripada SGML yang lebih ditekankan pada format dokumen yang berorientasi pada aplikasi.
Apa yang dapat dilakukan dengan HTML ?
Memodifikasi format teks
Penggunaan HTML memungkinkan kita untuk memodifikasi tampilan atau format dokumen yang akan kita transmisikan melalui media Internet. Beberapa hal yang dapat dilakukan dalam menentukan format dokumen ini adalah :
Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.Kita dapat menampilkan teks dalam bentuk cetakan tebalKita dapat menampilkan sekelompok kata dalam bentuk miringKita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketikKita dapat mengubah-ubah ukuran font untuk suatu karakter tertentu.
Menampilkan daftar sesuatu dalam bentuk point-point (item)
Dengan HTML kita dapat menampilkan daftar atau deretan informasi dalam bentuk point-point sehingga lebih mudah dibaca dan dipahami Membuat link.
Konsep hypertext pada HTML memungkinkan kita untuk membuat link pada suatu kelompok kata atau frase untuk menuju ke bagian manapun dalam World Wide Web.
Ada tiga macam link yang dapat kita gunakan :
Link menuju bagian lain dari pageLink menuju page lain dalam satu web siteLink menuju resource atau web site yang berbeda
Menyisipkan citra
Dengan menyisipkan citra maka tampilan page kita akan lebih menarik, interaktif dan informatif untuk mendukung data-data lainnya dalam bentuk teks.
Menampilkan informasi dalam bentuk tabel
Penampilan informasi dalam bentuk tabel ini akan mempermudah pembaca untuk memahami informasi yang kita tawarkan. Penggunaan tabel ini juga dapat dilakukan untuk menambah nilai estetika dari page yang akan kita rancang.
Dengan memahami dasar-dasar dengan terlebih dahulu mengetahui Pengertian HTML | Pengenalan HTML di harapkan dapat berlanjut ketingkat selanjutnya dimana berhubungan dengan dunia website yang bersangkutan dengan webmaster sebagai struktur desainer sekaligus admin manajemennya.
2. CONTOH HTML
Kode HTML dasar yang digunakan untuk membuat sebuah halaman website adalah sebagai berikut:
<html>
<head>
<title>
ini adalah contoh title
</title>
</head>
<body>
ini adalah body html. body html adalah
tempat bersemayamnya segala tulisan,
gambar, dan informasi yang dibaca
oleh semua orang di internet.
secara umum, jika kita ingin menulis
apapun di situs kita, kita perlu
memasukkan tulisan tersebut
pada area body ini.
</body>
</html>
experimental/ecotree/contoh.html
<html>
<head>
<title>Contoh Organizational Chart</title>
<script type="text/javascript" src="ECOTree.js"></script>
<link rel="stylesheet" type="text/css" href="ECOTree.css"></link>
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style>v\:*{ behavior:url(#default#VML);}</style>
<style>
.copy {
font-family : "Verdana";
font-size : 10px;
color : #CCCCCC;
}
</style>
<script type="text/javascript">
//deklarasi variabel
var tree = null;
//function untuk membuat tree
function CreateTree(){
//config standar dalam membuat tree
tree = new ECOTree('t','contoh');
tree.config.iRootOrientation = ECOTree.RO_TOP;
tree.config.defaultNodeWidth = 150;
tree.config.defaultNodeHeight = 100;
tree.config.iSubtreeSeparation = 20;
tree.config.iSiblingSeparation = 10;
tree.config.useTarget = false;
tree.config.nodeFill = ECOTree.NF_GRADIENT;
tree.config.colorStyle = ECOTree.CS_LEVEL;
tree.config.levelColors = ["#966E00","#BC9400","#D9B100","#FFD700"];
tree.config.levelBorderColors = ["#FFD700","#D9B100","#BC9400","#966E00"];
tree.config.nodeColor = "#FFD700";
tree.config.nodeBorderColor = "#FFD700";
tree.config.linkColor = "#FFD700";
//akhir config
//script untuk menambah node
tree.add(1,-1,"Kebutuhan Manusia");
//node dengan induk yang ber-id = 1
tree.add(2,1,"Sandang");
tree.add(3,1,"Pangan");
tree.add(4,1,"Papan");
//node dengan induk yang ber-id = 2
tree.add(5,2,"Baju");
tree.add(6,2,"Jaket");
tree.add(7,2,"Celana");
//node dengan induk yang ber-id = 3
tree.add(8,3,"Makanan");
tree.add(9,3,"Minuman");
//node dengan induk yang ber-id = 4
tree.add(10,4,"Rumah");
tree.UpdateTree();
//akhir script penambahan node
}
</script>
</head>
<body onLoad = "CreateTree();">
<h3>Contoh Organizational Chart</h3>
<div id = "contoh">
</div>
</body>
</html>
Contoh html sederhana
<html>
<head>
<title>Sightseeing Ma Blog
</title>
</head><body bgcolor=”#87CEFA”>
<p><h1 align=”center”><font face=”Curlz mT, Juice ITC, Snap IT”>WELCOME TO MY HOMPEPAGE</font> ‘
</h1><br> <p></p><h2 align =”center”><font face=”Juice ITC”>Enjoy Your Visit</font></h2><p>
<marquee direction=”right” bgcolor=”#E0FFFF”>
<font color=”#FFB6CI” face=”Harry P, Curlz MT” Size=15″>
Draco Dormiens Nunquams Titillandus</font></marquee>
</p>
<p align=”center”>
Crated By : Emma Akai <br>
visit me @ my blog :<br>
<font face =”calibri, Times New Roman”>
<u>with99.tumblr.com</u><br>
<u>with99.multiply.com</u><br>
<u>with99.blogspot.com</u><br>
<u>with99.wordpress.com</u><br></font>
</p>
</body>
</html>
Sumber:
http://otakkacau.net/2011/07/27/pengertian-html-pengenalan-html/
http://blog.uad.ac.id/nurjuliansari/2012/06/26/contoh-html-dasar/
https://www.assembla.com/code/codetodiagram/subversion/nodes/experimental/ecotree/contoh.html
http://with99.wordpress.com/2012/03/03/contoh-html-sederhana/