JOB SHEET 2 HTML 5 dan CSS 3 I. Tujuan Instruksional Khusus 1.Mahasiswa dapat membuat halaman web menggunakan tag HTML5 dan CSS3 2.Mahasiswa dapat menjelaskan perbedaan HTML dengan HTML5 3.Mahasiswa dapat menjelaskan perbedaan CSS dengan CSS3 II.Landasan Teori 2.1HTML 5 HTML5 merupakan standar HTML terbaru yang dipublikasikan pada tahun 2012. HTML5 adalah hasil kerja bersama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Technology Working Group (WHATWG) (“HTML5 Introduction,” 2015). Beberapa elemen terbaru HTML5 antara lain: Elemen semantik: <header>, <footer>, <article> dan <section>. Letak pemakaian elemen-elemen ini ditunjukkan pada Gambar 2.1. Gambar 2.1 Elemen semantik HTML5 Elemen atribut untuk form: number, date, time, calendar dan range
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
JOB SHEET 2
HTML 5 dan CSS 3
I. Tujuan Instruksional Khusus
1. Mahasiswa dapat membuat halaman web menggunakan tag HTML5 dan CSS3
2. Mahasiswa dapat menjelaskan perbedaan HTML dengan HTML5
3. Mahasiswa dapat menjelaskan perbedaan CSS dengan CSS3
II. Landasan Teori
2.1 HTML 5
HTML5 merupakan standar HTML terbaru yang dipublikasikan pada tahun 2012.
HTML5 adalah hasil kerja bersama antara World Wide Web Consortium (W3C) dan Web
Hypertext Application Technology Working Group (WHATWG) (“HTML5 Introduction,”
2015).
Beberapa elemen terbaru HTML5 antara lain:
Elemen semantik: <header>, <footer>, <article> dan <section>. Letak
pemakaian elemen-elemen ini ditunjukkan pada Gambar 2.1.
Gambar 2.1 Elemen semantik HTML5
Elemen atribut untuk form: number, date, time, calendar dan range
Elemen grafik: <svg> dan <canvas>
Elemen multimedia: <video> dan <audio>
Sebelum menggunakan elemen-elemen tersebut perlu dicek versi peramban web
yang digunakan. Semua elemen tersebut dapat dilihat pada tautan
http://www.w3schools.com/html/html5_new_elements.asp. Tabel 2.1 menunjukkan
migrasi elemen dari HTML4 ke elemen semantik HTML5. Pemakaian elemen semantik ini
berfungsi supaya isi website dapat dikenali oleh mesin pencari seperti Google, Yahoo,
MSN, HotBot dll.
Tabel 2.1 Migrasi elemen HTML4 ke elemen semantik HTML5
HTML4 HTML5
<div id=”header”> <header>
<div id=”menu”> <nav>
<div id=”content”> <section>
<div id=”post”> <article>
<div id=”footer”> <footer>
Selain elemen-elemen tersebut, HTML 5 memiliki API (Application Programming
Interfaces) baru yaitu:
HTML geolocation, digunakan untuk mengetahui posisi geografis pengguna.
Script diatas nantinya ketika menu home diklik maka akan muncul tampilna isi menu home
dalam satu halaman web . Kemudian ketika diklik menu Profil maka akan muncul tampilan
dari isi menu profile dalam satu halaman web juga. Agar sebuah web ketika diklik dapat
ditampilkan dalam satu halaman saja maka dibutuhkan sebuah link. Caranya yaitu membuat
script awal dengan nama index.html. Index.html ini mempunyai menu-menu seperti script
diatas. Misalkan kita ingin mengisi isi menu home, maka kita membuat sebuah script home
yang disimpan dengan nama home.html. Kemudian script yang ada di index.html tersebut
kita copy pastekan kedalam isi script di home.html . Kemudian pada elemen <article> di
scirpt home.html kita isikan postingan sesuai keinginan kita. Maka ketika kita membuka web
di browser dan mengkilk menu home maka web halaman menu tidak akan terbuka pada tab
baru dan akan terbuka pada satu halaman web saja.
4 Elemen <footer>
Elemen <footer> ini berfungsi untuk mendefinisikan bagian dari sebuah footer. Biasanya
bentuk halaman web footer ini berisi bagaian halaman web yang lebih kecil dari bagian
header dan isi menu. Pada bagian footer ini hanya berisikan sebuah tulisan singkat saja.
Seperti ontoh dibawah ini . Ketika sudah menuliskan isi footer kemudian ditutup dengan
</footer>. Bentuk tulisan , warna teks maupun ukuran font diatur menggunakan css3,
5 Elemen <main>
Fungsi elemen <main> berfungsi untuk menentukan isi dari sebuah dokumen. Dalam hal ini main berfungsi untuk menentukan isi menu dan seb-sub pad link navigasi menu. Penulisan <menu> diletakkan setelah syntax </header>.
4 CSS3
Pada pembuatan halam web ini selain menggunakan html5 juga dibutuhkan sebuat style agar konten web terlihat lebih menarik. Salah satunya dengan menggunakan CSS3.
Fungsi dari webkit ini menunjukkan bahwa halaman web dapat dibuka dengan menggunakan
chrome dan safari. Fungsi dari transition untuk membuat animasi pada hover, saat krusor
diarahkan pada sub link menu navigasi yang mempunyai fungsi hover maka elemen sub link
menu navigasi tersebut akan secara bertahap berubah gaya menjadi sedikit geser ke kanan .
VIII. Kesimpulan1. HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari
World Wide Web, sebuah teknologi inti dari Internet. HTML5 memiliki beberapa unsure
bagian yaitu <header>, <main> , <nav> , <article> ,<footer>
2. CSS3 berfungsi untuk membuat animasi pada hover link navigasi dari sebuha menu.
Dimana saat krusor diarahkan pada link navigasi elem yang juga mempunyai fungsi
hover maka link elemen navigasi tersebut akan berubah gaya yaitu bergeser ke kanan