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.Berdasarkan kata-kata penyusunnya HTML dapat diartikan lebih dalam lagi menjadi :

Format HTML

File-file HTML dapat ditampilkan sesuai dengan keinginan kita seperti pada contoh-contoh sebelumnya adalah karena terdapat marker yang diimplementasikan dalam bentuk tag-tag HTML. Secara umum format tag HTML tersebut dapat dituliskan sebagai berikut:

<TAG>Teks yang akan dipengaruhi oleh tag</TAG>

Sebagai contoh kalau kita akan membuat tulisan dalam format tebal maka yang harus kita tuliskan dalam file HTML adalah:

<B>Tulisan yang tercetak tebal</B>

Tanda slash (/) menunjukkan akhir dari suatu tag, akan tetapi ada juga beberapa tag HTML yang tidak memerlukan pasangan akhirannya ini. Tag yang paling dasar yang digunakan dalam file HTML adalah <HTML> dan </HTML>. Kedua tag ini berfungsi untuk mendefinisikan bahwa teks yang terdapat di antara kedua tag tersebut adalah dalam format HTML.

<HTML>

      Teks

      </HTML>

Untuk mendefinisikan head,  kita dapat menambahkan tag <HEAD> dan </HEAD>  setelah penggunaan tag <HTML> sedemikian hingga struktur page menjadi :

      <HTML>

      <HEAD>

      </HEAD>

      </HTML>

Sedangkan bagian body adalah tempat dimana kita dapat menempatkan teks dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada web page. Bagian ini dapat didefinisikan dengan meletakkan tag <BODY> dan </BODY> di antara teks yang akan kita tampilkan. Kedua tag ini diletakkan sesudah tag </HEAD>, sehingga struktur dasar sebuah page dapat dituliskan sebagai :

<HTML>

      <HEAD>

      </HEAD>

      <BODY>

      </BODY>

      </HTML>

Untuk mendefinisikan judul page (title) maka kita dapat melakukannya dengan meletakkan naskah judul di antara tag <TITLE> dan </TITLE>.  Judul ini akan ditampilkan pada title bar web brower Misalkan kita akan membuat sebuah page dengan judul “Latihan HTML” maka kita harus menambahkan:

<TITLE>Latihan HTML</TITLE>

Perhatikan bahwa tag <TITLE> dan </TITLE> ini harus diletakkan pada bagian head, sehingga dokumen HTML dasar kita menjadi:

<HTML>

      <HEAD>

      <TITLE>Latihan HTML</TITLE>

      </HEAD>

      <BODY>

      Teks yang akan ditampilkan pada bagian body

</BODY>

      </HTML>

Pada file HTML, karakter carriage returns (Enter) diabaikan, sehingga untuk membuat atau mendefinisikan naskah dalam bentuk paragraf harus ditambahkan tag khusus yakni <P>. Sebagai contoh kita dapat menampilkan beberapa paragraf sekaligus dalam satu dokumen HTML.

       <HTML>

      <HEAD>

      <TITLE>Latihan HTML</HTML>

      </HEAD>

      <BODY>

      Teks yang akan ditampilkan pada bagian body

      <P>Paragraf satu </P>

      <P>Paragraf dua </P>

      </BODY>

      </HTML>

 

Kumpulan Tag HTML

<!–    –> Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser
<a href> Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
<a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
<applet> Sebagai awal dari Java applets
<area> Mendefinisikan daerah yang dapat diklik (link) pada image map
<b> Membuat teks tebal
<basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font
<bgsound> Memberi (suara latar) background sound pada halaman web
<big> Memperbesar ukuran teks sebesar satu point dari defaultnya
<blink> Membuat teks berkedip
<body> Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
<br> Pindah baris
<caption> Membuat caption pada tabel
<center> Untuk perataan tengah terhadap teks atau gambar
<comment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
<dd> Indents teks
<div> Represents different sections of text.
Menambahkan sound or file avi ke halaman web
<fn> Seperti tag <a name>
<font> Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
<form> Mendefinisikan input form
<frame> Mendefinisikan frame
<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame
<h1> … <h6> Ukuran font
<head> Mendefinisikan head document.
<hr> Membuat garis horizontal
<html> Bararti dokumen html
<i> Membuat teks miring
<img> Image, imagemap atau animation
<input> Mendefinisikan input field pada form
<li> Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )
<map> Mendefinisikan client-side map
<marquee> Membuat scrolling teks (teks berjalan) – hanya pada MS IE
<nobr> Mencegah ganti baris pada teks atau images
<noframes> Jika browser user tidak mendukung frame
<ol> Mendefinisikan awal dan akhir list
<p> Ganti paragraf
<pre> Membuat teks dengan ukuran huruf yg sama
<script> Mendefinisikan awal script
<table> Membuat tabel
<td> Kolom pada tabel
<title> Mendefinisikan title
<tr> Baris pada tabel
<u> Membuat teks bergaris bawah

LISTING PROGRAM

<html>

<head>

<title> taeyeon.com</title>

</head>

<body>

<h1 style=”text-align:center;font-family:fantasy;color:white;background-color:black”>Taeyeon’s World</h1>

<img src=”taeng.jpg” alt=”Taeyeon” />

<marquee align=”center” direction=”right” scrollamount=”2″ > Taeyeon Official Website </marquee>

<p style=”font-family:times;color:white;background-color:black;”>

<a href=”http://www.taeyeon.com&#8221; target=”_blank”>

|HOME|</a>

<a href=”http://www.taeyeon.com/profil&#8221; target=”_blank”>

|PROFIL|</a>

<a href=”http://www.taeyeon.com/music&#8221; target=”_blank”>

|MUSIC|</a>

<a href=”http://www.taeyeon.com/video&#8221; target=”_blank”>

|VIDEO|</a>

<a href=”http://www.taeyeon.com/about&#8221; target=”_blank”>

|ABOUT|</a></p>

<img src=”taeng2.jpg” width=”180″ height=”180″ alt=”KimTaeyeon” /><h4>Profile <u>Taeyeon :</u></h4>

<ol>

<li>Stage Name: Tae Yeon</li>

<li>Real Name: Kim Tae Yeon</li>

<li>Nicknames: Taeng, Umma, Ajumma, Kid Leader</li>

<li>Birthday: March 9, 1989</li>

<li>Age:19</li>

<li>Height:1.62m</li>

<li>Weight: 44kg</li>

<li>Blood Type: O</li>

<li>Group: So Nyuh Shi Dae / Girls’ Generation</li>

<li>Position: Leader, Main Vocalist</li>

<li>Specialty: Chinese, Swimming</li>

<li>Homeplace: Jeonrado Jeonju</li>

<li>School: Jeonju Art High School, Graduated</li>

</ol>

</body>

</html>

PENJELASAN PROGRAM

Untuk mendefinisikan judul page (title) maka kita dapat melakukannya dengan meletakkan naskah judul di antara tag <TITLE> dan </TITLE>.  Judul ini akan ditampilkan pada title bar web browser. Disini dibuat sebuah page dengan judul “taeyeon.com”. Untuk mendefinisikan head,  kita dapat menambahkan tag <HEAD> dan </HEAD>  setelah penggunaan tag <HTML>. Sedangkan bagian body adalah tempat dimana kita dapat menempatkan teks dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada web page. Bagian ini dapat didefinisikan dengan meletakkan tag <BODY> dan </BODY> di antara teks yang akan kita tampilkan. Kedua tag ini diletakkan sesudah tag </HEAD>.

Tag <h1> digunakan untuk memberikan ukuran font level 1 (paling besar). Tag <img> digunakan untuk menambahkan gambar, diikuti dengan src untuk menunjukkan sumber gambar, sedangkan alt digunakan untuk menampilkan teks jika gambar tidak muncul di halaman web. Untuk mengatur tinggi dan lebar gambar bisa menggunakan perintah height untuk panjang gambar, dan width untuk lebar gambarnya. Tag <marquee> digunakan untuk membuat teks berjalan. Tag ini memiliki beberapa atribut, yaitu “direction” untuk mengatur arah gerakan teks (dari kiri ke kanan/sebaliknya), “scrollamount” untuk mengatur kecepatan gerakan dalam satuan pixel. Pada file HTML, karakter carriage returns (Enter) diabaikan, sehingga untuk membuat atau mendefinisikan naskah dalam bentuk paragraf harus ditambahkan tag khusus yakni <p>.

Selanjutnya, tag <a href> digunakan untuk membuat link ke halaman lain atau ke bagian lain dari halaman tersebut. Disini terdapat 5 link yang masing-masing menuju ke linknya masing-masing. Tag<u> digunakan untuk membuat teks bergaris bawah. Tag <ol> digunakan untuk membuat Ordered List atau list yang disusun beraturan. Di dalam tag <ol> ini terdapat item-item yang dimaksud dimana penulisan list item  tersebut menggunakan tag <li>.

OUTPUT PROGRAM