Pemrograman HTML

Modul : Pemrograman Berbasis Internet (Web Programming)
1. Struktur Dokumen
Syarat perlu mempelajari suatu bahasa pemrograman adalah
mengetahui Strukturnya. Program/dokumen HTML terdiri dari Kepala
Program/Dokumen dan Badan Program/Dokumen dengan bentuk sbb :
<html>
<head>
......... Kepala Program
</head>
<body>
............. Badan Program
</body>
</html>
Dokumen HTML adalah suatu dokumen yang diapit dengan tag <HTML>
Kepala program diapit dengan tag <Head> dan untuk badan program
diapit dengan tag <Body>.
Berikut akan diberikan contoh program HTML yang sederhana :
<html>
<head>
<title>
Homepage Pribadi
</title>
</head>
<body>
<center>
<h1>Homepage-Ku</h1>
Inilah <b>Homepage </b> Pribadi-Ku <i>Yang Pertama</i>
</center>
</body>
</html>
Tampilan program :
Homepage-Ku
Inilah Homepage Pribadi-Ku Yang Pertama
Ket : - h1 tulisan Header dapat pula dicoba (h2...h6)

- b tulisan tebal
Dosen : Ir. H. Sumijan, M.Sc 1

- i tulisan italic
- u tulisan bergaris bawah
2. Gambar dan Background

Untuk memberikan tampilan yang menarik dan memang
merupakan kelebihan dari dokumen HTML, dapat
disertakan gambar dalam dokumen tersebut, dapat
berupa gambar diam ataupun animasi. Gambar dapat
pula sebagai gambar tunggal di bagian area halaman
atau memenuhi area halaman sebagai background.
<IMG SRC="nama file gambar">
untuk memanggil file gambar tunggal
<Body background="nama file gambar">
untuk memanggil file gambar sebagai background
<html>
<head>
<title>
Homepage Pribadi
</title>
</head>
<body background="gambar1.jpg">
<center>
<IMG SRC="gambar2.gif">
Inilah Homepage Pribadi-Ku <i>Yang Pertama</i>
</center>
</body>
</html>
Tampilan :
Homepage-Ku
Ket : - gambar1.jpg harus ada

- gambar2.jpg harus ada

- extension gambar jpg atau gif
3. Font dan List

Pada contoh dokument Html berikut terdapat perintah
tambahan yaitu : FONT, Didalam FONT dapat ditambahkan
beberapa perintah seperti SIZE (ukuran huruf), FACE
(Jenis huruf sesuai yang ada pada sistem windows-nya)
dan COLOR (warna huruf).
Dan juga dalam dokumen yang sama diberikan contoh perintah

yang menghasilkan suatu LIST atau Daftar, LIST dapat berupa
Ordered LIST (OL) atau Unordered LIST (UL), jika memakai OL
berarti LIST kita terurut (bisa angka atau abjad).
<html>
<head>
<title>
Homepage Pribadi
</title>
</head>
<center>
<Font size=3 Face="arial" color="blue">
</Font>
</center>
<font face="arial" size=3 color="red">
<ol>
<li>Nama : Sumijan
<li>Alamat : Komp. Palm Griya Indah
<li>Hoby : Baca Hadis dan Tafsir Al-Quràn
</ol>
</font>
</body>
</html>
Tampilan :

Homepage-Ku

1. Nama : Sumijan
2. Alamat : Komp. Palm Griya Indah
3. Hoby : Baca Hadis dan Tafsir Al-Quran
4. TABEL
Tabel adalah suatu tampilan yang mengandung unsur baris
dan kolom, untuk menampilkan tabel dalam homepage diperlukan
beberapa tag yaitu :
<Table> ....... </table> Untuk set dokumen tabel

<TR> ......... </TR> Untuk set baris (Table Row)
<TD> ......... </TD> Untuk set kolom (Table Data)
<TH> ......... </TH> Untuk set Header (Table Header)
<Caption> .....</Caption> Untuk set Judul Tabel
Contohnya seperti berikut :
<html>
<head>
<title>
Homepage Pribadi
</title>
</head>
<center>
<Font size=3 Face="arial" color="blue">
</Font>
</center>

<font face="arial" size=3 color="red">

<ol>
<li>Nama : Sumijan
<li>Alamat : Komp. Palm Griya Indah
<li>Hoby : Baca Hadis dan Tafsir Al-Quràn
</ol>
</font>
<BR>
<center>
<table border=2>
<caption> Daftar Nilai Ujian </caption>
<TR>
<TD><BR></TD>
<TH>MID</TH>
<TH>AKHIR</TH>
</TR>
<TR>
<TH>Agama</TH>
<TD>90</TD>
<TD>85</TD>
</TR>
<TR>
<TH>Pancasila</TD>
<TD>75</TD>
<TD>80</TD>
</TR>
</table></center>
</body>
</html>
Tampilan :
Homepage-Ku


1. Nama : Sumijan
2. Alamat : Komp. Palm Griya Indah
3. Hoby : Baca Hadis Dan Tafsir Al-Quràn
Daftar Nilai Ujian
MID AKHIR
Agama 90 85
Pancasila 75 80
5. FRAME
Frame adalah perintah untuk tampilan yang home yang terbagi
dalam beberapa bingkai sesuai kehendak kita. Dapat dibagi secara
mendatar atau secara horizontal.
<Frameset> ....... </Frameset> Untuk set bingkai homepage

<Frame> ......... </Frame> Untuk isi dan nama bingkai
Cols dan Rows Untuk set baris atau kolom
Contohnya seperti berikut :
(sebelum menulis contoh, anda harus mempunyai minimal 2 dokumen

HTML
yang akan di panggil pada bingkai yang akan dibuat).
<html>
<head>
<title>My Personal Homepage</title>
</head>
<frameset cols="25%,*" frameborder="0" framespacing="0">
<frame src="kiri.html" name="left" noresize scrolling>
<frame src="kanan.html" name="right" noresize scrolling>

</frameset>
</html>
Jika program ini anda jalankan, maka hasilnya seperti homepage

yang anda lihat ini, terbagi menjadi 2 bingkai dengan bagian 25%
berisi kiri.html dan 75% berisi kanan.html.
Jika menginginkan terbagi 2 tetapi horizontal atau baris, dapat
mengganti cols dengan rows dan dokumen html-nya diganti atas dan
bawah.
<html>
<head>
</head>
<frameset rows="25%,*" frameborder="0" framespacing="0">
<frame src="atas.html" name="left" noresize scrolling>
<frame src="bawah.html" name="right" noresize scrolling>
</frameset>
</html>
6. LINK
Link adalah menghubungkan dengan obyek lain, dapat berupa Web Page,
Gambar, Suara, ataupun ke komputer server yang lain. Link adalah
merupakan pembeda antara mode text HTML dengan text yang lain.
Untuk perintah Link dapat menggunakan elemen Anchor : <A> ...</A>
dan tambahan perintah HREF.
Contoh jika ada perintah :
<A HREF="contoh.htm">Menuju ke Dokumen Contoh.htm </A>
Artinya : Bahwa kalimat "Menuju ke Dokumen Contoh.htm" akan

diberi tanda (biasanya garis bawah) dan jika pointer mouse
berada pada kalimat tersebut, maka akan menjadi gambar jari
tangan
Dan apabila di Klick, maka contoh.htm akan ditampilkan.
dokumen
<html>
<head>
</head>
<Body>

<h>Contoh Link</h>
<a href="contoh.htm">Link ke dokumen Contoh</a>
</Body>
</html>
Tampilan
Contoh Link
Link ke dokumen Contoh
Seperti yang anda lihat pada pelajaran Frame, tampilan pada layar
dapat dibagi menjadi dua atau beberapa. Agar anda dapat me-link
ke daerah yang dituju, misalnya bagian kanan atau kiri, dapat dilihat
lagi pada dokumen frame-nya pada perintah NAME, pada contoh
terdahulu
anda membagi dua halaman menjadi kiri dan kanan dengan memberi
nama
name="left" dan yang kanan diberi nama name="right", sehingga misal
kita ingin menampilkan dokumen contoh.htm ke halaman kiri dapat
diberi
perintah TARGET, contoh:
<a href="contoh.htm" target="left" >Link ke dokumen Contoh </a>
Pemacu link tidak harus tulisan, dapat juga pemacu link menggunakan
gambar atau image :
* <a href="contoh.htm"> <img src="gambar.gif> </a>
(Gambar.gif akan menjadi pemacu link ke dokumen contoh.htm)
Contoh link yang lain :

* <a href="http://www.stmikdinus.ac.id">Link ke Homepage-nya STMIK
</a>
Link ke Homepage-nya STMIK
* <a href="mailto:mendoan@mailcity.com">Link ke alamat e-mail </a>

Link ke alamat e-mail

Pemrograman HTML

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

Pemrograman HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Modul : Pemrograman Berbasis Internet (Web Programming)

Berikut akan diberikan contoh program HTML yang sederhana :

Inilah Homepage Pribadi-Ku Yang Pertama

Ket : - h1 tulisan Header dapat pula dicoba (h2...h6)

Dosen : Ir. H. Sumijan, M.Sc 1

2. Gambar dan Background

Inilah Homepage Pribadi-Ku Yang Pertama

Ket : - gambar1.jpg harus ada

Dosen : Ir. H. Sumijan, M.Sc 2

- extension gambar jpg atau gif

3. Font dan List

Dan juga dalam dokumen yang sama diberikan contoh perintah

Dosen : Ir. H. Sumijan, M.Sc 3

Inilah Homepage Pribadi-Ku Yang Pertama

3. Hoby : Baca Hadis dan Tafsir Al-Quran

<Table> ....... </table> Untuk set dokumen tabel

Contohnya seperti berikut :

Dosen : Ir. H. Sumijan, M.Sc 4

<font face="arial" size=3 color="red">

Dosen : Ir. H. Sumijan, M.Sc 5

Inilah Homepage Pribadi-Ku Yang Pertama

Daftar Nilai Ujian

<Frameset> ....... </Frameset> Untuk set bingkai homepage

Contohnya seperti berikut :

(sebelum menulis contoh, anda harus mempunyai minimal 2 dokumen

Dosen : Ir. H. Sumijan, M.Sc 6

Jika program ini anda jalankan, maka hasilnya seperti homepage

<A HREF="contoh.htm">Menuju ke Dokumen Contoh.htm </A>

Artinya : Bahwa kalimat "Menuju ke Dokumen Contoh.htm" akan

Dosen : Ir. H. Sumijan, M.Sc 7

Link ke dokumen Contoh

<a href="contoh.htm" target="left" >Link ke dokumen Contoh </a>

Contoh link yang lain :

Dosen : Ir. H. Sumijan, M.Sc 8

Link ke alamat e-mail

Dosen : Ir. H. Sumijan, M.Sc 9

Anda mungkin juga menyukai