pemrograman web · web view2015. 9. 18. · [pemrograman web] pendidikan teknologi informasi page...

Pendidikan Teknologi Informasi | Ika Menarianti, M.Kom

P T I PEMROGRAMAN WEB

Hyper Text Markup Language

Page

[PEMROGRAMAN WEB]

HTML (Hyper Text Markup

Language)1. Definisi HTML

Hyper Text Markup Language (HTML) adalah bahasa yang dipergunakan untuk

menyusun dan membentuk dokumen agar dapat ditampilkan pada program web

browser. HTML juga dapat disebut sebagai protokol yang digunakan untuk

mentransfer data atau dokumen dari web server ke browser. HTML inilah yang

menjadi dasar bila akan menjelajah internet dan melihat halaman web yang menarik.

HTML menentukan 2 fungsi :

Membentuk tata letak dokumen, dalam hal ini menentukan jenis huruf,

gambar, dan komponen dokumen lainnya.

Menentukan hubungan ke dokumen lain, HTML merupakan suatu bahasa

pemrograman yang termasuk dalam kategori SGML (Standart Generalized

Markup Language) dimana bentuknya merupakan standar ASCII yang berisi

kode-kode untuk mengatur dokumen.

Saat ini terdapat banyak sekali HTML authoring (software atau tool yang digunakan

untuk membuat atau mendesain halaman web), yang biasa digunakan seperti : MS-

FrontPage, Netscape Composer, Macromedia Dreamweaver, Adobe GoLive, Adobe

Pagemill, HotDog, HotMetal, HTML Easy, InContext Spider, dan lain sebagainya.

Karena bentuk HTML mengikuti standar ASCII, maka file HTML dapat dibuat dengan

menggunakan program editor seperti Editor dari DOS, atau Notepad dari Microsoft

Windows, MS Word dan lain sebagainya. Namun yang paling mudah adalah dengan

menggunakan Notepad yang ada setiap kali kita menggunakan system operasi

terutama windows.

Software lain yang digunakan adalah browser. Browser digunakan untuk

menampilkan web page yang akan dihasilkan. Dua nama yang paling popular adalah

Internet Explorer dan Netscape Navigator, keduanya merupakan browser yang

Page

[PEMROGRAMAN WEB]

umum digunakan dan mudah didapatkan, beberapa yang lain yang juga terkenal

seperti Opera, GodZilla, Mozilla Firefox, dan sebagainya. Jadi, dengan

menggunakan kombinasi program pembuat HTML dan program web browser, maka

kita sudah dapat menayangkan informasi di internet.

HyperText menunjukan bahwa halaman web lebih tepat berupa teks yang dapat

memuat multimedia, dan melakukan link dengan atau tanpa lompatan. Markup

menunjuk pada kebanyakan teks dengan simbol-simbol spasial (tags) yang

mengidentifikasi struktur dan tipe dokumen.

2. KOMPONEN HTML

Secara garis besar terdapat 4 jenis komponen dari HTML yaitu :

2.1.Structural

Adalah suatu tanda atau kode program yang menentukan level atau tingkatan dari

sebuah tulisan

Contoh:

<h1>Internet</h1>

akan memerintahkan browser untuk menampilkan "Internet" sebagai tulisan

tebal besar yang menunjukkan sebagai Heading 1

2.2.Presentational.

Adalah suatu tanda atau kode yang menentukan tampilan dari sebuah tulisan, tidak

peduli dengan level dari tulisan tersebut.

Contoh:

<b>Cetak Tebal</b>

maka pada browser akan menampilkan "Cetak Tebal".

2.3.HyperText.

Suatu tanda atau kode program HTML yang menunjukkan hubungan (link) ke bagian

lain dari dokumen tersebut atau link ke dokumen lain.

contoh :

Page

[PEMROGRAMAN WEB]

<a href="http://wijayanto-smg.blogspot.com/">Download software</a>

maka pada browser akan menampilkan "Download software" sebagai sebuah

hyperlink yang menuju ke URL http://wijayanto-smg.blogspot.com/

2.4.Widget

Widget, elemen yang membuat objek-objek lain seperti tombol <button>, list <li>, dan

garis horizontal <hr>. Ada tiga macam link yang dapat kita gunakan:

Link menuju bagian lain dari page

Link menuju page lain dalam satu web site

Link menuju resource atau web site yang berbeda.

Selain markup presentational, markup yang lain tidak menentukan bagaimana

tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk

menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai

gantinya digunakan Cascading Style Sheets atau biasa disingkat CSS.

3. SCRIPTING HTML

Script atau kode HTML sederhana dapat menggunakan media notepad adalah

seperti di bawah :

<html>

<head>

<title>''Hallo''</title>

</head>

<body>

Hi world! It’s me!

</body>

</html>

Simpan file anda simpan dengan format dokumen html. (contoh : test.html).

Maka ketika file test.html tersebut anda buka, maka file akan langsung mengarah

pada web browser untuk membaca / menampilkan hasil dari perintah dokumen

HTML tersebut.

http://wijayanto-smg.blogspot.com/

Page

[PEMROGRAMAN WEB]

3.1.Header

Bagian header dari document HTML di apit oleh tag <HEAD> </HEAD>. Bagian ini

biasanya dimuat tag TITLE yang menampilkan judul dari halaman pada titlenya

browser. Selain itu Bookmark juga megunakan tag TITLE untuk memberi mark suatu

web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan

pencarian (searching) biasanya title di gunakan sebagai keyword. Header juga

memuat tag META yang biasanya di gunakan untuk menentukan informasi tertentu

mengenai document HTML, anda bisa menentukan author name, keywords, dan

lainnya pada tag META.

Contoh :

<meta name="author" content="wijayanto">

3.2.Elemen Body

Bagian BODY, yang dinyatakan dengan tag <BODY>isi content</BODY>, merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi

yang akan ditampilkan pada browser.

3.3.Tag

HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu

elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag

tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).

Tag biasanya merupakan suatu pasangan. Tag awal dan Tag akhir dinyatakan

dalam bentuk <nama tag>

Format : <nama tag> teks yang ditampilkan </nama tag>

Contoh:

<i>Teks ini terlihat miring di browser anda</i>

Untuk menampilkan teks dalam format teks miring. misalnya untuk tampilan : Teks ini

terlihat miring di browser anda.

3.4.Atribbute

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari

suatu tag tersebut. Misalnya digunakan untuk membuat teks dengan pengaturan rata

Page

[PEMROGRAMAN WEB]

kiri pada suatu paragraf yaitu <div style="text-align: left">. Atribut yang

menyertainya adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa

center, left, right atau justify

4. SCRIPT DASAR

HTML dasar selalu memiliki bentuk yang sama,

yaitu memiliki head dan body. Berikut

merupakan bentuk umum HTML dasar:

4.1.<BR>

Untuk membuat baris baru gunakan <br>, spasi lebih dari satu akan diabaikan.

Contoh:

4.2.<P></P>

Digunakan untuk membuat paragraf, jika tanpa tag penutup hasilnya seperti

menggunakan 2 kali <br>. Atribut yang mengikuti <P> adalah align.Contoh:

Page

[PEMROGRAMAN WEB]

4.3.<HR>

<HR> digunakan untuk menambahkan garis horizontal. Contoh:

4.4.<FONT></FONT>

Tag ini dapat digunakan untuk mengatur ukuran, warna dan jenis huruf. Atribut yang

digunakan adalah Size, Font dan Color

4.4.1. Size

Size digunakan untuk mengubah ukuran

4.4.2. Font

Font digunakan untuk mengubah bentuk huruf.

Page

[PEMROGRAMAN WEB]

4.4.3. Color

Color digunakan untuk memberi warna pada tulisan.

4.5.<H1></H1> …. <H6></H6>

Untuk membuat heading yang memberikan baris baru.

4.6.<B></B> atau <STRONG></STRONG>

Membuat huruf tebal.

Page

[PEMROGRAMAN WEB]

4.7.<I></I> atau <EM></EM>

Membuat huruf miring

4.8.<U></U>

Membuat huruf dengan garis bawah

4.9.<IMG>

Untuk menampilkan gambar digunan <img> disertai atribut pelengkap seperti:

src (letak file gambar)align (perataan gambar)width (lebar gambar dlm persen atau pixel)height (tinggi gambar dlm persen atau pixel)alt (keterangan gambar)

Page

[PEMROGRAMAN WEB]

4.10. <TABLE></TABLE>

Untuk membuat tabel kita gunakan <table></table>. Atribut pada pelengkap

<table></table> adalah border memberikan garis pada tabel, align

perataan tabel, width lebar tabel atau kolom, height tinggi tabel atau kolom dan

bgcolor untuk memberikan warna pada tabel. Kode <tr></tr> digunakan untuk

membuat baris, sedangkan <td></td> untuk mengisi data pada kolom tabel.

4.11. <A></A>

Untuk membuat link digunakan <a></a> dengan pelengkapa atribut href dan name

Page

[PEMROGRAMAN WEB]

Atau

Selanjutnya jalankan program, klik link ke atas maka akan tampil bagian atas.

4.12. <DIV></DIV>

Membuat blok paragraph dengan baris baru pada akhir paragraf (pengganti <p>,

digunakan pada css) Atribut yang digunakan adalah align (perataan paragraf) nilai left, right, center, justify.

Page

[PEMROGRAMAN WEB]

4.13. <SPAN></SPAN>

Digunakan pada css untuk memberikan format pada teks yang diblok, tanpa membuat baris baru

4.14. <OL></OL>

Order list (biasa dikenal dengan numbering). Atribut yang digunakan adalah Type (jenis numbering), nilai: 1, A, a, I, i.

Page

[PEMROGRAMAN WEB]

4.15.<UL></UL>

Unorder List, biasa kita kenal dengan Bullet. Atribut yang digunakan adalah type (jenis bullet), nilai: disc, square, circle.

Latihan! Lakukan coding untuk type circle dan square

4.16. <FRAMESET></FRAMESET>

Membagi satu halaman web menjadi beberapa halaman, halaman yang dibagi masih

bisa dibagi lagi. Contoh:

a. Buat file dengan nama framset.html

Page

[PEMROGRAMAN WEB]

b. Buat file dengan nama halaman1.html

a. Buat file dengan nama halaman2.html

b. jalankan framset.html

c. Perhatikan hasilnya

Page

[PEMROGRAMAN WEB]

4.17. <FORM></FORM>

Digunakan sebagai blok dari elemen-elemen form seperti text,texarea. Atributnya:

- name (nama form)

- action (file tujuan dimana form dikirim, digunakan pada server side)

- method (metode pengiriman, digunakan pada server side) nilai post, get

4.18. ELEMENT PADA FORM

4.18.1. Input

Tag ini teletak didalam blok tag form dengan atribut:

- Type (jenis input) nilai text, checkbox, radio, hidden, button,submit, reset, file, image- Name (nama elemen)- Value (nilai isian)

4.18.2. Radio

Page

[PEMROGRAMAN WEB]

4.18.3. Checkbox

4.18.4. Hidden

Page

[PEMROGRAMAN WEB]

4.18.5. Button

4.18.6. Submit

Page

[PEMROGRAMAN WEB]

4.18.7. Reset

Page

[PEMROGRAMAN WEB]

4.18.8. TextArea

4.18.9. Select

4.19. <BLINK>…teks…</BLINK>

Digunakan untuk membuat teks yang dicetak dengan efek berkedip.

<html> <head>

<title>Kedipan</title></head><body><blink> ika menarianti </blink>

</body></html>

Page

[PEMROGRAMAN WEB]

4.20. <MARQUEE>…teks…</MARQUEE>

Marquee adalah suatu program HTML untuk membuat teks bisa bergerak atau

berjalan. Program marquee ini banyak diminati dan di pakai oleh para blogger di

dalam blognya karena sifat program ini yang dinamis serta menarik untuk di lihat

disamping untuk menghemat tempat pada halaman blog.

Atribut yang sering di gunakan adalah:

BGCOLOR = "warna" --> Untuk mengatur warna background (latar belakang) teks

DIRECTION = "left/right/up/down" --> Mengatur arah gerakan teks

BEHAVIOR = "scroll/slide/alternate" --> Untuk mengatur perilaku gerakan

SCROLL --> teks bergerak berputar

SLIDE --> teks bergerak sekali lalu berhenti

ALTERNATE --> teks bergerak dari kiri kekanan lalu balik lagi (bolak-balik)

TITLE = "pesan" --> Pesan akan muncul saat mouse berada di atas teks

SCROLLMOUNT = "angka" --> mengatur kecepatan gerakan dalam pixel,

semakin besar angka semajin cepat gerakannya.

SCROLLDELAY = "angka" --> Untuk mengatur waktu tunda gerakan dalam mili

detik

LOOP = "angka|-1|infinite" --> Mengatur jumlah loop

WIDTH = "lebar" --> Mengatur lebar blok teks dalam pixel atau persen

Contoh marquee dari gerakan :

<MARQUEE align="center" direction="right" height="200" scrollamount="2"

width="30%"> marquee dari kanan ke kiri </MARQUEE>

ganti kata "left" dengan keinginan anda yaitu bisa : left, up, down .

Contoh marquee dari perilaku gerakan :

<MARQUEE align="center" direction="left" height="200" scrollamount="3"

width="70%" behavior="alternate"> marquee menurut perilaku </MARQUEE>

Page

[PEMROGRAMAN WEB]

Contoh marquee dengan variasi hurup dan warna latar belakang :

<div align="left">&ltFONT FACE="georgia" color="White"><B><MARQUEE

BGCOLOR="RED" width="70%" scrollamount="3" behavior="alternate">

marquee dengan huruf variasi</MARQUEE></b></FONT></div>

Ada variasi lain dari marquee ini, yakni ketika mouse sedang berada di area marquee

teks akan berhenti dan ketika mouse di geser kembali ketempat lain maka teks akan

bergerak kembali, ini hanya di tambahkan sedikit program pada kolom marquee.

Contoh, silahkan arahkan mouse anda ke area marquee di bawah ini :

<marquee onmouseover="this.stop()" onmouseout="this.start()"

scrollamount="2" direction="up" width="50%" height="200" align="center">

silahkan tunjuk ke sini </marquee>

pemrograman web · web view2015. 9. 18. · [pemrograman web] pendidikan teknologi informasi page...

Documents