Anda di halaman 1dari 39

HTML

PEMROGRAMAN INTERNET

Homepage untuk keperluan


informasi dan komunikasi
Topik yang dibahas :
3.1 membuat homepage sederhana
3.2 membuat homepage interaktif

Apakah File HTML itu?

HTML singkatan dari Hyper Text Markup


Language
File HTML adalah file teks yang tersusun dari
markup tags (penanda)
Markup tags memberitahukan Web browser
bagaimana menampilkan halaman
File HTML harus mempunyai ekstensi htm atau
html
File HTML bisa dibuat menggunakan editor teks
sederhana (notepad, wordpad, editplus, dll)

Membuat File HTML


1.

Ketikkan script berikut pada teks editor


<html>
<head>
<title>Judul halaman</title>
</head>
<body> Ini adalah homepage pertamaku
<b>teks ini dibold</b>
</body>
</html>

2.

Simpan file dengan nama mypage.html

Membuat File HTML


3. Buka file HTML menggunakan Internet Browser untuk
menampilkan homepage yang telah dibuat.

Penjelasan Script HTML

Tag pertama <html> memberitahukan browser sebagai


permulaan dari dokumen HTML. Tag terakhir </html>
memberitahukan browser sebagai akhir dari dokumen
HTML.
Teks diantara tag <head> dan tag </head> adalah
informasi header yang tidak ditampilkan di jendela
browser.
Teks diantara tag <title> dan tag </title> adalah judul
dokumen yang ditampilkan pada caption browser.
Teks diantara tag <body> dan tag </body> adalah teks
yang akan ditampilkan di jendela browser.
Teks diantara tag <b> dan tag </b> akan ditampilkan
dengan font bold.

TAG HTML

Tag HTML digunakan untuk menandai elemen


HTML
Tag HTML diapit oleh dua karakter < dan >
Tag HTML normalnya berpasangan seperti <b>
dan </b>
Tag pertama disebut start tag, tag kedua
disebut end tag
Teks diantara start dan end tag adalah element
content
Tag HTML tidak bersifat case sensitive, <b>
sama maknanya dengan <B>

Elemen HTML

Contoh elemen HTML :


<b>teks ini dibold</b>

Elemen HTML dimulai dgn start tag: <b>


Content elemen HTML : teks ini dibold
Elemen HTML diakhiri dgn end tag: </b>
Tag <b> mendefinisikan elemen HTML yang
harus ditampilkan dgn bold.

Elemen HTML

Contoh lain elemen HTML:


<body> Ini adalah homepage pertamaku
<b>teks ini dibold</b> </body>

Elemen HTML dimulai dgn start tag


<body> dan diakhiri dgn end tag </body>.
Tag <body> mendefinisikan elemen HTML
yang merupakan tubuh dari dokumen
HTML.

Atribut Tag

Tag bisa memiliki atribut yg memberikan informasi


tambahan tentang elemen HTML.
Atribut tag mendefinisikan elemen dari body halaman
HTML <body>. Dgn tambahan atribut bgcolor, browser
diberitahu informasi ttg background color.
misal: Bacground color merah, <body bgcolor="red">.
Atribut tag selalu berpasangan, nama/nilai seperti :
nama=nilai
Atribut selalu ditambahkan pada start tag dari elemen
HTML.

Tag Dasar HTML


Tag paling penting pada HTML adlh tag heading,
paragraf dan line break.
1. Heading
Heading didefinisikan dgn tag <h1> s.d <h6>
<h1> adlh heading terbesar & <h6> adlh heading
terkecil.
HTML otomatis memberi spasi pada setiap heading
<h1>Ini
<h2>Ini
<h3>Ini
<h4>Ini
<h5>Ini
<h6>Ini

adalah
adalah
adalah
adalah
adalah
adalah

heading</h1>
heading</h2>
heading</h3>
heading</h4>
heading</h5>
heading</h6>

Tag Dasar HTML


