Komputer Aplikasi IT - I

(1)

SANGRA JULIANO P, S.I.Kom

BAHAN AJAR

KOMPUTER APLIKASI IT (HTML)

PERTEMUAN I

(2)

PENGANTAR HTML

HTML adalah bahasa yang sangat tepat dipakai untuk menampilkan informasi pada halaman Web karena HTML menampilkan informasi dalam

bentuk hypertext dan juga mendukung

(3)

Memperkenalkan Software

Ultra Edit

 Menu

 Tools

 Icon

 Area Kerja

 Menyimpan

(4)

MEMULAI HTML

Sesuai dengan namanya, bahasa ini menggunakan

tanda (markup) untuk menandai

perintah-perintahnya. Saat ini banyak sekali aplikasi yang dapat digunakan untuk membuat Web Page secara mudah, seperti Microsoft FrontPage, Ultra Edit, Adobe Golive dan lainnya. Namun demikian untuk

seorang Web Developer harus memiliki

(5)

MELIHAT TAMPILAN WEB

 Setelah selesai klik menu "File" menu dan pilih "Save As". Akan muncul

kotak Save yang akan menyimpan dokumen Anda. Lalu ketikkan file name.

Pada kotak yang paling bawah Anda dapat melihat "Save as Type , Pilih

file type HTML. Lalu Anda dapat mengklik Save.

 Untuk melihat tampilan web dapat di klik pada icon show file in bowser

atau dengan mengklik menu windows dan pilih show file in default browser

 Buka Browser, Microsoft Internet Explorer, Mozila, Opera, Safari atau

(6)

STRUKTUR DOKUMEN HTML



<html>



<head>



<title>

contoh1

</title>



</head>



<body>



Mengenal Struktur Dokumen HTML

(7)

Struktur di atas diapit oleh tag <HTML> dan </HTML> yang menandai awal dan akhir dari sebuah dokumen

yang digunakan untuk menyisipkan informasi

mengenai dokumen, misalkan versi, revisi dan sebagainya.

(8)

(9)

SANGRA JULIANO P, S.I.Kom

BAHAN AJAR

PERTEMUAN II

(10)

MEMBUAT HEADING

(11)

 <html>  <head>  <title>contoh3</title>  </head>  <body> 

 <h1> heading besar 1 </h1><br>  <h2> heading besar 2 </h2><br>  <h3> heading besar 3 </h3><br>  <h4> heading besar 4 </h4><br>  <h5> heading besar 5 </h5><br>  <h6> heading besar 6 </h6>



 </body>  </html>

(12)

(13)

MENGATUR POSISI HEADING

Posisi heading pada dokumen HTML dapat Anda tentukan sendiri. Artinya teks yang berfungsi sebagai heading dapat Anda tempatkan di kiri, kanan, atau di tengah dalam dokumen.Untuk

mengatur posisi heading, Anda dapat

menggunakan atribut ALIGN pada tag heading.

Nilai dari atribut ALIGN dapat diisi dengan salah

satu nilai, left untuk perataan sebelah kiri, right

untuk perataan sebelah kanan, atau center untuk

(14)

 <html>

 <head>

 <title>contoh2.htm</title>

 </head>

 <body>

 <h1 align="left"> heading rata kiri </h1><br>

 <h2 align="right"> heading rata kanan </h2><br>

 <h3 align="center"> heading rata tengah </h3>

 </body>

(15)

(16)

BAHAN AJAR

PERTEMUAN III

(17)

TAG PARAGRAF

Anda dapat mulai meletakkan informasi Anda pada

halaman web. Untuk keperluan ini HTML

menyediakan tags <P>. Perintah ini mempunyai beberapa atribut.

Tag <p> umumnya untuk menandai suatu paragraf baru. pemakaian tag <P> terutama digunakan untuk

membuat group paragraph dengan formatting style

(18)

Sama halnya dengan tag heading, tag paragraf <P> memiliki atribut untuk mengatur alignment atau pengatur posisi, yaitu left untuk meratakan paragrap di kiri, right untuk perataan sebelah kanan, dan center untuk meletakkan pada posisi tengah horizontal.

