Desain dan Pemrograman Web

20
DESAIN DAN PEMROGRAMAN WEB Pengenala n HTML

description

Belajar Dasar-dasar HTML

Transcript of Desain dan Pemrograman Web

Page 1: Desain dan Pemrograman Web

DESAIN DAN PEMROGRAMAN WEB

Pengenalan HTML

Page 2: Desain dan Pemrograman Web

Pengenalan HTML

Hypertext Markup Language merupkan standard bahasa yang di gunakan untuk menampilkan document web, yang bisa anda lakukan dengan HTML yaitu:

Mengontrol tampilan dari web page dan contentnya.Mempublikasikan document secara online sehingga

bisa di akses dari seluruh dunia.Membuat online form yang bisa di gunakan untuk

menangani pendaftaran, transaksi secara online.Menambahkan object-object seperti image, audi,

video dan juga java applet dalam document HTML.

Page 3: Desain dan Pemrograman Web

Basic Tag HTML

• Tag-tag HTML• Command HTML biasanya disebut TAG,

TAG digunakan untuk menentukan tampilan dari document HTML.

• Contoh: Setiap document HTML di awali dan di akhiri dengan tag HTML

<BEGIN TAG> </END TAG>

<HTML>. . .</HTML>

Page 4: Desain dan Pemrograman Web

Struktur HTML Document

• Document HTML bisa di bagi mejadi tiga bagian utama:1. HTML

Setiap document HTML harus di awali dan di tutup dengan tag HTML

2. HEADBagian header dari document HTML di apit oleh tag <HEAD></HEAD> di dalam 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.

<HTML></HTML>

Page 5: Desain dan Pemrograman Web

3. BODYDocument body di gunakan untuk menampilkan text, image link dan semua yang akan di tampilkan pada web page.

Page 6: Desain dan Pemrograman Web

Ketikkan tag-tag berikut di notepad

Page 7: Desain dan Pemrograman Web

Buka dengan browser internet explorer file one.htm maka outputnya akan di tampilkan seperti gambar di bawah ini.

Page 8: Desain dan Pemrograman Web

Block Level Element

• Block level element yang sering di gunakan :

• Heading (H1 sampai H6)Contoh :

Page 9: Desain dan Pemrograman Web
Page 10: Desain dan Pemrograman Web

Buat Tag HTML

Page 11: Desain dan Pemrograman Web

Pemformatan Page

• BreakTag <BR> di gunakan untuk memulai baris baru pada document HTML, tag ini fungsinya mirip dengan carriage return.

Page 12: Desain dan Pemrograman Web

Font

• Dengan tag <FONT> anda bisa menentukan format tampilan font dalam document HTML seperti color, size, style dan lainya.

Page 13: Desain dan Pemrograman Web

Alignment

• Align attribute digunakan untuk menentukan perataan object dalam document HTML baik berupa text, object, image, paragraph, division dan lain-lain.

Value DescriptionLeft Rata kiri

Right Rata kanan

Center Rata tengah

Justify Rata kanan kiri

Page 14: Desain dan Pemrograman Web

Format text

• Physical FormattingTag Description

<B> ... </B> Bold text

<I> ... </I> Italic text

<U> ... </U> Underline Text

<BIG> ... </BIG> Untuk ukuran yang lebih besar dari normal

<SMALL> ... </SMALL> Untuk ukuran yang lebih kecil dari normal

<STRIKE> ... </STRIKE> Untuk memberi garis di tengah text

<SUP> ... </SUP> Superscript text

<SUB> ... </SUB> Subscript text

<CENTER> ... </CENTER> Center document

Page 15: Desain dan Pemrograman Web

Logical Formatting

Tag Description<EM> ... </EM> Text miring / <I><STRONG> ... </STRONG> Text tebal / <B><DEL> ... </DEL> Mencoret text / <STRIKE><INS> ... </INS> Underline text / <U>

Page 16: Desain dan Pemrograman Web

Quotes / Indenatasi

• Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi Text yang perataanya menjorok kedalam.

Page 17: Desain dan Pemrograman Web

Contoh Quotes

Tag <blockquote>

Page 18: Desain dan Pemrograman Web

List Item

• List item di gunakan untuk mengelompokkan data baik berurutan (ordered list) maupun yang tidak berurutan (unordered list).Ada tiga macam list yang bisa anda tambahkan ke document HTML:1. Unordered List (Bullet) :

Tag Attribute Value Description<UL> TYPE SQUARE

DISCCIRCLE

Bullet KotakBullet TitikBullet Lingkaran

Page 19: Desain dan Pemrograman Web

2. Ordered List (Numbering)

3. Definition ListDefinition List terdiri diapit oleh tag <DL> … </DL>

dan <DT> tag menentukan definition term serta <DD> tag menentukan definition itu sendiri.

Tag Attribute Value Description<OL> TYPE I

iAa

Upper RomanLower RomanUpercaseLowercase

<OL> START N Begin Number

Page 20: Desain dan Pemrograman Web

Contoh Numbering