Welcome - GarelliaPahlevi.Blogspot.COM


 





Pengenalan HTML (HYPER TEXT MARKUP LANGUANGE)

HTML merupakan standard bahasa dalam pembuatan suatu halaman web yang terdiri dari code singkat yang berupa text..
Pembuatan code HTML dapat dilakukan di
v  ADOBE DREAMWEAVER
v  MICROSOFT EXPRESSION WEB
v  COFFECUP HTML EDITOR

Tapi disini kita akan belajar HTML dengan menggunakan program text editor biasa, seperti NOTEPAD. Disarankan NOTEPAD ++
BASIC PENULISAN HTML adalah sebagai berikut :
<HTML>
<HEAD>
<TITLE> HELLO HTML </TITLE>
</HEAD>
<BODY>
<H1>Ini Adalah Heading </H1>
<P> Ini Adalah Paragraf </P>
<P> Ini Adalah Paragraf Lainnya </P>
</BODY>
</HTML>

Perintah didalam dokumen HTML terdiri dari berbagai struktur penyusun seperti TAG, ELEMEN, ATRIBUT dan NILAI.
Element HTML mempunyai tiga hal penting yaitu :
ü  TAG PEMBUKA,
ü  ISI,
ü  TAG PENUTUP.

CONTOH element HTML mempunyai TAG PEMBUKA <HTML> dan TAG PENUTUP </HTML> dan yang berada diantaranya merupakan ISI dari element HTML, seperti contoh code diatas.

Element HTML kemudian ada yang memiliki atribut dan nilai tertentu, CONTOH untuk membuat latar belakang (Background) : <BODY BGCOLOR="0000FF">
Ø  BODY merupakan ELEMEN,
Ø  BGCOLOR adalah ATRIBUT dan
Ø  0000FF merupakan NILAI (VALUE).

Untuk menuliskan element HTML bisa menggunakan huruf besar maupun huruf kecil dan untuk extention file adalah HTML atau HTM

Pastekan code yang saya sertakan pada NOTEPAD++ . simpan dengan TERSERAH.HTM atau kalian bisa mencoba TRY EDITOR yang saya sertakan dihalaman ini.

KETERANGAN
TAG <HTML> Merupakan awal dari suatu dokumen HTML, dan TAG </HTML> merupakan akhir dari dokumen HTML. ISI keseluruhan dari suatu dokumen HTML selalu berada diantara TAG <HTML> dan </HTML>.

TAG <HEAD> dan </HEAD> (HEADER) adalah informasi dari dokument HTML. Informasi didalam HEADER meliputi :
 TITLE,META,STYLE,SCRIPT DLL.

Selain TITLE informasi didalam HEADER nantinya tidak akan ditampillkan di Web Browser.
TAG <TITLE> dan </TITLE> merupakan bagian dari HEAD, TAG ini adalah sebagai TITLE dari dokumen HTML, TITLE akan tampil di TITLE dan Tab Browser.

TAG <BODY> dan </BODY> merupakan isi dari suatu dokumen HTML yang akan ditampilkan di Web Browser, yang terdiri dari berbagai macam format file berupa TEXT, GRAFIK, LINK, ANIMASI MAUPUN AUDIO-VIDEO (MULTIMEDIA).

NAMA TAG ATRIBUT KETERANGAN
<B> Memberikan efek tebal pada teks yang terapit tag tersebut
<BR /> Digunakan untuk memberikan baris baru dalam dokumen HTML
<Hn> Singkatan dari Heading yang digunakan untuk mencetak judul sebuah dokumen sebesar nilai n=1 sampai dengan n=6
<HR /> Untuk membuat garis mendatar sepanjang layar browser
<I> Memberikan efek cetak miring pada teks
<P> Align Untuk mengatur paragraf dalam sebuah dokumen HTML. Nilai atribut Align adalah Left , Center dan Right
<PRE> Mencetak tulisan apa adanya sesuai yang ditampilkan pada tek editor
<U> Digunakan untuk efek cetak garis bawah

FONT

DEMO


Judul Menggunakan font verdana

Konten menggunakan font tahoma


Judul dengan ukuran 150%

Konten dengan ukuran 18px


Judul dengan warna Biru

Konten dengan warna merah

Ini adalah contoh tulisan pengaturan font dengan Cassading Style Sheets (CSS) yang
menggunakan tag HTML elemen style: font-family, font-size dan color...


Tag HTML untuk font adalah <FONT>,

tapi dengan adanya recomendasi dari World Web Consortium (W3C), Untuk HTML 4.0 keatas, tag <FONT> tidak dipergunakan lagi, sebagai gantinya dibuat tag <STYLE> atau disebut dengan Cassading Style Sheets (CSS).

Dengan CSS penggunaanya akan lebih kompleks dan lebih luas, karena dapat dikombinasikan dengan tag elemen-elemen lainnya di dalam dokumen HTML tersebut.
Berikut adalah contoh code penggunaan CSS pada Demo diatas,

