Rabu, 18 Juli 2012

Cara menampilkan Gambar di HTML


website di ciptakan dengan tujuan menarik pengunjung agar mengunjungi website anda untuk membaca atau melihat isi dari web anda, dalam artikel-artikel sebelum nya saya sudah menjelaskan tentang bagaimana merubah atau memanipulasi tulisan/text, seperti Cara membuat enter di html dan Cara merubah font di html, di artikel ini saya akan membahas bagaimana caranya memanggil gambar di html.

dengan adanya gambar tentu nya web akan terlihat lebih menarik, adanya banner,logo,dll. sudah pasti web anda pun akan terlihat lebih hidup, hanya anda saja tinggal bagaimana menata gambar-gambar tersebut agar terlihat menarik.

untuk memanggil gambar di html, kita akan menggunakan tag IMG, untuk lebih jelasnya silahkan lihat tag di bawah ini

<img src="tempat menyimpan gambar" height="42" width="42" />

<img src="D:/gambar/a.jpg" height="42" width="42" />


Hasil yang akan keluar adalah





Mari kita pelajari satu persatu

- seperti yang sudah di jelaskan di atas kita menggunakan tag "img".
- yang di ikuti attribute "src" untuk mencari tempat gambarnya di simpan.
- "height" di gunkana untuk mengatur tinggi gambar
- "width" di gunakan untuk mengatur lebar.

mudah bukan.. semoga artikel ini berguna, sampai jumpa di artikel selanjutnya..



Read more

Selasa, 17 Juli 2012

Cara membuat Enter di HTML


Pada artikel kali ini saya akan membahas bagaimana caranya menggunakan "Enter" atau "Line Break" dalam html, pada artikel sebelumnya saya sudah membahas tentang Cara merubah font di htmldan Cara membuat area di html

Jika sebelumnya kita mempelajari cara merubah tulisan, jenis tulisan, warna dan lain sebagainya, maka "Line Break" dalam artikel juga tidak kalah pentingnya, coba saja anda bayangkan bagaimana jika artikel yang anda tulis terus menerus menyambung tanpa adanya "enter" tentu saja ini akan menyebabkan kejenuhan dan membuat kontent sulit untuk di mengerti

Untuk menggunakan "line break" anda hanya perlu menambahkan tag yang sangat sederhana yaitu

<br />

Sangat sederhana bukan, dan saya tekankan di sini karena banyak sekali programer web yang melupakannya, menulis "<br>" sebenarnya sudah bisa membuat line break dengan membuang tanda "/" namun hal ini akan menyebabkan browser mengulang kembali pembacaan script dari atas dan akan terus berulang, bayangkan saja anda mempunyai "100 line break" dalam 1 halaman web, maka jika anda melupakan yang satu ini berarti web browser yang membukanya akan mengulang script tersebut 100 kali sebelum selesai membuka keseluruhan, tentu saja hal ini akan mempengaruhi kecepatan web anda

Contoh hasil :

Ini adalah tulisan
ini adalah

tulisan

Penerapan di dalam web

<html>
<head><title>Membuat Line Break</title></head>
<body>
Ini adalah tulisan<br/>
ini adalah<br/><br/>
tulisan
</body>
</html>

semoga bermanfaat sampai jumpa di artikel berikutnya



Read more

Senin, 16 Juli 2012

Cara merubah Font di HTML


Tulisan merupakan salah satu hal paling penting dalam website, dengan keunikan dan kerapihan tulisan website anda maka pengunjung pun akan merasa lebih nyaman berada di dalam website anda, dalam artikel sebelumnya saya sudah membahas tentang Cara membuat Area di HTML dan Cara merubah tulisan di html

di kesempatan ini saya akan membahas cara mengubah font, warna huruf, jenis huruf, ukuran huruf, dan lain-lainnya

untuk lebih mudahnya silahkan perhatikan tag di bawah ini

<font size="3" color="red">This is some text!</font>
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

dan seperti ini hasilnya

This is some text!
This is some text!
This is some text!

seperti yang anda lihat di script di atas untuk membuat tag font kita menggunakan <font></font> di dalam tag tersebut bisa anda tambahkan atribut-atribut lainya untuk mengubah text, seperti size,color,face dll

