Download - Desain dan Pemrograman Web
![Page 1: Desain dan Pemrograman Web](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/1.jpg)
DESAIN DAN PEMROGRAMAN WEB
Pengenalan HTML
![Page 2: Desain dan Pemrograman Web](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/2.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/3.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/4.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/5.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/6.jpg)
Ketikkan tag-tag berikut di notepad
![Page 7: Desain dan Pemrograman Web](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/7.jpg)
Buka dengan browser internet explorer file one.htm maka outputnya akan di tampilkan seperti gambar di bawah ini.
![Page 8: Desain dan Pemrograman Web](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/8.jpg)
Block Level Element
• Block level element yang sering di gunakan :
• Heading (H1 sampai H6)Contoh :
![Page 9: Desain dan Pemrograman Web](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/9.jpg)
![Page 10: Desain dan Pemrograman Web](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/10.jpg)
Buat Tag HTML
![Page 11: Desain dan Pemrograman Web](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/11.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/12.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/13.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/14.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/15.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/16.jpg)
Quotes / Indenatasi
• Untuk membuat indentasi paragraph kita bisa menggunakan BLOCKQUOTE, untuk indentasi Text yang perataanya menjorok kedalam.
![Page 17: Desain dan Pemrograman Web](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/17.jpg)
Contoh Quotes
Tag <blockquote>
![Page 18: Desain dan Pemrograman Web](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/18.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/19.jpg)
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](https://reader035.vdocuments.site/reader035/viewer/2022062400/568c33e41a28ab02358e6ca4/html5/thumbnails/20.jpg)
Contoh Numbering