Belajar HTML jili 2

SINTAKS

Comment

Sintaks ini digunakan untuk memberikan komentar pada baris html dan tidak akan di
eksekusi oleh browser, karena dia hanya bertugas memberikan komentar saja, di awali
dengan <-- dan ditutup dengan -->
Cth.
<!-- ini adalah komentar dan tidak akan di eksekusi -->

BR

Sintak ini untuk membuat spasi kebawah [enter] dan tak perlu ditutup, sintaksnya <br>
Cth:
saya budi<br>saya andi<br>saya coki

jadinya akan seperti dibawah ini :

HR

Sintak ini untuk membuat garis horisontal sesuai ukurannya dan tak perlu ditutup, sintaks ini
mempunyai beberapa attribut, yaitu :
Width, size, color, align
Cth.
<hr width=50% size=10 color=red>

Unordered List

Sintak ini untuk membuat bulletin, di awali dengan <ul> dan didalamnya terbentuk pilihanpilihan
buletin dengan sintaks <li></li> lalu bulletin ditutup dengan </ul>, biasanya sintaks
ini memakai attribute type, dan diantaranya bervalue square
Cth :
<ul type=”square”>
<li>ade</li>
<li>bone</li>
</ul>

Font

Sintaks ini digunakan untuk memberikan inovasi pada suatu character, diawali dengan
<font> dan ditutup dengan </font>, serta font mempunyai attribut diantaranya adalah color,
size, dan face.
Cth.
<font color=red face=cosmic size=5>karakter contoh</font>

Header
Sintak ini digunakan untuk header dari sebuah web, setiap karakter yang diberikan sintaks
ini, akan mempunyai ukuran yang berbeda dengan karakter lainnya, disini ada beberapa
header, semakin besar kecil header, akan semakin besar. Standarnya ada 6 header yaitu :
<h1 align=right>ini h1</h1>
<h2>ini h2</h2>
<h3>ini h3</h3>
<h4>ini h4</h4>
<h5>ini h5</h5>
<h6>ini h6</h6>
Dan header ini mempunyai attribut sintaks diantaranya adalah align.

Hyperlink
Sintak ini digunakan untuk membuat object menjadi sebuah link menuju object lainnya.
Cth.
<a href=http://www.google.com>www.google.com</a>
Menjadikan object sebagai link, untuk menuju ke alamat http ://www.google.com
<a href=mailto:azar_ret@yahoo.co.id>azar_ret@yahoo.co.id</a>
Menjadikan object sebagai link untuk menuju link pengiriman email
<a href=index.html>file index</a>
Menjadikan object sebagai link menuju object lain yang bernama index.html
<a href=http://www.google.com>www.google.com</a>
<a href=mailto:azar_ret@yahoo.co.id>azar_ret@yahoo.co.id</a>
<a href=index.html>file index</a>

Iframe
Sintak ini digunakan untuk memanggil object lain berupa filem atau website lain berada pada
web kita yag kita buat. Iframe juga mempunyai attribut attribut diantaranya width, height, src
dan lainnya.
Cth.
<iframe src=http://google.com></iframe>

Img
Sintak ini digunakan untuk memanggil object berupa grafik, dan mempunyai attribut attribut
diantaranya, src, width, height, alt, title.
Cth.
<img src=gambar.jpg width=100 height=50 alt=gambar title=”Jangan disentuh”></img>

Marquee
Sintak ini digunakan untuk membuat object menjadi bergerak sesuai kemauan kita. Dan
sintaks ini mempunyai attribut attribut diantaranya adalah behavior.
Cth.
<marquee behavior=alternate>ini alternate</marquee>
<marquee behavior=scroll>ini scroll</marquee>
<marquee behavior=slide>ini slide</marquee>
Paragraph
Sintak ini digunakan untuk membuat sebuah paragraph baru / alinea baru, dan sintaks ini
mempunyai beberapa attribut diantaranya adalah align.
Cth.
<p align=center>karakter</p>
<p align=left>karakter</p>

Pre
Sintak ini untuk memposisikan object secara manual, jadi akan tertulis seperti itu, ada
perbedaan antara memakai pre dan tidak memakai pre.

Bold
Sintak ini digunakan untuk menebalkan object berupa karakter, Cth.
<b>Bold</b>

Italic
Sintak ini digunakan untuk memiringkan object berupa karakter, Cth
<i>Italic</i>

Underline
Sintak ini digunakan untuk menggarisbawahi object berupa karakter, Cth.
<u>Underline</u>

Striketrough
Sintak ini digunakan untuk mencoret object berupa karakter, Cth.
<s>Striketrough</s>

Table
Sintak ini digunakan untuk membuat garis garis horizontal dan vertical sehingga akan
menjadi table. Table mempunyai beberapa sintak penunjang. <tr> dan <td>.
Cth.
<table border=1 width=100 height=50>
<tr>
<td>Table</td>
</tr>
</table>
<tr> adalah garis y / garis vertical sedangkan <td> garis x / garis horizontal
Cth
1 garis kebawah 1 garis kesamping
<table border=1>
<tr><td>a</td></tr>
</table>

1 garis kebawah 2 garis kesamping
<table border=1>
<tr><td>a</td><td>b</td></tr>
</table>

2 garis kebawah 1garis kesamping
<table border=1>
<tr><td>a</td></tr>
<tr><td>b</td></tr>
</table>
Gambar 3.24
2 garis kebawah 2 garis kesamping
<table border1>
<tr><td>a</td><td>c</td></tr>
<tr><td>b</td><td>d</td></tr>
</table>

1 kotak dikanan 2 kotak dikiri
<table border=1>
<tr><td>c</td></tr>
<tr><td>b</td><td>d</td></tr>
</table>

FORMS
Forms adalah sintaks yang digunakan untuk interaksi antara user dengan computer, sehingga
satu sama lain bisa saling berbagi informasi, dan dengan didukung oleh sintaks PHP dan
SQL (pada STUPID LOGIC PROGRAMMING II & III) maka akan menjadi sebuah
program yang mempunyai alur algoritma dengan koneksi database didalam penyimpanan
data nya. Dan disini kita akan mempelajarai basiq dari form yang nantinya akan digunakan
pada STUPID LOGIC III dengan pembahasan mengenai PHP.
Form
Sintaks ini digunakan sebagai wadah interaksi antara pengguna dengan computer dan
mempunya attribute action dan method serta name. Dimana action digunakan untuk wadah
proses kelanjutan dari method yang dilemparkan. Sedangkan method adalah bentuk dari
proses form tersebut, apakah dengan menggunakan POST didalam melempar data form, atau
menggunakan GET sehingga akan tertampil pada address bar browser.
Contoh nama file adalah index.php :
<form name=nama_form action=? action=POST>
<input type=text name=nama> <input type=submit name=submit value=Submit>
</form>



Disini kita tidak akan mempelajari method, yang diatas hanya pemahaman sedikit tentang
method dan php, namun disini kita akan mempelajari beberapa sintaks form yang akan
digunakan sebagai interaksi antara pengguna dengan computer.
<textarea name=pesan>Silahkan isi pesan didalam sini</textarea>

Digunakan sebagai input data berupa karakter / kumpulan karakter dan dalam bentuk multi
line, sehingga bisa berpindah baris [enter].
<select name=hari>
<option name=senin>Senin</option>
<option name=selasa>Selasa</option>
<option name=rabu>Rabu</option>
<option name=kamis>Kamis</option>
<option name=jumat>Jum’at</option>
<option name=sabutu>Sabtu</option>
</select>

Digunakan untuk input data berupa drop down menu, sehingga user bisa memilih dari data
yang sudah disediakan pada drop down menu tersebut.
<input type=text name=user value=azaret>

Digunakan sebagai input data berupa karakter atau kumpulan karakter.
<input type=password name=pass value=azaret>

Digunakan sebagai input data berupa karakter atau kumpulan karakter dan akan dihidden
tampilannya untuk menjaga privacy karena form ini diperuntukan untuk text password
<input type=hidden name=hide value=azaret>
Digunakan sebagai form input, namun akan dihidden (tidak akan ditampilkan pada layar
website)
<input type=checkbox name=hobby value=badminton> Badminton

Digunakan sebagai input data berupa checkbox, apabila data tersebut diceklis maka akan
bernilai 1 / true
<input type=radio name=jenis_klamin value=pria> Pria
<input type=radio name=jenis_klamin value=wanita> Wanita

Digunakan sebagai input data berupa radio button, dan sama seperti checkbox jika dipilih
maka akan bernilai 1, radio ini hanya bisa dipilih satu dari beberapa radio yang name nya
sama.
<form method="POST" enctype="multipart/form-data" action=?>
<input type="file" name="F1" size="20">
</form>

Digunakan sebagai input data berupa file, dan dalam form harus ditambahkan attribute
enctype="multipart/form-data", karena file bersifat multipart data.
<input type=submit name=submit value=Tombol>

Digunakan untuk melemparkan method disertai dengan data-data inputan lainnya menuju
proses selanjutnya yang ditentukan oleh form action
<input type=reset name=cancel value=Ulang>

Digunakan untuk mengulang / mereset semua isi dari form-form secara default.