Tugas 1: Pengertian dan Contoh HTML

07 March 2013 19:46:02 Dibaca : 37

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/

 

Kategori

  • Masih Kosong

Arsip

Blogroll

  • Masih Kosong