ArtikeL HTML

Dasar Dasar HTML untuk Design Website atau Blog



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"



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:".





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......

Sejarah HTML

Pada awal kemunculannya di penghujung 1990-an, XML (Extensible Markup Languange) kerap dianggap sebagai bahasa markup pengganti HTML (Hypertext Markup Languange). Mungkin karena sama-sama turunan dari SGML (Standard Generalized Markup Languange). Padahal, XML dibuat untuk menjembatani interoperabilitas antar software dari platform yang berbeda.

Sebelum membahas lebih jauh apa itu XML dan bagaimana fungsinya, ada baiknya kita memahami betul istilah markup language. Awalnya markup language digunakan oleh para penulis, editor, dan awak percetakan dalam dunia penerbitan, untuk menandai sebuah naskah dipresentasikan.

Editor menandai bagian-bagian naskah yang perlu diperbaiki oleh penulis, dengan tanda-tanda khusus. Editor juga melakukan hal yang sama pada naskah yang akan di-layout oleh desainer (dahulunya merupakan bagian dari awak percetakan), bagian mana yang dicetak miring, tebal, dan lain-lain.

Dengan kata lain, markup language adalah gabungan antara naskah dengan informasi tambahan tentang naskah itu sendiri. Contoh markup language yang paling lazim kita temukan saat ini di internet adalah HTML.

Sejarah XML XML didesain oleh sebuah kelompok kerja yang terdiri dari sebelas orang. Mereka mendapat dukungan dari 150 orang di luar kelompok tersebut.

Pemimpin bidang teknis tim sebelas, James Clark, menyumbangkan elemen empty “”, dan nama XML itu sendiri. Nama-nama lain yang sempat diusulkan antara lain MAGMA (Minimal Architecture for Generalized Markup Applications), SLIM (Structured Language for Internet Markup), dan MGML ( Minimal Generalized Markup Language).

Pada 10 Februari 1998, XML 1.0 direkomendasikan secara resmi oleh W3C.

XML 1.0 merupakan pencapaian tim sebelas dalam mendesain markup language untuk tujuan penggunaan di Internet, yang serba guna, dan kompetibel dengan SGML. Selain itu, XML 1.0 juga mendukung pengembangan software yang memprosesnya, meminimalisasi fitur-fitur opsional, terbaca oleh manusia, singkat, padat, dan mudah untuk ditulis.

Sampai artikel ini ditulis, telah dilakukan kali ketiga perbaikan minor pada XML 1.0 perbaikan kedua menghasilkan XML 1.1, yang kini telah menjalani satu kali perbaikan. Pada 16 Agustus 2006 yang lalu, XML 1.0 Fourth Edition, dan XML 1.1 Second Edition dipublikasikan. Keduanya dianggap sebagai versi terakhir XML yang ada sekarang.

Kegunaan XML didesain sebagai solusi interoperabilitas antarsoftware dari platform yang berbeda. Misalnya software A berjalan diatas platform Java, ingin berbagi informasi dengan software yang berjalan di atas platform .NET. software A akan membaca request dari software B dalam format XML.

Atau bisa jadi software A menyediakan informasi yang sudah dikemas dalam fomat XML, yang dapat dimanfaatkan oleh software B, C, D, dan seterusnya. Untuk mengakses informasi dalam format XML ini, digunakan tool yang bersifat web service. Contoh yang paling sederhana dari interoprabilitas menggunakan XML ini adalah RSS feed dan aggregator. Saat ini banyak website berita dan blog yang menyediakan informasi yang dikemas dalam format XML, atau dikenal dengan nama RSS feed. Website lain atau aplikasi desktop yang disebut dengan aggregator dapat memanfaatkan informasi ini melalui web service, yakni HTTP, untuk membaca file XML, dan menampilkannya.

Bagaimana XML, dan web service bekerja sama menciptakan layanan baru yang disebut dengan interoprabilitas ini? Seperti yang dijelaskan di atas, XML merupakan markup langage. Namn, berbeda dengan HTML yang memerintahkan web browser bagaimana menampilkan informasi, XML menandai informasi secara terstruktur sehingga memudahkan aplikasi lain mengekstrak, dan menggunakannya.

Seperti halnya HTML, XML juga menggunakan tag-tag. Jika tag-tag pada HTML bersifat baku, tag-tag XML dapat dibuat sendiri, sesuai dengan kebutuhan. Untuk memudahkan aplikasi membaca tag-tag apa saja yang memuat informasi serta struktur hirarkinnya, XML 1.0 dilengkapi dengan DTD ( Document Type Definition) yang terletak pada bagian header file. Untuk menutup kekurangan pada DTD, XML 1.1 mengganti DTD dengan XSD (XML Schema Definition) yang lebih powerful dalam menggambarkan struktur file XML.

Perlu digarisbawahi, walaupun sama-saman turunan SGML, tedak berarti XML dan HTML memiliki sifat yang sama. Seperti yang kita ketahui, HTML memiliki sifat pemaaf.

Jika Anda membuat kesalahan coding pada HTML, web browser akan berusaha tetap menampilkannya sebaik mungkin, dengan menduga apa kira-kira maksud Anda, atau paling tidak web browser mengabaikan tag yang salah. Namun tidak demikian dengan XML. Aplikasi yang menggunakannya akan berhenti dengan tiba-tiba saat menemukan tag yang salah, dan mengatakan bahwa ada yang salah dalam file XML Anda!