Mengenal Form dalam HTML

Assalamualaikum sobat, alhamdulillah kita masih berjumpa lagi, kali ini ane mau berbagi informasi aja seputar HTML lagi nih, buat yang masih setia nungguin artikel ini, yuk mari kita bahas bersama. kali ini kita akan mengenal Form dalam HTML. apa sih yang dinamakan Form ? menurut definisi ane sendiri Form itu bisa dikatakan sebuah lembar kerja atau sebuah halaman yang dapat kita input atau kita isikan sesuai dengan label atau ketentuannya, contohnya banyak sekali, gak usah jauh jauh, pada bagian bawah artikel ini ada kolom komentar, itu pun dapat dikatakan sebagai Form, lalu pendaftaran E-mail, juga dikatakan sebagai Form, nah skarang mari kita bahas satu persatu.

Digunakan untuk menerima masukan/input dari user dan memproses hasil inputan tersebut di server, biasanya kedalam script PHP. User menerima informasi melalui sejumlah elemen yang disebut kontrol. Kontrol ini dapat berupa TEXTBOX, CHECKBOX, RADIO BUTTON, LIST MENU, BUTTON dan lainnya. Sintak penulisan form adalah:

<form method="post atau get" action="program_pemroses">

elemen - elemen didalam FORM

</form>

Atribut METHOD mempunyai dua nilai yaitu POST dan GET. Metode GET mengirimkan data pada server dengan cara meletakkan data pada bagian akhir URL yang ditunjuk. Metode POST mengirimkan datanya secara terpisah. Jika data masukan banyak, lebih disarankan untuk menggunakan metode post. Atribut ACTION berisi URL dari program yang dipanggil oleh form tersebut.

Selain Form sebagai media penghubung ada juga yang disebut dengan TextBox.
Textbox digunakan untuk memasukkan data string sebanyak satu baris. Cara penulisannya adalah:

<input type=text name=textbox1 size=xx >

Atribut TYPE untuk menentukan jenis masukan yang berupa TEXT (textbox), NAME adalah identifikasi/penamaan elemen ini untuk dibaca oleh program pemroses nantinya. Atribut VALUE untuk memberi nilai suatu masukan. Sedangkan atribut SIZE digunakan untuk menentukan panjang atau banyaknya karakter sebuah masukan. Untuk menyembunyikan masukan yang ditulis user dalam textbox, dapat menggunakan atribut TYPE="PASSWORD", sehingga tampilan dalam textbox menjadi hidden karakter (*). atau menjadi seperti


<input type=password name=password size=xx >

Screenshoot

CheckBox digunakan untuk memberi beberapa pilihan kepada user, sehingga user dapat memilih salah satu, lebih dari satu pilihan atau tidak memilih sama sekali. Tata cara penulisannya adalah:

<input type=checkbox name=checkbox1 value=on atau off checked>Pilihan 1

Dimana attribut TYPE menentukan jenis masukan yang berupa CHECKBOX, NAME adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses nantinya, VALUE menentukan apakah pada keadaan awal checkbox ini terpilih (ON) atau tidak (OFF). Parameter CHECKED menentukan apakah checkBOX sedang dicentang atau tidak.

Screenshoot

Radio Button Digunakan untuk membuat pilihan. User dapat memilih salah satu pilihan yang tersedia, sehingga user tidak bisa memilih kurang atau lebih dari satu pilihan yang disediakan. Atribut CHECKED memberi tanda bahwa pilihan tersebut sedang diaktifkan, VALUE adalah harga dari pilihan. cara penulisannya :

<input type=radio value="isinya" checked name=nama_radiobuttonh>yg_ditampilkan<br>

Screenshoot

Select Option / List Menu Digunakan untuk membuat menu pilihan. Cara menuliskannya adalah:

<select name=menu1>
<option value-pilihan1>Pilihan 1
<option value-pilihan2>Pilihan 2
<option value-pilihan3>Pilihan 3
dst
</select>

Tag OPTION berfungsi untuk menampilkan pilihan-pilihan yang akan tersedia. Setiap pilihan ditentukan isinya dengan parameter VALUE.

Screenshoot

Textarea Elemen ini digunakan untuk menampilkan masukan berupa textbox yang mampu menerima masukan berupa string lebih dari satu baris.
Sintaknya adalah:

<textarea name=textbox1 rows=xx cols=xx>

Isi Awal

</textarea>

Parameter NAME adalah identifikasi dari elemen ini untuk dibaca oleh program pemroses nantinya, COLS dan ROWS adalah ukuran kolom dan baris textbox ini dalam banyaknya karakter.

Screenshoot

Elemen Tombol / Button Elemen ini digunakan untuk menampilkan tombol yang dapat berupa tombol SUMBIT untuk mengirimkan data ke pemroses di server, RESET untuk mengulangi/mengosongkan isian form atau NORMAL yang tidak berfungsi apapun sebelum kita mendefinisikan sebuah fungsi untuknya.
Format penulisannya adalah:

<input type=submit value=OK name=tombol1>untuk tombol SUBMIT
<input type=reset value=reset name=tombol2>untuk tombol RESET

