membuat FORM pada WEB anda

Form merupakan bagian yang paling penting dalam pemrograman HTML. Form digunakan untuk mengumpulkan data dari pengunjung suatu website. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, form advertiser, form sitemap, bahkan untuk mengirimkan data antar halaman web. Pada tutorial belajar HTML: cara membuat form di HTML ini kita akan membahas cara penggunakan tag form di dalam HTML.





Form meruakan salah satu elemen HTML yang digunakan untuk menerima nput dari pengunjung. Melalui form pengunjung dapat memasukkan data melalui elemen-elemen input seperti textfield, checkbox, radio button, textarea, submit button dan masih banyak lainnya. Form berfungsi untuk membuat sebuah halaman web menjadi interaktif dan dinamis.

Perintah Dasar Form

<form>

.

Input elements

.

</form>



Elemen input Form

Elemen yang paling penting dalam form adalah elemen input. Elemen input digunakan untuk memilih informasi yang dimasukkanoleh pengunjung. Elemen input dapat terdiri dari berbagai macam cara tergantung dari atributnya, seperti jenis text field, checkbox,password, radio button, submit button, dan lainnya.

Text Field

Merupakan elemen input yang memungkinkan pengunjng memasukkan text dalam satu baris. Lebar karakter text field defaultnya adalah 20 karakter.

Perintah Dasar :

<input type=”text” />

Contoh penggunaan :



<form>

First name : <input type=”text” name=”firstname” /><br />

Last name : <input type=”text” name=”lastname” />

</form>


Radio Button

Elemen form yang membolehkan pengunjung memilih satu saja pilihan data dari pilihan data yanng terbatas. Seperti pemilihan jenis kelamin (pria atau wanita).

Perintah Dasar:

<input type=”radio” />

Contoh penggunaan :

Check Box

Digunakan untuk memilih beberapa pilihan data sekaligus atau lebih dari satu pilihan dari daftar pilihan yang ada.

Perintah Dasar:

<form>

<input type="checkbox" name="kendaraan=" value="motor" />

aku naik motor<br />

<input type="checkbox" name="kendaraan=" value="mobil" />

aku naik mobil<br />

<input type="checkbox" name="kendaraan=" value="sepeda" />

aku naik sepeda<br />

<input type="checkbox" name="kendaraan=" value="becak" />

aku naik becak<br />

</form>
hasilnya akan seperti ini :

Submit Button

Digunakan untuk mengirimkan data dari halaman web ke server. Data yang dikirimnkan ke halaman lain yang telah ditentukan pada atribut action di form.

Perintah Dasar:

<input type=”submit” />

Contoh penggunaan :

<form name=”input” action=”proses_input.php” method=”get



Reset Button

Digunakan untuk membatakan semua proses pengisian data yang dilakukan di elemen input form.

Perintah Dasar:

<input type=”reset” />

pengertian dan sejarah CSS

Sejarah CSS (Cascading Style Sheet)

• CSS 1

Pada tanggal 17 Agustus 1996 World Wide Web Consortium (W3C) menetapkan CSS sebagai bahasa pemrograman standard dalam pembuatan web. Tujuannya adalah untuk mengurangi pembuatan tag-tag baru oleh Netscape dan Internet Explorer, karena kedua browser tersebut sedang bersaing mengembangkan tag sendiri untuk mengatur tampilan web.

CSS 1 mendukung pengaturan tampilan dalam hal :

1. Font (Jenis ketebalan).

2. Warna, teks, background dan elemen lainnya.

3. Text attributes, misalnya spasi antar baris, kata dan  huruf.

4. Posisi teks, gambar, table dan elemen lainnya.

5. Margin, border dan padiing.

• CSS 2

Pada tahun 1998, W3C menyempurnakan CSS tahap awal dengan menciptakan standard CSS 2 yang menjadi standard hingga saat ini. Pada level CSS 2 ini, dimasukkan semua atribut dari CSS 1 dan diperluas dengan penekanan pada International Accessibiality and Capacibilty kususnya media-specific CSS. CSS 2 dikembangkan untuk memenuhi kebutuhan terhadap format dokumen agar bisa ditampilkan di printer. 

• CSS 3 

CSS 3adalah versi terbaru dari CSS yang mampu melakukan banyak hal dalam mendesain website. CSS 3 dapat melakukan animasi pada halaman website, diantaranya animasi warna dan animasi 3D. Dengan CSS 3 desaigner dimudahkan dalam hal kompatibilitas websitenya pada smartphone dengan dukungan fitur baru yakni media query. Selain itu, banyak fitur baru pada CSS 3 yaitu : Multiple background, border-radius, drop-shadow, border-image, CSS-Math dan CSS Object Model.

