Jumat, 12 April 2013

=> Programmer at WEB ^-^

~ PEMROGRAMAN WEB ~

Pertemuan I 

  • Sumber Daya Internet 
 Sumber daya internet atau alamat sebuah halaman web(homepage) yaitu halaman suatu dokumen atau Program yang ingin ditampilkan atau digunakan . Secara umum perlu memasukkan 3 informasi  untuk menuju ke alamat tertentu, yaitu :
  • Protokol,
  • Alamat Server, dan
  • Path File.
  Nah, disini kita akan bertemu dan berkenalan dengan yg namanya "BLOG" .

Blog adalah singkatan dari weB LOG yang merupakan sebuah website yang isinya dapat di update secara reguler. Selain itu, blog juga memungkinkan pengunjung untuk berkomentar. Blog juga dapat dipakai untuk banyak kegiatan, seperti untuk dijadikan buku atau catatan harian online, maupun untuk menulis artikel seperti halnya koran digital.

Oh iia, bagi yg belum mengenal web ... , web itu adalah sebuah penyebaran informasi melalui internet. Sebenarnya antara w.w.w (world wide web) dan web adalah sama karena kebanyakan orang menyingkat www menjadi web saja. Web merupakan hal yang tidak dapat dipisahkan dari dunia internet. Melalui web, setiap pemakai internet bisa mengakses informasi-informasi di situs web yang tidak hanya berupa teks, tetapi juga dapat berupa gambar, suara, film, animasi . Isinya merupakan kumpulan-kumpulan dokumen yang banyak tersebar di beberapa komputer server yang berada di seluruh penjuru dunia dan trehubung menjadi satu jaringan melalui jaringan yang disebut internet.

Ketentuan membuat WEB antara lain:

- Struktur Dasar HTML
- Format Text
- Format Gambar
- Format Tabel
- Format Form
- Format Tag Dinamisasi.

  • ARSITEKTUR WEB
 Arsitektur Website adalah sebuah bentuk perancangan dan pendesainan dari arsitektur itu sendiri, dimana ia melibatkan tekhnis, kriteria estetis dan fungsional.
Bagian dari Arsitektur Web :
 1. Hypertext Transfer Protocol ( HTTP )
 2. WWW ( World Wide Web )
 3. URL ( Universal Resource Locator )
 4. XML ( Extensible Markup Language )
 5. JavaScrip
 6. AJAX.
  • WEB LOG
  Ditulis web log atau Weblog, adalah sebuah situs web yang terdiri dari serangkaian entri diatur dalam urutan kronologis terbalik, sering diperbarui pada sering dengan informasi baru tentang topik-topik tertentu. Informasi dapat ditulis oleh pemilik situs, dikumpulkan dari situs Web lain atau sumber lainnya, atau disumbangkan oleh pengguna.
Sebuah weblog sering memiliki kualitas menjadi semacam "log zaman kita" dari sudut pandang-tertentu. Umumnya, weblog yang dikhususkan untuk satu atau beberapa mata pelajaran atau tema, biasanya kepentingan topikal, dan, secara umum, dapat dianggap sebagai pengembangan komentar, individu atau kolektif pada tema khusus mereka. Weblog dapat terdiri dari ide-ide yang direkam dari individu (semacam diary) atau menjadi sebuah kolaborasi yang kompleks terbuka bagi siapa saja.
  Weblog adalah nama dari sebuah produk perangkat lunak dari Korea Selatan yang menganalisis log akses situs web dan melaporkan jumlah pengunjung, tampilan, hit, halaman yang paling sering dikunjungi, dan sebagainya.

Pertemuan II

  •  STRUKTUR HTML
  Struktur HTML itu, bisa dituliskan seperti berikut ini :

<html>
<head>
<title>
</title>
</head>
<body>


</body>
</html>

Setiap ada tag pembuka maka harus ada tag penutup yang ditandai dengan tanda "/". Contoh :<title></title>, <body> </body>,<html></html>.
Antara tag <title> </title> digunakan untuk menulis judul halaman web yang bersangkutan. Contohnya adalah tulisan "stephanie.jw.lt" yang ada pada pojok kiri atas halaman ini maka penulisannya menjadi : 
<html>
<head>
<title>stephanie.jw.lt
</title>
</head>
<body>


</body>
</html>

Sedangkan antara tag <body> </body> digunakan untuk mengisi apa yang akan ditampilkan pada halaman anda, bisa berupa tulisan, gambar, link dan sebagainya.
Adapun beberapa tambahan yang dapat ditambahkan pada tag <body> adalah sebagai berikut:
  • Meberikan warna background pada halaman web : 
    <body bgcolor="blue">
    Atau dapat juga menggunakan kode warna Hexa (RGB /red-green-blue) yang terdiri dari 6 karakter yang terdiri dari gabungan angka dan huruf, dan penulisannya juga harus diawalai dengan tanda "#"(pagar). 2 karakter pertama mewakili warna merah yang dimulai dari paling rendah 00 sampai paling tinggi ff, atau bisa juga kombinasi huruf dan angka tadi. Begitu juga 2 karakter berikutnya mewakili warna hijau dan 2 karakter berikutnya mewakili warna biru.
    contoh penulisan kode untuk warna hitam #000000, putih #ffffff, merah #ff0000, abu-abu #d3d3d3 dan lain lain sesuai dengan keinginan anda. 
 
  • Memberikan background gambar 
    <body background="gambar.jpg">
    Penulisan format gambar juga harus disertakan seperti *.jpg, *.gif, *.bmp dan lain-lain
    Jika ingin menginginkan warrna background transparan maka ditulis dengan <body bgcolor="transparent"
  • Memberikan warna teks 
    <body text="#000000">
     
  • Mengatur margin halaman 
    <body leftmargin="20" topmargin="20">
     
  • mengatur warna link 
    <body link="#ff0000"vlink="#00ff00"
alink="#0000ff">
     
Dan jika semuanya ditulis bersamaan maka menjadi : 
<body bgcolor="blue"text="#000000" 
leftmargin="20" topmargin="20" 
link="#ff0000"vlink="#00ff00"alink="#0000ff">
 

# SiLaHKaN kaLaU maU dICoBa ~~~ ^-^

  • TAG - TAG DASAR HTML
     Sobat, berikut ini saya akan menjelaskan sedikit tentang tag dasar pada HTML. Tag tersebut berperan sangat penting dalam pembuatan dokumen HTML, berikut adalah beberapa tag yang akan saya jelaskan: 
  • Tag <head>....</head> (header) adalah bagian kepala dari sebuah dokumen HTML.
  • Tag <title>....</title> adalah bagian dari header. Tag ini berfungsi untuk memberikan judul dokumen HTML sobat di web browser. 
  • Tag <body>....</body> adalah isi yang akan ditampilkan di web browser, yang terdiri dari berbagai macam format file, entah itu berupa teks, gambar, link, suara, video, dll.
  • Tag <a>....</a> berfungsi untuk membuat sebuah link di dalam dokumen HTML.
  • Tag <img> berfungsi untuk memasukan gambar kedalam dokumen HTML
  • Tag <font>....</font> berfungsi sebagai pengatur huruf di dokumen HTML, apakah itu mengatur jenis huruf, warna huruf, hingga ukuran huruf tersebut.
  • Tag <b>....</b> teks bold atau teks di cetak lebih tebal.
  • Tag <i>....</i> teks italic atau teks di cetak agar miring.
  • Tag <strike>...</strike> effect teks di coret.
  • Tag <u>....</u> teks underline atau teks di cetak dengan garis bawah.
  • Tag <br /> untuk membuat garis baru.
  • Tag <p> untuk memulai paragraf.
  • Tag <marquee>....<marquee> untuk membuat teks berjalan.
  • Tag <table>....</table> untuk membuat sebuah table. 
     Nah, itulah sobat tag-tag dasar harus dikuasai, karena tag-tag tersebut sangatlah penting untuk membuat sebuah dokumen HTML.


Pertemuan III

  • TEMPLATE
   Template merupakan salah satu identitas anda. Kita tidak dapat memilih template secara sembarangan, tentu saja jika website Anda ditujukan untuk konsumsi public. Kita tidak boleh memilih template yang hanya mengikuti selera sendiri, mengabaikan selera public yang menjadi sasaran Anda. Sebenarnya sah-sah saja membuat template yang aneh dan tidak lazim (tidak sinkron dengan tema web).

