Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Saturday, October 3, 2015

Pengertian HTML dan Strukturnya

HTML adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut denganSGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989. Contoh penulisannya sebagai berikut :
File yang dihasilkan berupa (.html). berikut adalah langkah langkah untuk membuat file html :
1. Bukalah notepad yang telah disediakan OS anda
2. Tulislah sebagai berikut :
<html>
<head>

</head>
<body>

</body>
</html
3. Simpan file tersebut dengan ketentuan (Nama.html)
4. Jadilah file HTML anda



Posted by at No comments:
Labels:

Pengertian Head dan Meta pada File HTML

Dokumen HTML diapit oleh tag < HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Header juga memuat tag META yang biasanya dapat digunakan untuk menentukan informasi tertentu mengenai document HTML. Anda bisa menentukan author name, keywords, dan lainnya pada tag META.



Posted by at No comments:
Labels:

Pengertian Body, Tag, dan Atribut pada HTML

ELEMEN BODY
Bagian BODY, yang dinyatakan dengan tag < BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.

TAG
HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).
Tag biasanya merupakan suatu pasangan yang disebut dengan:
  • Tag awal, dinyatakan dalam bentuk <nama tag>
  • Tag akhir, dinyatakan dalam bentuk </nama tag>
Formatnya: <nama tag> teks yang ditampilkan </nama tag>.
Contoh: untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML < i>Teks ini terlihat miring di browser Anda</i>

ATRIBUT
Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya, <P ALIGN=”left”> digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right atau justify.

Berikut adalh contoh penulusannya :





Posted by at No comments:
Labels:

Pengertian Favicon dan cara penulisannya

 Favorit Icon atau yang disebut Favicon adalah sebuah gambar kecil di addres bar. Terletak di sebelah kiri nama website. Favicon berfungci sebagai penanda web atau icon web. Favicon ada berbagai model, pada setiap model nya ditentukan oleh setiap pembuat web itu sendiri. Penulisan Favicon terletak diantara <head>. Berikut adalah cara penulisan dan pembuatan atau penyisipan Favicon.
1. Buatlah file HTML
2. tulislah code berikut diantara <head> .... </head>
<head>
      <link rel="shortcut icon" href="link_gambar">
</head>
3. rell di isi shortcut icon dan href di isi link gambar nya



catatan :
1. jika gambar sudah berada dalam internet kita tinggal copy ling nya saja
2. jika gambar tidak ada di internet taruh gambar satu folder dengan file HTML dan href isi dengan namanya
3. jika gambar di folder HTML berada dalam folder lain maka tulis href sebagai berikut ( href="namafolder/namagambar.png" )




Posted by at No comments:
Labels:

TEG PARAGRAF DALAM HTML

Teks dalam HTML tidak sesederhana yang dibayangkan, banyak komponen yang menyertainya agar teks ditampilkan sesuai yang dikehendaki. HTML menyediakan bermacam-macam elemen, diantaranya :
 PARAGRAF, untuk membuat suatu paragraf
 BLOCKQUOTE, untuk membuat suatu kutipan teks

 DIVIDER, untuk mengelompokan teks tertentu

<p> memiliki fungsi sebagai paragraf. Jadi jika terdapat text atau gambar berada dalam tag <p> dan</p> itu berarti berada dalam sebuah paragraf. Suatu paragraf dalam dokumen HTML ditandai dengan pasangan elemen <P>…</P>. Atribut yang digunakan dalam paragraf ALIGN mempunyai tiga nilai, yaitu :
 LEFT, untuk meratakan teks ke margin kiri
 RIGHT, untuk meratakan teks ke margin kanan
 CENTER, untuk meratakan teks ke tengah margin
Contoh penggunaan tag paragraf:
<html>
<head>
<title>enter, tab dan spasi dalam html</title>
</head>
<body>
<p align=”left”>paragraf satu</p>
<p align=”center”>paragraf dua</p>
<p align=”right”>paragraf tiga</p>
</body>

</html>



Posted by at No comments:
Labels:

Elemen Dasar JavaScript dalam HTML

Elemen Dasar JavaScript

Sebagaimana bahasa pemrograman umumnya, JavaScript terbentuk atas elemen-elemen fundamental. Di sini kita tidak akan mengulas elemen-elemen tersebut, melainkan langsung membahas beberapa komponen dasar yang kerap digunakan saat bekerja dengan JavaScript.

