Modul Web 2023

......................BAB1 . STRUKTUR UTAMA HTML....................
<HTML>
<HEAD>
<TITTLE>......................</TITTLE>
</HEAD>
<BODY>......... </BODY>
</HTML>
Tag-tag di atas wajib ada dalam penulisan html
• Contoh :
<html>
<head>
<tittle>Judul halaman web saya </tittle>
</head>
<body> di sini saya akan mengetikan isi tentang web saya</body>
</html>
LATIHAN :
1. Jelaskan fungsi-fungsi masing – masing Tag ?
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
..................................................................................................................................................................
...................BAB 2. FORMAT HALAMAN DAN PARAGRAF.....................
2.1 Warna dan Background pada halaman
Pada semua halaman web ,kalian dapat membuat pendeklarasian warna latar belakang atau
background halaman .Pendeklarasian tersebut dapat disisipkan dalam tag body <BODY>,sehingga
Atribut tersebut akan mempengaruhi terhadap Halaman web yang telah di buat
<body atribut=”value”>...isi..</body>
Contoh :
Beberapa atribut yang di gunakan dalam tag body adalah :
Atribut Value keterangan

bgcolor Red,blue / #000000 Untuk menentukan warna background
background File gambar Membuat background gambar
text Red,blue / #000000 Warna pada text pada seluruh halaman
link Red,blue / #000000 Warna Hyperlink
vlink Red,blue / #000000 Warna link yang telah di kunjungi
alink Red,blue / #000000 Warna link yang aktif
Dll.
Struktur penulisan :
Atribut Contoh penulisan

bgcolor <body bgcolor=”green”>Halam ini akan berubah jadi hijau</body>
background <body background= “gambar/logo.gif”> disini terdapat background logo </body>

text <body text=”green”>hal web dgn text yg berwarna hijau</body>
link
vlink <body link=”green” vlink=”blue” alink=”red”>
alink
2.2 MEMFORMAT TEXT
Tag-tag yang di gunakan untuk melakukan pengaturan text :
Tag Keterangan Tag lain yang fungsinya sama

<B> Membuat huruf tebal (Bold) <EM>...</EM>
<I> Membuat huruf miring(italic) <STRONG>...</STRONG>
<U> Membuat huruf garis bawah (underline) <DEL>...</DEL>
<S> Membuat huruf di coret (strike) <INS>.....</INS>
<html>
<head>
<title>Format halaman text</title>
</head>
<body >
<B> Ini Huruf Tebal</B> <br>
<I>Ini Huruf Miring</I><br>
<U>Ini Huruf Bergaris Bawah</U><br>
<S>Ini Huruf Di Coret</S>
</body>
</html>
2.3 MEMBUAT TEXT MODEL KIMIA
Dengan menggunakan Tag HTML abda cukum menggunakan Tag <SUB> sebagai jenis efek
kimia dan <SUP> untuk efek perpangkatan pada matematika.
Tag Keterangan
<SUB> Membuat huruf menjorok ke bawah(Subscribe)
<SUP> Membuat huruf menjorok ke atas (Superscribe)
<HTML>
<HEAD>
<TITLE> Format Text Kimia & matematika</TITLE>
</HEAD>
<BODY >
Manusia hidup membutuhkan Air / H<SUB>2</SUB>O <br>
4 (empat) adalah hasi dari perpangkatan 2<SUP>2</SUP>
</BODY>
</HTML>
2.4 MENENTUKAN UKURAN HURUF DAN WARNA

Ukuran huruf sangat penting fungsinya dalam sebuah web ,karena kita tiadk mungkin membuat
sebuah halaman yang memiliki ukuran sama antara isi dengan judul halaman.HTML
menyediakan Tag <font..> yang di dalamnya kita dapat mendeklarasikan warna huruf dan
ukuran dengan menggunakan metode ini .
Atribut yang di gunakan di dalam Tag <FONT> :
Atribut value Keterangan