<html>
<head>
</head>
<body>
<h1 style="font-family:verdana;">Judul Menggunakan font verdana</h1>
<p style="font-family:tahoma;">Konten menggunakan font tahoma</p> 
<h1 style="font-size:150%;">Judul dengan ukuran 150%</h1>
<p style="font-size:18px;">Konten dengan ukuran 18px</p>
<h1 style="color:blue;">Judul dengan warna Biru</h1>
<p style="color:red;">Konten dengan warna merah</p>
<p style="font-family:verdana;font-size:80%;color:green">
Ini adalah contoh tulisan pengaturan font dengan <i>Cassading Style Sheets</i> (CSS) yang<br />
menggunakan tag HTML elemen <b>style:</b> font-family, font-size dan color...</p>
</body>
</html>

ATRIBUT KETERANGAN
Font Mengatur semua properti font dalam satu deklarasi
Font-Family Menentukan jenis font untuk teks
Font-Size Menentukan ukuran font teks
Font-Style Menentukan gaya font untuk teks
Font-Varian Menentukan apakah atau tidak teks harus ditampilkan dalam huruf kecil-topi
Font-Weight Menentukan berat font

FRAMES

Frame digunakan untuk membagi sebuah halaman web menjadi beberapa bagian. Tag yang digunakan untuk pembuatan Frame adalah <FRAMESET>

Untuk membuat Frame dalam bentuk Kolom digunakan Atribut COLS.
Contoh : <frameset cols = ”30%,70%”>

Sedangkan untuk membuat Frame dalam bentuk Baris digunakan Atribut ROWS.
Contoh : <frameset rows = ”30%,70%”>

Kemudian dalam setiap Atribut ada yang namanya Nilai atau Value yang berfungsi untuk mengatur tinggi atau lebar dari sebuah frame dan biasanya diukur dengan satuan Persen (%)
Berikut contoh code-nya

<html>
<head>
</head>
<frameset rows= "30%, 70%">
<frame src= "frames2.html">
<frameset cols="30%, 70%">
<frame src= "frames1.html">
<frame src= "homepage.html" name="window1">
</frameset></frameset>
</html>
Untuk membagi sebuah halaman web kita tidak hanya bisa menggunakan FRAME tapi bisa juga dengan menggunakan Float CSS  berikut:
<html>
<head>
</head>
<body>
<div style="width:50%; float:left;">Halaman Sebelah Kiri</div>
<div style="width:50%; float:Left;">Halaman Sebelah Kanan</div> 
</body>
</html>

IMAGE

DEMO



Sebuah pesan dalam botol yang dilemparkan ke laut 76 tahun silam telah ditemukan dan kembali kepada pemiliknya. Surat berusia tua ini ditemukan di Selandia Baru. Botol dengan surat di dalamnya itu ditemukan oleh Geoff Flood, November lalu.

Surat ini ditandatangani oleh Herbert Ernest Hillbrick, pada 17 Maret 1936. Ia juga memasukkan nama dan alamat pada surat itu. Bersambung...

Untuk menyisipkan gambar pada document HTML digunakan Tag <IMG> .
Berikut code dari demo diatas,


<html>
<head>
</head>
<body>
<H3 ALIGN='CENTER' STYLE='FONT-SIZE:18PX'>DEMO</H3>

<IMG SRC='
http://cdn1.iconfinder.com/data/icons/Mysecret_10icons_by_Artdesigner/128/message_bottle.png' 
ALIGN='RIGHT' HSPACE='20' VSPACE='1' >

<P ALIGN='JUSTIFY'>
Sebuah pesan dalam botol yang dilemparkan ke laut 76 tahun silam telah ditemukan dan kembali 
kepada pemiliknya. Surat berusia tua ini ditemukan di Selandia Baru. Botol dengan surat di 
dalamnya itu ditemukan oleh Geoff Flood, November lalu. 
</P>

<P ALIGN='JUSTIFY'>
Surat ini ditandatangani oleh Herbert Ernest Hillbrick, pada 17 Maret 1936. Ia juga 
memasukkan nama dan alamat pada surat itu. Bersambung...
</P>
</body>
</html>

ATRIBUT NILAI KETERANGAN
SRC URL / Nama Gambar Menentukan lokasi dan nama gambar
Align Left | Middle | Left Mengatur Posisi Rata Gambar
Hspace n Mengatur jarak gambar dengan tulisan secara horizontal sejauh nilai n
Vpace n Mengatur jarak gambar dengan tulisan secara vertical sejauh nilai n
Width n Menentukan lebar gambar
Height n Menentukan tinggi gambar

LINK

DEMO


Mau tau cara membuat link? Klik Disini.
Bisa juga Klik Disini untuk membuka dengan jendela baru.

Halaman web yang kita buat bisa saling berhubungan antara yang satu dengan yang lainya dengan adanya fasilitas yang diberikan oleh link. Tag yang digunakan untuk pembuatan link adalah <A>
berikut, code dari demo link diatas,

