Memulai Dengan HTML part.1


5 September 2012

Pada dasarnya HTML merupakan bahasa pengatur format tampilan yang ditampilkan pada browser. seperti yang sering kali kita jumpai pada setiap halaman web. HTML inilah yang mengatur jelek atau bagusnya tampilan web ketika ditampilkan dalam web browser hehehe…

Sebagai bahan perkenalan awal, walaupun sebelumnya saya udah posting2 juga perihal pembahasan HTML J, namun kali ini akan dimulai dan dibahas lebih detail dan terperinci ciee illaaahhh…..!!

Oia sekedar mengingatkan klo HTML ini singkatan dari Hyper Text Mark-up Language
yang dikembangkan oleh Tim Berners Lee.

Struktur HTML

Dibawah ini merupakan struktur bahasa yang harus diikuti agar web browser bisa menampilkan isi dari apa yang anda buat dalam file HTML tersebut.

  1. <html>
  2. <head>
  3. <title> </title>
  4. </head>
  5. <body>
  6. </body>
  7. </html>

Tag <html> menunjukan kepada web browser bahwa script tersebut merupakan bahasa HTML, dan semua yang ditampilkan di dalam web browser (isinya) harus diletakkan diantara tag<body> dan </body>. Sedangkan tag <head> digunakan untuk memasukan judul dari halaman web yang akan kita buat dan diletakkan diantara tag <title> dan </title>.

Contoh:

  • Kita akan membuat HTML yang berisi “Hello Android …!” dengan judul di title bar dibuat dengan nama “Contoh.1

  1. <html>
  2. <head>
  3. <title>Contoh.1</title>
  4. </head>
  5. <body>
  6. Hello Android …!
  7. </body>
  8. </html>

Simpan file tersebut, misalnya dengan nama “tes.html” dan berikut adalah hasilnya setelah dijalankan di web browser…. terreeeennngggg !!

Selamat mencoba ! JJJ

membuat kalkulator sederhana menggunakan HTML



<html>
<head>
<title>Kalkulator Online</title>
<script>
function hitung(angka1,angka2,operator)
{
var hasil;
if (operator==”tambah”){
hasil = parseInt(angka1) + parseInt(angka2);
}else if(operator==”kurang”){
hasil = parseInt(angka1) – parseInt(angka2);
}else if(operator==”kali”){
hasil = parseInt(angka1) * parseInt(angka2);
}else if(operator==”bagi”){
hasil = parseInt(angka1) / parseInt(angka2);
}
document.getElementById(“hasil”).innerHTML = “<b>” +hasil+ “</b>”;
return false;
}
</script>
</head>
<body>
<form name=”form1″ method=”post” action=”hitung.php” onsubmit=”return hitung
(form1.angka.value,form1.angka2.value,form1.operator.value);”>
<table align=”center” width=”28%” border=”5″ bgcolor=”lime”>
<tr>
<td align=”center”>
<h1><center><u>Online Calculator</u></center></h1>
<h3>
Bilangan 1<input name=”angka” type=”text” id=”angka”><br>
<center><select name=”operator” id=”operator”>
<option value=”tambah”>+</option>
<option value=”kurang”>-</option>
<option value=”kali”>*</option>
<option value=”bagi”>/</option>
</select></center>Bilangan 2<input name=”angka2″ type=”text” id=”angka2″><br>
<center><input type=”submit” name=”Submit” value=”Hitung”></center><div style=”float:left;”>- Hasil :</div><br>
<div id=”hasil”></div>
</h3>
<marquee><h6>Kalkulator Online dengan operator Aritmatika</h6></marquee>
</td>
</tr>
</table>
</form>
</body>
</html>

berikut adalah hasil nya…

Kalkulator Online

Update Terbaru Tag-Tag HTML 5


Berikut Tag-Tag dalam Html5

 

Tag

Deskripsi

<!–…–>

mendefinisikan komentar

<!DOCTYPE>

mendefinisikan jenis document

<a>

mendefinisikan hyperlink

<abbr>

mendefinisikan ringkasan/singkatan

<acronym>

tidak di dukung di html5

<address>

mendefinisikan alamat

<applet>

tidak di dukung di html5

<area>

mendefinisikan area

<article>New

mendefinisikan artikel

<aside>New

mendefinisikan content selain content halaman

<audio>New

mendefinisikan audio

<b>

mendefinisikan text tebal

<base>

mendefinisikan url dasar untuk semua link pada halaman

<basefont>

tidak di dukung di html5

<bdo>

mendefinisikan arah tampilan text

<big>

tidak di dukung di html5

<blockquote>

mendefinisikan kutipan

<body>

mendefinisikan element body

<br>

mendefinisikan baris baru

<button>

mendefinisikan document button/tombol

<canvas>New

Mendefinisikan Document grafis

<caption>

mendefinisikan document table caption

<center>

tidak di dukung di html5

<cite>

mendefinisikan kutipan

<code>

mendefinisikan text kode komputer

<col>

mendefinisikan atribut untuk kolom table

<colgroup>

mendefinisikan kolom table

<command>New

mendefinisikan perintah tombol

<datalist>New

mendefinisikan dropdown list

<dd>

mendefinisikan definisi deskripsi

<del>

mendefinisikan text yang di hapus

<details>New

mendefinisikan suatu elemen

<dialog>New

mendefinisikan dialog (conversation)

<dfn>

mendefinisikan definition term

<dir>

tidak di dukung di html5

<div>

mendefinisikan bagian dalam suatu document

<dl>

mendefinisikan daftar

<dt>

mendefinisikan istilah

<em>

mendefinisikan text rapat

New

mendefinisikan external content

<fieldset>

mendefinisikan fieldset

<figure>New

mendefinisikan isi media, dan keterangan

<font>

tidak di dukung di html5

<footer>New

mendefinisikan bagian footer

<form>

mendefinisikan formulir

<frame>

tidak di dukung di html5

<frameset>

tidak di dukung di html5

<h1> sampai <h6>

mendefinisikan header

<head>

mendefinisikan informasi tentang document

<header>New

mendefinisikan sebuah header untuk bagian suatu halaman

<hgroup>New

mendefinisikan informasi tentang bagian sebuah document

<hr>

mendefinisikan garis horisontal

<html>

mendefinisikan document html

<i>

mendefinisikan text italic

<iframe>

mendefinisikan inline sub frame

<img>

mendefinisikan gambar

<input>

mendefinisikan input

<ins>

mendefinisikan text yang disisipkan

<keygen>New

mendefinisikan sebuah kunci yang dihasilkan dalam bentuk

<kbd>

mendefinisikan text keyboard

<label>

mendefinisikana label untuk form

<legend>

mendefinisikan judul di fieldset

<li>

mendefinisikan list

<link>

mendefinisikan refrensi sumber

<map>

mendefinisikan peta gambar

<mark>New

mendefinisikan text yang ditandai

<menu>

mendefinisikan daftar menu

<meta>

mendefinisikan meta information

<meter>New

mendefinisikan ukuran yang sudah di tetapkan

<nav>New

mendefinisikan navigation link

<noframes>

tidak di dukung di html5

<noscript>

mendefinisikan bagian noscript

<object>

mendefinisikan sebuah object

<ol>

mendefinisikan daftar angka

<optgroup>

mendefinisikan grup pilhan

<option>

mendefinisikan drop-down option

<output>New

mendefinisikan beberapa jenis output

<p>

mendefinisikan paragraph

<param>

mendefinisikanparameter untuk sebuah objeck

<pre>

mendefinisikan text ke format awal

<progress>New

mendefinisikan kemajuan suatu tugas apapun

<q>

mendefinisikan kutipan pendek

<rp>New

digunakan untuk menentukan apakah browser mendukung ruby

<rt>New

menjelaskan tentanf penngunaan ruby

<ruby>New

mendefinisikan ruby annotations.

<s>

tidak di dukung di html5

<samp>

mendefinisikan sample computer code

<script>

mendefinisikan script

<section>New

mendefinisikan section

<select>

mendefinisikan selectable list

<small>

mendefinisikan text kecil

<source>New

mendefinisikan media resources

<span>

mendefinisikan bagian dalam sebuah document

<strike>

tidak di dukung di html5

<strong>

mendefinisikan text pekat/tebal

<style>

mendefinisikan style untuk css

<sub>

mendefinisikan subscripted text lawan pangkat

<sup>

mendefinisikan superscripted text pangkat

<table>

mendefinisikan table

<tbody>

mendefinisikan table body

<td>

mendefinisikan table cell

<textarea>

mendefinisikan text area

<tfoot>

mendefinisikan table footer

<th>

mendefinisikan table header

<thead>

mendefinisikan table header

<time>New

mendefinisikan date/time

<title>

mendefinisikan judul document

<tr>

mendefinisikan baris table

<tt>

tidak di dukung di html5

<u>

tidak di dukung di html5

<ul>

mendefinisikan daftar

<var>

