SUPRAYETNO

Januari 29, 2010

Dasar Dasar HTML untuk Design Website atau Blog

Filed under: Uncategorized — viscor @ 3:38 pm
Kali ini kita akan ngerefresh sejenak ingatan kita mengenai HTML. Yah, artikel ini mungkin cocok buat yang baru mendalami pemrograman web.
HTML atau Hyper Text Markup Language. Adalah bahasa yang digunakan untuk mendisain dan
memformat halaman web. Kita mungkin sudah mendengar tentang bahasa program seperti C,
C++, Java, dan Visual basic. Masing-Masing bahasa ini terdiri dari perintah sintak
dan programming . Sintak ini adalah yang programmer gunakan untuk memanggil kode.
Sangatlah penting mengetahui bagaimana cara menulis kode menggunakan bahassa yang
relevan.
Lebih dari itu, kita harus konvensional dengan aturan menyangkut bahasa tertentu.

Didalam HTML, sintak ini disebut tag.Tag ditulis dengan tanda-kurung bersudut< dan
>.Ada kelompok tag yang sudah dikenal didalam HTML, yang mana digunakan untuk berbagai tujuan.
Sebagai contoh, dalam rangka memodifikasi satu baris teks ke dalam Bold, kita menerapkan
tag bold dengan suatu tag <b>, kemudian tulis beberapa teks atau suatu paragrap yang
berisi beberapa teks,dan tutup tag menggunakan tag </b> seperti dalam contoh listing 1.

Semua tag didalam HTML harus ditutup menggunakan sintak </>.Tetapi ada beberapa perkecualian pada aturan ini, yang mana kita akan mendiskusikanya nanti.Kita memakai tag ini
sebab HTML bukanlah bahasa yang sensitip seperti C++ dan Java.

Struktur

Setiap kode HTML perlu ditulis dalam suatu struktur yang mana dapat dihubungkan dengan
Word Wide Web.Tidaklah wajib untuk mengikuti struktur ini. Bagaimanapun juga,lebih
baik
mempraktekan langsung struktur ini sbg perancangan halaman web kita.
Listing 1 menunjukkan struktur suatu halaman HTML sederhana:

Listing 1

<!– Ini komentar didalam HTML.Ini tidak akan diperliatkan pada browser–>

<HTML>
<HEAD>
<TITLE>
Welcome to HTML
</TITLE>
</HEAD>
<BODY>
<!–halaman CONTENT dimulai –>
<B>Yang ditampilkan di browser, cuma tulisan ini.
</BODY>
</HTML>

Kode diatas menggunakan Notepad dan menyimpan file sebagai satu.html. Kemudian, klik kanan file yang disimpan tadi. bagaimanakah keluarannya?

Listing 2

<B>Untuk menampilkan tulisan cetak tebal</B><BR>

<I>Untuk menampilkan tulisan cetak miring (italic) </I><BR>

<U>Untuk menampilkan tulisan bergaris bawah (underline) </U><BR>

<BR> digunakan untuk menampilkan baris baru.

Listing 3

<Pon> Bla bla bla bla, dan tulisan ini pun akan dianggap satu paragraf. kalau ga percaya, coba aja sendiri. dengan menggunakannya dua kali atau lebih bakal lebih keliatan hasilnya.
</P>

Tidak wajib untuk menutup tag <P>. Tetapi seperti dikatakan sebelumnya, menutup
tiap-tiap tag adalah suatu yang baik yang pemprogram praktekkan.

Listing 4

Bekerja dengan Heading
Kita dapat menggunakan heading untuk mengorganisir teks kita dalam berbagai
tingkatan. Ada lima tingkatan heading didalam HTML seprti di bawah:
<H1>Level – 1 </H1>
<H2>Level – 2 </H2>
<H3>Level – 3 </H3>
<H4>Level – 4 </H4>
<H5>Level – 5 </H5>

Listing 5

Penempatan List contoh teks atau items.Ada dua jenis list didalam HTML.
sebagai berikut

o Ordered List
o Unordered List

Ordered List diwakili oleh tag <ol> tag secara otomatis menomori, dan
Unordered List diwakili oleh tag <ul> dan terlihat seperti bullet.
Cobalah kode di bawah ini:

<OL>
<LI>Java
<LI>C++
</OL>

kode diatas menghasilkan suatu daftar perintah bahasa. Jika kita
menginginkannya seperti bullet kemudian kita ubah tag <OL> menjadi tag <UL>
sebagai di bawah ini:

Listing 6

