Dasar Skrip Tag HTML Pertanyaan mendasar dari web

Dasar Skrip / Tag HTML Pertanyaan mendasar dari web designer pemula: o Sulitkah pemrograman HTML? . . o Apa yang dimaksud tag dalam HTML? . . . o Bagaimana belajar dari Design Web yang sudah ada? . . . BACK NEXT

Dasar Skrip / Tag HTML <html> <head> <title>Judul / Title</title> </head> <body> Isi / Content </body> </html> BACK NEXT

Dasar Skrip / Tag HTML Heading <html> <head> <title>Latihan 01</title> </head> <body> <h 1> Heading 1 - 24 Point </h 1> <h 2> Heading 2 - 18 Point </h 2> <h 3> Heading 3 - 14 Point </h 3> <h 4> Heading 4 - 12 Point </h 4> <h 5> Heading 5 - 10 Point </h 5> <h 6> Heading 6 - 7 Point </h 6> Normal body text - 12 Point </body> </html> BACK NEXT

Dasar Skrip / Tag HTML Paragraf dan Break <html> <head> <title>Latihan 02</title> </head> <body> Universitas Narotama Surabaya Fakultas Ilmu Komputer <p> Jurusan Sistem Komputer & Sistem Informasi </body> </html> BACK NEXT

Dasar Skrip / Tag HTML HR (Horizontal Rule) <html> <head> <title>Latihan 03</title> </head> <body> <h 1>Universitas Narotama Surabaya</h 1> <hr> </body> </html> BACK NEXT

Dasar Skrip / Tag HTML Font <html> <head> <title>Latihan 04</title> </head> <body> <font face=verdana size=3 color=blue>Fakultas Ilmu Komputer</font> </body> </html> BACK NEXT

Dasar Skrip / Tag HTML Soal (1) Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT

Dasar Skrip / Tag HTML Soal (2) Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT

Dasar Skrip / Tag HTML Soal (3) Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT

Tugas (1) o Mencari artikel dengan tema Design Web o Pelajari dengan seksama artikel yang Anda dapatkan BACK NEXT

Dasar Tag HTML o Catatan: Jika Anda ingin menambahkan komentar pada dokumen HTML, maka tulislah Tag <!. . . . . >, misal: <!perubahan terakhir 27/6/96> NEXT

Dasar Tag HTML Table Salah satu cara yang paling kompak dan paling mudah dibaca dalam menampilkan item informasi adalah dengan tabel. o o Manfaat Tabel: Tabel dapat digunakan untuk menampilkan teks, link, grafik atau item lainnya yang dapat dikirimkan ke tempat lain manapun melalui halaman web. Tabel dapat digunakan untuk menyajikan informasi, atau bahkan dapat diperkuat dengan batas, warna, dan grafik sedemikian rupa, sehingga tabel itu sendiri menjadi item – item dekorasi. NEXT

Dasar Tag HTML Table <table> <tr> <td>Columns </tr> </table> Item</td> Setiap item diapit dengan tag <td></td>, dan setiap baris diapit dengan tag <tr></tr>. Tabel dibentuk dari kiri atas, dan melintasi kolom - kolomnya. BACK NEXT

Dasar Tag HTML Table <html> <head> <title>Latihan 17</title> </head> <body> <table> <tr> <td>Earth</td> <td>Air</td> </tr> <td>Fire</td> <td>Water</td> </tr> </table> </body> </html> BACK NEXT

Dasar Tag HTML Table Properties: o o BORDER = akan memberikan garis pembatas pada tabel. CELLSPACING = akan menset jarak dalam piksel antara batas dalam dan batas luar. CELLPADDING= akan menset jarak dalam piksel antara batas dalam dan teksnya. ALIGN = penjajaran rata kanan, kiri atau tengah. BGCOLOR = akan memberikan efek warna pada tabel. ROWSPAN = untuk menset jumlah baris ke bawah. o o o COLSPAN = untuk menset jumlah kolom ke kanan. (MERGE WIDTH = untuk menset batas lebar / panjang tabel. HEIGHT = untuk menset batas tinggi tabel. o o CELL) BACK NEXT

Dasar Tag HTML Table <html> <head> <title>Latihan 18</title> </head> <body> <h 3>Daftar Nama Siswa</h 3> <table border=1 cellpadding=3 cellspacing=3> <tr> <td align=center>NIM</td> <td align=center>NAMA LENGKAP</td> </tr> <td>04102001</td> <td>Nur Qomari</td> </tr> </table> </body></html> BACK NEXT

Dasar Tag HTML Table (kolom bewarna) <html> <head> <title>Latihan 19</title> </head> <body> <h 3>Daftar Nama Siswa</h 3> <table border=1 cellpadding=3 cellspacing=3> <tr bgcolor=silver> <td align=center>NIM</td> <td align=center>NAMA LENGKAP</td> </tr> <td>04102001</td> <td>Nur Qomari</td> </tr> </table> </body></html> BACK NEXT

Dasar Tag HTML Table <html> <head> <title>Latihan 20</title> </head> <body> <h 3 align=center>Daftar Nama Siswa</h 3> <table border=1 cellpadding=3 cellspacing=3 align=center> <tr bgcolor=silver> <td align=center>NIM</td> <td align=center>NAMA LENGKAP</td> </tr> <td>04102001</td> <td>Nur Qomari</td> </tr> </table> </body></html> BACK NEXT

Dasar Tag HTML Table <html> <head> <title>Latihan 21</title> </head> <body> <h 3 align=center>Daftar Nama Siswa</h 3> <table border=1 cellpadding=3 cellspacing=3 align=center> <tr bgcolor=silver> <td align=center colspan=2> NIM & NAMA LENGKAP </td> </tr> <td>04102001</td> <td>Nur Qomari</td> </tr> </table></body></html> BACK NEXT

Dasar Tag HTML o TUGAS 1 Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT

Dasar Tag HTML o Images Tag HTML untuk memasukkan gambar: <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=filename> Catatan: img

Dasar Tag HTML o Images Tag HTML untuk memasukkan gambar: <img src=filename> Catatan: img src=image source BACK NEXT

Dasar Tag HTML o Images o o o Images Properties: HSPACE = memberikan spasi di kanan di kiri gambar. VSPACE = memberikan spasi di atas dan di bawah gambar. WIDTH = untuk menset batas lebar / panjang gambar. HEIGHT = untuk menset tinggi gambar. BORDER = memberikan garis batas yang mengelilingi gambar. BACK NEXT

Dasar Tag HTML o Images <html> <head> <title>Latihan 22</title> </head> <body> <img src='data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20760%20570%22%3E%3C/svg%3E' data-src=test. gif

Dasar Tag HTML o Images <html> <head> <title>Latihan 22</title> </head> <body> <img src=test. gif width=400 height=300> </body> </html> BACK NEXT

Dasar Tag HTML o Images <html> <head> <title>Latihan 23</title> </head> <body> <h 2 align=center>Images Center</h 2> <center> <img src= test. jpg width=400 height=300> </center> </body> </html> BACK NEXT

Dasar Tag HTML o Images <html> <head> <title>Latihan 24</title> </head> <body> <h 2 align=center>Images Border</h 2> <center> <img src= test 2. jpg width=400 height=300 border=1> </center> </body> </html> BACK NEXT

Dasar Tag HTML o Images & Body Background <html> <head> <title>Latihan 25</title> </head> <body background=bg. gif> </body> </html> VIEW BACK NEXT

Dasar Tag HTML o Images & Table <html> <head> <title>Latihan 27</title> </head> <body> <table border=10 cellspacing=10 cellpadding=10> <tr> <td><img src=photo 1. jpg width=200 height=200></td> <td><img src=photo 2. jpg width=200 height=200></td> <td><img src=photo 3. jpg width=200 height=200></td> </tr> <td>Wallpaper 1. JPG 800 X 600</td> <td>Wallpaper 2. JPG 800 X 600</td> <td>Wallpaper 3. JPG 800 X 600</td> </tr> </table> </body> </html> VIEW BACK NEXT

Dasar Tag HTML o TUGAS 2 Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT

Dasar Tag HTML o Soal (12) Tuliskan Source Code dari tampilan berikut: Filename: bg 2. gif Size: 7 X 30 VIEW BACK NEXT

Dasar Tag HTML o Soal (13) Tuliskan Source Code dari tampilan berikut: Filename: photo 1. gif Size: 300 X 400 Filename: photo 2. gif Size: 300 X 400 VIEW BACK NEXT

Dasar Tag HTML Link Tag Link pada HTML: <a href=url/filename>……. . </a> Catatan: HREF=Hypertext REFerence NEXT

Dasar Tag HTML Link URL <html> <head> <title>Latihan 28</title> </head> <body> <a href=http: //yahoo. com>Yahoo</a> <p> <a href=http: //google. com>Google</a> </body> </html> PREVIEW BACK NEXT

Dasar Tag HTML Link File <html> <head> <title>Latihan 29</title> </head> <body> <a href=latihan_27. html>Latihan 27</a> <p> <a href=latihan_28. html>Latihan 28</a> </body> </html> PREVIEW BACK NEXT

Dasar Tag HTML Link E-mail <a href=mailto: nama_email>Send to E-mail</a> BACK NEXT

Dasar Tag HTML Marquee = Menampilkan objek dengan memberikan efek berjalan. BACK NEXT

Dasar Tag HTML Marquee Tag Marquee pada HTML: <marquee behavior=…>……. . </marquee> BACK NEXT

Dasar Tag HTML Marquee Style Maquee: o ALTERNATE o SCROLL o SLIDE BACK NEXT

Dasar Tag HTML Marquee Direction Maquee: o Down o Left o Right o Up BACK NEXT

Dasar Tag HTML Marquee <html> <head> <title>Latihan 30</title> </head> <body> <marquee behavior=alternate direction=up>Universitas Narotama Surabaya</marquee> </body> </html> PREVIEW BACK NEXT

Dasar Tag HTML Marquee <html> <head> <title>Latihan 31</title> </head> <body> <marquee behavior=alternate width=100>Universitas Narotama Surabaya</marquee> </body> </html> PREVIEW BACK NEXT

Dasar Tag HTML Marquee <html> <head> <title>Latihan 32</title> </head> <body> <marquee behavior=alternate width=100 scrolldelay=500> Universitas Narotama Surabaya </marquee> </body> </html> PREVIEW BACK NEXT

Dasar Tag HTML Soal o Tuliskan Source Code dari tampilan berikut: PREVIEW BACK NEXT

Dasar Tag HTML Form Awal formulir ditandai dengan Tag <FORM>, dan berisi dua kata kunci: METHOD dan ACTION. <form name=nama_form method=post/get action=nama_file/email> BACK NEXT

Dasar Tag HTML Form <html> <head> <title>Latihan 33</title> </head> <body> <form name=mhs_baru method=post action=proses. php> ……………… </form> </body> </html> BACK NEXT

Dasar Tag HTML Form Input Text: <input name=nama_input type=text size=lebar_input maxlength=kar. _maks. > <html> <head> <title>Latihan 34</title> </head> <body> <h 2>Form Mahasiswa</h 2> <form name=form_mahasiswa> NIM <input name=nim type=text size=20 maxlength=8> Nama Lengkap <input name=nama type=text size=40> </form> </body> </html> BACK NEXT

