Materi HTML

1 | P a g e

MODUL TIK

KELAS XII Semester 2

PEMBUATAN DeSIGN WEB MENGGUNAKAN HTML Penyusun : Rismira Andriyani, S.Kom SMA N3 Magelang

DINAS PENDIDIKAN KOTA MAGELANG

SMA NEGERI 3 MAGELANG

Jl. Medang No. 1

Magelang

2009

2 | P a g e

MODUL 1

BASIC HTML

Standar Kompetensi : Mengoperasikan Software Pemograman Internet Berbasis Web

Kompetensi Dasar : Menggunakan Program HTML untuk pemograman Internet Web

Design

Indikator Keberhasilan :

1. Mampu Memahami berbagai macam software Web Design

2. Mampu Memahami berbagai macam objek Web Design

3. Mampu Mengidentifikasi HTML dan URL

4. Mampu Memahami berbagai macam Web browser

5. Mampu membuat dokumen HTML

HTML(Hypertext Markup Languange)

• WWW (World Wide Web) merupakan fasilitas di Internet yang paling disukai. Dengan WWW internet jauh lebih sempurna karena selain memberikan layanan penampilan yang canggih juga file yang ditampilkan tersebut bisa disimpan dari satu komputer ke komputer lain di mana saja dengan mudah dan cepat. Bahkan dengan adanya fasilitas tersebut, kita bisa menyimpan data diserver mana saja selama mendapat akses atau mempunyai alamat server tempat menyimpan data. Istilah penitipan data diserver dikenal dengan istilah hosting. Hosting ini bisa kita gunakan apabila kita mempunyai space di hosting tersebut dan telah memiliki IP addres yang didaftar, misalnya ke internet untuk domain COM, NET, ORG dll.

• Istilah yang umum dan populer untuk mengambil data adalah Download. Sedangkan istilah untuk mengirim data ke server adalah Upload.

• Struktur dasar HTML :

Keterangan :

• <html> </html> : mendefinisikan bahwa teks yang berada diantara kedua tag tersebut adalah file

HTML.

• <head> </head> : mendefinisikan head dalam sebuah file HTML.

• <title> </title> : mendefinisikan judul yang hendak ditampilkan pada browser.

• <body> </body> : mendefinisikan teks beserta formatnya yang hendak ditampilkan sebagai isi

halaman web.

URL (Universal Resource Locator) URL merupakan suatu “pathname” untuk mengidentifikasi sebuah dokumen di Web. Didalam URL dimuat lokasi atau nama mesin (computer) yang menyimpan dokumen yang diminta, nama file dari dokumen (termasuk logical pathname) serta protocol untuk mengaksesnya. Contoh URL : http://www.datakom.com./buku/default.html Keterangan : Bagian Pertama adalah http (Hypertext Transfer Protocol) → mengidentifikasi protocol yang

digunakan untuk mengakses dokumen yang bersangkutan. Protocol ini penting untuk menangani komunikasi antar client dan server agar bahasa yang digunakan sama.

http://www.datakom.com./buku/default.html

3 | P a g e

Bagian kedua www.datakom.com → menunjukkan lokasi mesin di internet Bagian ketiga /buku/default.html → menunjukan logical pathname ke dokumen tersebut di

www.datakom.com Membuat Dokumen HTML Sebelum menulis dokumen HTML yang perlu dilakukan pertama kali adalah membuat folder atau tempat penyimpanan dokumen dan program editor yang akan digunakan disini akan digunakan Notepad. Untuk membuat dokumen HTML diperlukan ketelitian dan ketekunan.

I. Membuat Direktori/Folder Langkah-langkah membuat folder : a. Klik dua kali MyDocument b. Klik salah satu Drive, misal C atau D c. Klik 2x Drive D d. Klik File e. Pilih dan Klik New f. Klik Folder g. Ketikkan nama Folder misal, DATAHTML-NAMA h. Tekan ENTER

2. Mulai Membuat Dokumen

a. Klik Star Windows b. Klik dan Pilih Program c. Klik dan Pilih Accessories d. Klik dan Pilih Notepad.

3. Menyimpan Dokumen

a. Dari jendela Notepad tampilkan Menu File b. Pilih Save As. Setelah itu akan tampil kotak dialog Save As c. Tentukan lokasi drive atau folder tempat dokumen HTML tersebut akan disimpan d. Ketikkan nama file HTML anda, lengkap dengan akhiran (Extention)HTM atau HTML, Misal

Latihan.HTML e. Klik tombol Save

4. Membuka Dokumen

a. Jalankan Notepad b. Tampilkan Menu File c. Pilih Sn klik Open. Setelah itu akan tampil kotak dialog open d. Tentukan lokasi drive atau folder tempat dokumen HTML tersebut akan disimpan e. Ketikkan nama file yang akan anda buka, misalnya LATIHAN.HTML f. Klik tombol open. Setelah itu dokumen HTML sudah tampil dijendela Notepad.

5. Menjalankan Dokumen HTML

1. Jalankan Internet Explorer 2. Pilih dan klik file 3. Klik open, klik tombol browse

http://www.datakom.com/

4 | P a g e

