Sabtu, 05 April 2014

Pertemuan V

PERTEMUAN 5

HTML5 adalah perbaikan pada HTML sebelumnya agar lebih terstruktur dan lebih mudah dibaca manusia. HTML5 merupakan hasil proyek dari W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working
Group). 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. Pada dasarnya untuk menyetel video tidak membutuhkan flash player lagi.

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).

FITUR-FITUR BARU DI HTML5
 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 yang lebih baik untuk penyimpanan secara offline.

DUKUNGAN BROWSER HTML5
 Chrome
 Safari Apple v.4+
 Internet Explorer 9
 Opera
 Maxthon
 Firefox 4, 5, 6 dan seterusnya

MENGUJI BROWSER
 Untuk menguji browser yang terinstall di komputer. Apakah telah mendukung
HTML5 dapat diuji dengan link berikut :
 http://html5test.com/

DOCTYPE UNTUK HTML5
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 membuat konten halaman tersebut dengan benar.
 Penggunaan DOCTYPE pada html5 lebih di sederhanakan.
 Sintak penulisannya :
<!DOCTYPE html>

STRUKTUR DASAR HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Judul Pada Dokumen</title>
</head>
<body>
Isi pada dokumen . . .
</body>
</html>

ELEMEN YANG DI HAPUS PADA HTML5
 <acronym>
 <applet>
 <basefont>
 <big>
 <center>
 <dir>
 <font>
 <frame>
 <frameset>
 <noframes>
 <strike>
 <tt>

HTML5 SEMANTIC ELEMENTS
 Semantic= arti/makna
 Semantic elements = elemen dengan makna

Apa Unsur Semantic?
 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.

ELEMENSEMANTIKBARUdi HTML5
 Banyak situs web yang ada saat ini mengandung kode HTML seperti ini: <div id="nav">, <div class="header">, atau <div id="footer">, untuk menunjukkan link navigasi, header, dan footer.
 HTML5 menawarkan elemen semantik baru untuk mendefinisikan bagian yang berbeda dari sebuah halaman web:
<header>
<nav>
<section>
<article>
<aside>
<figure>
<figcaption>
<time>
<footer>
dan masih banyak tag-tag lainnya

PENJELASAN TAG-TAG HTML5
 <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 web. Biasanya berupa peringatan, catatan, dll.
 <section>, untuk menentukan seksi-seksi dokumen. Misalnya bagian yg mendefinisikan sebagai profil, kontak, berita, dan sebagainya.
 <figure>, Menentukan konten mandiri, seperti diagram, foto, daftar kode, dll.
 <figcaption>, Mendefinisikan caption untuk elemen <figure>