Screenshoot

nah itulah beberapa type yang tergolong dalam form, sobat bisa mencobanya langsung atau mendownload filenya.. yang sudah saya siapkan untuk memudahkan sobat semua.

Download File Mengenal Form dalam HTML

Dan mungkin cukup sekian posting ane kali ini, semoga ada manfaatnya buat kita smua dan ane tunggu untuk komentarnya, kita berjumpa lagi pada postingan berikutnya thanks for visit my blog.
wassalamualaikum

Read more ...

Posted by Unknown | No comments:

Membuat Table dalam HTML

Assalamualaikum sobat, alhamdulillah kita masih bisa berjumpa kembali, maaf ane jarang update, sibuk dengan aktifitas kuliah.. tapi untuk berbagi ilmu, ane sempatkan waktu ane untuk menulis di gubuk ane yang sederhana ini. materi kali ini adalah tentang pembuatan sebuah tabel dalam HTML, nah langsung aja kita bahas..

Tabel / Table merupakan cara untuk menampilkan informasi dalam halaman web dengan bentuk kolom dan baris. Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu: <TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tag <TR> dan <TD> harus terletak di antara tag <TABLE> dan </TABLE> . Table juga biasanya digunakan untuk memperhalus tampilan sebuah form atau layout sebuah halaman web.

<TABLE> Digunakan untuk mendefinisikan pembuatan tabel. Dan memiliki attribut:

• align - perataan: rata kiri (left), tengah (center) atau kanan (right).
• valign- mengatur bentuk perataan secara vertikal
• bgcolor- mengatur warna latar belakang (background) dari tabel.
• background - menentukan gambar yang digunakan sebagai background tabel
• color - Untuk mengatur warna suatu sel dalam tabel
• border - menentukan ukuran border tabel (dalam pixel).
• rowspan - menggabungkan beberapa baris
• colspan - menggabungkan beberapa kolom
• cellpadding - jarak antara isi cell dengan batas cell (dalam pixel).
• cellspacing- mengatur spasi/jarak antar cell (dalam pixel).
• width - menentukan lebar tabel dalam pixel atau percent.
• height- Menentukan tinggi tabel

<TR> Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:

• align - perataan: rata kiri (left), tengah (center) atau kanan (right).
• bgcolor - warna latar belakang dari baris.
• valign - perataan vertikal: top, middle atau bottom.

<TD> Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya adalah:

• align – untuk menentukan perataan kolom
• background – untuk menentukan image yang digunakan sebagai latar belakang dari kolom.
• bgcolor – untuk menentukan warna latar belakang
• height – untuk mengatur ukuran tinggi cell dalam pixels.
• nowrap – untuk membuat supaya isi dari kolom tetap berada pada satu baris.
• valign – untuk mengatur perataan vertikal: top, middle atau bottom.
• width – untuk menentukan lebar kolom dalam pixel atau percen.

nah itulah sedikit penjelasan tentang table dan attribut yang dapat kita gunakan dalam table. nah dibawah ini adalah script dasar pembuatan tabel dengan 3 kolom dan 2 baris.

<html>
<head>
<title>.:: Membuat Tabel ::.</title>
</head>
<body>

<table width="300" border="1">
<tr>
<td>Kolom 1</td><td>Kolom 2</td><td>Kolom 3</td>
</tr>
<tr>
<td>Baris 1</td><td>Baris 1 </td><td>Baris 1</td>
</tr>
<tr>
<td>Baris 2</td><td>Baris 2 </td><td>Baris 2</td>
</tr>
</table>

</body>
</html>

dan hasilnya

nah itulah penjelasan singkat membuat tabel dalam HTML, sobat bisa mencoba menggunakan attribut lainnya yang terdapat dalam HTML, kalau sobat memang kesulitan menggunakan notepad, sobat bisa menggunakan program Adobe Dreamweaver. mungkin cukup sekian posting kali ini, mohon maaf bila ada kekurangan, dan smoga artikel kali ini dapat bermanfaat buat semua, kita berjumpa lagi pada postingan berikutnya.

Wallahul-muwaffiq ila Aqwamith-thoriq 
Wassalamualaikum

Read more ...

Posted by Unknown | 5 comments:

Menyisipkan Gambar dalam HTML

Assalamualaikum sobat, alhamdulillah kali ini kita masih bisa berjumpa lagi di postigan blog ane yang sederhana ini. kali ini ane mau share masih seputar Perencanaan pembuatan web dasar menggunakan HTML. kalau beberapa waktu lalu kita sudah membahas tentang Hyperlink, kali ini kita akan membahas bagaimana cara menyisipkan atau memasukkan gambar pada HTML. Gambar dalam pembuatan atau penyusunan sebuah website merupakan suatu hal yang dapat dikatakan wajib, karena bila sebuah halaman web tidak memiliki gambar, maka web tersebut akan terlihat monotone, tidak interaktif dan tidak menarik, nah untuk itu mari kita sama sama pelajari dari dasarnya.

untuk menampilkan image atau animasi gif pada halaman web, Tag yang digunakan adalah :

<img src="nama file gambar">