4. Pilih nama file, mis Latihan.HTML 5. Klik tombol Open 6. Klik Ok

5 | P a g e

MODUL 2

MEMBUAT HEAD, TITLE DAN BODY 1. Mengenal Head dan Title Head dalam dokumen HTML berisi title atau judul dari dokumen yang dibuat. Artinya apabila menggunakan Head dalam suatu dokumen maka dokumen yang menyertai perintah tersebut, akan ditampilkan dibagian atas layar browser pada saat dokumen dieksekusi. Penulisan Head harus dikombinasikan dengan Title karena jika Head berdiri sendiri tidak akan berdampak apa-apa pada dokumen walaupun mengandung komponen Head. Contoh : <HTML> <HEAD> <TITLE> Bio’s Production </TITLE> </HEAD> </HTML> Simpan dengan nama Title.Html

2. Mengenal Body Komponen body bisa dikombinasikan dengan komponen lainnya, contoh : <HTML> <HEAD> <TITLE> Bio’s Production </TITLE> </HEAD> <BODY> Production House "Pembuatan Company Profile" </BODY> </HTML> Simpan dengan nama Body.html

Tugas 1 :

Buatlah Web sederhana dengan Tampilan sebagai berikut !!!! Tittle : SMANAGA Comunitee Body : Gabung buat komunitas kalian….! Jangan lewatkan masa muda kalian dengan sia-sia………….!

6 | P a g e

Buat komunitas pencinta Adobe Photoshop… dan ciptakan karya-karya yang spektakuler…. Cara yang paling mudah tentu mengkonversi gambar ke Grayscale. Atau kita juga bisa mengkopi salah satu channel dari RGB jika foto yang kita miliki punya bias ke warna tertentu, contoh foto awan. Metode konversi ke Grayscale sendiri mengambil proporsi dari kombinasi channel red, green dan blue. Green yang berisi detail digunakan terbanyak 60%, red yg menyimpan kontras digunakan 30% dan blue yang berisi low level detail atau noise diambil 10%.

7 | P a g e

MODUL 3

MEMBUAT HEADING, BREAK DAN PARAGRAF, STYLE

DOKUMEN 1. Heading

Heading sangat diperlukan dalam suatu dokumen. Karena heading disini merupakan format tertentu dalam suatu paragraf dan bisa juga dikatakan sebagai judul dari suatu paragraf. Komponen Heading dalam HTML dimulai dengan <H1>, <H2>, <H3>, <H4>, <H5> dan <H6>. Jadi ukuran dari heading dapat diatur dengan menuliskan salah satu dari komponen tersebut. Jangan lupa supaya heading tidak merambah ke dokumen lainnya diperlukan TAG penutup. Misal <H1>JUDUL</H1> Contoh penggunaan Heading <Html> <Title> Sonic Production "Production House" </Title> </Head> <Body> <H1>Company Profile</H1>

<H2>Video Sothing</H2> <H3>Photo Digital</H3> <H4>Percetakan</H4> <H5>Rias Pengantin</H5> <H6>Transfer DVD/VCD</H6> </Body> </Html

Simpan dengan Heading.Html

2. Break Jika menulis dokumen yang panjang tentu diperlukan pemenggalan kalimat untuk mengefisiensikannya. Dalam dokumen HTML pun berlaku sama. Dalam program HTML komponen atau TAG yang diperlukan untuk memengal atau memotong kalimat yang panjang adalah break ditulis dengan <Br> Contoh : <Html> <Title> Sonic Production "Production House" </Title> </Head> <Body> <H2>Persyaratan untuk menguasai ASP atau ASP.Net</H2> Untuk mempelajari ASP atau ASP.Net diperlukan latar belakang atau <br> penguasaan HTML. karena tanpa menguasai HTML mustahil<br> anda akan mampu menguasai ASP dengan baik dan benar. Karena ASP <br> juga dibundel dalam HTML </Body> </Html> Simpan dengan nama Break.Html

3. Paragraf

8 | P a g e

Penulisan komponen paragraf dalam dokumen HTML disingkat <p> Contoh : <Html> <Title> Sonic Production "Production House" </Title> </Head> <Body> <H2>Persyaratan untuk menguasai ASP atau ASP.Net</H2> Untuk mempelajari ASP atau ASP.Net diperlukan latar belakang atau <br> penguasaan HTML. karena tanpa menguasai HTML mustahil<br> anda akan mampu menguasai ASP dengan baik dan benar. Karena ASP <br> juga dibundel dalam HTML <P> Setelah Anda menguasai HTML anda juga dituntut mengerti IIS <Br> (Internet Information Service). IIS ini umumnya dibundel dalam<Br> Windows 2000. Tetapi jika anda menggunakan Windows 95 atau <Br> Windows 98 diperlukan komponen PWS (Personal Web Server) </P> </Body> </Html> Simpan dengan nama Paragraf.html

STYLE DOKUMEN

1. Mengatur Style Font Dalam menulis style font harus diawali dengan <Nama_Tag> dan ditutup dengan </Nama_Tag>

No Style Kegunaan

1. <B> Huruf Tebal (bold)

2. <I> Huruf Mring (Italic)

3. <U> Huruf digaris bawahi (underline)

4. <STRONG> Mirip huruf tebal

5. <CODE> Huruf Jenis Courier

6. <EM> Mirip Italic

7. <TT> Teletype Writer

8. <SAMP> Seperti code

Contoh: <Html> </Title>

</Head> <Body>

9 | P a g e

<B> Ini Menggunakan Huruf TEbal</B> <P> <I> Ini Menggunakan HUruf miring</I> <P> <U> Ini Menggunakan huruf digaris bawahi </U> <P> <Strong> Ini seperti huruf tebal </Strong> <P> <Code>

Ini menyerupai huruf courier </Code> <P> <EM> Ini menyerupai huruf italic </EM> <P> <TT> Ini adalah Teletype write </TT> <SAMP> Ini Menyepupai kode </Samp> </Body> </Html>

Hasil dari program diatas :

Mengatur font Dalam menulis suatu dokumen perlu mengatur ukuran huruf. Misal untuk judul menggunakan lebih besar, untuk sub judul lebih kecil dibandingkan judul dan untuk isi biasanya menggunakan ukuran kecil atau sedang. Penulisan program html pengaturan huruf mulai nilai 1 sampai dengan 7. perintah yang digunakan untuk mengubah huruf adalah <font size=n> dan diakhiri dengan perintah </font>

ELEMENT FONT Element FONT berfungsi untuk merubah jenis, ukuran dan warna dari tampilan huruf. Element ini mempunyai attribute color untuk merubah warna huruf, face untuk merubah jenis huruf (jika lebih dari satu jenis huruf, harus dibatasi dengan koma), dan size untuk merubah ukuran huruf (pixel). Sintaks: <font color="warna" face="font" size="pixel"> .......................... </font> Contoh : <html> <Title>SONIC PRODUCTION</title> <Head><font color="blue"><font size=+5>GLOBAL WARMING</font></font> </head><P> <font size=+3><font color="red"><P>Surabaya</font></p></font> <p> Perubahan iklim berpengaruh pada pemanasan secara global. Dan ini tentunya akan membuat kehidupan manusia akan menjadi sangat terancam. Bukan hanya kita saja yang turut merasakan pengaruh buruknya tapi anak cucu kita pun akan mengalami hal yang sama dengan kita. maka dari itulah dituntut kesadaran semua pihak dalam hal ini. </P> <html>

10 | P a g e

3. Mengenal Bullet Ada 2 jenis bullet yaitu : Unordered List <UL> yaitu membuat bullet saja dan Ordered list <OL>, untuk membuat bullet nomor. Untuk membuat list harus menggunakan <LI> Contoh : <Html> <Head> <Title> Datakom Lintas Buana </Title> </Head> <Body> <H3>Datakom Lintas Buana</H3> <B> Seri Operasi System </B> <UL> <LI> MIcrosoft Windows 2000 Profesional <LI> Microsoft WIndows 2000 Server <li> instalasi dan KOnfigurasi Windows 2000 Server

<li> Melangkah dengan Windows Me <li> Satu Hari Bersama Windows Xp </UL> <P> <B> Seri Microsoft Office </B> <OL> <LI> Microsoft Word 2003 <LI> Microsoft Excel 2003 <LI> Microsoft Power Point 2003 <LI> Microsoft Access 2003 </OL> </Body> </html>

Warna Biru

11 | P a g e

Simpan dengan nama tugas2-nama-no.absen

12 | P a g e

MODUL 4

MEMBUAT TABEL

Dalam Html program untuk membuat baris adalah <TR> sedangkan kolom adalah <TD>.

1. Tabel Border Border adalah yang akan mengelilingi data dalam tabel. Dengan menggunakan perintah <Table Border>. Tabel border bisa diatur ketebalannya :

• Border 0 : digunakan apabila tidak menggunakan border • Border 1 : digunakan bila menggunakan nilai border standar • Border 2 : digunakan bila ukuran border tebal.

Contoh : <html> <Head> <Title> Sonic Production </Title> </Head> <body> <tabel> <table border> <tr> <td> Kolom Pertama <td> Kolom Kedua

<td> Kolom Ketiga </tr> <tr> <td> SATU <td> DUA <td> TIGA </tr> </table border> <tabel> </body> </html>

2. Table Header Perintah atau komponen yang digunakan Table Header adalah <TH>. Untuk membuat table header berhubungan erat dengan <tabel border>, <TD>, <TR> dan <TH>

3. Caption (Judul table) Prosedure penulisan Tag<Caption> dan ditutup </Caption> Kalian juga bisa mengatur penempatan Align disebelah kiri, kanan, atau tengah-tengah. Untuk itu perlu ditambahkan komponen TAG bernama DIV(division). Cara penulisan <DIV align=center>Kalimat</Div align=center>

4. Mengatur Tabel Align=left untuk menempatkan table disebelah kiri Align=right untuk menempatkan table disebelah kanan Align=center untuk menempatkan table ditengah-tengah. Contoh: <html> <Head> <Title> Datacom Lintas bUana </Title> </head> <body> <caption> <div align = Center><B>DAFTAR MAHASISWA UMBO</caption></B></div> <table>

<Table Border=1 width=75% Align=center> <TR> <TH>NO <TH>NAMA <TH>FAKULTAS <TH><div align=right>JURUSAN</div> <TH>ALAMAT </TR> <TR> <TD>1.

13 | P a g e

<TD>Pandu Setya Nugraha <td>MIPA <td>Ilmu KOmputer <td>KOmplek LIPI Cibinong </tr> <tr> <td>2. <td>Terra Surya KIP <td>FKIP

<td>Biologi <td>Sukabumi,Jampangkulon </tr> </table> </body> </html>

14 | P a g e

WARNA Untuk mengatur warna dalam suatu dokumen atau program HTML kode yang digunakan BGCOLOR(Background Color). Penulisan warna bisa menggunakan nilai heksa desimal, dan biasanya akan menyesuaikan dengan browsernya. Tabel Warna :

000000 Black

0000FF Blue

A52A2A Brown

00FFFF Cyan

008000 Green

FFA500 Orange

FF00FF Magenta

808080 Gray

FFD700 Gold

ADFF2F Greenyellow

00FFFF Aqua

FAEBD7 Antiquewhite

006400 Darkgreen

Contoh : <Html> <table BGcolor=yellow> <tr BGcolor=blue> <td>No <td>Nama <td>Tempat Lahir <td>Tanggal Lahir <td>Alamat </tr> <tr bgcolor=orangea> <td>1 <td>Tuntang <td>Sukabumi <td>6-6-1962 <td>Cibinong </tr> <tr bgcolor=red> <td>2 <td>Ganjar PJ <td>Jampang kulon

<td>1-1-1976 <td>Cibinong </tr> <tr Bgcolor=cyan> <td>3 <td>Luly <td>Cibadak <td>1-10-1978 <td>Cibadak Sukabumi </tr> <tr bgcolor=Magenta> <td>4 <td>Dwi cahyono <td>Cibaduyut <td>9-9-1989 <td>Jakarta Selatan </tr> </Table> </html>

15 | P a g e

Buatlah Tampilan web seperti yang tampak dibawah ini dengan ketentuan sbb: Warna untuk STOK BARANG DAGANGAN adalah Merah Untuk kepala kolom beri warna kuning

Simpan dengan nama : nama-absen-tugas 3

16 | P a g e

MODUL 5

GAMBAR DAN ANIMASI

Dalam membangun website selain menampilkan teks juga harus menampilkan gambar, sehingga dokumen HTML lebih komunikatif dan tidak membosankan. Tidak hanya itu gambar yang ditampilkan pun bisa bermacam-macam tergantung kebutuhan . Bahkan agar lebih menarik gambar yang ditampilkan tersebut bisa dibuat bergerak sesuai kebutuhan yang dinamakan dengan animasi. Saat ini banyak sekali program yang bisa digunakan untuk membuat atau mendesain gambar tersebut antara lain : Macromedia Flash, Microsoft Phot Draw, MS-Paint dan masih banyak lagi.

1. Menampilkan gambar Untuk menampilkan dan memasukkan gambar ke dalam dokumen HTML banyak yang bisa dilakukan, antara lain dengan memanfaatkan Image dengan tanda <IMG>. Dan kemudian diikuti dengan SCR(Source) dan nama gambar lengkap dengan akhirannya, seperti gambar.JPEG, Gambar.BMP, Gambar.GIF dll. Image atau gambar yang akan ditampilkan sebaiknya menggunakan perintah TABLE agar penempatannya tidak berubah-rubah. Contoh pemakaian : <IMG SRC=Nama_Gambar.GIF> Format gambar yang bisa ditampilkan antara lain : JP, JPEG, GIF, PCX dll. Sebaiknya gambar ditempa Contoh : <Html> <Table Border=1> <TR> <TD>NO <TD>NAMA <TD>ALAMAT <TD>GAMBAR </TR> <TR> <TD Valign=TOP>01 <TD VALIGN=TOP>NANA <TD VALIGN=TOP>MAGELANG <TD VALIGN=TOP>

<Img src="alqur'an.GIF"> </TR> <TR> <TD Valign=Top>02 <TD Valign=Top>bumbum <td Valign=Top>Sanden, Magelang <td valign=top> <Img src="laptop.jpg"> </tr> </Table> </Html>

Gambar yang dimasukkan kedalam dokumen HTML bisa dikombinasikan dengan teks sehingga lebih menarik. Perintah yang digunakan VSPACE(Vertikal space) dan HSPACE (Horisontal Space) agar teks dan gambar tidak terlalu berdekatan. Vspace dan Hspace umumnya menggunakan nilai dalam piksel. Misalnya Vspace=20, Vspace=30, Hspace=10 dll. Contoh : <html> <Table Border=2> <H2><Font size=+3>Menggunakan Teks dan Gambar<BR></H2> <image src="allah.gif" Align=Left Vspace=10> <hspace=10><Font size=-1> Dalam waktu dekat buku Microsoft Office Xp akan terbit. Di samping itu juga akan terbit buku Share Point Team Service yang

saya tulis. Dalam waktu dekat buku Microsoft Office Xp akan terbit. Di samping itu juga akan terbit buku Share Point Team Service yang saya tulis.Dalam waktu dekat buku Microsoft Office Xp akan terbit. Di samping itu juga akan terbit buku Share Point Team Service yang

17 | P a g e

saya tulis.Dalam waktu dekat buku Microsoft Office Xp akan terbit. Di samping itu juga akan terbit buku Share Point Team Service yang saya tulis.Dalam waktu dekat buku Microsoft Office Xp akan terbit. Di

samping itu juga akan terbit buku Share Point Team Service yang saya tulis. </table> </html>

1. Buatlah Curriculum Vitae 2. Tambahkan Image maupun animasi kedalamnya. 3. Simpan sebagai tugas 4-nama-no.Absen

18 | P a g e

MODUL 6

HYPERLINK ATAU TAUTAN

1. Kompon Teks Komponen ini sering juga disebut sebagai komponen string. Syntak yang digunakan <Input Type=“Text Name=Nama Size=20> Input adl kata kunci Type adl jenis atau tipe input Name adl nama variabel Size adl jumlah karakter Coba kalian buat tampilan web seperti dibawah ini :

Jawab : <html> <form> <tr> <H3>MENGENAL KOMPONEN FORM</h3> <BR> </TR> <TR> <td>NAMA <input type="text" name="nama"size=20"> </tr> <tr> <br>

<td>ALAMAT <input Type="text" name="nama" size=30> </tr> <tr> <br> <td>KETERANGAN <input Type="text" name="nama" size=40> </tr> <tr> <br> </form> <html>

2. Radio Button Radio button adalah suatu tombol yang digunakan untuk mengambil salah satu pilihan dari banyak pilihan yang tersedia. Cara penggunaan perintah adl sbb : <Input Type=“radio” Name=“nama” Value=“K”> <Input Type=“radio” Name=“nama” Value=“TK”> Keterangan : Input adl kata kunci atau keyword Type adl tipe input dalam hal ini Radio Button Name adl definisi variable Nama adl nama variable Value adl isi dari variable bila dipilih. Buatlah tampilan web berikut ini :

Jawaban : <html> <h3>RADIO BUTTON</h3> <p> Agama atau kepercayaan terhadap Tuhan Yang Maha Esa : <br>

19 | P a g e

<input type="radio" name="Agama" Value="I">Islam<br> <input type="radio" name="Agama" value="K">Kristen<br> <input type="radio" name="Agama" value="H">Hindu<br> <input type="radio" name="Agama" value="B">Budha<br> <input type="radio" name="Agama" value="P">Protestan<br> </html> 3. Checked Jika kalian menginginkan salah satu jawaban atau pilihan dalam radio button ingin dijadikan pilihan default gunakan checked. Artinya saat program dijalankan diatas browser secara otomatis sudah ada jawaban yang ditandai, namun tentu saja kalian harus memindahkanya ke jawaban yang benar. Buatlah tampilan dibawah ini dengan menggunakan radio button dan checked :

Jawaban : <html> <h3>RADIO BUTTON dan CHECKED</h3> <FROM method=Post action="Noactionyet"> Apakah kalian sudah lulus SMP? <br> <input type="radio" name="Jawaban" Value="Y“ Check>Ya<br> <input type="radio" name="Jawaban" value="T">Tidak<br> </form> </html>

4. Check Box Check box sangat beda dengan radio button. Radio button berbentuk lingkaran sendangkan check box berbentuk persegi. Pada pilihan yang ditampilkan Check Box sebenarnya bisa diambil atau bisa juga tidak diambil tergantung kebutuhan. Jika tidak sesuai makan jawaban bisa dikosongkan. Syntax penulisan programnya sbb: <INPUT TYPE=CHECKBOX NAME=NAMA VALUE=“K”> Ket : Input adl kata kunci atau keyword Type adl tipe input dalam hal ini Check Box. Name adl definisi variable Nama adl nama variabel Value adl isi dari variable bila dipilih. Buatlah tampilan berikut ini :

Jawab : <html> <h3>Menggunakan CheckBox</h3> <p> <form Method=post action="noactionyet"> Microsoft Certified System Engineer adalah ? <br> <Input Type=checkbox name=Jawab1 Value="MCSE">MCSE <br> <Input Type=checkbox name=Jawab2 Value="MCP">MCP

20 | P a g e

<br> <Input Type=checkbox name=Jawab3 Value="MCDBA">MCDBA <br> <Input Type=checkbox name=Jawab4 Value="MMOUS">MMOUS <br> <Input Type=checkbox name=Jawab5 Value="MOUS">MOUS <br> </form> </html> Apabila salah satu jawaban dalam check box akan dijadikan pilihan default maka harus menggunakan printah Checked. Artinya pada saat program dijalankan diatas browser secara otomatis sudah ada jawaban yang ditandai, namun tentu saja masih bisa menambahkan sesuai dengan pilihan. Buatlah tampilan berikut ini :

