HTML 5

Posted by Unknown on 02.10

HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.

Dimana tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.

Berikut tujuan dibuatnya HTML5 :

· Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript

· Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )

· Penanagan kesalahan yang lebih baik

· Lebih markup untuk menggantikan scripting

· HTML5 merupakan perangkat mandiri

· Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

· Unsur kanvas untuk menggambar

· Video dan elemen audio untuk media pemutaran

· Dukungan yang lebih baik untuk penyimpanan secara offline

· Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section

· Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.

Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut

</object>

Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft.

dibawah ini adalah salah satu contoh coding untuk memasukkan audio dan video ke dalam web

Memasukkan Musik

Pilih musik yang ingin di masukkan dan simpanlah satu folder dengan project yang akan di buat

<!DOCTYPE html>

<tr>

<center><font size=”7” color=”#806517”><b> MY WEDDING WITH YOU</b></font></center>

</td>

</tr>

<font face=”chromium” size= “5” color=”#348017” ><b>Welcome to my website may be useful and do not forget to always visit my website</b>

</font>

</marquee>

</td>

</font>

</center>

</td>

<b><a href=”galeri.html”> GALERRY</b>

</font>

</center>

</td>

ABOUT ME</b>

</font>

</center>

</td>

</tr>

</td>

</tr>

</table>

</body>

</html>

Memasukan Video

Hampir sama dengan memasukkan music sebelumnya, simpan file video satu folder dengan file project yang telah kita buat tadi. Pada pratikum ini format video yaitu MP4

<!DOCTYPE html>

<tr>

<center><font size="7" color="#806517"><b> MY WEDDING WITH YOU</b></font></center>

</td>

</tr>

<font face="chromium" size= "5" color="#348017" ><b>Welcome to my website may be useful and do not forget to always visit my website</b>

</font>

</marquee>

</td>

</font>

</center>

</td>

<b><a href="galeri.html"> GALERRY</b>

</font>

</center>

</td>

ABOUT ME</b>

</font>

</center>

</td>

</tr>

Your browser does not support the video tag.

</video>

</td>

</tr>

</table>

</body>

</html>

HTML Lanjut

Posted by Unknown on 04.25

Coding/Script HTML lanjutan untuk latihan pada, sebagai berikut.

1. Link biasa, link gambar, link ke window baru, dan link internal (Simpan dengan nama file: latihan2-1.html)

<html>

<body>

<p>

Teks ini</a> adalah sebuah link ke suatu halaman

dalam situs Web.

</p>

<p>

Teks ini</a> adalah sebuah link ke halaman awal

Situs google di World Wide Web.

</p>

<p>

Melompat ke bagian lain dalam halaman ini.

</a>

</p>

<p>

Anda dapat juga menggunakan gambar sebagai sebuah link:

</a>

</p>

<a href="baru.htm" target="_blank">halaman Berikutnya</a>

<p>

Bila Anda memberikan atribut target sebuah link menjadi "_blank",

Link tersebut akan membuka sebuah window browser baru.

</p>

<p>

<p> Ada tulisan disini (lakukan copy dan paste baris ini untuk baris berikutnya) </p>

<p> Ada tulisan disini </p>

<a name="C4"><h2> Disinilah tujuan lompatan link internal anda </h2></a>

<p> Ada tulisan disini </p>

</body>

</html>

2. Link ke e-mail (Simpan dengan nama file: latihan2-2.html)

<html>

<body>

<p>

Ini adalah link ke e-mail:

Kirim e-mail</a>

</p>

<p>

<b>Catatan:</b> Spasi di antara setiap kata sebaiknya digantikan dengan tanda %20 untuk <b>memastikan</b> bahwa browser akan menampilkan teks Anda dengan benar.

</p>

<p>

Ini juga contoh link ke e-mail:

<a href="mailto:anda@gmail.com?cc=dia@gmail.com&bcc=kamu@gmail.com&subject=Summer%20Party&body=Apakah%20Anda%20mau%20diundang%20ke%20pesta%20malam%20minggu?">Kirim e-mail!</a>

