Belajar HTML Lengkap Untuk Pemula Disertai Contoh Untuk Latihan

Daftar Isi hide

8. Belajar HTML Forms

9. Inline Frame <Iframe>

10. Belajar HTML Bentuk Form

11. Belajar HTML 5 New Tab

12. Belajar HTML Audio

13. Video

Kesimpulan

8. Belajar HTML Forms

Formulir dibentuk oleh Label dan satu atau lebih elemen tr, th, atau td.
Sel dapat berisi teks, gambar, daftar, paragraf, formulir, garis horizontal, tabel, dan lainnya. struktur dasar:

<table border="1">

<tr>

<td>row 1, cell 1</td>

<td>row 1, cell 2</td>

</tr>

<tr>

<td>row 2, cell 1</td>

<td>row 2, cell 2</td>

</tr>

</table>

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Penjelasan:

html memiliki 10 tag terkait tabel.

<caption> mendefinisikan judul tabel

<col> mendefinisikan kolom

<colgroup> mendefinisikan pengelompokan kolom tabel

<tabel> mendefinisikan tabel

<tbody> mendefinisikan bentuk tubuh

<td> mendefinisikan sel

<tfoot> Mendefinisikan footer tabel (bawah)

<th> mendefinisikan header tabel

<thead> mendefinisikan header tabel

<tr> Garis definisi

Biasanya tag <tbody>, <thead>, <tfoot> jarang digunakan karena browser tidak mendukungnya dengan baik.

Deskripsi properti:

width px、 % menentukan lebar tabel
height px、% Tinggi
border px menentukan lebar batas tabel
cellpadding px menentukan padding antara perbatasan dan konten
cellspacing px、 % menentukan ruang antar sel
align left、 right 、 center menentukan perataan tabel
valign top、 middle 、 bottom pengaturan vertikal atas, tengah, bawah valign
colspan menggabungkan sel kolom
rowspan warna latar belakang
bgcolor warna latar belakang
background 　 Gambar background　
bordercolor Border warna warna

Contoh sebagai berikut:

<table align="center" cellpadding="2" cellspacing="3" width="300" height="300" border="1" >
       <tr >
            <td colspan="2">&nbsp;</td>                          
       </tr>
       <tr>
            <td >&nbsp;</td>
            <td>&nbsp;</td>
       </tr>       
 </table>

9. Inline Frame <Iframe>

Penjelasan :

width px , % specifies the width of the frame
height px , % specifies the height of the frame
scrolling yes,no,auto whether to display scroll bars
frameborder 1, 0 whether to display the border

Syntax: <iframe src=”URL” name=”frame name”> </iframe>

Contoh sebagai berikut:

<iframe src="http://www.Labkom99.com" name="labkom99" height="600"width="600"></iframe>

Jika properti pengguliran tidak ditentukan, ini didasarkan pada tinggi bingkai yang ditetapkan untuk menentukan apakah bilah gulir diperlukan.

Peran form dalam html sangat kuat. Kita sering menggunakan formulir dalam kehidupan kita, seperti mengisi beberapa informasi dasar. Hal yang sama berlaku di halaman web, kita tidak dapat menghindari mendaftarkan beberapa akun dan ada lebih banyak formulir yang digunakan pada saat ini.

Formulir terutama bertanggung jawab untuk mendapatkan data yang diisi oleh pengguna dan mengirimkan data ke server melalui browser.

Formulir didefinisikan menggunakan tag (<form>).

Struktur dasar formulir:

<form name="form1" action="URL" method="get|post" target="">

   Username：<input type="text" name="uname" />

   Password：<input type="password" name="passwd" />

</form>

menjelaskan:

Deskripsi properti
sebutkan nama formulirnya
formulir tindakan kirim alamat
metode formulir metode pengiriman data (dapatkan: kirim parameter ke server di alamat url, posting: kirim parameter ke server di latar belakang)
enctype tipe MIME
metode target terbuka (_blank: buka di jendela baru _self: muat dokumen dalam bingkai yang sama _top: muat dokumen ke jendela browser paling atas asli)

Teks bidang: Bidang teks diatur oleh tag <input type=”text”>. Ketika pengguna ingin mengetik huruf, angka, dll di formulir, bidang teks akan digunakan.

<form>
   First name: <input type="text" name="firstname"><br>
   Last name: <input type="text" name="lastname">
</form>

Browser menampilkan berikut ini:

CATATAN: Bentuknya sendiri tidak terlihat. Selain itu, di sebagian besar browser, lebar default bidang teks adalah 20 karakter.

Penjelasan:

Deskripsi properti
ketik tipe elemen input
beri nama nama elemen input
nilai nilai elemen input
ukuran lebar elemen input
readonly adalah hanya-baca
maxlength Panjang maksimum karakter input
dinonaktifkan apakah akan menonaktifkan

Password field

Bidang kata sandi ditentukan oleh tag :

<form>
Password: <input type="password" name="pwd">
</form>

Efek tampilan browser adalah sebagai berikut:

Deskripsi properti

ketik tipe elemen input
beri nama nama elemen input
ukuran lebar elemen input
maxlength mendefinisikan jumlah karakter maksimum untuk dimasukkan

Catatan: Karakter bidang sandi tidak ditampilkan dalam teks biasa, tetapi diganti dengan tanda bintang atau titik.

Single button

<input type="radio"> 
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">
</form>

Name atribut: Tentukan nama tombol radio. Untuk memastikan perolehan data yang akurat, tombol radio digunakan dalam grup, dan nama yang sama harus digunakan untuk tombol radio dalam grup yang sama.

Checkbox

<input type="checkbox"> 
<form>
<input type="kotak centang" name="song" value="Dingge">Dingge<br>
<input type="checkbox" name="run" value="run"> 
</form>