Attribut yang dimiliki tag <img> adalah: title, align=(center, left, right), hspace, vspace, border, width dan height. Jika attribut ukuran gambar tidak dituliskan (width dan height), maka gambar ditampilkan sesuai dengan ukuran aslinya. Untuk mengatur ukuran gambar, menggunakan attribut width dan height. Attribut align digunakan untuk perataan posisi gambar. Attribut border, digunakan untuk memberi bingkai atau garis tepi pada gambar. Sedangkan title, digunakan untuk memberi keterangan pada gambar jika mouse berada diatasnya. Untuk mengatur letak gambar dapat menggunakan attribut hspace daan vspace.
sebagai contoh saya menggunakan dua buah gambar dibawah ini, dan lalu lihat scriptnya, sobat semua bisa mempraktekkan sendiri, seperti yang kita lakukan pada posting sebelumnya.

Gambar 1

Gambar 2

Dan sobat bisa menggunakan gambar yang lain, dan scriptnya sperti ini :


<html>
<head>
<title>::: menampilkan images:::</title>
</head>
<body>

<img src="redhat.jpg" title="Redhat Linux">
<img src="ubuntu.png" title="Ubuntu Linux" width="450" height="300" align="center">


</body>
</html>

nah mungkin sobat bisa ubah gambarnya dengan gambar yang sobat punya asalkan letakkan dalam 1 folder. dan jangan lupa untuk memberikan namagambar beserta dengan ekstensi atau jenis gambar tersebut, misalkan namagambar.jpg. nah buat sobat juga yang mau download file jadinya bisa di download pada link dibawah ini.

Download File Menyisipkan Gambar dalam HTML

link download sudah saya berikan dan sedikit penjelasan juga sudah, maka cukup sekian posting kali ini semoga ada manfaatnya buat semua, dan ane tunggu komentarnya sobat, thanks for visit my blog, kita berjumpa lagi pada postingan berikutnya.
wassalamualaikum

Read more ...

Posted by Unknown | 4 comments:

Membuat Hyperlink dalam HTML Part 2

Assalamualaikum sobat, alhamdulillah kali ini ane masih sempet update blog ane yang sederhana ini, thanks buat sobat yang masih sering mampir, semoga apa saja yang terdapat dalam blog ini dapat bermanfaat buat kita semua dan menjadi sumber pahala baru buat kita. Nah Postingan kali ini adalah lanjutan dari postingan sebelumnya mengenai Membuat Hyperlink dalam HTML, kalau kemarin kita telah membahas pengertian hyperlink dan syntak dasar hyperlink dalam HTML, kali ini kita akan membahas attribut yang mungkin berguna dalam penggunaaan hyperlink., monggo silahkan disimak yo. sedikit Flashback dari postingan sebelumnya, syntak atau script hyperlink atau yang biasa disebut link adalah sebagai berikut :

<a href="url_tujuan">nama_link</a>

kita dapat menambahkan attribut : Target digunakan sebagai perintah pada browser untuk menampilkan dokumen dengan cara yang lebih spesifik. Secara default tanpa atribut target, browser akan membuka halaman tertentu pada window/tab yang sama. Dengan atribut target, kita bisa menampilkan suatu halaman di tab/window lain yang lebih baru atau bagian frame lain pada suatu halaman web (bagi halaman web yang memiliki elemen frame). Target tersebut diantaranya adalah _blank, _parent, _self, _top, dan biasanya yang sering digunakan, khususnya untuk para pemula, adalah target _blank, dan target _blank bertujuan untuk membuka suatu link pada tab atau pada halaman yang baru di browser. dan penulisan linknya menjadi seperti dibawah ini.

<a href="url_tujuan" target="_blank">nama_link</a>

untuk target dalam iframe, yang nanti akan saya bahas pada pertemuan berikutnya, hanya perlu mengganti kata _blank dengan nama iframe yang dituju. untuk lebih lanjut tentang iframe, nantikan pembahasannya. nah setelah attribut target, kita juga bisa tambahin attribut Title, untuk memberikan sebuah judul pada link ketika mouse hover pada link tersebut. perhatikan contoh link dibawah ini.

Contoh Title Pada Link

nah bila kita mengarahkan mouse ke link di atas maka akan tampil secarik tulisan dengan title Contoh Title Pada Link, lihat gambar dibawah ini, ini adalah contoh title yang akan tampil, pada link diatas.

nah penulisan scriptnya adalah sebagai berikut :

<a href="url_tujuan" title="titlelink">nama_link</a>

ubah kata titlelink menjadi nama title yang diinginkan, dan kita juga dapat menggabungkan kedua attribut ini dalam satu script yaitu menjadi sperti ini :

<a href="url_tujuan" target="_blank" title="titlelink">nama_link</a>

mungkin cukup sekian posting kali ini semoga ada manfaatnya buat kita semua, dan ane tunggu komentarnya ya sobat. thanks for visit my blog, good luck selamat mencoba

Wallahul-muwaffiq ila Aqwamith-thoriq
Wassalamualaikum

Read more ...

Posted by Unknown | 1 comment:

Membuat Hyperlink dalam HTML