1. Kotak Dialog

JavaScript memungkinkan kita untuk menampilkan kotak dialog melalui fungsi alert(). Kotak dialog ini dapat dimanfaatkan untuk menyampaikan informasi atau konfirmasi.

<html>
<head>
<title>Demo Kotak Dialog</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
alert('OK, JavaScript Enabled');
//-->
</script>
Refresh (F5) untuk melihat pesan JavaScript
</body>
</html>

2. Dukungan Scripting

Melalui tag <noscript>, dengan mudah kita bisa mengidentifikasi apakah browser mendukung scripting atau tidak. Pada dasarnya, tag ini tidak dimaksudkan untuk menghentikan interpretasi terhadap kode program. Dengan kata lain, browser akan tetap menerjemahkan baris kode kecuali tag <script>.

<html>
<head>
<title>Demo Dukungan Scripting</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
alert('OK, JavaScript Enabled');
//-->
</script>
Refresh (F5) untuk melihat pesan JavaScript
<noscript>
<h4>Oops, It seem that your browser does not support Scripting</h4>
</noscript>
</body>
</html>

Jika browser tidak mendukung scripting, maka yang dijalankan adalah tag <noscript>

3. Merujuk Elemen

Salah satu kemampuan utama JavaScript adalah mengontrol objek-objek di halaman web. Sehubungan dengan hal ini, ada beragam pendekatan yang bisa digunakan untuk mengacu atau mengakses elemen-elemen objek.
Sebagai contoh, misalkan kita memiliki elemen form sebagai berikut:
<form>
<input type="text" name="myName" id="myID" />
</form>

Masing-masing pendekatan di bawah ini dapat digunakan dan mengacu pada
elemen yang sama di atas.

// Menggunakan id numerik (urutan elemen)

document.forms[0].elements[0];

// Menggunakan nama elemen

document.forms[0].elements['myName'];

// Menggunakan id elemen

document.forms[0].elements['myID'];

// Menggunakan nama dan id secara langsung

document.forms[0].myName;
document.forms[0].myID;

// Menggunakan method getElementById

document.getElementById('myID');

4. Event

Setiap objek HTML mendefinisikan properti-properti, method-method, dan event-event. Salah satu event yang sangat populer dan frekuensi penggunaannya cukup tinggi adalah onclick. Event ini akan dipicu manakala objek misalnya button atau teks diklik.

<html>
<head>
<title>Demo Event Onclick</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
// Fungsi sederhana untuk memunculkan dialog
function show_dialog() {
alert('OK, JavaScript Enabled');
}
//-->
</script>
<a href="#" onclick="show_dialog()">Click Me</a>
<form action="#">
<input type="submit" value="Click Me" onclick="show_dialog()" />
</form>
<!-- Menulis alert langsung -->
<a href="#" onclick="alert('Simple Alert');">Click Me</a>
</body>
</html>

5. Linked Scripting

Seperti halnya CSS, penulisan kode JavaScript juga bisa dilakukan di file terpisah. Langkah ini sebaiknya digunakan ketika melakukan implementasi nyata, dengan tujuan membuat kode yang bersih. Contoh berikut memperlihatkan pemisahan kode JavaScript dan HTML.

.File lat_script.js:

// Fungsi sederhana untuk memunculkan dialog

function show_dialog() {
alert('OK, JavaScript Enabled');
}
File linked_script.html:

<html>
<head>
<title>Demo Linked Script</title>
<script type="text/javascript" src="lat_script.js"></script>
</head>
<body>
<a href="#" onclick="show_dialog()">Click Me</a>
</body>
</html>






Posted by at No comments:
Labels:

ELEMEN FIELDSET DAN LEGEND di HTML

ELEMEN FIELDSET DAN LEGEND

Elemen Fieldset digunakan untuk menghubungkan kontrol dan label. Group kontrol akan membantu pengguna untuk memahami fungsinya. Elemen LEGEND untuk memberi judul pada FIELDSET. Pemakaian umum FIELDSET dan LEGEND adalah

<FIELDSET>
<LEGEND>…judul kelompok label…</LEGEND>
…isi dengan kontrol dan label…
</FIELDSET>

Posisi LEGEND dapat diatur dengan atribut ALIGN dan mempunyai nilai top, bottom, left dan right. Pemakaian atribut ALIGN dan nilainya

align=top|bottom|left|right

 Top untuk judul berada dibagian atas fieldset
 Bottom untuk judul berada dibagian bawah fieldset
 Left untuk judul berada disisi kiri fieldset
 Right untuk judul berada disisi kanan fieldset

Contoh:

<html>
<head>
<title>Penggunaan List Form</title>
</head>
<body>
<form action=" " method="post">
<p>
<fieldset>
<legend>data pasien</legend>
nama depan: <input type=”text” id=”nama_d” tabindex=”1”>
nama belakang: <input type=”text” id=”nama_b” tabindex=”2”>
alamat: <input type=”text” id=”alamat” tabindex=”3”>
</fieldset>
<br>
<fieldset>
<legend>riwayat kesehatan</legend>
<input name=”sej_sakit” type=checkbox value=”cacar” tabindex=”20”>cacar
<input name=”sej_sakit” type=checkbox value=”gondok” tabindex=”21”>gondok
<input name=”history_illness” type=checkbox value=”tbc” tabindex=”22”>tbc
<input name=”sej_sakit” type=checkbox value=”batuk_rejan” tabindex=”23”>batuk
</fieldset>
<br>
<fieldset>
<legend>sakit yang diderita</legend>
apakah anda sedang menjalani pengobatan ?
<input type=radio name=”pengobatan” value=”ya” tabindex=”35”>ya
<input type=radio name=”pengobatan” value=”tidak” tabindex=”35”>tidak
<br>
jika anda sedang menjalani pengobatan, ketik perawatan dan pengobatan :
<textarea name=”perawatan” rows=”8” cols=”70” tabindex=”40”>
</textarea>
</fieldset>
<input type=submit value=kirim><input type=submit value=hapus>
</form>
</body>
</html>



Posted by at No comments:
Labels:

Me-retrieve Nilai Java dalam html

Me-retrieve Nilai

Saat bekerja dengan elemen-elemen masukan seperti text field, select, dan check box HTML, kita bisa memanfaatkan JavaScript untuk operasi validasi. Adapun langkah penting terkait dengan elemen-elemen ini adalah pengambilan nilai.

1. Text Field

Elemen text field menyediakan properti value yang bisa digunakan untuk menetapkan atau mendapatkan nilai elemen.

<html>
<head>
<title>Demo Retrieve</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!---
function getTextValue() {
var myForm = document.form1;
// Mendapatkan nilai text field
alert("Nilai Teks: " + myForm.nama.value);
}
//-->
</script>
<form name=form1 action="#">
Nama <input type="text" name="nama" />
<input type="submit" value="Submit" onclick="getTextValue()" />
</form>
</body>
</html>

2. Select (Combo Box)

Secara umum, properti value tersedia di semua elemen HTML. Dengan demikian, kita juga bisa memanfaatkannya untuk mendapatkan nilai select atau combo box.

<html>
<head>
<title>Demo Retrieve</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function getSelectedValue() {
var myForm = document.form1;
// Mendapatkan nilai selected field
alert("Nilai : " + myForm.sex.value);
}
//-->
</script>
<form name=form1 action="#">
Jenis Kelamin:
<select name="sex">
<option value="Pria">Pria</option>
<option value="Wanita">Wanita</option>
</select>
<input type="button" value="Submit" onclick="getSelectedValue()" />
</form>
</body>
</html>

Untuk operasi cepat tanpa perlu klik button pada select, kita bisa menambahkan event onchange.

<html>
<head>
<title>Demo Retrieve</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function getSelectedValue() {
var myForm = document.form1;
// Mendapatkan nilai selected field
alert("Nilai : " + myForm.sex.value);
}
//-->
</script>
<form name=form1 action="#">
Jenis Kelamin:
<select name="sex" onchange="getSelectedValue();">
<option value="Pria">Pria</option>
<option value="Wanita">Wanita</option>
</select>
</form>
</body>
</html>

3.Check Box

Khusus untuk pengambilan nilai check box, terlebih dahulu kita perlu mengidentifikasi item yang dipilih.

<html>
<head>
<title>Demo Retrieve</title>
</head>
<body>
<script language="JavaScript" type="text/javascript">
<!--
function getCheckedVal() {
var element;
var len = document.form1.length;
var str = "";
for (i = 0; i < len; i++) {
element = document.form1[i];
if (element.type == "checkbox") {
if (element.checked == true) {
str = str + element.value + "\n";
}
}
}
if (str.length == 0) {
alert("Anda tidak memilih");
} else {
alert(str);
}
}
-->
</script>
<form name=form1 action="#">

<p> Aksesoris: <br />
<input type="checkbox" name="chkDVD" value="DVD-ROM" />DVD-ROM <br />
<input type="checkbox" name="chkMouse" value="Mouse" />Mouse <br />
<input type="checkbox" name="chkkey" value="Keyboard" />Keyboard<br/>

<input type="button" value="OK" onclick="getCheckedVal()" />
</form>
</body>
</html>






Posted by at No comments:
Labels:

KOMBINASI FORM DENGAN TABEL di HTML

KOMBINASI FORM DENGAN TABEL

Form bisa digunakan bersama tabel, untuk memudahkan posisi field-field yang berbeda ukurannya.

Contoh:

<html>
<head>
<title>Penggunaan Form dan Tabel</title>
</head>
<body>
<form action=" " method="post">
<table>
<tr>
<td align=right>nama:</td>
<td colspan=4><input type=”text” name=”nama” size=”50”></td>
</tr>
<tr>
<td align=right>alamat:</td>
<td colspan=4><input type=”text” name=”alamat” size=”50”></td>
</tr>
<tr>
<td align=right>kota dan kode pos:</td>
<td colspan=4><input type=”text” name=”kota” size=”50”></td>
<td></td>
<td><input type=”text” name=”kd_pos” size=”15”></td>
<tr>
</table>
</form>
</body>
</html>



Posted by at No comments:
Labels:

MULTIPLE FORM DALAM DOCUMENT di HTML

MULTIPLE FORM DALAM DOCUMENT

Satu dokumen bisa berisi beberapa form. Hal ini membuat dokumen menjadi lebih ringkas dan lebih mudah dimengerti. Dalam penggunaan beberapa form, sebaiknya setiap form diberi garis pemisah dengan menggunakan tag <HR>, gambar garis seni dengan menggunakan tag <IMG>.

Contoh:

<html>
<head>
<title>Penggunaan Multiple form</title>
</head>
<body bgcolor=lightblue>
<form action=" " method="post">
Baju anda ukuran berapa ?<BR>
<input name=”size” type=radio value=sm>small
<input name=”size” type=radio value=md>medium
<input name=”size” type=radio value=lg>large
<p>
<input type=submit value=kirim_data_ini!>
</form><HR>
<form action=" " method="post">
<table>
<tr><td>nama :</td><td><input type=”text” name=”nama” size=”50”></td></tr>
<tr><td>e-mail :</td><td><input type=”text” name=”e-mail” size=”50”></td></tr>
<tr><td>alamat :</td><td><input type=”text” name=”alamat” size=”30”></td></tr>
<tr><td>kota :</td><td><input type=”text” name=”kota” size=”50”></td></tr>
</table>
<p>
<input TYPE=submit VALUE=Kirim_data_ini!>
</form><HR>
<form action=" " method="post">
<dl>
<dt>pilih cara pembayarannya ?
<dd><input name=”bayar” type=radio value=”cash” checked>cash
<dd><input name=”bayar” type=radio value=”cash” checked>cash
<dd><input name=”bayar” type=radio value=”check”>check
<dd><input name=”bayar” type=radio value=”debit”>debit card
<dl>
<dt>credit card
<dd><input name=”bayar” type=radio value=”mc”>mastercard
<dd><input name=”bayar” type=radio value=”visa”>visa
<dd><input name=”bayar” type=radio value=”disc”>discover
</dl>
</dl>
<p>
<input type=submit value=kirim_data_ini!>
</form>
</body>
</html>



Posted by at No comments:
Labels:

Menggunakan Tag List di Form dalam HTML

MENGGUNAKAN TAG LIST

Program yang menampilkan daftar pilihan dengan menggunakan tag list.

Contoh:

<html>
<head>
<title>Penggunaan List Form</title>
</head>
<body>
<form action=" " method="post">
sebutkan 3 menu makanan favorit anda?
<ol>
<li><input name=”no. 1” size=”15” >
<li><input name=”no. 2” size=”15” >
<li><input name=”no. 3” size=”15” >
</ol>
</form>
</body>
</html>



