Hyper Text Markup Language HTML Hyper Text Markup Language Hyper Text Markup Language BASIC
PENDAHULUAN Apa itu HTML ? 03/04/2017 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
PENDAHULUAN Contoh script HTML sederhana : 03/04/2017 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
HTML ELEMENTS HTML ELEMENTS 03/04/2017 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
HTML HEADING 03/04/2017 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
HTML PARAGRAPHS 03/04/2017 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
HTML TEXT FORMATTING 03/04/2017 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
HTML LINKS (HYPERLINKS) 03/04/2017 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
HTML IMAGES 03/04/2017 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
HTML TABLE 03/04/2017 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
HTML LIST 03/04/2017 HTML List digunakan untuk membuat daftar berurut (Ordered List) dan daftar tak berurut (Unordered List). Ordered List : Satu Dua Tiga Unordered List : 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
HTML LIST 03/04/2017 Contoh : Unordered List : <ul> <li>Coffee</li> <li>Milk</li> </ul> Contoh : Ordered List : <ol> <li>Coffee</li> <li>Milk</li> </ol> @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>
HTML FORMS AND INPUT 03/04/2017 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
HTML FORMS AND INPUT Element Input : 1. TextField 03/04/2017 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 *********
HTML FORMS AND INPUT 3. Radio Button 03/04/2017 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
HTML FORMS AND INPUT 03/04/2017 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
HTML FORM AND INPUT 7. Button 03/04/2017 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> ..... </select> @RightToCopy 2011 - By Suwondo, S.Kom
HTML FORM AND INPUT 03/04/2017 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
HTML FRAMES 03/04/2017 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
HTML IFRAMES 03/04/2017 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