Coretan Kecil: Artikel Html

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web 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).

Sejarah HTML

Perkembangan

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 Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.

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 saat ini adalah HTML5.

Sejarah dari standar HTML

HTML versi 1.0

di HTML versi 1.0 kemampuan yang dimilikinya yaitu menampilkan heading, paragraph, hypertext, list, serta cetak tebal, dan miring pada suatu teks. Versi ini mendukung peletakan gambar pada dokumen tanpa memperbolehkan menempatkan tes di sekelilingnya (wrapping).

HTML versi 2.0

di versi ii, penambahan kualitas TML terletak pada kemampuan untuk menampilkan sebuah form pada dokumen. Dengan adanya form ini maka kita dapat memasukkan nama, alamat, serta saran/kritik.

HTML versi 3.0

HTML versi 3.0 menambahkan beberapa fasilitas baru sebagai contoh tabel. Versi ini yang disebut juga sebagai HTML+ tidak bertahan lama dan segera digantikan HTML versi 3.2.

HTMLversi 4.0

HTML versi 4.0 memuat banyak sekali perubahan dan revisi dari versi sebelumnya. Perubahan ini terjadi di hampirsegala perintah-perintah HTML seperti table, image, link, text, meta, imagemaps, form, dan lain-lain.

Kemudian lahir HTML versi 4.01 yang dikeluarkan secara resmi oleh W3C pada tanggal 24 April 1998. HTML 4.01 menjadi standart pada tahun 1999. HTML 4.01 merupakan perbaikan dari HTML versi 4.0 yang terlebih dahulu diterbitkan (18 Desember 1997). HTML versi HTML 4.01 masih standart resmi sampai sekarang ini .

meskipun saat ini telah berkembang HTML5 dan XHTML yang merupakan pengembangan dari HTML.

Kegunaan HTML

· 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 format 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 Macinthos 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 seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah:

· Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.

· Menampilkan tulisan dalam bentuk cetakan tebal

· Menampilkan sekelompok kata dalam bentuk miring

· Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik

· Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Secara garis besar, terdapat 4 jenis elemen dari HTML:

· Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, < h1> Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1

· Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, < b> boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh css dan tidak direkomendasikan untuk mengatur tampilan tulisan,

· Hiperteks Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, < a href="http://www.wikipedia.org/"> Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),

· Elemen widget yang membuat objek-objek lain seperti tombol (< button>), list (< li>), dan garis horizontal (< hr>). Konsep hypertext pada HTML memungkinkan pembuatan link pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web,

Ada tiga macam pranala (link) yang dapat digunakan:

· Pranala menuju bagian lain dari page.

· Pranala menuju page lain dalam satu web site.

· Pranala menuju resource atau web site yang berbeda.

Selain markup presentasional, markup yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets.

KODE-KODE HTML

Fungsi - fungsi kode HTML :

<H1> sampai <H6>
<H1> </ H1>font ukuran besar
<H2> </ H2>
.... & nbsp; ; ....
<H6> </ H6>font semakin kecil
<HR>
Fungsi : perintah untuk membuat garis horizontal penuh layar
cth :
<I>
Fungsi : membuat teks miring
<B>
Fungsi : membuat teks tebal
<U>
Fungsi : membuat teks bergaris bawah
<CENTER>
Fungsi : membuat text ke tengah layar
<ALIGN>
Fungsi : Membuat teks rata kiri dan rata kanan
Sintak
<P ALIGN=right>untuk rata kanan
<P ALIGN=left>untuk rata kiri
<P ALIGN=center>untuk rata tengah
<P ALIGN=justify>untuk rata kiri dan rata kanan

atau

<H?ALIGN=right>
<H?ALIGN=left>
<H?ALIGN=center>
<H?ALIGN=justify>

Contoh pemakaian:
<H2 Align=right>Selamat Datang Ke Website Kami <H2>

