Minggu, 22 Maret 2015




Marquee adalahsebuah tag agar tulisan atau angka yang dibuat agar bisa berjalan contoh :
Cara membuatnya mudah kok tinggal ikuti langkah  berikut:
Bentuk Kodenya :

<marquee>Tulisan Disini</marquee>

Namun jika kita, bosan dengan marquee yang hanya itu-itu saja dapat juga lihat dbawah ini:

Selain bentuk dasar di atas, ada juga kode-kode lainnya yang bisa diselipkan ke kode dasar diatas :
  • bgcolor=” Kode HTML Warna"

untuk mengganti warna dari teks marquee, adapun Kode HTML Warna diganti dengan kode HTML warna sesuka anda, bisa diisi dengan dengan melihat dulu Kode HTMLnya .

<marquee bgcolor=”red”>Tulisan Disini</marquee>
  • direction="left/right/up/down"

untuk mengatur arah gerakan text/marquee

o   Untuk gerakan keatas:

     <marquee direction=”up”>Tulisan Disini</marquee>

o   Untuk gerakan kebawah:

<marquee direction=”down”>Tulisan Disini</marquee>

o   Untuk gerakan kekiri:

<marquee direction=”left”>Tulisan Disini</marquee>

o   Untuk gerakan kekanan:

<marquee direction=”right”>Tulisan Disini</marquee>

  • behavior="scroll/slide/alternate"
    Untuk mengatur  perilaku gerakan.
    • behavior="scroll"
      Kode untuk membuat text bergerak berputar.
<marquee behavior="scroll">Tulisan Disini</marquee>
    • behavior="slide"
      Kode untuk membuat text bergerak sekali lalu berhenti.
<marquee behavior="slide">Tulisan Disini</marquee>
    • behavior="alternate"
      Kode untuk membuat text bergerak bolak-balik kekanan-kekiri.
<marquee behavior="alternate">Tulisan Disini</marquee>

title="pesan"
Untuk memberi teks saat mouse berada di atas text.
<marquee title="Pesan">Tulisan Disini</marquee>

  • scrollamount="kecepatan"
    untuk mengatur kecepatan text/marquee
    contoh       :    scrollamount="3"
<marquee scrollamount="3">Tulisan Disini</marquee>


  • scrolldelay="jumlah waktu tunda"
    untuk mengatur waktu tunda gerakan dalam mili detik
contoh  : scrolldellay="2"


<marquee scrolldellay="2">Tulisan Disini</marquee>



  • loop="angka|-1|infinite"
    Mengatur jumlah loop
<marquee loop="infinite">Tulisan Disini</marquee>

  • width="jumlah angka lebar"Mengatur lebar blok teks dalam pixel atau persen
<marquee width="3" >Tulisan Disini</marquee>

Dan juga bisa diketahui, bahwa kode-kode diatas adalah kode dasar dari efek-efek dari marquee itu sendiri. Dan, bisa dikombinasikan.
Dengan Susunan :
<marquee(spasi)kode efek1(spasi)kode efek2>Tulisan Disini</marquee>

Kode efek bisa banyak sekali.

1. Jika
kita mau  kalau marquee tsb. jika di sorot mouse akan berhenti maka tinggal menambahkan kode dibawah ini :

onmouseover="this.stop()" onmouseout="this.start()"

 Dengan susunan

<marquee onmouseover="this.stop()" onmouseout="this.start()">Tulisan</marquee>

2. Jika
kita  mau Marquee dengan Link simak :
kode Dasar :

<marquee><a href="alamat Web">judul</a>

Kamis, 12 Maret 2015



Tag HTML umumnya berupa tag yang berpasang-pasangan dan diapit dengan simbol <
dan >. Pasangan atau penutup perintah dari sebuah tag ditandai dengan tanda / .
misalnya pasangan dari tag <example> adalah </ example >.
Sebagian tag telah digunakan pada contoh kode HTML di atas. Sekarang marilah kita
kenali berbagai hal yang mendasar tentang tag. Setiap tag memiliki nama, nama tag
ditulis dalam tanda < dan >. Antara nama  tag dan tanda < ditulis tanpa spasi sama
sekali. Nama tag dapat ditulis dengan huruf kecil, kapital maupun campuran.
Beberapa tag ada yang menggunakan atribut di dalamnya. Contoh : <P align=”center”>,
pada contoh ini P adalah nama tag, sedangkan align  adalah nama atribut  dan center
adalah nilai atribut.

Pemberian Catatan/Komentar pada Dokumen HTMLCatatan adalah bagian dari kode HTML  yang  diabaikan oleh browser. Kegunaan
catatan/komentar dalam kode HTML adalah sebagai keterangan yang berguna untuk
pembaca kode. Misalnya, catatan digunakan untuk memberikan catatan apa saja dan
bahkan bisa mencakup beberapa baris.
Komentar.html
<!--Program ini dibuat pada tanggal 20 Oktober 2013 -->
<html>
<head>
<title>Hai</title>
<Body>
<!-- Catatan bisa diletakan dimana saja -->  
Saya Sedang Belajar HTML  
</body>
</html>

