Membuattombolsubmit

WELCOME TO BLOG

Membuat Tombol Submit dan Reset

Posted on oktober,9 2o17

Sampailah kita pada bagian akhir pembuatan form dengan HTML. Apalagi kalau bukan tombol submit dan reset. Sebenarnya, saya sudah menjelaskan tentang tombol submit ini di pelajaran tentang input data, hanya saja mungkin anda belum terfokus kesana sehingga saya perlu untuk menjelaskan lebih lanjut disini.

Untuk membuat tombol submit, kita menggunakan kode seperti ini:

<input type="submit" value="Kirimkan"/>

Sedangkan untuk tombol reset, kita menggunakan kode:

<input type="reset" value="Hapus Form"/>

Kata-kata Kirimkan dan Hapus Form bisa anda ganti dengan kata-kata yang lainnya sesuka hati.

SUBMIT MENGGUNAKAN GAMBAR

Sekarang kita akan mencoba membuat tombol submit menggunakan gambar. Caranya hampir sama, hanya saja kita sekarang menggunakan type=”image”. Contohnya seperti ini:

<input type="image" src="file-gambar.jpg" width="55" height="22"/>

file-gambar.jpg harus anda ganti dengan gambar anda sendiri. width dan height adalah ukuran lebar dan tinggi gambar dalam satuan pixel.

Pengertian Tag, Elemen, dan Atribut pada HTML

dalam lanjutan tutorial belajar HTML dasar kali ini kita akan membahas. Ketiganya merupakan dasar dari HTML, dan dasar dari seluruh halaman web yang ada di Internet.

---

Pengertian Tag dalam HTML

Sebagai sebuah bahasa markup, HTMLmembutuhkan cara untuk memberitahu web browser untuk apa fungsi sebuah text. Apakah text itu ditulis sebagai sebuah paragraf, list, atau sebagai link? Dalam HTML, tanda ini dikenal dengan istilah tag.

Hampir semua tag di dalam HTML ditulis secara berpasangan, yakni tag pembukadan tag penutup, dimana objek yang dikenai perintah tag berada di antara tag pembuka dan tag penutup ini. Objek disini dapat berupa text, gambar, maupun video. Penulisan tag berada di antara dua kurung siku: “<” dan “>”.

Berikut adalah format dasar penulisan tag HTML:

<tag_pembuka>objek yang dikenai perintah tag</tag_penutup>

Sebagai contoh, perhatikan kode HTML berikut :

<p> Ini adalah sebuah paragraf </p>

• <p> adalah tag pembuka, dalam contoh ini p adalah tag untuk paragraf.
• </p> adalah tag penutup paragraf. Perbedaannya dengan tag pembuka terletak dari tanda forward slash (/)

Jika lupa memberikan penutup tag, umumnya browser akan “memaafkan” kesalahan ini dan tetap menampilkan hasilnya seolah-olah kita menuliskan tag penutup. Walaupun ini sepertinya memudahkan, tidak jarang malah bikin bingung.

PembahasanMendalam

Pembahasan mendalam untuk topik topik yang lebih lengkap akan dipisahkan ke dalam Tutorial HTML Lanjutan, seperti Cara membuat menggunakan tabel, cara menformat text, cara membuat form, serta pembahasan khusus mengenai perkembangan terbaru dari HTML, yakni HTML5.😕

hyperlink, sedangkan kalau di dalam dokumen itu ada bab 2, maka kita bisa langsung merujuk ke bab 2 tadi dengan bantuan anchor.

Untuk membuat hyperlink dan anchor kita menggunakan elemen HTML anchor <a>.

Dalam tutorial kali ini, kita akan menggunakan istilah link HTML saat elemen <a> merujuk ke sebuah halaman dan istilah anchor HTML saat element <a> tersebut merujuk ke sebuah alamat di dalam dokumen.
Bikin Link HTML

Sintaks Link:

?

1	<a href="/htmldanlainnya.blogspot.com/url">Teks Link</a>

Perhatikan, pembuka berisi atribut link tersebut.

Isi elemen (Teks link) mendefinisikan apa yang ingin anda tampilkan ke pengunjung.

Catatan: Isi elemen tidak harus berupa teks lho. Kamu juga bisa me-link dari sebuah gambar atau elemen HTML lainnya.

Atribut href

Atribut href adalah alamat yang akan dibuka saat seseorang mengklik link yang kita buat.

href Elemen <a> ini mendefinisikan sebuah link yang akan menuju ke sebuah website.

< a href="htmldanlainya.blogspot.com> </a> Kode tersebut akan ditampilkan seperti ini. Silahkan dicoba.

Atribut target

Atribut target sangat berguna bagi kita untuk mengatur halaman yang kita tuju itu akan dibuka di mana.

Kita bisa membukanya di halaman utama ini langsung atau membukanya di halaman baru saat seorang pengunjung mengklik link yang kita sediakan.

Berbeda dengan kode sebelumnya pada sebuah jendela baru:

?

Attribute name

Saat kita menggunakan atribut name, maka itu berarti kita mendefinisikan sebuah nama anchor yang berada di dalam sebuah halaman HTML.

Nama anchor tidak akan nampak di mata pengunjung. Itu hanya merupakan pendefinisian di sebuah halaman web aja.

?

1	<a name="label">Apapun</a>

Nah, link yang menuju ke halaman itu bikinnya gini:

?

1	<a href="#label">Apapun</a>

Perhatikan tanda # yang mendefinisikan nama anchor

Contoh:

Sebuah anchor dalam dokumen HTML:

?

1	<a name="top">Ini bagian paling atas</a>

Sebuah link yang merujuk ke bagian paling atas dalam dokumen yang sama:

?

1	<a href="#top">Kembali ke atas</a>

Sebuah link yang menuju ke sebuah anchor di halaman web lain:



Membuat teks mengalir di gambar

Bagaimana caranya?

Kita akan memasukkan style CSS ke dalam kode gambar sehingga bisa melakukan aneka macam modifikasi. Insya Allah nanti di bagian CSS kita akan pelajari semua lebih rinci. Karena artikel ini bertujuan untuk membuat text yang mengalir di sekeliling gambar, maka kita bahas bagian itu saja dulu ya.

Untuk menambah CSS di kode HTML, kita cukup menambahkan atribut style saja. Sehingga hasilnya seperti ini:

<img src="images/gambarku.jpg" alt="Ini Gambarku" style="float:right"/>

Perhatikan, ada tambahan style="float:right"pada atribut images-nya. Pada contoh diatas, saya buat gambar ada di sebelah kanan dan text mengalir di sebelah kirinya. Apabila ingin gambarnya di kiri dan text di kanan, maka kita cukup mengganti kata right dengan left. Gambar bukan? Contohnya seperti ini:

<img src="images/gambarku.jpg" alt="Ini Gambarku" style="float:left"/>

Bisa dimengerti kan?

Oke, insya Allah besok kita bahas bagian HTML yang cukup penting dalam SEO yaitu Heading. Doakan mudah-mudahan punya banyak waktu ya.. Thanks

?