Jawaban : <html> <h3>Menggunakan CheckBox dan Checked</h3> <p> <form Method=post action="noactionyet"> Microsoft Certified System Engineer adalah ? <br> <Input Type=checkbox name=Jawab1 Value="MCSE" checked>MCSE <br> <Input Type=checkbox name=Jawab2 Value="MCP">MCP <br> <Input Type=checkbox name=Jawab3 Value="MCDBA">MCDBA <br> <Input Type=checkbox name=Jawab4 Value="MMOUS">MMOUS <br> <Input Type=checkbox name=Jawab5 Value="MOUS">MOUS <br> </form> </html> 5. Select dan Option Select adalah suatu perintah yang digunakan untuk memilih salah satu jawaban dari daftar pilihan dalam bentuk dropdown. Select ini digunakan untuk mengidentifikasi pilihan sedangkan untuk membuat dan menampilkan pilihan adalah dengan perintah Option. Syntax : <SELECT NAME=“PENERBIT”> <OPTION>BUKU KOMPUTER DATAKOM Buatlah tampilan berikut ini :

21 | P a g e

Jawab : <html> <h3>Menggunakan Select and option</h3> <h4>Buku ini diterbitkan oleh </h4> <br> <select name="PENERBIT"> <Option>Fajar Corporation Jakarta <Option Selected>Datakom Lintas Buana Jakarta

<Option>Kucar Kacir Bogor <Option>Angin Ribut Sukabumi <Option>Maju Mundur Cianjur <Option>Maju Trus Bandung <Option>Mundur Bae Cianjur </select> </html>

6. Scroll Up dan Down

Buatlah tampilan spt disamping berikut ini :

Jawab : <html> <h3>Menggunakan Select, option Select dan Size=n</h3> Buku ini diterbitkan oleh <p> <select name="PENERBIT" Size=7> <Option>Fajar Corporation Jakarta <option>Hayat Raharja <option>Luly lala <option>Mahardika

<option>Salam Kangen <Option Selected>Datakom Lintas Buana Jakarta <Option>Kucar Kacir Bogor <Option>Angin Ribut Sukabumi <Option>Maju Mundur Cianjur <Option>Maju Trus Bandung <Option>Mundur Bae Cianjur </select> </html>

7. Select, Multiple Ctrl + Klik digunakan untuk mengambil beberapa pilihan satu persatu Shif + klik digunakan untuk mengambil beberapa pilihan sekaligus.

8. Button Dalam HTML dikenal 2 jenis Button yaitu Submit dan Reset Tombol Submid digunakan untuk mengaktifkan Action ketika sudah berhadapan dengan ASP atau CGI yang ada pada server. Tombol Reset digunakan untuk membersihkan data yang ada dalam form yang sudah dimasukkan . Buatlah Tampilan berikut ini :

Jawab : <html> <h3>Menggunakan Tombol Submid dan Reset</h3> <form method=post action="tampil.asp"> NAMA <input type=text Name=Nama1 size=30> <br> ALAMAT <input type=text Name=Nama2 size=40>

<br> KOTA <input type=text Name=Nama3 size=40> <p> <input type=submit name=Button1 Value="Kirim"> <input type=reset name=button2 value="hapus"> </form> </html>

9. Menggunakan Button

Pilihan ini digunakan apabila mendesain form yang melibatkan lebih dari dua tombol. Jangan lupa bahwa tombol-tombol yang saya jelaskan ini hanya akan aktif jika disimpan di server IIS telah diistall.

22 | P a g e

Ada beberapa tombol yang bisa dibuat dengan menggunakan perintah TYPE=BUTTON. Type ini umumnya digunakan bersamaan dengan program JavaScript atau VBScript dengan menggunakan perintah EVENT. Buatlah Tampilan berikut ini :

Jawab : <html> <h3>Menggunakan Type= BUtton</h3> <form method=post action="http://localhost/E:/SMAN3/WEB/tampil.ASP"> NAMA <input type=text Name=Nama1 size=30> <br> ALAMAT <input type=text Name=Nama2 size=40> <br> KOTA <input type=text Name=Nama3 size=40> <p> <input type=submit name=Button1 Value="Kirim"> <input type=reset name=button2 value="hapus"> <input type=Button name=button3 value="Cari"> </form> </html> 10. Membuat Password Dalam HTML pembuatan password tidak terlalu sulit karena tetap menggunakan BUTTON dan dikombinasikan dengan perintah VALUE. Buatlah tampilan berikut ini :

Jawab : <html> <h3>Ketikkan Password</h3> <form method=post action="http://localhost/E:/SMAN3/WEB/tampil.ASP"> Username <input type=text name=Nama1 Size=30> <br> Password <input type=Password name=Nama2 Size=8> <p> <input type=submit name=Button Value="Login"> </form> </html>

11. Text Area Digunakan untuk memasukan data dalam area yang lebih luas. Syntax : tag<textarea> ditutup dengan tag</textarea> Untuk jumlah baris dan kolom dapat diatur dengan menggunakan syntax: ROWS=n dan COLs=n

23 | P a g e

Contoh jika 5 baris dan 6 kolom maka ditulis Rows=5 Cols=6 Buatlah tampilan berikut ini :

Jawab : <html> <h3>Menggunakan Text area atau Memo</h3> <form method=post action=noactionyet> <textarea name=Memo Rows=10 Cols=50> Ketikkan Data Anda dikolom ini!! </textarea> </html>