Fitur terbaru CSS 3 :

1. Animasi, sehingga pembuatan animasi tidak memerlukan program sejenis Adobe Flash dan Microsoft Silverlight.

2. Beberapa efek teks, seperti teks berbayang, kolom koran dan "Word-Wrap".

3. Beberapa efek pada kotak, seperti kotak yang ukurannya dapat diubah-ubah, transformasi 2 dimensi dan 2 dimensi, sudut-sudut yang tumpul dan bayangan.

Pengertian CSS

CSS adalah singkatan dari Cascading Style Sheet yang merupakan kumpulan perintah yang dibentuk dari berbagai sumber yang disusun menurut urutan tertentu sehingga mampu mengatasi konflik style. CSS yaitu salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web supaya web lebih terstruktur dan lebih seragam. CSS seperti halnya styles pada aplikasi pengolahan kata Microsoft Word yang dapat mengatur beberapa style, misalnya subbab, heading, bodytext, footer, images dan style lainnya untuk dapat dipakai bersama-sama dalam beberapa file. CSS biasanya digunakan untuk memformat tampilan web yang dibuat dengan bahasa HTML dan XHTML. CSS mampu mengatur warna body teks, ukuran gambar, ukuran border, warna mouse over, warna tabel, warna hyperlink, margin, spasi paragraph, spasi teks dan parameter lainnya. Dengan adanya CSS memungkinkan menampilkan halaman yang sama dengan format yang berbeda.

CSS (Cascading Style Sheet)

CSS (Cascading Style Sheet) adalah standard pembuatan dan pemakaian style untuk dokumen terstruktur, CSS digunakan untuk mempersingkat penulisan tag HTML seperti font, color, text, dan table menjadi lebih ringkas sehingga tidak terjadi pengulangan tulisan.
keuntungan  menggunakan CSS :
1. Memisahkan presentation sebuah dokumen dari isi dokumen itu sendiri
2. mempermudah dan mempersingkat pembuatan dan pemeliharaan dokumen web
3. mempercepat proses rendering/pembacaan HTML
4. dapat mengatur dan mengontrol tampilan web
5. CSS membuat tampilan lebih menarik
6. dapat digunakan dalam banyak halaman sekaligus
7. style-style banyak variasinya dan terus berrkembang
8. telah di support oleh sebagian besar web browser (standar W3C)

Cara penulisan CSS ada 3terdiri dari 3 cara, yaitu :
a. inline style sheet
 penulisan sintak css di dalam elemen HTML, utnuk metode ini jarang digunakan karena tidak efesien.
contoh syntaks penulisan  
<p style=”color: green”> teks ini berwarna hijau </p>

b. embeddef style sheet
Penulisan sintak css didalam dokumen HTML, dengan menggunakan metode ini maka menggunakan tag <style> dan </sttyle>

  contoh syntaks penulisan :

<style type=”text/css”>

H1 {color: red}

</style>

c. linked style sheet
 Metode ini adalah penulisan skrip CSS dihalaman yang berbeda atau terpisah dari HTML. Jadi kita dapat melakukan link ke file css yang telah dibuat. Untuk metode satu ini menggunakan tag <link rel> yang ditempatkan pada bagian tag <head>
contoh syntaks penulisan  :

<link rel=”stylesheet” type=”text/css” href=”URL_file css”>

HTML 5

Pada pertemuan ke 5 ini kami di ajarkan tentang HTML5. Yang terlintas dalam benak saya adalah apa perbedaan HTML5 dengan HTML versi sebelumnya ??? apa keunggulannya dibandingkan HTML sebelumnya ??

Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

Ada beberapa aturan yang harus dipelajari saat belajar  HTML5, yaitu :

Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript.

·         Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).

·         Lebih baik penanganan kesalahan.

·         Lebih banyak penggunaakn markup untuk mengganti scripting.

·         HTML5 harus independen.

·         Proses development-nya harus terlihat untuk umum (visible).

DOCTYPE UNTUK HTML5

DOCTYPE adalah instruksi untuk web browser tentang apa versi bahasa markup halaman yang ditulis.

Deklarasi DOCTYPE mengacu pada Document Type Definition(DTD).