<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>

size di gunakan untuk merubah besar kecilnya huruf anda bisa memasukan angka di dalamnya

face di gunakan untuk merubah jenis font untuk namanya fontnya anda bisa mengcopynya dari msword atau dari control panel

color seperti namanya di gunakan untuk merubah warna huruf untuk color lebih di sarankan untuk menggunakan code hexadecimal "#00000" - "#ffffff" untuk angka batasannya 1-9 untuk huruf A-F , anda tinggal tambahkan lambang "#" dan menambahkan 6 karakter gabungan angka atau huruf atau bisa juga angka semua untuk merubah warnanya

Sampai jumpa di artikel selanjutnya... Cara membuat aplikasi mobile
Read more

Cara membuat area di HTML


Di artikel-artikel sebelumnya saya sudah menjelaskan Cara merubah tulisan di HTML dan Cara membuat link di html pada artikel ini saya akan menjelaskan tentang tag "AREA" dalam html.

tag area ini di gunakan untuk membuat sebuah area yang dapat di klik dalam image, biasanya di gunakan dalam mapping atau lain sebagainya.

untuk lebih mudahnya silahkan lihat tagnya di bawah ini

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>


tag img src di gunakan untuk memanggil gambar dan di berikan attribute "usemap"

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />

yang kemudian di lanjutkan dengan membuka tag "map" di bawahnya dengan di beri nama yang sama dengan attribute usemap

<map name="planetmap">
</map>

di dalam tag map itulah kita memasukan tag-tag linknya,

<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />

attribute shape untuk mengatur bentuk areanya, coords tentu saja untuk mengatur titik koordinat di mana kita ingin membuat area yang bisa di kliknya, kemudian href seperti yang di gunakaan untuk membuat link kita letakan alamat yang di tujunya.

untuk contoh lebih lanjut anda bisa mengklik Di sini
Read more

Minggu, 06 Mei 2012

Cara merubah tulisan di HTML

Di posting-posting sebelumnya saya sudah menjelaskan tentang bagimana cara membuat link di HTML,di artikel ini saya akan kembali membahas hal-hal seputar html, yaitu cara merubah tulisan di HTML, style font dan tulisan memegang peranan penting dalam menarik pengunjung, misalnya tulisan tebal untuk judul, atau tulisan miring untuk istilah, dan lain sebagainya...

ada beberapa tag yang bisa di gunakan untuk merubah style tulisan di css, para profesional biasa menggunakan "Style CSS" karena lebih memiliki banyak setting, tetapi sebenarnya menggunakan setting default pun sudah cukup.

Di bawah ini adalah tag yang biasa di gunakan untuk memanipulasi tulisan/text.

Contoh :

<tt>Teletype text</tt>
<i>Italic text</i>
<b>Bold text</b>
<big>Big text</big>
<small>Small text</small>

Teletype text
Italic text
Bold text
Big text
Small text

tag-tag di atas adalah tag yang bisa di pakai untuk merubah text di html, tag di atas juga sudah di support hampir semua browser, seperti mozila,IE,chrome,dll

pengaplikasian didalah html adalah :

<html>
<head>
<title>cara membuat link di html</title>
</head>
<body>
<tt>Teletype text</tt>
<i>Italic text</i>
<b>Bold text</b>
<big>Big text</big>
<small>Small text</small>
</body>
</html>
Read more

Senin, 30 April 2012

Cara membuat link di HTML

pada artikel-artikel sebelumnya saya sudah membahas tentang dasar-dasar dari html, tentang html,head,body, cara membuat web sederhana dan lain-lain

pada kesempatan ini saya akan membahas tentang link dalam HTML, link berfungsi untuk menghubungkan suatu halaman dengan halaman yang lain, pada link ini anda bisa juga menggunakannya untuk mengirim data yang nanti akan di gunakan dalam PHP, fungsi link ini banyak sekali dan sangat penting dalam html. agar lebih jelas silahkan lihat contoh link di bawah ini:



Contoh :

4algo.blogspot.com

Nah ketika anda mengklik link di atas anda akan terkirim ke alamat halaman yang ada pada link tersebut, didalam web browser sendiri secara default tampilan link akan :

- Link yang belum dikunjungi = Underline + Berwarna Biru
- Link yang sudah dikunjungi = Underline + Berwarna Ungu
- Link yang sedang aktif = Underline + Berwarna Merah

tentu saja seting default ini bisa di rubah, untuk merubahnya anda bisa menggunakan attribut atau menggunakan style, tetapi lebih di rekomendasikan menggunakan style karena akan membuat link tersebut tampak lebih menarik

Penulisan Code Link pada HTML adalah :

<a href='www.4algo.blogspot.com'>4algo.blospot.com</a>

tag link ini di tempatkan di dalam tag body.

Contoh :

<html>
<head>
<title>cara membuat link di html</title>
</head>
<body>
<a href='www.4algo.blogspot.com'>4algo.blospot.com</a>
</body>
</html>

Mudah bukan... untuk mempercantik link dalam html akan di bahas di lain waktu.
Read more

Selasa, 24 April 2012

Tag Body HTML

Sekarang Saya akan membahas tentang tag pada html yaitu "BODY" di artikel-artikel sebelumnya di jelaskan bahwa tag "BODY" adalah tag yang di dalamnya ditempatkan seluruh content dari website anda,

Format dari tag body sendiri adalah

<body></body>

di antara bagian <body> dan </body> inilah anda akan meletakan tag-tag lain yang akan di baca oleh web brower dan akan di tampilkan di layar.

sebenarnya tag body sendiri bisa lebih di buat lebih komplek dengan menambahkan kode-kode tertentu, para web programer profesional biasa menggunakan CSS atau Javascript untuk mengubahnya menjadi lebih menarik, tetapi sekarang saya hanya akan membahas bagian HTML nya saja

seperti yang sudah di jelaskan di atas bahwa tag body pada dasarnya berformat <body></body> tetapi sebenarnya anda bisa menambahkan kode lain yang bernama "Atribute" pada tag HTML

Contoh :

<BODY BGCOLOR=white TEXT=black LINK=blue ALINK=green VLINK=red> </BODY>

kode-kode sepert BGColor, text, link itulah yang di namakan atribute, atribute adalah tambahan setting pada tag dasar html dan "=white","=black","=blue" itu dinamakan Value, dan juga sedikit saran ketika anda memaskan nilai value harap menambahkan tanda ' ' contoh bgcolor='white' karena ini akan mempengaruhi ketika anda mengunkaan PHP

Atribute dalam HTML di bagi menjadi 3 dan di bawah ini adalah atribute-atribute yang bisa anda tambahkan pada tag BODY yaitu : , untuk penjelasan lebih jelas silahkan klik Atribute HTML

A. Optional Atribute

- alink = warna untuk link yang aktif
- background = membuat backround website menjadi gambar
- link = warna link default
- text = warna default pada seluruh text di website anda
- vlink = warna untuk link yang sudah di kunjungi

B. Standar Atribute

- class = memberikan class pada tag (di hubungkan pada javascript atau css)
- dir = memberikan text direction pada tag
- id = sama sperti class hanya tingkatannya lebih tinggi (di hubungkan pada javascript atau css)
- lang = memberikan spesifikasi bahasa pemrograman pada tag
- style = kode style sama seperti css, dan css adalah kumpulan style-style yang di jadikan file
- title = memberikan informasi tambahan pada tag
- xml:lang = memberikan spesifikasi bahasa pemrograman pada tag, di XHTML dokumen

C. Event Atribute

onclick = Script akan di jalankan ketika mouse mengklik
ondblclick = Script akan di jalankan ketika mouse double klik
onload script = Script akan di jalankan ketika dokumen di load
onmousedown = Script akan di jalankan ketika tombol mouse di tekan
onmousemove = Script akan di jalankan ketika mouse di gerakan script Script to be run when mouse pointer moves STF
onmouseout = Script akan di jalankan ketika pointer keluar dari element
onmouseover = Script akan di jalankan ketika pointer menyentuh element
onmouseup = Script akan di jalankan ketika tombol mouse di teken kemudian di lepas
onkeydown = Script akan di jalankan ketika keyboard di tekan
onkeypress = Script akan di jalankan ketika keyboard di tekan kemudian di lepas
onkeyup = Script akan di jalankan ketika tombol keyboar di lepas
onunload = Script akan di jalankan ketika dokumen di unload
Mudah bukan.... semoga bermanfaat
Read more

