HTML minggu Ke-2

Tag Atribut 2 ( Superscript, Subscript)

^{bagian yang dicetak tinggi}

_{bagian yang dicetak rendah}

<p>(x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> = x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup> + 2x<sub>1</sub>x<sub>2</sub></p> <p>2H<sub>2</sub> + O<sub>2</sub> = 2 H<sub>2</sub>O <p>(x<sub>1</sub> + x<sub>2</sub>)<sup>2</sup> = x<sub>1</sub><sup>2</sup> + x<sub>2</sub><sup>2</sup> + 2x<sub>1</sub>x<sub>2</sub></p> <p>2H<sub>2</sub> + O<sub>2</sub> = 2 H<sub>2</sub>O

(x1 + x2)2 = x12 + x22 + 2x1x2 2H2 + O2 = 2 H2O

Tag Ganti Baris (Break line)

<br>

Untuk pindah ke baris berikutnya.

Tag Font (size)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.

Tag : font Parameter : size, face, color

<font size="n"> kalimat </font>

<font size="m"> kalimat </font>

n = 1, 2, 3, 4, 5, 6, 7 (ukuran huruf)

m = -2, -1, +0, +1, +2, +3, +4 (ukuran huruf)

Tag Font (face)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.

Tag : font Parameter : size, face, color

<font face="nama font"> kalimat </font>

Jenis huruf :

nama font = Times New Roman, Arial,Courier New, Verdana, dll.

Tag Font (color)

Memformat suatu bagian kalimat dengan ukuran, jenis huruf, atau warna tertentu.

Tag : font Parameter : size, face, color

<font color="#RRGGBB"> kalimat </font>

Warna :

RR = 00 .. FF (intensitas warna merah dalam heksadesimal)

GG = 00 .. FF (intensitas warna hijau dalam heksadesimal)

BB = 00 .. FF (intensitas warna biru dalam heksadesimal)

Tag Enumerasi

(List, Unordered List, Ordered List)

<li>item</li>

Untuk menandai suatu item dari daftar (enumerasi), diawali

dengan simbol • (bullet)

Kelompok item harus diapit oleh tag <ul> </ul> dalam daftar bertingkat.

Untuk menomori enumerasi dengan nomor urut (1,2,3), apitlah dengan

tag <ol> </ol>

Tag Garis Mendatar ( Horizontal Line)

<hr>

membentuk garis pemisah mendatar.

Tag Gambar ( Image)

<img src="NamaFileGambar"> NamaFileGambar = file gambar yang mempunyai ekstensi .GIF, .JPG, atau .PNG.

Untuk menampilkan sebuah file gambar.

Tag Tabel ( Table) - data

<table> definisi tabel </table>

Menampilkan data dalam bentuk tabel, Tabel didefinisikan dengan cara menyatakan baris-baris dan kolom-kolom.

Tag untuk penanda baris adalah <tr> definisi baris </tr>

Tag untuk penanda kolom adalah <td>data</td>

Tag Tabel ( Table) - layout

Untuk menata letak (layout)isi dokumen

Tag Link (Anchor)

<a href="Link">Kata yang di-click</a>

<a name="#Acuan">Kata yang dituju</a>

Link = Alamat URL atau nama file dan/atau acuan yang dituju

Acuan = Kata sembarang sebagai penanda (bookmark) membentuk link ke URL/file/bagian dokumen lain.

FORM

• Sebuah dokumen interaktif dapat menangani inputdari user

• Analoginya : bahwa dokumen adalah sebuah formulir isian

• Sebuah dokumen dapat mengandung satu atau beberapa form

• Setiap form mewakili sebuah taskspesifik (login, mengisi biodata, memilih bahasa, dll)

• Setiap formdapat menghimpun satu atau beberapa elemen input

• Ada beberapa jenis elemen input untuk menangani berbagai karakteristik data input

• Di setiap form harus ditentukan nama program (di sisi server) yang akan menangani

data isian yang dikirim (di- submit)

• Skema dasar dokumen form :

<form method="POST" action="namaprogram">

bagian ini berisi bagian dokumen HTML yang akan menggambarkan formulir isian

dengan susunan sejumlah elemen input berbagai jenis

</form>

Contoh:

Latihan 1:

<sup>D</sup>avid <br> ax<sup>2</sup>+ bx<sup>2</sup>=c <br> H<sup>2</sup>SO<sub>4</sub> <br> M<sub>a</sub>J<sub>2</sub>4<sub>3</sub> <br> <sup>a</sup>s<i>aya</i><sub>n</sub> <br> A<u>ku</u>&nbsp<sup>n</sup>N<u>ya</u> <br> <sub>p</sub><sup>a</sup><u>R</u><sub>a</sub><sup><u>h</u></sup> <table border="1"> <tr> <td>kode barang</td> <td>nama barang</td> </tr> <TR> <TD ALIGN=LEFT>K01</TD> <TD ALIGN=LEFT>CELANA</TD> </TR> <TR> <TD ALIGN=RIGHT>K02</TD> <TD ALIGN=RIGHT>BAJU</TD> </TR> <TR> <TD ALIGN=CENTER>K03</TD> <TD ALIGN=CENTER>KERTAS</TD> </TR> </table> <br> <h1><center>IDENTITASKU</center></h1> <table border= 1> <tr> <td><center>NAMA : David<br> NIM : 1002060014</center><hr> <img src ="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\Sunset.jpg"></td> </br> </table>

Latihan2:

<table border="1"> <tr> <td>Nama: <br> Alamat: <br></td> </tr> <tr> <td> <img src=my_profile.jpg> </td> </tr> </table>

Latihan3:

<table border="1"> <tr> <td> tugas no.3 </td> <td><center><img src=13.gif></center></td> </tr> <tr> <td width=100% colspan=2> <marquee direction=right><font color=red>selamat datang <font color=green>diwebsiteku</marquee></td> </tr> <tr> <td> <a href=test.html>menu1</a></td> <td>latihan</td> </tr> <tr> <td> <a href=menu2.html>menu2</a></td> <td>latihan2</td> </tr> <tr> <td> <a href=#>menu3</a></td> <td>keluar</td> </tr> </tr> </table> <!—atau cara lbh singkat--> <table border= 1> <tr> <td><center>TUGAS NO 3</center></td> <td><center><img src ="C:\Documents and Settings\All Users\Documents\My Pictures\Sample Pictures\ubm.jpg"></td></center></td> </tr> <tr> <td></td> <td><marquee><font color="green"><-</font><font color="yellow">SELAMAT DATANG DI WEBSITEKU</font><font color="green">-><font></marquee></td> </tr> <tr> <td><center>Menu 1<br>Menu 2<br>Menu 3</br></center></td> <td><center><a href="html2_1.html">LATIHAN<sup>1</sup></a><br> <a href="html2_2.html">LATIHAN<sub>2</sub></a><br> <a href="C:\Program Files\Internet Explorer\IEXPLORE.html">KELUAR</a> </br></center></td></tr> </table>