Arief-Kun Collection: HTML (Hypertext Markup Language)

A. World Wide Web

Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia, TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi.

Dalam dunia internet kita sering mendengar kata WWW (World Wide Web) yang mempunyai definisi adalah salah satu fasilitas dimana kita dapat saling bertukar informasi di internet. Banyak orang berpendapat bahwa WWW adalah dunianya sedang internet adalah jaringannya. Protocol standard aturan yang di gunakan untuk berkomunikasi pada komputer networking, Hypertext Transfer Protocol (HTTP) adalah protokol untuk WWW.

WWW bekerja merdasarkan pada tiga mekanisme berikut:

· Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.

· Address WWW memiliki aturan penamaan alamat web yaitu URL (Uniform Resource Locator) yang di gunakan sebagai standard alamat internet.

· HTML digunakan untuk membuat document yang bisa di akses melalui web.

B. Pengenalan HTML

Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:

· Mengontrol tampilan dari web page dan contentnya.

· Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.

· Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara online.

· Menambahkan object-object seperti image, audi, video dan juga java applet dalam document HTML.

C. Browser dan Editor

Browser

Browser merupakan software yang di install di mesin client yang berfungsi untuk menterjemahkan tag-tag HTML menjadi halaman web. Browser yang sering di gunakan biasanya Internet Explorer, Netscape Navigator, Opera, Firefox dan masih banyak yang lainya.

Editor

Program yang di gunakan untuk membuat dokumen HTML, ada banyak HTML editor yang bisa anda gunakan diantaranya: Ms FrontPage, Dreamweaver, Notepad.

D. Tag-tag HTML

Command HTML atau yang biasanya disebut TAG, TAG digunakan untuk menentukan tampilan dari dokumen HTML.

Contoh:

Setiap dokumen HTML di awali dan di akhiri dengan tag HTML.

<HTML>

. . .

</HTML>

Tag tidak case sensitive, jadi bisa digunakan <HTML> atau <html> keduanya menghasilkan output yang sama. Bentuk dari tag HTML sebagai berikut:

Element = nama tag

Attribute = atribut dari tag

Value = nilai dari atribut.

Contoh:

BODY merupakan element, BGCOLOR (Background) merupakan atribut yang memiliki nilai lavender. Untuk memulai bekerja dengan HTML kita bisa gunakan editor Notepad atau editor lainya. Caranya:

1. Ketikkan tag-tag berikut di notepad.

<head>

<title>Belajar Web</title>

</head>

<center>LATIHAN WEBSITE</center>

</body>

</html>

2. Simpan dengan nama file perdana.htm atau perdana.html

3. Buka dengan browser internet explorer file perdana.htm atau perdana.html maka outputnya akan di tampilkan seperti gambar di bawah ini.

Struktur HTML Document.

Dokumen HTML bisa di bagi mejadi tiga bagian utama:

· HTML

Setiap dokumen HTML harus di awali dan di tutup dengan tag HTML <HTML> </HTML> tag HTML memberi tahu browser bahawa yang di dalam kedua tag tersebut adalah dokument HTML.

· HEAD

Bagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam bagian ini biasanya dimuat tag <TITLE> yang menampilkan judul dari halaman pada titlenya browser.

Header juga memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu mengenai document HTML, anda bisa menentukan author name, keywords, dan lainyan pada tag <META>.

Contoh :

Author dari document tersebut adalah “arek lamongan”

Atribut http-equiv dapat di gunkan untuk meletakkan nama HTTP Server atribut untuk menciptakan HTTP header.

Contoh :

yang akan menciptakan HTTP header :

Expires: Wed, 7 May 2003 20:30:40 GMT

Sehingga jika documents di cached, HTTP akan megetahui kapan untuk mengapdate document tersebut pada cache.

· BODY

Dokument body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.

Basic HTML Element

1. List Item(LI)

List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).