Assalamualaikum sobat, alhamdulillah kita masih dapat berjumpa lagi pada postingan dalam blog ane yg sederhana ini, kali ini ane mau berbagi lagi tentang HTML, masih berkelanjutan dengan yang sebelumnya, dan akan terus berlanjut selama saya masih bisa update tentang HTML, biar ga pada bingung, saya ingatkan untuk membaca dari awal materi tentang HTML, untuk para beginner seperti saya, agar tidak bingung. sobat bisa memulainya dari materi tentang Struktur Dasar Web Page HTML. nah bagi yang sudah mengikuti dari awal, monggo kita lanjutkan pembahasannya..

Hyperlink atau yang biasa dikenal dengan Link, Digunakan untuk penghubung antara suatu halaman dengan halaman lain dalam halaman yang mendukung HTML, bisa juga ke URL lain, dan juga digunakan dalam satu halaman untuk berpindah ke sub judul yang lain atau ke lokasi tertentu dalam satu halaman yang sama. Sintak tag link adalah sebagai berikut:

<a href="url_tujuan">nama_link</a>

nah maksud pada script diatas adalah url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link adalah nilai yang akan ditampilkan di browser sebagai teks link atau tombol penghubung. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah dan atribut warnanya dapat diatur dalam tag <body>. nah sebagai contoh lakukan langkah langkah berikut ini untuk membuat link ke dokumen lain, misalkan halaman1.html ke halaman2.html dengan menggunakan link.
Pertama kita buat halaman1.html masukkan script seperti gambar dibawah ini


kemudian simpan dalam folder HTML di desktop, seperti tutorial sebelumnya, atau dimana saja, dengan catatan halaman1.html dan halaman2.html harus dalam 1 folder.



lalu kita buat sebuah halaman lagi dengan nama halaman2.html. masukkan scriptnya seperti berikut ini.


lalu kita simpan di folder HTML di destop, seperti langkah sebelumnya, dan saya ingatkan halaman1.html dan halaman2.html harus dalam 1 folder yang sama.



kemudian kita jalankan, buka folder HTML yang ada di desktop tadi atau tempat kita menyimpan file HTML tersebut. dan buka halaman1.html, saya menyimpannya di desktop dalam folder HTML.

dan hasilnya akan seperti ini.

bila link tersebut di klik maka akan muncul atau akan terbuka halaman2.html seperti ini.



nah, apabila kita klik lagi link pada halaman2.html, maka akan kembali lagi kepada halaman1.html, mungkin itulah konsep atau format pembuatan hyperlink atau link yang biasa kita gunakan dalam blog, atau web, seperti yang biasa saya lakukan dengan memberikan link download. itu juga merupakan sebuah link tetapi menuju URL yang berbeda, scriptnya sama hanya berbeda url_tujuan'nya saja. contoh <a href="http://www.google.co.id">Google</a> nah script tersebut akan menuju ke situs google., nah bagi yang mau download file yang sudah jadi, bisa di download pada link di bawah ini.

Download File Membuat Hyperlink Html Lesson 6

Mungkin cukup sekian posting kali ini, kita berjumpa lagi pada posting berikutnya, semoga bermanfaat, thanks for visit my blog. saya tunggu komentarnya sobat, selamat mencoba
wassalamualaikum

Read more ...

Posted by Unknown | 5 comments:

Marquee dalam HTML Part 2

Assalamualaikum sobat, alhamdulillah kita masih bisa berjumpa lagi, pada kesempatan kali ini. dan kali ini merupakan postingan lanjutan dari Marquee dalam HTML Part 1, nah biar sobat ga bingung bagi yg belum membacanya, silahkan membaca terlebih dahulu artikel sebelumnya. nah bagi yang sudah membaca artikel sebelumnya, langsung aja simak penjelasan berikut ini.

Kalau kemarin kita sudah mempelajari pengenalan script dasar dari marquee dan dengan tambahan atribut direction, untuk mengatur arah gerak marquee, kali ini masih seputar marquee dan atributnya, kita akan menambahkan atribut width dan height dalam marquee. width digunakan untuk menentukan lebar tabel dalam pixel atau percent, sedangkan height digunakan untuk Menentukan tinggi suatu objek. apabila dimasukkan kedalam script marquee kurang lebihnya akan menjadi seperti ini :

<marquee width="200" height="50">Belajar HTML Part 5</marque>

dan contoh hasilnya adalah seperti ini


Belajar HTML Part 5
dan bila di jabarkan secara keseluruhan scriptnya menjadi :


<html>
<head>
<title>.:: Marquee Dalam HTML ::.</title>
</head>
<body>

<marquee width="200" height="50">Belajar HTML Part 5</marque>

</body>
</html>

nah sekarang lakukan hal seperti yang dilakukan pada artikel sebelumnya,, ketik menggunakan notepad, lalu simpan dengan nama latihan7.html atau dengan nama yang sobat inginkan, (dalam tutorial ini saya menyimpan dengan nama latihan7.html) di dalam folder html yg telah dibuat di desktop, pada awal pembahasan tentang html. dan lihat hasilnya.