Posted by at No comments:
Labels:

FORM DENGAN PARAGRAPH MARK dalam HTML

FORM DENGAN PARAGRAPH MARK

Jika anda mempunyai form yang dibagi menjadi beberapa bagian, gunakan tag paragraf <P>…</P>. Tag ini akan mengatur perataan field.

Contoh:

<html>
<head>
<title>Penggunaan Paragraph form</title>
</head>
<body>
<form action=" " method="post">
<pre>
<i><b>optional:</b></i>
nama: <input type=”text” name=”nama” size=”15” >
alamat: <input type=”text” name=”alamat” size=”25” >
</pre>
<p>
komentar:<br>
<textarea rows=”10” cols=”100”>
</textarea>
</p>
</form>
</body>
</html>



Posted by at No comments:
Labels:

PEnggunaan Table di Form dalam HTML

TABEL DALAM FORM

Penggunaan tabel mempunyai efek yang sama dengan penggunaan tag <PRE>. Penggunaan tabel lebih disarankan untuk mengatur field-field karena lebih tepat pengaturannya, dengan tabel dapat diatur gambar, link ke alamat atau elemen html lain.

Contoh:

<html>
<head>
<title>Penggunaan Tabel Form</title>
</head>
<body>
<form action=" " method="post">
<table>
<tr><td>nama:</td><td><input type=”text” name=”nama” size=”15”></td></tr>
<tr><td>alamat:</td><td><input type=”text” name=”alamat” size=”25”></td></tr>
<tr><td>email:</td><td><input type=”text” name=”email” size=”15”></td></tr>
</table>
</form>
</body>
</html>



Posted by at No comments:
Labels:

Penggunaan Tag PRE dalam HTML

TAG PRE

Tag <PRE> atau Preformatted text digunakan untuk menampilkan teks seperti diketikan dalam dokumen HTML.

Contoh:

<html>
<head>
<title>Penggunaan PRE</title>
</head>
<body>
<form action=" " method="post">
<PRE>
Nama : <INPUT TYPE=”text” NAME=”nama” SIZE=”15” >
Alamat : <INPUT TYPE=”text” NAME=”alamat” SIZE=”25” >
Email : <INPUT TYPE=”text” NAME=”email” SIZE=”15” >
</PRE>
</form>
</body>
</html>



Posted by at No comments:
Labels:

Tag Label dalam HTML

LABEL

Elemen label digunakan untuk menspesifikasikan label. LABEL mempunyai atribut for untuk mengelompokan label yang telah didefinisikan. Nilai atribut ini sama dengan atribut id pada elemen INPUT.

Contoh:

<html>
<head>
<title>Penggunaan List Form</title>
</head>
<body>
<form action=" " method="post">
<p>
<label for=”nama_d”>nama depan:</label>
<input type=”text” id=”nama_d”><br>
<label for=”nama_b”>nama belakang:</label>
<input type=”text” id=”nama_b”><br>
<label for=”email”>e-mail:</label>
<input type=”text” id=”email”><br>
<input type=radio name=”sex” value=wanita>wanita<br>
<input type=radio name=”sex” value=pria>pria<br>
<input type=submit value=send><input type=reset>
</p>
</form>
</body>
</html>



Posted by at No comments:
Labels:

Penerapan Select Option dalam HTML

<SELECT>

Untuk membuat menu-menu pilihan dalam suatu daftar pop-up. Beberapa pilihan untuk tag ini adalah:

 NAME digunakan untuk mendefinisikan nama untuk daftar pilihan
 SIZE digunakan menyatakan jumlah baris yang muncul pada form.
 MULTIPLE digunakan memungkinkan menu bertindak seperti checkbox, sehingga pembaca dapat memilih lebih dari satu pilihan

<OPTION>

Untuk membuat menu-menu pilihan dalam suatu daftar pull-down. Atribut yang digunakan:
 VALUE untuk menyatakan nilai yang akan dikembalikan jika suatu item dipilih
 SELECTED untuk menyatakan pilihan default.

Contoh:

<html>
<head>
<title>Penggunaan Option</title>
</head>
<body>
<form action=" " method="post">
<select name=”Program Studi”>
<option selected value=”informatika”>informatika
<option value=”TKJ”>komputer jaringan
<option value=”RPL”>rekayasa perangkat lunak
<option value=”web desaign”>desain grafis
</select>
</form>
</body>
</html>



