Apa itu HTML?
HTML = HyperText Markup Language. Bahasa Markup ( berdasarkan id.wikipedia, bahasa markup berarti kombinasi teks dan informasi tambahan mengenai teks tersebut. markup = markah/penanda, atau dalam HTML <tag> yang memberikan fungsi tertentu ) yang digunakan untuk membuat sebuah halaman web. HTML adalah standar yang digunakan untuk sebuah halaman web. HTMl di definisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).Itu tadi definisi dari HTML. bisa dijelaskan lebih detil lagi?
Hmm… Sederhananya begini. Saya yakin anda semua mengetahui file .doc nya microsoft word. nah, ini ada jenis file, yang namanya HTML. kalau file microsoft word itu .doc, file HTML ini ekstensinya .htm atau .html. HTML ini merupakan file yang di taruh pada satu komputer ( server ) dan dapat di akses oleh komputer lain melalui aplikasi web browser. isi file HTML terdiri dari dua jenis : konten dan atribut. konten merupakan informasi dari file HTML itu sendiri, yang ditampilkan pada halaman browser. sedangkan atribut merupakan tag yang memiliki fungsi tertentu, dan tidak ditampilkan di halaman browser.Contoh :
<html>tulisan ini konten dan ini link merupakan konten. dan ini ditampilkan pada browser. yang berada di dalam tanda < dan > merupakan atribut. Atribut tidak di tampilkan di halaman browser.
<head>
</head>
<body>
<p>ini konten. <a href=”">ini link</a></p>
</body>
</html>
masih agak bingung? ok. buka aplikasi notepad anda, copy kode diatas dan paste pada notepad. Save dengan nama contoh1.html. File HTML dapat dibuat menggunakan berbagai aplikasi editor kode. Namun sederhananya, Anda dapat membuat file HTML menggunakan aplikasi notepad yang pastinya terinstall di semua komputer ber OS windows. cukup tuliskan kodenya, lalu save dengan nama file + .htm atau .html . Contoh : namafile.htm. sekarang, buka file yang anda save tadi. dobel klik, dan file tersebut akan terbuka pada browser default anda. Anda akan paham apa maksud kami setelah itu.
File HTML PASTI dimulai dengan dengan tag <html> ( kecuali deklarasi file. hanya deklarasi file yang ditulis sebelum tag <html>. kita bicarakan ini nanti ) dan ditutup dengan tag </html>. Setiap file html di dalam tag <html> terbagi kedalam dua bagian : head dan body.
- bagian head dimulai dengan tag <head> dan ditutup dengan tag </head>. Bagian head ini berisikan atribut – atribut yang berisi informasi mengenai halaman web, dan link menuju file file CSS atau JavaScript yang memberi efek untuk halaman web tersebut
- bagian body dimulai dari tag <body> dan ditutup dengan tag </body> bagian body berisi konten yang ditampilkan pada browser, dan atribut – atribut pendukungnya,
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 :
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 :
Cara Membuat Kotak Blogroll dan Marquee
Ada dua macam kotak blogroll yaitu:
1. Kotak Blogroll Model Textarea
Cara membuatnya :
- 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)
OK SELAMAT MENCOBA......
Kode-kode Warna untuk HTML* 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 :
* 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
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
|
>
|
>
|
<
|
<
|
&
|
&
|
"
|
"
|
(spasi)
|
|
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);keterangan:
overflow: auto;
width: 200px;
height: 200px;
text-align: center; ">
#link1 <br />
#link2 <br />
#link3 <br />
#link...
</div>
- 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......
Tidak ada komentar:
Posting Komentar