lalu kita juga dapat mengatur kecepatan, jalan atau geraknya marquee dengan menambahkan atribut scrolldelay dan scrollamount. Scrolldelay Atribut ini digunakan untuk menentukan jeda waktu antara tiap gerakan dari tampilan. Nilai yang diisi untuk atribut ini adalah berupa angka dalam mili detik, scriptnya seperti ini :

<marquee scrolldelay="1"> Belajar HTML Part 5 </marquee>

sobat, bisa ganti nilainya sesuai dengan kebutuhan untuk website sobat sendiri, dengan catatan semakin besar nilainya, maka gerakannya akan semakin lambat. dan hasilnya kurang lebih seperti ini :


Belajar HTML Part 5


dan bila di jabarkan secara keseluruhan scriptnya menjadi :

<html>
<head>
<title>.:: Marquee Dalam HTML ::.</title>
</head>
<body>

<marquee scrolldelay="1"> Belajar HTML Part 5 </marquee>

</body>
</html>


sekarang lakukan seperti biasa, kita masukan script tersebut dalam notepad dan simpan dengan nama latihan8.html atau simpan sesuai dengan keinginan, dan lihat hasilnya.

scrollamount atribut ini digunakan untuk mengatur kecepatan gerakan. misalnya 50 adalah kecepatan yang dipilih jadi seperti ini sciptnya :

<marquee scrollamount="50"> Belajar HTML Part 5 </marquee>

sobat bisa ganti nilainya dengan catatan, semakin kecil nilai maka gerakan semakin lambat, semakin besar nilainya maka gerakannya semakin cepat. dan kurang lebih hasilnya akan seperti ini dengan nilai scrollamout="50"


Belajar HTML Part 5


dan bila dijabarkan secara keseluruhan scriptnya menjadi :


<html>
<head>
<title>.:: Marquee Dalam HTML ::.</title>
</head>
<body>

<marquee scrollamount="50"> Belajar HTML Part 5 </marquee>

</body>
</html>


nah, hampir memiliki persamaan diantara keduanya, namun tetap masing masing mempunyai fungsi tersendiri, Scrolldelay berfungsi untuk menentukan jeda waktu antara tiap gerakan, sedangkan atribut Scrollamount berfungsi untuk menentukan jauhnya lompatan untuk setiap gerakan. sekarang lakukan seperti biasa, kita masukan script tersebut dalam notepad dan simpan dengan nama latihan9.html atau simpan sesuai dengan keinginan.


Marquee juga dapat kita beri sedikit lagi tambahan atribut, agar pada saat mouse kita arahkan ke tulisan tersebut atau istilahnya itu mouseover, maka marquee akan berhenti. dan apabila mouse kita lepaskan atau istilahnya itu mouseout, maka maquee akan kembali berjalan. script ini yang paling sering saya gunakan dalam penggunaan marquee. kurang lebih scriptnya menjadi <marquee direction="right" onmouseover="stop();" onmouseout="start();">Belajar HTML Part5</marquee> jadi kita hanya menambahkan kedua script diatas yaitu onmouseover="stop();" onmouseout="start();". Dan bila kita ketik keseluruhan maka scriptnya akan menjadi seperti


<html>
<head>
<title>.:: Marquee Dalam HTML ::.</title>
</head>
<body>

<marquee direction="right" onmouseover="stop();" onmouseout="start();"> Belajar HTML Part5 </marquee>

</body>
</html>

sekarang lakukan seperti biasa, kita masukan script tersebut dalam notepad dan simpan dengan nama latihan10.html atau simpan sesuai dengan keinginan. dan hasilnya akan seperti ini :


Belajar HTML Part5


dan kita pun juga bisa memodifikasi tulisannya, dengan memberi tag <b></b> untuk bold, <i></i> untuk italic <u></u> underscore.. kita bisa menambahkan tag tag lainnya kedalam marquee, asalkan masih didalam tag <marquee> atau sebelum kode </marquee>, karena itu adalah kode akhir atau penutup tag pada marquee.

nah mungkin cukup sekian posting kali ini kita, lanjutkan pada posting berikutnya, dan thanks for visit my blog, semoga bermanfaat artikelnya, jngn lupa untuk memberikan sedikit komentarnya ya. buat sobat semua yg mau file jadi'nya silahkan download pada link dibawah ini.

Download HTML Lesson 5

wassalamualaikum

Read more ...

Posted by Unknown | No comments:

Marquee dalam HTML Part 1

Assalamualaikum sobat semua, Alhamdulillah kita masih bisa berjumpa lagi pada postingan ini, yaitu membuat tulisan berjalan di sebuah halaman web atau sebuah website yang kita miliki. dan tentunya masih menggunakan script HTML. Postingan kali ini juga merupakan lanjutan dari tutorial atau postingan sebelumnya mengenai HTML, tanpa panjang lebar mari kita simak pembahasannya.

Marquee, merupakan sebuah script atau tag HTML yang fungsinya adalah membuat suatu objek yang berada di tengah script tersebut akan berjalan secara defaultnya dari arah kanan ke kiri.. tag marquee adalah <marquee> Teks atau objek </marquee>. sebagai contoh lihat tulisan dibawah ini yang saya beri tag marquee.