mendefinisikan variable

<video>New

mendefinisikan video

<xmp>

tidak di dukung di html5

 

 

  • Tag-tag diatas bersumber dari w3school.com
  • Yang di beri tanda merah adalah tag baru(hanya di html5), dimana tag tadi tidak ada di html 4
  • Tag-tag baru tadi belum support di semua browser
  • Yang di beri warna biru adalah tag html yang tidak support di html5

Contoh Penggunaan HTML untuk pembuatan Teks Berjalan(Marquee)





setiadyagung@gmail.com


<html>
<body>
<h3 align=center>
<marquee bgcolor=”green” width=”50%”>A Dramatic Turn Of Events</marquee>
<marquee height=”50px”>Black Clouds & Silver Linings</marquee>
<marquee direction=”left”>Systematic Chaos</marquee>
<marquee direction=”right”>Octavarium</marquee>
<marquee direction=”up”>Train Of Thought</marquee>
<marquee direction=”down”>Six Degrees Of Inner Turbulence</marquee>
<marquee behavior=”scroll”>A Change Of Seasons</marquee>
<marquee behavior=”slide”>Falling Into Infinity</marquee>
<marquee behavior=”alternate”>Awake</marquee>
<marquee>Text atau Gambar Disini</marquee> tanpa scrollamount
<marquee scrollamount=”15″>Images & Words</marquee>
<marquee scrollamount=”50″>When Dream And Day Unite</marquee>
<marquee>Text atau Gambar Disini</marquee> tanpa scrolldelay
<marquee scrolldelay=”300″>Suspended Animation</marquee>
<marquee scrollamount=”600″>JP XI</marquee>
<marquee>Text atau Gambar Disini</marquee> tanpa bgcolor
<marquee bgcolor=”green”>Liquid Tension Experiment</marquee>
</h3>
<marquee loop=”2″>Text atau Gambar Disini</marquee>
<marquee loop=”2″ behavior=”alternate”>Text atau Gambar Disini</marquee>
<marquee loop=”2″ behavior=”slide”>Text atau Gambar Disini</marquee>
Paragraph
<marquee hspace=”10″ bgcolor=”yellow”>Ini contoh hspace</marquee>
Paragraph
Paragraph
<marquee vspace=”30″ bgcolor=”yellow”>ini contoh vspace</marquee>
Paragraph
</body>
</html>

Scipt HTML diatas apabila di jalankan akan memperoleh tampilan di web seperti di bawah ini…


A Dramatic Turn Of Events
Black Clouds & Silver Linings
Systematic Chaos
Octavarium
Train Of Thought
Six Degrees Of Inner Turbulence
A Change Of Seasons
Falling Into Infinity
Awake
Text atau Gambar Disini tanpa scrollamount
Images & Words
When Dream And Day Unite
Text atau Gambar Disini tanpa scrolldelay
Suspended Animation
JP XI
Text atau Gambar Disini tanpa bgcolor
Liquid Tension Experiment

Text atau Gambar Disini
Text atau Gambar Disini
Text atau Gambar Disini
Paragraph
Ini contoh hspace
Paragraph
Paragraph
ini contoh vspace
Paragraph

Pengenalan HTML


           
setiadyagung@gmail.com
 

              HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

  1. Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Langiage, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.
  2. Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi ( ISO 8879 ) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML ( Standard Generalized Markup Language ).

ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.

Pendahuluan

HTML berupa kode-kode tag yang menginstruksikan penjelajah web untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan penjelajah web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka surel ataupun dari PDA dan perangkat lunak lain yang memiliki kemampuan browser. Dengan menggunakan perintah-perintah HTML memungkinkan pengguna untuk melakukan tugas-tugas berikut:

  • Menentukan ukuran dan alur tulisan.
  • Mengintegerasikan gambar dengan tulisan.
  • Membuat Pranala.
  • Mengintegerasikan berkas suara dan rekaman gambar hidup.
  • Membuat form interaktif.

HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b>TAMPIL TEBAL</b>. Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan formating di dalam halaman web daripada menentukan penampilannya.Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web. Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis Windows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan Pranala.

Menyunting Format Tulisan

HTML memungkinkan kita untuk menyunting tampilan atau format berkas yang akan kita kirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah :

  • Kita dapat menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
  • Kita dapat menampilkan tulisan dalam bentuk cetakan tebal
  • Kita dapat menampilkan sekelompok kata dalam bentuk miring
  • Kita dapat menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
  • Kita dapat mengubah-ubah ukuran tulisan untuk suatu karakter tertentu