<BR>
Fungsi : memasukkan fungsi enter
Cth : Jika perintah <BR> diberikan di awal atau diakhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya
<!->
Fungsi : membuat komentar
Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan
<P>
Fungsi : memisahkan paragraph yang satu dengan paragraph yang lain
<DD>
Fungsi : membuat teks atau sebuah paragraph agak masuk ke dalam
<BASEFONT>
Fungsi : Mengubah ukuran font
Contoh :
<BASEFONT SIZE=6>
WELCOME TO MY WEBSITE
<B>WELCOME TO MY WEBSITE DAN TEBAL</B>
<FONT>
Fungsi : mengubah ukuran font, tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi tanda kutib
<FACE>
Fungsi : mengubah jenis font
<SUP>
Fungsi : membuat cetak naik suatu teks
Contoh :
Kami adalah yang pertama:1^stin the world
<SUB>
Fungsi : membuat suatu teks cetak turun
Contoh :
contoh-contoh teks cetak turun :
H₂O (Disebut Air) dan
C₂₁27No (Disebut Methadon)
<UL> atau Unorder List
Fungsi : membuat bullet
<LI>
Fungsi : juga untuk membuat bullet
Catatan : perintah <LI> harus berada dalam perintah OL,UL,DIR,Menu
Contoh :
<UL>
<LI>
<H2> Jawa Timur </ H2>
<UL>
<LI> SURABAYA </ LI>
<LI> MALANG </ LI>
<LI> GRESIK </LI>
</UL>
</LI>
</BR>
<LI>
<H2> Jawa Barat </ H2>
<UL>
<LI> Bandung </ LI>
<LI> Sukabumi </ LI>
<LI> Bogor </LI>
</UL>
</LI>
</UL>
<IMGSRC>
Fungsi : memasukkan gambar ke dalam Website
Anda dapat juga memasukkan gambar berakhiran *.Jpg, *.Gif, *.Bmp dll
Sintak :<IMG BORDER="5">
"5" merupakan ukuran border(Bingkai), ganti angka ini sesuai keinginan anda
<BGSOUND>
Fungsi : memasukkan suara atau musik ke dalam Website
Sintak : <BGSOUND loop=infite Src="d:/Selamat datang.WAV">

· Link Dengan Sorot