Contoh 1 :

Belajar HTML Part 4

nah scriptnya adalah <marquee> Belajar HTML Part 4 </marquee>. cukup mudah kan sobat membuatnya, jadi kurang lebih bila kita memasukannya dalam sebuah halaman web, pada bagian <body> tinggal masukkan saja script diatas. kurang lebih scriptnya seperti ini :

<html>
<head>
<title>.:: Marquee Dalam HTML ::.</title>
</head>
<body>

<marquee> Belajar HTML Part 4 </marquee>

</body>
</html>

Buka Notepad dan ketik script diatas, sebagai latihan untuk mengingat harap jangan di copy paste tapi usahakan untuk mengetik karena ini adalah latihan dasar.

lalu simpan dalam folder html, dengan latihan5.html dalam folder html di desktop yg telah dibuat pada posting sebelumnya mengenai HTML. dan jangan lupa untuk mengubah save as type menjadi All File.

Kemudian buka file latihan5.html pada folder html, dan lihat hasilnya.



Bila sobat semua memasukkannya secara benar maka akan terlihat seperti Teks Dibawah ini.

Hasil latihan5.html :

Belajar HTML Part 4

nah dalam script marquee juga kita bisa masukkan atribut Direction, yaitu atribut untuk membuat marquee berjalan sesuai dengan atribut yang dimaksud, disini kita bisa masukkan <marquee direction="up"> maka apabila kita masukkan nanti sebuah teks ataupun objek akan berjalan dari bawah ke atas. selain itu kita juga bisa mengganti perintah "up" dengan perintah right, left, down, dan hasilnya maka akan sesuai dengan perintahnya, bila perintah direction = "up" akan bergerak keatas, maka untuk perintah direction="down" akan bergerak ke bawah, begitu juga untuk perintah direction="right", akan bergerak dari kiri ke kanan, dan untuk perintah direction ="left", untuk perintah ini sebenarnya tidak terlalu digunakan karena tanpa direction pun secara normal akan bergerak dari kanan ke kiri, seperti contoh diatas. sebagai contoh berikutnya coba ketikkan script berikut :

Contoh 2 :

<html>
<head>
<title>.:: Marquee Dalam HTML ::.</title>
</head>
<body>

<marquee direction="up"> Belajar HTML Part 4 </marquee>

</body>
</html>

lakukan lah seperti pada contoh sebelumnya, ketikan script berikut pada notepad.

lalu simpan dalam folder html, dengan latihan6.html dalam folder html di desktop yg telah dibuat pada posting sebelumnya mengenai HTML. dan jangan lupa untuk mengubah save as type menjadi All File.

Kemudian buka file latihan6.html pada folder html,




dan lihat hasilnya,

Bila script latihan6.html ini berhasil maka hasilnya akan, menggerakan tulisan dari bawah ke atas..

nah buat sobat semua yang ingin mendownload file yang sudah jadi silahkan saja. link downloadnya ada dibawah ini.

Download HTML Lesson 4

nah mungkin cukup sekian posting ane kali ini semoga ada manfaatnya, thanks for visit my blog, nantikan pembahasan selanjutnya tentang Marquee dalam HTML Part 2, kita berjumpa lagi pada postingan berikutnya jangan lupa komentarnya ya sobat,

wassalamualaikum

Read more ...

Posted by Unknown | No comments:

Membuat Garis Horisontal pada HTML

Assalamualaikum sobat semua, alhamdulillah kita masih bisa berjumpa lagi pada postingan blog ane yang sederhana ini, kali ini ane mau berbagi sedikit pengetahuan, masih tentang web, dan posting kali ini masih berkaitan dengan posting sebelumnya yaitu Membuat Garis Horisontal untuk mempercantik web yang kita buat, dan ini masih ada lanjutannya,, langsung aja simak yoo

<HR>, digunakan untuk membuat garis horisontal. Tag ini mempunyai atribut SIZE, WIDTH, ALIGN dan NOSHADE.
Atribut SIZE digunakan untuk menentukan panjang garis dalam satuan pixel. Atribut WIDTH digunakan untuk menentukan ketebalan garis. Atribut NOSHADE akan menyatakan bahwa garis tersebut ditampilkan tanpa bayang-bayang 3-D. Atribut ALIGN untuk menentukan letak garis tersebut, mungkin ditengah, di sebelah kanan atau di sebelah kiri.
Sebagai latihan mari kita buat dengan syntak seperti gambar dibawah ini. bila scriptnya ga keliatan klik aja gambarnya untuk memperbesar gambar.

kemudian seperti yang sebelumnya save dengan nama latihan 4.html di dalam folder html di desktop sobat.

kemudian buka file latihan4.html yang baru saja disimpan.


dan hasilnya kurang lebih seperti ini.

cukup mudah sobat, dalam membuatnya, dalam syntaknya kita gabungkan syntak syntak atau script script HTML yang sebelumnya telah kita pelajari.

keterangan :
body bgcolor = script untuk membuat halaman atau backgound berwarna sbg contoh #00cc99.
center = untuk membuat posisi suatu objek menjadi ditengah.

Buat yang mau file yang sudah jadi, bisa di download pada link dibawah ini

Download HTML Lesson 3

nah mungkin cukup sekian posting ane kali ini semoga diposting yang singkat ini ada manfaat yang banyak dan, kita berjumpa lagi pada postingan berikutnya, jangan lupa untuk memberikan komentarnya ya sobat, thanks for visit my blog.
wassalamualaikum

Read more ...

Posted by Unknown | No comments:

Belajar HTML Part 2

Assalamualaikum sobat, Alhamdulillah ane masih diberikan kesempatan untuk menambah artikel di blog ane yang sederhana ini, kali ini ane ingin membahas, masih seputar HTML, ini adalah lanjutan dari artikel sebelumnya beberapa waktu yang lalu. yaitu Struktur Dasar Web Page, kali ini yang akan saya bahas yaitu mengenai font jenis, ukuran dalam HTML, bagaimana caranya simak dan praktekan ya sobat.,

Pengaturan warna dalam dokumen HTML menggunakan mode kombinasi RGB (red, green, blue). Setiap warna ditampilkan dalam dua digit nilai heksadesimal (0, 1, 2, ..., F). Setiap bagian dua digit kode menunjukkan banyaknya intensitas dari kombinasi warna merah, hijau dan biru. Misalnya untuk warna kuning, dibuat dengan pencampuran warna sebagai berikut:

Berarti untuk warna kuning dapat dibuat dengan kode #ffff00. Disamping itu, pembuatan warna dapat juga dibuat dengan langsung menggunakan nama warna dalam bahasa inggris, misalnya kuning=”yellow”.

Berikut ini warna-warna yang dapat digunakan dalam halaman HTML.



Untuk mendapatkan halaman web yang baik anda harus melakukan pengaturan terhadap halaman web dan teks-teks didalamnya seperti mengatur warna latar belakang halaman, memilih jenis dan ukuran huruf, perataan, warna teks, menambahkan gambar dll. Tag-tag di bawah ini yang biasa digunakan dalam pengaturan halaman web dan teks:

1. Tag Body digunakan mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi halaman web. Di dalam tag ini bisa diletakkan berbagai page attribute seperti bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.

• Background : digunakan untuk mengatur latar belakang dengan gambar/image.
• Bgcolor : digunakan untuk mengatur warna latar belakang dokumen, dengan warna putih sebagai default-nya.
• Teks : digunakan untuk mengatur warna teks dokumen, dengan warna hitam sebagai warna default.
• Link : Untuk mengatur warna link dokumen dengan warna biru sebagai warna default.
• Vlink : Untuk mengatur warna visited link dokumen dengan default ungu
• Alink : digunakan untuk mengatur warna active link dokumen dengan default merah.
  

2. Heading : <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai nilai antara 1 - 6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan <H6> merupakan ukuran terkecil.

Sebagai latihan, ketik script dibawah ini menggunakan notepad.



Kemudian Simpan dengan nama latihan2.html, dalam folder html yang telah dibuat pada artikel sebelumnya. Belajar HTML Part 1

kemudian buka File latihan2.html pada folder html di desktop.

dan hasilnya akan seperti ini

Font Digunakan untuk mengatur huruf dokumen HTML. Tag FONT mempunyai attribut, yaitu: SIZE, FACE, COLOR. Dan diakhiri dengan Tag .

• SIZE : Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan berkisar antara 1 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan ukuran terbesar
• FACE : Digunakan untuk mengatur jenis atau nama font. Anda bisa memilih maksimal 3 jenis font yang masing-masing dipisahkan oleh koma. Bila terdapat spasi yang terletak pada nama font maka harus digunakan tanda garis bawah (_) atau underscore. Dalam memilih jenis font ini harus dipertimbangkan apakah font yang kita gunakan pada halaman web kita nantinya akan terdapat pada komputer pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar. Tapi bila Anda ingin menggunakan font yang sedikit "aneh" Anda bisa menggunakan graphic.
• COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan nama warna (red misalnya).
  

Sebagai latihan coba kita ketikan script berikut ini :


Kemudian Simpan dengan nama latihan3.html pada folder html yang telah dibuat pada artikel sebelumnya, Belajar HTML Part 1.

lalu buka file latihan3.html untuk melihat hasilnya.

Dan ini adalah hasil dari latihan3.html,

Dari kedua latihan diatas, dapat kita tarik kesimpulan bahwa, tag <Hn>..</Hn> dan tag <FONT>..</FONT> merupakan suatu bagian dari html atau web page yang sangat berperan penting dalam tampilan suatu web, dan bila pada tag <Hn>..</Hn> yang terbesar adalah Heading Tingkat 1 maka pada tag <FONT>..</FONT> yang terbesar adalah Ukuran Font 7.

nah bagaimana sobat, cukup mudah, membuatnya hanya membutuhkan sedikit pemahaman saja, ayo gali terus, dan asah terus logika serta kemampuan kita dalam bermain script HTML, saya juga masih dalam tahap belajar sobat, jadi mari kita sama sama untuk belajar. mungkin cukup sekian posting kali ini, dan kita berjumpa lagi pada postingan berikutnya, thanks for visit my blog, jngn lupa untuk meninggalkan komentarnya sobat, biar saya makin bersemangat untuk posting.. seperti biasa saya menyediakan file jadi, dan siap untuk di download, agar sobat semua bisa mempelajarinya..