<html>
<head>
</head>
<body>
<P>Mau tau cara membuat link?
<a href='http://grparticle.blogspot.com/2013/01/introduce-html-hyper-text-markup.html'>
Klik Disini.
</a></P>
<P>Bisa juga
<a Target='_blank' 
href='http://grparticle.blogspot.com/2013/01/introduce-html-hyper-text-markup.html'>
Klik Disini
</a> 
untuk membuka dengan jendela baru.
</P>
</body>
</html>

ATRIBUT NILAI KETERANGAN
Href URL / File Menentukan lokasi link
#namalokasi Nama lokasi link
Name Namalokasi Mendefinisikan nama lokasi link
Target _blank | _top Membuka jendela baru

FORM

DEMO
Guest Book / Buku Tamu


Nama             : 
Jenis Kelamin   :  Laki-Laki 
                        Perempuan 
Pendidikan      :      
Hobi               : Olah Raga  
                       Traveling  
                       Komputer 
                       Games  
                       Shoping  
                       Lain-Lain 
Komentar :   




Form dapat digunakan untuk mendapatkan informasi dari pengunjung web site Kita.
Tag yang digunakan untuk pembuatan form adalah <FORM>
Berikut, code dari demo diatas:


<html>
<head>
</head>
<body>
<H3 align='Center' style='font-size:18px;font-family:Tw Cen MT;'> DEMO <br /> Guest Book / Buku Tamu</H3>
<HR />
<FORM>
<PRE>
Nama            : <INPUT type="text" name="txtnama" />
Jenis Kelamin   : <INPUT type="radio"> Laki-Laki
                  </INPUT> <INPUT type="radio"> Perempuan </INPUT>
Pendidikan      : <SELECT>
                  <option>SD</option>
                  <option>SMP</option>
                  <option>SMU</option>
                  <option>D3</option>
                  <option>S1</option>
                  </SELECT>     
Hobi            : <INPUT type="checkbox">Olah Raga </INPUT>
                  <INPUT type="checkbox">Traveling </INPUT>
                  <INPUT type="checkbox">Komputer </INPUT>
                  <INPUT type="checkbox">Games </INPUT>
                  <INPUT type="checkbox">Shoping </INPUT>
                  <INPUT type="checkbox">Lain-Lain </INPUT>
Komentar :  
<TEXTAREA cols="20" row="12"></TEXTAREA>
<INPUT type="submit" value="Kirim" /><INPUT type="submit" value="Batal" />
</PRE>
</FORM>
<HR />
</body>
</html>

NAMA ATRIBUT KETERANGAN
Text name, value Untuk memasukkan nilai berupa angka atau huruf
Checkbox name, value Kotak isian yang dapat dipilih lebih dari satu
Radio name, value Untuk memasukkan nilai berupa pilihan tunggal
Textarea name, value Digunakan untuk memasukkan nilai dalam jumlah banyak
Select name Digunakan untuk membuat daftar pilihan
Option name, value Menentukan isi pilihan dalam daftar pilihan
Submit name, value Tombol perintah untuk pemrosesan data
Reset name, value Tombol perintah untuk membatalkan pemasukkan nilai elemen form

TABLE

<html>
<title> Membuat Table </title>
<body>
<p>Menggabungkan Baris dan Kolom Table</p>
<table border="1" width="100%">
<tr>
<td width="33%" rowspan="2" align="center">Bar Gabung</td>
<td width="67%" colspan="2" align="center">Kolom Gabung</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>

<p> Table dengan Cellpadding dan Cellspacing</p>
<table border="1" width="100%" cellpadding="10" cellspacing="15">
<tr>
<td width="33%" align="center">Satu</td>
<td width="67%" align="center">Dua</td>
</tr>
<tr>
<td align="center">Tiga</td>
<td align="center">Empat</td>
</tr>
</table>
</body>
</html>

Table digunakan untuk menampilkan informasi dalam bentuk kolom dan baris.
Taq <TR> digunakan untuk menentukan jumlah baris dalam sebuah tabel, sedangkan
Tag <TD> bertugas menentukan jumlah kolom table.
Copas code diatas di notepad atau tray editor di halaman ini untuk melihat hasil.


TAG ATRIBUT NILAI KETERANGAN
<TABLE> Border n Menentukan garis table
Width n Lebar table dinyatakan dengan angka atau persen
Cellspacing n Mengatur spasi antar sel dalam table
Cellpadding n Mengatur spasi teks dengan batas sel
Align/td> Left | Center | Right Digunakan untuk membuat daftar pilihan
Caption String Menentukan isi pilihan dalam daftar pilihan
Background Warna / Gambar Tombol perintah untuk pemrosesan data
<TH> Align Left | Center | Right Memberikan efek perataan isi sel secara Mendatar / Horizontal
<TR> VAlign Top | Middle | Bottom Memberikan efek perataan isi sel secara Vertical
<TD> Colspan n Untuk menggabungkan kolom
Rowspan n Untuk menggabungkan baris
Background Warna / Gambara Memberikan latar belakang sel
Nowrap Menon-aktifkan efek wraping isi table


Go Garage




  Coret Coretanku  
  None
  None
  None
  None
  None
  None
  None
  None
  None