1 / 20

HTML

Hyper Text Markup Language. HTML. Hyper Text Markup Language. Hyper Text Markup Language. BASIC. PENDAHULUAN. Apa itu HTML ? HTML bukan bahasa pemrograman merupakan bahasa yang mendeskripsikan halaman web. Script HTML melekat pada browser.

nasia
Download Presentation

HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Hyper Text Markup Language HTML Hyper Text Markup Language Hyper Text Markup Language BASIC

  2. PENDAHULUAN Apa itu HTML ? • HTML bukan bahasa pemrograman merupakan bahasa yang mendeskripsikan halaman web. Script HTML melekat pada browser. • HTML kepanjangan dari Hyper Text Markup Language. • HTML menggunakan tag – tag untuk mendeskripsikan halaman web. • HTML menggunakan tag pembuka dan tag penutup. Contoh : <html> ... </html> <p> ... </p> @RightToCopy 2011 - By Suwondo, S.Kom

  3. PENDAHULUAN Contoh script HTML sederhana : <html><body><h1>My First Heading</h1><p>My first paragraph.</p></body> </html> Setelah diketikkan pada text editor, disimpan dengan format ber-ekstensi .htm atau .html @RightToCopy 2011 - By Suwondo, S.Kom

  4. HTML ELEMENTS • HTML Element di mulai dengan start tags / tag pembuka • HTML Element di akhiri dengan end tags / tag penutup. • HTML Element juga mempunyai attribute. HTML ELEMENTS • Attribute menunjukkan informasi tambahan tentang element (sifat element). • Attribute hanya di tuliskan pada tag pembuka. • Cara menuliskan attribute  nama_attribute = “nilai_attribute” • Contoh : <body bgcolor=“red”> ... </body> @RightToCopy 2011 - By Suwondo, S.Kom

  5. HTML HEADING HTML Heading di definisikan dengan <h1> sampai </h6> Contoh : <h1>This is a heading</h1><h2>This is a heading</h2><h3>This is a heading</h3> <h4>This is a heading</h4><h5>This is a heading</h5><h6>This is a heading</h6> Tag <hr> akan membentuk garis horisontal pada halaman web. Untuk menuliskan comment /komentar diletakkan pada tag : <!-- ........ --> @RightToCopy 2011 - By Suwondo, S.Kom

  6. HTML PARAGRAPHS Untuk membentuk paragraf didefinisikan dengan tag <p> ... </p> Contoh : <p>This is a paragraph.</p><p>This is another paragraph.</p> Untuk membuat baris baru digunakan tag : <br> @RightToCopy 2011 - By Suwondo, S.Kom

  7. HTML TEXT FORMATTING • Untuk memformat text tebal digunakan tag <b> ... </b> atau dapat digunakan <strong> ... </strong> • Untuk memformat text miring digunakan tag <i> ... </i> atau dapat digunakan <em> ... </em> • Untuk memformat text dengan garis bawah /underline digunakan tag <u> ... </u> @RightToCopy 2011 - By Suwondo, S.Kom

  8. HTML LINKS (HYPERLINKS) • Untuk menunjuk ke halaman lain atau ke alamat situs tertentu di gunakan hyperlinks atau links. • Links untuk menunjuk halaman lain dibentuk dengan menggunakan tag : <a href=“URL”> Links Text</a> • Links untuk menunjuk pada satu halaman digunakan tag : <a name=“tips”> Tips Section </a> <a href=“#tips”> Go to tips section </a> @RightToCopy 2011 - By Suwondo, S.Kom

  9. HTML IMAGES Digunakan untuk menampilkan gambar pada halaman web. Untuk menyisipkan gambar pada HTML digunakan tag : <img src=“URL” alt=“some_text” > Attribute “alt” digunakan menampilkan text apabila gambar gagal di muat/gambar tidak ada. Untuk mengatur lebar gambar digunakan attribute “width”, untuk mengatur tinggi gambar digunakan attribute “height”, nilai attribute nya dalam satuan pixel. Contoh : <img src=“gambar1.jpg” alt=“gambar satu” width=“100” height=“100” > @RightToCopy 2011 - By Suwondo, S.Kom

  10. HTML TABLE • Untuk membuat layout halaman web dapat digunakan tabel yang terdiri dari baris dan kolom. • Tabel didefinisikan dengan tag : <table> ... </table> • Pada tabel dibagi menjadi beberapa baris – baris yang di tuliskan pada tag : <tr> ... </tr> • Dan dalam tiap baris dibagi menjadi beberapa content data yang dituliskan pada tag : <td> ... </td> • Header informasi pada tabel di definisikan dengan tag : <th> ... </th> • Pada tabel attribute untuk menampilkan border tabel digunakan attribute “border”. Contoh : <table border="1"> <tr> <td>row 1, cell 1</td> <td>row 1, cell 2</td> </tr> <tr> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </tr></table> @RightToCopy 2011 - By Suwondo, S.Kom

  11. HTML LIST HTML List digunakan untuk membuat daftar berurut (Ordered List) dan daftar tak berurut (Unordered List). Ordered List : • Satu • Dua • Tiga Unordered List : • Satu • Dua • Tiga Untuk membuat Ordered List digunakan tag : <ol> ... </ol> masing – masing daftar item digunakan tag : <li> ... </li> Untuk membuat Unordered List digunakan tag : <ul> ... </ul> masing – masing daftar item digunakan tag : <li> ... </li> Definitions List untuk membuat daftar dengan deskripsi pada masing – masing item. Tag <dl> untuk mendefinisikan list. Untuk mendefinisikan item dalam list digunakan tag <dt> untuk mendeskripsikan item digunakan tag <dd> @RightToCopy 2011 - By Suwondo, S.Kom

  12. HTML LIST Contoh : Ordered List : <ol><li>Coffee</li><li>Milk</li> </ol> Contoh : Unordered List : <ul><li>Coffee</li><li>Milk</li> </ul> @RightToCopy 2011 - By Suwondo, S.Kom Contoh : Definition List : <dl><dt>Coffee</dt><dd>- black hot drink</dd><dt>Milk</dt><dd>- white cold drink</dd> </dl>

  13. HTML FORMS AND INPUT • HTML Forms digunakan untuk melewatkan data ke server. • Forms dapat terdiri dari element input seperti : textfield, check-boxes, radio-button, button, submit, reset, dll. • Form di gunakan tag : <form> ... </form> @RightToCopy 2011 - By Suwondo, S.Kom

  14. HTML FORMS AND INPUT Element Input : 1. TextField Membentuk inputan berupa text satu baris. Untuk membentuk TextField digunakan tag : <input type=“text” name=“nama” value=“isi” /> 2. PasswordField Membentuk inputan berupa text satu baris dengan inputan di sembunyikan. Untuk membentuk PasswordField digunakan tag : <input type=“password” name=“nama” value=“isi” /> Inputan @RightToCopy 2011 - By Suwondo, S.Kom *********

  15. HTML FORMS AND INPUT 3. Radio Button Radio button merupakan inputan untuk melakukan pilihan hanya bisa memilih satu pilihan. Untuk mendefinisikan radio button digunakan tag : <input type=“radio” name=“nama” value=“isi” /> 4. CheckBoxes Checkbox merupakan inputan untuk melakukan pilihan lebih dari 1 pilihan di antara beberapa pilihan yang ada. Untuk mendefinisikan CheckBox digunakan tag : <input type=“checkbox” name=“nama” value=“isi” /> @RightToCopy 2011 - By Suwondo, S.Kom

  16. HTML FORMS AND INPUT 5. Submit Button Submit button digunakan untuk mengirim form data ke server. Data dikirimkan ke halaman khusus attribute form action. Untuk mendefinisikan tombol submit digunakan tag : <input type=“submit” name=“nama” value=“keterangan” /> 6. Reset Button Reset button digunakan untuk mengosongkan semua isi element input yang ada pada Form. Untuk mendefinisikan tombol reset digunakan tag : <input type=“reset” name=“nama” value=“keterangan” /> @RightToCopy 2011 - By Suwondo, S.Kom

  17. HTML FORM AND INPUT 7. Button Button digunakan sebagai tombol biasa yang akan bekerja dengan event dari javascript. Untuk membentuk element button digunakan tag : <input type=“button” name=“nama” value=“keterangan” /> 8. Combo Box Combo Box digunakan untuk menampilkan data berupa dropdown menu. Untuk membentuk combobox digunakan tag : <select name=“nama”> <option value=“isi”> Text </option> <option value=“isi”> Text </option> ..... </select> @RightToCopy 2011 - By Suwondo, S.Kom

  18. HTML FORM AND INPUT 9. Input File Input file digunakan untuk mengambil Drive+Path dari suatu file untuk di proses selanjutnya, misalkan Upload data. Untuk membentuk elemen input File digunakan tag : <input type=“file” name=“nama” value=“isi” /> @RightToCopy 2011 - By Suwondo, S.Kom

  19. HTML FRAMES Dengan frame dapat menampilkan lebih dari satu dokumen HTML dalam browser yang sama. Masing – masing HTML dokumen di katakan sebuah frame dan masing – masing frames berdiri sendiri satu sama lain. Struktur frames : <frameset [cols=“.., ..“] rows=[.. , ..]>   <frame src="frame_a.htm" />   <frame src="frame_b.htm" /> ..............................................</frameset> Frameset Element terdiri satu atau lebih frame Element. Cols menyatakan banyak kolom, serta ukuran kolom dalam frameset. Rows menyatakan banyak baris dalam frameset. @RightToCopy 2011 - By Suwondo, S.Kom

  20. HTML IFRAMES Iframe digunakan menampilkan halaman web ke dalam halaman web. Struktur iframe digunakan tag : <iframe src=“URL" width=“lebar" height=“tinggi“ frameborder=“tebal border”></iframe> Jika Iframe digunakan sebagai target dari link : <iframe src=“URL" name=“nama_iframe"></iframe> <p><a href=“URL" target=“nama_iframe">Isi link</a></p> @RightToCopy 2011 - By Suwondo, S.Kom

More Related