<UL>
<LI>Java
<LI>C++
</UL>

Listing 7
Penerapan Definisi List

Definisi List adalah serupa dengan daftar kata. Diterapkan menggunakan tag <DL>
dan <DT> seperti ditunjukkan listing 7 dibawah ini.

<DL>
<DT>Java
<DD>Developed by Sun Microsystems Inc
<DT>Yang kedua
<DD>Developed by saya sendiri
</DL>

Listing 8
Indenting Text
Tag <BLOCKQUOTE> yaitu teks yang menjorok lebih kedalam dari garis tepi secara
otomatis dari kiri ke kanan. Cobalah contoh berikut :

<BLOCKQUOTE>
You can use Sound Recorder to record, play, and edit sound files.
To use Sound Recorder, you must have a sound card and speakers
installed on your computer. If you want to record live sound,
you also need a microphone.
</BLOCKQUOTE>

Membuat Links

Suatu website bukanlah halaman tunggal.Terdiri dari beberapa halaman yang saling
berhubungan. Sebagai contoh,ketika kita klik suatu link nama ” About Us”,
pada browser secara otomatis Kita ke halaman web itu .
Bagaimana sihir ini terjadi? Itu merupakan suatu konsep Hyperlinks

Kita dapat menciptakan Hyperlinks menggunakan tag <a>.Dan harus ditutup menggunakan
tag </a> dan itu mewakili anchor.

Listing 9

<A href =“http://www.rumahweb.com”>Rumahweb </A>

href adalah suatu atribut yang digunakan untuk menetapkan link dan mewakili
Teks Reference. Atribut lain meliputi suatu target opsional, yang mana menandakan
bagaimana cara membuka link. Nilai atribut ini jadi kosong. Sebagai contoh,
kode berikut memanggil lokasi Rumahweb.com didalam suatu jendela browser baru
ketika seseorang mengklik teks.

Listing 10

<A href = http://www.rumahweb.com target = “_blank”>Rumahweb </A>

Selalu ingat untuk menyimpan file yang telah dibuat dalam ekstensi .html

Sebuah Web atau Blog tidak bisa lepas dari yang namanya HTML (Hyper Text Mark up Language) karena HTML inilah yang mendasari sebuah web/blog. Walaupun sekarang kita bisa membuat web/blog hanya dengan klak-klik mouse tapi setidaknya kita harus sedikit mengerti tentang dasar-dasar HTML, ya tho?. Dalam tutorial kali ini kita tidak akan membahas tentang semua dasar-dasar HTML tapi kita akan mempelajari tag-tag atau kode-kode penting yang sering digunakan dalam membangun sebuah web/blog misalnya cara membuat link, menampilkan gambar, mengganti warna font, membuat barus baru dll. Ok marikita mulai pelajaranya :

* CARA MEMASUKKAN GAMBAR

kode :

<img src=”http://ubb.ac.id/gambar.jpg” border=”0″ height=”17″ width=”90″>

keterangan :

yang warna biru adalah lokasi gambar kamu.

height=”17″ width=”90″ adalah ukuran lebar dan tinggi gambar

hasil :

* CARA MEMBUAT LINK

Kode :

<a href=”http://www.ubb.ac.id” >UBB </a>

Keterangan :

Text warna biru adalah link yang dituju.

Tulisan “UBB” adalah tulisan yang ditampilkan.

Jika ingin yang dikasih link bukan tulisan melainkan gambar maka ganti tulisan tersebut dengan kode gambar seperti diatas, sehinga kodenya akan seperti ini :
<a href=”http://www.ubb.ac.id” target=”_blank”><img src=”http://www.ubb.ac.id/gambar.jpg” border=”0″ height=”17″ width=”90″> </a>
Jika ingin link yang dituju dibuka dalam window baru maka tambahkan kode target=”_blank” setelah kode http://www.ubb.ac.id&#8221;

Hasil :

UBB
(dibuka pada window yg sama)


(dibuka pada window baru)

* CARA MENGETENGAHKAN TEXT/GAMBAR

Kode :

<center>text</center>

Keterangan :

Ganti tulisan “text” dengan tulisan yana kamu inginkan, tau bisa juga diganti dengan gambar

* CARA MEMBUAT BARIS BARU

Kode :

<br>

Keterangan :

Tambahkan kode tersebut sebelum objek (text/gambar) yang dinginkan

* MEMBUAT HURUF TEBAL, MIRING DAN BERGARIS BAWAH

Kode :

<b>text</b>