2. Paragraf
Paragraphs didefinisikan dgn tag <p>
HTML otomatis memberi spasi pada setiap heading
<p>Ini adalah paragraf</p>
<p>Ini adalah paragraf yang lain</p>

3. Line break
Tag <br> digunakan untuk mengakhiri baris, tetapi masih
dalam satu paragraf.
Tag <br> adlh empty tag. Tidak memiliki end tag.
<p>Ini <br> adalah <br>paragraf dengan line break</p>

Tag Dasar HTML


4. Comment/Komentar
Tag comment digunakan untuk menyisipkan komentar
pada HTML source code. Komentar akan diabaikan oleh
browser.
Komentar dapat digunakan untuk menjelaskan source
code.
Tanda seru hanya digunakan diawal.
<! Ini adalah komentar -->

Tag Dasar HTML


TAG

Deskripsi

<html>

Define dokumen html

<body>

Define dokumen body

<h1> s.d <h6>

Define header1 s.d header 6

<p>

Define paragraf

<br>

Define line break

<hr>

Define garis horisontal

<!-->

Define comment

HTML Text Formatting

Sintaks untuk memformat teks pada


HTML:

Bagaimana cara melihat source


HTML??
Pada halaman web klik option view pada browser
dan pilih SOURCE atau PAGE SOURCE. Akan
terbuka halaman yang menunjukan source HTML
aktual dari web page.

HTML Character Entity

Untuk menampilkan karakter-karakter yang


memiliki makna khusus/digunakan pada script
HTML seperti tanda < (less than)
Contoh

character entity yang sering digunakan :

Link HTML

HTML menggunakan hiperlink untuk


berhubungan dgn dokumen lain di web
HTML menggunakan tag anchor <a> untuk
menciptakan link ke dokumen lain
Anchor dapat me-link ke berbagai resource di
web : halaman HTML, gambar, file suara, film,
dll.
Sintaknya :
<a href=url>Teks yang akan ditampilkan</a>

Link HTML

Contoh link :
<a href=http://www.sman1blitar.sch.id/>website sman 1 blitar</a>

Sintaks diatas akan menampilkan pada browser:


website sma negeri 1 blitar
Target atribut :
Mendefinisikan dimana dokumen link akan dibuka.
Script berikut akan membuka dokumen di halaman lain:
<a href=http://www.sman1blitar.sch.id/ target=_blank>
website SMA Negeri 1 BLITAR </a>

Name Attribute :

Mendefinisikan nama anchor yang dapat digunakan


untuk menciptakan link yang dapat melompat secara
langsung ke section spesifik dari web page.
<a name=label>Teks yang akan ditampilkan</a>

Contoh:
<a name="html">HTML</a> merupakan teks standar untuk pembuatan web

Kemudian untuk memanggil link tersebut dgn script :


<a href="#html">HTML</a>

Link ke email
sintaks :

<a href="mailto:arif_prita@plasa.com">
Kirim ke Email </a>

HTML Image/gambar

Pada HTML, gambar didefinisikan dengan tag


<img>
Tag <img> tidak memerlukan closing tag </img>!
Sintaks untuk mendefinisikan image adalah :
<img src="url">

URL menunjuk ke lokasi dimana image


disimpan, misal:
http://brawijaya.ac.id/images/logo.jpg

HTML Image/gambar
Atribut Alt digunakan untuk mendefinisikan
alternate text untuk gambar.
Contoh :

<img src=http://brawijaya.ac.id/image/logo.jpg
alt=logo brawijaya>

Background HTML

Background yang bagus akan membuat web


site semakin terlihat menarik.
Background didefinisikan sebagai atribut di tag
<body>, bisa berupa warna maupun gambar.
Atribut bgcolor digunakan sebagai warna
background pada halaman HTML. Nilai atribut
ini bisa berupa bilangan heksadesimal, nilai
RGB, atau nama warna.

Contoh script background hitam :


<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">

Atribut background digunakan sebagai gambar


background pada halaman HTML. Nilai atribut ini

adalah URL dari gambar yang akan digunakan.


Contoh script background gambar :
<body background=logo.jpg">
<body background="http://www.sman1blitar.sch.id/logo.jpg">

Tabel HTML

Tag <table> mendefinisikan tabel.


Tabel dibagi menjadi beberapa baris atau
tag<tr>.
Setiap baris dibagi menjadi beberapa sel data
atau tag <td>.
Setiap sel data dapat berisi teks, gambar, list,
paragraf, form, horizontal rules, tabel, dll.

Tabel HTML

Contoh tabel dengan border :


<table border="1">
<tr>
<td>baris 1, sel 1</td>
<td>baris 1, sel 2</td>
</tr>
<tr>
<td>baris 2, sel 1</td>
<td>baris 2, sel 2</td>
</tr>

Tampilan di browser :

Heading pada Tabel

Heading pada tabel didefinisikan dgn tag <th>


<table border="1">
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
<tr>
<td>baris 1, sel 1</td>
<td>baris 1, sel 2</td>
</tr>
<tr>
<td>baris 2, sel 1</td>
<td>baris 2, sel 2</td>
</tr>

Tampilan pada browser :

Sel Kosong pada Tabel

Diberi sintaks &nbsp; pada sel kosong agar tetap


memiliki border.
<table border="1">
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
<tr>
<td>baris 1, sel 1</td>
<td>baris 1, sel 2</td>
</tr>
<tr>
<td>baris 2, sel 1</td>
<td>&nbsp;</td>
</tr>

Tampilan pada browser :

Tag Tabel :

List HTML
Unordered List

List dari item yang ditandai dengan bullet.


Unordered list dimulai dgn tag <ul>. Setiap item list
dimulai dgn tag <li>.
<ul>
<li>Kopi</li>
<li>Susu</li>
<li>Teh</li>
</ul>

Tampilan pada browser :

Di dalam item list bisa dimasukkan paragraf, line break,


gambar, link, list lain, dll.

Ordered List

List dari item yang ditandai dengan angka.


Ordered list dimulai dgn tag <ol>. Setiap item list dimulai
dgn tag <li>.
<ul>
<li>Kopi</li>
<li>Susu</li>
<li>Teh</li>
</ul>

Tampilan pada browser :

Di dalam item list bisa dimasukkan paragraf, line break,


gambar, link, list lain, dll.

Definition List

Bukan list dari item!


List dari istilah dan penjelasan dari istilah tersebut.
Definition list dimulai dgn tag <dl>. Setiap istilah (term)
dimulai dgn tag <dt>, dan penjelasan dari istilah dimulai
dgn tag <dd>.
<dl>
<dt>Kopi</dt>
<dd>Minuman berwarna hitam</dd>
<dt>Susu</dt>
<dd>Minuman berwarna putih</dd>
<dt>Teh</dt>
<dd>Minuman berwarna merah</dd>
</dl>

Tampilan pada browser :

Di dalam tag <dd> bisa dimasukkan paragraf, line break,


gambar, link, list lain, dll.

TAG List

Frame HTML
Dengan frame dapat menampilkan lebih
dari satu halaman web pada satu jendela
browser.
Setiap dokumen HTML disebut satu frame
yang independen terhadap dokumen lain

TAG Frameset
Tag <frameset> mendefinisikan
bagaimana membagi window menjadi
beberapa frame.
Tiap frameset mendefiniskan sekumpulan
baris atau kolom.
Nilai dari baris/kolom menunjukkan jumlah
area layar yang dibutuhkan oleh
baris/kolom

TAG Frame

Tag <frame> mendefinisikan dokumen


HTML yang akan diletakkan di tiap-tiap
frame.
Contoh frameset dgn 2 kolom :
<frameset cols="25%,75%">
<frame src="frame_a.html">
<frame src="frame_b.html">
</frameset>

Tag <frameset> tidak diletakkan didalam


tag <body>!

Agar frame tidak dapat digeser oleh user, maka


ditambahkan sintaks : noresize=noresize
pada tag <frame>
Tag Frame :