Submit button

<input type="submit">

Hidden field

Bidang tersembunyi digunakan saat program mengirimkan nilai tertentu yang tidak perlu dilihat pengguna.

<input type="hidden" name="uid" value="10"/>

Upload files

<input type=“file” name=“photo” />

Untuk menggunakan fitur ini, tentukan atribut metode dalam tag formulir. Untuk menentukan metode sebagai posting, tentukan atribut enctype sebagai multipart/form-data.

banyak kontrol akan mengunggah banyak file

<input type="file" name="photo" multiple />
<input type="button" value="..."/>

Textarea ( form element: multi-line text area)

menjelaskan:

Deskripsi properti
sebutkan nama unsurnya
baris menentukan ketinggian kotak teks
cols menentukan lebar kotak teks

contoh: <textarea name=”content” rows=”5″ cols=”50″> </textarea>

Catatan: Lebar dan tinggi kotak teks di sini terdiri dari jumlah karakter.

Simple drop-down box:

<form action="">

<select name="cars">

<option value="volvo">Volvo</option>

<option value="saab">Saab</option>

<option value="fiat">Fiat</option>

<option value="audi">Audi</option>

</select>

Deskripsi properti

beri nama nama kotak daftar tarik-turun
size Jumlah baris yang ditampilkan di kotak daftar drop-down
beberapa Apakah akan memilih beberapa
dinonaktifkan apakah akan menonaktifkan
dipilih menyetel opsi yang dipilih default
nilai opsi

Label

Peran tag label adalah untuk mengaitkan input atau opsi dengan teks labelnya.

Contoh:

<input type="radio" name="sex" value="1" id="male" />

         <label for="male">Laki Laki</label>

         <input type="radio" name="sex" value="0" id="female" />

         <label for="female">Perempuan</label>

**optgroup(** Form element: drop-down box grouping)

<select name="city" multiple>

         <optgroup label="Batam">

             <option value="1">Jakarta</option>

              <option value="2">Jogja</option>

        </optgroup>

       <optgroup label="Other">

            <option value="3">Palu</option>

            <option value="4">Bandung</option>

            </optgroup> </select>

Label menentukan daftar opsi. Gunakan elemen ini bersama dengan elemen input untuk menentukan nilai yang mungkinuntuk input. datalist dan opsinya tidak ditampilkan, itu hanya daftar nilai input yang valid. Gunakan daftar atribut elemen input untuk mengikat datalist.

11. Belajar HTML 5 New Tab

Label	Describe
<form>	Define a form for user input
<input>	define input fields
<textarea>	Define the text field (a multi-line input control)
<label>	Defines the label of the element, usually the input title
<fieldset>	Defines a set of related form elements and encloses them with an outline
<legend>	defines the title of the element
<select>	Defines a dropdown list of options
<optgroup>	Define option groups
<option>	Define the options in the drop-down list
<button>	define a click button
<datalist> New	Specifies a list of predefined input control options
<keygen> New	Defines the key pair generator field of the form
<output> New	define a calculation result

HTML5 form all types

Button	Define clickable buttons (mostly used with JavaScript to start scripts)
checkbox	Define checkboxes.
color	Define the color picker.
date	Define date field (with calendar control)
datetime	Define date fields (with calendar and time controls)
datetime-local	Define date fields (with calendar and time controls)
month	Defines the month of the date field (with calendar control)
week	Defines the week of the date field (with calendar control)
time	Define hours, minutes, seconds for date fields (with time control)
email	Define a text field for e-mail addresses
file	Define input fields and “Browse…” button for file upload
hidden	Define hidden input fields
image	Define image as submit button
number	Define a numeric field with a spinner control
password	Define the password field. Characters in the field are masked.
radio	Define radio buttons.
range	Define a numeric field with a slider control.
reset	Define the reset button. The reset button resets all form fields to their initial values.
search	Defines a text field for searching.
submit	Define the submit button. The submit button sends data to the server.
tel	Defines a text field for phone numbers.
text	default. Defines a single-line input field in which the user can enter text. The default is 20 characters.
url	Defines the text field used for the URL.

12. Belajar HTML Audio

Format dasar: <audio src=”” controls><audio>

Browser yang berbeda memiliki kompatibilitas yang berbeda dengan audio, jadi yang terbaik adalah menentukan tipenya di tipe atribut

Deskripsi properti:

putar otomatis Jika ada, video akan diputar segera setelah siap.
kontrol Jika ada, menampilkan kontrol, seperti tombol putar, kepada pengguna.
loop Jika atribut ini ada, itu akan mulai diputar lagi saat file media selesai diputar.
dibisukan menentukan bahwa output audio video harus di mode diam.
URL poster menentukan gambar yang akan ditampilkan saat video diunduh, atau sebelum pengguna mengeklik tombol putar.
preload Jika ada, video dimuat saat halaman dimuat dan siap diputar. Properti ini diabaikan jika “putar otomatis” digunakan.
src URL url video yang akan diputar.
width mengatur lebar pemutar video.
height mengatur ketinggian pemutar video.

<audio src="4.ogv" width="300" height="40" controls><audio>

13. Video

Format dasar : <video src=”4.ogv” controls ></viedo>

Sifatnya mirip dengan audio.

Kesimpulan

Diatas adalah artikel Labkom99 tentang belajar pengetahuan dasar HTML ini diperkenalkan disini. Untuk pengetahuan dasar HTML yang lebih terkait, silahkan cari artikel sebelumnya tentang HTML di Labkom99 atau lanjutkan menelusuri artikel terkait di bawah ini.

Pages: 1 2 3

Post Views: 484