DTDmenetapkan aturan untuk bahasa markup, sehingga browser dapat membuat konten halaman tersebut dengan benar.

Penggunaan DOCTYPE pada html5 lebih di sederhanakan.

Sintak penulisannya :

<html>

<head>

            <meta charset=”UTF-8”>

            <title>contoh penulisan untuk HTML 5</title>

</head>

<body>

Materi pertemuan ke 5 tantang HTML 5

</body>

</html>

HTML5 SEMANTIC ELEMENTS

Semantic= arti/makna

Semantic elements = elemen dengan makna

Apa Unsur Semantic?

Unsur semantik jelas menggambarkan maknanya untuk browser dan developer.

Contoh non-semantik elemen:

<div> dan <span> -tidak menjelaskan tentang isinya.

Contoh semantik elemen:

<form>, <table>, dan <img> -Jelas mendefinisikan isinya.

ELEMENSEMANTIKBARUdi HTML5

Banyak situs web yang ada saat ini mengandung kode HTML seperti ini:

<div id="nav">, <div class="header">, atau <div id="footer">, untuk menunjukkan link navigasi, header, dan footer.

HTML5 menawarkan elemen semantik baru untuk mendefinisikan bagian  yang berbeda dari sebuah halaman web:

<header>

<nav>

<section>

<article>

<aside>

<figure>

<figcaption>

<time>

<footer>

dan masih banyak tag-tag lainnya

PENJELASAN TAG-TAG HTML5

<header>, digunakan untuk area header(bagian atas sebuah halaman web).

<article>, untuk tempat meletakkan artikel atau tulisan dihalaman web.

<aside>, digunakan sebagai penambah informasi utama didalam halaman web. Biasanya berupa peringatan, catatan, dll.

<section>, untuk menentukan seksi-seksi dokumen. Misalnya bagian yg mendefinisikan sebagai profil, kontak, berita, dan sebagainya.

<figure>, Menentukan konten mandiri, seperti diagram, foto, daftar kode, dll.

<figcaption>, Mendefinisikan caption untuk elemen <figure>

VIDEO

Digunakan untuk memasukkan video, misalnya ingin memutar video kedalam halaman web.

Pada versi HTML sebelumnya untuk memutar video pada sebuah web menggunakan plugins tambahanyang biasa disebut flash Player.

Tag Video Pada HTML5, setidaknya ada 3 jenis format videoyang mendukung yaitu :

Ogg(File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)

MPEG4(File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)

WebM(File WebM dengan Video Codec VP8 dan Audio Codec Vorbis)(.webm)

Apabila anda mempunyai video dengan format video bukan ogg, mp4, dan webm. Anda bisa menggunakan aplikasi video converter salah satunya miro video converter.

Tag <video>

Sintaks Penulisanya :

<video src=”judulvideo.ogg” controls=”controls”>

</video>

Atau bisa juga dengan syntaks penulisan yang seperti ini :

<videocontrols=”controls”><source src=”judulvideo.mp4” type=”judulvideo.mp4”></video>

AUDIO

Digunakan untuk memasukkan suara/audio, misalnya ingin memutar lagu kedalam halaman web.

Ketika di generasi sebelumnya (HTML 4.01) memasukkan audio ke dalam web masih harus menggunakan flash.

Tag Audio Pada HTML5, setidaknya ada 3 jenis format audioyang mendukung yaitu:Ogg, MP3, Wav.

Tag <audio>

Sintaks Penulisanya :

<audio controls="controls"><source src="judullagu.mp3" type="audio/mp3"></audio>

Membuat Homepage

Jika kita membuat web pastinya agar tampilan web terlihat lebih menarik dan enak untuk di baca, maka kita perlu menambahkan gambar-gambar. Gambar-gambar tersebut merupakan daya tarik bagi pengunjungnya. Coba bayangkan apabila web yang kita kunjungi hanya berupa teks saja. Tidak ada gambar-gambar atau tidak ada icon-icon. Pasti sangat membosankan bukan ??? File gambar yang umum digunakan ada 3 jenis format yaitu PNG, GIF, dan JPG.

Syntaks penulisannya :

 <img src=”url” />

tag <img> mempunyai beberapa atribut, diantaranya :

src        : url dari file image/direktori gambar

align    : letak gambar pada teks, nilai atributnya left, right, top, middle, dan bottom

width   : lebar gambar dalam satu pixel

height  : tinggi gambar dalam satu pixel

alt        : menampilakan teks pengganti jika gambar tidak tampil di brows

