Pemrograman Berbasis Web Pertemuan 2 – HTML Program Diploma IPB - Aditya Wicaksono, S.Komp 1 Overview Program Diploma IPB - Aditya Wicaksono, S.Komp • • • • Markup Language Sejarah HTML HTML Tag 2 Markup Language • Markup merupakan informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana teks tersebut diinterpretasi • Markup ditambahkan bukan untuk tampilan tetapi untuk memberikan struktur interpretasi / pemberian arti Program Diploma IPB - Aditya Wicaksono, S.Komp 3 Program Diploma IPB - Aditya Wicaksono, S.Komp 4 SGML (Standard Generalized Markup Language) Program Diploma IPB - Aditya Wicaksono, S.Komp • • • • • HTML (HyperText Markup Language) XML (eXtensible Markup Language) SMIL (Syncronized Multimedia Integration Language) MathML (Mathematical Markup Language) CML (Chemical Markup Language) 5 Sejarah HTML • W3C (World Wide Web Consortium) dibentuk pada Oktober 1994, dengan jumlah anggota lebih dari 400 organisasi dari seluruh dunia • Melakukan spesifikasi dalam standar web, seperti HTML, CSS, dan XML Program Diploma IPB - Aditya Wicaksono, S.Komp 6 HTML • HTML merupakan format standar untuk membuat dokumen web • HTML merupakan bahasa bertanda, menggunakan rangkaian teks tertentu (tag) untuk menandai teks yang mempunyai interpretasi khusus • File HTML berupa file teks (plain text file), bukan binary file • Ekstensi file *.htm atau*.html • Versi terakhir HTML 5 Program Diploma IPB - Aditya Wicaksono, S.Komp 7 Tag • Digunakan untuk menandai Elemen HTML • Penulisan diapit < dan > • Selalu berpasangan • Tidak Case Sensitive • Diantara tag pembuka dan tag penutup disebut Content Element, dapat memuat tag lain Program Diploma IPB - Aditya Wicaksono, S.Komp 8 Atribut Tag • Atribut menyatakan sesuatu tentang tag tersebut • Atribut digunakan untuk mengubah default pemformatan dokumen dengan tag yang bersangkutan Program Diploma IPB - Aditya Wicaksono, S.Komp 9 Syntax TAG <ELEMENT ATTRIBUT=“ATTRIBUT VALUE”>CONTENT ELEMENT</ELEMENT> TAG PEMBUKA Program Diploma IPB - Aditya Wicaksono, S.Komp TAG PENUTUP 10 Tag Dasar • • • • • • <html>…</html> <head>…</head> <title>…</title> <body>…</body> <div>…</div> • • • • • <p>…</p> <pre>…</pre> <h1>…</h1> <ul>…</ul> <ol>…</ol> <span>…</span> Program Diploma IPB - Aditya Wicaksono, S.Komp 11 Tag Dasar • • • • • • <a href=“…”>…</a> <img src=“…” /> <br /> <hr /> <table></table> • • • • • <form>…</form> <input type=“...” /> <textarea>…</textarea> <select>…</select> <button>…</button> <frameset>…</frameset> Program Diploma IPB - Aditya Wicaksono, S.Komp 12 Terima Kasih Program Diploma IPB - Aditya Wicaksono, S.Komp 13