Modul Praktikum Web Statis Disusun : Wahyu Widodo, S.Kom.,M.Kom

Transkripsi

1 Modul Praktikum Web Statis Disusun : Wahyu Widodo, S.Kom.,M.Kom

2 Pertemuan 1 Point Pembahasan : Feature baru HTML5 Attribut Element Element Semantik

3 Mengenal HTML 5 HTML5 memperkenalkan sejumlah elemen dan atribut baru yang menolong dalam mngembangkan suatu website web modern. Berikut ini yaitu fitur yang paling penting diperkenalkan di HTML5 : New Semantic Elements: Ini seperti di elemen <header>, <footer>, and <section>. Forms 2.0: pembetulan form web HTML di mana atribut baru telah diperkenalkan tag <input>. Persistent Local Storage: Untuk menghapus ketergantungan di plugin pihak ketiga. WebSocket: suatu generasi teknologi terakhir komunikasi dua arah untuk software web. Server-Sent Events: memperkenalkan even yang mengalir dari web server ke web browser yang disebut Server-Sent Events (SSE). Canvas: Ini mendukung gambar dua dimensi surface yang Bisa diprogram dengan JavaScript. Audio & Video: kita Bisa menanamkan/embed audio atau video di halaman web kita tanpa memakai plugin pihak ketiga. Geolocation: Pengunjung Bisa memilih untuk membagi posisi fisik mereka dengan software web kita. Microdata: Ini memungkinkan kita membuat kosakata kita sendiri di luar HTML5 dan memperluas halaman web kita dengan kostum semantics. Drag and drop: Drag dan drop item dari satu posisi ke posisi lain di halaman web yang sama.

4 Apa itu Element? An HTML element usually consists of a start tag and end tag, with the content inserted in between: Example : <p>my first paragraph.</p> Daftar Element baru di HTML 5 Tag <article> <aside> <audio> <canvas> <command> <details> <datalist> <embed> <header> <figure> <footer> <hgroup> <mark> <output> <source> <summary> <time> <video> <section> Description Mendefinisikan suatu artikel Mendefinisikan konten tak hanya dari konten halaman/post Mendefinisikan konten audio dipakai untuk menggambar grafik, on the fly, melalui scripting (JavaScript biasanya) Mendefinisikan tombol perintah untuk Bisa memanggil Mendefinisikan rincian tambahan bahwa pemakai Bisa melihat atau menyembunyikan Menentukan daftar pilihan standar untuk kontrol input Mendefinisikan suatu wadah untuk software eksternal (non- HTML) Mendefinisikan suatu dokumen atau bagian header Menentukan konten Berdikari Mendefinisikan suatu dokumen atau bagian footer Groups heading (<h1> to <h6>) elemen Mendefinisikan teks yang ditandai / disorot Mendefinisikan hasil penghitungan Mendefinisikan beberapa sumber media untuk elemen media (<video> dan <audio>) Mendefinisikan suatu visible heading untuk elemen <details> Mendefinisikan tanggal / masa Mendefinisikan suatu video atau film Mendefinisikan bagian dalam dokumen

5 Daftar Element yang sudah tidak dipakai di HTML 5 Tag <acronym> <basefont> <big> <center> <dir> <font> <frame> <frameset> <strike> <noframes> <applet> Description Mendefinisikan suatu akronim Menentukan warna standar, ukuran, dan font untuk seluruh teks dalam dokumen Mendefinisikan ukuran teks besar Mendefinisikan posisi teks dicenter Mendefinisikan direktori list Mendefinisikan font, warna, dan ukuran untuk teks Mendefinisikan suatu window (frame) dalam suatu frameset Mendefinisikan satu set frame Mendefinisikan teks strikethrough Mendefinisikan suatu konten pilihan untuk pemakai bahwa konten tak mendukung frame Mendefinisikan suatu applet embed Apa itu Attribute? All HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes usually come in name/value pairs like: name="value" Example : <img src= picture.jpg with= 500px />

6 Daftar Attribute standar yang di dukung semua element HTML5 Penjelasan attribute Attribute accesskey Menentukan shortcut key (tombol pintas) pada keyboard untuk mengaktifkan elemen atau fokus pada element. Dalam penggunaan tombol pintas, berbeda-beda pada setiap browser. Contoh :

7 Pengguna browser Chrome, IE, dan Safari (Webkit), tekan alt + g, untuk firefox tekan alt + shift + g. Attribute Class class attribute digunakan untuk menentukan nama class pada sebuah element. Penggunaannya boleh lebih dari satu nama class dalam satu element. <div class="container"> <p class="artikel intro"> Intro Artikel </p> </div> Attribute Contenteditable Atribut contenteditable digunakan untuk menentukkan sebuah elemen HTML apakah dapat diedit secara langsung atau tidak. Pilihan value-nya adalah sebagai berikut: true atau tanpa value (kosong), yang menunjukkan bahwa element dapat diedit; false, yang menunjukkan bahwa element tidak dapat diedit. Attribute Contextmenu contextmenu attribute adalah atribut HTML yang digunakan untuk memberikan menu konteks (context menu) pada sebuah element ketika ada interaksi dari user, seperti mengklik kanan dengan mouse. Value dari contextmenu merupakan nama id yang terdapat pada HTML tag <menu> sebagai rujukan daftar menu yang akan diintegrasikan pada atribut contexmenu tersebut. Attribute data-* data-* attribute digunakan untuk menyisipkan nama attribute yang dapat kita tentukan sendiri setelah kata "data-". Nama attribute tidak boleh mengandung huruf

8 kapital dan jarak (spasi). Ini, biasanya digunakan pada sebuah aplikasi atau halaman khusus yang mana akan dieksekusi oleh javascript. Attribute dir dir attribute digunakan untuk menentukan arah tulisan konten/teks pada sebuah element. Contohnya, Bahasa Indonesia ditulis dari kiri ke kanan, sedangkan Bahasa Arab ditulis dari kanan ke kiri. Attribute draggable draggable attribute digunakan untuk menentukan apakah sebuah element dapat didrag (diseret dan dipindahkan) atau tidak. Attribute dropzone dropzone attribute digunakan untuk menentukan jenis konten apa yang dapat didrop pada sebuah element. Attribute hidden hidden attribute digunakan untuk menyembunyikan sebuah element. Element yang disembunyikan tersebut dengan maksud sudah tidak relevan dengan konten sekitarnya.

9 Attribute id id merupakan attribute unik yang mana dalam sebuah dokumen (halaman web) hanya terdapat satu nama id dan tidak boleh lebih dari satu nama id yang sama. Attribute lang lang attribute digunakan untuk menentukan bahasa apa yang ditulis pada sebuah konten di dalam element. Attribute Spellcheck spellcheck attribute digunakan untuk menentukan apakah sebuah text harus dicek kebenaran atas ejaan dan tata bahasa (grammar)-nya atau tidak. Attribute style style merupakan attribute HTML yang digunakan untuk menyisipkan style (CSS) khusus untuk element itu sendiri, juga dinamakan inline style.

10 Attribute tab index tabindex digunakan untuk menentukan urutan penggunaan tab pada sebuah papan tombol (keyboard) dalam mengakses sebuah element. Attribute title title digunakan sebagai judul informasi tambahan pada sebuah element. Biasanya ketika pointer menyentuh / berada diatas element tersebut maka akan muncul sebuah teks sesuai dengan value yang ditulis pada attribute title tersebut. Attribute translate translate digunakan untuk menentukan apakah sebuah konten dari element harus diterjemahkan (translate) atau tidak. Dukungan HTML 5 HTML5 is supported in all modern browsers. HTML5 defines eight new semantic elements. (header, section, footer, aside, nav, main, article, figure) You can also add new elements to an HTML page with a browser trick. Example : <mystudent>paijo Harjo Winoto </mystudent> Latihan 1 Contoh Struktur HTML 5

11 Semantik Element di HTML 5 Banyak website yang memuat kode HTML seperti : <div id="nav"> <div class="header"> <div id="footer"> untuk mengindikasikan bagian header, bagian navigasi, bagian footer. HTML 5 menawarkan element semantik berikut ini : Element <header> di HTML 5 HTML <header> element merepresentasikan konten pengantar, pembukaan atau navigasi yang terdiri dari deretan link. Dalam penggunaannya, <header> element dapat berisi element heading (<h1>-<h6>) tapi tidak diperlukan, daftar isi (table of contents), sebuah logo, form pencarian dan lain sebagainya. <header> element bukanlah sebuah konten pemisah (sectioning content) karena ia bukanlah konten yang terdiri dari headings dan footers, karena jelas sekali dalam sebuah <header> tidak boleh terdapat element <header> lain. Elemen <header> tidak boleh digunakan sebagai anak element (descendant) dari <address>, <footer>, atau <header> lainnya.

12 Latihan 2 - Contoh Penggunaan Element <header> Keterangan : <header> yang ditulis di dalam <body> element, sehingga dapat ditulis informasi yang berlaku pada dokumen secara keseluruhan. <header> ditulis didalam <article> element. Isinya berkenaan dengan catatan kepala dan informasi yang berkaitan dengan article tersebut.

13 Element <nav> di HTML 5 HTML <nav> element merepresentasikan link navigasi (navigational link).link-link yang merujuk ke halaman lain atau halaman web itu sendiri, dapat dikelompokkan (digabungkan) di dalam element <nav>. Akan tetapi, tidak semua link dapat ditulis (digabungkan) dalam element <nav>, seperti beberapa link yang ditulis didalam <footer> element, tidak tepat bila digabungkan dalam <nav> element. Link yang ditulis di dalam <nav> element, biasanya menunjukkan navigasi menu utama sebuah halaman (web). Contohnya, dapat digunakan untuk menggabungkan beberapa link daftar isi (table of content), link yang menuju halaman sebelum dan sesudahnya (next & previous) dan penomoran halaman 1,2,3 dan seterusnya. Latihan 3 - Contoh Penggunaan Element <nav>

14 Element <section> di HTML 5 section artinya bagian atau seksi. HTML tag <section> merepresentasikan sebuah bagian dokumen atau aplikasi. Secara kontekstual, <section> element digunakan untuk mengelompokkan konten/dokumen menjadi beberapa bagian berdasarkan tema atau pokok pikiran masing-masing. Di dalam sebuah element <section>, sebaiknya ditulis pula element heading, yaitu element <h1> sampai dengan <h6> yang ditulis secara langsung didalam element <section> sebagai anak element pertama yang menunjukkan judul atau tematik dari bagian konten tersebut. Latihan 4 - Contoh Penggunaan Element <section>

15 Element <aside> di HTML 5 aside adalah konten yang bersebelahan dan berkaitan dengan konten disekitarnya, akan tetapi, konten tersebut ditulis dengan maksud mengesampingkan (terpisah) dari konten utama. Latihan 5 - Contoh Penggunaan Element <aside>

16 Element <footer> di HTML 5 <footer> element merepresentasikan sebuah catatan kaki (bagian kaki / footer) untuk elemen yang menaunginya (berada di dalamnya), seperti catatan kaki pada sebuah <article> element, <section> element, catatan kaki untuk induk dokumen (<body> element) dan lain sebagainya. Latihan 6- Contoh Penggunaan Element <footer> Referensi : HTML5 Tutorialpoints dul.web.id