Modul TIK XI Versi 02.00.03.01(Revisi)

BAB 1I PEMROGRAMAN HTML (Hyper Text Markup Language) Part III

Oleh: M. Ade Erik, S.Pd. NIP. 19870911 2010 01 1006 Doc versi: 02.00.03.01/TIK/XI-1/2010-2011 TEKNOLOGI INFORMASI DAN KOMUNIKASI SMA NEGERI 1 TEGAL 2010

y

HTML Links (Lanjutan)
Gunakan tanda ´/µ setelah nama folder. Ex
x <a href=´folderku/index1.htmlµ>Link index1</a> x Bila ingin membuat link terhadap file index1.html yang berada dalam folder ´folderkuµ

Gunakan tanda ´../µ
x <a href=´../index2.htmlµ>Link index2</a> x Bila ingin membuat link terhadap file index2.html yang berada diluar folder satu tingkat.

y

HTML Links (Lanjutan)
Bila ingin membuat link dan membuka pada jendela baru, maka gunakan attribut target=´_blankµ Ex.
x <a href=´index.htmlµ target=´_blankµ>ke Index1</a>

y

HTML Links (Lanjutan)
Bila ingin membuat link terhadap bagian tertentu pada dokumen yang sama, maka gunakan attribut name dan # definiskan terlebih dahulu bagian tertentu tersebut dengan attribut ´nameµ Ex.
x <a name=´part 1µ>Part I</a>

dan untuk membuat link terhadap bagian part 1 gunakan tanda ´# ´Ex.
x <a href=´#part 1µ>Ke Part 1</a>

y

HTML Links (Lanjutan)
Untuk membuat Link bergambar tambahkan tag img. Ex.
x <a href=´index1.htmlµ><img src=´logo.jpgµ width="65" height="38´ /></a>

Untuk membuat link ke alamat email tertentu gunakan mailto:alamatemail Ex.
x <a href=´mailto:ozonerik@gmail.comµ>Kirim Email ke erik </a>

y

HTML Image (Lanjutan)
Untuk menampilkan background berupa gambar, gunakan attribut background Ex.
x <body background=´logo.jpgµ></body> Untuk memberikan alignment pada gambar gunakan attribut align=´bottom/middle/topµ Ex x <img src=´logo.jpgµ width=´120pxµ height=´120pxµ align=´bottomµ/>Ini Gambar

y

HTML List
HTML List terdiri atas 2 jenis, yaitu jenis unordered list dan ordered list. Untuk unordered list menggunakan tag <ul type=´disc/circle/squareµ> sedangkan untuk ordered list menggunakan tag <ol type=´1/A/a/I/i>. Kemudian gunakan tag <li> untuk mendefinisikan item list nya.

y

Ex.
Unordered List
x x x x x x x <h4>Disc bullets list:</h4> <ul type="disc"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ul>

y

Ex.
Ordered List
x x x x x x x <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li> <li>Oranges</li> </ol>

y

Ex
<ul type="square"> <li>List1</li> <ul type="circle"><li>SubList1</li></ul> <li>List2</li> <ul type="circle"> <li>SubList2-1</li><li>Sublist2-2</li> <ol type="1"><li>Sublist2-2-1</li><li>Sublist2-2-2</li></ol> </ul> </ul>

y

HTML Form
Untuk mendefinisikan suatu form, gunakan tag form dengan struktur dasar berikut ini.
x <form action=´µ method=´get/postµ> x <input type=´µ name=´µ value=´µ /> x </form>

y

Macam-macam tipe elemen input

Input Element Type Deskripsi Type=´textµ Type=´passwordµ Type=´radioµ Type=´checkboxµ Type=´submitµ Type=´buttonµ Type=´fileµ Input tipe jenis text field Input tipe jenis password field Input tipe jenis radio button Input tipe jenis checkboxes Input tipe jenis submit button Input tipe jenis button Input tipe jenis upload file

y

Ex.
<form action="" method="post">
<p>Nama:<input type="text" name="namaku"/></p> <p>Password:<input type="password" name="passwordku"/></p> <p>Jenis Kelamin: <input type="radio" name="jeniskelamin" value="pria"/>Pria <input type="radio" name="jeniskelamin" value="wanita"/>Wanita </p> <p>Hobi: <input type="checkbox" name="hobi" value="renang"/>Renang <input type="checkbox" name="hobi" value="bersepeda"/>Bersepeda </p> <p>Upload Photo:<input type="file" name="uploadfile"/></p> <p> <input type="button" name="reset" value="Reset"/> <input type="submit" name="submit" value="OK"/> </p> </form>

HTML Form (Lanjutan) y Untuk membuat menu dropdown. Ex.
y

<select name=´Bulan"> <option value=´jan">Januari</option> <option value=´feb">Februari</option> <option value=´mar">Maret</option> <option value=´apr">April</option> </select>

y

Untuk membuat text area. Ex
<textarea rows="10" cols="30"> test </textarea>

y

Untuk membuat fieldset
<fieldset> <legend>Personal information:</legend> <input type="radio" name="sex" value="male" /> Male <br /><input type="radio" name="sex" value="female" /> Female </fieldset>

Buatlah contoh halaman web seperti diatas dengan menggunakan notepad ++ y Save dengan nama dan ektensi file ´sample3.html ´
y

Sign up to vote on this title
UsefulNot useful