Sabtu, 21 April 2012

Tag Meta HTML


Seperti yang sudah saya jelaskan sebelumya, pada artikel-artikel sebelumnya Membuat Web Sederhana, Apa itu tag html, di jelaskan bahwa html itu di bagi menjadi 2 bagian besar, "HEAD" dan "BODY", "HEAD" di gunakaan memberikan informasi, dan "BODY" untuk isi web anda.

Tag-tag yang ada pada elemen "HEAD" tidak akan di tampilkan di web browser, tetapi tag-tag pada elemen ini berfungsi untuk memberikan informasi tentang halaman website anda

Pada elemen "HEAD" ada beberapa tag yang bisa digunakan, tetapi kita tidak membahas semua tapi hanya tag-tag yang penting saja, sampai sekarang tag meta masih di pakai untuk meningkatkan SEO (search engine optimization) suatu website, ada 3 tag yang cukup penting yaitu:

1. Tag Meta Author

tag "META AUTHOR" ini berfungsi untuk memberikan informasi tentang penulis isi content web anda, Contoh tag meta author :

<meta name="Author" content="Nama perancang ">

2. Tag Meta Description

Tag "META DESCRIPTION" ini di gunakan untuk mendekripsikan website anda pada mesin pencari, tag ini akan berfungsi saat anda menggunakan search engine yang mengindex website anda secara otomatis, nah search engine itu akan mencari tag deskripsi ini di website anda.

Contoh tag meta description :

<meta name="Description" content="Deskripsi website ">

3. Tag Meta Keyword

tag "META KEYWORD" ini akan berfungsi jika ada search engine yang bertipe auto robot yang secara otomatis akan mencari kata-kata di website anda melalui tag ini dan di simpan di database mereka, dan jika ada seseorang menggunakaan search engine tersebut kemudia memasukan "keyword" yang sama seperti tag meta keyword yang ada di website anda maka nama website anda akan termasuk dalam salah satu hasil pencarian.

Contoh tag meta keyword :

<meta name="Keywords" content="keyword website anda">

Pada intinya tag meta ini di gunakaan untuk meningkatkan SEO kita di search engine, SEO ini sangat penting karena sangat berpengaruh terhadap banyaknya pengunjung website kita nanti

Di bawah ini contoh script meletakan tag meta di website anda
<html>
<head>
<title>Halamanku</title>
<meta name="Author" content="Nama Perancang">
<meta name="Description" content="Deskripsi Website">
<meta name="Keywords" content="Keyword Website Anda">
</head>
<body>
contoh Tag Meta
</body>
</html>

Di artikel selanjutnya kita akan membahas tentang "TAG BODY" silakan klik Tag Body HTML
Read more

Selasa, 17 April 2012

Membuat Web Sederhana


Sebelumnya saya sudah membahas tentang apa itu HTML, dan apa itu tag HTML, di artikel kali ini saya akan menjelaskan bagaimana cara membuat sebuah website sederhana yang di jalankan di komputer pribadi (belum online).

Membuat Sebuah Tampilan Web Sederhana

Seperti yang sudah saya jelaskan di artikel-artikel sebelumnya bahwa sebuah halaman web menggunakan standar HTML tertentu, dan saat ini standar terakhirnya adalah HTML 5.0

Pada dasarnya HTML di bagi menjadi 2 bagian besar, yang pertama adalah bagian "Head" dan "Body", di bagian "Head" ini kita bisa menambahkan script-script tambahan seperti css,javascript, dll, yang tidak akan di tampilkan, dan "Body" berfungsi untuk memberikan informasi-informasi yang akan di tampilkan di web browser

Langsung saja kita mencoba membuat sebuah website sederhana:

1. Buka Notepad anda atau aplikasi lain yang bisa di pakai menulis. di aplikasi inilah anda akan menulis code-code yang akan menjadi sebuah halaman website, bagi para web developer profesional biasanya mereka menggunakan software khusus untuk mempermudah pekerjaan mereka karena code yang mereka buat buka 10 - 20 baris melainkan bisa mencapai ribuan baris.

2. Jika anda sudah membuka notepad, sekarang silahkan tulis kode html sederhana di bawah ini

<html>
<head>
<title>Halaman sederhana...</title>
<!-- bagian header berisi informasi tambaha yang
menjelaskan dokumen ini dan
tidak ditampilkan -->
</head>

<body>

<!-- semua instruksi untuk mengatur tampilan -->

<h3> Halaman web sederhana... </h3>
</body>
</html>

3. Kemudia save file tersebut dengan nama "latihan1.html" dan kemudian klik 2 kali file html tersebut untuk membukanya. dan akan tampil



- <title>Halaman sederhana...</title> : lihat bagian atas fungsi title ini untuk memberikan judul di bagian tab web browser, untuk "SEO" hal ini sangat lah penting - <h3> Halaman web sederhana... </h3> : kode inilah yang menyebabkan tulisan "Halaman web sederhana" terlihat lebih besar, coba anda rubah "h3" menjadi "h1" atau "h2" - Seperti yang sudah saya jelaskan di artikel sebelumnya bahwa fil html selalu di mulai dengan <html> dan di tutup dengan </html> Mudah bukan?? yang perlu anda lakukan sekarang adalah mencari tahu lebih jauh lagi tentang tag-tag html, yang nanti akan saya ajarkan di artikel selanjutnya.
Read more

Senin, 16 April 2012

Apa itu tag HTML


Sebelumnya di artikel sebelumnya "Apa itu HTML" saya sudah menjelaskan tentang apa itu HTML, dan saya juga sudah menyinggung tentang tag html, di artikel ini saya akan membahas tentang "Apa itu tag HTML".

di saat sebuah browser (mozilla,dll) menampilkan sebuah halaman web, misalnya 4algo.blogspot.com, yang browser tersebut baca atau terjemahkan adalah kode-kode spesial yang biasa disebut "tag HTML" yang di tandai dengan tanda"<" dan ">"

tag HTML pada umumnya di buat secara berpasangan, terdapat tag pembuka dan tag penutup, namun aja juga yang tidak memiliki tag penutup, nanti akan di jelaskan di artikel selanjutnya.

Format umum tag HTML adalah :

<nama_tag> content / isi </nama_tag>

Contohnya :

<h1> 4algo.blogspot.com </h1>

apa itu tag "H1", tag inilah yang akan di baca oleh browser, yang nanti akan menampikan text "4algo.blogspot.com" dengan tanda header lv 1, tag html dapat menginstruksikan web browser untuk menebalkan, memiringkan,dll dan untuk desainnya anda bisa menggunakan "CSS" untuk memperindah tampilan web atau pun "Javascript" yang nanti akan saya bahas.

seperti yang sudah saya jelaskan di atas bahwa pada umumnya tag html mempunyai tag penutup, nah tag penutup nya ini wajib di berikan tanda "/" untuk menginformasikan bahwa proses tagging berhenti kepada web browser, jika anda lupa memberikan tag penutup maka web browser akan terus semua isi web dengan format tag yang lupa di tutup tadi, dan website yang anda buat tidak akan menjadi seperti yang di harapkan

penulisan tag html sendiri tidak memperhatikan penggunaan besar kecilnya huruf (case in-sensitive), dan akan menampilakan tampilan yang sama, tidak seperti di beberapa bahasa pemrograman yang lain (VB , JAVA) yang memperhatikan besar kecilnya huruf yang bahkan bisa menyebabkan komputer hang, namun kesalahan di html hanya akan berpengaruh pada tampilan web saja.

web browser memang sengaja di rancang hanya mengenali dan menampilkan beberapa tag saja dari keseluruhan standar tag "W3C" bila ada tag html yang tidak diketahui oleh web browser maka tag tersebut akan di abaikan dan di anggap tidak ada.

Contoh :

<tag_tak_terbaca><h1> 4algo.blogspot.com </h1></tag_tak_terbaca>

maka data yang akan terbaca oleh web browser hanya "h1" dan tag "tag_tak_terbaca" akan diabaikan oleh web browser.

apakah anda sudah paham "apa itu tag html", jika sudah silahkan tinggalkan komentar untuk kritik dan sarannya.
Read more