SIZE 5 Menentukan besar ukuran karakter/huruf
COLOR RED Menentukan warna ukuran karakter/huruf
FACE ARIAL Menentukan jenis font
Contoh :
<HTML>
<TITLE> Format Bentuk Text dan warna </TITLE>
</HEAD>
<BODY >
<FONT size="+5" face="Arial" color="RED">Bentuk Text arial berwarna merah</FONT>
</BODY>
</HTML>
2.5 BEMBERIKAN JARAK PADA BARIS TEXT

Secara standart ,apabila ingin melakukan pergantian baris kita menggunakan tag <br> tapi
bagai mana jika anda ingin membuat spasi yang lebih dari 2 spasi.Nah HTML sudah
menyediakan tag untu menangani ini yaitu menggunakan tag <pre>....</pre>
Penulisanya :
<pre width=” “>...text... </pre>
Contoh :
<PRE WIDTH="4">Bunafit Nugroho</PRE>
<PRE WIDTH="4">Indah Indriyana </PRE>
<PRE>Septi Suhesti</PRE>
Hasilnya :
2.6 MENEMPATKAN KALIMAT DI TENGAH
Untuk menengahkan sebuah karakter atau kalimat pada html kalian dapat menggunakan
tag<CENTER> di ikuti dengan kalimat atau karakter dan di ikuti penutup </CENTER>
Penulisan :
<center> kalimat/karakter </center>
Contoh :
<HTML>
<HEAD>
<TITLE> Format Text di tengah </TITLE>
</HEAD>
<BODY >
<center><h1>Text ini di tengah halaman</h1></center>
</BODY>
</HTML>
Hasil :
2.6 GANTI BARIS DAN PARAGRAF

Kita mengenal tag <br> untuk melakukan ganti baris dan <p> untuk ganti paragraph,pada tag
<br> akan memberikan efek ganti baris sebanyak 1 baris ,sedangkan <p> akan memberikan efek
pindah 2 baris selanjutnya.
Penulisanya :
<p>
Kalimat................<br>
Kalimat.................<br>
</p>
Contoh :
<HTML>
<HEAD>
<TITLE> Format ganti baris </TITLE>
</HEAD>
<BODY >
Pengakuan
<p>
Bunafit adalah seorang mahasiswa Teknik Informatika (TI) angkatan 2002 di STMIK AKAKOM
Jogjakarta <br>
<br>
Sebebarnya ia merupakan pindahan dari jurusan Teknik Komputer (TK) angkatan 2001
AKAKOM</p>
</BODY>
</HTML
Hasilnya :
2.7 MEMBUAT JUDUL /HEADING
Heading adalah salah satu metode yang ada pada HTML yang di gunakan untuk membuat judul
dalam paragraph .Dalam penggunaanya Heading dapat di bagi menjadi 6 <H1>-<H6>
<BODY >
<H1> Heading 1</H1>
<H2> Heading 2</H2>
<H3> Heading 3</H3>
<H4> Heading 4</H4>
<H5> Heading 5</H5>
<H6> Heading 6</H6>
</BODY>
Hasilnya :
2.7 MEMBUAT ANIMASI MARQUEE
Maquee adalah sebuah bentuk animasi text sederhana yang dapat di ciptakan oleh
HTML,Dengan menggunakan Marque kalian dapat menciptakan gerakan – gerakan text maupun
paragraph di dalam halaman web .
Penulisanya :
<marquee atribut=” ”>....teks....</maequee>
Atribut Value Keterangan

behavior alternate Text bergerak ke kanan/ke kiri
scroll Text bergerak terus menerus
slide Text Bergerak sekali
direction left Kiri
top Atas
down Bawah
right kanan
loop n Perulangan yang bernilai n
bgcolor color Untuk warna latar belakang
Contoh :
<HTML>
<HEAD>
<TITLE>Membuat Animasi Marquee</TITLE>
</HEAD>
<BODY>
<MARQUEE behavior="alternate" bgcolor="#0099FF" >ANIMASI

MARQUEE(ALTERNATE)</MARQUEE><br><br>
<MARQUEE behavior="scroll" bgcolor="#0099FF" direction="left">ANIMASI

MARQUEE(SCROLL)</MARQUEE><br><br>
<MARQUEE behavior="slide" bgcolor="#0099FF" >ANIMASI

MARQUEE(SLIDE)</MARQUEE><br><br>
</BODY>
</HTML>
Latihan 1
Buatlah kalimat pembuka dalam website dengan ketentuan :
• Judul menggunakan huruf besar di tengah

• Harus ada animasi tulisan bergerak
• Warna background menarik
• Kaliamat pembukaan diskripsi web apa yang kalian buat berikut keteranganya (2
paragraf)
• Tata letak yang rapi
Jika sudah tunjukan dan jelaskan hasil kerja kalian pada dosen pendamping.
TTD : NILAI :
.........................BAB.3 MEMBUAT DAFTAR(LIST).........................
List adalah sebuah metode menampilkan sekumpulan data dengan cara penomeran atau
dengan symbol.Berikut adalah beberapa daftar tag yang digunakan untuk pembuatan daftar/list
:
Tag Atribut Value Keterangan

<UL> TYPE SQUARE Bulat kotak
DISC Bulat titik
CIRCLE Bulat Lingkaran
<OL> TYPE I Huruf Besar Romawi
I Huruf Kecil Romawi
A Huruf Besar
a Huruf Kecil
<OL> START n Nilai awal penomeran
3.1 LIST MENGGUNAKAN SIMBOL (UL)
Untuk membuat list kita dapat menggunakan symbol "bullets" :
3.2 MENGHILANGKAN TANDA DAFTAR

Apabila anda ingin menghilangkan semua kode daftar/list yang ada maka tag yang di
gunakan adalah <DL> sebgai tag <UL>,dan <DD> sebagai pengganti tag <li>.Cobalah membuat
contoh halaman seperti script berikut :
<html>
<head>
<title>Membuat Nnone List</title>
</head>
<body>
Berikut ini adalah daftar jurusan yang ada di STMIK AKAKOM Jogjakarta ?
<DL>
<DD>Teknik Informatika (TI/S1)</DD>
<DD>Sistem Informasi (SI/S1)</DD>
<DD>Teknik Komputer (TK/D3)</DD>
<DD>Manajemen Informatika (MI/D3)</DD>
<DD>Komputerisasi Akutansi(KA/D3)</DD>
</DL>
</body>
</html>
Teknik penggunaan daftar dengan DD dan DL dapat di gantikan dengan menggunakan tag
<MENU>,dengan sintaks penulisanya adalah :
Format penulisanya sebagai berikut :
<MENU>
Daftar1<BR>
Daftar2<BR>
Daftar3<BR>
</MENU>
Contohnya penggunaanya sebagai berikut :
<HTML>
<HEAD>
<TITLE>Membuat List</TITLE>
</HEAD>
<BODY>
Berikut ini adalah daftar jurusan yang ada di STMIK AKAKOM Jogjakarta ?
<MENU>
Teknik Informatika (TI/S1)<BR>
Sistem Informasi (SI/S1)<BR>
Teknik Komputer (TK/D3)<BR>
Manajemen Informatika (MI/D3)<BR>
Komputerisasi Akutansi(KA/D3)<BR>
</MENU>
</BODY>
</HTML>
OUTPUT :
3.3 LIST MENGGUNAKAN SIMBOL (LI)

Untuk keperluan lain kita juga dapat membuat daftar dengan menggunakan metode
penomeran (1,2,3..n atau a,b,c..n)atau menggunakan huruf romawi
Fungsi yang di gunakan adalah :
<OL TYPE=A|a|I|i|1>
<LI>Daftar 1</LI>
<LI>Daftar 2</LI>
<LI>Daftar 3</LI>
</OL>
Contoh penggunaan :
<html>
<head>
<title>Membuat List</title>
</head>
<body>
Daftar Kelompok Study yang ada di STMIK AKAKOM Jogjakarta :
<OL type="A" >
<LI>Kelompok Study Linux (KSL)</LI>
<LI>Unix Network Club (UNC)</LI>
<LI>Linux Study Club (LSC)</LI>
</OL>
</body>
</html>
OUTPUT :
Atau apabila anda menginginkan angka urutan tidak di mulai dengan A.tetapi du mulai
dari D maka anda harus membuat atribut start bernilai 4 pada tag <OL> karena D termasuk
abjad ke 4,sehingga scriptnya menjadi :
<html>
<head>
</head>
<body>
Daftar Kelompok Study yang ada di STMIK AKAKOM Jogjakarta :
<OL type="A" start= “4” >
</OL>
</body>
</html>
OUTPUT :
3.4 MEMBUAT SUB DAFTAR DENGAN MENGGABUNGKAN <UL> DAN <OL>

Dengan menggunakan Tag <UL> dan <OL> ,HTML juga mengijinkan anda membuat
sebuah sub daftar.Maksud dari sub daftar adalah daftar di dalam daftar ,untuk lebih jelasnya
perhatikan contoh diberikut :
<HTML>
<HEAD>
<TITLE> Sub Daftar </TITLE>
</HEAD>
<BODY >
Jenis Prosesor yang Sering du gunakan :
<OL>
<LI>INTEL</LI>
<UL>
<LI>Pentium</LI>
<LI>Celeron</LI>
</UL>
<LI>AMD</LI>
<UL>
<LI>Atlon XP</LI>
<LI>Duron</LI>
<LI>Baltron</LI>
</UL>
</OL>
</BODY>
</HTML>
Output :
3.5 MEMBUAT LIST HEADER <LH>

List Header <LH> merupakan suatu cara dimana kita dapat menampilkan bentuk header
di dalam list,adapun cara penulisanya adalah :
<OL>
<LH>Header
<LI>Daftar1 </LI>
<LI>Daftar2 </LI>
</LH>
</OL>
Berikut contoh penggunaanya :
<html>
<head>
</head>
<body>
Daftar Kelompok Study AKAKOM:
<OL type="1" >
<LH><b>Linux Riseach </b>
</OL>
</body>
</html>
OUTPUT :
3.5 MEMBUAT DAFTAR DENGAN ICON GAMBAR

Untuk membuat daftar dengan symbol yang di buat sendiri atau berupa gambar .Kita
dapat menggunakan metode yang dilakukan saat membuat daftar tanpa symbol,yaitu
menggunakan TD dan DD .Dan setelah meletakkan komponen daftar kita dapat melakukan
pemanggilan gambar yang berupa symbol.Sebagai contohlihatlah script berikut :
<html>
<head>
</head>
<body>
Daftar makanan jenis gorengan:
<DL>
<DD> <IMG src="../gambar/bundar.gif">Bakwan
<DD> <IMG src="../gambar/bundar.gif">Tahu Susor /Tahu Isi</DD>
<DD> <IMG src="../gambar/bundar.gif">Pisang Goreng</DD>
<DD> <IMG src="../gambar/bundar.gif">Tempe Goreng</DD>
<DD> <IMG src="../gambar/bundar.gif">Combro</DD>

</DL>
</body>
</html>
LATIHAN :
Buatlah soal pilihan ganda minimal 3 soal tentang bab 2,jika sudah tunjukan hasilnya pada dosen
pendamping dan tulislah jawabanya di bawah :
TTD : NILAI :
.........................BAB.4 MEMBUAT TABEL.........................
Tabel adalah komponen paling utama dalam membuat website, Pada saat pembuatan sebuah
web ,table dijadikan sebagai media yang berfungsi sebagai kerangka untuk meletakan komponen-
komponen isi web .Sehingga kalian tidak dapat meninggalkan penggunaan table dalam sebuah web
design web. Contoh sebagai berikut :
Pada halaman web di atas dapat dilihat bahwa terdapat beberapa komponen yang hampir
setiap komponenya adsalah table. Berikut adalah strukturnya :
HEADER/JUDUL
MENU KIRI ISI/CONTENT MENU KANAN

4.1 PEMBUATAN TABEL
Untuk Dapat membuat table anda dapat menggunakan Tag HTML yang di mulai dengan
Tag<TABLE> dan di akhiri dengan Tag</TABLE>,yang kemudian diikuti dengan <TR>dan<TD>.
• <TABLE> :Adalah Tag yang menerangkan kepada browser bahwa itu adalah sebuah
table,Tag <TABLE> dapat diikuti dengan beberapa attribute seperti lebar maupun warna
background.
• <TR> : Tabel row (TR) tag yang di gunakan untuk membuat baris dalam table
• <TD> : Tabel Data (TD) adalah tag yang berguna untuk meletakkan data yang ingin kita
isikan dalam table,TD dapat juga kita artikan sebagai kolom ,jadi kita dapat membuat
beberapa kolom dalam sebuah baris table.
• Border : Atribut ini di gunakan untuk menentukan tebal garis pada tabel anda.
<HTML>
<HEAD>
<TITLE>Belajar Tabel</TITLE>
</HEAD>
<BODY>
<TABLE border=1>
<TR>
<TD>Ini Table pertama</TD>
<BODY>
</TR>
</TABLE>
</BODY>
</HTML>
Skript di atas akan menghasilkan tabel dengan baris berjumlah satu (1) dan colom = 1
serta lebar border =1 .
Output :
4.2 TABEL BEBERAPA KOLOM
Untuk dapat membuat dengan dua kolom ,berarti Anda harus menambahkan <TD> di
antara <TR>.Jadi ,jumlah <TD> akan mempengaruhi jumlah kolom tabel.Sekarang cobalah untuk
membuat tabel dengan jumlah baris = 1 dan kolom =3.
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border=1>
<TR>
<TD>Colom 1</TD>
<TD>Colom 2</TD>
<TD>Colom 3</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Gambarkan Hasilnya :
4.2 TABEL BEBERAPA BARIS
Berikut adalah contoh pembuatan tabel dengan menggunakan kolom = 3 dan baris=2 ,
untuk dapat membuat tabel tersebut anda harus menambahkan <TR></TR> setelah <TR></TR>
yang pertama, yang berarti anda harus mendefinisikan jumlah kolom yang disesuaikan pada
baris di atasnya .Sebagai contoh buatlah dokumen HTML di bawah ini :
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border=1>
<TR>
<TD>Colom 1</TD>
<TD>Colom 2</TD>
<TD>Colom 3</TD>
</TR>
<TR>
<TD>cel</TD>
<TD>cel</TD>
<TD>cel</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Gambarkan Hasilnya :
4.3 PENGATURAN TABEL

Dengan menggunakan beberapa atribut ,anda dapat melakukan pengaturan bentuk
tabel maupun posisi serta data.Berikut adalah beberapa atribut dalam tabel :
A. ATRIBUT PADA TABLE
Atribut Keterangan
Align Digunakan untuk membuat rata kiri,kanan,tengah maupun rata kiri kanan
(align dapat benilai left,right,center atau justify
Border Border di gunakan mengatur ketebalan garis pembatas
Width Digunakan untuk menentukan lebar table ,anda dapat menentukan lebar
dengan nilai (%)
Height Digunakan untuk menentukan tinggi table ,anda dapat menentukan tinggi
dengan nilai (%)
Cellspacing Di gunakan untuk menyatakan jarak (spasi) antar sel satu dengan lainya
serta antar sel dengan pembatas
cellpading Menyatakan spasi antara isi sel dengan batas sel(border)
Bgcolor Menunjukan warna background untuk semua cell pada tabel
Bordercolor Untuk membuat warna pada garis/border
B. ATRIBUT PADA TAG <TR>...</TR>
Atribut Keterangan
Align Digunakan untuk membuat rata kiri,kanan,tengah maupun rata kiri kanan
(align dapat benilai left,right,center atau justify
valign Di gunakan untuk melakukan perataan yang bersifar horizontal,valign
menggunakan nilai top (atas halaman),bottom(bawah) atau
baseline(standart)
bgcolor Menunjukan warna background pada baris(row)
Untuk lebih jelasnya cobalah latihan-latihan di bawah ini :
LATIHAN 1
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border="1" height="100%" width="40%">
<TR>
<TD>”Bagaimana hasilnya"</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Gambar lah hasilnya dan analisalah :
LATIHAN 2
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border="1" align="center">
<TR>
<TD>Selamat datang </TD>
</TR>
</TABLE>
</BODY>
</HTML>

LATIHAN 3
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border="10" >
<TR>
<TD>CENTRANET</TD>
</TR>
</TABLE>
</BODY>
</HTML>
LATIHAN 4
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border="1" cellpadding="15" cellspacing="15" >
<TR>
<TD>CENTRANET Bekerja sama sengan ANDI OFFSET</TD>
<TD>CENTRANET Merupakan Web Developer</TD>
</TR>
<TR>
<TD>ANDI OFFSET Merupakan Penerbit buku di Jogjakarta</TD>
<TD>CENTRANET</TD>
</TR>
</TABLE>
</BODY>
</HTML>
LATIHAN 5
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border="1" BORDERCOLOR="RED">
<TR>
<TD BGCOLOR="YELLOW">CENTRANET Bekerja sama sengan ANDI
OFFSET</TD>
<TD BGCOLOR="GREEN">CENTRANET Merupakan Web Developer</TD>
</TR>
<TR>
<TD BGCOLOR="#00CCFF">ANDI OFFSET Merupakan Penerbit buku di
Jogjakarta</TD>
<TD BGCOLOR="#CCCCFF">CENTRANET</TD>
</TR>
</TABLE>
</BODY>
</HTML>
4.4 MERGE CELL
Merge artinya adalah menggabungkan ,pada tabel Merge Cell berarti menggabungkan
antar cell atau dapat di artikan dengan menggabungkan antara baris dengan baris ataupun
baris dengan kolom.
• Rowspan : Digunakan untuk menggabungkan baris ,jika kita akan menggabubgkan 3

baris maka rowspan beri nilai 3,dan begitu seterusnya.
• Colspan : Digunakan untuk menggabungkan kolom ,jika kita akan menggabungkan 4
kolom maka colspan beri nilai 4,dan begitu seterusnya.
4.4.1 Menggabungkan beberapa kolom
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border="1">
<TR>
<TD COLSPAN="2">Colom yang di gabungkan</TD>
</TR>
<TR>
<TD >Colom 1, Baris 2</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Outputnya :
4.4.2 Menggabungkan beberapa baris
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE border="1">
<TR>
<TD ROWSPAN="2">Baris yang di gabungkan</TD>
<TD>Colom 2 , Baris 1</TD>
</TR>
<TR>
</TR>
</TABLE>
</BODY>
</HTML>
OUTPUTNYA :
4.4.3 Menggabungkan baris dan kolom
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1">
<TR>
<TD ROWSPAN=2>Daftar</TD>
<TD COLSPAN=2>Nama Teman</TD>
</TR>
<TR>
<TD>Arief NS</TD>
<TD>Didik K</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Gambarkan hasilnya dan analisalah :
4.4.4 Menggabungkan baris dan kolom
<HTML>
<HEAD>
</HEAD>
<BODY>
<TABLE BORDER="1" WIDTH="60%" HEIGHT="60%" >
<TR>
<TD ALIGN="CENTER">
<TABLE BORDER="2">
<TR>
<TD>Ini tabel di dalam tabel </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
TTD : NILAI :
...............BAB.5 MENGGUNAKAN FORMULIR(FORM)................
Form adalah sebuah metode yang di gunakan dalam website yang mengizinkan seorang
pengunjung untuk berinteraksi dengan server ataupun dengan pengelolaan website
tersebut.Secara standart untuk dapat membuat form kita hanya menggunakan start tag
<FORM> dan di akhiri end tag </FORM>
<Form action = “ ....” method=”.....” name=”....”>
<input>
<input>
...................
</form>
Keterangan :
• <Form> : digunakan mendeklarasikan awalan/start tag sebuah form

• <input> : di gunakan untuk memasukan komponen-komponen formulir
• </form> : adalah tag yang menandakan bahwa form telah beakhir/end tag
• Action : atribut action di gunakan untuk menentukan alamat dimana data dari
komponen form akan di kirimkan.
• Method : atribut ini di gunakan untuk membedakan metode pengiriman data
Atribut Method Keterangan
GET akan ditampilkan pada url,pengiriman data ke dalam halaman lain yang
tidak berhubungan dengan halaman selanjutnya
POST variabel yang dikirimkan tidak akan ditampilkan ke url,melakukan

pengiriman data pada halaman lain yang selanjutnya dapat dip roses
menuju halaman berikutnya ataupun melakukan pengiriman ke dalam
database.
• Name : Digunakan untuk member nama variable pada formulir yang kita buat
Cara pebuatanya :
1. Buatlah tag form

2. Buat tag table (posisi center )
3. Judul (FORM PENDAFTARAN PELATIAHN WEB PROGRAMMING)
4. Membuat komponen –komponen formnya seperti berikut
<center><font face="verdana" color="blue"

size="4"><b>Form Pendaftaran Pelatihan Web
Coba lengkapi script berikut : Programming</b></font></center>
<html>
<head></head> <center>
<title>form</title> <form method="post" action="insert.php">
<body> <table border="0" width="75%">

<td><…………………. name="var_agama">
<tr> <option value="">[P i l i h]</option>
<td>NPM</td> <option value="Islam">Islam</option>
<td><input type="text" name="var_npm" ……………………………………………………………………….

size="22"/></td>
<option value="Protestan">Protestan</option>
</tr>
<option value="Hindu">Hindu</option>
<tr>
<option value="Budha">Budha</option>
<td>Nama</td>
<option value="Lainnya">Lainnya</option>
<td><input type="text" name="var_nama"
size="22"/></td> …………………………
</tr> </td>
<tr> </tr>
<td>Password</td> <tr>
<td>Hobi</td>
<td><input type=”……………………….”
name="var_password" size="22"/></td> <td><input type="…………………….."
</tr> name="var_musik" value="Musik" />Musik
<tr> <input type="checkbox" name="var_baca"

value="Membaca"/>Membaca
<td>Jenis Kelamin</td>
<input type="checkbox" name="var_komputer"
<td><input type=”……………………” value="Komputer"/>Komputer
name="var_jk" value="Laki-laki" checked/>Laki-
laki </tr>
<input type="radio" name="var_jk" <tr>

value="Perempuan"/>Perempuan <td valign="top">Kritik dan Saran</td>
</td> <td><…………………………… wrap="OFF"
</tr> rows="5" cols="20"
name="var_saran"></textarea></td>
<tr>
</tr>
<td>Agama</td>
<tr>
<td align="center"></td> <input type="……………………." name="reset"
value="reset"/>
<td align="center">
</td>
<input type="………………….." name="submit"
value="Submit"/> </tr>
</table></…………………> </body> </html>

..........................BAB.6 GAMBAR……….....................
6.1 FORMAT GAMBAR
Dalam pembuatan website ,format gambar yang sering digunakan adalah GIF,JPEG,JPG
atau BMP,pemanggilan gambar :
<IMG SRC = “file” WIDTH =”value” HEIGHT=”value” alt=”Text”>
Atribut Keterangan
SCR Digunakan untuk pemanggilan gambar,dalam sintaks tersebut,Anda harus
mengisikan nama file gambar yang akan digunakan untuk di tampilkan pada
halaman web
WIDTH Pengaturan lebar (%)
HEIGHT Pengaturan tinggi (%)
ALT Sedangkan alt berguna untuk memberikan pesan pada saat mouse melewati area
gambar
<IMG SRC = “file” WIDTH =”value” HEIGHT=”value” alt=”Text” border=”value” align=”left |

right|center>
Contoh 1 :
<HTML>
<HEAD>
<TITLE>Belajar format gambar</TITLE>
</HEAD>
<BODY>
<IMG SRC="../gambar/linux.jpg" height="80%" width="20%" alt="Ini gambar
Linux" border="5" align="right">
</BODY>
</HTML>
Outputnya :
Contoh 2 :
<HTML>
<HEAD>
<TITLE>Ambil gambar</TITLE>
</HEAD>
<BODY>
<TABLE border="1">
<TR>
<TD> <img src="../gambar/rose.gif" width="121" height="87">
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
OUTPUTNYA :
Bandingkan kedua contoh di atas dan beri analisa kalian :

Modul Web 2023

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Modul Web 2023

Diunggah oleh

Hak Cipta:

Format Tersedia

......................BAB1 . STRUKTUR UTAMA HTML....................

Tag-tag di atas wajib ada dalam penulisan html

1. Jelaskan fungsi-fungsi masing – masing Tag ?

Beberapa atribut yang di gunakan dalam tag body adalah :

Atribut Value keterangan

Atribut Contoh penulisan

background <body background= “gambar/logo.gif”> disini terdapat background logo </body>

Tag Keterangan Tag lain yang fungsinya sama

<title>Format halaman text</title>

<B> Ini Huruf Tebal</B> <br>

<I>Ini Huruf Miring</I><br>

<U>Ini Huruf Bergaris Bawah</U><br>

<S>Ini Huruf Di Coret</S>

<TITLE> Format Text Kimia & matematika</TITLE>

Manusia hidup membutuhkan Air / H<SUB>2</SUB>O <br>

4 (empat) adalah hasi dari perpangkatan 2<SUP>2</SUP>

2.4 MENENTUKAN UKURAN HURUF DAN WARNA

Atribut yang di gunakan di dalam Tag <FONT> :

Atribut value Keterangan

<FONT size="+5" face="Arial" color="RED">Bentuk Text arial berwarna merah</FONT>

2.5 BEMBERIKAN JARAK PADA BARIS TEXT

<pre width=” “>...text... </pre>

<PRE WIDTH="4">Bunafit Nugroho</PRE>

<PRE WIDTH="4">Indah Indriyana </PRE>

<center> kalimat/karakter </center>

<TITLE> Format Text di tengah </TITLE>

<center><h1>Text ini di tengah halaman</h1></center>

2.6 GANTI BARIS DAN PARAGRAF

<TITLE> Format ganti baris </TITLE>

<H1> Heading 1</H1>

<H2> Heading 2</H2>

<H3> Heading 3</H3>

<H4> Heading 4</H4>

<H5> Heading 5</H5>

<H6> Heading 6</H6>

<marquee atribut=” ”>....teks....</maequee>

Atribut Value Keterangan

<TITLE>Membuat Animasi Marquee</TITLE>

<MARQUEE behavior="alternate" bgcolor="#0099FF" >ANIMASI

<MARQUEE behavior="scroll" bgcolor="#0099FF" direction="left">ANIMASI

<MARQUEE behavior="slide" bgcolor="#0099FF" >ANIMASI

Buatlah kalimat pembuka dalam website dengan ketentuan :

• Judul menggunakan huruf besar di tengah

Tag Atribut Value Keterangan

3.1 LIST MENGGUNAKAN SIMBOL (UL)

Untuk membuat list kita dapat menggunakan symbol "bullets" :

3.2 MENGHILANGKAN TANDA DAFTAR

Format penulisanya sebagai berikut :

3.3 LIST MENGGUNAKAN SIMBOL (LI)

Fungsi yang di gunakan adalah :

Daftar Kelompok Study yang ada di STMIK AKAKOM Jogjakarta :

<OL type="A" >

<LI>Kelompok Study Linux (KSL)</LI>

<LI>Unix Network Club (UNC)</LI>

<LI>Linux Study Club (LSC)</LI>

Daftar Kelompok Study yang ada di STMIK AKAKOM Jogjakarta :

<OL type="A" start= “4” >

<LI>Kelompok Study Linux (KSL)</LI>

<LI>Unix Network Club (UNC)</LI>

<LI>Linux Study Club (LSC)</LI>

3.4 MEMBUAT SUB DAFTAR DENGAN MENGGABUNGKAN <UL> DAN <OL>

3.5 MEMBUAT LIST HEADER <LH>

Berikut contoh penggunaanya :