Pertemuan 3 Modul Praktikum Web Statis

(1)

Pertemuan 3 – Modul Praktikum Web Statis

Modul Praktikum

Web Statis

Disusun :

(2)

Pertemuan 1

Point Pembahasan :



Feature baru HTML5



Attribut



Element

(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.

(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 Description

<article> Mendefinisikan suatu artikel

<aside> Mendefinisikan konten tak hanya dari konten halaman/post

<audio> Mendefinisikan konten audio

<canvas> dipakai untuk menggambar grafik, on the fly, melalui scripting (JavaScript biasanya)

<command> Mendefinisikan tombol perintah untuk Bisa memanggil

<details> Mendefinisikan rincian tambahan bahwa pemakai Bisa melihat atau menyembunyikan

<datalist> Menentukan daftar pilihan standar untuk kontrol input

<header> Mendefinisikan suatu dokumen atau bagian header

<figure> Menentukan konten Berdikari

<footer> Mendefinisikan suatu dokumen atau bagian footer

<hgroup> Groups heading (<h1> to <h6>) elemen

<mark> Mendefinisikan teks yang ditandai / disorot

<output> Mendefinisikan hasil penghitungan

<source> Mendefinisikan beberapa sumber media untuk elemen media (<video> dan <audio>)

<summary> Mendefinisikan suatu visible heading untuk elemen <details>

<time> Mendefinisikan tanggal / masa

<video> Mendefinisikan suatu video atau film

(5)

Daftar Element yang sudah tidak dipakai di HTML 5

Tag Description

<acronym> Mendefinisikan suatu akronim

<basefont> Menentukan warna standar, ukuran, dan font untuk seluruh teks dalam dokumen

<big> Mendefinisikan ukuran teks besar

<center> Mendefinisikan posisi teks dicenter

<dir> Mendefinisikan direktori list

<font> Mendefinisikan font, warna, dan ukuran untuk teks

<frame> Mendefinisikan suatu window (frame) dalam suatu frameset

<frameset> Mendefinisikan satu set frame

<strike> Mendefinisikan teks strikethrough

<noframes> Mendefinisikan suatu konten pilihan untuk pemakai bahwa konten tak mendukung frame

<applet> 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 :

(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.

(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.

<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

(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 di-drag (diseret dan dipindahkan) atau tidak.

Attribute dropzone

dropzone attribute digunakan untuk menentukan jenis konten apa yang dapat di-drop pada sebuah element.

Attribute hidden

hidden attribute digunakan untuk menyembunyikan sebuah element. Element yang disembunyikan tersebut dengan maksud sudah tidak relevan dengan konten

(9)

Pertemuan 3 – Modul Praktikum Web Statis 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

(10)

Pertemuan 3 – Modul Praktikum Web Statis 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>

(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

(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.

(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.

(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.

(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.

(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