Minggu, 21 Desember 2014

Form dan Input HTML

Form dan Input HTML
Form  merupakan  salah  satu  elemen  HTML  yang  digunakan  untuk  mendapatkan  masukan  dari
pengguna  web.  Pengguna  web  dapat  memasukkan  input  melalui  halaman-halaman  HTML.
Umumnya  pengolahan  form  dilakukan  pada  server  dengan  menggunakan  skrip  yang  bersifat
server-side  seperti  PHP,  ASP  dan  lain  sebagainya.  ).  Untuk  membuat  form  digunakan  tag  awal
<form> dan tag penutup </form>.
Sintaks penulisannya :
"<form action=”url” method=”get|post”> </form> "


1..Jenis masukan dalam satu formulir dibedakan menjadi :
1.Text, digunakan untuk mengisi suatu nilai dapat berupa teks atau angka. 2.Radio, elemen isian berupa pilihan dimana hanya satu pilihan yang dapat dilakukan.
3.Checkbox, elemen yang menyediakan beberapa pilihan bisa lebih dari satu.
4.List, elemen pilihan dalam bentuk daftar.
5.Button, elemen berupa tombol untuk melakukan suatu proses.
6.Submit, elemen tombol yang digunakan untuk memanggil url.
7.Reset, elemen tombol yang digunakan untuk mengembalikan kondisi awal.
8.Image, digunakan sebagai pengganti button, berupa gambar yang dapat melakukan proses.
9.Textarea, elemen yang dapat menampung kumpulan teks ketikan dari user.
10.File, elemen button yang dapat memanggil file atau gambar dari storage.
11.Password, elemen berupa teks yang khusus digunakan untuk mengisi password.

Contoh Form Input HTML
<form onsubmit="return false"> <b>Contoh Input HTML</b><hr /> Input Text:<br> Nama: <input type="text" name="nama" /> <hr /> TextArea:<br> Alamat: <textarea name="alamat"></textarea> <hr /> Checkbox dengan label:<br /> <label>Checkbox <input type="checkbox" name="cek" /></label> <hr /> Pilihan:<br /> <select name="jenis_kelamin"> <option value="L">Laki-laki</option> <option value="P">Perempuan</option> </select> <hr /> Radio Button:<br /> <fieldset> <label><input type="radio" name="pilihan" value="y" />Ya</label><br /> <label><input type="radio" name="pilihan" value="t" />Tidak</label> </fieldset> <hr /> </form>

hasilnya:

  



Selasa, 09 Desember 2014

Pembelajaran HTML "LINK"

Link HTML
Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain. Dokumen ini bisa berupa teks dan  atau gambar yang saling menghubungkan menuju ke dokumen atau  bagian  lain  dalam  suatu  dokumen.  Browser  web  akan  menyorot  teks  atau  gambar  yang  di identifikasi  sebagai  link  dengan  warna  atau  garis  bawah  untuk  menunjukkan  bahwa  itu  adalah hyperteks link sering di singkat hyperlink atau link saja.
1.Tag Anchor
Tag  <a>  untuk  membuat  suatu  link  kepada  dokumen  lain  dalam  web.  Atribut  pada  tag  <a> diantaranya: atribut  href="uri"  untuk mendefinisikan lokasi link, atribut  name="name"  untuk mendefinisikan  nama  link,  dan  atribut  target="_blank"|"_parent"|"_top"|"_self"  untuk _blank akan membuka pada window baru, _parent/_top akan keluar dari frame, _self akan tetap di window browser. Sintaks :
<a  href=http://www.microsoft.com>This text is displayed </a>
Ada 3 jenis link:
a. Link Relatif
Dibuat  apabila  anda  membuat  suatu  link  pada  page  anda  ke  page  lain  pada  komputer  yang sama,  tidak  memerlukan  menggunakan  alamat  internet  yang  lengkap.  Jika  kedua  page  pada direktori yang sama. Sintak :
                <a href=”file_2.html”>Berikutnya</a>
b. Link Absolut
Dibuat apabila anda membuat link ke page web lain yang berada pada web site lain di internet. Dalam  hal  ini  anda  harus  menuliskan  alamat  internet  secara  lengkap. Sintak :
                <a href="http://www.amikom.ac.id">link berikut</a>
c. Link ke Bagian Lain dalam Dokumen
Link  jenis  ini  dibuat  apabila  untuk  dokumen  yang  panjang  sekali,  sehingga  apabila  di tampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang. Navigasi  untuk  penelusuran  dokumen  dapat  dimudahkan  dengan  membuat  link  antar bagian, dengan menandai setiap bagian tersebut dengan memberinya  nama. Sehingga pada beberapa tempat  di  dalam  dokumen  akan  ada  bagian  yang  bernama,  dan  dibagian  lainnya  dapat diletakkan link untuk menuju bagian-bagian tersebut.Sintaks penulisannya :
<a href="#tujuan">Link asal</a> Artikel bebas
.
.
.
<a name="tujuan">Posisi tujuan</a> Artikel bebas
.
.
.
Contoh:
<html>
<head>
<title>contoh link</title>
</head>
<body>
<p>
<a href="coba_entitas2.html">
Teks ini </a>merupakan link kepada suatu page dengan nama coba_entitas2.html pada web site yang sama.
</p>
<p>
<a href="http://www.microsoft.com">
This text </a>is a link to a page on the world wide web.
</p>
<p>
<a name="top">
<a href="#Bab4">
Lihat Bab 4.
</a>
</a>
</p>
<h2>Bab 1</h2>
<p>Bab 1 adalah menjelaskan bla bla bla.</p>
<h2>Bab 2</h2>
<p>Bab 2 adalah menjelaskan bla bla bla.</p>
<h2>Bab 3</h2>
<p>Bab 3 adalah menjelaskan bla bla bla.</p>
<a name="Bab4">
<h2>Bab 4</h2>
</a>
<p>
Bab  4  ini  menunjukkan  tujuan  dari  link  dalam  satu
halaman.</p>
<h2>Bab 5</h2>
<p>
Bab 5 adalah menjelaskan bla bla bla. </p>
<a href="#top">Kembali ke atas</a>
</body>
</html>
Hasilnya:



2. Link Mailto
Mailto  digunakan untuk membuat link pada  suatu pesan mail (tidak akan bisa bekerja jika mail
client tidak terpasang).
link_mailto.html
<html>
<head>
<title>Contoh Penggunaan Link Mailto</title>
</head>
<body>
Anda  ingin  mengirim  tugas  pemrograman  web  bisa  melalui  <a
href="mailto:itaufiq97@gmail.com">email berikut</a>.
</body>
</html>
3. Tag Marquee
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.
Atribut yang sering di gunakan adalah :
bgcolor="warna"
Untuk mengatur warna background text.
direction="left/right/up/down"
Mengatur arah gerakan teks.
behavior="scroll/slide/alternate"
Untuk mengatur perilaku gerakan Scroll adalan suatu teks bergerak berputar. Slide adalah suatu
teks bergerak sekali lalu berhenti. Alternate adalah suatu teks bergerak dari kiri kekanan lalu balik
lagi.
title='pesan"
Pesan akan muncul saat mouse berada di atas teks.
scrollmount="angka"
Mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat pula gerakan text itu.
scrolldelay="angka"
Untuk mengatur waktu tunda gerakan dalam detik.

loop="angka|-1|infinite"

Pembelajaran HTML 2

SINGKATAN (ACRONYM)
Terkadang  menggunakan  singkatan  (akronim). Untuk menuliskan singkatan, ada tag html yang di gunakan yaitu  Tag <abbr> dan Tag <acronym). Tag tersebut digunakan untuk  menyimpan data kepanjangan dari suatu singkatan yang ditampilkan dalam dokumen tersebut. Atribut yang digunakan yaitu title. Sintaks :
<abbr title=“kepanjangannya”>singkatan</abbr>
<acronym title=“kepanjangannya”>singkatan</acronym>
Address
Alamat  (address)  merupakan  salah  satu  elemen  yang  umum  di  dalam  suatu  dokumen.  Untuk membuat  alamat  pada  dokumen  html  di  sediakan  secara  khusus  yaitu  Tag  <address>. Secara  default  tag  <address>  akan menampilkan teks di sebalah kiri, untuk di sebelah kanan menggunakan atribut dir=”rtl”. Sintaaks:
 <address>alamat anda</address>
Arah Teks
Secara lazim untuk teks kita membacanya dari kiri ke kanan (left to right  –  ltr). Di html ada tag yang digunakan untuk mengubah penulisan teks  dari kanan ke kiri (right to left  –  rtl). Sintaks :
                <bdo dir="rtl">Teks yang mau di arahkan</bdo>
Teks yang Disisipkan atau Dihapus
  Tag  <ins>  memberikan  tanda  untuk  sisipan  dengan  membuat  teks  di  garis  bawah. Sedangkan  Tag  <del>  bukan  menghapus  teks  tetapi  mengkoreksi  pekerjaan  dengan  memberikan garis tengah horizontal pada teks yang dihapus. Sintaks :
Satu tahun adalah <del>lima belas</del> <ins>dua belas</ins> bulan
Contoh:
<html>
<head>
<title>Contoh Singkatan,address,Penggunaan BDO,arah teks</title>
</head>
<body>
<abbr  title="World  Wide  Web">WWW</abbr>  adalah  halamanhalaman  website  yang  dapat  saling  terkoneksi  satu  dengan  lainnya
(hyperlink)yang membentuk samudra belantara informasi.
<br>
<acronym  title="Hyper  Text  Transfer
Protocol">HTTP</acronym>  adalah  protokol  yang  dipergunakan  untuk
mentransfer dokumen dalam World Wide Web (WWW)
<address>
Desa jati Pecaron</br>
Kec. Gubug</br>
Kab. Grobogan
</address>

<bdo dir="rtl">
S2 Megister Teknik Informatika<br />
S1 Teknik Informatika<br />
S1 Sistem Informasi<br />
D3 Teknik Informatika<br />
D3 Manajemen Informatika
</bdo><br>
Saya membeli  perlengkapan  kuliah  diantarnya  sebagai  berikut:
<br>
1. Buku tulis Rp.10.000<br>
2. ballpoint pen Rp.15000<br>
3. stabilo Rp.5000 <br>
Total pembeliannya adalah <del>40.000</del> <ins>30.000</ins>
</body>
</html>
Hasilnya:



Pembelajaran HTML 1

1. Pengertian HTML
HTML (HyperText Markup Language) adalah file teks yang ditulis menggunakan aturan-aturan kode tertentu. Setiap informasi yang tampil di web selalu dibuat menggunakan kode html. Oleh karena itu, dokumen HTML sering disebut juga sebagai web page (halaman web).
Dokumen HTML dapat digunakan aplikasi Text editor apa pun, bisa Notepad (untuk MS Windows), Emacs atau Vi Editor (untuk linux), dan sebagainya.
Kode HTML dari suatu halaman web dapat kita lihat dari aplikasi web brouser yang dari suatu halaman web dapat kita lihat dari aplikasi web browser yang kita gunakan, yaitu dengan cara memilih menu View-Source (untuk Internet Explorer) dan View-Page Source (untuk Mozilla Firefox).
2. Penamaan HTML
Pilih suatu nama, sembarang nama, kemudian tambahkan sebuah ekstensi".html" atau ".html" (Tanda petik ganda tidak perlu dituliskan karena digunakan sebagai penjelas saja).
3. Elemen dan Tag HTML
Elemen HTML yaitu komponen penyusun terkecil dari sebuah dokumen HTML.  Untuk
menandainya. Elemen dapat berupa teks murni, atau bukan teks, atau keduanya.
Untuk menandai sebuah elemen dalam suatu dokumen HTML digunakan tag. Tag HTML
terdiri dari sebuah simbol lebih kecil ( < ) dan dan lebih besar ( > ).
Nama elemen ditunjukkan oleh nama dari tagnya. Suatu elemen biasanya ditandai dengan
pasangan tag, walaupun ada beberapa nama elemen yang ditandai dengan satu tag tanpa
harus berpasangan.Diantaranya:
• Image ( <img /> )
• Horizontal Rule ( <hr /> )
• Input Field ( <input /> )
• Ganti Baris –Break ( <br /> )

Dalam pembuatan dokumen HTML penulisan elemen yang diawali dan diakhiri tanda tag
HTML, memiliki syarat penulisan yaitu:
• Tag HTML diapit dengan dua karakter kurung sudut ( < dan > )
• Tag HTML secara normal selalu berpasangan misal (<i>...</i>)
• Tag  pertama  dalam  suatu  pasangan  adalah  tag  awal,  dan  tag  yang  kedua
merupakan tag akhir.
• Tag html tidak case sensitive. Ini artinya <b> sama dengan <B>
• Jika  dalam  suatu  tag  terdapat tag  lain,  maka  penulisan  tag  akhir  tidak  boleh
bersilang danharus berurutan. Misalnya <b><I>..Tebal dan Miring..</I></b>
4. Tag-tag Dasar HTML
Tag awal
Kegunaan
<html>
<head>
<title>
<body>
<h1>-<h6>
<p>
<br>
<hr>
<!-->
Definisi sebuah dokumen HTML
Definisi tentang dokumen yang ditampilkan
Definisi judul dari dokumen yang ditampilkan
Definisi body dokumen
Definisi heading 1 s.d 6
Definisi sebuah paragraf
Sisipkan line break
Definisi sebuah horizontal
Definisi kometar dalam source code

Lebih jelasnya contoh berikut:
 <html>
<head>
<title>contoh html dasar</title>
</head>
<body>
Isi Dokumen
<h1> heading 1 </h1>
<h2> heading 2 </h2>
<h3> heading 3 </h3>
<h4> heading 4 </h4>
<h5> heading 5 </h5>
<h6> heading 6 </h6>
<p>Bagian  BODY  merupakan  isi  dari  dokumen  HTML.  Semua  informasi  yang  akan
ditampilkan, mulai dari teks, gambar, sound, dan lain-lain, akan ditempatkan di bagian ini.
Seperti telah  disebutkan  di  atas,Tag meta,digunakan untuk mendefinisikan informasi-informasi diluar HTML
</p>
<br>Tag base<br>tag link,<br>
<hr>Tag meta
<hr>Tag image
<!-- komentar>
</body>
</html>
Hasilnya: