Anda di halaman 1dari 19
Petunjuk Pengerjaan :  Waktu Praktikum 100 Menit  Pastikan Semua File Praktikum anda, tersimpan
Petunjuk Pengerjaan :  Waktu Praktikum 100 Menit  Pastikan Semua File Praktikum anda, tersimpan
Petunjuk Pengerjaan :  Waktu Praktikum 100 Menit  Pastikan Semua File Praktikum anda, tersimpan

Petunjuk Pengerjaan :

Waktu Praktikum 100 Menit

Pastikan Semua File Praktikum anda, tersimpan di Dalam :

1. DrivepartisiProdase/WAD2015/Kelas/Modul1

2. Buat Folder Nama_Nim [Jika Sudah Ada Skip, Lanjutkan ke Langkah ke-3]

3. Buat Folder Shift_Nama_Nim_ModulX_KodeAsisten

ke-3] 3. Buat Folder Shift_Nama_Nim_ModulX_KodeAsisten  Komponen Praktikum Terdiri dari:  [a01]

Komponen Praktikum Terdiri dari:

[a01] a01StrukturHTML.html

[3]

[a02] a02HeadingDanParagraph.html

[3]

[a03] a03ContentStyling.html

[3]

[a04] a04ContentStylingDanFormatting.html

[3]

[a05] a05ContentGambar.html

[3]

[a06] a06HTMLLink.html

[3]

[a07] a07HTMLTable.html

[9]

27

[a08] HTMLForm

a08FormText.html

[3]

a08FormPassword.html

[3]

a08FormRadio.html

[3]

a08FormFile.html

[3]

a08FormCheckbox.html

[3]

a08FormSelect.html

[3]

a08FormTextArea.html

[3]

a08FormButton.html

[3]

a08zFormregistrasi.html

[3]

a08zFormlogin.html

[3]

30

[a09] a09List.html

[3]

03

[a010] a010layout.html

[40]

40

-Selamat Mengerjakan-

1.

HTML Structure

<!
<!

DOCTYPE html

>
>

<html> <head> <title>Page Title</title> </head> <body>

<!--Content-->

Berhasil

</body>

</html>

DOCTYPE html mendeklarasikan tipe dokumen yakni file HTML Teks antara <html> dan </ html> merupakan syarat wajib sebuah dokumen HTML Teks antara <head> dan </ head> memberikan informasi tentang dokumen HTML Teks antara <title> dan </ title> memberikan title untuk dokumen HTML Teks antara <body> dan </ body> merupakan Konten, UI, isi halaman yang akan terlihat di HTML

[a01]

A. Buatlah Struktur HTML page untuk website, dengan nama file a01StrukturHTML.html

2. HTML Tag, Elements dan Attribute

a. Tag

Adalah teks markup berupa dua karakter "<" dan ">" (tanpa tanda kutip) merupakan cara untuk memberitahu web browser bagaimana suatu text ditampilkan.

Hampir semua tag dalam HTML ditulis secara berpasangan sebagai tag pembuka dan tag penutup.

b. Elements adalah isi dari tag yang berada diantara tag pembuka dan tag penutup.

c. Attribute adalah informasi atau custom tambahan yang diberikan kepada Tag.

Sebagai contoh, <p> adalah sebuah elemen dengan nama Paragraph. Karena ditulis secara berpasangan, maka tag <p> pembuka harus memiliki penutup </p>. <p> dapat diberikan Atribut seperti Styling, yang akan kita bahas pada Latihan[a03]

3.

HTML Headings dan Paragraph Heading dan paragraph adalah tag yang digunakan di dalam tag Body.

a. Headings h1 s/d h6

<h1>Welcome To Our Website</h1>

<h2>Tentang</h2>

b. Paragraph

<p>Mengapa Harus Di Malam Hari</p>

c. Space

<p>Mengapa Harus Di<br>Malam Hari</p>

Mengapa Harus Di <br> Malam Hari </p> [a02] Buatlah Sebuah Konten berisi seperti gambar dibawah,

[a02]

Buatlah Sebuah Konten berisi seperti gambar dibawah, Save dengan nama a02HeadingDanParagraph.html, gunakan struktur yang anda pelajari sebelumnya [a01]:

gambar dibawah, Save dengan nama a02HeadingDanParagraph.html , gunakan struktur yang anda pelajari sebelumnya [a01]:

4.

HTML Styling

a. Font Color, Warna Teks

b. Fonts Type/Face/family, Jenis Teks

c. Font Size, Ukuran Text

d. Text Alignment, Posisi Teks

<! DOCTYPE html > <html>
<!
DOCTYPE html
>
<html>

<body>

<h1 style="text-align:center">Heading</h1> <p>ini adalah contoh </p> <p style="color:red">textColor </p> <p style="font-family:courier">Font Style </p> <p style="font-size:50%">TextSize</p>

</body>

</html>

Pada Contoh diatas, anda memberikan Styling pada Element, dengan menyisipkan Atribut kepada Element <h1> dan <p>

[a03]

Buatlah Sebuah Konten berisi seperti gambar dibawah, Save dengan nama a03ContentStyling.html, anda dapat menggunakan file yang anda pelajari sebelumnya [a02], Pastikan untuk Save As.

anda pelajari sebelumnya [a02], Pastikan untuk Save As. Catatan:  Untuk Pewarnaan selain menggunakan nama warna

Catatan:

Untuk Pewarnaan selain menggunakan nama warna seperti black, blue atau red, anda dapat memberikan warna dengan menggunakan HTML-Color-Code, generate color code secara otomatis di sini http://www.colorpicker.com/

Sedangkan untuk Alignment, dapat menggunakan center, left, right dan justify.

Satuan Ukuran pada HTML dan CSS yang umum digunakan adalah Pt, Px, dan %

5.

HTML Text Formatting

a.

Bold

<b>

b.

Italic

<i>

c. Inserted

 

<ins>

 

d. Highlighted

<mark>

e. Deleted

<del>

f.

Subscript

Subscript

<sub>

g.

Superscript Superscript

<sup>

Penggunaan :

<p>ini adalah teks <i>Italic</i></p>

Pada Contoh diatas, anda memberikan Formating Text pada Element, dengan menyisipkan Atribut kepada Element tag <p>

[a04]

Buatlah Sebuah Konten berisi seperti gambar dibawah, Save dengan nama a04ContentStylingDanFormatting.html, anda dapat menggunakan file yang anda pelajari sebelumnya [a03], Pastikan untuk Save As.

, anda dapat menggunakan file yang anda pelajari sebelumnya [a03], Pastikan untuk Save As.

6.

HTML Images Pada HTML, Gambar di definisikan dengan tag <img> Berikut beberapa atribut yang digunakan dalam tag Image :

: Source URL/Direktori sumber dari Gambar

: teks alternative yang ditampilkan apabila image/gambar gagal ter-load

Src

Alt

: Satuan ukuran Lebar

Width

: Satuan ukuran Tinggi

Height

Border : Setting Garis Tepi pada Gambar

Contoh Penggunaan :

<img src="images/praktikum.jpg" alt="skema praktikum" width="100px" height="200px">

[a05]

Dengan Gambar yang telah disediakan, Buatlah Sebuah Konten berisi seperti gambar dibawah, Save dengan nama a05ContentGambar.html, anda dapat menggunakan file yang anda pelajari sebelumnya [a04], Pastikan untuk Save As, seperti gambar dibawah ini :

, anda dapat menggunakan file yang anda pelajari sebelumnya [a04], Pastikan untuk Save As , seperti

7.

HTML Link [Hyperlink] HTML Link didefinisikan dengan tag <a>, berfungsi sebagai navigasi untuk berpindah dari suatu page, ke page lain.

HTML Link Atrributes :

Href

Target : mendeifinisikan dimana, konten/page tujuan akan ditampilkan

: mendefinisikan address dari page yang dituju

_blank

_self

: membuka page, di tab baru

: membuka page, di halaman ini menggantikan halaman sebelumnya

Text Link

<a href="http://prodase.bis.telkomuniversity.ac.id" target="_self">Prodase</a>

Image link

<a href="http://prodase.bis.telkomuniversity.ac.id" target="_blank">

<img src="/images/logoProdase.png" alt="WebOfficial" border="0"/>

</a>

[a06]

Dengan Gambar yang telah disediakan, Buatlah 2 Buah HTML Link,

1. Sebuah Link dengan Teks, tanpa target.

2. Sebuah link dengan Teks, dengan target _self

3. Sebuah link dengan Teks, dengan target _blank

Buat ketiga Link tersebut, menuju halaman a01StrukturHTML.html Save file dengan nama a06HTMLLink.html, anda dapat menggunakan file yang anda pelajari sebelumnya [01-e], Pastikan untuk Save As!

nama a06HTMLLink.html , anda dapat menggunakan file yang anda pelajari sebelumnya [01-e], Pastikan untuk Save As

8.

HTML Table HTML Table memungkinkan presentasi data teratur seperti gambar, text, links maupun layout, dalam presentasi Row dan Column.

HTML Table di inisiasikan dengan tag <table>, dengan tag <tr> untuk membuat row, dan tag <td> untuk column / data cells serta <th> untuk membuat headings pada table.

HTML Table Attribute :

Border

Cellpadding

Cellspacing

Colspan

Rowspan

Width Height

: Border digunakan untuk mengatur tampilan / visibility dari garis pada table. Border 1/0, untuk ada atau tidaknya garis. Sedangkan untuk ketebalan dapat menggunakan px

: Mendefinisikan jarak antara konten dalam cell dengan border

: Mendefinisikan lebar jarak antar border

: Digunakan untuk merge / menggabungkan column

: Digunakan untuk merge / menggabungkan rows

: lebar dalam % atau px

<!DOCTYPE html> <html> <head> <title> HTML Table Colspan/Rowspan </title>

<!DOCTYPE html> <html> <head> <title>HTML Table Colspan/Rowspan</title> </head> <body> <table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html>

[a07]

Save File dengan nama a07HTMLTable.html

1. Buatlah Table seperti Gambar DIbawah, jumlah Kolom table adalah 3, Gunakan colspan dan berikan style yang diperlukan pada <tr> dan <td> sesuai gambar, serta berikan jarak antara data dengan Border sebanyak 10px.

2. Buatlah Table yang berisikan data seperti diabwah ini dengan table Heading<th> Nama, Nim dan Kontak. Di kolom terbawah berikan keterangan kelas anda dengan mengisikan nya pada cell dengan atribut colspan, serta berikan jarak antara data dengan Border sebanyak 10px.

anda dengan mengisikan nya pada cell dengan atribut colspan, serta berikan jarak antara data dengan Border

9. HTML Form HTML Form adalah suatu bagian yang berfungsi sebagai input atau masukan dari pengguna yang kemudian akan diproses atau diolah untuk dapat digunakan sesuai dengan kebutuhan. Contohnya proses pengiriman data, browse, hapus, penyuntingan data dan lain sebagainya.

HTML form ditandai dengan tag <form> </form>

Berikut ini beberapa contoh kegunaan Form dalam web:

memperoleh data-data user baik nama, alamat dan data lainnya

memperoleh informasi pembelian secara online

memperoleh feedback dari user mengenai website anda.

Form Method Atributte

Pada saat submit form terdapat beberapa HTTP method (GET dan POST).

Grouping Form Data

Elemen <fieldset> digunakan untuk mengelompokkan satu form dengan form lain.

Elemen <legend> digunakan untuk mendefinisikan caption untuk elemen fieldset.

HTML Form Attributes

Action : halaman yang akan dituju

Target : target yang akan dituju dari atribut action ( _self, _blank etc)

Name : untuk identifikasi nama form

Method :

o

o

GET

POST

Perbedaan antara Method Get dan Post akan Di bahas lebih lanjut pada Modul JSP nanti, namun jika anda tertarik anda dapat membaca artikel berikut

namun jika anda tertarik anda dapat membaca artikel berikut http://www.diffen.com/difference/GET_(HTTP)_vs_POST_(HTTP)

Form Element.

Input Element

Elemen <input> adalah form element paling penting.

Berfungsi dalam pemrosesan input data sebagai elemen yang digunakan dalam pemrosesan data

Input Atribute

beberapa atribut untuk input adalah :

- Type :

sebagai tipe input apa yang dimasukkan. Berikut ini beberapa tipe dari atribut type :

Type

Description

Text

Medefinisikan input text normal

Password

Untuk inputan yang tidak dapat terlihat (bentuk bullet)

Radio

Mendefinisikan input radio button (untuk memilih satu dari beberapa pilihan) Contoh untuk gender, terdapat pria dan wanita.

Submit

Mendefinisikan submit button (untuk submitting form)

Checkbox

Mendefinsikan input type untuk memilih input lebih dari satu.

File

Mendefinisikan input untuk input file

- Name : sebagai nama yang mendeskripsikan identitas dari inputan tersebut

- Value : sebagai keterangan dari elemen tersebut.

- Maxlength : Karakter yang dapat dimasukkan, Atribut ini dapat digunkan untuk input type text dan password

PENGERJAAN POIN a08 TIDAK DIWAJIBKAN MENGGUNAKAN DataGrouping dengan <Fieldset>!

[a08] Buat Textbox Seperti gambar Dibawah ini, beri nama a08FormText.html Text :

gambar Dibawah ini, beri nama a08FormText.html Text : [a08] Buat Passwordbox Seperti gambar Dibawah ini, beri
gambar Dibawah ini, beri nama a08FormText.html Text : [a08] Buat Passwordbox Seperti gambar Dibawah ini, beri

[a08] Buat Passwordbox Seperti gambar Dibawah ini, beri nama

a08FormPassword.html

Password :

Dibawah ini, beri nama a08FormPassword.html Password : [a08] Buat Radiobutton Seperti gambar Dibawah ini, beri nama

[a08] Buat Radiobutton Seperti gambar Dibawah ini, beri nama

a08FormRadio.html

Radio Button :

Password : [a08] Buat Radiobutton Seperti gambar Dibawah ini, beri nama a08FormRadio.html Radio Button :
Password : [a08] Buat Radiobutton Seperti gambar Dibawah ini, beri nama a08FormRadio.html Radio Button :

[a08] Buat input type File Seperti gambar Dibawah ini, beri nama

a08FormFile.html

File :

gambar Dibawah ini, beri nama a08FormFile.html File : [a08] Buat Checkbox Seperti gambar Dibawah ini, beri
gambar Dibawah ini, beri nama a08FormFile.html File : [a08] Buat Checkbox Seperti gambar Dibawah ini, beri

[a08] Buat Checkbox Seperti gambar Dibawah ini, beri nama

a08FormCheckbox.html

Checkbox :

nama a08FormFile.html File : [a08] Buat Checkbox Seperti gambar Dibawah ini, beri nama a08FormCheckbox.html Checkbox :
nama a08FormFile.html File : [a08] Buat Checkbox Seperti gambar Dibawah ini, beri nama a08FormCheckbox.html Checkbox :

Select Element

Elemen <select> untuk mendefinisikan drop-down list.

Elemen <option> untuk mendefinisikan opsi untuk di select.

[a08] Buat HTML Select Seperti gambar Dibawah ini, beri nama

a08FormSelect.html

untuk mendefinisikan opsi untuk di select. [a08] Buat HTML Select Seperti gambar Dibawah ini, beri nama

TextArea

Elemen <textarea> digunakan untuk multi-line input field. Contoh untuk penulisan alamat, dll.

[a08] Buat Text Area Seperti gambar Dibawah ini, beri nama a08FormTextArea.html

Seperti gambar Dibawah ini, beri nama a08FormTextArea.html Button Elemen <button> sebagai processor /trigger.
Seperti gambar Dibawah ini, beri nama a08FormTextArea.html Button Elemen <button> sebagai processor /trigger.

Button

Elemen <button> sebagai processor /trigger. Memiliki atribut seperti :

Onclick : informasi yang muncul setelah button di klik.

Target : _self atau _blank

Value : teks yang berisi di dalam button

[a08] Buat Button Seperti gambar Dibawah ini, beri nama

a08FormButton.html

 Value : teks yang berisi di dalam button [a08] Buat Button Seperti gambar Dibawah ini,

[a08] Gabungkanlah Semua Elemen Form Hingga Menjadi Seperti Kasus di bawah ini!

Buatlah Form untuk Registrasi dengan nama a08zFormregistrasi.html, dan login dengan nama file HTML a08zFormlogin.html, menggunakan referensi yang telah anda buat sejak [a01]!

Usahakan interface seperti gambar dibawah :

a08zFormlogin.html , menggunakan referensi yang telah anda buat sejak [a01]! Usahakan interface seperti gambar dibawah :
a08zFormlogin.html , menggunakan referensi yang telah anda buat sejak [a01]! Usahakan interface seperti gambar dibawah :

List

Fungsi List adalah untuk membuat daftar dalam dokumen HTML. Sebuah list terdiri dari heading yang berupa Ordered <ol> atau Unordered <ul> dan untuk setiap elemen nya <li>

Ordered List Type dapat diisikan 1/I/a/A

Unordered list Style dapat diisikan Format berikut :

<ol type=””>Alphabet:

<ul style=””>Alphabet:

<li>A</li>

<li>A</li>

<li>B</li>

<li>B</li>

<li>C</li>

<li>C</li>

</ol>

</ul>

list-style-type:disc

list-style-type:circle

list-style-type:square

list-style-type:none

 list-style-type:square  list-style-type:none [a09] Save dengan nama file a09List.html Buatlah Navigasi

[a09] Save dengan nama file a09List.html Buatlah Navigasi Menu ke Halaman HTML yang telah anda Buat Sebelumnya [4 Buah] dengan menjadikan setiap elemen <li> menjadi HTML Link.

10. HTML Layout Penggunaan Layout di HTML layaknya menggunakan div dan id pada HTML Menggunakan CSS, Namun pada pembelajaran saat ini yang akan kita pelajari adalah membuat layout sederhana mengunakan konsep Table.

Pada HTML Layout dikenal istilah Umum, istilah tersebut ialah :

Header

Nav (Navigation Menu, minimal 1)

Top

Left

Content

Side Content

Footer

[A010]

Buatlah Layout Kreasi anda Sendiri dengan menggunakan konsep Table, (Petunjuk : Maksimalkan penggunaan Colspan dan Rowspan) save dengan nama a010layout.html Minimal Requirement adalah Memiliki 1 header, 1NavigationPane, 1 Content, 1 Footer

save dengan nama a010layout.html Minimal Requirement adalah Memiliki 1 header, 1NavigationPane, 1 Content, 1 Footer

[Bonus] Buatlah Web Interface, Sebagai Berikut!

[Bonus] Buatlah Web Interface, Sebagai Berikut!
[Bonus] Buatlah Web Interface, Sebagai Berikut!