Materi HTML

1|Page
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|Page
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.
3|Page
 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
4|Page
4. Pilih nama file, mis Latihan.HTML

5. Klik tombol Open
6. Klik Ok
5|Page
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|Page
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
<Html> <H2>Video Sothing</H2>

<Title> <H3>Photo Digital</H3>
Sonic Production "Production House" <H4>Percetakan</H4>
</Title> <H5>Rias Pengantin</H5>
</Head> <H6>Transfer DVD/VCD</H6>
<Body> </Body>
<H1>Company Profile</H1> </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|Page
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> </Head>
</Title> <Body>
9|Page
<B> Ini menyerupai huruf courier

Ini Menggunakan Huruf TEbal</B> </Code>
<P> <P>
<I> <EM>
Ini Menggunakan HUruf miring</I> Ini menyerupai huruf italic
<P> </EM>
<U> <P>
Ini Menggunakan huruf digaris bawahi <TT>
</U> Ini adalah Teletype write
<P> </TT>
<Strong> <SAMP>
Ini seperti huruf tebal Ini Menyepupai kode
</Strong> </Samp>
<P> </Body>
<Code> </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> <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
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> <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>
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> <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
<TD>Pandu Setya Nugraha <td>Biologi

<td>MIPA <td>Sukabumi,Jampangkulon
<td>Ilmu KOmputer </tr>
<td>KOmplek LIPI Cibinong </table>
</tr> </body>
<tr> </html>
<td>2.
<td>Terra Surya KIP
<td>FKIP
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> <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
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> <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
<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.
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
21 | P a g e
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>
6. Scroll Up dan Down

Buatlah tampilan spt disamping berikut ini :
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
<br>
KOTA
<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.
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

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> <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>
2. Membuat Garis Horisontal

Untuk memperindah tampilan dapat ditambahkan garis horisontal sebagai pemisah antara judul dengan
teks dibawahnya.
Sintaks : <HR>
Contoh :
<html> <p>
<body text="Blue" bgcolor="yellow"> <a href=menu1.html>Tentang Datakom<br></a>
<H3> <a href=menu2.html>Redaksi Datakom<br></a>
<div Align=center> <a href=menu3.html>Buku Terbaru<br></a>
DATAKOM LINTAS BUANA</H3> <a href=menu4.html>Sudah Terbit<br></a>
<font color="black"> <a href=menu5.html>Divisi Marketing<br></a>
<p> <a href=menu6.html>Divisi Keuangan<br></a>
<HR> </html>
Simpan dengan nama Menu.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
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

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Materi HTML

Загружено:

Авторское право:

Доступные форматы

1|Page

PEMBUATAN DeSIGN WEB

DINAS PENDIDIKAN KOTA MAGELANG

Standar Kompetensi : Mengoperasikan Software Pemograman Internet Berbasis Web

HTML(Hypertext Markup Languange)

URL (Universal Resource Locator)

 Bagian kedua www.datakom.com → menunjukkan lokasi mesin di internet

Membuat Dokumen HTML

2. Mulai Membuat Dokumen

5. Menjalankan Dokumen HTML

4. Pilih nama file, mis Latihan.HTML

MEMBUAT HEAD, TITLE DAN BODY

1. Mengenal Head dan Title

Komponen body bisa dikombinasikan dengan komponen lainnya, contoh :

Buatlah Web sederhana dengan Tampilan sebagai berikut !!!!

<Html> <H2>Video Sothing</H2>

Penulisan komponen paragraf dalam dokumen HTML disingkat <p>

1. <B> Huruf Tebal (bold)

<B> Ini menyerupai huruf courier

Hasil dari program diatas :

Simpan dengan nama tugas2-nama-no.absen

3. Caption (Judul table)

<TD>Pandu Setya Nugraha <td>Biologi

1. Buatlah Curriculum Vitae

HYPERLINK ATAU TAUTAN

<input type="radio" name="Agama" Value="I">Islam<br>

Buatlah tampilan berikut ini :

<Input Type=checkbox name=Jawab4 Value="MMOUS">MMOUS

5. Select dan Option

6. Scroll Up dan Down

10. Membuat Password

11. Text Area

Contoh jika 5 baris dan 6 kolom maka ditulis Rows=5 Cols=6

1. Buatlah Data Siswa dengan tampilan sebagai berikut :

2. Buatlah agar tampilan diatas kelihatan semenarik mungkin

1. Background dengan Image

2. Background menggunakan warna

4. JEDA ANTARA SETIAP GERAKAN

Dengan Pixel (px)

Dengan Prosentase (%)

7. WARNA LATAR BELAKANG

2. Membuat Garis Horisontal

Simpan dengan nama Menu.html

untuk itu perlu anda miliki untuk menambah

Simpan dengan nama : Menu1.html

3. Membuat Menu dengan Frame

Вам также может понравиться