Draf HTML 5 baru (Draf Kerja) dirilis pada 10 Juni. Editor membaca sebentar dokumentasi versi baru yang disediakan dan membuat beberapa catatan:
Draf HTML 5 tidak menjadi standar resmi
Publikasi sebagai Draf Kerja tidak berarti dukungan dari Keanggotaan W3C.
Publikasi sebagai “Draf” tidak berarti endorsement (dukungan) oleh anggota W3C.
Spesifikasi HTML 5 tidak akan dianggap selesai sebelum ada setidaknya dua implementasi spesifikasi yang lengkap.
Spesifikasi HTML 5 tidak akan diselesaikan sampai setidaknya dua perangkat lunak telah mengimplementasikannya.
XHTML 1 dirilis pada tahun 1999. Butuh dua atau tiga tahun sebelum mendapat dukungan penuh, dan baru-baru ini, hampir sepuluh tahun kemudian, dipromosikan sepenuhnya. Jadi perlu beberapa saat hingga HTML 5 didukung (terutama oleh browser "non-mainstream"). Menurut jadwal Kelompok Kerja HTML W3C, tidak akan ada finalisasi formal hingga tahun 2010.
XHTML 1 dirilis pada tahun 1999. Butuh dua atau tiga tahun sebelum mendapat dukungan penuh, dan baru-baru ini, hampir sepuluh tahun kemudian, dipromosikan sepenuhnya. Jadi perlu beberapa saat hingga HTML 5 didukung (terutama oleh browser "non-mainstream"). Menurut jadwal Kelompok Kerja HTML W3C, tidak akan ada finalisasi formal hingga tahun 2010.
Pernyataan DOCTYPE yang sangat sederhana
Sesederhana itu, ha. Selain itu, tidak ada perbedaan antara huruf besar dan kecil. Perlu disebutkan bahwa spesifikasinya mensyaratkan bahwa jika DOCTYPE ini dideklarasikan, apa yang disebut "sintaks HTML 'khusus' (sintaks HTML yang disesuaikan, saya tidak tahu mengapa disebut demikian)" dapat digunakan, yaitu yang sebelumnya tipe yang tidak memerlukan tag. Sintaks HTML tertutup. Pada saat yang sama, ini masih mengizinkan sintaks format XML seperti XHTML, sehingga DOCTYPE dokumen xml perlu dideklarasikan, bukan yang di atas.
Kompatibilitas ke depan
Spesifikasi HTML 5 tidak memiliki elemen yang "usang". Pasalnya, di satu sisi mengharuskan desainer untuk tidak mencoba elemen tertentu, namun di sisi lain memerlukan browser untuk mendukung elemen tersebut. Dalam hal ini, menurut intuisi saya, ini dimaksudkan untuk mendukung semua halaman web sebelumnya yang ditulis dalam HTML atau XHTML. Ini merupakan berkah bagi para desainer. Akhirnya, mereka tidak lagi harus dibatasi oleh sintaksis XHTML yang ketat.
elemen yang dihapus
Tentu saja, elemen-elemen ini relatif terhadap HTML 4, tetapi juga dapat dilihat bahwa HTML 5 bukanlah regresi sederhana ke HTML 4. Ia masih menganut beberapa semangat penting XHTML, seperti elemen presentasi antarmuka murni harus ditinggalkan, sementara menggunakan CSS, dll.
Elemen berikut dibuang "karena efeknya murni presentasional dan karena itu lebih baik ditangani oleh CSS" karena elemen tersebut murni presentasional dan harus diganti dengan CSS:
basefont/big/center/font/s/strike/tt/u
|
Elemen berikut telah dibuang "karena penggunaannya memengaruhi kegunaan dan aksesibilitas bagi pengguna akhir secara negatif":
Elemen berikut telah dibuang "karena tidak sering digunakan, menimbulkan kebingungan atau dapat ditangani oleh elemen lain":
akronim/applet/isindex/dir |
Dokumen pengujian HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <kepala> <meta http-equiv="Jenis Konten" content="teks/html; charset=utf-8" /> <title>Dokumen pengujian HTML</title> <link href="default.css" rel="stylesheet" type="teks/css" /> </kepala> <tubuh> <h1>Dokumen pengujian HTML</h1> <ul> <li>Versi: 1.1 </li> <li>DTD: XHTML 1.0 transisi</li> <li>Pengkodean: UTF-8</li> <li>Diperbarui: 12-6-2008</li> </ul>
<jam />
<h1><h1> mewakili gelar nomor satu</h1> <h2><h2> mewakili judul nomor dua</h2> <h3><h3> mewakili judul ketiga</h3> <h4><h4> mewakili judul nomor empat</h4> <h5><h5> mewakili judul No. 5</h5> <h6><h6> mewakili judul No. 6</h6>
<p>Paragraf ini diapit oleh <p>. <p> mewakili paragraf dan merupakan format aliran teks yang paling umum digunakan. Kita dapat menggunakan berbagai tag teks sebaris dalam aliran teks. Yang paling umum digunakan adalah: <strong> <strong>Diperparah</strong>, <em><em> <ins><masukkan</ins>, <del><del> <sub><sub> <sup><sup> <cite><cite> mengutip</cite>, <big><big>meningkatkan</big>, <small><small>mengurangi</small>. </p>
<pre> Ini adalah aliran teks yang terkandung oleh <pre>. Spasi, tab, gerbong kembali, dll di dalamnya dapat langsung ditampilkan di halaman web, dan tidak akan otomatis dibungkus oleh browser. Anda dapat menggunakannya untuk menampilkan kode program. Default yang telah diformat sebelumnya adalah menggunakan font dengan lebar tetap. </pra>
<p>Kita juga dapat menggunakan tag sebaris ini untuk menampilkan cuplikan kode dalam alur teks: <kode><kode>kode</code>, <kbd><kbd>Masukan papan ketik</kbd>, <var><var>Variabel</var>, <samp><samp>contoh contoh</samp>. </p>
<p>Selain itu, dua tag juga penting:</p> <ul> <li><abbr>: Misalnya, <abbr title="Mister">Mr.</abbr> adalah singkatan dari Mister. Tapi tag ini sepertinya tidak valid di IE. </li> <li><acronym><acronym title=""></acronym>: Misalnya, <acronym title="Hyper Text Markup Language">HTML</acronym> adalah singkatan dari Hyper Text Markup Language (Bahasa China juga bisa menjadi Gunakan tag ini, seperti: "<acronym title="Republik Rakyat Tiongkok">Tiongkok</acronym>" adalah singkatan dari "Republik Rakyat Tiongkok"). </li> </ul>
<blockquote kutipan = "#"> Paragraf ini adalah <blockquote>. Ingatlah untuk menggunakan atribut cite di <blockquote>. </blockquote>
<alamat> Bagian ini berisi <address>, yang dapat digunakan untuk menampilkan alamat email atau alamat sebenarnya. Perhatikan bahwa ini adalah elemen tingkat blok, tetapi tidak memiliki margin atau padding secara default. </alamat> Bagian <div> berisi <div>. <div> adalah elemen tingkat blok dan tidak memiliki gaya apa pun secara default. Elemen lain dengan status setaranya adalah <span><span>bidang sebaris</span>, yang juga tidak memiliki gaya secara default. <br /> Ada <br> di depan kalimat ini, yang digunakan untuk jeda baris dalam paragraf. </div> <jam /> <p>Garis horizontal di atas adalah tag <hr> </p> <p><a id="a"></a>Kalimat ini diawali dengan tag jangkar yang diimplementasikan oleh tag <a> </p> <p><a href="http:///"><a>Juga berarti tautan</a>. Perhatikan bahwa ia memiliki empat kelas semu: :link adalah <a href="http:///">tautan yang belum dikunjungi</a>, :dikunjungi adalah <a href="#">tautan yang dikunjungi</a>, : hover adalah <a href="http:///">tautan saat mouse melayang</a>, :tautan<a href="http:///">aktif saat klik mouse diaktifkan</a> . </p> <p><img width="100" height="100" alt="<img> tag" /> Secara default, gambarnya sejajar, tetapi kita juga dapat mendefinisikannya sebagai blok. Dan tentukan kelas .inline khusus untuk img <img width="100" height="30" alt="img.inline" class="inline" />. Selain itu, gaya <img> pada tautan berbeda <a href="#"><img width="60" height="60" alt="<img>" di <a> </a>. </p> <p><object width="200" height="150"><param name="movie" value=""></param></object> Ada juga tag <object> untuk memasukkan media dan tag <param> </p> <jam />
<ul> <li>Lapisan terluar dari daftar tak berurutan adalah<ul></li> <li>Setiap item dalam daftar terdiri dari <li></li> <li>Perhatikan bahwa tag <ul> hanya dapat berisi tag <li> <ul> <li>Ini adalah daftar tingkat kedua yang disarangkan dan harus ditempatkan di <li></li> <li>Perhatikan bahwa gaya item daftar tingkat kedua yang disarangkan mungkin berbeda dari gaya daftar tingkat pertama <ul> <li>Ini adalah level ketiga, dan gayanya berbeda dari level kedua</li> </ul> </li> </ul> </li> </ul>
<ol> <li>Lapisan terluar dari daftar yang diurutkan adalah <ol></li> <li>Setiap item dalam daftar terdiri dari <li></li> <li>Perhatikan bahwa tag <ol> hanya dapat berisi tag <li> <ol> <li>Ini adalah daftar tingkat kedua yang disarangkan dan harus ditempatkan di <li></li> <li>Perhatikan bahwa gaya item daftar tingkat kedua yang disarangkan mungkin berbeda dari gaya daftar tingkat pertama <ol> <li>Ini adalah level ketiga, dan gayanya berbeda dari level kedua</li> </ol> </li> </ol> </li> </ol>
<dl> <dt>Baris ini adalah<dt></dt> Baris <dd> adalah <dd>. Daftar definisi luarnya adalah <dl>. </dd> <dt>Catatan<dt>hanya dapat berisi elemen level sebaris</dt> <dd>Dan <dd> dapat berisi elemen sebaris atau tingkat blok</dd> </dl> <jam />
<p>Model tabel standar. Lebar kolom dikontrol oleh <colgroup> dan <col>. </p> <tabel> <keterangan> Ini adalah <keterangan> </keterangan> <colgroup> <col lebar="30%" /> <col lebar="50%" /> <col lebar="20%" /> </colgroup> <kepala> <tr> <th>Baris ini adalah<thead></th> <th><thead> dapat digunakan dengan <th> <th>Di sini kami menggunakan <th></th> </tr> </kepala> <kaki> <tr> <td>Baris terakhir adalah <tfoot></td> <td><tfoot>Di mana pun ditempatkan, itu akan selalu ditampilkan di akhir</td> <td></td> </tr> </kaki> <tubuh> <tr> <td>Tiga baris berikut adalah<tbody> <td>Anda dapat memasukkan sejumlah<tr></td> <td>Yang digunakan disini adalah<td></td> </tr> <tr> <td>Gunakan <col> untuk mewakili kolom</td> <td>Sel paling kanan pada baris ini adalah sel tabel kosong tanpa konten</td> <td></td> </tr> <tr> <td>Gunakan <tr> untuk mewakili baris</td> <td>Sel paling kanan pada baris memiliki&nbsp;</td> <td> </td> </tr> </tbody> </tabel>
<jam />
<bentuk tindakan=""> Label <p><form> tidak boleh berisi berbagai label kontrol secara langsung. Anda dapat menggunakan <label><label></label> untuk memuat komponen formulir,</p> <kumpulan bidang> <legend>Anda juga dapat menggunakan tag <fieldset> dan <legend> </legenda> <p>Untuk metode definisi CSS pada tag masukan: gunakan nilai atribut type sebagai nama kelas, sehingga kontrol masukan yang berbeda dapat dibedakan. </p> <p> <input type="text" class="text" size="20" id="text" value="kotak teks satu baris bidang teks" /> <input type="text" class="text" size="20" id="text_d" value="Kotak teks satu baris bidang teks dinonaktifkan" dinonaktifkan="dinonaktifkan" /> <label for="text"> masukan.teks </label> </p> <p> <input type="password" class="text" size="20" id="password" value="kata sandi kotak kata sandi" /> <input type="password" class="text" size="20" id="password_d" value="Kata sandi dinonaktifkan kotak kata sandi" dinonaktifkan="dinonaktifkan" /> <label for="password"> masukan.teks </label> </p> <p> <input type="kirim" class="kirim" id="kirim" value="kirim tombol kirim" /> <input type="submit" class="submit" id="submit_d" value="Tombol kirim dinonaktifkan" dinonaktifkan="dinonaktifkan" /> <label for="submit"> masukan.kirim </label> </p> <p> <input type="reset" class="button" id="reset" value="reset tombol reset" /> <input type = "reset" class = "button" id = "reset_d" value = "Tombol reset yang dinonaktifkan" dinonaktifkan = "disabled" /> <label for="reset"> masukan.tombol </label> </p> <p> <input type="button" class="button" id="button" value="tombol tombol biasa" /> <input type = "button" class = "button" id = "button_d" value = "Tombol normal dinonaktifkan" dinonaktifkan = "dinonaktifkan" /> <label for="button"> masukan.tombol </label> </p> <p> <input type="gambar" class="gambar" size="20" id="gambar" /> <label for="image"> masukan.gambar </label> </p> <p> <input type="image" class="image" size="20" id="image_d" dinonaktifkan="dinonaktifkan" /> <label for="image_d"> menonaktifkan input.gambar</label> </p> <p> <input nama=”radio” type=”radio” class=”radio” id=”radio1” dicentang=”dicentang” /> <masukan nama="radio" type="radio" class="radio" id="radio2" /> <label>input.radio </label> </p> <p> <input nama=”radio” type=”radio” class=”radio” id=”radio1_d” dicentang=”dicentang” dinonaktifkan=dinonaktifkan” /> <input nama="radio" type="radio" class="radio" id="radio2_d" dinonaktifkan="dinonaktifkan" /> <label> menonaktifkan input.radio </label> </p> <p> <input type="checkbox" class="checkbox" id="checkbox1" dicentang="dicentang" /> <masukan tipe='kotak centang' kelas='kotak centang' id='kotak centang2' /> <label for="checkbox"> masukan.kotak centang </label> </p> <p> <input type="checkbox" class="checkbox" id="checkbox1_d" dicentang="dicentang" dinonaktifkan="dinonaktifkan" /> <input type = "kotak centang" class = "kotak centang" id = "kotak centang2_d" dinonaktifkan = "dinonaktifkan" /> <label for="checkbox_d"> menonaktifkan input.checkbox </label> </p> <p> <input type="file" class="file" id="file" size="20" value="pemilih file pemilih file" /> <label for="file"> masukan.file </label> </p> <p> <input type="file" class="file" id="file_d" size="20" value="pemilih file pemilih file" dinonaktifkan="dinonaktifkan" /> <label for="file_d"> menonaktifkan input.file </label> </p> <p> <tombol><img /><tombol> <button dinonaktifkan="disabled"><img />Dinonaktifkan<tombol> </p>
<p> <label for="textarea"><textarea>Defaultnya adalah perataan bawah</label> <textarea name="textarea" cols="60" row="5" id="textarea">kotak teks multi-baris textarea. Ini juga mirip dengan praformat secara internal, dan dapat menampilkan semua pengangkutan kembali dan karakter tab</textarea> <textarea name="textarea" cols="20" row="5" id="textarea_b" dinonaktifkan="disabled">Menonaktifkan kotak teks multi-baris textarea</textarea> </p>
<p> <pilih nama="area teks"> <option>pemilih drop-downpemilih drop-down</option> <optgroup label="Ini adalah grup pertama"> <option>Opsi dapat dikelompokkan menggunakan <optgroup></option> <option>Dan tentukan nama grup berdasarkan atribut labelnya</option> </optgroup> <optgroup label="Ini adalah grup kedua"> <option>Nama grup hanyalah teks perintah, bukan opsi</option> </optgroup> </pilih> <pilih beberapa='beberapa' nama='area teks'> <option>Bila atribut ukuran <pilih> lebih besar dari 1 atau atribut kelipatan ditentukan</option> <option>Ini akan menjadi kotak pilihan multi-baris seperti ini</option> </pilih> <pilih nama="textarea" dinonaktifkan="dinonaktifkan"> <option>Kotak tarik-turun dinonaktifkan</option> <option>Ini akan menjadi kotak pilihan multi-baris seperti ini</option> </pilih> </p> </set bidang> </bentuk> </tubuh> </html>
|