Ada tiga macam list yang bisa anda tambahkan ke dokument HTML:

1.1. Unordered List (Bullet) :

Ketikkan tag Unordered List (Bullet) di dalam tag <body></body> seperti pada contoh dibawah ini.

Contoh :

<ul>

</ul>

Tag	Attribute	Value	Description
<UL>	TYPE	SQUARE DISC CIRCLE	Bullet Kotak Bullet Titik Bullet Lingkaran

1.2. Ordered List (Numbering)

Ketikkan tag Ordered List (Numbering) di dalam tag <body></body> seperti pada contoh dibawah ini.

Contoh:

<li>Hari Pertama</li>

<li>Introduction to HTML</li>

</ol>

<li>Creating table</li>

</ol>

Tag	Attribute	Value	Description
<OL>	TYPE	I i A a	Upper Roman Lower Roman Upercase Lowercase
<OL>	START	N	Begin Number

1.3. Definition List

Definition List dinyatakan oleh tag <DL> … </DL> dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri.

Contoh:

<dl>

<dt>HTML

<dd>HyperText Markup Langguage</dd> </dt>

<dt>HTTP

<dd>HyperText Transfer Protocol</dd> </dt>

</dl>

2. Horizontal Rules(HR)

Horizontal Rule tag <HR />digunakan untuk menggambar garis horizontal dalam dokumen HTML. Ketikkan tag <HR /> di dalam tag <body></body> seperti pada contoh dibawah ini.

Contoh:

<hr />

Horizontal Rule tag digunakan untuk menggambar garis

horizontal dalam document HTML

Attribute	Description
Position	menetukan posisi dari HR, dengan value : center \| right \| left.
Width	Untuk menentukan panjang HR default 100%
Size	Untuk menentukan tebal dari HR dalam pixel
Noshad	Efek bayangan

3. Pemformatan Page

3.1 Paragraf (P)

Tag perintah untuk ganti paragraph pada bahasa HTML dinyatakan oleh tag <P>.

Contoh:

<p>

Horizontal Rule tag digunakan untuk menggambar garis horizontal

</p>

3.2. Begin Row

Tag <br /> di gunakan untuk memulai baris baru pada dokumen HTML, tag ini fungsinya mirip dengan carriage return.

Contoh:

Horizontal Rule tag digunakan untuk menggambar garis horizontal dalam dokument HTML<br />

Dokument body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page</ BR>

3.3. Font

Dengan tag <FONT> anda bisa menentukan format tampilan font dalam dokumen HTML seperti color, size, style dan lainya.

Contoh:

<font color="#9966FF" size="5"> Menentukan Format Tampilan Font </font>

Attribute	Description
color	Untuk menentukan warna font, kita bisa menggunakan nama font atau hexadecimal (#000000 - #ffffff).
size	Untuk menentukan ukuran dari font 1 – 7.
face	Untuk menentukan jenis font biasanya dalam satu list ada beberapa font dan akan di baca mulai dari yang paling kiri.

3.4. Color

Color merupakan attribute yang kita anda tambahkan pada beberapa element seperti body, font, link dan lainya. Color di bagi dalam tiga ketegori warna primer yaitu red, green dan blue. Masing-masing color didefinisikan dalam dua digit hexadecimal number.

#RRGGBB

Hexadecimal	Color
#FF0000	Red
#00FF00	Green
#0000FF	Blue
#000000	Black
#FFFFFF	White

4. Alignment

Align attribute digunakan untuk menentukan perataan object dalam dokumen HTML baik berupa text, object, image, paragraph, division dan lain-lain.

Value	Description
Left	Rata kiri
Right	Rata kanan
Center	Rata tengah
Justify	Rata kanan kiri

5. Format text

5.1 Physical Formatting

Tag	Description
<B> ... </B>	Bold text
<I> ... </I>	Italic text
<U> ... </U>	Underline Text
<BIG> ... </BIG>	Untuk ukuran yang lebih besar dari normal
<SMALL> ... </SMALL>	Untuk ukuran yang lebih kecil dari normal
<STRIKE> ... </STRIKE>	Untuk memberi garis di tengah text
<SUP> ... </SUP>	Superscript text
<SUB> ... </SUB>	Subscript text
<CENTER> ... </CENTER>	Center document / text

5.2 Logical Formatting

Tag	Description
<EM> ... </EM>	Text miring / <I>
<STRONG> ... </STRONG>	Text tebal / <B>
<INS> ... </INS>	Underline text / <U>
<DEL> ... </DEL>	Mencoret text / <STRIKE>

6. Quotes / Indenatasi

Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi pendek anda bisa gunakan element Q.

Contoh:

BLOCKQUOTE untuk indentasi pendek anda bisa gunakan element Q

<blockquote> Color merupakan attribute yang kita anda tambahkan pada beberapa element seperti body, font, link dan lainya </blockquote>

7. Preformatted text

Tag PRE di gunakan untuk menampilkan text sesuai dengan format aslinya.

Contoh:

<pre>

</pre>

8. Grouping element

Tag DIV dan SPAN di gunakan untuk mengelompokkan element-element HTML. Span digunakan untuk mendefinisikan inline content sementara <div> digunakan untuk block-level content.

Contoh:

<div>

Divisi 1

<p>

Div tag digunakan untuk mengelompokkan group element biasanya untuk block-level element

</p>

</div>

Divisi 2

<p>

Ini didalam devisi kedua. di tulis dengan alignment kanan

</p>

</div>

9. Hyperlink

9.1 Link ke Dokumen Lain

Misalkan ada dua dokumen html link1.htm dan link2.htm untuk membuat link dari link1.htm ke link2.htm :

Contoh :

Link1.htm:

<html>

<head>

<title>Using Link</title>

</head>

<body>

<font size="5" color=green>Creating Link </font>

</center>

<br />

<a href="link2.htm"> Click here to view document 2</a>

<br />

</body>

</html>

Link2.htm

<html>

<head>

<title>Document 2</title>

</head>

<body>

<font size="5" color=blue>Creating link </font>

</center><br />

<a href="link1.htm"> back to document 1</a></br />

</body>

</html>

9.2 Link ke Section tertentu dalam Dokumen

Untuk membuat link ke section tertentu dalam satu dokumen gunakan property name untuk membuat nama tujuan dari link.

Syntax name anchor:

<A NAME =”nama”>Topic name</A>

untuk membuat link ke name :

<A HREF=”#nama”>menuju ke Topic name</A>

contoh:

link3.htm

<html>

<head>

<title>Anchor Name</title>

</head>

<body>

<strong>setting up web server</strong>

Internet merupkan jaringan global yang menghubungkan suatu network dengan network lainya di seluruh dunia melalui TCP/IP menjadi protocol penghubung antara jaringan-jaringan yang beragam di seluruh dunia untuk dapat berkomunikasi ,tukar menukar berbagai macam jenis informasi, dan data tanpa batas Negara dan Benua. .<a href="#WWW"> WWW (World Wide Web) </a> Dalam dunia internet kita sering mendengar kata WWW (World Wide Web) yang mempunyai definisi adalah salah satu fasilitas dimana kita dapat saling bertukar informasi di internet.<b><a name="WWW"> WWW (World Wide Web)</a></b> Banyak orang berpendapat bahwa WWW adalah dunianya sedang internet adalah jaringannya . Protocol standard aturan yang di gunakan untuk berkomunikasi pada computer networking, Hypertext Transfer Protocol (HTTP) adalah protocol untuk WWW.

</pre>

</body>

</html>

9.3 Link Ke bagian tertentu Dokumen Lain

Untuk membuat link ke bagian tertentu dokumen lain kita bisa gunakan anchor name didokument yang menjadi tujuan hperlink.

Contoh:

<A HREF=”link3.htm#WWW”>WWW (World Wide Web)</A>

10. Table

10.1 Membuat table

Tag <TABLE> digunaka untuk membuat table dalam dokumen HTML, bagian pokok dari table adalah cell yang didefinisikan dengan menggunakan tag <TD>.

Contoh :

<tr>

</tr>

<tr>

</tr>

</table>

10.2 Pemformatan table

Untuk memformat perataan text di dalam table anda bisa gunakan attribute Align dan Valign (vertical Alignment).

Attribute	Value
Align	Center \| justify \| left \| right
Valign	BASELINE \| TOP \| BOTTOM \| MIDDLE

Contoh :

</tr>

</tr>

10.3 Merge cell

Tag <TD> memiliki atribut colspan untuk merge column dan rowspan untuk merge baris.

Contoh:

<table bgcolor=”CCCCFF” width="62%" border="1"

cellpadding="0">

<tr>

<td colspan="3" align="center">Quarter 1</td>

<td colspan="3" align="center">Quarter 2</td>

</tr>

<td>Senin</td>

<td>Selasa</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

11. Image

11.1 Format Image

Ada banyak format image, tapi ada tiga jenis format yang paling sering di gunakan :

· GIF (Graphical Interchange Format) (.GIF)

· JPEG (Joint Photographic Expert Image) (.JPG)

· PNG (Portable Network Graphics)

11.2 Insert Image ke Dokumen

Tag IMG di gunakan untuk menginsertkan image ke dokumen HTML. Syntax nya:

Penjelasan tentang URL yang dimaksud adalah lokasi tempat gambar berada.

Contoh :

- Jika gambar terletak dalam folder gambar dan folder gambar berada satu folder dengan script HTML

- Jika gambar terletak dalam folder yang sama dengan script HTML

- <img src="gambar.jpg>

Attribute	Value	Description
Align	Center \| justify \| left \| right \| Baseline \| top \| bottom \| Middle	Top, bottom, middle digunakan untuk menentukan posisi image terhadap text Left, right, center untuk menentukan posisi image di document

12. Text berjalan

Pada halaman Web apabila terdapat sedikit animasi pasti akan memperindah tampilan dari Website itu sendiri. Animasi disini merupakan animasi sederhana yang mana membuat sebuah text dapat berjalan. Untuk membuat efek ini kita dapat menggunakan tag <MARQUEE>, untuk lebih jelasnya Ketikkan tag <MARQUEE> di dalam tag <body></body> seperti pada contoh dibawah ini.

Contoh :

Attribute	Value	Description
MARQUEE BEHAVIOR	SLIDE SCROLL ALTERNATE	Berhenti di Jalan terus Bolak-balik

Untuk mengatur arah berjalan tambahkan DIRECTION.

Contoh :

Attribute	Value	Description
Direction	Left Right	Jalan dari kiri Jalan dari kanan

13. Form Html

Web page memungkinkan kita interaktif dengan pengunjung web , salah satunya dalah dengan penggunaan FORM. Metoda pengiriman data pada form terdapat dua yaitu GET dan POST. Pada HTML metoda ini dinyatakan dengan atribut METHOD di dalam elemen FORM. Metoda GET merupakan default pengiriman suatu data form. Metode GET mengirimkan data pada server dengan cara meletakkannya pada bagian akhir URL yang menunjuk pada script pemroses Jadi jika URL anda menunjuk ke CGI Script pada URL “cgibin/scriptform” dan kata formnya adalah “jakarta” dan “2503645”, maka URL akhir yang dikirim ke server adalah :

/cgi-bin/scriptform?kota=Jakarta&telepon=2503645

Metode POST tidak seperti metode GET yang mengirimkan datanya secara terpisah pada suatu standar input.Script mengambil data form dari standar input ini, dengan adanya penyimpanan data secara tersendiri membuat metoda POST bisa menyimpan data input dalam jumlah banyak.

Contoh Form :

<html>

<head>

<title>latihan 9</title>

</head>

<body>

<pre>

nama : <input type=text name=”nama” />

alamat: <input type=text name=”alamat” size=40 maxlength=”60” />

e-mail :<input type=text name=”email” size=”20” />

telepon :<input type=text name=”telepon” size=”7” />

</pre>

</form>

</body>

</html>

Terdapat dua atribut yang umum digunakan pada tag <FORM> berupa ACTION dan METHOD :

· ACTION menentukan URL yang akan dijalankan dan menerima semua masukan pada formulir. Jika ACTION tidak disebutkan, informasi akan dikirim ke URL yang sama dengan halaman Web itu sendiri.

· METHOD digunakan untuk menentukan bagaimana informasi di kirim ke URL yang disebutkan dalam ACTION. Nilai yang umum untuk atribut ini berupa GET dan POST. POST membuat informasi di kirimkan secara terpisah dengan URL, sedangkan GET akan membuat informasi dikirim menjadi satu dengan URL.

Control yang terdapat dalam form :

a. Buttons

Terdapat 3 jenis button antara lain :

· Push Button : merupakan default behavior atau nerupakan sintak dasar. Namun button jenis ini hanya dapat digunakan dengan menggunakan bersama script yang lain (client side script).

· Submit Button : apabila diaktifkan akan memerintahkan browser untuk mengirimkan data yang dimasukkan ke dalam form ke alamat yang dituju

· Reset Button : apabila diaktifkan akan mereset semua control yang ada dalam form kembali ke nilai semula (default)

b. Check Box

Merupakan control yang memungkinkan pemilihan sutu nilai tertentu (informasi).

Contoh :

<form>

I have a bike

<br />

I have a car

<br />

I have an airplane

</form>

c. Radio Button

Memiliki fungsi yang sama dengan check box namun memiliki perbedaan dimana apabila salah satu radio button dengan diaktifkan maka radio button lain yang bernilai sama akan nonaktif secara otomatis

Contoh :

<form>

<input type="radio" name="sex" value="male"> Male

<br>

<input type="radio" name="sex" value="female"> Female

</form>

d. Menu

Memungkinkan pengguna memilih pilihan dalam menu drop down

Contoh :

<option value="1">1. Menu Pilihan 1</option>

<option value="2">1. Menu Pilihan 1</option>

<option value="3">1. Menu Pilihan 1</option>

</select>

e. Text Input

Terdapat dua jenis inputan text yaitu, TEXT AREA dan input text. Keduanya memiliki kesamaan fungsi yaitu menginputkan text. Namun textarea memungkinkan inputan berupa multi-line text.

Contoh

</form>

f. File

Memungkin user memasukkan inputan berupa file

Contoh :

</form>

g. Hidden control

Memungkinkan penulis untuk memasukkan suatu informasi tertentu ke dalam halaman web yang nantinya akan dikirim kembali ke server.

Contoh :

</form>

h. Label

Memiliki fungsi untuk menuliskan informasi ke halaman web

Contoh :

<table>

<tr>

<td><label for="fname">first name</label>

<tr>

</table>

</form>

14. FRAME

Frame HTML dapat digunakan untuk membuat tampilan halaman HTML yang terbagi-bagi menjadi beberapa bagian dimana setiap bagiannya merupakan satu halaman HTML yang terpisah. Ini dilakukan untuk membuat tampilan halaman HTML yang salah satu atau beberapa bagian berganti-ganti isinya sedang bagian lain tetap sehingga dapat menghemat bandwith internet.

Contoh FRAME :

<html>

<head>

<title>latihan 8 </title>

</head>

</frameset>

<body>

</body>

</html>

Rabu, 23 Oktober 2013

HTML (Hypertext Markup Language)

Tidak ada komentar:

Posting Komentar

Paling Laris Minggu Ini