(19)

 <html>  <head>

 <title>contoh</title>  </head>

 <body>

 <p align="center">

 Paragraf Rata Tengah

 <p align="right">

 Paragraf Rata Kanan

 <p align="left">

 Paragraf Rata Kiri

(20)

(21)

Line break <br> adalah tag yang berfungsi untuk

membuat baris baru pada dokumen HTML tag <br>

ini membuat baris baru tanpa memberi baris kosong. Semakin banyak tag <br> yang diberikan akan menambah banyaknya baris baru pada tampilan kalimat/ paragraph web.

(22)

Horizontal Rule <HR> adalah tag tunggal yang berfungsi untuk membuat garis horizontal. Tag <HR> akan memberikan garis horizontal sepanjang baris kosong.

(23)

SANGRA JULIANO P, S.I.Kom

BAHAN AJAR

PERTEMUAN IV

(24)

TAG FONT

Untuk mengatur huruf pada HTML anda dapat

menggunakan tag <FONT> dan tag penutup

(25)

Size=n adalah atribut yang digunakan untuk mengatur besarnya ukuran font. Nilai n berkisar antara 0 (ukuran terkecil) sampai dengan yang terbesar 7.

(26)

 <head>

 <title>UKURANHURUF</title>

 </head>

 <body>

 <font size=1>

 Font Size 1</font><br>

(27)

Untuk mengatur jenis font Anda dapat menggunakan atribut face dengan sintaksis face=string. Nilai string berupa string yang menunjukkan nama font dan biasa lebih dari satu.

(28)

 <html>  <head>

 <title>JENISHURUF</title>  </head>

 <body>

 <font face=tahoma>

 jenis font tahoma</font><br>  <font face=arial>

 jenis font arial</font><br>  <font face=verdana>

 jenis font verdana</font><br>  <font face=courier>

 jenis font courier</font>

(29)

Untuk mengatur warna font Anda dapat menggunakan atribut color dengan sintaksis

color= #RRGGBB. Nilai RRGGBB adalah

kombinasi angka dalam bilangan hexa yang menunjukkan kapasitas warna merah (RR), hijau (GG), dan biru (BB).

Anda juga dapat menggantikan #RRGGBB dengan konstanta warna yang ada pada

browser seperti ditunjukan oleh tabel

Konstanta warna di bawah ini.

(30)

 <html>  <head>

 <title>WARNAHURUF</title>  </head>

 <body>

 <font color=red>

 jenis font tahoma</font><br>  <font color =green>

 jenis font arial</font><br>  <font color =blue>

 jenis font verdana</font><br>  <font color =#000000>

 jenis font courier</font>

(31)

SANGRA JULIANO P, S.I.Kom

BAHAN AJAR

PERTEMUAN V

(32)

PENJELASAN

(33)

 <B>, untuk menampilkan huruf tebal.

 <I>, untuk menampilkan huruf miring.

 <U>, untuk menampilkan garis bawah pada teks.

 <html>  <head>

 <title>PHYSICALFORMAT</title>  </head>

 <body>

 <B>, untuk menampilkan huruf tebal.V</B>  <I>, untuk menampilkan huruf miring. </I>

 <U>, untuk menampilkan garis bawah pada teks. </U>  <B><I><U> Mengabungkan ketiga-tiganya</B></I></U>  </body>

(34)

 <TT>, untuk menampilkan huruf seperti huruf mesin ketik.

 <STRIKE>, untuk menampilkan garis horizontal pada bagian tengah huruf.

 <BIG>, untuk menampilkan ukuran huruf yang lebih besar.

 <SMALL>, untuk menampilkan ukuran huruf yang lebih kecil.

 <SUB>, untuk menampilkan subscript.

(35)

 <html>  <head>

 <title>PHYSICALFORMAT</title>  </head>

 <body>

 <TT>, untuk menampilkan huruf seperti huruf mesin ketik. </TT>,  <STRIKE>, untuk menampilkan garis horizontal pada bagian tengah

huruf. </STRIKE>,

 <BIG>, untuk menampilkan ukuran huruf yang lebih besar. </BIG>,

 <SMALL>, untuk menampilkan ukuran huruf yang lebih kecil. </SMALL>,  <SUB>, untuk menampilkan subscript. </SUB>,

(36)

BAHAN AJAR

PERTEMUAN VI

(37)

JENIS LIST

Untuk membuat daftar atau list, HTML menyediakan empat macam list, yaitu :

- UNORDERED LIST - ORDERED LIST

(38)

UNORDERED LIST

 Unordered list biasanya ditandai dengan pemakaian

bullet untuk menandai sebuah item dari list. Bullet adalah karakter tertentu yang berupa karakter symbol, misalkan bullet dengan bentuk tanda panah, rumah, segitiga, dan sebagainya.

(39)

 <html>  <head>

 <title> contoh</title>  </head>

 <body>  <ul>

 <li>ms-word  <li>ms-excel  <li>ms-access

 <li>ms-powerpoint  </ul>

(40)

UNORDERED LIST

 Bentuk default tanda item dalam tag <UL> adalah

bullet. Untuk mengubah Anda dapat menggunakan

atribut TYPE dengan diikuti nilai kontanta.

(41)

 <html>  <head>

 <body>  <ul>

 <li> ms-word

 <li type=square> ms-excel  <li type=disk> ms-access

 <li type=circle> ms-powerpoint  </ul>

(42)

ORDERED LIST

Ordered list adalah daftar yang tiap bagiannya disertai

dengan penomoran. Ordered list dimulai dengan tag

(43)

 <html>  <head>

 <body>

 <ol type=i start=3>  <li type=1>Ms-Word  <li type=a>Ms-Excel  <li>Ms-Access

 <li type=i>Ms-Powerpoint  <li>Ms-Photodraw

(44)

ORDERED LIST

Ordered list mempunyai beberapa tipe penomoran yang dapat digunakan, yaitu:

 • 1 = 1,2,3….  • A = A,B,C,….  • a = a,b,c,….  • I = I,II,III,….  • i = i,ii,iii,….

(45)

DEFINITION LIST

 Definition list adalah daftar yang mempunyai

keterangan pada itemnya. Untuk memakai

(46)

 <html>  <head>

 <body>  <dl>

 <dt>Ms-Powerpoint<dd>Merupakan Program Pengolah Kata Dari Microsoft.

 <dt>Ms-Excel<dd>Merupakan Program Spreadsheet.  <dt>Ms-Access<dd>Merupakan Program Database.  </dl>

(47)

DAFTAR MENU

 Untuk membuat daftar menu Anda dapat

menggunakan pasangan tag <MENU>

(48)

 <html>  <head>

 <body>  <menu>

 <li>Ms-Word  <li>Ms-Excel  <li>Ms-Access  </menu>

(49)

SANGRA JULIANO P, S.I.Kom

BAHAN AJAR

PERTEMUAN VII

(50)

PENJELASAN

 Untuk memberikan efek gerak pada Font maupun

Gambar Anda dapat menggunakan atribut

(51)

ATRIBUT DIRECTION

Marquee tersebut juga dapat diberi arah sesuai dengan kebutuhan dan keinginan Anda, dengan

menambahkan perintah DIRECTION seperti :

 Direction left

 Directions right

 Direction up

(52)

 <html>

 <head>

 <title>contoh_efek</title>

 </head>

 <body>

 < ar uee directio = right”>

 EFEK GERAKAN KE KANAN </marquee>

 < ar uee directio = left”>

 EFEK GERAKAN KE KIRI </marquee>

 < ar uee directio = up”>

 EFEK GERAKAN KE ATAS </marquee>

 < ar uee directio = do ”>

 EFEK GERAKAN KE BAWAH </marquee>

 </body>

(53)

ATRIBUT BEHAVIOR

 Dalam atribut marquee/ efek/ gerakan

ada tiga Tipe/Jenis gerakan. Jenis-jenis gerakan dalam atribut marquee dapat digunakan dengan menambahkan

(54)

 <html>

 <head>

 </head>

 <body>

 < ar uee eha ior = slide”>

 EFEK GERAKAN SLIDE </marquee>

 < ar uee eha ior = scroll”>

 EFEK GERAKAN SCROLL </marquee>

 < ar uee eha ior = alter ate”>

 EFEK GERAKAN BOLAK BALIK </marquee>

 </body>

(55)

MENAMBAH KECEPATAN GERAK

 Untuk memberikan atribut lainnya pada gerakan,

ada beberapa perintah yang dapat anda tambahkan sesuai dengan kebutuhan dari gerakan yang di inginkan seperti dengan menambahkan perintah

SCROLLAMOUNT untuk menaikkan atau

(56)

 <html>

 <head>

 </head>

 <body>

 < ar uee eha ior=”alter ate” scrolla ou t= >

 EFEK GERAKAN BOLAK BALIK DENGAN KECEPATAN 100</marquee>

 </body>

(57)

RANGE GERAKAN

 Selain itu dalam atribut marquee anda juga dapat

membatasi jarak tempuh gerakan dengan

memberikan perintah WIDTH untuk horizontal, dan

(58)

 <html>

 <head>

 </head>

 <body>

 < ar uee eha ior=”alter ate” scrolla ou t= idth=5 %

height=50%>

 EFEK GERAKAN BOLAK BALIK DENGAN KECEPATAN 100

 </marquee>

 </body>

(59)

SANGRA JULIANO P, S.I.Kom

BAHAN AJAR

PERTEMUAN IX

(60)

PENJELASAN

 LINK digunakan untuk menghubungkan dari suatu

halaman (FILE) ke halaman (FILE) lainnya atau dari halaman web Anda dengan halaman web lainnya,

 HTML menyediakan pasangan tag <A> dan </A>

(61)

LINK ANTAR HALAMAN

 <A NAME= Ta da1 >Bagian ini akan ditandai.</A>

 Kemudian untuk membuat link ke bagian tersebut, berikan kode seperti berikut:

 <A HREF= #Ta da1 >Menuju ke bagian yang ditandai.</A>

(62)

 <html>

 <head>

 <title>contoh</title>

 </head>

 <body>

 <A HREF= ho e.ht l > HOME </A>< r>  <A HREF= profile.ht l > PROFILE </A>< r>  <A HREF= galler.ht l > GALLERY </A>< r>  <A HREF= pi tures.ht l > PICTURE“ </A>  </font>

 </body>

(63)

LINK KE WEB

 Link juga dapat di berikan ke halaman web yang

sudah ada seperti : google, yahoo, facebook, dsb.

 Ini adalah link ke <A HREF=url/ alamat lengkap web

yang di tuju> Your Searching Web </A>

 Ini adalah link ke <A HREF=http://www.yahoo.com>

(64)

 <html>

 <head>

 </head>

 <body>

 <A HREF=http://www.yahoo.com> yahoo</A><br>

 <A HREF=http://www.google.com> google </A><br>

 <A HREF=http://www.facebook.com> facebook</A><br>

 <A HREF=http://www.twitter.com> twitter</A>

 </font>

 </body>

(65)

MENAMBAH KECEPATAN GERAK

 Untuk memberikan atribut lainnya pada gerakan,

ada beberapa perintah yang dapat anda tambahkan sesuai dengan kebutuhan dari gerakan yang di inginkan seperti dengan menambahkan perintah

SCROLLAMOUNT untuk menaikkan atau

(66)

 <html>

 <head>

 </head>

 <body>

 < ar uee eha ior=”alter ate” scrolla ou t= >

 EFEK GERAKAN BOLAK BALIK DENGAN KECEPATAN 100</marquee>

 </body>

(67)

RANGE GERAKAN

 Selain itu dalam atribut marquee anda juga dapat

membatasi jarak tempuh gerakan dengan

memberikan perintah WIDTH untuk horizontal, dan

(68)

 <html>

 <head>

 </head>

 <body>

 < ar uee eha ior=”alter ate” scrolla ou t= idth=5 %

height=50%>

 EFEK GERAKAN BOLAK BALIK DENGAN KECEPATAN 100

 </marquee>

 </body>

(69)

SANGRA JULIANO P, S.I.Kom

BAHAN AJAR

PERTEMUAN X

(70)

PENJELASAN

 Gambar adalah elemen yang sangat penting dalam

(71)

TAG GAMBAR

 Perintah HTML dibawah ini akan menampilkan

gambar gambar1.gif dan menampilkan teks

ga ar 1 apabila browser mematikan fasilitas

penampil grafik.

 Ekstensi grafik yang biasa di tampilkan oleh HTML

adalah GIF, JPG, dan BMP.

 <IMG “RC= file a ega ar.filetype >

(72)

 <html>

 <head>

 <title>contohgambar</title>

 </head>

 <body>

 <IMG “RC= ga ar1.gif >

 </body>

 </html>

(73)

MENGATUR UKURAN GAMBAR

 Bila dirasa gambar Anda terlalu kecil atau terlalu

(74)

 <html>

 <head>

 </head>

 <body>

 <h1>pelatihan situs web bisnis</h1>

 <br>pergi ke web site <img src="sample.gif" width=50 height=50>

 </body>

(75)

LINK DENGAN GAMBAR

 Anda juga dapat menggabungkan grafik dengan tag <A> untuk membuat link dari gambar Anda.

 <IMG “RC= ga ar1.gif ALT= ga ar1

HREF= www.yahoo. o >

(76)

 <html>

 <head>

 </head>

 <body>

 <h1>pelatihan situs web bisnis</h1>

 <br>pergi ke web site <img src="sample.gif">

 <a href="www.pelatihan.com">pelatihan situs web bisnis</a>

 </body>

(77)

SANGRA JULIANO P, S.I.Kom

BAHAN AJAR

PERTEMUAN XI

(78)

PENJELASAN

 Tabel adalah sarana untuk menempatkan informasi

agar mudah dibaca dan dipahami.

 Untuk memahami pembuatan tabel pada HTML.

(79)

TAG TABEL

 Tag <TABLE> : untuk mendefinisikan sebuah tebel

 Tag <TR> : untuk mendefinisikan baris tabel

 Tag <TH> : untuk mendefinisikan judul tiap kolom

(80)

 <HTML>

 <HEAD><TITLE> Menggunakan Tabel </TITLE></HEAD>

 <BODY>

 <TABLE BORDER=1>

 <TR>

 <TH> Kolom 1 </TH>

 <TH> Kolom 2 </TH>

 <TH> Kolom 3 </TH>

 </TR>

 <TR>

 <TD> Baris 1 kolom 1 </TD>

 </TR>

(81)

ATRIBUT TAG TABEL

Atribut untuk tag <TABLE>adalah sebagai berikut :

 ALIGN : Posisi horizontal tabel

 BACKGROUND : Menentukan gambar latar belakang tabel

 BGCOLOR : Menentukan warna latar belakang tabel

 BORDER : Menentukan tebal bingkai tabel

 BORDERCOLOR : Menentukan warna bingkai tabel

 BORDERCOLORLIGHT : Menentukan warna depan bingkai tabel

 BORDERCOLORDARK : Menentukan warna bayangan bingkai tabel

 CELLSPACING : Menentukan jarak spasi antar sel

 CELLPADDING : Menentukan jarak isi sel dengan bingkai

 HEIGHT : Menentukan tinggi tabel

 WIDTH : Menentukan lebar tabel

(82)

 </html>

 <head>

 </head>

 <body>

 <table border=1 width="80%">

 <tr>

 <td width="70%">sel 1,1</td>

 <td width="30%">sel 1,2</td>

 </tr>

 <td>sel 2,1</td>

 </tr>

 </table>

(83)

SANGRA JULIANO P, S.I.Kom

BAHAN AJAR

PERTEMUAN XII

(84)

ATRIBUT TAG <TD>

 ALIGN : Posisi horizontal teks dalam sel

 BACKGROUND : Menentukan gambar latar belakang sel

 BGCOLOR : Menentukan warna latar belakang sel

 BORDER : Menentukan tebal bingkai sel

 BORDERCOLOR : Menentukan warna bingkai sel

 BORDERCOLORLIGHT : Menentukan warna depan bingkai sel

 BORDERCOLORDARK : Menentukan warna bayangan bingkai sel

 COLSPAN : Menentukan jumlah kolom yang digabung

 HEIGHT : Menentukan tinggi sel

 NOWRAP : Menentukan teks agar tetap satu baris

(85)

Cellspacing dan Cellpading

 Atribut cellspacing digunakan untuk mengatur jarak

atau spasi antar sel dengan sel lainnya dan antar sel dengan batas tabel.

 Sedangkan atribut cellpading digunakan untuk

(86)

 <html>

 <head>

 </head>

 <body>

 <table border=1 width="80%" cellspacing=10 cellpadding=20>

 <tr>

 <td width="85%">penggunaan internet menjadi utama dalam kegiatan perusahaan </td>

 <td width="15%">-</td>

 </tr>

 <tr>

 <td>perusahaan banyak memanfaatkan e-mail sebagai komunikasi mereka.</td>

(87)

Rowspan dan Colspan

 Atribut rowspan digunakan untuk menggabungkan

beberapa buah baris menjadi satu.

 Sedangkan atribut colspan digunakan untuk

(88)

 <html>

 <head>

 </head>

 <body>

 <table border=1>

 <tr>

 <td colspan=2>sel 1,1</td>

 <td>sel 1,2</td>

 <td>sel 1,3</td>

 </tr>

 <tr><td rowspan=3>sel 2,1</td>

 <td>sel 2,1</td>

 <td>sel 2,2</td>

 <td>sel 2,3</td>

 <tr>

 <td>sel 3,1</td>

 <td>sel 3,2</td>

 <td>sel 3,3</td>

 </tr>

 </table>

 </body>

(89)

SANGRA JULIANO P, S.I.Kom

BAHAN AJAR

PERTEMUAN XIII

(90)

PENJELASAN

(91)

STRUKTUR DASAR FORM

 <form [ ethod=”[post|get]”actio =”url”]>

 …

 </form>

 Input Box

 Input box adalah inputan pada form yang memungkinkan user memasukkan string dalam satu baris. Untuk membuat input box, HTML menyediakn tag <INPUT> dan memanfaatkan atribut TYPE= Te t . Atribut pada tag <INPUT> lainnya adalah NAME untuk menyatakan nama dari input tersebut, VALUE untuk menyatakan nilai dari suatu input, dan SIZE untuk menyatakan panjang sebuah input.



(92)

 <head>  <title>contoh</title>  </head>  <body>  <form>  <table>  <tr>

 <td>nama :</td>

 <td><input type="text" name="varnama" value="Sangra Juliano P" size="30"></td>

 </tr><tr>

 <td>alamat :</td>

 <td><input type="text" name="varalamat" size="30"></td></tr>

 <tr>

 <td>password :</td>

 <td><input type="password" name="varkota" size="10"></td>

(93)

RADIO BUTTON

 Bila atribut TYPE pada tag <INPUT> Anda ganti dengan Radio maka

Anda sudah mendefenisikan sebuah radio button.

Jenis Kelamin:

 <INPUT CHECKED TYPE= Radio NAME= Kela i VALUE= Pria >Pria

 <INPUT TYPE= Radio NAME= Kela i VALUE= Wa ita >Wa ita

 Perhatikan contoh HTML di atas. Anda akan menemukan bahwa pada

(94)

CHECKED BOX

(95)

BUTTON

Anda dapat membuat dua macam tombol pada form HTML. Yang pertama dengan memberikan “u it pada atribut TYPE atau dengan menggunakan atribut reset . Submit digunakan untuk melakukan action pada tag <FORM>. Sedangkan reset digunakan untuk menghapus nilai pada seluruh isi form.

(96)

BAHAN AJAR

PERTEMUAN XIV

(97)

PENJELASAN

 Frame digunakan untuk membagi jendela browser menjadi

beberapa bagian dan masing-masing bagian terdiri dari

dokumen HTML tersendiri. Frame pertama kali

(98)

TAG FRAME

Untuk membuat sebuah frame, tag yang digunakan adalah :

 Tag <FRAMESET>

 Tag <FRAME>

(99)

TAG ATRIBUT <FRAMESET>

Tag <FRAMESET> mempunyai beberapa atribut :

 ROWS : Membuat frame secara mendatar (baris)

sekaligus mendefinisikan labar masing-masing

 COLS : Membuat frame secara vertikal (kolom) sekaligus

mendefinisikan labar masing-masing

(100)

Untuk mendefinisikan lebar frame pada atribut ROWS dan COLS ada tiga cara yang dapat digunakan, yaitu dengan nilai tetap, nilai persentase, dan nilai proporsional. Misalnya ingin dibuat tiga buah frame, maka penggunaannya adalah sebagai berikut :

 Dengan nilai tetap <FRAMESET ROW“= 100,240,400 >

 Dengan nilai persentase <FRAMESET COL“= 30%,40%,30% >

(101)

TAG ATRIBUT <FRAME>

Tag <FRAME> mempunyai atribut :

 SRC :Menentukan nama file HTML yang digunakan sebagai isi frame

 MARGINHEIGHT :Menentukan batas atas dan bawah antara dokumen dengan bingkai dalam pixel

 MARGINWIDTH : Menentukan batas kiri dan kanan antara dokumen dengan bingkaidalam pixel

 SCROLLING : Menentukan apakah frame dapat memiliki scroll bar. Nilainya adalah YES, NO, AUTO

 NORESIZE : Jika atribut ini disebutkan, frame tidak dapat diubah ukurannya

 NAME : Mendefinisikan nama dari objek frame. Nama ini dapat digunakan sebagai tujuan sebuah link

(102)

 <html>

 <head>

 <title>Frame Kiri</title>

 </head>

 <body bgcolor = "white">

 <h1>Frame di Sebelah Kiri</h1>

 </body>

 </html>

(103)

 <html>

 </head>

 <title>Frame Kanan</title>

 <head>

 <body bgcolor = "white">

 <h1>Frame di Sebelah Kanan</h1>

 </body>

 </html>

(104)

 <html>

 <head>

 <title>Contoh Penggunaan Frame</title>

 </head>

 <frameset cols=30%,*">

 <frame src="framekiri.htm">

 <frame src="framekanan.htm">

 </frameset>

 </html>

(105)

QUIZ HTML

Mata Kuliah : Komp. Aplikasi IT-I (HTML) Semester : 1 (Satu)

Dosen : Sangra Juliano P, S.I.Kom Waktu : 90 Menit (2 SKS)

Desainlah sebuah Personal Web dengan menggunakan perintah-perintah HTML (Ultra Edit maupun Notepad). Adapun sistematika penilaian web dengan ketentuan sebagai berikut :

1. Menggunakan Struktur Dokumen HTML yang benar (Dari tags Pembuka hingga tags Penutup) pada setiap halaman. (Nilai = 10).

Title atau filename untuk halaman utama = index.htm

Title atau filename untuk halaman lainnya = page1.htm , page2.htm, dst… 2. Memasukkan Image / Foto / Gambar dengan filetype : jpg/gif (Nilai = 10).

Minimal 3 image / foto, termasuk background.

3. Menggunakan efek-efek gerakan Marquee beserta atribut-atributnya (Nilai = 10). 4. Menggunakan fasilitas List beserta atribut-atributnya (Nilai = 10).

5. Menggunakan Tabel (Nilai = 10).

6. Menggunakan fasilitas Form beserta atribut-atributnya (Nilai = 10).

7. Menghubungkan halaman – halaman / Link. Baik untuk alamat link relative (minimal 4 halaman secara timbal balik), dan untuk alamat link absolute (ex : yahoo, google, friendster dan lain-lain) (Nilai = 20). 8. Kreatifitas, Kerapian, Komposisi Warna, Desain, Originalitas, Font(ukuran, jenis dan warna), dan

lain-lain (Nilai = 20).