Mari Belajar - Belajar dimana saja dan kapan saja.: HTML
Terbaru
Memuat...
Home HTML
Tampilkan postingan dengan label HTML. Tampilkan semua postingan
Tampilkan postingan dengan label HTML. Tampilkan semua postingan

Minggu, 07 Juli 2013

Form pada HTML :: Desain Web Part 4

Form pada HTML :: Desain Web Part 4

      1 comment   

FORM

Form digunakan untuk mengumpulkan informasi dari user. Untuk membuat form digunakan tag <form>…</form>. Pasangan tag tsb diletakkan di antara <BODY>…</BODY>. Dalam sebuah form bisa terdapat banyak element.

BENTUK UMUM FORM


METHOD => menentukan cara mengirimkan data yang diinputkan user ke server. Ada 2 cara yang dapat dipakai yaitu GET dan POST
ACTION => menentukan lokasi file yang akan memproses data.
NAME => menentukan nama form. Nama ini berfungsi sebagai variable yang akan dikirimkan ke target dalam atribut ACTION.

FORM  - Textfield / Textbox

berbentuk kotak inputan satu baris tunggal yang digunakan untuk memasukkan data berupa teks maupun angka.

Atribut :
size=> menunjukkan panjangnya kolom.
Value => menunjukkan default text yang ditampilkan.
Name => nama textfield
Readonly=readonly => membuat textbox tidak bisa diisi
Maxlength => menentukan panjang maksimum

FORM – Password Field

Prinsip kerjanya sama dengan TEXTFIELD, hanya saja karakter yang diketikkan diganti dengan karakter *****.

Atribut yang dimiliki sama dengan textbox.

FORM - Textarea

Digunakan untuk memasukkan beberapa baris text
Atribut :
Name => nama textarea 
Cols => jumlah kolom yang akan tampil
Rows => jumlah baris yang akan tampil  

Form - Checkbox

