MODUL TIK
KELAS XII Semester 2
Penyusun :
Rismira Andriyani, S.Kom
SMA N3 Magelang
MODUL 1
BASIC HTML
• 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 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.
3|Page
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
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.
MODUL 2
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
Tugas 1 :
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|Page
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
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|Page
STYLE DOKUMEN
1. Mengatur Style Font
Dalam menulis style font harus diawali dengan <Nama_Tag> dan ditutup dengan </Nama_Tag>
No Style Kegunaan
Contoh:
<Html> </Head>
</Title> <Body>
9|Page
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> <li> Melangkah dengan Windows Me
<Head> <li> Satu Hari Bersama Windows Xp
<Title> </UL>
Datakom Lintas Buana <P>
</Title> <B>
</Head> Seri Microsoft Office
<Body> </B>
<H3>Datakom Lintas Buana</H3> <OL>
<B> <LI> Microsoft Word 2003
Seri Operasi System <LI> Microsoft Excel 2003
</B> <LI> Microsoft Power Point 2003
<UL> <LI> Microsoft Access 2003
<LI> MIcrosoft Windows 2000 Profesional </OL>
<LI> Microsoft WIndows 2000 Server </Body>
<li> instalasi dan KOnfigurasi Windows 2000 </html>
Server
Warna Biru
11 | 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> <td> Kolom Ketiga
<Head> </tr>
<Title> <tr>
Sonic Production <td> SATU
</Title> <td> DUA
</Head> <td> TIGA
<body> </tr>
<tabel> </table border>
<table border> <tabel>
<tr> </body>
<td> Kolom Pertama </html>
<td> Kolom Kedua
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>
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> <Table Border=1 width=75% Align=center>
<Head> <TR>
<Title> <TH>NO
Datacom Lintas bUana <TH>NAMA
</Title> <TH>FAKULTAS
</head> <TH><div align=right>JURUSAN</div>
<body> <TH>ALAMAT
<caption> <div align = Center><B>DAFTAR </TR>
MAHASISWA UMBO</caption></B></div> <TR>
<table> <TD>1.
13 | 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> <td>1-1-1976
<table BGcolor=yellow> <td>Cibinong
<tr BGcolor=blue> </tr>
<td>No <tr Bgcolor=cyan>
<td>Nama <td>3
<td>Tempat Lahir <td>Luly
<td>Tanggal Lahir <td>Cibadak
<td>Alamat <td>1-10-1978
</tr> <td>Cibadak Sukabumi
<tr bgcolor=orangea> </tr>
<td>1 <tr bgcolor=Magenta>
<td>Tuntang <td>4
<td>Sukabumi <td>Dwi cahyono
<td>6-6-1962 <td>Cibaduyut
<td>Cibinong <td>9-9-1989
</tr> <td>Jakarta Selatan
<tr bgcolor=red> </tr>
<td>2 </Table>
<td>Ganjar PJ </html>
<td>Jampang kulon
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> <Img src="alqur'an.GIF">
<Table Border=1> </TR>
<TR> <TR>
<TD>NO <TD Valign=Top>02
<TD>NAMA <TD Valign=Top>bumbum
<TD>ALAMAT <td Valign=Top>Sanden, Magelang
<TD>GAMBAR <td valign=top>
</TR> <Img src="laptop.jpg">
<TR> </tr>
<TD Valign=TOP>01 </Table>
<TD VALIGN=TOP>NANA </Html>
<TD VALIGN=TOP>MAGELANG
<TD VALIGN=TOP>
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> saya tulis.
<Table Border=2> Dalam waktu dekat buku Microsoft Office Xp
<H2><Font size=+3>Menggunakan Teks dan akan terbit. Di
Gambar<BR></H2> samping itu juga akan terbit buku Share Point
<image src="allah.gif" Align=Left Vspace=10> Team Service yang
<hspace=10><Font size=-1> saya tulis.Dalam waktu dekat buku Microsoft
Dalam waktu dekat buku Microsoft Office Xp Office Xp akan terbit. Di
akan terbit. Di samping itu juga akan terbit buku Share Point
samping itu juga akan terbit buku Share Point Team Service yang
Team Service yang
17 | P a g e
saya tulis.Dalam waktu dekat buku Microsoft samping itu juga akan terbit buku Share Point
Office Xp akan terbit. Di Team Service yang
samping itu juga akan terbit buku Share Point saya tulis.
Team Service yang </table>
saya tulis.Dalam waktu dekat buku Microsoft </html>
Office Xp akan terbit. Di
MODUL 6
Jawab :
<html> <td>ALAMAT
<form> <input Type="text" name="nama" size=30>
<tr> </tr>
<H3>MENGENAL KOMPONEN FORM</h3> <tr>
<BR> <br>
</TR> <td>KETERANGAN
<TR> <input Type="text" name="nama" size=40>
<td>NAMA </tr>
<input type="text" name="nama"size=20"> <tr>
</tr> <br>
<tr> </form>
<br> <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
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.
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>
Jawab :
<html> <Option>Kucar Kacir Bogor
<h3>Menggunakan Select and option</h3> <Option>Angin Ribut Sukabumi
<h4>Buku ini diterbitkan oleh </h4> <Option>Maju Mundur Cianjur
<br> <Option>Maju Trus Bandung
<select name="PENERBIT"> <Option>Mundur Bae Cianjur
<Option>Fajar Corporation Jakarta </select>
<Option Selected>Datakom Lintas Buana Jakarta </html>
Jawab :
<html> <option>Salam Kangen
<h3>Menggunakan Select, option Select dan <Option Selected>Datakom Lintas Buana Jakarta
Size=n</h3> <Option>Kucar Kacir Bogor
Buku ini diterbitkan oleh <Option>Angin Ribut Sukabumi
<p> <Option>Maju Mundur Cianjur
<select name="PENERBIT" Size=7> <Option>Maju Trus Bandung
<Option>Fajar Corporation Jakarta <Option>Mundur Bae Cianjur
<option>Hayat Raharja </select>
<option>Luly lala </html>
<option>Mahardika
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> <br>
<h3>Menggunakan Tombol Submid dan KOTA
Reset</h3> <input type=text Name=Nama3 size=40>
<form method=post action="tampil.asp"> <p>
NAMA <input type=submit name=Button1
<input type=text Name=Nama1 size=30> Value="Kirim">
<br> <input type=reset name=button2 value="hapus">
ALAMAT </form>
<input type=text Name=Nama2 size=40> </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>
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>
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>
3. MODUL 7
BACKBROUND DAN MARQUEE
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>
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 (%)
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>
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>
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> <a href=pilih1.html>Tentang Datakom<br></a>
<H3> <a href=pilih2.html>Redaksi Datakom<br></a>
<div Align=center> <a href=pilih3.html>Buku Terbaru<br></a>
<font color="red">DATAKOM LINTAS <a href=pilih4.html>Sudah Terbit<br></a>
BUANA</H3> <a href=pilih5.html>Divisi Marketing<br></a>
<font color="black"> <a href=pilih6.html>Divisi Keuangan<br></a>
<p> </html>
<html> <hr>
<body text="black" bgcolor="yellow"> Datakom LIntas Buana adalah Penerbit Buku
<H1> KOmputer Bermutu.
<marquee>SELAMAT <br>
DATANG</marquee></h1> Buku yang diterbitkan oleh Datakom LIntas
<center> Buana
<HR> sebagian besar adalah BestSeller.
<h1> <br>
DATAKOM LINTAS JAKARTA</h1>
28 | P a g e
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
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