Pertemuan 3 Modul Praktikum Web Statis
Modul Praktikum
Web Statis
Disusun :
Wahyu Widodo, S.Kom.,M.Kom
Pertemuan 3 – Modul Praktikum Web Statis
Pertemuan 1
Point Pembahasan :
Feature baru HTML5
Attribut
Element
Element Semantik
Pertemuan 3 – Modul Praktikum Web Statis
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 , , and
.
Forms 2.0: pembetulan form web HTML di mana atribut baru telah
diperkenalkan tag .
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.
Pertemuan 3 – Modul Praktikum Web Statis
Apa itu Element?
An HTML element usually consists of a start tag and end tag, with the content
inserted in between:
Example :
My first paragraph.
Daftar Element baru di HTML 5
Tag
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 (nonHTML)
Mendefinisikan suatu dokumen atau bagian header
Menentukan konten Berdikari
Mendefinisikan suatu dokumen atau bagian footer
Groups heading ( to ) elemen
Mendefinisikan teks yang ditandai / disorot
Mendefinisikan hasil penghitungan
Mendefinisikan beberapa sumber media untuk elemen media
( dan )
Mendefinisikan suatu visible heading untuk elemen
Mendefinisikan tanggal / masa
Mendefinisikan suatu video atau film
Mendefinisikan bagian dalam dokumen
Pertemuan 3 – Modul Praktikum Web Statis
Daftar Element yang sudah tidak dipakai di HTML 5
Tag
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 :
Pertemuan 3 – Modul Praktikum Web Statis
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 :
Pertemuan 3 – Modul Praktikum Web Statis
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.
Intro Artikel
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 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
Pertemuan 3 – Modul Praktikum Web Statis
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.
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
style merupakan attribute HTML yang digunakan untuk menyisipkan style (CSS)
khusus untuk element itu sendiri, juga dinamakan inline style.
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 : Paijo Harjo Winoto
Latihan 1 – Contoh Struktur HTML 5
Pertemuan 3 – Modul Praktikum Web Statis
Semantik Element di HTML 5
Banyak website yang memuat kode HTML seperti : untuk mengindikasikan bagian header, bagian
navigasi, bagian footer. HTML 5 menawarkan element semantik berikut ini :
Element di HTML 5
HTML element merepresentasikan konten pengantar, pembukaan atau
navigasi yang terdiri dari deretan link. Dalam penggunaannya, element
dapat berisi element heading (-) tapi tidak diperlukan, daftar isi (table of
contents), sebuah logo, form pencarian dan lain sebagainya.
element bukanlah sebuah konten pemisah (sectioning content) karena ia
bukanlah konten yang terdiri dari headings dan footers, karena jelas sekali dalam
sebuah tidak boleh terdapat element lain.
Elemen tidak boleh digunakan sebagai anak element (descendant) dari
, , atau lainnya.
Pertemuan 3 – Modul Praktikum Web Statis
Latihan 2 - Contoh Penggunaan Element
Keterangan :
yang ditulis di dalam element, sehingga dapat ditulis
informasi yang berlaku pada dokumen secara keseluruhan.
ditulis didalam element. Isinya berkenaan dengan catatan
kepala dan informasi yang berkaitan dengan article tersebut.
Pertemuan 3 – Modul Praktikum Web Statis
Element di HTML 5
HTML element merepresentasikan link navigasi (navigational link).Link-link
yang merujuk ke halaman lain atau halaman web itu sendiri, dapat dikelompokkan
(digabungkan) di dalam element . Akan tetapi, tidak semua link dapat ditulis
(digabungkan) dalam element , seperti beberapa link yang ditulis didalam
element, tidak tepat bila digabungkan dalam element.
Link yang ditulis di dalam 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
Pertemuan 3 – Modul Praktikum Web Statis
Element di HTML 5
section artinya bagian atau seksi. HTML tag merepresentasikan sebuah
bagian dokumen atau aplikasi. Secara kontekstual, element digunakan
untuk mengelompokkan konten/dokumen menjadi beberapa bagian berdasarkan
tema atau pokok pikiran masing-masing.
Di dalam sebuah element , sebaiknya ditulis pula element heading, yaitu
element sampai dengan yang ditulis secara langsung didalam element
sebagai anak element pertama yang menunjukkan judul atau tematik dari
bagian konten tersebut.
Latihan 4 - Contoh Penggunaan Element
Pertemuan 3 – Modul Praktikum Web Statis
Element 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
Pertemuan 3 – Modul Praktikum Web Statis
Element di HTML 5
element merepresentasikan sebuah catatan kaki (bagian kaki / footer)
untuk elemen yang menaunginya (berada di dalamnya), seperti catatan kaki pada
sebuah element, element, catatan kaki untuk induk dokumen
( element) dan lain sebagainya.
Latihan 6- Contoh Penggunaan Element
Referensi :
HTML5 Tutorialpoints
dul.web.id
Pertemuan 3 – Modul Praktikum Web Statis
Web Statis
Disusun :
Wahyu Widodo, S.Kom.,M.Kom
Pertemuan 3 – Modul Praktikum Web Statis
Pertemuan 1
Point Pembahasan :
Feature baru HTML5
Attribut
Element
Element Semantik
Pertemuan 3 – Modul Praktikum Web Statis
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 , , and
.
Forms 2.0: pembetulan form web HTML di mana atribut baru telah
diperkenalkan tag .
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.
Pertemuan 3 – Modul Praktikum Web Statis
Apa itu Element?
An HTML element usually consists of a start tag and end tag, with the content
inserted in between:
Example :
My first paragraph.
Daftar Element baru di HTML 5
Tag
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 (nonHTML)
Mendefinisikan suatu dokumen atau bagian header
Menentukan konten Berdikari
Mendefinisikan suatu dokumen atau bagian footer
Groups heading ( to ) elemen
Mendefinisikan teks yang ditandai / disorot
Mendefinisikan hasil penghitungan
Mendefinisikan beberapa sumber media untuk elemen media
( dan )
Mendefinisikan suatu visible heading untuk elemen
Mendefinisikan tanggal / masa
Mendefinisikan suatu video atau film
Mendefinisikan bagian dalam dokumen
Pertemuan 3 – Modul Praktikum Web Statis
Daftar Element yang sudah tidak dipakai di HTML 5
Tag
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 :
Pertemuan 3 – Modul Praktikum Web Statis
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 :
Pertemuan 3 – Modul Praktikum Web Statis
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.
Intro Artikel
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 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
Pertemuan 3 – Modul Praktikum Web Statis
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.
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
style merupakan attribute HTML yang digunakan untuk menyisipkan style (CSS)
khusus untuk element itu sendiri, juga dinamakan inline style.
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 : Paijo Harjo Winoto
Latihan 1 – Contoh Struktur HTML 5
Pertemuan 3 – Modul Praktikum Web Statis
Semantik Element di HTML 5
Banyak website yang memuat kode HTML seperti : untuk mengindikasikan bagian header, bagian
navigasi, bagian footer. HTML 5 menawarkan element semantik berikut ini :
Element di HTML 5
HTML element merepresentasikan konten pengantar, pembukaan atau
navigasi yang terdiri dari deretan link. Dalam penggunaannya, element
dapat berisi element heading (-) tapi tidak diperlukan, daftar isi (table of
contents), sebuah logo, form pencarian dan lain sebagainya.
element bukanlah sebuah konten pemisah (sectioning content) karena ia
bukanlah konten yang terdiri dari headings dan footers, karena jelas sekali dalam
sebuah tidak boleh terdapat element lain.
Elemen tidak boleh digunakan sebagai anak element (descendant) dari
, , atau lainnya.
Pertemuan 3 – Modul Praktikum Web Statis
Latihan 2 - Contoh Penggunaan Element
Keterangan :
yang ditulis di dalam element, sehingga dapat ditulis
informasi yang berlaku pada dokumen secara keseluruhan.
ditulis didalam element. Isinya berkenaan dengan catatan
kepala dan informasi yang berkaitan dengan article tersebut.
Pertemuan 3 – Modul Praktikum Web Statis
Element di HTML 5
HTML element merepresentasikan link navigasi (navigational link).Link-link
yang merujuk ke halaman lain atau halaman web itu sendiri, dapat dikelompokkan
(digabungkan) di dalam element . Akan tetapi, tidak semua link dapat ditulis
(digabungkan) dalam element , seperti beberapa link yang ditulis didalam
element, tidak tepat bila digabungkan dalam element.
Link yang ditulis di dalam 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
Pertemuan 3 – Modul Praktikum Web Statis
Element di HTML 5
section artinya bagian atau seksi. HTML tag merepresentasikan sebuah
bagian dokumen atau aplikasi. Secara kontekstual, element digunakan
untuk mengelompokkan konten/dokumen menjadi beberapa bagian berdasarkan
tema atau pokok pikiran masing-masing.
Di dalam sebuah element , sebaiknya ditulis pula element heading, yaitu
element sampai dengan yang ditulis secara langsung didalam element
sebagai anak element pertama yang menunjukkan judul atau tematik dari
bagian konten tersebut.
Latihan 4 - Contoh Penggunaan Element
Pertemuan 3 – Modul Praktikum Web Statis
Element 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
Pertemuan 3 – Modul Praktikum Web Statis
Element di HTML 5
element merepresentasikan sebuah catatan kaki (bagian kaki / footer)
untuk elemen yang menaunginya (berada di dalamnya), seperti catatan kaki pada
sebuah element, element, catatan kaki untuk induk dokumen
( element) dan lain sebagainya.
Latihan 6- Contoh Penggunaan Element
Referensi :
HTML5 Tutorialpoints
dul.web.id
Pertemuan 3 – Modul Praktikum Web Statis