Digunakan untuk membuat kotak pilihan. 
Biasa digunakan jika group pilihan bisa dipilih lebih dari satu (misalnya dalam pemilihan hoby, warna kesukaan)
Atribut : 
Name => nama checkbox (dalam 1 group memiliki nama yang berbeda
value => nilai / data yang akan dikirimkan ke server
Checked=checked => membuat checkbox terpilih
Disabled=disabled => membuat checkbox tidak bisa dipilih

FORM – Radio Button

Kegunaannya sama dengan checkbox hanya saja bentuknya lingkaran.
Biasa digunakan jika dalam sebuah group pilihan, hanya satu yang bisa dipilih (misalnya dalam pemilihan agama dan jenis kelamin)
Atribut :
Name => nama radio button (dalam 1 group memiliki nama yang sama
value => nilai / data yang akan dikirimkan ke server
Checked=checked => membuat radio button terpilih
disabled=disabled => membuat radio button ditidak bisa dipilih

FORM – Combobox / Dropdown

Digunakan untuk membuat daftar menu.
Atribut option :
Selected=‘selected’ => memberikan nilai default pilihan yang dipilih
Atribut select :
Name => nama combobox
Size => menentukan jumlah pilihan yang ditampilkan
Multiple=multiple => membuat combobox bisa dipilih lebih dari 1

FORM - Button

SUBMIT BUTTON
Digunakan untuk mengirimkan data yang dimasukkan melalui form oleh pengunjung ke server.
Data dalam form baru akan dikirim setelah tombol ini diklik

RESET BUTTON
Digunakan untuk membatalkan data yang telah diketik di form sehinnga form menjadi kosong. 

Minggu, 16 Juni 2013

Tabel pada HTML :: Desain Web Part 3

      Comment   

TABEL

Fungsi tabel pada dokumen HTML menampilkan informasi secara terstruktur, ringkas dan mudah dibaca mengatur tampilan website agar lebih menarik. Tabel didefinisikan dengan tag <table>…</table>. Setiap tabel terbagi ke dalam baris (didefinisikan dengan tag <tr>…</tr> dan setiap baris terbagi ke dalam sel data (didefinisikan dengan tag <td>…</td>. Sebuah sel data dapat berisi teks, gambar, paragraf, form, list dll.
<table>..</table>
Berfungsi untuk memberitahukan browser bahwa kita akan membuat sebuah tabel.
Atribut : 
border => memberikan garis pembatas pada tabel. 
Align => mengatur letak tabel. Nilainya left, center, dan right.
width => menentukan lebar tabel (dalam pixel atau %)
bgcolor => memberi background warna pada tabel.
cellspacing  => memberi jarak antar sel (dalam pixel)
cellpadding => memberi arak antara isi sel dengan batas sel (dalam pixel).

<tr>…</tr>
Berfungsi untuk membuat suatu baris baru  di dalam tabel. Posisi default teks rata kiri.
Atribut :
Align => mengatur perataan data pada baris, nilainya left, center, right 
bgcolor => memberi latar belakang pada baris 
valign => mengatur perataan vertikal, nilainy top, bottom, middle.

<td>…</td>
Berfungsi untuk membuat kolom / sel baru pada tabel.
Posisi objek rata kiri.
Atribut : 
Align => mengatur perataan teks, nilainya left, center, dan right
Bgcolor => memberi latar belakang berupa warna
Colspan =>  menggabungkan beberapa kolom 
rowspan menggabungkan beberapa baris
Valign => mengatur perataan verikal, nilainya top, middle, dan bottom
Width =>  mengatur lebar kolom.

<th>…</th>
Berfungsi untuk memberi judul pada kolom. Table Header ditampilkan dalam bentuk cetakan tebal dan rata tengah.

<caption>…</caption>
Berfungsi untuk membuat judul tabel. Posisi default dari judul adalah di tengah pada bagian paling atas tabel. 
Attribut align=“bottom” dapat digunakan untuk menempatkan judul pada bagian bawah tabel

Format TAG pada HTML :: Desain Web Part 2

Format TAG pada HTML :: Desain Web Part 2

      Comment   
Format TAG pada HTML :: Desain Web Part 2

HEADING

Heading biasa digunakan untuk membuat judul pada content halaman web. Tag yang digunakan adalah <Hn> dengan nilai n antara 1 sampai dengan 6. Semakin besar nilai n maka semakin kecil huruf yang tercetak. Contoh: <h1 align=‘center’>Pendahuluan</h1>

BLOCKQUOTE

Tag <blockquote> digunakan untuk membuat sebagian teks yang dikutip sebagai suatu blok sendiri. 

SPECIAL CHARACTER

Untuk menampilkan karakter khusus, digunakan tanda & (ampersand) diakhiri oleh tanda ; (titik koma) Bisa menggunakan nama maupun angka.
Contoh:
- &lt; = <
- &reg; = ®
- &amp; = &
- &gt; = >
- &quot; = “
- &deg; = °
- &copy; = ©
- &nbsp; = spasi
- &#188; = 1/4

TAG IMAGE

Untuk menyisipkan gambar dapat memanfaatkan tag <IMG>. Format file gambar yang bisa ditampilkan bisa bermacam-macam, misalnya png, jpg, gif, dan sebagainya. Untuk menampilkan animasi file GIF, penggunaannya sama seperti file gambar biasa.

Contoh sintaksis: 

Contoh penggunaan :


TAG HYPERLINK

Kekuatan utama dokumen HTML terletak pada hypertext link atau hyperlink atau lebih singkat lagi disebut link. 
Dengan hyperlink, dapat membuka dokumen HTML lain. 
Hyperlink ini dapat diletakkan pada teks tertentu ataupun pada sebuah image.
Bila diletakkan pada teks maka teks tersebut (secara default) akan digaris-bawahi dan warnanya menjadi berbeda. Sintaksis penulisan :


Contoh penggunaan :

Path Relatif dan Path Absolute

Bila file HTML tujuan berada pada domain name yang sama tetapi pada direktori yang tidak sama maka kita bisa menggunakan url relatif, yaitu path name relatif berdasarkan posisi file saat ini. Misalnya kita akan membuka file atas.html yang berada 2 tingkat diatasnya maka hyperlink-nya berbentuk seperti :


Bila file yang akan dikaitkan berada pada domain name yang berbeda dengan domain name file yang sekarang ini, maka kita harus menggunakan url lengkap file tujuan tersebut. Misalnya :


Mailto

Untuk memudahkan pengguna mengirimkan email ke suatu alamat email tertentu, dapat dilakukan dengan tag hyperlink ini. Yaitu dengan menambah "mailto" dan alamat email tujuan. Sintaksis penulisannya sebagai berikut :

Pengenalan HTML :: Desain Web Part 1

      Comment   

Pengenalan HTML

Pengenalan HTML
HTML (Hypertext Markup Language) merupakan bahasa pemrograman yang digunakan untuk membuat halaman web. Untuk menulis kode HTML digunakan editor  seperti NotePad, Frontpage, atau Dreamweaver.

 Contoh kode HTML yang sangat sederhana :

Pasangan tag <HTML> dan </HTML> menandakan bahwa kode yang terdapat di dalamnya adalah kode HTML sehingga browser akan menerjemahkan sebagai dokumen HTML.
Bagian yang terdapat dalam <HTML> dan </HTML> umumnya terbagi atas :
  • Kepala, ditandai dengan pasangan tag <HEAD> dan </HEAD>.
  • Badan, ditandai dengan pasangan tag <BODY> dan </BODY>.
Bagian head berfungsi untuk memberikan informasi tentang dokumen HTML, seperti judul dokumen HTML yang ditulis dalam  pasangan tag <TITLE> dan </TITLE>.
Bagian body berisi semua instruksi untuk mengatur seluruh tampilan halaman web di web browser.

Horizontal Line, Paragraph, Break

Horizontal Line 

Untuk mempercantik halaman, seringkali pembuat dokumen Web menambahkan garis horisontal. Garis ini sebenarnya dapat dibuat dengan mudah, yakni dengan menyertakan tag <HR>.

Paragraph 

Jika dokumen HTML berisi teks yang cukup panjang maka sangat diperlukan untuk membaginya kedalam beberapa paragraph untuk memudahkan pembacaan oleh pengguna. Pembentukan elemen paragraph ini menggunakan sintaksis :
Tag penutup </p> boleh dituliskan boleh tidak, akan tetapi sebaiknya dituliskan untuk mengetahui berakhirnya sebuah paragraf.

Break

Kadangkala diperlukan untuk menulis di baris yang baru dalam sebuah paragraf yang sama pada halaman web yang dibuat. Untuk itu digunakan tag break yang berupa <BR>.

Font Style

Salah satu tujuan perancangan halaman web adalah membuat halaman web yang menarik atau "eye catching". Untuk itu dalam suatu paragraph diperlukan suatu variasi huruf atau font style. 
Berikut ini beberapa font style yang sering digunakan, antara lain :
Pengenalan HTML - Font Style

Tag Font 

Dalam mengatur layout sebuah halaman web yang berisi teks, pengaturan besarnya huruf, warna dan ukuran adalah hal yang sangat penting untuk dilakukan oleh seorang perancang web. Pengaturan ini dapat menggunakan tag Font <FONT> dengan sintaksis sebagai berikut :
Ukuran font dapat ditentukan dengan angka 1 sampai 7 dengan nilai default 2. Sedangkan warna dapat diganti dengan warna lain.
Contoh penggunaan :

Atribut Warna

Untuk lebih mempercantik tampilan sebuah halaman web, permainan warna menjadi satu hal penting dalam perancangan halaman web. Penulisan atribut warna dapat menggunakan nilai heksa desimal (6 digit) ataupun nama warnanya. 
Pengenalan HTML - Attribute Warna
Bisa memakai Color Code Generation

List

HTML mendukung beberapa format list, yaitu Unordered List dan Ordered List.
Unordered List adalah list yang menggunakan bullet sebagai tanda point.
Contoh sintaksis :
Hasil di browser :
  • apples 
  • bananas 
  • grapefruit

Ordered List

List yang menggunakan angka urut sebagai tanda point. 
Contoh sintaksis : 
Tampilan di browser :
  1. oranges 
  2. peaches 
  3. grapes 
Itulah Pengenalan HTML dasar untuk yang baru mengenali dunia HTML. Silahkan dipelajari ya sobat :) Semoga bermanfaat~

Senin, 11 Maret 2013

Cara membuat iframe pada HTML

Cara membuat iframe pada HTML

      4 comments   


Okay pada kali ini saya akan memberitahukan cara membuat iframe pada HTML, bisa ditaruh pada blog atau wordpress. Sebelum saya memberitahukan script ifrrame saya akan memberitahukan gunanya dari iframe. Misal saya mempunya 2 halaman html contoh: index.html dan info.html. Nah dihalaman index.html saya ingin menaruh halaman info.html. Jadi terdapat 2 halaman dalam 1 halaman.
Nah untuk menaruh info.html di dalam file index.html gunakan script ini :

<iframe scrolling="yes" frameborder="0" width="500" height="300"src="upload.php"></iframe>

Nah script itu ditaruh di dalam tag body, misal mau menaruh info.html di dalam table jadi taruh script iframe itu didalam tag table.


Jika iframe itu tidak ingin di scroll, pada script scrolling=”yes” diganti dengan no, frameborder untuk memberikan garis tepi, width dan height untuk memberikan ukuran Lebar dan Tinggi.


Okay cukup sampai disini pembahasan tentang iframe. Jika ingin bertanya bisa berikan komentar dibawah.
Semoga bermanfaat ^^



Rumah Cerdasku

SMA

[SMA][recentbylabel2]

Kuliah

[KULIAH][recentbylabel2]
Pemberitahuan
Selamat datang di blog Mari Belajar.
Ayo bagikan kebaikan dengan membagikan artikel yang bermanfaat di blog Mari Belajar ke sosial media kalian.
Jangan lupa untuk like dan follow sosial media Mari Belajar untuk mendapatkan materi belajar terbaru setiap harinya.
Tutup
Night Mode