border  : memberi bingkai pada gambar

contok penulisan :

latihan1.html

<html>

<head >

<title>latihan membuat gambar</title>

</head >

<body>

<p>

Logo Amikom

<img src="amikom.jpg" width="223" height="226" align="bottom" alt="Logo Amikom"/> menggunakan align="bottom".

</p>

</body>

</html>

Image sebagai link

Selain untuk mempercantik tampilan web, gambar juga bisa digunakan sebagai link untuk suatu dokumen. Misalnya :

Latihan2.html

<html>

<head >

<title>belajar membuat suatu link</title>

</head >

<body >

<p>

<b>Untuk mengunjungi website amikom klik gambar di samping</b>

<a href="http://www.amikom.ac.id"><img src="amikom.jpg" width="50"

height="50" align="middle" alt="Tombol" /> </a> </p>

</body>

</html>

Tabel html

Tabel dapat digunakan untuk memberikan data dalam bentuk kolom dan baris. Sebuah tabel mempunyai judul, baris untuk informasi, dan sel untuk setiap itemnya.

Syntaks penulisannya :

<table>

<tr>

<td>Belajar membuat Tabel</td>

<tr>

</table>

Beberapa atribut tag <table>

Align (left, center, right)         : Posisi horizontal tabel

Background                            : Menentukan gambar latar belakang tabel

Bgcolor                                   : Menentukan warna latar belakang tabel

Border                                     : Menentukan tebal bingkai tabel

Bordercolor                             : Menentukan warna bingkai tabel
bordercolorlight                      : Menentukan warna depan bingkai tabel

Bordercolordark                      : Menentukan warna bayangan bingkai tabel
cellspacing                               : Menentukan jarak spasi antar sel
cellspadding                            : Menentukan jarak isi sel dengan bingkai
height                                      : Menentukan tinggi tabel

Width                                      : Menentukan Lebar tabel

valign (left, middle, bottom)      : menentukan posisi vertikal teks dalam sel

Beberapa atribut <tr>

Align (left, center, right )         : posisi horzontal text dalam sel

Bgcolor                                    : menentukan warna latar belakang sel

Bordercolor                             : menentukan warna bingkai sel

Bordercolorlight                       : Menentukan warna depan bingkai tabel

Bordercolordark                      : Menentukan warna bayangan bingkai tabel

Height                                      : Menentukan tinggi tabel

Valign (top, middle, bottom)    : Menentukan posisi vertikal teks dalam sel

Form & input HTML

Form merupakan salah satu elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Untuk membuat form digunakan tag awal <form> dan tag penutup </form>.

Syntaks penulisannya :

<form action=”url” method=”gel|post”>

</form>

LINK dan TAMPILAN WEB

pada pertemuan ketiga kali ini kami diajarkan tentang pembuatan akronim, penulisan alamat, membuat link untuk bisa di kunjungi. 

akronim

Akronim merupakan penulisan suatu dokumen atau beberapa istilah kita terkadang menggunakan singkatan.

Syntaks penulisannya :

 <abbr title=“kepanjangannya”>singkatan</abbr>

  <acronym title=“kepanjangannya”>singkatan</acronym>

contoh :

akronim.html

<html>

<head>

<title>Contoh Penggunaan Akronim</title>

</head>

<body>

<abbr title="World Wide Web">WWW</abbr> adalah halaman-halaman 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).

 </body>

</html>

address

Alamat (address) merupakan salah satu elemen yang umum di dalam suatu dokumen.

Address.html

<html>

<head>

<title>Contoh Penggunaan Address</title>

</head>

<body>

<address>

STMIK AMIKOM Yogykarta<br />

Kampus Terpadu: Jl.Ring Road Utara<br />

Condong Catur<br />

Sleman<br />

Yogyakarta

</address>

</body>

 </html>

HTML dan CSS

1.      Elemen dan tag HTML

HTML adalah suatu bahasa yang dipergunakan untuk mendeskripsikan halaman web. HTML merupakan singkatan dari Hyper Text Markup Language.

Elemen HTML yaitu komponen penyusun terkecil dari sebuah dokumen HTML.

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 /> )

• Ganti Baris – Break ( <br /> )

• Horizontal Rule ( <hr /> )

• Input Field ( <input /> )

Struktur dasar HTML

<html>

<head>

            ...ini dokumen...

</head>

<body>

            ...konten yang akan ditampilkan di halaman browser

</body>

</html>