Desain web

Juni 13, 2013

Desain web

DASAR PEMROGRAMAN DESAIN WEB
HTML atau Hypertext Marksup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen dan aplikasi yang berjalan dihalaman web. Dokumen HTML hanyalah sebuah dokumen teks biasa dan disebut sebagai Markup Language yakni
bahasa yang mengandung tanda (tag) tertentu yang digunakan untuk mengatur format tampilan suatu dokumen.

HTTP atau Hypertext Transfer Protokol merupakan protokol yang digunakan untuk mentransfer data atau document yang berformat HTML dari web server ke browser (Internet Explorer, Netscape Navigator, NeoPlanet, dll). Dengan HTTP inilah yang memungkinkan menjelajah internet dan melihat halaman web.

Untuk membuat dokumen HTML dibutuhkan sebuah aplikasi teks editor biasa seperti Notepad, WordPad, Ms Word atau yang lainnya. Tetapi yang paling mudah adalah menggunakan Notepad.

*Struktur Dasar Html*

Kode HTML terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda "/", dibaca: slash). Struktur dasar dokumen HTML berisi elemen-elemen atau tag sebagai berikut:

<html>

<head>

<title> Judul Form / Caption </title>

</head>

<body> ISI WEB </body>

</html>

Keterangan :

<html> .. </html> Mendefinisikan bahwa teks yang berada di antara kedua tag tersebut adalah file HTML.

<head> .. </head> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.

<title> .. </title> Sebagai titel atau judul halaman/form, yang akan muncul pada bagian paling atas browser (pada title bar).

<body> .. </body> Mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.

*Kode Warna*

Pengaturan warna dalam dokumen HTML menggunakan mode kombinasi RGB (red, green, blue). Setiap warna ditampilkan dalam dua digit nilai heksadesimal (0, 1, 2, ..., F). Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Misalnya untuk warna kuning, dibuat dengan pencampuran warna sebagai berikut:

Red	Green	Blue
FF	FF	00

Berarti untuk warna kuning dapat dibuat dengan kode #ffff00. Disamping itu, pembuatan warna dapat juga dibuat dengan langsung menggunakan nama warna dalam bahasa inggris, misalnya kuning=”yellow”.

Berikut ini warna-warna yang dapat digunakan dalam halaman HTML.

Warna	Heksadesimal
White	#FFFFFF

Black	#000000
Red	#FF0000
Green	#00FF00
Blue	#0000FF
Magenta	#FF00FF
Cyan	#00FFFF
Yellow	#FFFF00

*Pengaturan Halaman Web dan Teks*

Untuk mendapatkan halaman web yang baik anda harus melakukan pengaturan terhadap halaman web dan teks-teks di dalamnya. Tag-tag di bawah ini biasa digunakan dalam pengaturan halaman web dan teks :

a. <body>, mendefinisikan teks beserta formatnya yang akan ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti :

1 Background = mengatur latar belakang dengan gambar/image.

1 Bgcolor = mengatur warna latar belakang dokumen

1 Teks = mengatur warna teks dokumen

1 Link = mengatur warna link dokumen

1 Vlink = mengatur warna visited link dokumen

1 Alink = mengatur warna active link dokumen

b. Heading: <Hn>..</Hn>, mengatur ukuran huruf pada header.

"n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6> dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil

c. Paragraph Baru: <P>, untuk pindah alinea atau membuat paragraf baru. Tag ini bisa diberi akhiran </P> tapi juga bisa tidak diberi. Dalam tag ini juga bisa digunakan untuk mengatur perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan attribut ALIGN. Attribut align mempunyai nilai: LEFT, RIGHT, CENTER dan JUSTIFY.

d. Line Break: <BR> Digunakan untuk pindah ke baris baru.

e. No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak secara otomatis pindah baris bawahnya bila baris pertama sudah terlalu panjang.

f. Font <FONT> mengatur huruf dokumen HTML. Tag FONT mempunyai 3 attribut, yaitu:

e SIZE: untuk mengatur ukuran font. Ukuran font yang digunakan antara 1 – 7, dimana 1 merupakan ukuran terkecil.

e FACE: untuk mengatur jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_). Tidak perlu menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.

e COLOR: untuk mengatur warna font, dengan menggunakan nilai RGB/HEX atau langsung menggunakan nama warna (red misalnya).

g. Base Font: <BASEFONT> untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.

Contoh :

Selain tag dan atribut diatas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :

Perhatian : Semua tag di bawah ini membutuhkan tap penutup.

<B> Bold text

<I> Italic text

<U> Underscore

<TT> Typewriter

<S> Strikeout - ~~draws a line through the text~~

<PRE> Preformatted Text

<DFN> Definition

<STRONG> Strong

<CITE> Digunakan untuk quoting text

<CODE> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)

<BIG> Ukuran teks akan lebih besar satu ukuran

<SMALL> Ukuran teks akan lebih kecil satu ukuran

<SUP> Membuat teks^superscript

<SUB> membuat teks_{sub script}

<ABBREV> Abbreviations

<ACRONYM> Untuk akronim

<PERSON> Digunakan untuk indexing

<Q> Membuat short inline quotation

<VAR> Membuat variable name, selalu dalam italics.

h. <HR>, untuk membuat garis horisontal. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE.

Atribut SIZE untuk menentukan panjang garis dalam satuan pixel. Atribut WIDTH untuk menentukan ketebalan garis. Atribut NOSHADE akan menyatakan bahwa garis tersebut ditampilkan tanpa bayang-bayang 3-D.

i. LISTS

merupakan kumpulan teks yang disusun sehingga item-item yang ada memiliki nomor urut atau tanda-tanda khusus/symbol

Terdapat tiga tipe list yang dapat digunakan, yaitu :

þ Unordered Lists: <UL>

untuk membuat daftar item dengan tanda bullet (tidak bernomor). Bentuk item tanda pada Unordered List dapat diubah dengan menggunakan atribut TYPE kedalam tag <UL> dengan nilai “circle” untuk bentuk lingkaran tengahnya putih, “square” untuk bentuk kotak padat hitam dan “disc” bentuk lingkaran pada warna hitam.

þ Ordered Lists: <OL>

untuk membuat daftar item bernomor, dengan tiap item dapat menggunakan angka arab atau romawi. Atribut yang ada pada Ordered List adalah TYPE dan START.

þ Definition Lists: <DL>

untuk menjelaskan istilah-istilah. Definition List dinyatakan dengan tag <DL> dan diantara tag tersebut ditambahkan tag <DT> Definition Term yaitu bagian istilah yang dijabarkan dan tag <DD> Definition Data yang merupakan penjabaran dari istilah.

j. Preformatted Text: <PRE>. Digunakan untuk mengatur format tampilan agar sesuai dengan aslinya.

k. Extended Quotations: <BLOCKQUOTE>, digunakan untuk membuat kutipan panjang, sehingga hasilnya menjorok ke dalam.

Cari Blog Ini

Wacanan Jaringan

Desain web

Komentar

Posting Komentar