This is featured post 1 title
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.
This is featured post 2 title
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.
This is featured post 3 title
Replace these every slider sentences with your featured post descriptions.Go to Blogger edit html and find these sentences.Now replace these with your own descriptions.This theme is Bloggerized by Lasantha - Premiumbloggertemplates.com.
Sabtu, 05 April 2014
Pertemuan 2
21.49
papermint22
Struktur Dasar H T ML
• Tag <link>, digunakan untuk menunjukkan relasi antar dokumen HTML.
4.7 Menambahkan Gambar
4.8 Menambahkan Link
4.9 Tabel
Pertemuan 3
21.30
papermint22
PERTEMUAN 3
3.1. Singkatan (Akronim)
Untuk menuliskan suatu dokumen atau beberapa istilah kita terkadang menggunakan singkatan
(akronim). Untuk menuliskan singkatan, ada tag html yang di gunakan yaitu Tag <abbr> dan Tag
<acronym). Tag tersebut digunakan untuk menyimpan data kepanjangan dari suatu singkatan yang
ditampilkan dalam dokumen tersebut. Atribut yang digunakan yaitu title.
Sintaks penulisannya:
<abbr title=“kepanjangannya”>singkatan</abbr>
<acronym title=“kepanjangannya”>singkatan</acronym>
Ketika menggunakan tag di atas, maka pada saat mouse pointer kita berada di atas singkatan
tersebut yang ditampilkan di browser web, maka kepanjangan dari singkatan tersebut akan di
tampilkan mengambang di atasnya.
akronim.html
<html>
<head>
<title>Contoh Penggunaan Akronim</title>
</head>
<body>
<abbr title="World Wide Web">WWW</abbr> adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya
(hyperlink)yang membentuk samudra belantara informasi.
<br>
<acronym title="Hyper Text Transfer
Protocol">HTTP</acronym> adalah protokol yang dipergunakan untuk
mentransfer dokumen dalam World Wide Web (WWW).
</body>
</html>
3.2. Address
Alamat (address) merupakan salah satu elemen yang umum di dalam suatu dokumen. Untuk
membuat alamat pada dokumen html di sediakan secara khusus yaitu Tag <address>. Dengan
adanya tag ini maka penulisan alamat dapat di standarkan. Secara default tag <address> akan
menampilkan teks di sebalah kiri, untuk di sebelah kanan menggunakan atribut dir=”rtl”.
Sintaks penulisannya :
<address>alamat anda</address>
address.html
<html>
<head>
<title>Contoh Penggunaan Address</title>
</head>
<body>
<address>
STMIK AMIKOM Yogykarta<br />
Kampus Terpadu: Jl.Ring Road Utara<br />
Condong Catur<br />
Sleman<br />
Yogyakarta
</address>
</body>
</html>
3.3. Arah Teks
Secara lazim untuk teks kita membacanya dari kiri ke kanan (left to right – ltr). Di html ada tag
yang digunakan untuk mengubah penulisan teks dari kanan ke kiri (right to left – rtl). Tag yang
digunakan yaitu Tag <bdo> bidirectional override merupakan tag yang digunakan untuk
mendefinisikan arah penulisan teks. Atribut yang digunakan dir.
Sintaks penulisannya :
<bdo dir="rtl">Teks yang mau di arahkan</bdo>
arah_teks.html
<html>
<head>
<title>Contoh Penggunaan BDO</title>
</head>
<body>
<bdo dir="rtl">
STMIK AMIKOM Yogykarta<br />
Jurusan :<br />
S2 Megister Teknik Informatika<br />
S1 Teknik Informatika<br />
S1 Sistem Informasi<br />
D3 Teknik Informatika<br />
D3 Manajemen Informatika
</bdo>
</body>
</html>
3.4. Teks yang Disisipkan atau Dihapus
Dalam menulis artikel web kita bisa mengkoreksi teks yang di tuliskan dengan menggunakan tag
<ins> dan tag <del>. Tag tersebut kita bisa megkoreksi hasil pekerjaan dengan menyisipkan atau
menghapus. Tag <ins> memberikan tanda untuk sisipan dengan membuat teks di garis bawah.
Sedangkan Tag <del> bukan menghapus teks tetapi mengkoreksi pekerjaan dengan memberikan
garis tengah horizontal pada teks yang dihapus.
Sintaks penulisannya :
Satu tahun adalah <del>lima belas</del> <ins>dua belas</ins> bulan
teks_sisip_hapus.html
<html>
<head>
<title>Contoh Penggunaan INS & DEL</title>
</head>
<body>
Budi membeli perlengkapan kuliah diantarnya sebagai berikut:
<br>
1. Buku tulis Rp.10.000<br>
2. ballpoint pen Rp.15000<br>
3. stabilo Rp.5000 <br>
Total pembeliannya adalah <del>40.000</del> <ins>30.000</ins>
</body>
</html>
3.5. Link HTML
Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain.
Dokumen ini bisa berupa teks dan atau gambar yang saling menghubungkan menuju ke dokumen
atau bagian lain dalam suatu dokumen. Browser web akan menyorot teks atau gambar yang di
identifikasi sebagai link dengan warna atau garis bawah untuk menunjukkan bahwa itu adalah
hyperteks link sering di singkat hyperlink atau link saja.
3.5.1. Tag Anchor
Tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Atribut pada tag <a>
diantaranya: atribut href="uri" untuk mendefinisikan lokasi link, atribut name="name" untuk
mendefinisikan nama link, dan atribut target="_blank"|"_parent"|"_top"|"_self" untuk
_blank akan membuka pada window baru, _parent/_top akan keluar dari frame, _self akan tetap
di window browser.
Sintaks penulisannya :
<a href="http://www.amikom.ac.id" target="_blank" name="web
amikom">Link web Amikom </a>
Link html terdapat 3 jenis yaitu diantaranya sebagai berikut:
3.5.1.1. Link Relatif
Dibuat apabila anda membuat suatu link pada page anda ke page lain pada komputer yang
sama, tidak memerlukan menggunakan alamat internet yang lengkap. Jika kedua page pada
direktori yang sama, anda dapat menuliskan nama file html sebagai berikut:
link_relatif.html
<html>
<head>
<title>Contoh Penggunaan Link Relatif</title>
</head>
<body>
Anda ingin melihat contoh penggunaan akronim, silahkan klik
<a href="akronim.html">link berikut</a>.
</body>
</html>
3.5.1.2. Link Absolut
Dibuat apabila anda membuat link ke page web lain yang berada pada web site lain di internet.
Dalam hal ini anda harus menuliskan alamat internet secara lengkap. Berikut adalah
contohnya:
link_absolut.html
<html>
<head>
<title>Contoh Penggunaan Link Absolut</title>
</head>
<body>
Anda ingin mengunjungi situs resmi amikom. Silahkan klik <a
href="http://www.amikom.ac.id">link berikut</a>.
</body>
</html>
3.5.1.3. Link ke Bagian Lain dalam Dokumen
Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila di
tampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang.
Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antarbagian,
dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa
tempat di dalam dokumen akan ada bagian yang bernama, dan dibagian lainnya dapat
diletakkan link untuk menuju bagian-bagian tersebut.
Sintaks penulisannya :
<a href="#tujuan">Link asal</a>
Artikel bebas
.
.
.
<a name="tujuan">Posisi tujuan</a>
Artikel bebas
.
.
.
link_dalam_dokumen.html
<html>
<head>
<title>Contoh Penggunaan Link Dalam Dokumen</title>
</head>
<body>
<p>
<a name="top">
<a href="#Bab4">
Lihat Bab 4.
</a>
</a>
</p>
<h2>Bab 1</h2>
<p>Bab 1 adalah menjelaskan bla bla bla.</p>
<h2>Bab 2</h2>
<p>Bab 2 adalah menjelaskan bla bla bla.</p>
<h2>Bab 3</h2>
<p>Bab 3 adalah menjelaskan bla bla bla.</p>
<a name="Bab4">
<h2>Bab 4</h2>
</a>
<p>
Bab 4 ini menunjukkan tujuan dari link dalam satu
halaman.</p>
<h2>Bab 5</h2>
<p>
Bab 5 adalah menjelaskan bla bla bla. </p>
<a href="#top">Kembali ke atas</a>
</body>
</html
3.5.2. Link Mailto
Mailto digunakan untuk membuat link pada suatu pesan mail (tidak akan bisa bekerja jika mail
client tidak terpasang).
link_mailto.html
<html>
<head>
<title>Contoh Penggunaan Link Mailto</title>
</head>
<body>
Anda ingin mengirim tugas pemrograman web bisa melalui <a
href="mailto:haryoko@amikom.ac.id">email berikut</a>.
</body>
</html>
3.6. Tag Marquee
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.
Atribut yang sering di gunakan adalah :
bgcolor="warna"
Untuk mengatur warna background text.
direction="left/right/up/down"
Mengatur arah gerakan teks.
behavior="scroll/slide/alternate"
Untuk mengatur perilaku gerakan Scroll adalan suatu teks bergerak berputar. Slide adalah suatu
teks bergerak sekali lalu berhenti. Alternate adalah suatu teks bergerak dari kiri kekanan lalu balik
lagi.
title='pesan"
Pesan akan muncul saat mouse berada di atas teks.
scrollmount="angka"
Mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat pula gerakan text itu.
scrolldelay="angka"
Untuk mengatur waktu tunda gerakan dalam detik.
loop="angka|-1|infinite"
Untuk mengatur jumlah loop.
width="lebar"
Mengatur lebar blok teks dalam pixel atau persen.
3.1. Singkatan (Akronim)
Untuk menuliskan suatu dokumen atau beberapa istilah kita terkadang menggunakan singkatan
(akronim). Untuk menuliskan singkatan, ada tag html yang di gunakan yaitu Tag <abbr> dan Tag
<acronym). Tag tersebut digunakan untuk menyimpan data kepanjangan dari suatu singkatan yang
ditampilkan dalam dokumen tersebut. Atribut yang digunakan yaitu title.
Sintaks penulisannya:
<abbr title=“kepanjangannya”>singkatan</abbr>
<acronym title=“kepanjangannya”>singkatan</acronym>
Ketika menggunakan tag di atas, maka pada saat mouse pointer kita berada di atas singkatan
tersebut yang ditampilkan di browser web, maka kepanjangan dari singkatan tersebut akan di
tampilkan mengambang di atasnya.
akronim.html
<html>
<head>
<title>Contoh Penggunaan Akronim</title>
</head>
<body>
<abbr title="World Wide Web">WWW</abbr> adalah halaman-halaman website yang dapat saling terkoneksi satu dengan lainnya
(hyperlink)yang membentuk samudra belantara informasi.
<br>
<acronym title="Hyper Text Transfer
Protocol">HTTP</acronym> adalah protokol yang dipergunakan untuk
mentransfer dokumen dalam World Wide Web (WWW).
</body>
</html>
3.2. Address
Alamat (address) merupakan salah satu elemen yang umum di dalam suatu dokumen. Untuk
membuat alamat pada dokumen html di sediakan secara khusus yaitu Tag <address>. Dengan
adanya tag ini maka penulisan alamat dapat di standarkan. Secara default tag <address> akan
menampilkan teks di sebalah kiri, untuk di sebelah kanan menggunakan atribut dir=”rtl”.
Sintaks penulisannya :
<address>alamat anda</address>
address.html
<html>
<head>
<title>Contoh Penggunaan Address</title>
</head>
<body>
<address>
STMIK AMIKOM Yogykarta<br />
Kampus Terpadu: Jl.Ring Road Utara<br />
Condong Catur<br />
Sleman<br />
Yogyakarta
</address>
</body>
</html>
3.3. Arah Teks
Secara lazim untuk teks kita membacanya dari kiri ke kanan (left to right – ltr). Di html ada tag
yang digunakan untuk mengubah penulisan teks dari kanan ke kiri (right to left – rtl). Tag yang
digunakan yaitu Tag <bdo> bidirectional override merupakan tag yang digunakan untuk
mendefinisikan arah penulisan teks. Atribut yang digunakan dir.
Sintaks penulisannya :
<bdo dir="rtl">Teks yang mau di arahkan</bdo>
arah_teks.html
<html>
<head>
<title>Contoh Penggunaan BDO</title>
</head>
<body>
<bdo dir="rtl">
STMIK AMIKOM Yogykarta<br />
Jurusan :<br />
S2 Megister Teknik Informatika<br />
S1 Teknik Informatika<br />
S1 Sistem Informasi<br />
D3 Teknik Informatika<br />
D3 Manajemen Informatika
</bdo>
</body>
</html>
3.4. Teks yang Disisipkan atau Dihapus
Dalam menulis artikel web kita bisa mengkoreksi teks yang di tuliskan dengan menggunakan tag
<ins> dan tag <del>. Tag tersebut kita bisa megkoreksi hasil pekerjaan dengan menyisipkan atau
menghapus. Tag <ins> memberikan tanda untuk sisipan dengan membuat teks di garis bawah.
Sedangkan Tag <del> bukan menghapus teks tetapi mengkoreksi pekerjaan dengan memberikan
garis tengah horizontal pada teks yang dihapus.
Sintaks penulisannya :
Satu tahun adalah <del>lima belas</del> <ins>dua belas</ins> bulan
teks_sisip_hapus.html
<html>
<head>
<title>Contoh Penggunaan INS & DEL</title>
</head>
<body>
Budi membeli perlengkapan kuliah diantarnya sebagai berikut:
<br>
1. Buku tulis Rp.10.000<br>
2. ballpoint pen Rp.15000<br>
3. stabilo Rp.5000 <br>
Total pembeliannya adalah <del>40.000</del> <ins>30.000</ins>
</body>
</html>
3.5. Link HTML
Dokumen HTML menggunakan hyperlink (anchor) untuk menghubungkan kepada dokumen lain.
Dokumen ini bisa berupa teks dan atau gambar yang saling menghubungkan menuju ke dokumen
atau bagian lain dalam suatu dokumen. Browser web akan menyorot teks atau gambar yang di
identifikasi sebagai link dengan warna atau garis bawah untuk menunjukkan bahwa itu adalah
hyperteks link sering di singkat hyperlink atau link saja.
3.5.1. Tag Anchor
Tag <a> untuk membuat suatu link kepada dokumen lain dalam web. Atribut pada tag <a>
diantaranya: atribut href="uri" untuk mendefinisikan lokasi link, atribut name="name" untuk
mendefinisikan nama link, dan atribut target="_blank"|"_parent"|"_top"|"_self" untuk
_blank akan membuka pada window baru, _parent/_top akan keluar dari frame, _self akan tetap
di window browser.
Sintaks penulisannya :
<a href="http://www.amikom.ac.id" target="_blank" name="web
amikom">Link web Amikom </a>
Link html terdapat 3 jenis yaitu diantaranya sebagai berikut:
3.5.1.1. Link Relatif
Dibuat apabila anda membuat suatu link pada page anda ke page lain pada komputer yang
sama, tidak memerlukan menggunakan alamat internet yang lengkap. Jika kedua page pada
direktori yang sama, anda dapat menuliskan nama file html sebagai berikut:
link_relatif.html
<html>
<head>
<title>Contoh Penggunaan Link Relatif</title>
</head>
<body>
Anda ingin melihat contoh penggunaan akronim, silahkan klik
<a href="akronim.html">link berikut</a>.
</body>
</html>
3.5.1.2. Link Absolut
Dibuat apabila anda membuat link ke page web lain yang berada pada web site lain di internet.
Dalam hal ini anda harus menuliskan alamat internet secara lengkap. Berikut adalah
contohnya:
link_absolut.html
<html>
<head>
<title>Contoh Penggunaan Link Absolut</title>
</head>
<body>
Anda ingin mengunjungi situs resmi amikom. Silahkan klik <a
href="http://www.amikom.ac.id">link berikut</a>.
</body>
</html>
3.5.1.3. Link ke Bagian Lain dalam Dokumen
Link jenis ini dibuat apabila untuk dokumen yang panjang sekali, sehingga apabila di
tampilkan dalam browser web akan mengharuskan kita melakukan scroll layar berulang-ulang.
Navigasi untuk penelusuran dokumen dapat dimudahkan dengan membuat link antarbagian,
dengan menandai setiap bagian tersebut dengan memberinya nama. Sehingga pada beberapa
tempat di dalam dokumen akan ada bagian yang bernama, dan dibagian lainnya dapat
diletakkan link untuk menuju bagian-bagian tersebut.
Sintaks penulisannya :
<a href="#tujuan">Link asal</a>
Artikel bebas
.
.
.
<a name="tujuan">Posisi tujuan</a>
Artikel bebas
.
.
.
link_dalam_dokumen.html
<html>
<head>
<title>Contoh Penggunaan Link Dalam Dokumen</title>
</head>
<body>
<p>
<a name="top">
<a href="#Bab4">
Lihat Bab 4.
</a>
</a>
</p>
<h2>Bab 1</h2>
<p>Bab 1 adalah menjelaskan bla bla bla.</p>
<h2>Bab 2</h2>
<p>Bab 2 adalah menjelaskan bla bla bla.</p>
<h2>Bab 3</h2>
<p>Bab 3 adalah menjelaskan bla bla bla.</p>
<a name="Bab4">
<h2>Bab 4</h2>
</a>
<p>
Bab 4 ini menunjukkan tujuan dari link dalam satu
halaman.</p>
<h2>Bab 5</h2>
<p>
Bab 5 adalah menjelaskan bla bla bla. </p>
<a href="#top">Kembali ke atas</a>
</body>
</html
3.5.2. Link Mailto
Mailto digunakan untuk membuat link pada suatu pesan mail (tidak akan bisa bekerja jika mail
client tidak terpasang).
link_mailto.html
<html>
<head>
<title>Contoh Penggunaan Link Mailto</title>
</head>
<body>
Anda ingin mengirim tugas pemrograman web bisa melalui <a
href="mailto:haryoko@amikom.ac.id">email berikut</a>.
</body>
</html>
3.6. Tag Marquee
Marquee ini bisa di buat dengan menggunakan tag <marquee>...</marquee>.
Atribut yang sering di gunakan adalah :
bgcolor="warna"
Untuk mengatur warna background text.
direction="left/right/up/down"
Mengatur arah gerakan teks.
behavior="scroll/slide/alternate"
Untuk mengatur perilaku gerakan Scroll adalan suatu teks bergerak berputar. Slide adalah suatu
teks bergerak sekali lalu berhenti. Alternate adalah suatu teks bergerak dari kiri kekanan lalu balik
lagi.
title='pesan"
Pesan akan muncul saat mouse berada di atas teks.
scrollmount="angka"
Mengatur kecepatan gerakan dalam pixel, semakin besar angka semakin cepat pula gerakan text itu.
scrolldelay="angka"
Untuk mengatur waktu tunda gerakan dalam detik.
loop="angka|-1|infinite"
Untuk mengatur jumlah loop.
width="lebar"
Mengatur lebar blok teks dalam pixel atau persen.
Pertemuan 4
21.24
papermint22
1. Image HTML
Bayangkan apabila di web anda anda berisi tulisan dan tidak ada gambarnya pasti tidak menarik.
Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung. Adanya gambar di
web anda akan memperindah tampilan. File gambar yang umum digunakan ada 3 jenis format yaitu
PNG, GIF, dan JPG. Ketika anda memilih suatu gambar harus memperhatikan dari format gambar
yang digunakan karena setiap gambar akan membutuhkan waktu tambahan untuk di download dan
memperlambat awal penampilan suatu dokumen dalam browser. Oleh karena itu, berhati-hatilah
dalam memilih gambar dan menyertakannya ke dalam suatu dokumen. Untuk menysipkan gambar
pada dokumen html di sediakan secara khusus yaitu Tag <img>.
Sintaks penulisannya :
<img src=”url” />
2. Tabel HTML
Tabel dapat digunakan untuk memberikan data dalam bentuk kolom dan baris. Sebuah tabel
mempunyai judul, baris untuk informasi, dan sel untuk setiap itemnya. Tabel dapat di isi dengan
daftar item, paragraf, form, gambar, teks-teks preformatted, dan bahkan tabel-tabel yang lain (tabel
dalam tabel). Untuk membuat tabel digunakan tag awal <table> dan tag penutup </table>.
Sintaks penulisannya :
<table>
<tr>
<td>Data Tabel</td>
<tr>
</table>
3. Form dan Input HTML
Form merupakan salah satu elemen HTML yang digunakan untuk mendapatkan masukan dari
pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML.
Umumnya pengolahan form dilakukan pada server dengan menggunakan skrip yang bersifat
server-side seperti PHP, ASP dan lain sebagainya. ). Untuk membuat form digunakan tag awal
<form> dan tag penutup </form>.
Sintaks penulisannya :
<form action=”url” method=”get|post”>
</form>
4. Elemen Label, Fieldset dan Legend
Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan form. Elemen
ini diisikan dengan deskripsi dari elemen masukan yang ingin ditambahkan dan harus memiliki
atribut for. Atribut for pada elemen label berisikan nilai yang sama dengan atribut id pada elemen
masukan form. Pengisian nilai yang sama akan mengikatkan elemen label dengan elemen masukan
sehingga pengguna dapat langsung mengisikan nilai dengan melakukan klik teks yang dihasilkan
oleh elemen label. Elemen fieldset merupakan elemen yang digunakan untuk membungkus
beberapa elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan
elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan. Sedangkan
Elemen legend digunakan untuk memberikan judul pada sebuah fieldset.
Sintaks penulisannya :
<fieldset>
<legend>Judul</legend>
</fieldset>
Bayangkan apabila di web anda anda berisi tulisan dan tidak ada gambarnya pasti tidak menarik.
Gambar di dalam suatu web page merupakan daya penarik bagi pengunjung. Adanya gambar di
web anda akan memperindah tampilan. File gambar yang umum digunakan ada 3 jenis format yaitu
PNG, GIF, dan JPG. Ketika anda memilih suatu gambar harus memperhatikan dari format gambar
yang digunakan karena setiap gambar akan membutuhkan waktu tambahan untuk di download dan
memperlambat awal penampilan suatu dokumen dalam browser. Oleh karena itu, berhati-hatilah
dalam memilih gambar dan menyertakannya ke dalam suatu dokumen. Untuk menysipkan gambar
pada dokumen html di sediakan secara khusus yaitu Tag <img>.
Sintaks penulisannya :
<img src=”url” />
2. Tabel HTML
Tabel dapat digunakan untuk memberikan data dalam bentuk kolom dan baris. Sebuah tabel
mempunyai judul, baris untuk informasi, dan sel untuk setiap itemnya. Tabel dapat di isi dengan
daftar item, paragraf, form, gambar, teks-teks preformatted, dan bahkan tabel-tabel yang lain (tabel
dalam tabel). Untuk membuat tabel digunakan tag awal <table> dan tag penutup </table>.
Sintaks penulisannya :
<table>
<tr>
<td>Data Tabel</td>
<tr>
</table>
3. Form dan Input HTML
Form merupakan salah satu elemen HTML yang digunakan untuk mendapatkan masukan dari
pengguna web. Pengguna web dapat memasukkan input melalui halaman-halaman HTML.
Umumnya pengolahan form dilakukan pada server dengan menggunakan skrip yang bersifat
server-side seperti PHP, ASP dan lain sebagainya. ). Untuk membuat form digunakan tag awal
<form> dan tag penutup </form>.
Sintaks penulisannya :
<form action=”url” method=”get|post”>
</form>
4. Elemen Label, Fieldset dan Legend
Elemen label memberikan fasilitas untuk menambahkan teks pada elemen masukan form. Elemen
ini diisikan dengan deskripsi dari elemen masukan yang ingin ditambahkan dan harus memiliki
atribut for. Atribut for pada elemen label berisikan nilai yang sama dengan atribut id pada elemen
masukan form. Pengisian nilai yang sama akan mengikatkan elemen label dengan elemen masukan
sehingga pengguna dapat langsung mengisikan nilai dengan melakukan klik teks yang dihasilkan
oleh elemen label. Elemen fieldset merupakan elemen yang digunakan untuk membungkus
beberapa elemen masukan form, untuk menandakan bahwa elemen-elemen tersebut merupakan
elemen masukan yang berada pada satu grup yang sama, atau saling berhubungan. Sedangkan
Elemen legend digunakan untuk memberikan judul pada sebuah fieldset.
Sintaks penulisannya :
<fieldset>
<legend>Judul</legend>
</fieldset>
Petemuan Ke 5
21.17
papermint22
PENGENALAN HTML5
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. (sumber : Wikipedia)
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.
HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve
Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah
tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun
di web."
Aturan untuk mempelajari HTML5
Beberapa aturan yang harus kamu pelajari saat belajar HTML5, yaitu :
DUKUNGAN BROWSER HTML5
DOCTYPE adalah instruksi untuk web browser tentang apa versi bahasa markup
halaman yang ditulis.
menunjukkan link navigasi, header, dan footer.
</video>
atau
<videocontrols="controls"> <source
src="judulvideo.webm" type="video/webm"></video>
type="audio/mp3"></audio>
INPUT FORM BARU DI HTML5
Macam -macam jenis input form baru di HTML5 yaitu:
datetime, datetime-local)
search
color
tel (tipe ini belum support jadi tidak ada perubahan)
Sintaks Penulisanya :
<input type="jenis"/>
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. (sumber : Wikipedia)
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.
HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve
Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah
tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun
di web."
Aturan untuk mempelajari HTML5
Beberapa aturan yang harus kamu pelajari saat belajar HTML5, yaitu :
- Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript.
- Mengurangi kebutuhan untuk plugin eksternal (seperti Flash).
- Lebih baik penanganan kesalahan.
- Lebih banyak penggunaakn markup untuk mengganti scripting.
- HTML5 harus independen.
- Proses development-nya harus terlihat untuk umum (visible).
- Video dan Audio : tidak perlu menempelkan flash, quickplayer, atau
- realplayer untuk memutar audio dan video.
- Canvas : Media corat-coret langsung tanpa flash dan applet java.
- Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, dan search.
- Semantic: Mempermudah designer dengan tag khusus layout, seperti: artikel,footer, header, navigasi, dan section.
DUKUNGAN BROWSER HTML5
- Chrome
- Safari Apple v.4+
- Internet Explorer 9
- Opera
- Maxthon
- Firefox 4, 5, 6 dan seterusnya
DOCTYPE adalah instruksi untuk web browser tentang apa versi bahasa markup
halaman yang ditulis.
- Deklarasi DOCTYPE mengacu pada Document Type Definition(DTD).
- DTDmenetapkan aturan untuk bahasa markup, sehingga browser dapat
- Penggunaan DOCTYPE pada html5 lebih di sederhanakan.
- Sintak penulisannya : membuat konten halaman tersebut dengan benar.
- Semantic= arti/makna
- Semantic elements = elemen dengan makna
- Unsur semantik jelas menggambarkan maknanya untuk browser dan developer.
- Contoh non-semantik elemen: <div> dan <span> -tidak menjelaskan tentang isinya.
- Contoh semantik elemen: <form>, <table>, dan <img> -Jelas mendefinisikan isinya.
- Banyak situs web yang ada saat ini mengandung kode HTML seperti ini:
menunjukkan link navigasi, header, dan footer.
- HTML5 menawarkan elemen semantik baru untuk mendefinisikan bagian
- <header>
- <nav>
- <section>
- <article>
- <aside>
- <figure>
- <figcaption>
- <time>
- <footer>
- dan masih banyak tag-tag lainnya
- <header>, digunakan untuk area header(bagian atas sebuah halaman web).
- <article>, untuk tempat meletakkan artikel atau tulisan dihalaman web.
- <aside>, digunakan sebagai penambah informasi utama didalam halaman
- <section>, untuk menentukan seksi-seksi dokumen. Misalnya bagian yg
- <figure>, Menentukan konten mandiri, seperti diagram, foto, daftar kode,
- <figcaption>, Mendefinisikan caption untuk elemen <figure>
- Digunakan untuk memasukkan video, misalnya ingin memutar video kedalam halaman web.
- Pada versi HTML sebelumnya untuk memutar video pada sebuah web menggunakan plugins tambahanyang biasa disebut flash Player.
- Tag Video Pada HTML5, setidaknya ada 3 jenis format video yang mendukung yaitu :
- Ogg(File Ogg dengan Video Codec Theora dan Audio Codec Vorbis) (.ogg)
- MPEG4(File MPEG4 dengan Video Codec H.264 dan Audio Codec AAC) (.mp4)
- WebM(File WebM dengan Video Codec VP8 dan Audio Codec Vorbis)(.webm)
- Apabila anda mempunyai video dengan format video bukan ogg, mp4, dan webm. Anda bisa menggunakan aplikasi video converter salah satunya miro
- video converter. Tag <video>
- Sintaks Penulisanya :
</video>
atau
<videocontrols="controls"> <source
src="judulvideo.webm" type="video/webm"></video>
- AUDIO Digunakan untuk memasukkan suara/audio, misalnya ingin memutar lagu kedalam halaman web.
- Ketika di generasi sebelumnya (HTML 4.01) memasukkan audio ke dalam
- Tag Audio Pada HTML5, setidaknya ada 3 jenis format audioyang
- Tag <audio>
- Sintaks Penulisanya :
type="audio/mp3"></audio>
INPUT FORM BARU DI HTML5
Macam -macam jenis input form baru di HTML5 yaitu:
- url
- number
- range
datetime, datetime-local)
search
color
tel (tipe ini belum support jadi tidak ada perubahan)
Sintaks Penulisanya :
<input type="jenis"/>