Penggunaan Tag Break Row (pindah baris)

Tag ini digunakan untuk menurunkan teks sebanyak yang kita inginkan, dengan kata
lain satu tag <BR> sama dengan anda menekan tombol Enter satu kali. Untuk lebih jelas
sekarang perhatikan contoh berikut ini :
Breakrow.html
<html>
<head>
<title>belajar tag br</title>
</head>
<body>
Mudah-mudahan anda cepat bisa belajar HTML <br>
Amin …!
</body>
</html>
Penggunaan Tag Paragraf
Tag <P> berguna untuk membuat paragraf. Jarak paragraf/tek pertama dengan
paragraf/tek kedua sama dengan anda menggunakan tag <br> dua kali. Untuk lebih
jelasnya perhatikan contoh di bawah ini.
Paragraf1.html
<html>
<head>
<title>belajar tag paragraf</title>
</head>
<body>
Senja Telah Tiba<p>
Mentari kian temaram<br>
Samar disela-sela daun cemara<br>
Angin mulai berhembus dari samudera<br>
Pertanda malam telah tiba
</body>
</html>
Atribut Align juga bisa diterapkan pada tag paragraf. Yang berguna untuk mengatur
peletakan  teks di dalam masing-masing baris. Sebagai contoh : tambahkan pada kode
HTML di atas dengan kode seperti yang terlihat pada contoh program HTML berikut  :
Paragraf2.html 
<html>
<head>
<title>belajar tag paragraf</title>
</head>
<body>
Senja Telah Tiba
<p align = “center”>
Mentari kian temaram<br>
Samar disela-sela daun cemara<br>
Angin mulai berhembus ke samudera<br>
Pertanda malam telah tiba<br>
</p>
Bandar Lampung, 2004
</body>
</html>
Penggunaan Tag CenterUntuk meratakan teks ketengah, kita juga bisa menggunakan tag <Center>. Dan untuk
mengakhiri penengahan teks (yakni agar teks berikutnya tidak terletak ditengah), kita
perlu menambahkan tanda penutup berupa tanda slash (/), cara penulisannya adalah :
</center>. Untuk jelasnya perhatikan latihan di bawah ini :
center.html
<html>
<head>
<title>belajar tag center </title>
</head>
<body>
<center>
Addres :
<hr>
Green Kost Production<br>
<hr size = 5 width = 25% align = left  noshade>
Jl. Jambu 1 No. 12<br>
Gedung Meneng<br>
Bandar Lampung 35145  
</center>
</body>
</html>

Penggunaan Tag Heading
Tag ini digunakan untuk mengatur ukuran teks yang dijadikan sebagai judul dalam
badan dokumen. Ukuran yang ada pada tag heading ada 6 buah ukuran yang paling
besar ditunjukan dengan penomoran yang paling kecil yaitu angka 1 dan yang paling
kecil ditandai dengan nomor terbesar yaitu 6. anda juga bisa menggunakan angka lebih
dari enam misal 7 atau 8, tetapi hasilnya adalah tetap seukuran angka 6 karena
standarnya adalah ukuran 6 yang terkecil. Bentuk tag-tag heading dimulai dari yang
terbesar sampai terkecil dapat dilihat pada tatacara penulisan berikut ini  :
  • <H1> … </H1> (Heading 1)
  • <H2> … </H2> (Heading 2)
  • <H3> … </H3> (Heading 3)
  • <H4> … </H4> (Heading 4)
  • <H5> … </H5> (Heading 5)
  • <H6> … </H6> (Heading 6)

Untuk memperjelas kegunaan tag heading ini perhatikan pada contoh di bawah ini :
heading.html
<html>
<head>
<title>belajar tag heading</title>
</head>
<body>
<h1>ukuran heading 1</h1>
<h2>ukuran heading 2</h2>
<h3>ukuran heading 3</h3>
<h4>ukuran heading 4</h4>
<h5>ukuran heading 5</h5>
<h6>ukuran heading 6</h6>
</body>
</html>

seperti halnya pada tag <P>, tag heading juga memiliki atribut. Salah satu atribut yang
bisa digunakan adalah atribut align yang bisa bernilai : center, left, right, justify.
Cara menuliskan pada dokumen HTML adalah <h1 align=”center”>.

Menampilkan Garis Horisontal (Horizontal Row)
Agar tampilan dokumen HTML yang kita buat menjadi lebih menarik, seorang pembuat
dokumen web sering menambahkan garis horisontal biasanya diletakkan di bawah
sebuah teks maupun objek lainnya. Cara membuat garis ini sangat mudah sekali,
caranya yakni dengan menyertakan tag horizontal Row <HR>. Pada tag <hr> juga bisa
ditambahkan atribut-atribut seperti berikut ini  :
  • Size : Untuk mengubah ketebalan garis 
  • Width : Untuk merubah lebar garis 
  • Align : Untuk mengatur tata letak teks dalam baris
  • Noshade : Untuk merubah garis yang dibuat tidak disertai bayangan
