Tab Menu

4/22/2011

Membuat Album poto

Saatnya bernarsis ria! Hehe....

Kenapa aku bilang begitu? Karena sekarang kita akan mencoba membuat sebuah perintah untuk membuat sebuah album poto. Bagi yang dasarnya narsis, ini ajang pamer diri dan wajib mencoba tag yang aku pelajari ini walaupun sederhana sih. Hehe.....

Baiklah, kembali ke html. Untuk membuat sebuah album poto, pertama-tama kita tentukan dulu poto mana yang akan kita masukkan. Setelah selesai milih, letakkan poto tersebut didalam sebuah folder, dan beri nama sesuka hati anda. Untuk percobaan ini, aku memakai 3 buah potoku. Setelah itu barulah kita membuat link album kita. Link album contoh:

<html>
<body bgcolor="white">
<p><font size="6" color="blue">Album Bibi</font></p><br>
<a href="bibi.html"><img src="bibi.jpg" width="200" height="320"></a>
<a href="bibi1.html"><img src="bibi1.jpg" width="200" height="320"></a>
<a href="bibi2.html"><img src="bibi2.jpg" width="200" height="320"></a>
</body>
</html>

Jangan lupa disimpan dengan nama Album.html. Hasilnya adalah:


















Oke, sekarang album sudah jadi. Biasanya sih sampai disini saja sudah cukup, namun jika kita ingin melihat potonya 1 persatu dengan men-klik salah satu poto di dalam album, kita bisa mengetik tag:

Untuk gambar sebelah kiri:
<html>
<body bgcolor="white">
<a href="album.htm"></a>
<p><font size="6" color="blue" face="jokerman">Bibi</font></p><br>
<img src="bibi.jpg" width="300" height="400"><br><br>
<a href="bibi2.html">previous</a>
<a href="bibi1.html">next</a>
</body>
</html>

Disimpan dengan nama bibi.html. Hasil dari tag diatas adalah:




















Seperti hasil diatas, yang terlihat adalah gambar sebelah kiri (kita bilang aja namanya gambar 1 ya, gambar 2 tuk gambar tengah dan gambar 3 untuk gambar kanan). Untuk melihat gambar lainnya cukup mengklik tombol next dan previous yang ada di bawah gambar 1. Lihat kembali tag yang kita buat tadi. Jika kita men-klik tombol next, maka akan muncul gambar 2 dan jika men-klik previous maka akan muncul gambar 3.
Untuk bisa melakukan hal yang sama dengan poto lainnya, maka kita juga harus membuat link untuk poto yang lainnya. Tagnya hampir sama dengan poto diatas, namun ada bedanya yaitu pada:
  1. img src diganti dengan nama poto yang lain beserta formatnya
  2. Untuk previous, ganti link potonya dengan link poto sebelah kirinya dan begitu juga sebaliknya dengan next.
Jadi, untuk 2 poto lainnya, maka tag nya adalah:
poto yang ditengah:
<html>
<body bgcolor="white">
<a href="album.htm"></a>
<p><font size="6" color="blue" face="jokerman">Bibi</font></p><br>
<img src="bibi1.jpg" width="300" height="400"><br><br>
<a href="bibi.html">previous</a>
<a href="bibi2.html">next</a>
</body>
</html>

Disimpan dengan nama bibi1.html dan untuk poto yang kanan:
<html>
<body bgcolor="white">
<a href="album.htm"></a>
<p><font size="6" color="blue" face="jokerman">Bibi</font></p><br>
<img src="bibi2.jpg" width="300" height="400"><br><br>
<a href="bibi1.html">previous</a>
<a href="bibi.html">next</a>
</body>
</html>


Disimpan dengan nama bibi2.html.

Agak rumit ya? Gak papa kok, asal diikuti dengan baik, pasti berhasil. Silahkan anda mencoba dirumah. Jika ada kesulitan atau kegagalan, silahkan hubungi saya lewat blog ini atau e-Mail saya ya.

Can't wait for next posting..... ;)

Membuat Option, Form dan List

Oke, kali ini mari kita coba membuat pilihan/option. Tag untuk itu hanya sederhana, yaitu:


<html>
<body>
Minuman Favorit:
<form>
<input type="checkbox"name="jus">Jus
<br>
<input type="checkbox"name="Teh es">Teh Es
<br>
<input type="checkbox"name="es kosong">Es Kosong
<br>
<input type="checkbox"name="teh goyang">Teh Goyang
</form>
</body>
</html>

Perintah diatas adalah untuk menampilkan pilihan Minuman favorit.
Ada juga perintah untuk membuat sebuah form. Misalnya kita ingin membuat sebuah form biodata:

<html>
<body>
<fieldset>
<legend>
Biodata
<legend>
<form>
Nama<input type="text" size="30">
NIM<input type="text" size="12">
Agama<input type="text" size="10">
</form>
</fieldset>
</body>
</html>

Hasil dari tag diatas adalah:

Gimana, udah muulai terbiasa? Sekarang kita akan membuat sebuah list, misalnya tentang list matakuliah  Sistem informasi semester 6. Perintahnya:

<html>
<head>
<title> Mata kuliah </title>
</head>
<body>
<h2> Nama Mata Kuliah : </h2>
<ol type="circle">
<li>Pemograman Web</li>
<li>Sosioteknologi</li>
<li>Teknologi open sources</li>
<li>Enterprises Resources Plan</li>
<li>Ansi 2</li>
</ol>
Tampilannya jika berhasil adalah:

yah, tag diatas masih sederhana dan simple. Sedikit demi sedikit kita akan semakin menjumpai tag-tag yang mulai rumit dan susah. Tunggu saja ya... hehe...

See you again folks... 

4/21/2011

Tag Dasar HTML

Postingan ini akan menjelaskan beberapa tag html yang biasa aku gunakan dalam membuat sebuah web sederhana. Sebelum aku jelaskan tagnya, ada baiknya aku beritahu dahulu apa itu Tag Html.

HTML singkatan dari Hyper Text Markup Language adalah file teks atau file ASCII yang berisi instruksi untuk menghasilkan suatu tampilan grafis yang ditujukann kepada web browser dari sebuah halaman web. Didalam file HTML terdapat beberapa "tag" atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor.
File HTML dapat dibuat dengan aplikasi text editor apapun di sistem operasi apapun, antara lain : Notepad di Windows, emasc atau vi di Unix atau SimpleText di Macintosh. File HTML ini juga bisa dibuat di aplikasi word processor apapun asalkan saat menyimpan file tersebut disimpan dengan format text-only
Salah satu kelebihan file HTML adalah cross platform, artinya file HTML dapat ditampilkan di beberapa Operating System (OS) yang berbeda dan memiliki tampilan yang sama walaupun saat pembuatannya menggunakan satu OS tertentu saja.
Didalam penulisan html ini, ada beberapa aturan baku yang tidak dosa hukumnya kalo dilanggar. Diantaranya:
  1. Setiap tag berada didalam kurung <....> dan diakhiri dengan
  2. Diawali dengan tag dan diakhiri dengan
  3. Pakai huruf besar atau huruf kecil sama saja karena tidak bersifat case sensitive 
  4. Ketika di save, makanya formatnya adalah .htm atau .html 
Ini adalah tag yang biasa aku gunakan:



dding: 0.04in" width="85%">
Memberi komentar atau keterangan. Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser
om: 1px solid #000000; border-left: 1px solid #000000; border-right: 1px solid #000000; padding-top: 0in; padding-bottom: 0.04in; padding-left: 0.04in; padding-right: 0.04in" width="85%">
Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut
!– –
a href
a name
Membuat nama bagian yang didefinisikan pada link pada halaman yang sama
area
Mendefinisikan daerah yang dapat diklik (link) pada image map
b
Membuat teks tebal
basefont
Membuat atribut teks default seperti jenis, ukuran dan warna font
bgsound
Memberi (suara latar) background sound pada halaman web
big
Memperbesar ukuran teks sebesar satu point dari defaultnya
blink
Membuat teks berkedip
body
Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link
br
Pindah baris
caption
Membuat caption pada tabel
center
Untuk perataan tengah terhadap teks atau gambar
comment
Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser
dd
Indents teks
div
Represents different sections of text.
embed
Menambahkan sound or file avi ke halaman web
fn
Seperti tag
font
Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks
form
Mendefinisikan input form
frame
Mendefinisikan frame
frameset
Mendefinisikan attribut halaman yang akan menggunakan frame
h1 … h6
Ukuran font
head
Mendefinisikan head document.
hr
Membuat garis horizontal
html
Bararti dokumen html
i
Membuat teks miring
img
Image, imagemap atau an animation
input
Mendefinisikan input field pada form
li
Membuat bullet point atau baris baru pada list (berpasangan dengan tag
in">,
    ,
      and
        )
map
Mendefinisikan client-side map
marquee
Membuat scrolling teks (teks berjalan) – hanya pada MS IE
nobr
Mencegah ganti baris pada teks atau images
noframes
Jika browser user tidak mendukung frame
ol
Mendefinisikan awal dan akhir list
p
Ganti paragraf
pre
Membuat teks dengan ukuran huruf yg sama
script
Mendefinisikan awal script
table
Membuat tabel
td
Kolom pada tabel
title
Mendefinisikan title
tr
Baris pada tabel
u
Membuat teks bergaris bawah


Yah, mungkin cukup sekian dulu untuk malam ini. Postingan berikutnya kita akan coba membahas bagaimana membuat sebuah tabel dan sebuah album gambar. Wah, aku sudah tidak sabar lagi nih......

See you next time aja deh.... :)






4/20/2011

Setelah Alpa setahun.....

Wahh...
Sudah terlalu lama nih gk ada update blog lagi. Bahkan inipun mungkin karena ada tugas dari kuliah makanya aku nulis lagi. Mudah-mudahan aja ini bisa jadi awal mulainya aku nulis di blog ini. Amin. Hehehe....

Baiklah, seperti yang udah aku bilang tadi, aku nulis(lagi) di blog ini karena ada tugas kuliah. Nama kuliahku itu Pemograman Web. Nama dosennya M.Ridha, ST (udah saya promosikan nih nama bapak, kasih nilai bagus ya pak, hehe...).

Dalam matakuliah ini, aku membuat sebuah Web pribadi dan Web perusahaan yang insyaalah juga akan aku tampilkan link nya disini jika sudah selesai. Aku membangun web nya dari nol alias dari yang tidak ada sama sekali kemudian tiba-tiba terjadi ledakan besar yang kita namakan Big Bang yang kemudian barulah semua yang ada didunia ini muncul... ok, aku ngawur, jangan dianggap terlalu serius, ok?


Dalam membangun web, aku menggunakan Tag HTML. Dosenku sengaja mengajari seperti ini dikarenakan ini adalah dasarnya dasar dalam membuat sebuah web. Bisa aja sih sebenarnya aku disuruh membuat web dari sebuah CMS misalnya? Seperti Joomla mungkin? Namun kalo seperti itu, aku tidak akan mempunyai dasar yang cukup kuat. CMS diatur sedemikian rupa sehingga tidak terlalu merepotkan dalam penggunaanya. Nah, dengan CMS kita tak perlu repot-repot membuat coding. Ini yang tidak ingin dilakukan oleh dosenku karena jika kita pintar coding, mau bagaimana pun situasinya kita bisa membuat sebuah web sendiri meskipun sederhana. ngertikan?

Yah, itu aja deh dulu.
Di postingan berikutnya aku akan mulai memberi info tentang apasaja Tag Html yang udah aku buat, mulai dari yang sederhana sampe yang agak rumit(menurut aku lho...).

See you next time...