MAKALAH

PEMROGRAMAN WEB DAN PERANGKAT

BERGERAK

DISUSUN OLEH: XI RPL 6

NAMA : 1. GABRIEL
2.SYIFA DWI
3.SYARIFAH

SMK SWASTA TELADAN TANAH JAWA

TP.2023/2024
 DAFTAR ISI

DAFTAR ISI.................................................................................................................... 2
KATA PENGANTAR ..................................................................................................... 3
BAB 1 .............................................................................................................................. 4
PENDAHULUAN ........................................................................................................... 4
A. Latar Belakang ...................................................................................................... 4
B. Rumusan Masalah.................................................................................................... 4
C. Tujuan Makalah ....................................................................................................... 4
D. Kegunaan Makalah .................................................................................................. 4
E. Prosedur Makalah .................................................................................................... 4
BAB 2 .............................................................................................................................. 5
PEMBAHASAN .............................................................................................................. 5
1. HTML ................................................................................................................... 5
2. Pengaturan Halaman Web dan Teks ..................................................................... 7
4. Hypertext Link .................................................................................................... 17
5. Menyisipkan Gambar/Images ............................................................................. 19
BAB 3 ............................................................................................................................ 23
PENUTUP...................................................................................................................... 23
A.Kesimpulan............................................................................................................. 23
B. Saran ..................................................................................................................... 23

2
 KATA PENGANTAR
Puji syukur penulis panjatkan kehadirat Allah SWT yang telah memberikan rahmat serta
karunia-Nya kepada kami sehingga kami berhasil menyelesaikan Makalah ini yang
alhamdulillah tepat pada waktunya yang berjudul Pemrograman Web Bergerak.
Tujuan penulisan makalah ini adalah untuk memenuhi salah satu tugas mata pelajaran
kompetensi kejuruan.
Makalah ini berisikan tentang informasi Pengertian HTML.Diharapkan Makalah inidapat
memberikan informasi kepada kita semua.
Penulis menyadari bahwa Makalah ini masih jauh dari sempurna, oleh karena itu kritik
dan saran dari semua pihak yang bersifat membangun selalu kami harapkan demi
kesempurnaan Makalah ini.
Akhir kata, kami sampaikan terima kasih kepada semua pihak yang telah berperan serta
dalam penyusunan Makalah ini dari awal sampai akhir. Semoga Allah SWT senantiasa
meridhai segala usaha kita. Amiin.

Tanah Jawa, 6 November 2023

3
 BAB 1
PENDAHULUAN

A. Latar Belakang
Web merupakan media untuk menanpilkan halaman. Web terbagi menjadi dua yaitu web
statis dan web dinamis. Web statis adalah media untuk menampilkan halaman statis atau
tetap, tetapi yang mengatur nya adalah web browser. Contoh teknologi yang berkaitan
dengan web statis adalah Client Side seperti HTML, Java script.
Dibuat nya makalah ini adalah untuk mempermudah dalam pembelajaran, maksudnya
walaupun kita tidak begitu mrngerti terhadap pembahasan tetapi kita sudah mengenal dan
mngetahui nya. Hal ini telah memudahkan bagi pelajar yang mempelajari tentang bab ini
karena sudah dikelompokkan sesuai dengan bahasannya. Tetapi disamping itu kita haru
rajin berlatih terus mencoba membuat web, baik yang statis ataupun dinamis. Berdasarkan
kenyataan diatas penyusun tertarik untuk membuat makalah yang berjudul HTML dan Java
Script.

B. Rumusan Masalah
1) Apa saja yang mendasari HTML?
2) Bagaimana struktur HTML?
3) Atribut-atribut apa saja saat kita ingin membuat sebuah web?

C. Tujuan Makalah
Makalah ini disusun dengan tujuan untuk mengetahui dan mendeskripsikan tentang HTML.

D. Kegunaan Makalah
Makalah ini dapat digunakan sebagai contoh untuk pembelajaran dan pengenalan dasar dari
HTML dan Java Script.

E. Prosedur Makalah
Penyusunan Makalah ini menggunakan metode deskriptif yaitu teknik mengumpulkan data
dari berbagai sumber buku dan internet.

4
 BAB 2
PEMBAHASAN

1. HTML
Hypertext Markup Language adalah bahasa markah standar untuk dokumen yang
dirancang untuk ditampilkan di peramban internet. Ini dapat dibantu oleh
teknologi seperti Cascading Style Sheets dan bahasa skrip lainnya seperti
JavaScript, VBScript, dan PHP.

Struktur Dasar HTML

Dalam penggunaanya sebagin besar kode HTML harus teletak diantara tag
kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag>
(terdapat tanda “/”). Struktur dasar dokumen HTML berisinelemen-demen atau
tag sebagal berikut:
<htrnt>
<head>
<tittle>Judul Form/Caption</title>
</head>
<body>
ISI WEB
</body>
</html>
Keterangan:
<html> .. </html> Mendefinisikan bahwa teks yang berada diantara kedua tag
tersebutadalah file HTML

<head> .. </head> Sebagai informasi page header. Di dalam tag ini kita
bisarneletakkan tag-tag TITLE, BASE, ISINDEX, LINK,
SCRIPT, STYLE & META.

<title> .. </title> Sebagai titel judul halaman/form. Kalimat yang terietak di

dalam tag ini akan muncul pada bagian paling atas browser
Anda (pada title bar).

<body> .. </body> Mendefinisikan teks beserta formatnya yang hendak sebagai isi
halaman web. Di dalam tag ini bisa diletakkan berbagai page
attibute seperti bgcolor, background, text, link, vink, alink,
leftmargin dan topmargin.

5
Sekarang untuk Latihan pertama kita, mari kita buat dokumen HTML sederhana.Ikut
Langkah Langkah berikut ini:
1. Buat direktori dengan nama latihan di drive D:. Dan selanjutnya dalam direktori ini kita
akan menyimpan semua file latihan kita
1. Buka Browser,misalnya Internet explorer, Fire fox, Chrome dll.
2. Buka program aplikasi teks editor misalnya dalam latihan ini adalah Sublime Text.
3. Mulai baris paling atas, tuliskan:

<html>

<head>

<title>::: Halaman Pembuka:::</title>

</head>

<body>

Proyek Latihan kita

</body>

</html>

4. Simpan file anda dengan klik menu File – Save

5. Selanjutnya pilih direktori Latihan yang tadi kita buat.

6. Pada box file name, isikan nama filenya dengan index.html

7. Pada drop down list di Save As Type, pilih All Files.

8. Simpan proyek anda dengan meng-klik pada tombol Save

Untuk menjalankan kode-kode tersebut, silahkan buka browser seperti internet explorer,

chrome, Netscape navigator dll.

1. Klik menu File – Open

2. Kemudian cari file di data D:, pilih folder Latihan, kemudian klik kanan pada file

index.html, pilih open with chrome.

Catatan:
Semua dokumen HTML mempunyai ekstensi .html (atau .htm)

6
Semua halaman web (homepage) mempunyai file index.html. File index.html secara
otomatis akan dipanggil ketika alamat sebuah domain atau direktori tempat menyimpan file
tersebut di buka di browser. Terdapat pengecualian padamicrosoftyang menggunakan web
server IIS, file yang dipanggil adalah default.html

Kode warna
pengaturan Warna dalam dokurnen HTML menggunakan kode kombinasi RGB (red,
green, blue). Setiap warna ditampllkan dalam dua digit nilai heksadæirnal (O, 1, 2, ….,
F). Setiap bagian dua digit kode menunjukan banyaknya intensitas dari kombjnasi
warna merah, hijau dan biru. Misalnya untuk warna kuning, dlbuat dengan
pencampuran warna sebagai berikut:

Red Green Blue

FF FF 00

Berarti untuk warna kuning dapat dibuat dengan kode #ffff00. Disamping itu, pembuatan
warna dapat juga dibuat dengan langsung menggunakan nama warna dalam bahasa
inggris, misalnya kuning=”yellow’
Berikut ini warna-wama yang dapat digunakan dalam halaman HTML

Warna Heksadesimal
White #FFFFFF
Black #000000
Red #FF0000
Green #00FF00
Blue #0000FF
Magenta #FF00FF
Cyan #00FFFF
Yellow #FFFF00

Anda dapat juga membuat campuran sendiri warna-warna berdasarkan emajinasi anda.
Yang penting anda mengikuti aturan diatas.

2. Pengaturan Halaman Web dan Teks

Untuk mendapatkan halaman web yang baik anda harus melakukan pengaturan terhadap
halaman web dan teks-teks didalamnya seperti mengatur warna latar belakang halaman,
memilih jenis dan ukuran huruf, perataan, warna teks, menambahkan gambar dll,Tag-tag
dibawah ini yang biasa digunakan dalam pengaturan halaman web dan teks:

7
a. <body>, digunakan mendefisikan teks beserta formatnya yang hendak ditampilkan
sebagai halaman web, Di dalam tag ini bisa diletakan berbagai page attribute seperti
bgcolor, background, text, link, vlink, alink, leftmargin dan topmargin.
1) Background = digunakan untuk mengatur warna latar belakang dokumen,
dengan gambar/image
2) Bgcolor = digunakan untluk mengatur warna latar belakang dokumen, dengan
wama putjh sebagai detault-hya.
3) Teks = digunakan untuk mengatur warna teks dokurnen dengan wama hitam
sebagai warna default.
4) Link = Untuk mengatur wama link dokumen dengan wama biru sebagai
warna defautt
5) Vlink = Untuk mengatur wama visited link dokunm dengen default ungu.
6) Alink = digunakan untuk rrmgatur wama active link dokumen dengan default
merah.

b. Heading: <Hn>..</Hn> Digunakan untuk mengatur ukuran huruf pada header. "n" mempunyai
nilai antara 1-6 atau antara <H1> sampai <H6>, dengan <H1> merupakan ukuran terbesar dan
<H6> merupakan ukuran terkecil.

contoh1_1.html
<html>

<head>

<title>::: Heading Dokumen HTML:::</title>

</head>

<body bgcolor=#ffffcc text=#003399>

<h1>Headng Tingkat 1 </h1>

<h2>Heading Tingkat 2 </h2>

<h3>Heading Tingkat 3 </h3>

<h4>Headng Tingkat 4 </h4>

<h5>Headng Tingkat 5</h5>

<h6>Headng Tingkat 6 </h6>

</body>

</html>

8
Hasilnya akan terlihat seperti:

c. Paragraph Baru: <P> Digunakan untuk pindah alinea atau membuat paragraf baru.
Tag ini bisa diberi akhiran </p> tag ininjuga bisa digunakan untuk mengatur
perataan kiri, tengah, kanan dan kiri-kanan, yaitu dengan atribut ALIGN. Atribute
align mempunyaí nilai: LEFT, RIGHT, CENTER dan JUSTIFY.
d. Line Break: <BR> Digunakan untuk pindah ke baris baru.
e. No Line Break: <NOBR> Bila digunakan tag ini maka teks yang panjang tidak
secara otomabs pindah baris bawahnya bila baris pertama sudah terlalu panjang.
f. Font: <FONT> Digunakan untuk mengatur huruf dokumen HTML. Tag FONT
mempunyai attribut, yaitu: SIZE, FACE, COLOR,
➢ SIZE: Digunakan untuk mengatur ukuran font. Ukuran font yang digunakan
berkjsar antara 1-7 - 7 dengan 1 merupakan ukuran terkecil dan 7 merupakan
ukuran terbesar,
➢ FACE: Digunakan untuk mengatur jenis atau nama font. Anda bisa memilih
maksimal 3 jenis fontt yang masing-masing dipisahkan oleh koma. Bila
terdapat spasi yang terlebk pada narna font maka harus digunakan tanda garis
bawah (_). Dalam memilih jenis font ini harus dipertimbangkan apakah font
yang kita gunakan pada halaman web kita nantinya akan terdapat pada computer
pengguna yang lain (pengakses web kita). Pendeknya kita tidak usah
menggunakan font-font yang bentuknya aneh-aneh, gunakan saja font standar.

9
 Tapi bila anda ingin menggunakan font yang sedikit aneh anda bisa
menggunakan graphic.
➢ COLOR: Digunakan untuk mengatur warna font. Didefinisikan dengan
menggunakan nilai RGB/HEX atau bisa juga langsung menggunakan warna
(red misalnya).

contoh1 2.html
<html>
<head>
<title>::: Ukuran, Jenis dan Warna Font:::</title>
</head>
<body>
<font size=1 Face=arial color=red>Ukuran font 1</font><br>
<font size=2 Face=arial color-green>Ukuran font 2 </font><br>
<font size=3 Face=arial color-blue>Ukuran font 3 </font><br>
<font size=4 Face-verdana color=red>Ukuran font 4 </font><br>
<font size=5 Face-verdana color-blue>Ukuran font 5 </font><br>
<font size=6 Face=tahoma color-green>Ukuran font 6 </font><br>
<font size=7 Face=tahoma color=red>Ukuran font 7 </font><br>
</body>
</html>

Hasilnya akan terlihat seperti:

g. Baase Font: <BASEFONT> Digunakan untuk mendefinisikan “default text”. Atribut

sama dengan atribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.

Selaln tag dan atribut diatas, masih terdapat tag-tag yang berhubungan dengan
pengaturan teks, yaitu:

10
Perhatian: Semua tag di bawah ini mernbutuhkan tap penutup

<B> Bold text

<I> Italic text

<U> Underscore

<TT> Typewriter

<S> Strikeout draws a line through the text

<PRE> Preformatted Text <DFN> Definition

<BLINK> Text berkedip (lebih baik jangan digunakan)

<STRONG> Strong
<ADDRES>
italic

<CITE> Digunakan untuk quoting text font

<CODE> Monospaced font (digunakan bila Anda ingin
meletakkan (memperlihatkan) kode HTML pada
dokumen HTML Anda)
<SAMP> Monospaced font (digunakan bila Anda ingin
meletakkan (memperlihatkan)
kode HTML pada dokumen HTML Anda)
<KBD> Monospaced font (digunakan bila Anda ingin
meletakkan (memperlihatkan)
kode HTML pada dokumen HTML Anda)
< BIG > Ukuran teks akan lebih besar satu ukuran Ukuran
<SMALL> Teks akan lebih kecil satu ukuran
<SUP> Membuat teks
<SUB> Membuat teks subscript
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italics

11
h. <HR>, digunakan untuk membuat garis horizontal. Tag ini mempunyai atribut SIZE,
WIDTH, ALIGN, dan NOSHADE.

Atribut SIZE digunakan untuk menentukan Panjang garis didalam satuan pixel,
Atribut WIDTH digunakan untuk menentukan ketebalan garis. Atribut NOSHADE
akan menyatakan bahwa garis tersebut ditampilkan tanpa bayang-bayang 3-D.

contoh 1_3.html
<html>
<head>
<title:::Membuat Garis Horizontal:::</title>
</head>

<body bgcolor="#ffffcc">
<font size = 1 face = tahoma color = blue>Selamat Datang</font>
<hr size = 1 width = 150 align = left />
<h1 ><center>www.smkpgri3-mlg.sch.id</h1>
<hr size = 5 align = center noshade />
</body>
</html>

Hasilnya tampak sebagai berikut :

i. LIST

Daftar/list adalah merupakan kumpulan teks yang disusun sedemikian rupa sehingga
item-item yang ada memiliki nomor urut atau bisa juga berupa tanda tanda
khusus/symbol.

Terdapat tiga tipe list yang dapat digunakan, yaitu:

✓ Unordered List: <UL> untuk membuat daftar itam dengan tanda bullet (tidak
bernomor). List entries didefinisikan dengan tag <LI>. Pada jenis ini tidak
memerlukan pengurutan data. Bentuk item tanda pada Undereted List dapat diubah
dengan menggunakan atribut TYPE kedalam tag <UL> dengan nilai “circle” untuk
bentuk lingkaran tengahnya putih, “square” untuk bentuk kotak padat hitam dan
“disc” bentuk lingkaran pada warna hitam.

12
 contoh1_4.html
<html>
<head>
<title>::: Underdeed List :::</title>
</head>

<body>
<b><font size = 3 face = tahoma color = blue>
Hobi saya adalah </b>
<hr size = 2 width = 150 align = left />
<UL type = circle>
<li>olahraga
</ul>
<ul type = circle>
<li>makan bakso
</ul>
<ul type = circle>
<li>makan seblak
</ul>
<ul type = circle>
<li>menggambar
</ul>
<ul type = circle>
<li>masak
</ul>
<ul type = disc>
<li>membaca
</ul>
<ul type = disc>
<li>makan
</ul>
<ul type = disc>
<li>bulutangkis
</ul>
<ul type = disc>
<li>foto
</ul>
<ul type = disc>
<li>motret
</ul>
</font>
</body>
</html>

Hasil kode diatas adalah:

13
✓ Ordered List: <OL> Juga digunakan untuk membuat daftar item berrnomor,
dengan tiapitem dapat menggunakan angka araba tau romawi. List entries juga
didefinisikan dengan <LI> tag. Atribut yang ada pada Orderred List adlah TYPE
dan START.

contoh1_5.html
<html>
<head>
<title>:::Ordered List:::</title>
</head>

<body>
<b><font size=2 Face=tahoma color=black>
pendidikan saya adalah: </b>
<hr size=2 width=150 align=left>
<ol type=1>
<li>Sekolah Dasar
<li>Sekolah Lanjutan Pertama
<li>Sekolah Lanjutan Atas
</ol>
<hr size=3 width=500>
<ol start=4>
<li>Universitas Muhammadiyah Malang
<li>Universitas PGRI Malang
</ol>
</font>
</body>
</html>

Hasil dari kode tersebut adalah:

14
✓ Definition List: <DL>, digunakan untuk menjelaskan istilah-istilah. Definition
List dinyatakan dengan tag <DT> Definition Team yaitu bagian istilah yang
dijabarkan dan tag <DD> Definition Data yang merupakan penjabaran dari istilah.

contoh1_6.html
<html>
<head>
<title>::: definition List:::</title>
</head>
<body>
<dl>
<dt> Bagian Pertama.
<dd> Sub Bagian Pertama.
<dt> Bagian Kedua.
<dd> Sub Bagian Kedua
</dl>
</body>
</html>

Hasil dari kode diatas adalah:

✓ Preformatted Text: <PRE>, digunakan untuk mengatur format tampilan agar

sesuai dengan aslinya.

contoh1_7.html
<html>
<head>
<title>the Bit; pre&gt; tag</title>

15
 </head>
<body>
<h3>without the &lt;pre&gt; tag:</h3>
here's
some ditty
specially done
to lay it out all
formatted and pretty.
unfortunately, that is all
this junk really means
because i admit i
couldn't scrawl
poetry for
beans.
<p><h3>with the &lt;pre&gt; tag:</h3>
<pre>
here's
some ditty
specially done
to lay it out all
formatted and pretty.
unfortunately, that is all
this junk really means
because i admit i
couldn't scrawl
poetry for
beans.
</body>
</html>

Hasil dari kode diatas adalah:

✓ Extended Quatations: <BLOCKQUOTE>, digunakan untuk membuat kutipan

Panjang, sehingga hasilnya menjorok kedalam.

contoh1_8
<html>
<head> <title>::: Blockquote:::</title> </head>
<body>

16
 <h3>2. Pengaturan Teks</h3>
<blockqoute>
Untuk mendapatkan halaman web yang baik Anda harus melakukan pengaturan
terhadap teks seperti memilih jenis dan ukuran huruf,
perataan, dll. </blockqoute>
</body>
</html>

Hasilnya tampak seperti berikut:

3. Hypertext Link
Digunakan untuk membuat link/penghubung antara suatu halaman dengan hal lain, ke
URL lain, juga digunakan dalam satu halaman untuk berpindah ke sub judul yang lain
atau ke lokasi tertentu dalam satu halaman yang sama.
Sintag tag link adalah sebagai berrikut:
<a href=url_tujuan>nama_link</a>
url_tujuan bernilai lokasi atau nama file yang akan dituju. Sedangkan nama_link
adalah nilai yang akan ditampilkan di browser sebagai teks link atau tombol
penghubung. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah dan
atribut warnanya dapat diatur dalam tag <body>. Adapun macam-macam link adalah
sebagai berikut:

Link ke Dokumen Lain

Untuk membuat link/penghubung dengan target ke dokumen/halaman yang berbeda,

anda harus membuat dokumen yang dituju/target dan disimpan dalam direktori tertentu,
baik pada direktori yang sama atau berbeda dengan dokumen yang aktif sekarang.
Untuk mencoba membuat link, silahkan buat script berikut dan beri dengan nama
link_dokumen_lain.html.
<html>
<head>
<title>:::Latihan Membuat Link Ke Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffcc>
<font face=arial size=6 color=maroon>
<b>.:::SMK PGRI 3 MALANG:::.<br>
<font face=arial size=4 color=blue>
<i>Succes By Discipline</i>
<font face=arial size=1 color=maroon>
<hr>
|<a href=link_dokumen_lain.html>H o m e</a>

17
|<a href=proli.html>Program Keahlian</a>
|<a href=ekstra.html>Ekstra Kurikuler</a>|
<hr><p><font face=verdana size=4 color=purple>
Selamat datang di web kami....
</body>
</html>

Buat lagi file berikut dengan diberi nama proli.html

<html>
<head>
<title>:::Link Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffff>
<table border=1 bordercolor=bordercolor=#800080
cellspacing=0 cellpadding=50 width=750 height=450>
<tr>
<td valign=top>
<font face=vardana size=4 color=blue>
program keahlian:<br>
<fint size=1
<ul type=circle>
<li>Rekayasa Perangkat Lunak
<li>Teknik Elektronika Industri
<li>Teknik Pembangkit Tengaga Listrik
<li>Teknik Mekanik Otomotif
<li>Teknik Bodi Otomotif
<li>Teknik Pemesinan
<li>Teknik Las
</ul>
</td>
</tr>
</body>
</html>

Untuk melengkapi Latihan kali ini, buat juga file berikut dan beri nama ekstra.html
<html>
<head>
<title>:::Link Dokumen Lain:::</title>
</head>
<body bgcolor=#ffffff>
<table border=1 bordercolor=bordercolor=#800080
cellspacing=0 cellpadding=50 width=750 height=450>
<tr>
<td valign=top>
<font face=verdana size=4 color=blue>
Ekstra Kurikuler:<br>
<font size=1>
<ul type=circle>
<li>Seni Bela Diri Tapak Suci
<li>Keagamaan

18
 <li>Sepak Bola
<li>Bola Basket
<li>Kepenyiaran
</ul>
</td>
</tr>
</body>
</html>

Link ke alamat URL atau Website

Untuk membuat link ke alamat URL adalah dengan menambahkan:

http:/nama_URL.
Contoh:

<a href="http://www.dikti.org">www.dikti.org</a>
<a href="http://www.smkpgri3-mlg.sch.id">www.smkpgri3-mlg.sch.id</a>

Link Ke Alamat Email

Link adalah membuat link pada teks, jika teks tersebut diklik maka akan menampilkan
program pengiriman email yang terdapat pada computer yang dipakai untuk
mengakses data atau teks tersebut secara otomatis.

Untuk membuat linkh ke alamat email hanya menambahkan atribut malito:alamat

email ke dalam tag <A HREF>
Misalnya:
<A HREF="malito:webmaster@smkpgri_3-mlg.src.id">Kirim email</a>

Link File yang akan didownload

Link filedalamhalini adalah apabila diklik pada teks tersebut maka proses selanjutnya
adalah mendownload file yang tercantum pada dokumen tersebut. Format
penulisannya adalah <a href=nama_file>
Misal:

<a href="antivirus.zip">Download anti virus</a>

<a href="latih.doc">Download latihan Hr</a>
<a href="mysql.exe">Downloadd MYSQL</a>

4. Menyisipkan Gambar/Images

Digunakan untuk menampilkan image atau animasi gif pada halaman web anda. Tag
yang digunakan adalah
<img src>=”nama file gambar”>
Atribut yang dimiliki tag <img> adalah: alt, align=(center, left, right), hspace, vspace,
border, width dan height. Jika atribut gambar tidak dituliskan, maka gambar
ditampilkan sesuai dengan ukuran aslinya. Untuk mengatur ukuran gambar,

19
menggunakan atribut width dan height. Atribut align digunakan untuk perataan posisi
gambar. Sedangkan alt, digunakan untuk memberi keterangan pada gambar jika
maouse berada diatasnya. Untuk mengatur letak gambar dapat menggunakan atribut
hscape dan vscape.

contoh1_9.html
<html>
<head>
<title>::: menampilkan images:::</title>
</head>
<body>
<b><font size=2 Face=tahoma color-black>
<img src="gedung.jpg" alt="Halaman SMK PGRI 3 Malang">
<img src="ekstra.jpg" hspace=10 vspace=5 width=200 height=254 align="right"
border=2>
</font>
</body>
</html>

Membuat Tabel
Terdapat tiga tag atau elemen utama yang digunakan dalam pembuatan table, yaitu:
<TABLE>, <TR>, dan <TD>. Yang perlu diingat adalah bahwa tag <TR> dan <TD>
harus terletak diantara tag <TABLE> dan </TABLE>.

✓ <TABLE>
Digunakan untuk mendefinisikan pembuatan table. Memiliki atribut:
• align - perataan:rata kiri (left), tengah (center), atau kanan (right)
• valign - mengatur bentuk perataan secara vertical
• bgcolor - mengatur warna latar belakang (background) dari table
• background - menentukan gambar yang digunakan sebagai background tabel
• color - untuk mengatur warna suatu sel dalam tabel
• border - menentukan ukuran border table (dalam pixel)
• rowspen - menggabungkan beberapa baris
• colspan – menggabungkan beberapa kolom
• cellpadding – jarak antara isi cell dengan batas cell (dalam pixel)
• cellspacing - mengatur jarak/spasi antar cell (dalam pixel)
• width – menentukan lebar table dalam pixel atau parcent
• height – menentukan tinggi table

✓ <TR>
Tag ini digunakan untuk membuat baris baru (pada tabel). Terdiri dari atribut:
• align - perataan:rata kiri (left), tengah (center), atau kanan (right)
• bgcolor – warna latar belakang dari baris
• valign – perataan vertikal:top, middle atau bottom

✓ <TD>
Tag ini digunakan untuk membuat kolom baru pada tabel. Attributnya adalah:
• align – untuk menentukan perataan kolom

20
 • background – untuk menentukan image yang digunakan sebagai latar
belakang dari kolom
• bgcolor – untukmenentukan warna latar belakang
• colspan – lihat gambar contoh
• height – untuk mengatur ukuran tinggi dalam pixels
• nowrap – untuk membuat supaya isi dari kolom tetap berada pada satu baris
• rowspan – lihat gambar contoh
• valign - perataan vertikal:top, middle atau bottom
• width – untuk menentukan lebar kolom dalam pixel atau persen

contoh1_10.html
<html>
<head>
<title>::: Pembuatan Table:::</title>
</head>
<body>
<font face=arial size=2 color=maroon>
<table>
<tr>
<td>Ini contoh tabel sederhana tanpa border</td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>Ini contoh tabel sederhana dengan border </td>
</tr>
</table>
<p>
<table border=1>
<tr>
<td>No.</td>
<td>Nama</td>
<td>Alamat</td>
</tr>
<tr>
<td>1.</td>
<td>Jam "Iyatul Khoir</td>
<td>Bulubrangsi Lamongan</td>
</tr>
<tr>
<td>2.</td>
<td>Ari Mulyaningsih</td>
<td>Wringin Anom Gresik</td>

</tr>
</table>
</body>
</html>

21
Hasilnya adalah sebagai berikut:

22
 BAB 3
PENUTUP

A.Kesimpulan

Dalam pembuatan website, dikenal dua komponen penting yaitu www dan HTML.
Dimana www merupakan suatu protokol standar dari internet, sedangkan HTML
merupakan script atau program standar yang dijalankan oleh www atau internet. Proyek
HTML ini dibuat dengan menggunakan media web editor notepad.
Di dalam HTML terdapat dua bagian dokumen yaitu bagian kepala (head) dan bagian
tubuh (body). Pembuatan proyek web/HTML sekolah dengan menggunakan notepad
ini dimulai dengan pembuatan bahasa HTML dalam notepad. Yang kemudian untuk
setiap baris dalam proyek ini selalu dibuat dengan bahasa HTML tersendiri sesuai
dengan apa yang akan kita buat.

B. Saran
Bagi para pemula, pembuatan web/HTML merupakan dasar yang penting sehingga
dapat membantu ketika kita memulai sebuah proyek web tanpa menggunakan cara yang
praktis.

23