Jika kita perhatikan gambar di atas, pada bagian yang berwarna biru adalah hasil dari coding
|
|
|
- Surya Hartanto
- 7 tahun lalu
- Tontonan:
Transkripsi
1 HANDOUT PEMROGRAMAN BERBASIS WEB SINTAX DASAR HTML Berikut ini adalah sintax dasar dari bahasa HTML : <body> Halo. ini adalah website kami </body> Hasil dari coding di atas adalah sebagai berikut : Jika kita perhatikan gambar di atas, pada bagian yang berwarna biru adalah hasil dari coding Kemudian tulisan yang muncul di layar browser adalah hasil dari coding <body> Halo. ini adalah website kami </body>
2 Sintax dasar HTML memuat elemen-elemen yang dibuka dengan tag buka, dan ditutup dengan tag tutup. Tag buka dituliskan dengan format <nama tag>, sedangkan tag tutup ditulis dengan format </nama tag>. Elemen-elemen utama yang ada pada bahasa HTML adalah dan <body>. Pada elemen diisi dengan konfigurasi yang berhubungan dengan browser, misalnya elemen <title> atau elemen <meta>. Sedangkan elemen <body> memuat semua elemen yang akan ditampilkan pada browser, misalnya elemen <font>, <img>, <table>, <form>, dan sebagainya. Untuk penggunaan elemen-elemen ini akan dijelaskan lebih jauh pada bagian berikutnya. File HTML disimpan dengan extenssion.htm atau.html (contoh : index.htm atau index.html). FORMAT DOKUMEN Pada bagian ini kita akan mengenal lebih jauh bagaimana coding tentang format dokumen pada HTML, ASP, dan PHP. Format dokumen yang akan dibahas di sini adalah : Format teks (paragraf, heading, font size, font color, dan sebagainya). List atau daftar terstruktur. Link. Gambar atau image. FORMAT TEKS Paragraf Perhatikan gambar berikut ini :
3 Pada gambar di atas terdapat dua bagian yang berbeda, di mana pada bagian dari ketiga ayat yang pertama terdapat jarak atau spasi satu sama lain, sedangkan pada bagian berikutnya tidak terdapat jarak antar ketiga ayat. Bagaimana sintaxnya? Dalam bahasa HTML, codingnya adalah sebagai berikut : <body> Ayat-ayat Alkitab Amsal 17 : 17 Filipi 4 : 13 Amsal 30 : 7-9 Amsal 17 : 17<br> Filipi 4 : 13<br> Amsal 30 : 7-9 </body> Jika kita perhatikan, bagian yang terdapat jarak merupakan hasil dari tag paragraf dan di mana setiap pasangan tag tersebut akan menghasilkan satu paragraf baru. Sedangkan pada bagian yang tidak berjarak merupakan hasil dari tag <br> di mana tag tersebut membuat kata atau karakter berikutnya berada pada baris selanjutnya (pindah baris di bawahnya).
4 Preformatted Text Bagaimana jika kita ingin menampilkan hasil apa adanya sesuai dengan apa yang kita tulis, tanpa berubah karena pengaruh format dari browser? Kita dapat menggunakan elemen HTML yang lain yaitu Preformatted Text. Perhatikan gambar berikut ini : Codingnya dalam bahasa HTML adalah sebagai berikut : <body> <pre> Ayat-ayat Alkitab Amsal 17 : 17 Filipi 4 : 13 Amsal 30 : 7-9 </pre> </body>
5 Blockquote Elemen <blockquote> digunakan untuk menampilkan kutipan teks yang diambil dari teks lain. Perhatikan gambar berikut ini : Elemen blockquote secara otomatis akan membuat jarak dari tepi browser untuk menampilkan hasil kutipan. Dalam HTML ditulis sebagai berikut : <body> Ayat favorit : <blockquote> "Dua hal aku mohon kepada-mu, jangan itu Kautolak sebelum aku mati, yakni :<br> Jauhkanlah dari padaku kecurangan dan kebohongan.<br> Jangan berikan kepadaku kemiskinan atau kekayaan.<br> Biarkanlah aku menikmati makanan yang menjadi bagianku.<br> Supaya, kalau aku kenyang,<br> aku tidak menyangkal-mu dan berkata : Siapa Tuhan itu?<br> Atau, kalau aku miskin,<br>
6 aku mencuri, dan mencemarkan nama Allahku" </blockquote> Sumber : Amsal 30 : 7-9 </body> Perataan Paragraf Lalu, bagaimana jika kita ingin mengatur perataan dari paragraf yang kita buat? Perhatikan gambar berikut ini : Untuk mendapatkan hasil seperti yang ditampilkan browser di atas, perhatikan coding HTML berikut ini : <body> <p align=left> Amsal 17 : 17
7 <p align=center> Filipi 4 : 13 <p align=right> Amsal 30 : 7-9 </body> Jika kita perhatikan dari coding di atas, perataan paragraf diatur dengan attribut align seperti yang tampak dari kode <p align=left> di atas. Jika kita menginginkan paragraf rata ke kiri, maka kita gunakan align=left. Sedangkan jika kita ingin mengatur kerataan tengah dan kanan, maka kita gunakan align=center dan align=right. Atribut Font Kita dapat menambahkan beberapa atribut pada huruf yang kita buat, seperti merubah ukuran huruf, membuatnya menjadi tebal, miring, bergaris bawah, maupun berwarna. Perhatikan gambar berikut ini : Sintaxnya dalam HTML adalah :
8 <body> <font size=10> Huruf berukuran sepuluh </font> <font color=#ff0000> <b> Huruf berwarna merah dan tebal </b> </font> <i> Huruf ditulis miring </i> <u> Huruf bergaris bawah </u> </body>
9 Mari kita perhatikan, jika kita ingin merubah ukuran huruf yang kita gunakan, maka kita menggunakan sintax <font size=10>. Ukuran default huruf adalah 3. Jika kita ingin lebih besar hurufnya, maka kita bisa menggunakan ukuran 4, 5, dan seterusnya. Sedangkan untuk membuat huruf lebih kecil, kita gunakan ukuran lebih kecil dari 3, yaitu 2 atau 1. Kemudian untuk membuat huruf menjadi berwarna, kita gunakan sintax <font color=#ff0000> dan ditutup dengan tag </font>. Warna merah kita tulis dengan kode RGBnya, yaitu #FF0000. Untuk kode RGB, kita bisa melihatnya di halaman belakang buku ini. Untuk membuat tulisan menjadi tebal, kita gunakan tag <b> dan ditutup dengan tag </b>. Untuk huruf dicetak miring, digunakan tag <i> dan ditutup dengan </i>, sedangkan huruf bergaris bawah dibuka dengan tag <u> dan ditutup dengan tag </u>. Untuk coding dalam ASP dan PHP menggunakan aturan yang sama dengan codingcoding sebelumnya. LIST Ada 2 macam list atau urutan yang sering digunakan, yaitu Ordered List (numbering) dan Unordered List (bullets). Perhatikan gambar berikut ini : Sintax penulisan codingnya sebagai berikut :
10 <body> Contoh Ordered List : <ol type=a> <li>point 1</li> <li>point 2</li> <li>point 3</li> </ol> <ol type=a> <li>point 1</li> <li>point 2</li> <li>point 3</li> </ol> <ol type=1> <li>point 1</li> <li>point 2</li> <li>point 3</li> </ol> <ol type=i> <li>point 1</li> <li>point 2</li> <li>point 3</li> </ol>
11 <ol type=i> <li>point 1</li> <li>point 2</li> <li>point 3</li> </ol> <ol type=1 start=15> <li>point 1</li> <li>point 2</li> <li>point 3</li> </ol> </body> Ordered List ditulis dengan menggunakan tag <ol> dan ditutup dengan tag </ol>. Dalam tag ini kita dapat mendefinisikan tipe daftar yang kita inginkan, misalnya 1 2 3, A B C, dan sebagainya dengan menuliskan atribut type=1 atau type=a dalam tag <ol>. Selanjutnya untuk point-pointnya digunakan tag <li> dan ditutup dengan tag </li>. Sedangkan untuk Unordered List dapat kita lihat contohnya di bawah ini :
12 Sintaxnya dalam HTML adalah sebagai berikut : <body> Contoh Unordered List : <ul type=disc> <li>point 1</li> <li>point 2</li> <li>point 3</li> </ul> <ul type=circle> <li>point 1</li>
13 <li>point 2</li> <li>point 3</li> </ul> <ul type=square> <li>point 1</li> <li>point 2</li> <li>point 3</li> </ul> </body> Untuk Unordered List, kita membukanya dengan tag <ul> dan menutupnya dengan tag </ul>. Atribut type yang disediakan adalah square (kotak), circle (bulat putih), dan disc (bulat hitam). Sedangkan point-pointnya dimasukkan ke dalam tag <li></li>. LINK Link adalah object yang dikenal dalam web-based application, di mana jika object tersebut di-klik dengan mouse (pointer), maka kita akan dibawa ke bagian yang dituju oleh link tersebut. Link dapat berupa teks atau image (gambar). Berikut ini sintax dasar dalam HTML untuk link yang berupa teks dan image : <title>title Anda</title> <body> <a href= halaman_tujuan.html >Ini link berbentuk teks</a> <a href= halaman_tujuan.php ><img src= image_pilihan.jpg alt= Ini link dengan image ></a>
14 <a ke sebuah alamat </a> </body> Sebuah link berupa teks akan tampil dengan warna biru dan bergaris bawah, sedangkan untuk link berupa image maka pada image akan terdapat border (garis tepi) berwarna biru. Jika pointer mouse melewati sebuah object link, maka pointer akan berubah menjadi gambar jari telunjuk. Link ditulis dengan tag <a href= > dan ditutup dengan tag </a>. Atribut yang dapat kita tambahkan dalam tag <a> adalah halaman web tujuan, misalnya <a href= halaman_tujuan.html > atau sebuah alamat . Jika tujuannya adalah sebuah alamat , maka saat pointer di-klik, maka akan membuka aplikasi dengan alamat tujuan seperti yang tercantum dalam tujuan link. Contohnya <a Kita juga dapat membuat link yang mengarah ke bagian tertentu dalam halaman web yang sama. Untuk itu kita menggunakan atribut name dalam tag <a>. Perhatikan coding berikut ini : <title>title Anda</title> <body> <a name= bagian_tujuan >Ini bagian yang akan dituju oleh link</a> <a href= #bagian_tujuan >Ini link yang akan menuju ke bagian tujuan</a> </body> Bagian yang akan kita jadikan tujuan, kita tuliskan dalam tag <a name= >. Kemudian linknya kita tulis dengan <a href= #bagian_yang_dituju >. Perhatikan penggunaan tanda kres (#) di atas.
15 Penggunaan link dalam coding ASP dan PHP dapat dilakukan seperti contoh-contoh yang telah kita pelajari sebelumnya, yaitu dengan menambahkan sintax response.write pada ASP atau sintax echo ; pada PHP. GAMBAR ATAU IMAGE Untuk menampilkan gambar, kita dapat menggunakan sintax standar yang disediakan HTML sebagai berikut : <img src= gambar.jpg > Jika gambar yang ingin kita tampilkan berada di direktori parent (direktori yang tingkatnya lebih tinggi dari direktori di mana file coding kita berada), maka sintaxnya menjadi : <img src=../gambar.jpg > Sedangkan jika gambar tersebut berada di direktori child (direktori yang tingkatannya berada di bawah direktori tempat coding kita berada) misalnya di direktori image, maka sintaxnya menjadi : <img src= /image/gambar.jpg > KOMENTAR Dalam menulis program atau coding, seringkali kita perlu memberikan komentar untuk menandai action-action atau bagian program yang memerlukan perhatian kita. Komentar ini sekedar menjadi catatan saja, dan tidak perlu ikut diproses oleh komputer. Dalam HTML, kita dapat memberikan komentar dengan menuliskan sintax sebagai berikut : <!- - Komentar ditulis di sini - -> Jika kita ingin menulis komentar dalam script ASP, maka sintaxnya kita gunakan tanda petik tunggal ( ) seperti berikut ini : Komentar ditulis di sini Komentar ditulis di sini (per baris) Sedangkan dalam PHP, ditulis seperti ini : // Komentar ditulis di sini // Komentar ditulis di sini (per baris) atau bisa juga ditulis seperti ini : /* Komentar ditulis di sini */ FRAME Apakah Anda pernah melihat sebuah halaman web yang terbagi menjadi beberapa bagian yang saling terpisah? Contohnya seperti gambar berikut ini :
16 Gambar di atas menunjukkan sebuah halaman web yang terbagi menjadi 3 frame berdasarkan baris (rows). Sintax HTMLnya adalah sebagai berikut : <frameset rows="20%,30%,50%"> <frame src="x.html"> <frame src="y.html"> <frame src="z.html"> </frameset> Mari kita perhatikan bersama. Untuk membuat frame kita menggunakan tag <frameset> dan ditutup dengan tag </frameset>. Untuk membuat frame berdasarkan baris, kita menggunakan atribut rows, kemudian diikuti dengan jumlah baris dan lebar masingmasing baris seperti contoh <frameset rows= 20%,30%,50% >. Kemudian untuk menampilkan halaman untuk masing-masing baris frame, digunakan tag <frame src= >. Pada contoh di atas, baris frame pertama menampilkan isi dari file x.html, baris frame kedua menampilkan isi dari file y.html, dan baris frame ketiga menampilkan isi dari file z.html. Sedangkan untuk membuat frame berdasarkan kolom, kita dapat menggunakan atribut <frameset cols= > seperti contoh berikut ini :
17 <frameset cols="20%,30%,50%"> <frame src="x.html"> <frame src="y.html"> <frame src="z.html"> </frameset> Hasilnya seperti yang terlihat di gambar berikut ini : Bagaimana kalau kita ingin menggabungkan antara baris dan kolom menjadi satu halaman web? Perhatikan sintax berikut ini : <frameset rows="20%,30%,50%">
18 <frame src="x.html"> <frameset cols="20%,30%,50%"> <frame src="x.html"> <frame src="y.html"> <frame src="z.html"> </frameset> <frame src="z.html"> </frameset> Sintax di atas akan menghasilkan halaman web seperti berikut ini : ATRIBUT MARGIN Kita dapat mengatur jarak isi dari frame terhadap garis tepi samping dan garis tepi atas/bawah dari frame. Perhatikan contoh sintax berikut ini : <frameset rows="20%,30%,50%"> <frame src="x.html">
19 <frame src="y.html marginwidth=50 marginheight=50> <frame src="z.html"> </frameset> Sintax di atas akan menghasilkan halaman web seperti di bawah ini : Kalau kita perhatikan, baris frame kedua memiliki jarak dengan garis tepi frame sebanyak 50 pixel. Ini adalah akibat dari penggunaan atribut margin seperti yang muncul pada sintax <frame src= y.html marginwidth=50 marginheight=50>. Atribut marginwidth mengatur tentang jarak dari sisi kiri dan kanan, sedangkan marginheight mengatur jarak dari tepi atas dan bawah. Kita dapat menggunakan marginwidth saja, marginheight saja, atau menggunakan keduanya secara bersamaan. ATRIBUT FRAMEBORDER Bagaimana kalau kita tidak menginginkan adanya garis tepi yang mengganggu tampilan dari masing-masing frame? Kita dapat menggunakan atribut frameborder untuk menjawabnya. Perhatikan sintax berikut ini : <frameset rows="20%,30%,50%" frameborder=no>
20 <frame src="x.html"> <frame src="y.html > <frame src="z.html"> </frameset> Sintax di atas akan menghasilkan halaman web seperti yang terlihat di bawah ini : Jika kita perhatikan, sudah tidak muncul lagi garis yang membatasi antar frame yang mengganggu tampilan halaman web kita. ATRIBUT SCROLLING Kemudian, bagaimana caranya jika kita ingin menghilangkan tombol scrolling yang ada di tepi kanan tiap-tiap frame? Perhatikan gambar berikut ini :
21 Mari kita perhatikan bersama-sama. Fasilitas scrolling pada frame kedua sudah tidak muncul lagi. Akibatnya kita tidak dapat menggulung frame kedua ke bawah dan melihat isinya. Sintaxnya adalah sebagai berikut : <frameset rows="20%,30%,50%"> <frame src="x.html"> <frame src="y.html scrolling=no> <frame src="z.html"> </frameset> ATRIBUT TARGET Jika sebuah frame memuat isi dari file yang berupa link, maka kita harus mendefinisikan ke bagian mana link tersebut akan dibuka. Perhatikan gambar berikut ini :
22 Pada gambar di atas, frame kedua memuat sebuah link. Pertanyaannya, jika link di-klik, di bagian mana halaman yang akan dibuka link itu ditampilkan? Untuk itu kita dapat mendefinisikan bagian yang akan menampilkan tujuan sebuah link. Perhatikan sintax di bawah ini : <frameset rows="20%,30%,50%"> <frame src="x.html"> <frame src="y.html name= frame2 > <frame src="z.html"> </frameset> Pada bagian frame kedua, kita tambahkan atribut name, kemudian kita beri nama bagian tersebut, misalnya frame2. Selanjutnya, pada file y.html, kita tambahkan sintax sebagai berikut :
23 <body> <font size=5> <a href="tujuan.html" target="frame2"> Ini link ke frame2 </a> </font> Dalam sintax <a href> kita tambahkan atribut target, dan diisi dengan nama bagian yang sudah kita set di halaman frame sebelumnya. Akibatnya, jika kita klik link yang ada, maka halaman tujuan akan ditampilkan di bagian yang kita inginkan. Dalam menentukan target sebuah link pada frame, kita dapat menggunakan ekspresi yang disediakan oleh HTML. Jika kita isikan target dengan _blank maka link tersebut akan membuka halaman tujuan di halaman baru yang dibuka secara terpisah. Jika target diisi dengan _top maka link akan membuka halaman tujuan di halaman yang sama, tapi meniadakan seluruh struktur frame yang ada. Jika diisi dengan _self maka link akan membuka halaman tujuan di bagian yang sama dengan link yang memanggilnya. Sedangkan jika diisi dengan _parent, maka akan ditampilkan di halaman sebelumnya. IFRAME Kita juga dapat membuat frame yang berada di tengah-tengah halaman web kita. Perhatikan gambar berikut ini :
24 Untuk membuat frame seperti gambar di atas, sintax yang digunakan adalah sebagai berikut : <iframe align=left src="x.html"> </iframe> Sintax dibuka dengan tag <iframe> dengan atribut align untuk posisinya (kita bisa pilih left, center, atau right), atribut src untuk memanggil halaman tujuan, dan ditutup dengan tag </iframe>. TABEL Dalam menyajikan data di halaman web, kita sering melakukannya dalam bentuk tabeltabel yang memuat data secara informatif dan statistikal. HTML membantu kita dalam membuat tabel sesuai yang kita butuhkan. Perhatikan gambar berikut ini :
25 Sintaxnya dalam HTML adalah sebagai berikut : <body> <table border=1 width=80%> <td></td> <th>html</th> <th>asp</th> <th>php</th> <th>kelas A</th> <td align=left valign=top>kosong <br> (Masih tersedia 14 kursi)</td> <td align=center valign=top>penuh</td> <td align=right valign=top>penuh</td> <th>kelas B</th> <td align=left valign=middle>penuh</td> <td align=center valign=middle>kosong<br> (Masih tersedia 3 kursi)</td> <td align=right valign=middle>penuh</td> <th>kelas C</th> <td align=left valign=bottom>penuh</td> <td align=center valign=bottom>penuh</td>
26 <td align=right valign=bottom>kosong<br> (Masih tersedia 7 kursi)</td> <caption valign=bottom> Tabel 1. Contoh penggunaan tabel dengan perataan sel </caption> </table> </body> Mari kita pelajari bersama-sama. Pembuatan tabel dibuka dengan tag <table> dan ditutup dengan tag </table>. Lebar tabel dapat kita definisikan sendiri sesuai dengan kebutuhan kita dengan menambahkan sintax width pada tag <table>, contohnya <table width=80%>. Ini artinya lebar tabel yang akan ditampilkan adalah 80% dari lebar layar monitor. Kemudian untuk garis pembatas antar sel, kita gunakan sintax border, contohnya <table border=1 width=80%>. Jika kita menginginkan garis yang lebih besar, maka kita bisa gunakan angka 2, 3, atau yang lebih besar lagi. Untuk menampilkan data, kita gunakan tag yang artinya table row. Kemudian di dalamnya kita gunakan tag <td></td> yang artinya table data. Di dalam tag <td> inilaha data ditempatkan dan diatur tampilannya. Untuk mengatur tampilan data, kita dapat menggunakan beberapa atribut, yaitu align (untuk mengatur posisi horizontalnya) dan valign (untuk mengatur posisi vertikalnya). Align dapat diisi dengan left, center, atau right, sedangkan valign bisa diisi dengan top, middle, atau bottom. Jika kita ingin menampilkan data dengan tulisan yang agak berbeda, kita dapat melihat contoh sintax berikut ini : <table> <td> <font face=arial size=10 color=#ff0000> <b><i> Ini contoh tulisan yang berbeda </I></b> </font> </td> </table>
27 Semua atribut tentang font (huruf) kita tempatkan di dalam tag <td></td>. Demikian juga jika kita ingin menampilkan gambar (image) dalam tabel kita. Contohnya sebagai berikut : <table> <td> <img src= gambar.jpg alt= Ini contoh gambar dalam tabel > </td> </table> Selanjutnya untuk menampilkan header kolom dan header baris, kita gunakan tag <th></th> yang artinya table header. Anda dapat melihat contohnya seperti sintax di atas. Terakhir, untuk membuat judul tabel, kita gunakan tag <caption></caption> dengan atribut valign=top (untuk penempatan judul di atas tabel) atau valign=bottom (untuk penempatan judul di bawah tabel). Dalam ASP dan PHP, penulisan coding untuk tabel dapat dilakukan dengan sintax dasarnya, yaitu dengan menggunakan sintax response.write untuk ASP dan sintax echo ; untuk PHP. Perlu diingat, jika bertemu dengan dua pasang tanda kutip ( ) yang berbeda, kita harus menempatkannya pada level yang berbeda. Level pertama ditulis dengan tanda kutip ganda ( ), dan level kedua ditulis dengan tanda kutip tunggal ( ). Jika tidak memungkinkan, kita harus memisahnya menjadi 2 baris perintah atau lebih (lihat kembali contoh pada bagian blockquote). WARNA SEL DAN PENGGABUNGAN SEL Jika kita ingin menggabungkan beberapa baris dan kolom, memberikan warna pada tabel kita, dan mengatur penulisan tiap selnya, kita dapat melakukannya sesuai dengan kebutuhan kita. Perhatikan gambar berikut ini :
28 Sintax dari gambar di atas adalah sebagai berikut : <body> <table border=1 width=80%> <td></td> <td></td> <th colspan=3 bgcolor=#ee82ee>materi</th> <td></td> <td></td> <th bgcolor=#ffff00>html</th> <th bgcolor=#008000>asp</th> <th bgcolor=#f0fff0>php</th>
29 <th rowspan=3 bgcolor=#ee82ee>kelompok</th> <th bgcolor=#ffff00>kelas A</th> <td align=left valign=top>kosong <br> (Masih tersedia 14 kursi)</td> <td align=center valign=top>penuh</td> <td align=right valign=top>penuh</td> <th bgcolor=#008000>kelas B</th> <td align=left valign=middle>penuh</td> <td align=center valign=middle>kosong<br> (Masih tersedia 3 kursi)</td> <td align=right valign=middle>penuh</td> <th bgcolor=#f0fff0>kelas C</th> <td align=left valign=bottom>penuh</td> <td align=center valign=bottom>penuh</td> <td align=right valign=bottom>kosong<br> (Masih tersedia 7 kursi)</td> <caption valign=bottom> Tabel 1. Contoh penggunaan tabel dengan colspan dan rowspan </caption> </table> </body> Mari kita pelajari bersama-sama. Untuk menampilkan background yang berwarna pada tiap-tiap sel, kita dapat gunakan sintax bgcolor yang artinya background color kemudian diikuti dengan kode RGB dari warna yang kita pilih (kode RGB dapat dilihat di halaman terakhir buku ini). Contohnya <td bgcolor=#f0fff0>.
30 Kemudian, jika kita ingin menggabungkan beberapa kolom menjadi satu seperti pada contoh di atas, kita dapat menggunakan atribut colspan yang artinya column span. Atribut colspan ini diikuti dengan jumlah kolom yang akan digabungkan, contohnya <td colspan=3>. Berarti ada 3 kolom yang akan digabungkan. Secara default, isi dari tag <td colspan> akan ditampilkan dengan atribut align=center. Kita dapat mengubahnya menjadi rata kiri atau kanan dengan menambahkan atribut align, contohnya <td colspan=3 align=right>. Jika kita tidak menambahkan atribut align, maka defaultnya adalah align=center. Lalu, jika kita ingin menggabungkan beberapa baris menjadi satu, kita dapat menggunakan atribut rowspan dan diikuti dengan jumlah baris yang akan digabungkan, contohnya <td rowspan=3>. Secara default, atribut rowspan akan menambahkan atribut valign yang bernilai middle. Jika kita ingin mengubahnya, kita dapat menambahkan atribut valign dan memberikan nilai top atau bottom, contohnya <td rowspan=3 valign=top>. Jika tidak, maka defaultnya adalah valign=middle. WRAPPING Kadangkala kita butuh untuk melakukan wrapping dan non-wrapping. Wrapping adalah menuliskan data dalam sel tabel yang mengikuti ukuran sel yang tersedia. Perhatikan gambar berikut ini : Sel bagian kiri sebenarnya hanya 20% saja lebarnya, sama persis dengan sel sebelah kanan. Namun karena sel sebelah kiri tidak menggunakan wrapping, maka data ditampilkan semuanya dalam satu baris tanpa memperdulikan lebar sel yang tersedia. Sedangkan sel sebelah kanan menggunakan wrapping, sehingga data ditampilkan sesuai dengan lebar sel yang tersedia. Berikut ini sintaxnya :
31 <body> <table border=1 width=40%> <td width=20% nowrap>yang ini ukuran cuma 20% tapi No-Wrap</td> <td width=20%>yang ini 20% tapi menggunakan wrap</td> </table> </body> Jika dalam tag <td> kita tidak menambahkan atribut wrapping, maka defaultnya adalah wrap. Jika kita tidak ingin menggunakan wrapping, maka kita harus menambahkan sintax nowrap pada tag <td> seperti contoh di atas. FORM Form adalah fasilitas yang paling banyak digunakan dalam sebuah aplikasi berbasis web yang interaktif. melalui form ini user dapat memberikan masukan dan nilai-nilai tertentu yang selanjutnya akan diproses oleh server untuk diberikan hasilnya. Dengan kata lain, user dan server (mesin) berinteraksi dengan menggunakan form ini. FORM DALAM HTML Form dalam HTML memiliki sintax dasar sebagai berikut : <body> <form name= nama_form method=post action= tujuan.html > </form> </body>
32 Penggunaan form dibuka dengan tag <form> dan ditutup dengan tag </form>. Di dalam tag <form> ditambahkan tiga atribut penting yang harus ada, yaitu name, method, dan action. Atribut name digunakan untuk identifikasi yang akan dilakukan di file tujuan, form manakah yang akan diproses isinya. Dengan menggunakan atribut name ini, setiap isian dari form akan diproses berdasarkan nama formnya. Selanjutnya adalah atribut method. Atribut ini menjelaskan metode apa yang digunakan form untuk mengirimkan isiannya. Ada dua macam metode yang digunakan, yaitu post dan get. Dalam metode post, semua data isian form dikirimkan ke server tanpa bisa dilihat oleh user. Sedangkan metode get, server akan meminta isian dari form, dan user dapat melihat secara detail isian yang dimasukkan dalam form. Penggunaan metode post dan get ini tergantung dari kebutuhan kita, apakah user diperkenankan melihat isian form atau tidak. Namun demikian, kebanyakan programmer menggunakan metode post untuk memproses data isian dari form yang mereka buat dengan alasan keamanan data dan coding. Kemudian, atribut ketiga yang harus ada pada form adalah action. Atribut ini menunjukkan file tujuan dari form yang akan memproses isian dari form tersebut. TIPE INPUT DALAM FORM Untuk mengisikan isian yang ingin kita kirimkan ke server kita dapat menggunakan tag <input>. Ada 9 jenis input yang tersedia dalam HTML, yaitu text, password, hidden, checkbox, radio, select, textarea, submit, dan reset. Input Tipe Text Input jenis ini sering digunakan untuk meminta isian dari user yang berupa teks, angka, atau sembarang karakter. Sintax dasarnya adalah sebagai berikut : <input type=text name= nama_input size=15 maxlength=50> Jika kita ingin memberikan isian yang standar sesuai yang telah kita tetapkan sebelumnya, kita juga dapat menambahkan atribut value seperti contoh berikut ini : <input type=text name= nama_input size=15 maxlength=50 value= Budhi > Mari perhatikan bersama-sama. Atribut name digunakan untuk mengenali input yang akan diproses. Berhubung dalam sebuah form biasanya terdapat banyak sekali masukan dengan nama input yang berbeda-beda, maka penggunaan atribut name ini sangat penting. Selanjutnya, atribut size menentukan ukuran dari input yang akan ditampilkan. Sedangkan atribut maxlength adalah jumlah karakter maksimal yang dapat diisikan ke dalam input ini. Jumlahnya terserah kita. Kemudian atribut value digunakan jika kita ingin isian ini secara otomatis berisi sesuatu, sehingga user tidak perlu menuliskannya. Sebagai contohnya sintax di atas. Karena atribut value disi dengan Budhi, maka saat ditampilkan, input tersebut sudah berisi dengan kata Budhi sehingga user tidak perlu
33 menulisnya lagi. Namun demikian, user dapat merubah apa yang telah ditampilkan dengan karakter lain, misalnya Ahmad. Input Tipe Password Input tipe password sebenarnya sama dengan input tipe text. anya saja ada perbedaan dari segi tampilan. Jika pada input tipe text, apa saja yag diisikan oleh user akan terlihat sesuai aslinya, maka pada input tipe password, apa yang diisikan oleh user akan ditampilkan dengan ***********. Atribut yang digunakan juga sama dengan tipe text, yaitu size, maxlength, dan value. Sintax dasarnya adalah sebagai berikut : <input type=password name= nama_input size=15> Input Tipe Hidden Input tipe hidden digunakan untuk menambahkan data yang sifatnya rahasia untuk diproses oleh server. Data yang ada di input tipe hidden tidak dimunculkan di browser, sehingga user tidak tahu adanya input ini. Sintax dasarnya : <input type=hidden name= nama_input value= Budhi > Input Tipe Checkbox Input checkbox merupakan input yang menyajikan pilihan dengan nilai yang berbeda, yang dapat dipilih lebih dari satu pilihan. Sintaxnya adalah : <input type=checkbox name= nama1 value= value1 >Value 1 <input type=checkbox name= nama2 value= value2 >Value 2 dan seterusnya Input Tipe Radio Input tipe radio merupakan lawan dari input tipe checkbox. Jika input tipe checkbox memberikan kebebasan pada user untuk memilih lebih dari satu pilihan, input tipe radio hanya memberikan satu pilihan saja kepada user. Sintaxnya adalah : <input type=radio name= nama value= HTML checked>html <input type=radio name= nama value= PHP >PHP <input type=radio name= nama value= ASP >ASP Jika diperhatikan, nama yang diberikan di atas adalah sama, sehingga nilai (value) yang diambil hanya satu saja. Atribut checked digunakan untuk memberikan nilai pilihan awal pada input.
34 Input Tipe Select Input tipe select memberikan tampilan yang berbeda kepada user. Input ini sama seperti input radio, yaitu hanya memberikan peluang kepada user untuk memilih satu nilai di antara nilai-nilai lain yang ditawarkan. Berikut ini sintax dasarnya : <select name program > <option value= HTML selected>html <option value= PHP >PHP <option value= ASP >ASP </select> Input ini diawali dengan tag <select> dan diakhiri dengan tag </select>. Semua nilai yang ditawarkan disimpan di dalam tag <option>. Sedangkan atribut selected digunakan untuk memberikan nilai pilihan awal kepada user. Input Tipe Textarea Input tipe textarea digunakan untuk memberikan kesempatan kepada user untuk memberikan masukkan berupa kalimat-kalimat yang cukup panjang, misalnya komentar. Sintax dasarnya adalah sebagai berikut : <textarea name= nama rows=20 cols=50> </textarea> Input ini dibuka dengan tag <textarea> dan ditutup dengan tag </textarea>. Atribut yang digunakan adalah rows, untuk menentukan banyaknya baris yang disediakan, dan cols untuk menentukan banyaknya karakter yang dapat ditulis dalam satu baris. Input Tipe Submit Input ini berupa tombol yang bila ditekan akan mengirimkan seluruh isian form ke alamat yang dituju. Sintax dasarnya adalah sebagai berikut : <input type=submit value= Kirim > Input ini akan menghasilkan sebuah tombol dengan tulisan Kirim yang bila ditekan akan mengirimkan semua isi form ke alamat tujuan. Input Tipe Reset Input ini adalah kebalikan dari input tipe submit, di mana input ini akan menghapus seluruh isian form yang mempersilahkan user untuk mengisi ulang form yang ditampilkan. Sintax dasarnya adalah : <input type=reset value= Batal >
35 Input ini akan menghasilkan sebuah tombol yang bertuliskan Batal yang bila ditekan akan menghapus semua isian form seperti semula. Contoh Penggunaan Input Pada Form Sekarang kita akan mencoba menggabungkan semua elemen input dalam sebuah form yang interaktif. Perhatikan gambar berikut ini : Sintax dari hasil di atas adalah : <body> <b>isilah form ini dengan lengkap!</b> <form name="form1" method=post action="tujuan.html"> <table border=0> <td>nim</td> <td>:</td>
36 <td><input type=text name="nim" size=10></td> <td>nama</td> <td>:</td> <td><input type=text name="nama" size=20></td> <td>alamat</td> <td>:</td> <td><input type=text name="alamat" size=30></td> <td>jenis Kelamin</td> <td>:</td> <td><input type=radio checked name="kelamin" value="laki-laki">laki-laki</td> <td></td> <td></td> <td> <input type=radio name="kelamin" value="perempuan"> Perempuan </td> <td>mk yg diambil</td> <td>:</td> <td><input type=checkbox name="basis_data">basis Data</td> <td></td> <td></td> <td><input type=checkbox name="logika_matematika">logika Matematika</td> <td></td> <td></td>
37 <td><input type=checkbox name="makro">pemrograman Makro</td> <td></td> <td></td> <td><input type=checkbox name="web_programming">web Programming</td> <td></td> <td></td> <td><input type=checkbox name="pbo">pemrograman Berbasis Object</td> <td>kelompok</td> <td>:</td> <td><select name="kelompok"> <option selected value="pagi">pagi <option value="malam">malam </select> </td> <td>status</td> <td>:</td> <td><select name="status" multiple> <option value="baru">baru <option value="ulang">ulang <option value="transfer">transfer </select> </td> <td>keterangan</td> <td>:</td> <td><textarea name="kelompok" rows=5 cols=30></textarea></td>
38 <td align=right><input type=submit value="kirim"></td> <td>:</td> <td><input type=reset value="batal"> </td> </table> </form> </body> CONTOH FORM UNTUK MENGIRIM Seringkali kita menemukan halaman web yang berisi form untuk dikirimkan ke sebuah alamat . Bagaimana sintax untuk membuat halaman web seperti itu? Caranya hanya dengan mengganti tujuan formnya. Perhatikan sintax berikut ini : <body> <b>isilah form ini dengan lengkap!</b> <form name="form1" method= post action= mailto:budhik@yahoo.com enctype= text/plain > <table border=0> <td>nim</td> <td>:</td> <td><input type=text name="nim" size=10></td> <td>nama</td> <td>:</td> <td><input type=text name="nama" size=20></td>
39 <td>alamat</td> <td>:</td> <td><input type=text name="alamat" size=30></td> <td align=right><input type=submit value="kirim"></td> <td>:</td> <td><input type=reset value="batal"> </td> </table> </form> </body>
FORMAT TEXT. Tag Attribut Value Keterangan. RGB(red,green,blue) Kode Warna. Memberikan warna terhadap background web mengatur posisi text rata kiri
FORMAT TEXT Tag Attribut Value Keterangan Body P (Paragraf) H (Heading) ol (Order List) ul (UnOrder List) Font marquee align RGB(red,green,blue) Kode Warna justify Memberikan warna terhadap background
Pemrograman Web. HTML Lanjut. Indrato, S.Kom List. Ordered Lists (OL) Ordered List (OL) Ordered List (OL) PemrogramanWeb.
Pemrograman Web Indrato, S.Kom indra.ndr7@gmail.com HTML Lanjut Page 2 List Digunakan untuk membuat daftar, terdiriatas: Ordered List (Numbering) Unordered List (Bullet) Definition List Ordered Lists (OL)
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-3 (HTML Lanjut [1]) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan: Tabel Membuat tabel sederhana Menambahkan
MODUL III MEMBUAT FORM DAN HALAMAN WEB DENGAN FRAME
MODUL III MEMBUAT FORM DAN HALAMAN WEB DENGAN FRAME A. MAKSUD DAN TUJUAN 1. MAKSUD a. Membuat formulir dengan berbagai tipe b. Membuat tampilan halaman web dengan frame 2. TUJUAN a. Mahasiswa dapat membuat
MODUL TIK - HTML II KELAS XI SEMESTER I
MODUL TIK - HTML II KELAS XI SEMESTER I Dapatkan tutorial-tutorial komputer, soal-soal matematika, soal-soal TIK, modul TIK, modul matematika di http://istiyanto.com. Kini Anda dapat berlangganan dan menerima
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-4 (HTML Lanjut) Oleh: Noor Ifada S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan: Tabel Form Frame S1 Teknik Informatika - Unijoyo 2 TABEL Fungsi: Menampilkan
1. #**# merupakan karakter yang terdapat pada type data a. text b. password c. radio d. submit e. file jawaban : b
1. #**# merupakan karakter yang terdapat pada type data a. text b. password c. radio d. submit e. file 2. Perintah untuk mengosongkan kolom pada HTML adalah a. tr b. br c. td d.   e. &nsp jawaban :
HTML Dasar. PERTEMUAN 1 Tujuan: 1. Siswa dapat memahami dan mengenal perintah-perintah dasar HTML 2. Siswa dapat membuat tabel dan pengaturannya
HTML Dasar Tujuan: Siswa dapat membuat desain situs menggunakan pemrograman web PERTEMUAN 1 Tujuan: 1. Siswa dapat memahami dan mengenal perintah-perintah dasar HTML 2. Siswa dapat membuat tabel dan pengaturannya
HTML (HyperText Markup Language)
HTML (HyperText Markup Language) IMS HTML HyperText Markup Language adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah
Tutorial HTML. Oleh: Willy Bayuardi Suwarno, SP, MSi. Dipublikasi di tanggal 7 Mei 2008
Tutorial HTML Oleh: Willy Bayuardi Suwarno, SP, MSi willy@ipb.ac.id Dipublikasi di http://willy.situshijau.co.id tanggal 7 Mei 2008 Artikel ini dapat digunakan dan disebarkan secara bebas, baik sebagian
Pemrograman Web I (HTML Lanjut) Oleh: Devie Rosa Anamisa
Pemrograman Web I (HTML Lanjut) Oleh: Devie Rosa Anamisa Tujuan Kuliah Mampu Menjelaskan mengenai: format teks Table Frame Form Hyperlink pada HTML Lanjut Format Teks Ada beberapa fasilitas tag yang dapat
[FORM AND FRAME] PEMROGRAMAN WEB MODUL [ O L E H : Y U N I T A P R A S T Y N I N G S I H, S. K O M ]
![[FORM AND FRAME] PEMROGRAMAN WEB MODUL [ O L E H : Y U N I T A P R A S T Y N I N G S I H, S. K O M ]](/thumbs/63/50441664.jpg "[FORM AND FRAME] PEMROGRAMAN WEB MODUL [ O L E H : Y U N I T A P R A S T Y N I N G S I H, S. K O M ]")
[FORM AND FRAME] PEMROGRAMAN WEB MODUL [ O L E H : Y U N I T A P R A S T Y N I N G S I H, S. K O M ] Modul FORM DAN FRAME 1. TEORI DASAR FORM Form identik dengan formulir. Form sangat dibutuhkan pada saat
P - 6 Bab 4 : HTML (Hypertext Markup Language)
P - 6 Bab 4 : HTML (Hypertext Markup Language) 4.1 Tujuan Mengerti cara membuat table, form & frame HTML. 4.2 Materi 1. Table 2. Form 3. Frame HTML 4.3 Table Tabel terdiri dari beberapa bagian, antara
Tujuan: Siswa dapat membuat list item dan form untuk diterapkan dalam pembuatan halaman web
HTML DASAR BAGIAN 2 Oleh: Heribertus Heri Istiyanto Materi: 1. List Item 2. Form Tujuan: Siswa dapat membuat list item dan form untuk diterapkan dalam pembuatan halaman web Indikator: 1. Siswa dapat membuat
Pengenalan Perancangan Web 2016
6. Image Gambar pada halaman sebuah web merupakan salah satu daya tarik pengguna. Umumnya browser web dapat menampilkan inline image (yaitu gambar yang disajikan bersamaan dengan teks). File gambar yang
BAB 1 PENGENALAN HTML
1 BAB 1 PENGENALAN HTML HyperText Markup Language (HTML) merupakan bahasa standar yang digunakan untuk membuat sebuah tampilan halaman website. Sesuai dengan namanya yaitu HyperText Markup Language (HTML)
Desain Web. Oleh : Ady Purna Kurniawan, ST., MT.
Desain Web HTML Lanjut Oleh : Ady Purna Kurniawan, ST., MT. Materi HTML Lanjut 1. List 2. Fontasi 3. Image 4. Hyperlink 5. Form Tag LIST Membuat daftar urutan berupa bullet tdan numbering. Terdiri dari
PEMROGRAMAN WEB 1 (PART 2) Berbagai macam Tag HTML. Rio Andriyat Krisdiawan, M.Kom
PEMROGRAMAN WEB 1 Berbagai macam Tag HTML (PART 2) Rio Andriyat Krisdiawan, M.Kom Tag Subscript dan SuperScript Subscript biasanya digunakan untuk Menurunkan posisi karakter atau lebih rendah dari teks
Soal Remedial Prakarya-1
Soal Remedial Prakarya-1 Kerjakan soal ini, dengan memilih salah satu jawaban yang benar. Perhatikan petunjuk: a. Pilihan jawaban yang benar dengan cara memblok pada soal tersebut. b. Dan kirim soal dan
HTML (Hypertext Markup Language)
1 HTML (Hypertext Markup Language) HTML atau Hypertext Markup Language merupakan salah satu format yang digunakan dalam pembuatan dokumen (web page) dan aplikasi yang berjalan di halaman web. Dokumen HTML
Perancangan & Pemprograman WEB. Pertemuan 4 Materi Formulir &Latihan HTML
Perancangan & Pemprograman WEB Pertemuan 4 Materi Formulir &Latihan HTML Dasar Penggunaan Formulir Untuk membuat formulir maka kita menggunakan tag dan . Dua atribut yang umum digunakan pada
1. Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah.
A SOAL PILIHAN GANDA 1 Agar bagian yang ditunjuk anak panah bisa ditampilkan pada browser, perintah yang digunakan adalah A ikan Badut (Clownfish) B ikan Badut (Clownfish) C
Pertemuan Ke-3 (HTML Lanjut [1]) D3 Manajemen Informatika - Unijoyo 1
![Pertemuan Ke-3 (HTML Lanjut [1]) D3 Manajemen Informatika - Unijoyo 1](/thumbs/52/29877460.jpg "Pertemuan Ke-3 (HTML Lanjut [1]) D3 Manajemen Informatika - Unijoyo 1")
Pertemuan Ke-3 (HTML Lanjut [1]) D3 Manajemen Informatika - Unijoyo 1 Tabel Membuat tabel sederhana Menambahkan judul tabel Mengatur lebar dan tinggi suatu tabel Perataan dalam tabel Membuat warna pada
Syntax HTML. Biasanya digunakan untuk menulis komentar, tidak akan timbul dihalaman web.
Syntax HTML Pada tulisan Saya kali ini, Saya memberikannya beserta contoh kode dan gambar, ada beberapa yang Saya tidak beri kode dan gambar, kode, dan gambar sekalipun karena beberapa alasan : Kurangnya
MODUL 3 HTML. (HyperText Mark-Up Language) Sub : Tabel & Form
MODUL 3 HTML (HyperText Mark-Up Language) Sub : Tabel & Form Laboratorium Komputer STIMIK PPKIA Pradnya Paramita Malang Pertemuan 3 3.1 Tujuan : 1. Mahasiswa dapat memahami dan mengenai perintah perintah
KONSEP DASAR HTML. HTML ( HyperText Mark up Language )
KONSEP DASAR HTML HTML ( HyperText Mark up Language ) hypertext adalah kata yang dapat menunjukkan hubungan suatu naskah dokumen dengan naskahnaskah lainnya markup menunjukkan bahwa pada file HTML berisi
Form Input HTML dan Frame. Siti Maesyaroh. M.Kom.
Form Input HTML dan Frame Siti Maesyaroh. M.Kom. Tag Tag ini digunakan untuk membuat rancangan form atau formulir dalam memasukkan data, dimana nantinya data tersebut akan diproses sesuai dengan
Pertemuan IV. Semester 1
Tables dan Forms Pertemuan IV Pemrograman Web Dasar Semester 1 Tabel HTML Tag digunakan untuk mengawali sebuah tabel. Di dalam elemen table, terdapat tag (table rows) dan tag (table
Pengenalan Perancangan Web 2017
9. Form dan Input HTML Form adalah elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Form biasa digunakan untuk membuat
HTML.
HTML www.amikom.info HTML HTTP (hypertext transfer protocol) merupakan protokol yang digunakan untuk mentransfer data antara web server ke web browser. Protokol ini mentransfer dokumendokumen web yang
HTML Dasar HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halaman situs.
HTML Dasar HTML (Hypertext Markup Language) merupakan bahasa pemrograman web yang digunakan untuk membuat halaman situs. Untuk belajar HTML dasar sebaiknya Anda ketikkan di Notepad. Bentuk umum:
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-3 (HTML) Oleh: Noor Ifada S1 Teknik Informatika - Unijoyo 1 HTML singkatan dari HyperText Markup Language menentukan tampilan suatu teks dan tingkat kepentingan
PENGENALAN HTML - 2. Anda bisa menambahkan beberapa cell (kolom) untuk membuat satu baris cell (kolom).
PENGENALAN HTML - 2 G. Tabel HTML Setting untk membuat perintah tabel terdiri dari : Row : mementukan banyaknya baris yang dimiliki oleh tabel. Columns : menentukan banyaknya kolom yang dimiliki tabel.
Pemrograman Web DASAR HTML 2
Pemrograman Web DASAR HTML 2 Marquee Marquee adalah menu tekst barjalan yang berfungsi untuk memperindah tampila web, serta membuat pengunjung agar melihat taks tersebut. Teks ini seperti tesks biasa yang
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-2 (HTML) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan HTML? Istilah-istilah dalam HTML Tag Utama dalam struktur
<table> : Tag ini merupakan inti dari perintah untuk membuat. </table> : Tag ini merupakan penutup dari perintah untuk membuat
: Tag ini merupakan inti dari perintah untuk membuat tabel pada dokumen HTML : Tag ini merupakan penutup dari perintah untuk membuat tabel pada dokumen HTML : Tag ini digunakan untuk membuat
MODUL PRAKTIKUM APLIKASI IT 1 MODUL V TABEL
MODUL V TABEL 5.1 Tabel Tabel merupakan cara untuk menampilkan informasi dalam bentuk sel yang terdiri atas baris dan kolom. Untuk menampilkan data dalam bentuk table dalam HTML. Disamping itu tabel juga
MODUL II MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABEL
MODUL II MEMBUAT DAFTAR ITEM, MEMBUAT LINK, MEMBUAT TABEL A. MAKSUD DAN TUJUAN 1. MAKSUD a. Merapikan teks yang berupa daftar (list) dan table dengan tag HTML b. Membuat halaman web terhubung dengan halaman
Materi 5 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya
Materi 5 Komputer Aplikasi IT (KAIT) 2 SKS Semester 1 S1 Sistem Informasi UNIKOM 2014 Nizar Rabbi Radliya nizar.radliya@yahoo.com Nama Mahasiswa NIM Kelas Kompetensi Dasar Menciptakan dokumen HTML dengan
Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form, input, textarea, select dan option.
Form Form biasanya digunakan untuk mengumpulkan data dari pengunjung web kita. Mulai dari form untuk login, form kontak, form untuk pendaftaran user, bahkan untuk mengirimkan data antar halaman web Tag
KOMPUTER APLIKASI IT (Information Technology)
KOMPUTER APLIKASI IT (Information Technology) 2 SKS Semester 1 S1 Sistem Informasi Nizar Rabbi Radliya nizar.radliya@yahoo.com Pertemuan 5 Universitas Komputer Indonesia 2014 Tabel pada HTML Tabel pada
KURSUS ONLINE JASA WEBMASTERS
KURSUS ONLINE JASA WEBMASTERS HTML FORM JASA WEBMASTERS Jl. Ringin Raya No 124A Condong Catur, Sleman, Yogyakarta FORM 9.1 Form Input HTML Form digunakan untuk mengumpulkan data dari user atau pengguna
Tampilan di website (Tidak Tampil karena hanya memberi informasi bagi pembuat )
MEMBUAT WEBSITE DENGAN HTML Dibuat oleh : Dea Arri Rajasa, SE., S.Kom HTML (Hyper Text Markup Language) STRUKTUR HTML Judul Website ditulis disini Kode kode HTML
4. Berikut ini termasuk tag tag yang biasanya diletakkan di dalam kelompok tag Body, kecuali. a. bgcolor c. link b. font d. meta
LATIHAN SOAL HTML DASAR 1 1. Singkatan HTML adalah. a. Hyper Text Markup Language b. Hygher Text Markup Language c. Hyper Terminal Markup Language d. Hyper Text Make Language 2. Dibawah ini merupakan tag
MENAMPILKAN FRAME FRAME
MENAMPILKAN FRAME FRAME digunakan untuk membagi window browser menjadi beberapa bagian window, sehingga dapat menampilkan beberapa file dalam window yang berbeda-beda Format Penulisan:
BAB-12 MEMBUAT FORM HTML
BAB-12 MEMBUAT FORM HTML 12.1. Form HTML Form HTML digunakan untuk mendapatkan masukan (input) dari pengguna Web. Pengguna Web dapat memasukkan input melalui halaman-halaman HTML. Elemen/tag Form digunakan
Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa
Pemrograman Web I (HTML) Oleh: Devie Rosa Anamisa Tujuan Kuliah Mampu Menjelaskan mengenai: Pengertian struktur dasar tag-tag HTML membuat aplikasi dengan perintah-perintah HTML HTML Hyper Text Markup
4. Type yang berfungsi untuk menerima masukan berupa teks dari pengguna adalah A. Checkbox B. Submit C. File D. Text E. Button
NAMA : KELAS/NoAbsensi : A. PILIHAN GANDA 1. #**# merupakan karakter yang terdapat pada type data a. text b. password c. radio d. submit e. file 2. Perintah untuk mengosongkan kolom pada HTML adalah a.
MEMBUAT FORM Dan FRAME 1. Form Form Form
1. Form Form adalah suatu cara untuk mejadikan halaman web menjadi lebih interaktif, karena akan mendaptakan umpan balik dari pengunjung situs web. Form dapat digunakan untuk membuat buku tamu, formulir
SUSUNAN DASAR HTML, JAVASCRIPT DAN VBSCRIPT
SUSUNAN DASAR HTML, JAVASCRIPT DAN VBSCRIPT 1. HTML 1.1. Susunan Dasar HTML Judul disini Program disini 1.2. Contoh Halaman Pertama Teks dengan Heading 1 Teks
TAG HTML LANJUT Tujuan Instruksional :
3 TAG HTML LANJUT Tujuan Instruksional : 1. Mahasiswa mengetahui tag-tag tingkat lanjut pada HTML 2. Mahasiswa dapat menyusun dan menyimpan sebuah dokumen HTML dengan tag HTML lanjut 3. Mahasiswa dapat
Pemrograman Basis Data Berbasis Web
Pemrograman Basis Data Berbasis Web Pertemuan Ke-2 (HTML) Noor Ifada S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan HTML? Istilah-istilah dalam HTML Tag Utama dalam struktur dokumen HTML Contoh HTML
Atribut ACTION tempat menspesifikasikan URL yang akan digunakan sebagai pemroses field input form.
FORM DAN INPUT HTML Elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML. Elemen/ TAG ini digunakan membatasi input.
Berikut akan diberikan contoh program HTML yang sederhana :
1. Struktur Dokumen Syarat perlu mempelajari suatu bahasa pemrograman adalah mengetahui Strukturnya. Program/dokumen HTML terdiri dari Kepala Program/Dokumen dan Badan Program/Dokumen dengan bentuk sbb
Iankee.mualdo@gmail.com PENGENALAN WEBSITE HTML CSS Mengenal CMS ( Content Management System) Iankee.mualdo@gmail.com PENGENALAN WEBSITE HTML CSS Mengenal CMS ( Content Management System) Iankee.mualdo@gmail.com
Pemrograman Internet by Susiana Sari, S.Kom
1 Muara Teweh, 01 April 2009 Susiana Sari, S.Kom Manajemen Informatika Politeknik Muara Teweh STRUKTUR DASAR HTML : sebagai tanda awal dokumen : sebagai informasi page header : sebagai
Adapun elemen-elemen yang digunakan untuk membuat suatu tabel adalah :
PERTEMUAN 5 Membuat Tabel Tabel biasanya digunakan untuk menempatkan data secara spreadsheet, tapi untuk desain suatu web, selain untuk menempatkan data, tabel digunakan untuk merapikan teks, ataupun gambar.
d. Caption Elemen caption berfungsi untuk memberikan nama atau judul pada tabel. Tag yang digunakan
ATRIBUT TABEL ATRIBUT TABEL a. Table Row (TR) Elemen Table Row digunakan untuk menandai awal dari tiap baris pada tabel, atau tag ini digunakan untuk membuat baris tabel. Tag yang digunakan adalah tag...
1) Gunakan peralatan sesuai dengan fungsinya. 2) Bekerjalah sesuai dengan cara kerja atau petunjuk yang telah ditentukan.
TUJUAN a. Memahami dan mengaplikasikan tag-tag HTML dalam sebuah web. b. Dapat berkreasi dengan tabel, form dan frame untuk membuat sebuah karya web personal. ALAT DAN BAHAN 1) 1 (Satu) unit komputer KESELAMATAN
MODUL PEMOGRAMAN WEB I STMIK IM BANDUNG MODUL PEMOGRAMAN WEB I. Oleh: CHALIFA CHAZAR. Chalifa Chazar edu.script.id
1 MODUL PEMOGRAMAN WEB I Oleh: CHALIFA CHAZAR 2 Modul 3 HTML Layout Tujuan: Mahasiswa mengenal konsep-konsep dan komponen layout dasar untuk membangun website statis. Pustaka:» HTML dan XML Edisi 2: Betha
HTML. ( HyperText Markup Language) Pertemuan 2 Oleh : Nufan Balafif. Mata Kuliah : Pemrograman Berbasis Web
HTML ( HyperText Markup Language) Mata Kuliah : Pemrograman Berbasis Web Pertemuan 2 Oleh : Nufan Balafif html (hypertext markup language) Adalah bahasa pemrograman Web (client) yang dikhususkan untuk
1. Pengenalan HTML. 2. Tag Dasar HTML
1. Pengenalan HTML 1.1. Sejarah Singkat HTML HTML dibuat oleh Tim Bernels-Lee seorang ahli Fisika ketika masih bekerja untuk CERN (organisasi Eropa untuk riset nuklir) dan dipopulerkan pertama kali oleh
Form identik dengan formulir
Oleh : Moh Sulhan Form identik dengan formulir Form sangat dibutuhkan pada saat kita mengizinkan/menginginkan adanya nilai (data) yang dipilih atau dimasukkan olehpengguna. Kapasitas dari form hanya menyediakan
Web Programming (WP) Step 2 [ HTML & PHP BASIC]
![Web Programming (WP) Step 2 [ HTML & PHP BASIC]](/thumbs/55/37130440.jpg "Web Programming (WP) Step 2 [ HTML & PHP BASIC]")
Web Programming (WP) Step 2 [ HTML & PHP BASIC] Created By Rolly Yesputra, M.Kom rollyyp.wordpress.com rollyyesputra1@gmail.com 082391177785 767E4C4D 4 March 2015 rollyyp.wordpress.com 1 HTML (Hypertext
MS Wulandari - HTML 1
MS Wulandari - HTML 1 PERTEMUAN VII FRAME A. MEMBUAT DAN MENGGUNAKAN FRAME Frame digunakan untuk : Membuat daftar isi pada suatu sisi frame sementara sisi frame yang lain untuk menampilkan isi Membuat
Bab 5 FORM. A. Maksud Dan Tujuan 1. Maksud
A. Maksud Dan Tujuan 1. Maksud Bab 5 FORM Menginputkan data menggunakan form dan membuat tombol dengan tag HTML Membuat halaman web terhubung dengan halaman lain (link) 2. Tujuan Mahasiswa dapat membuat
PEMROGRAMAN WEB. 1 P a g e
BAB I PENDAHULUAN A. Pengertian HTML HTML merupakan singkatan dari Hypertext Markup Language. HTML digunakan untuk membangun halaman web. HTML digunakan untuk melakukan mark-up (penandaan ) terhadap sebuah
BAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
Praktikum Pemrograman Lanjut Dasar WEB(1)
Praktikum Pemrograman Lanjut Dasar WEB(1) Praktikum 1 1. Di bawah ini adalah struktur dari dokumen HTML, buka Notepad kemudian ketikkan teks di bawah ini: contoh1.htm Kepala atau kop dokumen
MODUL HTML 2015 MODUL I PENDAHULUAN
MODUL I PENDAHULUAN HTML merupakan singkatan dari Hyper Text Markup Language adalah script untuk menyusun dokumen-dokumen Web. Dokumen HTML disimpan dalam format teks reguler dan mengandung tag-tag yang
Edisi UNIVERSITAS NEGERI SEMARANG. Badan Pengembangan Teknologi Informasi dan Komunikasi. Modul Pelatihan H T M L
Edisi 1 UNIVERSITAS NEGERI SEMARANG Badan Pengembangan Teknologi Informasi dan Komunikasi Modul Pelatihan H T M L U N I V E R S I T A S N E G E R I S E M A R A N G Modul Pelatihan HTML Akhmad Munawar http://about.me/akhmad.munawar
HTML Dasar & Layouting (tag, elemen, atribut, link, frame, table) Pengembangan Web (IT133) Ramos Somya, S.Kom., M.Cs.
HTML Dasar & Layouting (tag, elemen, atribut, link, frame, table) Pengembangan Web (IT133) Ramos Somya, S.Kom., M.Cs. HTML HyperText Markup Language HTML bahasa pemrograman HTML markup language Digunakan
Bahasa yang digunakan untuk menampilkan informasi pd halaman web. bahasa ini menggunakan tanda (markup) untuk menandai perintahperintahnya
Pertemuan 2 1 Bahasa yang digunakan untuk menampilkan informasi pd halaman web. bahasa ini menggunakan tanda (markup) untuk menandai perintahperintahnya menentukan tampilan suatu teks dan tingkat kepentingan
Desain Web. Oleh : Ady Purna Kurniawan, ST., MT.
Desain Web HTML Layout Oleh : Ady Purna Kurniawan, ST., MT. Materi HTML Layout 1. Tabel 2. Frame TABLE Digunakan untuk membuat tabel (kolom dan baris) Diperbolehkan membuat tabel di dalam tabel (nested
MODUL 1 PENGENALAN HTML
MODUL 1 PENGENALAN HTML TUJUAN PRAKTIKUM : 1. Praktikan memahami tentang HTML, CSS, frame dan JS pada HTML serta kegunaannya. 2. Praktikan memahami bagaimana cara membuat web menggunakan HTML, CSS dan
HTML Dasar Pertemuan - 2
HTML Dasar Pertemuan - 2 Semester Ganjil 2009/2010 HTML? Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser. HTML berupa kode
Standar Kompetensi Mahasiswa memahami Pengertian HTML, pengaturan format Teks, Daftar urutan, Tabel, Image dan hyperlink
Pengenalan HTML Standar Kompetensi Mahasiswa memahami Pengertian HTML, pengaturan format Teks, Daftar urutan, Tabel, Image dan hyperlink Indikator Hasil Belajar 1. Dapat menjelaskan pengertian html. 2.
HTML (HYPERTEXT MARKUP LANGUAGE)
HTML (HYPERTEXT MARKUP LANGUAGE) HTML merupakan Script dimana kita bisa menampilkan informasi dan daya kreasi kita lewat internet. HTML sendiri terdiri dari tag-tag yang fungsinya untuk membuat dokumen
BAB I PERKENALAN HTML
BAB I PERKENALAN HTML A. PENDAHULUAN Hypertext Markup Language (HTML) sebuah bahasa markup atau tanda yang digunakan untuk membuat sebuah halaman website, HTML merupakan berupa kode-kode tag yang menginstruksikan
Pemrograman Web Week 2. Team Teaching
Pemrograman Web Week 2 Team Teaching WEEK 2 HTML IKG2I4 Software Project I Persiapan Instalasi Editor Download dan Install apilkasi editor (mis. Notepad++) Karena membantu dalam pengembangan syntax highlighting
Pengantar E-Business dan E-Commerce
Pengantar E-Business dan E-Commerce Pertemuan Ke-10 (HTML Lanjut [2]) Noor Ifada noor.ifada@if.trunojoyo.ac.id S1 Teknik Informatika - Unijoyo 1 Sub Pokok Bahasan: Form Frame Meta tag Entitas Karakter
HTML. Hipertext Markup Language
HTML Hipertext Markup Language HTML HTML? Sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser. HTML berupa kode - kode tag yang
Muhamad Alif,S.Kom Teknik Informatika UTM
Muhamad Alif,S.Kom Teknik Informatika UTM FORM Fungsi: Menerima informasi atau meminta umpan balik dari user dan memproses informasi tersebut di server Standar penulisan:
HTML. STRUKTUR DASAR HTML Sebelum mempelajari HTML, akan terlebih dahulu diulas mengenai aturan penulisan dalam buku ini.
HTML HTML(Hypertext Markup Language) merupakan salah satu format yang digunakan untuk pembuatan aplikasi di halaman web. Meskipun saat ini sudah banyak aplikasiaplikasi yang menawarkan kemudahan dalam
Sekilas Mengenai HTML
Sekilas Mengenai HTML Halaman di website-website yang sering anda lihat di internet pada umumnya dibuat dengan menggunakan bahasa HTML. Tidak seperti bahasa lainnya, untuk membuat halaman HTML, kita tidak
P - 6 Bab 4 : HTML (Hypertext Markup Language)
P - 6 Bab 4 : HTML (Hypertext Markup Language) 4.1 Tujuan Mengerti cara membuat table, form & frame HTML. 4.2 Materi 1. Table 2. Form 3. Frame HTML 4.3 Latihan Tabel 1 Latihan Table_1
Mengelola isi halaman web. Memeriksa informasi untuk relevansi dan currency
Mengelola isi halaman web Memeriksa informasi untuk Software Web Design Software web design merupakan perangkat lunak yang berguna untuk membangun/membuat/mendisain halaman-halaman web, baik yang bersifat
Desain Web. MODUL 2 Desain Form
1 MODUL 2 Desain Form A. TUJUAN 1. Mampu membuat form dalam HTML 2. Mampu menggunakan input dalam HTML 3. Mampu menggunakan select dalam HTML 4. Mampu menggunakan textarea dalam HTML B. PETUNJUK 1. Awali
KURSUS ONLINE JASA WEBMASTERS
KURSUS ONLINE JASA WEBMASTERS HTML Tables, Frame, Image JASA WEBMASTERS Jl. Ringin Raya No 124A Condong Catur, Sleman, Yogyakarta Tebel 6.1 Tabel Tabel banyak digunakan karena dapat menampilkan informasi
Ikbal jamaludin
Ikbal jamaludin 085 2222 01644 Elemen link berfungsi sebagai penghubung antara suatu halaman dengan halaman lain, atau ke URL (uniform Resource Locator) lain bahkan dalam satu halaman untuk berpindah ke
IV. Form. A. Pengenalan Form. B. HTML Input Element
IV. Form A. Pengenalan Form Kegunaan Form Berikut ini beberapa contoh kegunaan Form dalam web: memperoleh data-data user baik nama, alamat dan data lainnya untuk mendaftar pada service yang di sediakan.
- Ordered List : list yang menggunakan nomor berdasarkan urutan (numbering)
PEMROGRAMAN WEB 04 Table Andi WRE List 3 macam List : - Ordered List : list yang menggunakan nomor berdasarkan urutan (numbering) - Unordered List : list yang tidak berurut dan menggunakan bullet (bullets)
Prak. E-Bussiness & E-Commerce HTML. (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto.wordpress.com
Prak. E-Bussiness & E-Commerce HTML (HyperText Markup Language) RAHMADY LIYANTANTO liyantanto@gmail.com liyantanto.wordpress.com Pendahuluan HTML adalah sebuah bahasa markup yang digunakan untuk membuat
PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 6 FORM & INPUT HTML
PENGANTAR KOMPUTER DAN TI 2C PERTEMUAN 6 FORM & INPUT HTML FORM Elemen HTML yang digunakan untuk mendapatkan masukan dari pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML.
</select></font></p> </form> </body>... Hasil:
FORM Adalah Input/masukkan dari pengguna yang kemudian diproses untuk mendapatkan hasil yang diinginkan pengguna, proses penyimpanan, proses sunting atau edit, proses hapus dan browse..
Pengaturan Teks. Contoh : <H2>Tutorial Html</H2> Hasilnya akan terlihat seperti : Tutorial Html
Struktur dasar HTML HTML (Hypert Text Markup Language) merupakan bahasa pemrograman yang digunakan dalam pembuatan halaman web. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara
XHTML dan Dasar-dasar CSS XHTML
XHTML dan Dasar-dasar CSS Pemrograman Web Rosa Ariani Sukamto Email: rosa_if_itb_01@yahoo.com Blog: http://udinrosa.wordpress.com Website: http://www.gangsir.com XHTML Extensible Hypertext Markup Language
STMIK DIKTAT SINGKAT MACROMEDIA DREAMWEAVER 8 SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER TASIKMALAYA.
STMIK SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER TASIKMALAYA DIKTAT SINGKAT MACROMEDIA DREAMWEAVER 8 PENDAHULUAN Dreamweaver adalah sebuah program website editor yang berfungsi untuk membuat dan
Pertemuan V. Semester 1
Frames dan iframes ++ Video dan Audio Pertemuan V Pemrograman Web Dasar Semester 1 Frame HTML Frame digunakan untuk menampilkan banyak dokumen html lainnya dalam satu halaman browser pada saat yang sama.
MODUL 2 HTML LANJUT. (Tabel, Form, dan Frame) Mampu menjelaskan table, frame, form, image, hyperlink pada HTML Lanjut dan membuat aplikasinya
MODUL 2 HTML LANJUT (Tabel, Form, dan Frame) Tujuan Mampu menjelaskan table, frame, form, image, hyperlink pada HTML Lanjut dan membuat aplikasinya Tugas Pendahuluan 1. Apa yang anda ketahui tentang tabel,