Belajar HTML #Advanced

Juni 9, 2011 at 5:44 am (komputer, Materiku, pemrograman) (, )

1. Standart Recap
Dengan adanya CSS maka fungsi presentasi / pengaturan tampilan menjadi lebih rapi. Selain itu ada keuntungan lain diantaranya yaitu untuk mengurangi ukuran file, memiliki fleksibilitas central style sheet yang berlaku untuk seluruh website tidak satu halaman saja, dan memiliki halaman aksesibilitas jauh lebih besar.
Tags
Pada XHTML semua tag harus huruf kecil dan harus ditutup. Bagi tag yang tidak memiliki tag penutup (seperti br dan img), mereka harus menutup diri dengan ‘/’ pada akhir (contoh <br />). Perhatikan bahwa harus ada spasi sebelum garis miring.

Markup harus terbentuk dengan baik, dengan unsur-unsur perulangan yang benar
eq: <strong> <em> ini </ em> </ strong>, bukan begini  <strong> <em> ini </ strong> </ em>).

Semua dokumen harus memiliki html, kepala, judul dan elemen tubuh. Mereka juga harus dimulai dengan sebuah deklarasi tipe dokumen.

Tubuh dokumen atau elemen body seharusnya dimulai dengan p, h1, h2, h3, h4, h5, h6, div, pre, address, ins or del.

Atribut
Semua atribut juga harus huruf kecil dan nilai-nilai mereka dalam tanda kutip. Meringkas atribut seperti berikut tidak diperbolehkan (seperti <input type=”checkbox” checked />). Atribut tradisional diminimalkan harus diberi nilai yang sama dengan nama atribut (seperti type=”checkbox” <input checked=”checked” />).

Atribut nama => sudah tidak valid lagi (kecuali pada elemen form) dan seharusnya diganti menggunakan id

Atribut target => bukan atribut yang valid juga

Atribut alt pada tag img merupakan attribut wajib

 

2. Accessible Links

Halaman ini berkaitan dengan sejumlah cara untuk membuat link menjadi lebih accessible.

– Tabbing
User yang tidak ingin atau tidak dapat menunjuk devices dapat menggunakan ‘tab’ melalui link. Dengan demikian, link harus dalam urutan tabbing logis.

– Accesskeys
Accesskeys memungkinkan navigasi yang lebih mudah dengan menetapkan cara pintas keyboard untuk link. Misalnya dengan menekan tombol Alt atau Ctrl + accesskey (angka atau bisa juga huruf).
eq:
<a href=”somepage.html” accesskey=”s”>Some page</a>

– Link titles
Menambahkan attribut judul pada link merupakan ide yang bagus. Hal ini bisa dijadikan navigasi bagi user.
eq:
<a href=”#” onclick=”opennastypopup()” onkeypress=”opennastypopup()” title=”Open a nasty Javascript pop-up window”>Monster</a>
– Popups (jendela munculan)
Anda dapat membuat hal-hal yang jauh lebih mudah diakses dengan menggunakan onkeypress serta onclick. Anda dapat menyertakan halaman normal dalam nilai atribut href pada link dan kembali false dari fungsi yang meluncurkan popup, jika pengguna tidak memiliki Javascript, halaman normal lah yang akan dimuat. Sebagai contoh:

<script type=”text/javascript”>
function opennastypopup() {
window.open(“monster.html”, “”, “toolbar=no,height=100,width=200″);
return false;
}
</script>

<a href=”monster.html” onclick=”return opennastypopup()” onkeypress=”return opennastypopup()”>Monster</a>

– Adjacent links (link berdekatan)
Link yang berdekatan harus diberi jarak yang cukup sehingga akan memudahkan user dalam hal accesibilitasnya. Hal ini dapat dilakukan dengan menempatkan karakter diantara link.
eq:

link  |  link

atau

[link] |  [link]

Ini dapat diatur lebih lanjut menggunakan css

– Skipping navigation (Melewatkan navigasi / mengabaikan navigasi)
Anda harus memberikan pengguna pembaca layar kesempatan untuk melewati navigasi dan langsung masuk ke konten. Hal ini karena jika navigasi Anda konsisten (sebagaimana mestinya), pengguna tidak perlu melalui informasi yang sama pada setiap halaman, terutama jika ada banyak. Anda dapat melewatkan navigasi dengan menempatkan link sebelum yang melompat langsung ke konten.

Ini mungkin terlihat seperti ini:

<div id=”header”>
<h1>The Heading</h1>
<a href=”#content” accesskey=”n”>Skip navigation</a>
</div>

<div id=”navigation”>
<!–loads of navigation stuff –>
</div>

<div id=”content”>
<!–lovely content –>
</div>

Baca lebih lengkapnya di sini

2. Accessible Links

Halaman ini berkaitan dengan sejumlah cara untuk membuat link menjadi lebih accessible.

– Tabbing
User yang tidak ingin atau tidak dapat menunjuk devices dapat menggunakan ‘tab’ melalui link. Dengan demikian, link harus dalam urutan tabbing logis.

– Accesskeys
Accesskeys memungkinkan navigasi yang lebih mudah dengan menetapkan cara pintas keyboard untuk link. Misalnya dengan menekan tombol Alt atau Ctrl + accesskey (angka atau bisa juga huruf).
eq:
<a href=”somepage.html” accesskey=”s”>Some page</a>

– Link titles
Menambahkan attribut judul pada link merupakan ide yang bagus. Hal ini bisa dijadikan navigasi bagi user.
eq:
<a href=”#” onclick=”opennastypopup()” onkeypress=”opennastypopup()” title=”Open a nasty Javascript pop-up window”>Monster</a>

– Popups (jendela munculan)

Anda dapat membuat hal-hal yang jauh lebih mudah diakses dengan menggunakan onkeypress serta onclick. Anda dapat menyertakan halaman normal dalam nilai atribut href pada link dan kembali false dari fungsi yang meluncurkan popup, jika pengguna tidak memiliki Javascript, halaman normal lah yang akan dimuat. Sebagai contoh:

<script type=”text/javascript”>
function opennastypopup() {
window.open(“monster.html”, “”, “toolbar=no,height=100,width=200″);
return false;
}
</script>

<a href=”monster.html” onclick=”return opennastypopup()” onkeypress=”return opennastypopup()”>Monster</a>

– Adjacent links (link berdekatan)

Link yang berdekatan harus diberi jarak yang cukup sehingga akan memudahkan user dalam hal accesibilitasnya. Hal ini dapat dilakukan dengan menempatkan karakter diantara link.
eq: link  |  link atau

[link] |  [link]

Ini dapat diatur lebih lanjut menggunakan css

– Skipping navigation (Melewatkan navigasi / mengabaikan navigasi)

Anda harus memberikan pengguna pembaca layar kesempatan untuk melewati navigasi dan langsung masuk ke konten. Hal ini karena jika navigasi Anda konsisten (sebagaimana mestinya), pengguna tidak perlu melalui informasi yang sama pada setiap halaman, terutama jika ada banyak. Anda dapat melewatkan navigasi dengan menempatkan link sebelum yang melompat langsung ke konten.

Ini mungkin terlihat seperti ini:

<div id=”header”>
<h1>The Heading</h1>
<a href=”#content” accesskey=”n”>Skip navigation</a>
</div>

<div id=”navigation”>
<!–loads of navigation stuff –>
</div>

<div id=”content”>
<!–lovely content –>
</div>

baca lebih lengkapnya di sini

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: