Pemrograman Berbasis WEB HTML
Objektif HTML HTML Editor Dasar HTML Tag HTML Lain-lain Element Attribute Tag HTML Lain-lain
HTML Kependekan dari Hyper Text Markup Language Markup merupakan informasi tambahan yang ditempatkan pada teks untuk menjelaskan bagaimana teks tersebut diinterpretasi Markup dalam HTML disebut sebagai HTML tags HTML merupakan file plaintext
HTML Versi HTML: 1991 – HTML 1995 – HTML 2.0 1997 – HTML 3.2 2000 – XHTML 2014 – HTML5
HTML Contoh dokumen HTML: Hasil tampilan: <!DOCTYPE html> <head> <title> My first HTML document </title> </head> <body> <p> Hello world!<br>Welcome to my <b>first</b> HTML page. </p> </body> </html> Hasil tampilan: Hello world! Welcome to my first HTML page.
HTML Tag HTML adalah kata kunci yang diapit oleh kurung sudut/kurung lancip <tag>informasi</tag> Tag HTML umumnya berpasangan, dimulai dengan start tag dan diakhiri dengan end tag End tag ditulis seperti start tag, tapi dengan garis miring sebelum nama tag
HTML Tujuan dari web browser adalah untuk membaca dokumen HTML dan menampilkannya Web browser tidak menampilkan tag HTML tapi menggunakannya untuk menentukan bagaimana menampilkan dokumen
HTML Deklarasi <!DOCTYPE> digunakan untuk membantu web browser menampilkan halaman web dengan benar karena ada berbagai jenis dan versi dokumen pada web Contoh deklarasi: HTML5 <!DOCTYPE html> HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML Editor Tersedia HTML editor profesional seperti: Microsoft WebMatrix Sublime Text Dapat pula menggunakan aplikasi text editor sederhana seperti: Notepad (Windows) vi (Unix) TextEdit (Mac)
HTML Editor Secara umum HTML editor dapat dibagi 2 yaitu text editor dan WYSIWYG HTML editor Text Editor WYSIWYG Coda Adobe Dreamweaver EditPlus Amaya Notepad++ Microsoft Visual Studio SciTE SeaMonkey Composer TextPad VisualEditor
Dasar HTML Semua dokumen HTML harus dimulai dengan deklarasi jenis <!DOCTYPE html> Dokumennya sendiri diawali dengan <html> dan diakhiri dengan </html> Bagian yang terlihat dari dokumen HTML adalah antara <body> dan </body>
Dasar HTML – Element HTML element merupakan keseluruhan dari start tag hingga end tag Contoh: <body> ABC </body> Keterangan: Element : <body> Start Tag : <body> End Tag : </body> Content : ABC
Dasar HTML – Element Nested Element Penulisan yang salah <tag1><tag2> teks </tag1></tag2> Penulisan yang benar <tag1><tag2> teks </tag2></tag1>
Dasar HTML – Element Catatan: Jangan lupa gunakan end tag Beberapa HTML element dapat ditampilkan dengan benar walau tanpa end tag, tapi untuk kondisi tertentu mungkin memberikan hasil yang tidak diinginkan HTML element tanpa content disebut empty element Misalkan <br> adalah element yang tidak memiliki end tag Dapat ditutup pada start tag dengan <br />
Dasar HTML – Element Gunakan lowercase untuk menulis tag Tag HTML tidak case-sensitive HTML5 tidak memerlukan penulisan lowercase, tapi direkomendasikan seperti itu untuk HTML4, dan diharuskan untuk XHTML
Dasar HTML – Attribute Attribute menyediakan informasi tambahan tentang element Attribute dapat dimiliki oleh HTML element Penulisan attribute selalu dilakukan pada start tag Attribute memiliki struktur: name=“value”
Dasar HTML – Attribute Bahasa dokumen dapat dideklarasi dalam tag <html> menggunakan attribute lang Mendeklarasi bahasa cukup penting untuk aplikasi tertentu, misalnya screen reader dan search engine
Dasar HTML – Attribute
Dasar HTML – Attribute Catatan: Disarankan untuk selalu menggunakan lowercase pada attribute W3C merekomendasikannya untuk HTML4, dan diharuskan untuk XHTML Disarankan untuk selalu memberi kutip pada attribute value Dalam kondisi tertentu keberadaan kutip diperlukan
Dasar HTML – Attribute Kutip ganda lebih umum digunakan tapi kutip tunggal juga dapat digunakan Ketika attribute value sendiri mengandung kutip ganda, gunakan kutip tunggal, begitupun sebaliknya
Tag HTML <html> <head> <title> <body> Mendefinisikan sebuah dokumen HTML <head> Mendefinisikan elemen kepala dokumen Mengandung meta data (data tentang data) <title> Meta data, mendefinisikan judul dokumen HTML <body> Mendefinisikan tubuh dokumen Berisi informasi yang hendak ditampilkan
Tag HTML Heading Menggunakan tag <h1> hingga <h6> Digunakan untuk mendefinisikan judul tulisan Jangan menggunakan heading untuk membuat teks menjadi besar atau tebal Search engine menggunakan heading untuk merujuk pada struktur dan isi halaman web Gunakan <h1> untuk judul utama atau paling signifikan dan <h6> untuk yang paling tidak signifikan Web browser secara otomatis memberi margin sebelum dan setelah untuk tiap heading
Tag HTML
Tag HTML Paragraf Menggunakan tag <p> Digunakan untuk mendefinisikan sebuah paragraf Web browser secara otomatis memberi margin sebelum dan setelah untuk tiap heading
Tag HTML Line Break Menggunakan tag <br> Dianjurkan menggunakan <br /> Digunakan untuk pindah baris tanpa perlu membuat paragraf baru Web browser menganggap sebuah spasi, banyak spasi, indentasi (tab), carriage return (enter) sebagai sebuah spasi
Tag HTML Preformatted Text Menggunakan tag <pre> Mendefinisikan preformatted text, ditampilkan dalam fixed-width font, serta menyimpan semua spasi dan line break
Tag HTML Formatting Font Menggunakan tag <font> Dapat diberikan attribute size, face, color size 1, 2, 3, 4, 5, 6, 7, dst. -2, -1, 0, 1, 2, 3, 4, dst. face Times New Roman, Arial, Verdana, dll. color rgb(255,0,0) #FF0000 red
Tag HTML List Unordered list dimulai dengan tag <ul> Ditandai dengan bullet Ordered list dimulai dengan tag <ol> Ditandai dengan penomoran Tiap baris dimulai dengan tag <li>
Tag HTML Horizontal Rule Menggunakan tag <hr> Dianjurkan menggunakan <hr /> Digunakan untuk membuat garis horizontal untuk memisahkan konten
Tag HTML Image Menggunakan tag <img> Dianjurkan menggunakan <hr /> Secara teknis gambar tidak disisipkan tetapi dihubungkan (linked) ke halaman web Tag <img> membuat ruang untuk gambar yang dirujuk Tag <img> memiliki 2 attribute yang diperlukan: src dan alt
Tag HTML Image Sintaks dasar <img src=“url” alt=“text” /> Attribute alt menspesifikasikan alternatif teks apabila gambar tidak dapat ditampilkan atau berguna untuk pengguna yang menggunakan screen reader
Tag HTML Link Menggunakan tag <a> HTML link adalah hyperlink, yaitu teks atau gambar yang dapat diklik dan pergi ke dokumen lain Sintaks dasar <a href=“url”> teks </a>
Tag HTML Link Attribute target dapat ditambahkan untuk menentukan dimana dokumen yang dirujuk akan dibuka
Tag HTML Link HTML bookmark dapat digunakan untuk memungkinkan pembaca untuk “lompat” ke bagian tertentu dari halaman web
Tag HTML Tabel Menggunakan tag <table> Tabel dibagi menjadi table row menggunakan tag <tr> Table row dibagi menjadi table data menggunakan tag <td> Table row juga dapat dibagi menjadi table heading dengan tag <th>
Tag HTML
Tag HTML
Tag HTML Table Dapat digunakan untuk membuat layout
Tag HTML Table Dapat digunakan untuk membuat layout
Tag HTML Formatting Element Bold = <b> Strong = <strong> Italic = <i> Emphasized = <em> Underline = <u> Delete = <del> Subscript = <sub> Superscript = <sup>
Lain-lain Ada beberapa karakter khusus yang dapat/harus direpresentasikan dengan kode khusus (character entity) Karakter yang tidak ada di keyboard juga dapat digantikan oleh entity Sintaks entity &nama_entity atau &#nomor_entity Misalkan penggunaan < dapat disalahartikan oleh web browser sebagai bagian dari tag Dapat diganti dengan < atau <
Lain-lain