Berikut adalah contoh program bagaimana membuat link hanya dengan sorot saja (link tak perlu diklik, tetapi cukup disorot dengan mouse.
<HTML>
<HEAD>
<TITLE> </TITLE>
<META Name="description"Content=" ">
<META Name="keywords"Content=" ">
<META Name="generator"Content=" Cute HTML">
</HEAD>
<BODY BG Color="# FFFFFF"Text="#000000="# "0000FF"VLink="#800080">
<Center>
<A href=" "target=main on mouse over="Window.open ('c:/html/keterangan.html'):">
<Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e>
</CENTER>
</BODY>
</HTML>

· Link Dengan Tombol

Berikut adalah contoh program link dengan tombol
Sintak :
<Input type="button"Value="Nama Tombol"
On Click="parent.location="Link anda disini" >

Contoh
Buatlah link dengan nama
tentang_kami.html
produk_kami.html
cara_memesan.html

CARA MEMBUAT WEBSITE SEDERHANA DENGAN MENGGUNAKAN HTML

Pembuatan Halaman HTML

Dalam membuat halaman HTML, yang harus dilakukan diantaranya:

a. Memilih text editor

Saat ini ada banyak sekali program aplikasi yang dapat digunakan untuk

membuat halaman web. Text Editor adalah program pengolah kata yang paling

dasar tanpa ada fitur-fitur yang ‘aneh-aneh’ seperti pengolah kata pada umumnya

seperti Ms Word. Salah satu kelebihan dari text editor adalah suatu file yang

dibuat dengan program ini disimpan hampir tanpa ada kode rahasia yang tak

terlihat seperti halnya dokumen Ms Word atau pengolah kata yang lainnya, yang

akan secara drastis akan menimbulkan efek pada dokumen saat akan ditampilkan

di web browser. Dengan kata lain akan lebih mudah untuk membangun suatu

halaman web dengan menggunakan text editor biasa dari pada suatu pengolah

kata.

HTML editor mempermudah pengguna untuk membuat halaman web

dengan cepat dan mudah hanya dengan menekan beberapa buah tombol yang

disediakan dan kemudian program aplikasi ini akan menghasilkan “source code”

HTML daripada memasukan semua kode-kode HTML dengan mengetikkannya

satu persatu. HTML editor merupakan suatu alat yang tepat bagi seorang web

developer; meskipun seharusnya juga sangat penting untuk mempelajari dan

mengetahui bahasa HTML sehingga dapat mengedit kode-kode yang ada dan

membetulkan dokumen jika tidak dapat dilakukan oleh HTML editor. Ms Word

dan Corel WordPerfect versi yang ada saat ini juga telah mempunyai kemampuan

untuk membuat halaman web. Contoh lain adalah Microsoft FrontPage, dan

Adobe Dreamweaver.

Namun dalam makalah ini, penulis menggunakan text editor standar dari

Ms. Windows, yaitu NotePad. Karena merupakan dasar dari segala bentuk HTML

dan akan lebih paham mengenai cara kerja dan berbagai perintah yang biasa

dipakai pada bahasa HTML.

b. Memulai Notepad

NotePad adalah text editor standar yang ada baik di versi 16 bit maupun 32

bit sistem operasi Ms Windows. Untuk memulai NotePad di Ms Windows

langkah-langkahnya adalah sebagai berikut :

· Click pada tombol “Start” yang ada pada task bar Windows.

· Click pada “Program” dan lalu click pada menu direktori berlabel

“Accessories”.

· Kemudian click pada shortcut “NotePad’’.

Agar dokumen tampak lebih menarik, dapat diatur tampilannya dengan

beberapa properti. Properti dokumen diatur melalui atribut-atribut yang terdapat

dalam elemen <body>. Sebagai contoh adalah pengaturan warna latar belakang

halaman, warna teks, warna link dan lain-lain.

1) Kode Warna

Dalam pengaturan warna menggunakan kode RGB yang mana ditampilkan

dalam nilai heksadesimal. Setiap bagian dua digit kode menunjukkan banyaknya

intensitas dari kombinasi warna merah, hijau dan biru. Sebagai contoh 00 pada

dua digit pertama berarti tidak ada warna merah dalam kombinasi warna. Berikut

ini adalah contoh kode warna.

Color Hexadecimal Color Hexadecimal

White #FFFFFF Black #000000

Red #FF0000 Green #00FF00

Blue #0000FF Magenta #FF00FF

Cyan #00FFFF Yellow #FFFF00

Aquamarine #70DB93 Chocolate #5C3317

Violet #9F5F9F Brass #B5A642

Copper #B87333 Pink #FF6EC7

2) Atribut Elemen <body>

BACKGROUND = Lokasi dan nama file (latar belakang image dokumen)

BGCOLOR = Warna (warna latar belakang dokumen, default putih)

TEXT = Warna (warna teks dokumen, default hitam)

LINK = Warna (warna link dokumen, default biru)

VLINK = Warna (warna visited link dokumen, default ungu)

ALINK = Warna (warna aktif link dokumen, default merah)

3) Elemen Heading <h1> ... <h6>

Tag heading berfungsi untuk memformat heading (judul dan sub-judul) dari

suatu halaman web. Heading ini akan memperbesar ukuran huruf untuk setiap

jenis heading. Ada tujuh buah heading yang dikenal di HTML, yaitu dari <h1>

sampai <h6>.

4) Elemen Paragrap <p>

Tag paragrap berfungsi layaknya untuk pengaturan antar paragraf dalam

halaman web. Dalam elemen paragrap terdapat atribut align yang berfungsi

sebagai pengaturan perataan paragraph.

5) Elemen Break <br>

Elemen Break berfungsi untuk memberikan baris baru suatu paragrap dalam

halaman web. Elemen break tidak memerlukan elemen penutup break.

6) Elemen Horisontal Rules <hr>

Elemen <hr> berfungsi untuk menampilkan garis horisontal di dalam

halaman web. Elemen <hr> tidak memerlukan elemen penutup </hr>.

ALIGN = [ left | center | right ]

Atribut Elemen Horisontal Rules :

· ALIGN = [ left | center | right ] (perataan horizontal, default center)

· SIZE = Pixels (tinggi garis, default 2)

· WIDTH = Length (lebar garis, pixel or persen, default 100%)

· NOSHADE (garis solid)

7) Elemen Pemformatan Karakter <font>

Font pada halaman HTML dapat diformat sesuai dengan desain yang

ditentukan, baik ukuran, jenis maupun warna.

Atribut Elemen Font :

SIZE = Angka (ukuran huruf, default 3)

COLOR = Warna (warna font, default hitam)

FACE = Angka (jenis font, default Times New Roman)

8) Elemen Ragam Karakter

<b>bold</b> menghasilkan huruf tebal

<i>italic</i> menghasilkan huruf miring

<u>underline</u> menghasilkan huruf bergaris bawah

9) Elemen List

Properti <li> digunakan untuk menampilkan informasi dalam bentuk daftar

(list). Ada dua jenis daftar yang dikenal di HTML, yaitu list dalam format bullet

(unordered list <ul>) dan dalam bentuk nomor (ordered list <ol>).

Atribut Elemen Ordered list TYPE = [ 1 | a | A | i | I ] (tipe penomoran, default

Atribut Elemen Unordered list TYPE = [ disc | square | circle ] (tipe bullet,

default disc).

10) Elemen Image <img>

Untuk menampilkan gambar dalam halaman HTML, format filenya berupa

JPG atau GIF. Untuk menampilkanya digunakan tag IMG.

Atribut Elemen Image :

SRC = URI (lokasi image)

ALT = Text (text alternatif )

WIDTH = Length (lebar image)

HEIGHT = Length (tinggi image)

ALIGN = [ atas | tengah | bawah | kiri | kanan ] (perataan image)

BORDE = Length (lebar batas link)

c. Menyimpan File Script

Setelah membuat script-script HTML, kemudian langkah menyimpannya

adalah sebagai berikut :

· Click tombol “File” pada taskbar notepad, kemudian pilih “Save”.

· Pada field isian nama file (filename) , ketikkan namafile.html

· Coba jalankan browser dengan membuka “Internet Explorer”.

· Click pada menu "File .."

· Pilih pada option "Open .." yang ada pada menu "File .."

· Pada dialog box "Open" klik pada tombol "Browse .." dan cari file yang

ingin ditampilkan.

· Selanjutnya pilih tombol "Ok" jika file telah dipilih.

d. Mengedit file script

Ketika file tersebut telah ditambahkan atau diedit dan telah disimpan, maka

cara menampilkan file tersebut adalah :

· simpan hasil perubahan file html anda

· pindah ke aplikasi web browser

· Pada Ms Internet Explorer tekan tombol "REFRESH"

Web Browser akan me-load dokumen yang sama tapi dengan revisi baru

tadi. Proses ini adalah siklus Edit, Save, dan View.

Berikut ini adalah contoh listing program beserta tampilannya :

Contoh 1 :

<html>

<head>

<title> Contoh script HTML </title>

</head>

<body>

<h2>Belajar Desain WEB dengan HTML</h2>

HTML adalah dasar pembuatan website,<br>

dimana perintah – perintah HTML dapat diketik <br>

pada notepad (bila menggunakan S.O Windows) atau

Vi(bila menggunakan Linux).

</body>

</html>

Coretan Kecil

Cari Blog Ini

Sabtu, 09 November 2013

Artikel Html

Tidak ada komentar:

Posting Komentar