<i>text</i>

<u>text</u>

Hasil :

Tebal

Miring

Garis Bawah

* MEMBERI WARNA TEXT

<font color=”#FF0000″> text merah</font>

<font color=”#FF6600″> text orange</font>

Keterangan :

Ganti text yang dicetak tebal dengan warna atau kode warna kesukaanmu.

Hasil :

text merah

text orange

* KODE-KODE WARNA

Warna Kode
#000000
#999999
#FFFFFF
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#9900FF
#FF6600

Kode-kode Warna untuk HTML

Di dalam dunia web/blog, warna itu sangat penting dan sangat berpengaruh terhadap penampilan web/blog. Warna-warna biasanya digunakan untuk background, text, links, table dll. Kalau kombinasi warna pada web/blog kita tidak sesuai, atau tidak enak dipandang mata mata, maka hal itu akan membuat pengungjung web/blog kita menjadi kurang nyaman, dan kemungkinan akan malas untuk mengunjungi blog kita lagi. Tapi karena untuk untuk membuat warna-warna ini harus menggunakan kode-kode warna, maka bagi yang tidak begitu mahir tentang html akan kesulitan untuk mendapatkan kode-kode warna ini.

Oleh karena itulah dibawah ini dibuat Chart HTML Kode Warna bagi yang membutuhkan kode-kode warna.
Cara penggunaannya cukup mudah, tinggal klik warna yang dipilih, maka kode warnanya akan tampil di kotak “kode warna:”.

&amp;lt;br /&amp;gt;

PENULISAN KARAKTER-KARAKTER KHUSUS

Ada beberapa karakter yang tidak bisa ditulis secara langsung, jika ditulis maka akan hilang atau berubah, jadi untuk menuliskanya harus menggunakan kode-kode tertentu, berikut ini contoh karakter-karakter tersebut :

Karakter
Kode
>
&gt;
<
&lt;
&
&amp;
&quot;
(spasi)
&nbsp;

Cara Membuat Kotak Blogroll dan Marquee
Ada dua macam kotak blogroll yaitu:

1. Kotak Blogroll Model Textarea

Cara membuatnya :

Pasang code berikut ini di kedalam element (Page Element –> Add Page Element –> HTML /Javascript)

<div style=”border: 1px solid rgb(153, 153, 153);

overflow: auto;
width: 200px;
height: 200px;
text-align: center; “>

#link1 <br />
#link2 <br />
#link3 <br />
#link…

</div>

keterangan:

– Kode width: 200px; dan height: 200px; adalah ukuran lebar dan panjang kotak, kita bisa merubahnya dan menyesuaikanya dengan ukuran yg disuka.

– Ganti tulisan “#link1,#link2, #link3 dst” dengan daftar link-link, juga bisa diisi dengan banner link.

– Jika ingin daftar link-linknya berjajar, maka hilangkan kode <br />

2. Kotak Blogroll Model Marquee

Kotak ini juga mampu menampung banyak link dalam tempat yang sempit. Namun kotak blog roll ini berbeda dengan kotak yg diatas, karena kotak yang ini tidak memiliki rollbar (yg biasanya disebelah kanan trus ditarik keatas kebawah). Link-link atau isi didalam kotak ini akan bergerak/berjalan, bisa vertikal ato horizontal. Cara membuatnya :

Pasang code berikut ini di kedalam element (Page Element –> Add Page Element –> HTML /Javascript)

<MARQUEE align=”center” direction=”up” height=”100” scrollamount= “2”

onmouseover=’this.stop()’ onmouseout=’this.start()’ width=”95%” >

#link1 <br />
#link2 <br />
#link3 <br />
#link…<br />

</marquee>
Keterangan :

– Kode “up” itu menunjukan arah pergerakan, kamu bisa menggantinya dengan down, left, right (udah mudeng to artinya, gak usah dijelasin ya).
– Jika kamu menggantinya dengan pergerakan horizontal (left ato right) maka hilangkan kode <br />.
– Angka “100” menunjukkan tinggi dari kotak blogroll kamu. Semakin banyak angkanya maka semakin tinggi pula ukuran blogroll.

OK SELAMAT MENCOBA……

Iklan

Tinggalkan sebuah Komentar »

Belum ada komentar.

RSS feed for comments on this post. TrackBack URI

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout /  Ubah )

Foto Google+

You are commenting using your Google+ account. Logout /  Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout /  Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout /  Ubah )

Connecting to %s

Blog di WordPress.com.

%d blogger menyukai ini: