pemrograman berbasis webwidiastuti.staff.gunadarma.ac.id/downloads/files/43967...pemrograman...

17
1 PEMROGRAMAN BERBASIS WEB

Upload: others

Post on 24-Nov-2020

42 views

Category:

Documents


4 download

TRANSCRIPT

Page 1: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

1

PEMROGRAMAN BERBASIS WEB

Page 2: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

Pengertian Situs / Web

Situs/Web dikategorikan menjadi 2 : Web Statis Web Dinamis Dalam Pemprograman Web terdapat 2 kategori:

Server–Side Programming ASP, JSP, PHP Client–Side Programming HTML, Java Script, VbScript.

Page 3: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

3

DASAR - DASAR HTML

Page 4: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

4

WEBSITE

Layanan World Wide Web (WWW) adalah layanan

yang mampu menampilkan dokumen dalam bentuk

teks, grafis dan dapat bersifat interaktif.

Pembuatan website ini menggunakan sebuah bahasa

yang dinamakan Hyper Text Markup Language

(HTML).

Page 5: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

5

FUNGSI HTML

Dengan menggunakan HTML, kita dapat :

Mendesain tampilan website beserta isinya.

Menambahkan gambar, suara maupun video ke

dalam tampilan website.

Membuat form interaktif untuk formulir pendaftaran,

belanja online, dan lain-lain.

Page 6: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

6

PENULISAN HTML

Memerlukan sebuah editor sebagai media penulisan

dokumen HTML. Editor yang dapat digunakan

antara lain Notepad, Macromedia Dreamweaver,

Frontpage.

Hasil penulisan sebuah dokumen HTML ditampilkan

dalam Browser. Browser berfungsi untuk

menterjemahkan tag-tag HTML menjadi sebuah

halaman web.

Page 7: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

7

TAG (PERINTAH) HTML

Bentuk dasar :

<BEGIN TAG>….</END TAG>

Bentuk lengkap :

<ELEMEN ATTRIBUTE=VALUE>

elemen nama tag

attribute attribute dari tag

value nilai suatu attribute

Contoh : <BODY BGCOLOR=green>

Page 8: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

8

STRUKTUR DOKUMEN HTML

Tag HTML : <HTML> ....... </HTML>

Tag HEAD : <HEAD> ........ </HEAD>

Tag TITLE : <TITLE> ......... </TITLE>

Tag BODY : <BODY> ........ </BODY>

Page 9: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

9

STRUKTUR DOKUMEN HTML

<HTML>

<HEAD>

<TITLE>........judul.......</TITLE>

</HEAD>

<BODY>

........isi...........

</BODY>

</HTML>

Page 10: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

10

ELEMEN DASAR HTML (1)

Blok Level Elemen

tag : <h1>....</h1>

Paragraf

tag : <p>......</p>

Huruf :

tag : <font atribut>.....</font>

Page 11: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

11

ELEMEN DASAR HTML (2)

Beberapa contoh tag untuk memformat teks :

<B>...</B> Memformat teks untuk dicetak

tebal

<U>...</U> Memformat teks dengan garis

bawah

<SUP>...</SUP> Memformat teks menjadi supescript

<STRIKE>...</STRIKE> Memformat teks seperti di coret

<BLINK>…</BLINK> Teks berkedip

Page 12: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

12

LINKS

Digunakan untuk membuat link ke halaman lain.

Tag :

<A HREF>........... </A>

Tulisan yang terletak antara <A HREF> dan </A> akan

terdapat garis bawah.

Contoh : <A HREF="halaman2.html">Klik di sini</A>

Page 13: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

13

LISTS

Unordered Lists

Membuat daftar item dengan tanda bullet

Ordered Lists

membuat daftar item, yang memiliki nomor secara

urut.

Definition Lists

mendefinisikan/menjelaskan istilah-istilah

Page 14: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

14

CONTOH LISTS (1)

<HTML>

<BODY>

<H4>An Unordered List:</H4>

<UL>

<LI>Coffee</LI>

<LI>Tea</LI>

<LI>Milk</LI>

</UL>

</BODY>

</HTML>

An Unordered List

• Coffee

• Tea

• Milk

Page 15: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

15

CONTOH LISTS (2)

<HTML>

<BODY>

<H4>An Ordered List :</H4>

<OL>

<LI>Coffee</LI>

<LI>Tea</LI>

<LI>Milk</LI>

</OL>

</BODY>

</HTML>

An Ordered List :

1. Coffee

2. Tea

3. Milk

Page 16: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

16

CONTOH LISTS (3)

<HTML>

<BODY>

<H4>A Definition List :</H4>

<DL>

<DT>Coffee</DT>

<DD>Black hot drink</DD>

<DT>Milk</DT>

<DD>White cold drink</DD>

</DL>

</BODY>

</HTML>

A Definition List :

Coffee

Black hot drink

Milk

White cold drink

Page 17: PEMROGRAMAN BERBASIS WEBwidiastuti.staff.gunadarma.ac.id/Downloads/files/43967...PEMROGRAMAN BERBASIS WEB Pengertian Situs / Web Situs/Web dikategorikan menjadi 2 : Web Statis Web

17

IMAGES

Digunakan untuk menampilkan gambar atau animasi pada halaman web. Format gambar yang dapat digunakan :

PICT, GIF, JPEG, BMP, dan lain-lain

Tag : <IMG>

disertai dengan atribut :

SRC menentukan sumber gambar yang akan ditampilkan

ALT alternatif bila browser berbasis teks

ALIGN mengatur perataan teks (LEFT/CENTER/RIGHT)

Contoh :

<IMG SRC=”logo.gif” ALT=”Ini adalah gambar logo” ALIGN=right>