1. Buatlah Data Siswa dengan tampilan sebagai berikut :

2. Buatlah agar tampilan diatas kelihatan semenarik mungkin

24 | P a g e

3. MODUL 7

BACKBROUND DAN MARQUEE

1. Background dengan Image Syntax : <BODY BACKGROUND=“NAMA_FILE.GIF”> Contoh : <html> <body background="file:///D:/sonic/bbb.jpg"> </html>

2. Background menggunakan warna Contoh : <html> <body text="blue"bgcolor="green"> <H1>SELAMAT DATANG</h1> </html>

25 | P a g e

3. Marquee Adl untuk menampilkan teks berjalan . Syntax: <Marquee>Teks</Marquee> 1. ARAH GERAKAN Untuk mengatur arah gerakan pada Marquee, teman-teman tinggal menambahkan kode direction="". Ada 4 arah gerakan pada Marquee, yaitu: direction="left" (untuk gerakan dari kiri ke kanan) direction="right" (untuk gerakan dari kanan ke kiri) direction="up" (untuk gerakan dari bawah ke atas) direction="down" (untuk gerakan dari atas ke bawah) contoh : <Marquee direction="left">Teks bergerak dari kiri ke kanan</Marquee> 2. PERILAKU GERAKAN Untuk mengatur perilaku gerakan pada Marquee, teman-teman tinggal menambahkan kode behavior="". Ada 3 perilaku gerakan Marquee, yaitu: behavior="scroll" behavior="alternate" behavior="slide“ Contoh : <Marquee behavior="scroll">Teks bergerak dari kanan ke kiri</Marquee> 3. KECEPATAN GERAKAN Kecepatan gerakan teks pada Marquee dinyatakan dalam piksel. Angka-angka yang didefinisikan atau ditetapkan dalam kode ini, jelas akan mempengaruhi kecepatan gerakan teks. Semakin besar angkanya, semakin cepat pula gerakan teks. Begitupun sebaliknya. Untuk mengatur kecepatan gerak pada Marquee, teman-teman tinggal menambahkan kode scrollamount="". Untuk membandingkan kecepatan gerak, maka saya akan membuat kode Marquee untuk angka 2 dan 6. Contoh : Contoh : Kode Marquee untuk angka 2 (scrollamout="2") adalah: <Marquee scrollamount="2">Keceptan gerak teks dengan scrollamout="2"</Marquee> Kode Marquee untuk angka 6 (scrollamout="6") adalah: <Marquee scrollamount="6">Kecepatan gerak teks dengan scrollamout="6"</Marquee> 4. JEDA ANTARA SETIAP GERAKAN Untuk mengatur jeda antara setiap gerakan pada Marquee, tinggal menambahkan kode scrolldelay="". Semakin tinggi nilainya, maka gerakan teks akan semakin lambat. Nilai terendah adalah 60. Apabila memilih nilai dibawah nilai 60, maka nilai tersebut akan diabaikan dan didefinisikan sebagai nilai 60, kecuali jika menambahkan kode truespeed="" dan di atur pada posisi "true" (truespeed="true"). Supaya tidak bingung, berikut contoh aplikasikan masing-masing kode Marquee. Berikut syntax : <Marquee scrolldelay="60">scrolldelay="60"</Marquee> <Marquee scrolldelay="100">scrolldelay="100"</Marquee> Contoh : <Marquee scrolldelay="40">scrolldelay="40", diabaikan dan didefinisikan dengan nilai 60</Marquee> <Marquee scrolldelay="40" truespeed="true">scrolldelay="40", dengan truespeed="true"</Marquee> 5. LEBAR GERAKAN Lebar default adalah lebar halaman blog tempat teman-teman meletakkan tulisan. Untuk mengatur lebar gerakan atau lintasan pada Marquee, teman-teman tinggal enambahkan kode width="". Untuk mengatur lebar gerakan pada Marquee, dapat dilakukan dengan 2 cara yaitu: Dengan Pixel (px) Dengan Prosentase (%) Dengan Pixel (px)

26 | P a g e

Misalnya kalian ingin menyesuaikan lebar lintasan Marquee dengan lebar diblog t, dimana lebar diblog kalian adalah 120px, maka kode marquee untuk lebar tersebut adalah: Contoh : <Marquee width="150">Teks bergerak selebar 150px</Marquee> Dengan Prosentase (%) Misalnya kalian hanya ingin tulisan bergerak selebar 50% dari lebar halaman blog tempat kalian meletakan tulisan, maka kode Marquee untuk lebar tersebut adalah: Contoh: <Marquee width="50%">Teks bergerak selebar 50%</Marquee> Jika teman-teman ingin menuliskan sebuah daftar atau blogroll, misalnya blog a, blog b, dan blog c, maka kode Marquee untuk format tersebut adalah: Contoh : <Marquee direction="up" height="75"><p>blog a</p><br><p>blog b</p><br><p>blog c</p></Marquee>

7. WARNA LATAR BELAKANG

Warna latar belakang default (standar) dari teks adalah warna latar belakang dimana teks diletakkan. Untuk mengatur atau mengubah warna latar belakang pada Marquee, kalian tinggal menambahkan kode bgcolor="". Misalnya kalian ingin mengubah warna latar belakang teks dengan warna merah, maka kode Marquee untuk warna tersebut adalah: <Marquee bgcolor="red">Latar belakang teks berwarna red</Marquee> Warna yang digunakan dalam dokumen HTML juga menggunakan nomor hexadecimal atau nama dari RGB. Misalnya untuk warna latar belakang merah seperti diatas, dengan menggunakan nomor hexadecimal, maka kode Marquee menjadi: <Marquee bgcolor="#ff0000">Latar belakang teks menggunakan nomor hexadecimal untuk red</Marquee>

27 | P a g e

MODUL8

MEMBUAT MENU Dalam membangun web site teknik pembuatan menu bisa bermacam-macam tergantung selera dan kemampuan masing-masing. Untuk mempermudah saat mengakses Menu sebaiknya dibuat dalam folder tersendiri.

1. Membuat Menu sederhana Buatlah Menu Utama dan beri nama menu. Contoh buatlah menu sebagai berikut : Menu Utama : Datakom Lintas BUana\ Submenu1 : Tentang Datakom Submenu2 : Redaksi Datakom Submenu3 : Buku Terbaru Submenu4 : Sudah Terbit Submenu5 : Divisi Marketing Submenu6 : Divisi Keuangan Jawab : <html> <H3> <div Align=center> <font color="red">DATAKOM LINTAS BUANA</H3> <font color="black"> <p>

<a href=pilih1.html>Tentang Datakom<br></a> <a href=pilih2.html>Redaksi Datakom<br></a> <a href=pilih3.html>Buku Terbaru<br></a> <a href=pilih4.html>Sudah Terbit<br></a> <a href=pilih5.html>Divisi Marketing<br></a> <a href=pilih6.html>Divisi Keuangan<br></a> </html>

2. Membuat Garis Horisontal Untuk memperindah tampilan dapat ditambahkan garis horisontal sebagai pemisah antara judul dengan teks dibawahnya. Sintaks : <HR> Contoh : <html> <body text="Blue" bgcolor="yellow"> <H3> <div Align=center> DATAKOM LINTAS BUANA</H3> <font color="black"> <p> <HR>

<p> <a href=menu1.html>Tentang Datakom<br></a> <a href=menu2.html>Redaksi Datakom<br></a> <a href=menu3.html>Buku Terbaru<br></a> <a href=menu4.html>Sudah Terbit<br></a> <a href=menu5.html>Divisi Marketing<br></a> <a href=menu6.html>Divisi Keuangan<br></a> </html>

Simpan dengan nama Menu.html

<html> <body text="black" bgcolor="yellow"> <H1> <marquee>SELAMAT DATANG</marquee></h1> <center> <HR> <h1> DATAKOM LINTAS JAKARTA</h1>

<hr> Datakom LIntas Buana adalah Penerbit Buku KOmputer Bermutu. <br> Buku yang diterbitkan oleh Datakom LIntas Buana sebagian besar adalah BestSeller. <br>

28 | P a g e

untuk itu perlu anda miliki untuk menambah wawasan anda, dan <br> tentu saja, untuk menambah koleksi perpustakaan Anda<br> Alamat : <p> Datakom Lintas Buana<br> Jalan Pemuda IV No. 20<br> Jakarta 13220<br> Telp.021-4765666<br> <HR> <p> <a href=Menu.html>Home<br></a> </center> </html>

29 | P a g e

Simpan dengan nama : Menu1.html Tugas : Mengacu pada contoh soal diatas buatlah tampilan web sbb hingga dapat dihubungkan dengan menu utama Dengan ketentuan Background berwarna biru dan Judul Berwarna Merah, sedang tulisan yang lain Hitam . Untuk tulisan Home berwarna Merah

3. Membuat Menu dengan Frame Contoh yang dipakai disini adalah Menu.Html <html> <Frameset Cols=25%,*> <Frame src=Menumodifikasi.html Name=F1> <Frame src=Menu1.html Name=F2> </frameset> </html> Simpan dengan nama Frame.html Buka kembali Menu.html dan modifikasi sbb dan Simpan dengan Nama Menumodifikasi.html: <html> <body text="Blue" bgcolor="yellow"> <H3> <div Align=center> DATAKOM LINTAS BUANA</H3> <font color="black"> <p> <a href=menu1.html target=F2>Buku Baru<br></a> <a href=menu2.html target=F2>Akan Terbit<br></a> <a href=menu3.html target=F2>Sudah Beredar<br></a> <a href=menu4.html target=F2>Distributor<br></a> <a href=menu5.html target=F2>Buku Terlaris<br></a> <a href=menu6.html target=F2>KOmputer Untuk Anak<br></a> </html> Tugas : Buatlah tampilan web sbb : (pendidikan terakhir : Doktor, Master, Sarjana, Diploma III, Diploma II, SLTA.) Dibawah alamat Datakom berilah tulisan berjalan “Penerbit Datakom Lintas Buana” Dan berilah background yang menarik.

30 | P a g e

Materi HTML

Documents

Transcript of Materi HTML