Sementara itu dalam dunia internet, template adalah layout atau tampilan webblog, atau website yang akan dirancang, atau sebuah desain tampilan halaman dengan berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa program dan siap pakai. Untuk lebih jelasnya, perhatikan gambar-gambar template di bawah 
ini:





Dibawah ini akan saya informasikan alamat-alamat situs yang menyediakan template gratis untuk Anda. 
·         http://www.zoomtemplate.com
·         http://freewebtemplates.com
·         http://www.themesbase.com
·         http://freecsstemplates.com
·         http://www.templatemonster.com
·         http://blogtemplate4u.com
·         http://www.blogger-templates.blogspot.com
·         http://myfreetemplatehome.com
·         http://www.e-webtemplates.com
·         http://www.oswd.org/



 

  Untuk membuat table pada halaman HTML kita harus menggunakan tag <table>…</table>. Elemen pada table berisi properti <tr>…</tr> untuk menentukan baris (table row) atau membuat baris baru yang di dalamnya terdapat property <td>…</td> untuk menampilkan data pada setiap sel table (table data) atau untuk membuat kolom baru.


Sebagai contoh struktur elemen table adalah sebagai berikut :


Maka akan terlihat seperti ini strukturnya :

Sekarang saya akan menjelaskan atribut yang terdapat dalam tag <table>.



Atribut elemen table :



Width                    = Lebar tabel

Height                   = tinggi table

Border                  = tebal garis table

Cellspacing          = spasi antar sel

Cellpadding        = spasi di dalam sel

Align                      = [left | center | right] perataan table

Bgcolor                 = warna latar belakang table



Atribut table row

Align                    = [left | center | right] perataan sebaris sel secara horizontal

Valign                   = [top | middle | bottom] perataan sebaris sel secara vertical

Bgcolor                = warna latar belakang baris



Atribut table data :

Rowspan             = menggabungkan baris

Colspan               = menggabungkan kolom

Align                    = [left | center | right] perataan horizontal

Valign                   = [top | middle | bottom] perataan horizontal

Width                   = lebar sel

Height                  = tinggi sel

Bgcolor                = warna latar belakang sel .

Ketikan script HTML berikut pada note pad lalu simpan dengan ekstensi .HTML lalu jalankan untuk   mencobanya .


 
Pertemuan IV

  • FORM
   HTML form di gunakan untuk menginput data.
Dan biasanya para pembuat website membuat FORM dan di khususkan untuk para user misalnya dalam hal input data, form login dll.

form html akan sangat berguna sekali untuk anda yang ingin membuat website dinamis, mungkin untuk saat ini bagi anda yang baru berkecimpung di dunia website membuat form html belum begitu berpengaruh besar, akan tetapi anda akan membutuhkannya saat anda sudah mahir nanti .
 html form mempunyai tag <form>

contoh

<form>
. masukan element tag
.
</form>
HTML FORM - ELEMEN INPUT
Unsur bentuk yang paling penting dari form adalah elemen input.

Elemen input digunakan untuk memilih informasi pengguna.

Sebuah elemen input dapat bervariasi dalam banyak cara,tergantung pada jenis atribut. Sebuah elemen input dapat di gunakan dengan jenis teks, kotak centang, sandi, tombol radio, tombol submit, dan banyak lagi.

  • INPUT DATA
  Unsur bentuk yang paling penting adalah elemen <input>.

Unsur <input> digunakan untuk memilih informasi pengguna.
Sebuah elemen <input> dapat bervariasi dalam banyak cara, tergantung pada jenis atribut. Sebuah elemen <input> dapat dari bidang jenis teks, kotak centang, sandi, tombol radio, tombol submit, dan banyak lagi.
 
Jenis masukan yang paling umum dijelaskan di bawah ini ... :

-Text Fields

<input type="text"> defines a one-line input field that a user can enter text into:

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>
How the HTML code above looks in a browser:

First name:
Last name:  

 

Radio Buttons

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:

<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
How the HTML code above looks in a browser:

Male Female


Checkboxes

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.

<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car
</form>
How the HTML code above looks in a browser:

I have a bike I have a car


Submit Button

<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:

<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
How the HTML code above looks in a browser:
Username:





  Hhoho, sampai disini aja dulu . Hari berikutna gw bakal bahas lagi lebih banyak ... 可能是有用的 ^-^ .
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)