</p>

</body>

</html>

3. Frameset (horisontal dan vertikal) (Simpan dengan nama file: latihan2-3.html)

<html>

</frameset>

</html>

4. Frameset dengan atribut no-resize = “true” (Simpan dengan nama file: latihan2-4.html)

<html>

</frameset>

</html>

5. Frame inline (Simpan dengan nama file: latihan2-5.html)

<html>

<body>

</iframe>

<p>Beberapa browser lama tidak mendukung iframe.</p>

<p>Bila browser yang Anda pakai sekarang tidak mendukung, iframe tak akan terlihat.</p>

</body>

</html>

6. Membuat tabel (Simpan dengan nama file: latihan2-6.html)

<html>

<body>

<p>

Setiap tabel dimulai dengan tag table.

Setiap baris tabel dimulai dengan tag tr.

Setiap data dalam tabel dimulai dengan tag td.

</p>

<h4>Satu baris satu kolom dengan border normal:</h4>

<tr>

</tr>

</table>

<h4>Satu baris dan tiga kolom dengan border tebal:</h4>

<tr>

</tr>

</table>

<h4>Dua baris dan tiga kolom dengan border sangat tebal:</h4>

<tr>

</tr>

<tr>

</tr>

</table>

<h4>Tabel ini tidak memiliki border:</h4>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

7. Sel kosong dalam tabel (Simpan dengan nama file: latihan2-7.html)

<html>

<body>

<tr>

</tr>

<tr>

</tr>

</table>

<p>

Seperti yang Anda lihat, salah satu sel tidak memiliki border. Itu terjadi karena sel tersebut kosong. Cobalah untuk menyisipkan sebuah spasi ke dalam sel tersebut. Ternyata tetap saja tidak memiliki border.

</p>

<p>

Cara yang benar adalah dengan menyisipkan spasi non-breaking di dalam sel.

</p>

<p>Spasi non-breaking adalah sebuah entitas karakter. Bila Anda tidak mengetahui apa yang disebut karakter entitas, baca kembali materi kuliah tentang hal tersebut.

</p>

<p>Entitas spasi non-breaking dimulai dengan tanda ampersand ("&"),

kemudian karakter-karakter "nbsp", dan diakhiri dengan semicolon (";")

</p>

<p>

</p>

</body>

</html>

8. Sel tabel yang diperlebar (Simpan dengan nama file: latihan2-8.html)

<html>

<body>

<h4>Sel yang melebar dua kolom:</h4>

<tr>

<th colspan="2">Telepon</th>

</tr>

<tr>

<td>Bill Gates</td>

</tr>

</table>

<h4>Sel yang melebar dua baris:</h4>

<tr>

<th>Nama depan:</th>

<td>Bill Gates</td>

</tr>

<tr>

<th rowspan="2">Telepon:</th>

</tr>

<tr>

</tr>

</table>

</body>

</html>

9. Menambahkan latar belakang ke tabel (Simpan dengan nama file: latihan2-9.html)

<html>

<body>

<h4>Dengan warna latar belakang:</h4>

<tr>

<td>Pertama</td>

<td>Baris</td>

</tr>

<tr>

<td>Kedua</td>

<td>Baris</td>

</tr>

</table>

<h4>Dengan latar belakang gambar:</h4>

<tr>

<td>Pertama</td>

<td>Baris</td>

</tr>

<tr>

<td>Kedua</td>

<td>Baris</td>

</tr>

</table>

<h4>Latar belakang pada sel:</h4>

<tr>

<td bgcolor="red">Pertama</td>

<td>Baris</td>

</tr>

<tr>

Kedua</td>

<td>Baris</td>

</tr>

</table>

</body>

</html>

MODUL HTML

Posted by Unknown on 04.12

Belajar ngoding dengan HTML

