Pemrograman HTML

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>
</tr>
<tr>
</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>
</tr>
<tr>
</tr>
Tampilan pada browser :
Sel Kosong pada Tabel
Diberi sintaks pada sel kosong agar tetap

memiliki border.
<table border="1">
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
<tr>
</tr>
<tr>
<td> </td>
</tr>
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>
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>
Di dalam item list bisa dimasukkan paragraf, line break,

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>
Di dalam tag <dd> bisa dimasukkan paragraf, line break,

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 :

Pemrograman HTML

Diunggah oleh

Informasi Dokumen

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

Pemrograman HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

HTML

Homepage untuk keperluan

Apakah File HTML itu?

HTML singkatan dari Hyper Text Markup

Membuat File HTML

Ketikkan script berikut pada teks editor

Simpan file dengan nama mypage.html

Membuat File HTML

Penjelasan Script HTML

Tag pertama <html> memberitahukan browser sebagai

Tag HTML digunakan untuk menandai elemen

Contoh elemen HTML :

Elemen HTML dimulai dgn start tag: <b>

Contoh lain elemen HTML:

Elemen HTML dimulai dgn start tag

Tag bisa memiliki atribut yg memberikan informasi

Tag Dasar HTML

Tag Dasar HTML

Tag Dasar HTML

Tag Dasar HTML

Define dokumen html

Define dokumen body

<h1> s.d <h6>

Define header1 s.d header 6

Define line break

Define garis horisontal

HTML Text Formatting

Sintaks untuk memformat teks pada

Bagaimana cara melihat source

HTML Character Entity

Untuk menampilkan karakter-karakter yang

character entity yang sering digunakan :

HTML menggunakan hiperlink untuk

Sintaks diatas akan menampilkan pada browser:

Mendefinisikan nama anchor yang dapat digunakan

Kemudian untuk memanggil link tersebut dgn script :

Pada HTML, gambar didefinisikan dengan tag

URL menunjuk ke lokasi dimana image

Background yang bagus akan membuat web

Contoh script background hitam :

Atribut background digunakan sebagai gambar

adalah URL dari gambar yang akan digunakan.

Tag <table> mendefinisikan tabel.

Contoh tabel dengan border :

Heading pada Tabel

Heading pada tabel didefinisikan dgn tag <th>

Tampilan pada browser :

Sel Kosong pada Tabel

Diberi sintaks &nbsp; pada sel kosong agar tetap

Tampilan pada browser :

List dari item yang ditandai dengan bullet.

Tampilan pada browser :

Di dalam item list bisa dimasukkan paragraf, line break,

List dari item yang ditandai dengan angka.

Tampilan pada browser :

Di dalam item list bisa dimasukkan paragraf, line break,

Bukan list dari item!

Tampilan pada browser :

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

Tag <frame> mendefinisikan dokumen

Tag <frameset> tidak diletakkan didalam

Agar frame tidak dapat digeser oleh user, maka

Anda mungkin juga menyukai

Diberi sintaks pada sel kosong agar tetap