Berikut adalah contoh kode HTML yang menggunakan tag ini :
Garis.html
<html>
<head>
<title>belajar membuat garis </title>
</head>
<body>
Addres :
<hr>
Green Kost Production<br>
<hr size = 5 width = 25% align = left  noshade>
Jl. Jambu 1 No. 12<br>
Gedung Meneng<br>
Bandar Lampung 35145  
</body>
</html>

Penggunaan Tag Divisi
Tag ini digunakan untuk mengelompokkan sejumlah baris teks yang memiliki tipe
sama.  Fungsinya bisa juga disamakan  dengan tag <P>. perhatikan pada contoh berikut
ini :

Divisi.html
<html>
<head>
<title>belajar tag div </title>
</head>
<body>
<div align=”right”>
Addres :
<hr>
Green Kost Production<br>
<hr size = 5 width = 25% noshade>
Jl. Jambu 1 No. 12<br>
Gedung Meneng<br>
Bandar Lampung 35145  
</div>
</body>
</html>

Sumber : http://duniainternet27.blogspot.com/2013/10/dasar-penggunaan-tag-html.html


Tag button berfungsi untuk membuat tombol baik itu di dalam form, maupun diluar form. Dibandingkan dengan tombol yang dibuat dengan tag input type=”submit”, tag button menawarkan fleksibilitas yang lebih.


Cara Penggunaan Tag Button HTML
Untuk menggunakan tag button, kita cukup menuliskannya dengan struktur dasar sebagai berikut:
<button>text untuk tombol</button>
Tag button juga tidak harus berada di dalam form, dan ini memberikan fleksibilitas yang tinggi. Anda bisa memprogramnya menggunakan javascript untuk membuat fungsi lain yang akan dijalankan ketika tombol tersebut di klik.


Atribut type: Merubah Fungsi Tombol tag button
Jika digunakan di dalam form, kita dapat menambahkan sebuah atribut type untuk merubah fungsi tombol tersebut. Nilai yang bisa digunakan untuk atribut ini adalah reset, submit, dan button. Contoh penulisannya adalah:
<button type="reset">Text untuk tombol</button>
Jika menuliskan type=”submit”, maka ketika tombol di klik, HTML akan mengirimkan nilainya untuk diproses (misalkan dengan PHP), namun jika type=”reset”, maka jika tombol tersebut di klik, efeknya akan mengosongkan isian form. Type=”button” tidak akan berefek apa-apa kedalam fungsi tombol, bahkan mungkin akan sedikit membingungkan menulis : <button type=”button”>


Atribut disabled: Menonaktifkan tag button
Salah satu atribut penting untuk tag button ini adalah atribut disabled. Atribut ini digunakan untuk mengontrol apakah tombol tersebut bisa digunakan oleh user atau tidak. Atribut ini hanya memiliki 1 nilai, yaitu disabled, sehingga ditulis dengan disabled=”disabled”.  Cara penulisannya adalah sebagai berikut:
<button disabled="disabled">Text untuk tombol</button>
Jika anda menjalankan contoh tersebut di dalam HTML, tombol akan berwarna abu-abu dan tidak bisa di klik oleh user.
Atribut disabled ini bisa diterapkan kepada hampir seluruh objek form, dan biasanya akan diprogram menggunakan javascript untuk mengaktifkan tombol tersebut. Misalkan kita memprogram sebuah tombol yang hanya bisa aktif ketika user telah mengisi seluruh formulir.


Atribut id dan class: CSS dan Javascript
Selain atribut type dan disabled, kita bisa menggunakan atribut seperti id dan class dalam tag button. Atribut id dan class akan dibutuhkan untuk pemograman HTML menggunakan Javascript dan CSS.


Contoh penggunaan tag button dalam HTML
Sebagai penutup, berikut adalah contoh kode HTML dalam penulisan dan penggunaan tag button:
<!DOCTYPE html>
<html>

<head>
   <title>Belajar Tag Button HTML</title>
</head>

<body>

   <button>Silahkan Klik Saya</button>
   <br />

   <button disabled="disabled">Tombol ini tidak bisa di-klik</button>
   <br />

   <h4>Formulir isian duniailkom:</h4>

   <form action=" formulir.html" method="get">

   Nama : <input type="text" name="nama_user" id="nama_user"/>

   <button type="submit">Mulai Proses!</button>
   <button type="reset">Reset Form</button>

   </form>

</body>
</html>


Sumber : http://www.duniailkom.com/tutorial-form-html-fungsi-dan-cara-penggunaan-tag-button-html/