Dasar Tag HTML Form Radio Button: <input name=nama_input type=radio checked> <html> <head> <title>Latihan 35</title> </head> <body> <form name=form_jeniskelamin> Jenis Kelamin: <input name=gender type=radio checked> Laki-laki <input name=gender type=radio> Perempuan </form> </body> </html> BACK NEXT

Dasar Tag HTML Form Check Box: <input name=nama_input type=checkbox checked> <html> <head> <title>Latihan 36</title> </head> <body> <form name=form_fak> Fakultas Ilmu Komputer: <input name=si type=checkbox checked> Sistem Informasi <input name=sk type=checkbox> Sistem Komputer </form> </body> </html> BACK NEXT

Dasar Tag HTML Form Drop-down List: <select name=nama_list> <option value=nama_opsi 1>…</option> <option value=nama_opsi 2>…</option> <option value=nama_opsi 3>…</option> </select> BACK NEXT

Dasar Tag HTML Form Drop-down List: <html> <head> <title>Latihan 37</title> </head> <body> <form name=list> Level: <select name=level> <option value=stand>Standart</option> <option value=prof>Professional</option> </select> </form> </body> </html> BACK NEXT

Dasar Tag HTML Form Textarea: <textarea name=nama_input rows=ukuran_tinggi cols=ukuran_lebar> </textarea> BACK NEXT

Dasar Tag HTML Form Textarea: <html> <head> <title>Latihan 38</title> </head> <body> <form name=alamat> Alamat: <textarea name=alamat rows=4 cols=40> </textarea> </form> </body> </html> BACK NEXT

Dasar Tag HTML Form Button: <input type=submit/reset value=caption> Catatan: type=submit, akan mendefinisikan sebagai tombol untuk menyerahkan umpan balik. type=reset, akan mendefinisikan tombol untuk menghapus isi formulir. BACK NEXT

Dasar Tag HTML Form Button: <html> <head> <title>Latihan 39</title> </head> <body> <form name=frm_submit method=post action=latihan_39. html> Alamat: <textarea name=alamat rows=4 cols=40> </textarea> <input type=submit value=Kirim> <input type=reset value=Reset> </form> </body> </html> BACK NEXT

Dasar Tag HTML o Soal (14) Tuliskan Source Code dari tampilan berikut: Catatan: Username dan Password panjang karakter = 10 BACK NEXT

Dasar Tag HTML o Soal (15) Tuliskan Source Code dari tampilan berikut: Catatan: Event submit terletak pada list BACK NEXT

Dasar Tag HTML o Soal (16) Tuliskan Source Code dari tampilan berikut: Catatan: Tombol submit bertipe gambar BACK NEXT

Dasar Tag HTML o Soal (17) Tuliskan Source Code dari tampilan berikut: Catatan: Nama dan Alamat tidak dapat ditulisi BACK NEXT

Dasar Tag HTML o Soal (18) Tuliskan Source Code dari tampilan berikut: Catatan: NIM dan Nama tidak bisa mendapatkan set focus BACK END

Dasar Tag HTML Tugas o o o Buatlah suatu home page yang berisi biografi Anda dengan menggunakan notepad. Berilah nama file dokumen html dengan NIM Anda. misal: 04206063. html Kirim melalui e-mail: zakki_falani@yahoo. com catatan: Apabila dokumen Anda ternyata terbuat dari Web Editor selain notepad, maka tidak akan ada koreksi. END

Dasar Tag HTML Text Alignment <html> <head> <title>Latihan 05</title> </head> <body> <h 1 align=center>Text Alignment</h 1> <p align=center>Set in the centre of the window <p>Back to Normal <p align=right>Align to Right <p align=left>Align to Left </body> </html> BACK NEXT

Dasar Tag HTML Style pada Font <b>……</b> Tag ini untuk membuat bold (tebal) <i>. …. . </i> Tag ini untuk membuat italic (miring) <u>…. . </u> Tag ini untuk membuat underline (garis bawah) <tt>…. . <tt> Tag ini untuk membuat huruf dengan efek mesin ketik (font Courier) BACK NEXT

Dasar Tag HTML Style pada Font <html> <head> <title>Latihan 07</title> </head> <body> <b>If you set words in bold</b> <p> <i>If you set words in italic</i> <p> <u>If you set words in underline</u> <p> <tt>If you set words in typewriter</tt> </body> </html> VIEW BACK NEXT

Dasar Tag HTML Background <html> <head> <title>Latihan 08</title> </head> <body bgcolor=blue> </body> </html> Catatan: *) Pemberian warna pada background dapat juga menggunakan kode heksadesimal VIEW BACK NEXT

Dasar Tag HTML o Catatan: Browser akan mengabaikan spasi yang berlebihan. Sehingga Anda dapat membuat spasi sekehendak hati Anda untuk memudahkan pembacaan kode Anda. <html> <head> <title>Latihan 09</title> </head> <body> <h 2>Words 1 Words 2 </h 2> </body> </html> BACK NEXT

Dasar Tag HTML Bullet & Numbering Variasi bullet pada HTML: o o o Disc, memberikan efek lingkaran (default) Square, memberikan efek persegi empat Circle, memberikan efek lingkaran yang transparan BACK NEXT

Dasar Tag HTML o Bullet & Numbering <html> <head> <title>Latihan 10</title> </head> <body> <h 3>Daftar Fakultas: <ul type=disc> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ul> </h 3> </body> </html> Catatan: ul = unordered list li = list item BACK NEXT

Dasar Tag HTML o Bullet & Numbering <html> <head> <title>Latihan 11</title> </head> <body> <h 3>Daftar Fakultas: <ul type=square> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ul> </h 3> </body> </html> BACK NEXT

Dasar Tag HTML o Bullet & Numbering <html> <head> <title>Latihan 12</title> </head> <body> <h 3>Daftar Fakultas: <ul type=circle> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ul> </h 3> </body> </html> BACK NEXT

Dasar Tag HTML Bullet & Numbering o o o Daftar bernomor pada HTML: i adalah angka romawi kecil, misal: i, iii, iv, dst I adalah angka romawi besar, misal: I, III, IV, dst a adalah huruf kecil, misal: a, b, c, d, dst A adalah huruf kapital, misal: A, B, C, D, dst 1 adalah angka dalam standar, misal: 1, 2, 3, 4, dst BACK NEXT

Dasar Tag HTML o Bullet & Numbering <html> <head> <title>Latihan 13</title> </head> <body> <h 3>Daftar Fakultas: <ol type=A> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ol> </h 3> </body> </html> Catatan: ol = ordered list BACK NEXT

Dasar Tag HTML o Bullet & Numbering <html> <head> <title>Latihan 14</title> </head> <body> <h 3>Daftar Fakultas: <ol type=a> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ol> </h 3> </body> </html> BACK NEXT

Dasar Tag HTML o Bullet & Numbering <html> <head> <title>Latihan 15</title> </head> <body> <h 3>Daftar Fakultas: <ol type=I> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ol> </h 3> </body> </html> BACK NEXT

Dasar Tag HTML o Bullet & Numbering <html> <head> <title>Latihan 16</title> </head> <body> <h 3>Daftar Fakultas: <ol type=i> <li>Fakultas Ekonomi</li> <li>Fakultas Hukum</li> <li>Fakultas Ilmu Komputer</li> <li>Fakultas Teknik Sipil</li> </ol> </h 3> </body> </html> BACK NEXT

Dasar Tag HTML o Soal (4) Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT

Dasar Tag HTML o Soal (5) Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT

Dasar Tag HTML o Soal (6) Tuliskan Source Code dari tampilan berikut: VIEW BACK NEXT

Dasar Tag HTML o Soal (7) Tuliskan Source Code dari tampilan berikut: VIEW END