Download HTML Lesson 2

wassalamualaikum

Read more ...

Posted by Unknown | 2 comments:

Struktur Dasar Web Page HTML

Assalamualaikum sobat, Alhamdulillah kita masih bisa berjumpa kembali pada postingan blog ane yg sederhana ini, Kali ini ane lagi ingin update tentang programming, seputar web terutama dasar dari HTML, posting kali ini juga Alhamdulillah temen temen ane banyak yang request, mungkin sobat semua udah ga asing lagi sama bahasa pemrogramman HTML, atu Web Design, tapi kali ini biarkan saya membahasnya sedikit demi sedikit.. nah pada postingan ane yang pertama dalam blog ini ane udah posting mengenai Pengertian HTML, mungkin sobat belum baca bisa dibaca dulu artikelnya biar gak bingung nantinya sebelum kita membahas lebih lanjut. naah skarang yuk kita simak pembahasan secara mendasar dari HTML dan mari kita mulai merancang web sederhana.

Tag(Script) yang paling dasar yang digunakan dalam file HTML adalah <HTML> dan </HTML>. Kedua tag ini berfungsi untuk mendefinisikan bahwa teks yang terdapat diantara kedua tag tersebut adalah dalam format HTML. jadi ingat ya sobat, Teksnya harus berada diantara kedua Tag / Script tersebut. kurang lebih syntak atau scriptnya seperti ini :

<HTML>

Teks didalam HTML

</HTML>

Berfungsi Sebagai informasi page header, Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META. Untuk mendefinisikan head, kita dapat menambahkan tag <HEAD> dan </HEAD> setelah penggunaan tag <HTML> sedemikian hingga struktur page menjadi :

<HTML>
<HEAD>
</HEAD>
</HTML>


Untuk mendefinisikan judul page (title) maka kita dapat melakukannya dengan meletakkan naskah judul di antara tag <TITLE> dan </TITLE>. Judul ini akan ditampilkan pada title bar web browser Misalkan kita akan membuat sebuah page dengan judul "Latihan HTML" maka kita harus menambahkan: <TITLE>Latihan HTML</TITLE> Perhatikan bahwa tag <TITLE> dan </TITLE> ini harus diletakkan pada bagian head, sehingga dokumen HTML dasar kita menjadi:

<HTML>
<HEAD>
<TITLE>Latihan HTML</TITLE>
</HEAD>
</HTML>

Sedangkan bagian body adalah tempat dimana kita dapat menempatkan teks dan berbagai aksesori pendukung lainnya yang akan ditampilkan pada web page. Bagian ini dapat didefinisikan dengan meletakkan tag <BODY> dan </BODY> di antara teks yang akan kita tampilkan. Kedua tag ini diletakkan sesudah tag </HEAD>, sehingga struktur dasar sebuah page dapat dituliskan sebagai berikut :


<HTML>
<HEAD>
<TITLE>Latihan HTML</TITLE>
</HEAD>
<BODY>

Teks yang akan ditampilkan pada web.

</BODY>
</HTML>

Nah sobat, setelah kita mengetahui syntak atau script dasar dari HTML, mari kita sama sama aplikasikan atau praktekan dengan menggunakan Notepad yang ada pada komputer sobat, dan coba ketikkan script seperti gambar dibawah ini.


nah kemudian, setelah kita ketik, kita simpan di desktop tapi sebelum itu kita buat folder html di desktop sobat.



Setelah buat folder html di desktop, lalu buka foldernya dengan double klik, nah didalam folder html, kita simpan dengan nama latihan. tetapi ada hal penting yang harus ditambahkan yaitu ekstensi file html yakni .html jadi dalam menyimpan file html kita harus menambahkan .html dibelakang nama file. contohnya latihan.html dan merubah Save as Type menjadi All Files.


nah setelah disimpan, kita buka folder html yang didekstop, akan ada 1 buah file berformat HTML, dengan logo web browser ditengahnya, dan bernama latihan kurang lebih jika berhasil maka seperti ini gambarnya,.


lalu, buka file tersebut dengan mengklik dua kali secara cepat. seperti membuka folder saja. maka akan tampil sebuah web browser dengan hasil Syntak HTML yang tadi kita buat, seperti ini hasilnya.



nah cukup mudah kan sobat cara membuatnya. itu sudah termasuk halaman web loh sobat. jadi keep belajar terus ya.. masih panjang perjalanan kita untuk mengulas ilmu tentang web. mungkin cukup sekian dulu posting ane kali ini semoga ada manfaatnya. kita berjumpa lagi pada postingan berikutnya.

Buat sobat yang ingin mendownload file jadi'nya bisa di download pada link dibawah ini :

Download Latihan Dasar 1 HTML

tapi jangan hanya mendownload ya sobat !! tapi dicoba dan terus dilatih ya.
wassalamualaikum.

Read more ...

Posted by Unknown | No comments: