Scribd
Unggah
3 tayangan

ModulDasarHTML 2

Dokumen ini adalah modul praktikum tentang aplikasi pemrograman, khususnya HTML. Modul ini menjelaskan pengertian, struktur, elemen, tag, dan cara membuat dokumen HTML, serta memberikan contoh penggunaan berbagai fitur seperti komentar, background, warna teks, dan hyperlink. Selain itu, terdapat latihan untuk membuat homepage pribadi sederhana.

Diunggah oleh

findi
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
3 tayangan

ModulDasarHTML 2

Dokumen ini adalah modul praktikum tentang aplikasi pemrograman, khususnya HTML. Modul ini menjelaskan pengertian, struktur, elemen, tag, dan cara membuat dokumen HTML, serta memberikan contoh penggunaan berbagai fitur seperti komentar, background, warna teks, dan hyperlink. Selain itu, terdapat latihan untuk membuat homepage pribadi sederhana.

Diunggah oleh

findi
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai DOCX, PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

MODUL PRAKTIKUM APLIKASI PEMROGRAMAN1

MODUL I
PENDAHULUAN

1.1 Pengertian html

HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang digunakan
untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam
sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan
di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized
Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk
menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan
dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan


tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat
dibuka dengan menggunakan browser web seperti Mozilla Firefox, Microsoft Internet
Explorer,Opera, Googlr Chrome, Safari dan lain-lain.

1.2 Struktur html

Dokumen HTML dapat terdiri dari teks, gambar, suara ataupun video. Satu hal yang
membedakan dokumen HTML dengan dokumen lainnya adalah adanya elemen-elemen
HTML beserta tag-tagnya. Elemen dan tag ini berfungsi untuk memformat atau menandai
suatu bagian tertentu dari dokumen HTML dan juga menetukan struktur bagian tersebut
dalam dokumen HTML. Struktur dasar HTML dapat dilihat seperti gambar dibawah.

File HTML

Bagian Header

Bagian Body

SMK TARAKANITA | KELAS X 1


MODUL PRAKTIKUM APLIKASI PEMROGRAMAN1

1.3 Elemen html

Pada dasarnya elemen HTML terdiri dari 2 kategori:


1. Elemen <HEAD> berfungsi untuk memberikan informasi atau mendeklarasikan
dokumen tersebut.
2. Elemen <BODY> berfungsi untuk menentukan bagaimana isi suatu dokumen
ditampilkan pada browser.

1.4 Tag

Pada dokumen HTML sebuah teks bisa memuat instruksi yang ditandai dengan kode atau
lebih dikenal dengan TAG. Tag ini dinyatakan dengan sebuah tanda lebih kecil dan lebih
besar (< >). Tag biasanya merupakan sebuah pasangan yang disebut tag awal yang
berfungsi untuk membuka dan tag akhir yang berfungsi untuk menutup. Tag awal
dinyatakan dalam bentuk <nama tag> sedangkan tag akhir dinyatakan dalam bentuk
</nama tag>. Sebagai contoh jika ingin membuat teks ditampilkan menjadi tebal seperti:
TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: <b>TAMPIL TEBAL</b>.
Tanda <b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh teks yang
ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut.
Contoh penulisan tag yang benar :
<tag 1>
Teks untuk tag ke 1
<tag 2>
Teks untuk tag ke 2
</tag 2>
</tag 1>

1.5 Html entities

Dalam xHTML terdapat karakter-karakter yang ilegal bila dituliskan langsung misalnya
ketika menuliskan lebih besar “>”, maka tulisan selanjutnya akan dianggap sebagi suatu
tag. Oleh karena itu, untuk mengatasi masalah ini HTML menyediakan HTML entities.

Contoh :

akan menampilkan tulisan “ ini memakai <BR /> saja.”. Jika tulisan tersebut dituliskan
secara biasa, maka tulisan “<BR/> akan hilang. Oleh karen itu penulisannya harus
menggunakan HTML entities sebagai berikut : “ini memakai &lt;BR/&gt; saja”.

SMK TARAKANITA | KELAS X 2


MODUL PRAKTIKUM APLIKASI PEMROGRAMAN1

Tabel HTML Entities

Character Entity Number Entity Name Character Entity Number Entity Name
" &#34; &quot; À &#192; &Agrave;
' &#39; &apos; Á &#193; &Aacute;
& &#38; &amp; Â &#194; &Acirc;
< &#60; &lt; Ã &#195; &Atilde;
> &#62; &gt; Ä &#196; &Auml;
&#160; &nbsp; Å &#197; &Aring;
¡ &#161; &iexcl; Æ &#198; &AElig;
¢ &#162; &cent; Ç &#199; &Ccedil;
£ &#163; &pound; È &#200; &Egrave;
¤ &#164; &curren; É &#201; &Eacute;
¥ &#165; &yen; Ê &#202; &Ecirc;
¦ &#166; &brvbar; Ë &#203; &Euml;
§ &#167; &sect; Ì &#204; &Igrave;
¨ &#168; &uml; Í &#205; &Iacute;
© &#169; &copy; Î &#206; &Icirc;
ª &#170; &ordf; Ï &#207; &Iuml;
« &#171; &laquo; Ð &#208; &ETH;
¬ &#172; &not; Ñ &#209; &Ntilde;
&#173; &shy; Ò &#210; &Ograve;
® &#174; &reg; Ó &#211; &Oacute;
¯ &#175; &macr; Ô &#212; &Ocirc;
° &#176; &deg; Õ &#213; &Otilde;
± &#177; &plusmn; Ö &#214; &Ouml;
² &#178; &sup2; Ø &#216; &Oslash;
³ &#179; &sup3; Ù &#217; &Ugrave;
´ &#180; &acute; Ú &#218; &Uacute;
µ &#181; &micro; Û &#219; &Ucirc;
¶ &#182; &para; Ü &#220; &Uuml;
· &#183; &middot; Ý &#221; &Yacute;
¸ &#184; &cedil; Þ &#222; &THORN;
¹ &#185; &sup1; ß &#223; &szlig;
º &#186; &ordm; à &#224; &agrave;
» &#187; &raquo; á &#225; &aacute;
¼ &#188; &frac14; â &#226; &acirc;
½ &#189; &frac12; ã &#227; &atilde;
¾ &#190; &frac34; ä &#228; &auml;
¿ &#191; &iquest; å &#229; &aring;
× &#215; &times; æ &#230; &aelig;
÷ &#247; &divide; ç &#231; &ccedil;

SMK TARAKANITA | KELAS X 3


MODUL PRAKTIKUM APLIKASI PEMROGRAMAN1

Character Entity Number Entity Name


è &#232; &egrave;
é &#233; &eacute;
ê &#234; &ecirc;
ë &#235; &euml;
ì &#236; &igrave;
í &#237; &iacute;
î &#238; &icirc;
ï &#239; &iuml;
ð &#240; &eth;
ñ &#241; &ntilde;
ò &#242; &ograve;
ó &#243; &oacute;
ô &#244; &ocirc;
õ &#245; &otilde;
ö &#246; &ouml;
ø &#248; &oslash;
ù &#249; &ugrave;
ú &#250; &uacute;
û &#251; &ucirc;
ü &#252; &uuml;
ý &#253; &yacute;
þ &#254; &thorn;
ÿ &#255; &yuml;

SMK TARAKANITA | KELAS X 4


MODUL PRAKTIKUM APLIKASI PEMROGRAMAN1

MODUL II
DASAR-DASAR HTML
2.1. Membuat dokumen html

Dokumen HTML dimulai dengan perintah awal <HTML>, kemudian <HEAD> dan
<TITLE>. Antara perintah <TITLE> dengan </TITLE> merupakan bagian judul dokumen
yang akan di buat. Misalnya beri judul “Web Pertamaku”, kemudian ditutup denga
perintah <HEAD>. Ini merupakan bagian pertama dari dokumen HTML. Bagian kedua
atau isi dimulai dengan perintah <BODY> dan </BODY>. Antara kedua perintah tersebut
berisi terdapat isi dokumen HTML. Pada bagian akhir dokumen ditutup dengan perintah
</HTML>.

Contoh Program
<HTML>
<HEAD>
<TITLE>
Web Pertamaku
</TITLE>
</HEAD>

<BODY>
Selamat Datang di Web Pertamaku
</BODY>
</HTML>

Hasil Tampilan :

SMK TARAKANITA | KELAS X 5


MODUL PRAKTIKUM APLIKASI PEMROGRAMAN1

2.2. Menambahkan Komentar

HTML menyediakan fasilitas untuk menuliskan komentar, komentar ini berguna bila nantinya
anda atau orang lain membaca program. Penulisan komentar dalam HTML diawali dengan
tanda <!-- dan diakhiri dengan tanda -->, contoh :

<!-- ini komentar adalah komentar -->

2.3. Menambahkan Background pada Halaman WEB

Halaman HTML dapat ditambahkan Background baik berupa warna ataupun gambar.
Untuk menambahkan background dilakukan dengan menambahkan perintah pada tag
perintah <BODY> . untuk menambahkan backround warna perintahnya adalah :

<BODY BGCOLOR=”warna”>

Sedangkan untuk menambahkan background gambar perintahnya adalah :

<BODY BACKGROUND=”nama_gambar.ext”>

Contoh Program
<HTML>
<HEAD>
<TITLE>
Web Pertamaku
</TITLE>
</HEAD>

<BODY BGCOLOR=”purple”>
Selamat Datang di Web Pertamaku
</BODY>
</HTML>

Contoh Program
<HTML>
<HEAD>
<TITLE>
Web Pertamaku
</TITLE>
</HEAD>

<BODY BACKGROUND=”fotoku.jpg”>
Selamat Datang di Web Pertamaku
</BODY>
</HTML>

SMK TARAKANITA | KELAS X 6


MODUL PRAKTIKUM APLIKASI PEMROGRAMAN1

2.4. Mengganti Warna Text

Untuk mengganti warna pada text di tambahkan perintah <FONT COLOR=”warna”> pada
text yang akan di ganti warnanya dan diakhiri dengan perintah </FONT>.

Contoh Program
<HTML>
<HEAD>
<TITLE>
Mengganti Warna
</TITLE>
</HEAD>
<BODY BGCOLOR=”yellow”>
<FONT COLOR=”BLUE”>Tulisan ini berwarna Biru</FONT>
<BR>
<FONT COLOR=”RED”>Tulisan ini berwarna Merah</FONT>
<BR>
<FONT COLOR=”GREEN”>Tulisan ini berwarna Hijau</FONT>
<BR>
<FONT COLOR=”WHITE”>Tulisan ini berwarna Putih</FONT>
<BR>
<FONT COLOR=”BLACK”>Tulisan ini berwarna Hitam</FONT>
</BODY>
</HTML>

SMK TARAKANITA | KELAS X 7


MODUL PRAKTIKUM APLIKASI PEMROGRAMAN1

2.5. Hyperlink

Untuk Membuat Hyperlink sederhana pada web digunakan perintah <A


HREF=”nama_file_html_yang_dituju.html”>Keterangan link</A>.

Contoh Program
Nama File : halaman1.html

<HTML>
<HEAD>
<TITLE>
Hyperlink
</TITLE>
</HEAD>
<BODY>
Ini Bagian pertama dari Web saya.
<BR>Silahkan membaca halaman kedua
<BR><CENTER>
<A HREF=”halaman2.html”>Ke Halaman 2</A>
</CENTER></BODY>
</HTML>

Nama File : halaman2.html

<HTML>
<HEAD>
<TITLE>
Hyperlink2
</TITLE>
</HEAD>
<BODY>
Ini Bagian kedua dari Web saya.
<BR><CENTER>
<A HREF=”halaman1.html”>kembali Ke Halaman 1</A>
</CENTER></BODY>
</HTML>

SMK TARAKANITA | KELAS X 8


MODUL PRAKTIKUM APLIKASI PEMROGRAMAN1

2.6. Memberikan warna pada Hyperlink

Tulisan Hyperlink dapat diberikan warna sesuai dengan keingainan dengan menggunakan
perintah LINK, ALINK dan VLINK yang disisipkan pada perintah <BODY> sebagai
berikut : <BODY LINK=”Purple” ALINK=”yellow” VLINK=”almond”>

Contoh Program
Nama File : halaman1.html

<HTML>
<HEAD>
<TITLE>
Hyperlink
</TITLE>
</HEAD>
<BODY LINK=”Purple” ALINK=”yellow” VLINK=”almond”>
Ini Bagian pertama dari Web saya.
<BR>Silahkan membaca halaman kedua
<BR><CENTER>
<A HREF=”halaman2.html”>Ke Halaman 2</A>
</CENTER></BODY>
</HTML>

SMK TARAKANITA | KELAS X 9


MODUL PRAKTIKUM APLIKASI PEMROGRAMAN1

Latihan

Buatlah homepage pribadi sederhana sesuai dengan tampilan dibawah :

Halaman awal, nama file : Index.html

Halaman Sejarah Hidup Halaman Study

Halaman Keluarga Halaman cita-cita

SMK TARAKANITA | KELAS X 10

Anda mungkin juga menyukai