CONTOH SEDERHANA
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Fitur HTML5</title>
</head>
<body>
<header>
<h2>Tutorial HTML5</h2>
</header>
<article>
Web Hypertext Application Technology Working Group (WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000.<br/>
<b>Sejak tahun 2009</b>, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelahW3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.<br/>
Dibawah ini logo HTML5 yaitu:
</aticle>
<footer>
<p><h4>Copyright © 2014 Admin</h4></p>
</footer>
</body>
</html>

CONTOH TAG FIGURE DAN FIGCAPTION
<!DOCTYPE html>

<html>

<head>

<title>Tag Figure dan Figcaption</title>

</head>

<body>

<figcaption>Android OS</figcaption>

</figured>

</body>

</html>

VIDEO

 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 videoyang 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 src="judulvideo.ogg" controls="controls">
</video>
atau
<videocontrols="controls"> <source
src="judulvideo.webm" type="video/webm"></video>

ATRIBUT PADA TAG <VIDEO>

Atribute: controls
Value: controls
Description: Menentukan kontrol video yang akan ditampilkan(Contoh: tombol play/pause)

Atribute: autoplay
Value: autoplay
Description: Menentukan bahwa video akan mulai berputar otomatis

Atribute: src
Value: URL
Description: Menentukan alamat URL dari mana sumber video

Atribute: width
Value: pixels
Description: Mengatur lebar dari video player

Atribute: height
Value: pixels
Description: Mengatur tinggi dari video player

Atribute: loop
Value: loop
Description: Untuk mengulang / memainkan kembali video yang telah selesai diputar .

Atribute: muted
Value: muted
Description: Menentukan bahwa output suara akan dimute/dihilangkan

Atribute: poster
Value: URL
Description: Menentukan gambar yang akan tampil ketika video
masih belum berputar .

Atribute: preload
Value: auto, meta,data,none
Description: Menentukan jika dan bagaimana kapan video ini harus diputar menjalani proses loading ketika halaman terbuka.

CONTOH TAG <VIDEO>
<html>
<head>
<meta charset="UTF-8">
<title>Video</title>
</head>
<body>
<video controls="controls" width="450" height="260">
<source src="video/BOS.webm" type="video/webm"/>
</video>
</body>
</html>

AUDIO
 Digunakan untuk memasukkan suara/audio, misalnya ingin memutar lagu
kedalam halaman web.
 Ketika di generasi sebelumnya (HTML 4.01) memasukkan audio ke dalam
web masih harus menggunakan flash.
 Tag Audio Pada HTML5, setidaknya ada 3 jenis format audioyang
mendukung yaitu:Ogg, MP3, Wav.
 Tag <audio>
 Sintaks Penulisanya :
<audio controls="controls"><source src="judullagu.mp3"
type="audio/mp3"></audio>

ATRIBUT PADA TAG <AUDIO>

Atribute: controls
Value: controls
Description: Menentukan kontrol video yang akan ditampilkan(Contoh: tombol play/pause)

Atribute: autoplay
Value: autoplay
Description: Menentukan bahwa video akan mulai berputar otomatis

Atribute: src
Value: URL
Description: Menentukan alamat URL dari mana sumber video

Atribute: loop
Value: loop
Description: Untuk mengulang / memainkan kembali video yang telah selesai diputar .
Atribute: preload
Value: auto,metadat,a none
Description: Menentukan jika dan bagaimana kapan video ini harus diputar menjalani proses loading ketika halaman terbuka.

CONTOH TAG <AUDIO>

<html>

<head>

<title>Audio</title>

</head>

<body>

<h3>One Direction - One Thing</h3>

</audio>

</body>

</html>

INPUT FORM BARU DI HTML5
 Macam -macam jenis input form baru di HTML5 yaitu:
email
url
number
range
Date pickers (date, month, week, time,datetime, datetime-local)
search
color
tel (tipe ini belum support jadi tidak ada perubahan)
 Sintaks Penulisanya :
<input type="jenis"/>

VALIDATOR
 http://validator.w3.org/
 Digunakan untuk mengecek validasi atau kebenaran kode HTML web anda.

0 komentar:

Jumat, 04 April 2014

Pertemuan IV

PERTEMUAN IV

Saya akan membahas pertemuan ke 4 mengenai image, tabel dan form.

Tag <img> mempunyai atribut di antaranya:

src Url dari file image/direktori gambar

align Letak gambar pada teks, nilai atributnya left, right, top,middle, dan bottom

width Lebar gambar dalam satuan pixel

height Tinggi gambar dalam satuan pixel

alt Menampilkan teks pengganti jika gambar tidak tampil di brows border Memberi bingkai pada gambar

<!DOCTYPE html >

<html>

<head >

<title>Contoh Posisi Img</title>

</head >

<body>

<p>

Logo Amikom

<img src="Flowers.jpg" width="640" height="480" align="center"

alt="Bunga-bunga" border="1"/> Gambar bunga berada di tengah dan berbingkai 1

</p>

</body>

</html>

0 komentar:

Pertemuan ke III

PERTEMUAN III

Saya akan mengulang kembali pada pertemuan ke 3

Singkatan (Akronim)

<abbr title=“kepanjangannya”>singkatan</abbr>
<acronym title=“kepanjangannya”>singkatan</acronym>

Kalau mouse kita diletakkan di atasnya maka akan nampak kepanjangannya.

Contoh :

<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

Contoh:

<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
Menghubungkan html 1 dengan html yang lainnya, dengan cara <a href="(nama file html beserta .html)">

<html>
<head>
<title>Menyambungkan HTML</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:
Contoh:

<html>
<head>
<title>Contoh Penggunaan Link Absolut</title>
</head>
<body>
Ini alamat FB Sigit Budi <a href="http://www.facebook.com/cigetbudi2">KLIK SINI</a>.
</body>
</html>

3.6. Tag Marquee
Marque adalah tag untuk menggerakkan text atau gambar dengan cara tag <marquee>

Contoh:

...

<marquee> TEK INI AKAN BERGERAK </marquee>

0 komentar:

Pertemuan II

Berikut materi yang saya bisa deklarasikan dalam pertemuan 2 mata kuliah PPW

Tag yang ada pada html (masa pengenalan)

>Image {<img />}
>Ganti Baris {<br />}
>Horizontal Rule {<hr />}
>Input Field{<Input />}

Tag-Tag lain :

a. Tag link

Atribut	Fungsi
href	Menunjuk pada URL / dokumen lain
rel	Mendefinisikan relasi terhadap sebuah dokumendan dokumen lain yang berisi informasi tentang personil yang member kontribusi terhadap dokumen tersebut
rev	Mendefinisikan relasi sebuah dokumen HTML dengan dokumen lain
type	Menentukan tipe dan paramenter dari relasi

Contoh penggunaannya adalah sebagai berikut:

Atribut	Fungsi
http-equiv	Mendefinisikan properti dari elemen
name	Menyediakan deskripsi tambahan dari elemen
url	Mendefinisikan target dokumen dari sebuah properti
Content	Menyediakan nilai respon dari properti

<meta http-equiv="refresh" content="60" url="www.alamat.com" />

· Tag Body

Atribut	Fungsi
alink	Menunjukkan warna link aktif
background	Merujuk URL atau direktori dari gambar yang digunakan sebagai latar belakang
bgcolor	Menentukan warna latar belakang
bgproperties	Jika nilai atribut diisi “FIXED”, maka gambar latar belakang tidak ikut tergulung
leftmargin	Batas kiri dokumen
link	Menentukan warna link yang belum dikunjungi
text	Menentukan warna teks
topmargin	Menentukan batas atas
vlink	Menentukan warna link yang telah dikunjungi

Berikut Contohnya

<html>

<head>

<title>List</title>

</head>

<body>

<p>Daftar Buah-buahan</p>

<ol>

<li>Jeruk</li>

<li>Salak</li>

<li>Mangga</li>

<li>Anggur</li>

<li>Apel</li>

</ol>

<p>Daftar Hewan</p>

<ul>

<li>Harimau</li>

<li>Kuda</li>

<li>Antelop</li>

<li>Tikus</li>

<li>Semut</li>

</ul>

</body>

</html>

· Format karakter

>Logical Format

· <cite>, digunakan untuk menandai suatu kutipan (citation).

· <code>, digunakan untuk menampilkan kode-kode pemrograman, misalnya bahasa C.

· <em>, digunakan untuk menandai suatu teks yang ditekankan (cetak miring) oleh penulis.

· <kbd>, digunakan untuk menandai suatu teks yang harus dimasukkan oleh user melalui keyboard.

· <samp>, digunakan untuk menandai suatu teks yang dimaksudkan sebagai contoh.

· <strong>, digunakan untuk menandai bagian yang penting (cetak tebal) dari suatu teks.

· <var>, digunakan untuk menampilkan nama variabel.

· <dfn>, digunakan untuk menandai sebuah subdefinisidari daftar definisi.

> Physical Format

• <b>, untuk menampilkan huruf tebal.

• <i>, untuk menampilkan huruf miring.

• <u>, untuk menampilkan garis bawah pada teks.<tt>, untuk menampilkan huruf

seperti huruf mesin ketik.

• <strike>, untuk menampilkan garis horizontal pada bagian tengah huruf.

• <big>, untuk menampilkan ukuran huruf yang lebih besar.

• <small>, untuk menampilkan ukuran huruf yang lebih kecil.

• <sub>, untuk menampilkan subscript.

• <sup>, untuk menampilkan superscript.

> Menyisipkan Link dalam Teks

<html>

<head>

<title>Menyisipkan Link</title>

</head>

<body>

<a href="http://www.Facebook.com/cigetbudi2">Klik</a> untuk menuju alamat facebook Sigit Budi Darmawan

<br />

Kalau menggunakan gambar

<img src="(destinasi gambar beserta formatnya)" alt="(teks yang muncul apabila gambar tidak muncul)" align="(tata letak)" />

</a>

</body>

</html>

>Tabel

HTML menyediakan tag-tag untuk membuat sebuah tabel, yaitu:

• Tag <table> : Mendefinisikan sebuah tebel

• Tag <tr> : Mendefinisikan baris tabel

• Tag <th> : Mendefinisikan judul kolom

• Tag <td> : Mendefinisikan isi tiap kolom

<html>

<head>

<title>HTML Tabel</title>

</head>

<body>

<table border="1">

<tr>

<th>Kolom 1</th>

<th>Kolom 2</th>

<th>Kolom 3</th>

</tr>

<tr>

<td>Baris 1 kolom 1</td>

<td>Baris 1 kolom 2</td>

<td>Baris 1 kolom 3</td>

</tr>

<tr>

<td>Baris 2 kolom 1</td>

<td>Baris 2 kolom 2</td>

<td>Baris 2 kolom 3</td>

</tr>

</table>

</body>

</html>

MY SCRIBLE

Sabtu, 05 April 2014

Pertemuan V

PERTEMUAN 5

0 komentar:

Jumat, 04 April 2014

Pertemuan IV

PERTEMUAN IV

0 komentar:

Pertemuan ke III

PERTEMUAN III

0 komentar:

Pertemuan II

Berikut materi yang saya bisa deklarasikan dalam pertemuan 2 mata kuliah PPW

0 komentar:

Website XSIS MITRA UTAMA

Web Kampus Saya

Labels

Popular Posts

Mengenai Saya

Arsip Blog