Posted by at No comments:
Labels:

Penerapan Tag Textarea dalam THML

<TEXTAREA>

Untuk memberikan kesempatan pada pembaca untuk memasukan informasi teks pada lebih dari satu baris. Ditampilkan dengan panjang 4 baris dan lebar 40 karakter dalam keadaan kosong. Ada beberapa atribut untuk tag ini:

 NAME : memberi nama pada text area
 ROWS : mengatur panjang baris/tinggi text area
 COLS : mengatur lebar kolom text area
 Default Teks : Default teks yang ditampilkan sebagai default pada text area

Contoh:

<html>
<head>
<title>Penggunaan TeksArea</title>
</head>
<body>
<form action=" " method="post">
<textarea name=”comments” row=4 cols=40>Isi komentar disini?...
</textarea>
</form>
</body>
</html>



Posted by at No comments:
Labels:

Penerapan Teg Form pada HTML

BEKERJA DENGAN TAG <FORM>

Tak ubahnya form (formulir) konvensional, form HTML merupakan suatu media untuk memasukkan data. Di sini form juga terdiri dari komponen-komponen seperti text field, button, check box, radio button, dan sejenisnya.

Pembuatan form dapat dilakukan secara langsung atau memanfaatkan tabel guna memperoleh hasil yang rapi.

TAG<FORM>

Sebuah form dibentuk dengan menggunakan pasangan tag <FORM> </FORM>. Setiap elemen form harus mempunyai dua buah atribut METHOD dan ACTION.
ľ METHOD adalah cara mengirimkan data yang dimasukan pembaca ke web server
ľ ACTION adalah URL dari script yang dipanggil oleh form tersebut.

Contoh:
<html>
<head>
<title>Penggunaan FORM</title>
</head>
<body>
<form action=" " method="post">
¡Kisi form¡K
</form>
</body>
</html>



Posted by at No comments:
Labels:

Format Gambar Dalam HTML

 FORMAT GAMBAR

Saat ini sebagian pembuat halaman WEB menjadikan format GIF dan JPEG sebagai format standar untuk menampilkan gambar dalam WEB:

- GIF (Graphic Interchange Format) yaitu menghasilkan gambar 256 warna. Warna sejumlah ini baik untuk membuat gambar logo, icon, garis seni dan gambar-gambar lain yang sederhana.

- JPEG (Joint Photographic Expert Group) yaitu menghasilkan 16,7 juta warna, JPEG sangat efektif untuk menyimpan gambar-gambar dengan kualitas foto.
Menampilkan inline dan external image

Cara menampilkan gambar dalam web, ada dua cara, yaitu:
- Internal Image yaitu gambar ditampilkan secara langsung saat web page dimuat dalam browser yang berbasiskan grafik.

- External Image yaitu gambar yang tidak ditampilkan secara otomatis ketika suatu page dimuat, tetapi hanya akan dimuat jika pemakai menginginkan.

Menempatkan gambar pada dokumen HTML sngat mudah, dengan menggunakan tag <IMG> beserta atribut SRC. Kemudian tempatkan nama file dengan URL untuk menampilkan gambar. Penggunaan

<IMG> secara umum adalah:
<IMG SRC=”nama file gambar”>

Tag ini mempunyai atribut:

 Width, untuk menentukan lebar gambar
 Height, untuk menentukan tinggi gambar
 Border, untuk memberi bingkai pada gambar
 Hspace, untuk memberi ruang kosong di kiri dan kanan gambar
 Vspace, untuk memberi ruang kosong di atas dan bawah gambar
 Align, untuk menentukan perataan gambar, tengah, kiri, kanan,atas/bawah layar
 Alt, untuk memberikan komentar bila pointer mouse berada diatas gambar



Posted by at No comments:
Labels:

Macam Macam Format Gambar dan contohnya dalam HTML

 FORMAT GAMBAR

Saat ini sebagian pembuat halaman WEB menjadikan format GIF dan JPEG sebagai format standar untuk menampilkan gambar dalam WEB:

- GIF (Graphic Interchange Format) yaitu menghasilkan gambar 256 warna. Warna sejumlah ini baik untuk membuat gambar logo, icon, garis seni dan gambar-gambar lain yang sederhana.

- JPEG (Joint Photographic Expert Group) yaitu menghasilkan 16,7 juta warna, JPEG sangat efektif untuk menyimpan gambar-gambar dengan kualitas foto.
Menampilkan inline dan external image

Cara menampilkan gambar dalam web, ada dua cara, yaitu:
- Internal Image yaitu gambar ditampilkan secara langsung saat web page dimuat dalam browser yang berbasiskan grafik.
- External Image yaitu gambar yang tidak ditampilkan secara otomatis ketika suatu page dimuat, tetapi hanya akan dimuat jika pemakai menginginkan.
Menempatkan gambar pada dokumen HTML sngat mudah, dengan menggunakan tag <IMG> beserta atribut SRC. Kemudian tempatkan nama file dengan URL untuk menampilkan gambar. Penggunaan

<IMG> secara umum adalah:
<IMG SRC=”nama file gambar”>

Tag ini mempunyai atribut:
- Width, untuk menentukan lebar gambar
- Height, untuk menentukan tinggi gambar
- Border, untuk memberi bingkai pada gambar
- Hspace, untuk memberi ruang kosong di kiri dan kanan gambar
- Vspace, untuk memberi ruang kosong di atas dan bawah gambar
- Align, untuk menentukan perataan gambar, tengah, kiri, kanan,atas/bawah layar
- Alt, untuk memberikan komentar bila pointer mouse berada diatas gambar

Contoh:
<html>
     <head>
        <title>tag IMG</title>
    </head>
    <body>
        <img src ="gambar.jpg">
        <p>
            <img src="gambar.jpg">
            Teks ditampilkan setelah gambar.
        </p>
        <p>
            Teks ini terpotong dengan
            <img src="gambar.jpg">
            gambar logo.
        </p>
    </body>
</html>

Mengatur teks dengan Inline Image

Pengaturan perataan ini menggunakan atribut ALIGN dalam tag <IMG>.
- TOP untuk meratakan teks dengan bagian atas gambar
- MIDDLE untuk meratakan gambar dengan bagian tengah gambar
- BOTTOM untuk meratakan teks dengan bagian bawah gambar

Contoh:
<html>
     <head>
          <title>Inline IMG</title>
     </head>
     <body>
          <p>
               <img src="gambar.jpg" align=top>
               Teks ini rata dengan bagian atas gambar.
          </p>
          <p>
               <img src="gambar.jpg" align=middle>
               Teks ini rata dengan bagian tengah gambar
          </p>
          <p>
               <img src="gambar.jpg" align=bottom>
               Teks ini rata dengan bagian bawah gambar.
          </p>
     </body>
</html>

Mengatur Posisi Gambar
Penggunaan atribut ALIGN beserta nilainya dalam tag <IMG> untuk mengatur tampilan teks disekitar gambar.
- LEFT untuk meletakkan gambar di sebelah kiri teks.
- RIGHT untuk meletakkan gambar di sebelah kanan teks.

Contoh:
<html>
<head>
<title>Posisi IMG</title>
</head>
<body>
<p>
<img src="gambar.jpg" align=left>
<font size=5>Gambar rata kiri</font size>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br/>
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br/>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.<br/><br/>
</p>
<p>
<img src="gambar.jpg" align=right>
<font size=5>Gambar rata kanan</font size>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br />
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.
</p>
</body>
</html>

Mengatur Ukuran Gambar

Ada dua keuntungan dengan mengatur ukuran gambar pada browser, yaitu:
- Pengaturan ukuran membantu pengguna yang tidak bisa menampilkan gambar secara inline.
- Pengaturan ukuran membuat halaman web lebih cepat ditampilkan.

Pengaturan ukuran tinggi dan lebar pada tag <IMG> dilakukan oleh atribut HEIGHT dan WIDTH. Kedua atribut ini mengatur ukuran gambar dengan ukuran pixel.

Contoh:

<html>
<head>
<title>Ukuran IMG</title>
</head>
<body>
<font size=6>Gambar Ukuran Asli</font size><br>
<IMG SRC="gambar.jpg"><br>
<font size=4>Gambar Ukuran lebar = 100px Tinggi = 70px</font size><br>
<IMG SRC="gambar.jpg" WIDTH=100 HEIGHT=70>
</body>
</html>






Posted by at No comments:
Labels:
Subscribe to: Posts (Atom)