Buatlah folder tempat anda menyimpan latihan-latihan pemograman web ini.
Buatlah coding/script HTML berikut ini dengan editor notepad
Gunakan browser untuk melihat hasil tampilan dari coding/script HTML yang telah dibuat dan tangkap (capture) lah dari masing-masing tampilan dan jadikan gambar tampilan laporan anda.

Coding/Script Dasar HTML untuk latihan

1. 1. Latihan 1 Paragraf dan line break (Simpan dengan nama file: latihan1.html)

<html>

<body>

<p>

Paragraf ini

mengandung banyak spasi dan baris

dalam kode sumbernya,

tetapi browser

akan mengabaikannya.

</p>

<p>

Sedangkan yang ini memiliki           spasi panjang.

</p>

Jumlah baris dalam setiap paragraf tergantung pada ukuran window browser Anda. Bila Anda mengubah ukuran window browser, jumlah baris dalam paragraf akan berubah.

</p>

Untuk memotong <br>baris<br>dalam sebuah<br>paragraf,<br>gunakan tag br.

</p>

</body>

</html>

1. 2. Latihan 2 Background color dan heading (Simpan: latihan2.html)

<html>

<body>

<p>

Perhatikan bahwa halaman ini seharusnya berwarna kuning.

</p>

<h1>Ini adalah heading 1</h1>

<h2>Ini adalah heading 2</h2>

<h3>Ini adalah heading 3</h3>

<h4>Ini adalah heading 4</h4>

<h5>Ini adalah heading 5</h5>

<h6>Ini adalah heading 6</h6>

<p>Gunakan tag heading hanya untuk membuat heading saja. Jangan menggunakan tag tersebut hanya untuk membuat tampilan huruf tebal. Gunakan tag lain untuk keperluan itu. </p>

<h1 align="center">Ini adalah heading 1</h1>

<p>Heading di atas telah diposisikan untuk berada di tengah halaman ini. </p>

</body>

</html>

1. 3. Latihan 3. Garis horisontal dan komentar tersembunyi (Simpan: latihan3.html)

<html>

<body>

<p>Tag hr mendefinisikan sebuah garis horisontal, default-nya adalah rata tengah:</p>

<p align=”left”>Terdapat paragraf disini</p>

<p align=”right”>Terdapat paragraf disini</p>

<p>Terdapat paragraf disini</p>

</center>

<!— Ini adalah komentar yang tidak akan ditampilkan di layar browser -->

</body>

</html>

1. 4. Latihan 4. Pemformatan teks. (Simpan: latihan4.html)

<html>

<body>

<b>Teks ini tebal </b>

<br>

<strong> Teks ini juga tebal </strong>

<br>

<big> Teks ini hurufnya besar </big>

<br>

<em> Teks ini miring </em>

<br>

<i> Teks ini juga miring </i>

<br>

<small> Teks ini hurufnya kecil </small>

<br>

Teks ini berisi <sub> subscript </sub>

<br>

Teks ini berisi <sup> superscript </sup>

</body>

</html>

1. 5. Latihan 5. Teks yang di-preformat. (Simpan: latihan5.html)

<html>

<body>

<pre>

Ini adalah

Teks yang di-preformat.

Preformat akan menampilkan spasi dan

line break apa adanya.

</pre>

<p>Tag pre cocok untuk menampilkan kode komputer di bawah ini:</p>

<pre>

for i = 1 to 10

print i

next i

</pre>

</body>

</html>

1. 6. Latihan 6. Tag “keluaran komputer”, alamat, singkatan, dan kependekan.

(Simpan: latihan6.html)

<html>

<body>

<code>Kode Komputer </code>

<br>

<kbd>Masukan dari keyboard</kbd>

<br>

<tt>Teks jenis teletype </tt>

<br>

<samp>Teks contoh</samp>

<br>

<var>Variabel komputer </var>

<br>

<p>

<b>Catatan:</b> Tag-tag tersebut biasanya digunakan untuk menampilkan kode komputer/ pemrograman.

<p>

Fakultas Teknik UNP<br>

Jl. Prof Dr Hamka<br>

Air Tawar<br>

Padang

</address>

<br>

<br>

<p>Atribut title digunakan untuk menampilkan versi yang dieja ketika pointer mouse berada di atas kependekan atau singkatan.</p>

<p>Dalam IE 5, hanya elemen acronym yang mau bekerja.</p>

<p>Dalam Navigator 6.2, elemen abbr dan acronym keduanya dapat bekerja.</p>

</body>

</html>

1. 7. Latihan 7. Arah teks dan quotation. (Simpan: latihan7.html)

<html>

<body>

<p>

Bila browser Anda mendukung kemampuan bi-directional override (bdo), baris berikut ini akan dituliskan dari kanan ke kiri (rtl):

</p>

Anggap saja ini tulisan bahasa Arab

</bdo>

<br>

Ini adalah contoh quotation panjang:

Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah quotation panjang. Ini adalah quotation panjang.

</blockquote>

Ini adalah contoh quotation pendek:

<q>

Ini adalah quotation pendek.

</q>

<p>

Menggunakan elemen blockquote, browser menyisipkan line break dan margin, tetapi elemen q tidak akan menampilkan apapun yang khusus.

</p>

</body>

</html>

1. 8. Latihan 8. Teks yang terhapus, disisipkan, dan entitas karakter.

(Simpan: latihan8.html)

<html>

<body>

<p>

satu dosin adalah

<del>duapuluh</del>

<ins>duabelas</ins>

buah

</p>

<p>

Hampir semua browser akan memberi garis (overstrike) pada teks yang (maksudnya) terhapus dan teks yang disisipkan akan diberi garis bawah.

</p>

<p>

Tetapi beberapa browser yang lama akan menampilkan teks yang terhapus atau teks disisipkan sebagai suatu teks biasa (plain text).

</p>

<p>Ini adalah entitas karakter: </p>

<p>

Coba untuk mengganti 000 dengan suatu angka (misalnya 169), dan muat ulang halaman Anda agar Anda dapat melihat hasil dari perubahan yang dilakukan.

</p>

</body>

</html>

1. 9. Latihan 9. List unordered dan ordered. (Simpan: latihan9.html)

<html>

<body>

<h4>Sebentuk list unordered:</h4>

<ul>

</ul>

<br>

<h4>Sebentuk list ordered:</h4>

<ol>

</ol>

</body>

</html>

1. 10. Latihan 10. Jenis-jenis list ordered. (Simpan: latihan10.html)

<html>

<body>

<h4>List bernomor:</h4>

<ol>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ol>

<h4>List dengan huruf:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ol>

<h4>List dengan huruf kecil:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ol>

<h4>List dengan angka romawi:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ol>

<h4>List dengan angka romawi kecil:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ol>

</body>

</html>

1. 11. Latihan 11. Jenis-jenis list unoredered. (Simpan: latihan11.html)

<html>

<body>

<h4>List dengan bullet berbentuk disc:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ul>

<h4>List dengan bullet berbentuk lingkaran:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ul>

<h4>List dengan bullet berbentuk kotak:</h4>

<li>Pisang</li>

<li>Lemon</li>

<li>Jeruk</li>

</ul>

</body>

</html>

1. 12. Latihan 12. List bersarang dan list definisi. (Simpan: latihan12.html)

<html>

<body>

<h4>Sebuah list bersarang:</h4>

<ul>

<li>Teh

<ul>

<li>Teh hitam</li>

<li>Teh Hijau</li>

</ul>

</li>

</ul>

<br>

<h4>Contoh list definisi:</h4>

<dl>

<dd>Minuman panas hitam</dd>

<dd>Minuman dingin putih</dd>

</dl>

</body>

</html>

@Ajeng_ZT

HTML 5

HTML Lanjut

MODUL HTML

Labels

Blog Archive

Popular Posts

About Me