Mengenal HTML5 : Fitur-fitur Baru dari HTML5

Mengenal HTML5 

Pengertian HTML5

Mengenal HTML5 - Apa itu HTML5, apa sih bedanya dengan HTML yang biasanya. mungkin banyak dari kita yang belum begitu mengerti tentang HTML5 ini, dari mulai tag-tag baru yang ada di dalamnya maupun keunggulan-keunggulan yang dimilikinya di banding dengan versi HTML sebelumnya. pada kesempatan kali ini, saya akan mencoba menjelaskan mengenai dasar-dasar dari HTML5 ini, dari mulai tag-tag nya dan fitur-fitur baru yang di tawarkan.

HTML5 Bukanlah sebuah bahasa pemrograman, melainkan merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web (WWW), sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga saat ini masih dalam pengembangan dan terus di sempurnakan.

HTML5 adalah versi terbaru dari Hypertext Markup Language, sebenarnya HTML merupakan satu dari 3 jenis kode yang harus di gunakan untuk membuat atau membangun struktur web yang bagus, kode: HTML, yang membangun struktur, Cascading Style Sheets (CSS), yang memberi sentuhan tampilan, dan JavaScript, yang membuat sesuatu terjadi. HTML5 didesain untuk memberikan hampir semua yang Anda ingin lakukan secara online tanpa memerlukan software tambahan seperti plugin browser. Baik applikasi , game, musik, responsive website dan movie bahkan Anda dapat membangun aplikasi yang sangat rumit bekerja dibrowser Anda dengan HTML 5. Fitur baru seperti video playback dan fungsi drag-and-drop yang sebelumnya tergantung pada pihak ketiga browser plug-in seperti Adobe Flash, Microsoft Silverlight, dan Google Gears.

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

HTML5 merupakan hasil proyek besar 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 yaitu HTML5. 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." Kabar tersebut nampaknya membawa angin segar pada para pengembang untuk segera merealisasikan HTML5 ini, tentunya tanpa Adobe Flash, para pengguna internet akan merasa lebih nyaman untuk berinternet ria tanpa memikirkan instalasi aplikasi sebelum enikmati konten-konten yang tersedia di internet.

Setelah melalui proses yang cukup panjang, seluruh browser utama (Chrome, Safari, Firefox, Opera, IE) sekarang bisa mendukung HTML5, sehingga teknologi HTML terbaru dapat digunakan dengan sebaik-baiknya. HTML5 sebenarnya sudah mulai dikenal oleh masyarakat pada tahun 2010 meskipun sudah dikenal sejak lama oleh para pengembang web namun masih sedikit orang yang memanfaatkan kelebihan-kelebihan fitur HTML5 tersebut. Dengan adanya pengembangan HTML5, adobe flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau konten apapun di web.

Apa yang Baru pada HTML5?

HTML5 memperkenalkan sejumlah elemen dan atribut baru yang membantu dalam membangun sebuah situs web modern. Berikut ini adalah fitur yang terpenting diperkenalkan pada HTML5 :

• New Semantic Elements: Ini seperti pada elemen <header>, <footer>, and <section>.
• Forms 2.0: Perbaikan form web HTML di mana atribut baru telah diperkenalkan tag <input>. 
• Persistent Local Storage: Untuk menghilangkan ketergantungan pada plugin pihak ketiga.
• WebSocket: Sebuah generasi teknologi terbaru komunikasi dua arah untuk aplikasi web.
• Server-Sent Events: memperkenalkan even yang mengalir dari web server ke web browser yang disebut Server-Sent Events (SSE).
• Canvas: Ini mendukung gambar dua dimensi surface yang dapat diprogram dengan JavaScript.
• Audio & Video: Anda dapat menanamkan/embed audio atau video pada halaman web Anda tanpa menggunakan plugin pihak ketiga.
• Geolocation: Pengunjung dapat memilih untuk berbagi lokasi fisik mereka dengan aplikasi web Anda..
• Microdata: Ini memungkinkan Anda membuat kosakata Anda sendiri di luar HTML5 dan memperluas halaman web Anda dengan kostum semantics.
• Drag and drop: Drag dan drop item dari satu lokasi ke lokasi lain pada halaman web yang sama.

Daftar Tag-tag baru di HTML5

Tag	Description
<article>	Mendefinisikan sebuah artikel
<aside>	Mendefinisikan konten selain dari konten halaman/post
<audio>	Mendefinisikan konten audio
<canvas>	Digunakan untuk menggambar grafik, on the fly, melalui scripting (JavaScript biasanya)
<command>	Mendefinisikan tombol perintah untuk dapat memanggil
<details>	Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
<datalist>	Menentukan daftar pilihan standar untuk kontrol input
<embed>	Mendefinisikan sebuah wadah untuk aplikasi eksternal (non-HTML)
<header>	Mendefinisikan sebuah dokumen atau bagian header
<figure>	Menentukan konten mandiri
<footer>	Mendefinisikan sebuah dokumen atau bagian footer
<hgroup>	Groups heading (<h1> to <h6>) elemen
<mark>	Mendefinisikan teks yang ditandai / disorot
<output>	Mendefinisikan hasil penghitungan
<source>	Mendefinisikan beberapa sumber media untuk elemen media (<video> dan <audio>)
<summary>	Mendefinisikan sebuah visible heading untuk elemen <details>
<time>	Mendefinisikan tanggal / waktu
<video>	Mendefinisikan sebuah video atau film
<section>	Mendefinisikan bagian dalam dokumen

Tag yang sudah tidak dipakai dalam HTML5

Tag	Description
<acronym>	Mendefinisikan sebuah akronim
<basefont>	Menentukan warna standar, ukuran, dan font untuk semua teks dalam dokumen
<big>	Mendefinisikan ukuran teks besar
<center>	Mendefinisikan posisi teks dicenter
<dir>	Mendefinisikan direktori list
<font>	Mendefinisikan font, warna, dan ukuran untuk teks
<frame>	Mendefinisikan sebuah window (frame) dalam sebuah frameset
<frameset>	Mendefinisikan satu set frame
<strike>	Mendefinisikan teks strikethrough
<noframes>	Mendefinisikan sebuah konten alternatif bagi pengguna bahwa konten tidak mendukung frame
<applet>	Mendefinisikan sebuah applet embed

Belajar Membuat Marquee atau Teks Berjalan di Blog

Belajar Membuat Marquee atau Teks Berjalan di Blog

Pada kesempatan kali ini, saya akan kembali memeberikan sedikit Tips seperti postingan saya yang sebelumnya, yaitu seputar HTML, tips kali ini yaitu tentang bagaimana cara membuat tulisan atau teks berjalan di blog
, atau biasa di sebut dengan marquee, tujuan dari pemberian marquee ini tidak lain dan tidak bukan adalah untuk mempercantik tampilan artikel yang kita posting, langsung saja di bawah ini adalah macam-macam tag kode marquee beserta contohnya, silahkan di lihat dan di langsung di praktikkan.

Teks Berjalan terus menerus

Code	Hasil
<marquee behavior="scroll" direction="left">Your scrolling text goes here</marquee>	STMIK AMIKOM Yogyakarta

Teks slide-in:

ini adalah Marquee jenis slide yang berjalan dari kanan ke kiri, jika sudah samapai di kiri maka akan berhenti, jika ingin melihat marquee jenis ini bergerak lagi, silahkan klik refresh

Code	Hasil
<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>	STMIK AMIKOM Yogyakarta

Teks memantul:

Code	Hasil
<marquee behavior="alternate">Your bouncing text goes here</marquee>	STMIK AMIKOM Yogyakarta

Teks bergeser keatas:

Code	Hasil
<marquee behavior="scroll" direction="up">Your upward scrolling text goes here</marquee>	STMIK AMIKOM Yogyakarta

Mengubah Kecepatan teks berjalan:

Code	Hasil
<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee><marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee><marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee>	Slow scroll speedMedium scroll speedFast scroll speed

Scrolling Images:

Silahkan ganti src="... dengan url gambar anda sendiri.

Code	Hasil
<marquee behavior="scroll" direction="left"><img src="url-gambar-anda.png" width="100" height="100" alt="Amikom" /></marquee>

Gambar dan teks (berjalan berasama):

Hanya menambahkan teks di bawah tag gambar (tapi harus tetap didalam tag marquee).

Code	Hasil
<marquee behavior="scroll" direction="left"><img src="url-gambar-anda.png" width="100" height="100" alt="Amikom" /><p>Contoh link <a href="https://www.amikom.ac.id">Amikom</a></p></marquee>	Contoh link Amikom

Sekian sedikit artikel tentang Belajar Membuat Marquee atau Teks Berjalan di Blog  yang bisa saya sampaikan, jika masih ada pertanyaan silahkan tulis di kolom komentar atau langsung hubungi admin, terima kasih :D

Belajar dasar-dasar HTML

Tutorial dasar belajar HTML 

Belajar dasar-dasar HTML - Sebelum belajar lebih jauh tentang HTML, akan lebih baik jika kita mengetahui definisi dari HTML terlebih dahulu, yang perlu di garis bawahi disini adalah, bahwa HTML(Hyper Text Markup Language) bukanlah sebuah bahasa pemrograman,
akan tetapi HTML adalah bahasa pengkodeaan untuk menghasilkan dokumen-dokumen hypertext untuk digunakan di World Wide Web yang berisi sekumpulan simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang dimaksudkan untuk menampilkan halaman pada web browser, Tag-tag tadi memberitahu browser bagaimana menampilkan halaman web dengan lengkap kepada pengguna. Tag-tag HTML pada umumnya selalu diawali dengan <tag> dan diakhiri dengan </tag>  yang dimaksud tag HTML adalah seperti b, i, u dan lain sebagainya.

Belajar dasar-dasar dari HTML merupakan proses pertama yang umumnya dilakukan oleh para web programer. Nah setelah selesai dengan belajar HTML, maka kalian akan memiliki kemampuan untuk membuat halaman web statis. Berikutnya kalian pasti pengen bisa membuat halaman web yang memiliki kemampuan untuk berinteraksi dengan para pengunjung secara lebih intensif. Waktu itulah kalian perlu mulai belajar PHP. Setelah belajar PHP maka kalian bisa melanjutkan dengan belajar MySQL untuk menambah kemampuan PHP kalian.

pada dasarnya HTML diperlukan terutama untuk membuat tampilan web, PHP untuk menambah kemampuan interaksi dengan pengunjung, lalu kemampuan menyimpan data akan disupport oleh MySQL. Lengkap sudah semuanya. Namun tentu saja web programming tidak hanya sebatas itu. Selain belajar HTML, PHP dan MySQL, tentu saja kalian dapat mempelajari juga bahasa script lain yang akan lebih memperindah tampilan web kalian dan mempermudah proses desain web kalian seperti CSS dan Javascript. Kalian mungkin juga harus menambah ketrampilan dalam membuat desain web dengan berbagai aplikasi pembuat web seperti Adobe Dreamweaver dan FrontPage serta belajar aplikasi pengolah gambar seperti Adobe Photoshop, Illustrator dan lain sebagainya.

tapi pada kesempatan kali ini, saya tidak akan membahas tentang apa itu PHP, MySQL, CSS maupun JavaScript. saya akan membahas tentang dasar-dasar HTML terlebih dahulu, jika kita telah menguasai HTML maka kita bisa mulai mempelajari PHP dan MySQL serta CSS dan JavaScript seiring dengan berjalannya waktu.

Struktur Dasar HTML

1. <html>
2.  <head> <title>Judul Dokumen web</title> </head>
3. <body>
4. isi dokumen web
5. </body>
6. </html>

Menggunakan Tag Pada HTML

Contoh Tag pada HTML

Contoh	Hasil
<b>Ini tulisan tebal</b>	Ini tulisan tebal
<i>Ini tulisan miring</i>	Ini tulisan miring
<u>Ini tulisan bergaris bawah</u>	Ini tulisan bergaris bawah
Ini baris 1<br>Ini baris 2	Ini baris 1 Ini baris 2
Ini garis horizontal <hr>	Ini garis horizontal

Ada beberapa tag yang memilki atribut didalamnya, seperti tag <font>, <table>, <input> dan
sebagainya. Pada tag font ia memiliki beberapa atribut diantaranya atribut: color, size, face.
Untuk lebih memahami atribut lihatlah contoh berikut ini.
<font color=”red” face=”Arial” size=”12”>Ini Font Arial berwarna merah dan berukuran 12 pt</font>
1. Atribut color digunakan untuk menentukan warna tulisan.
2. Atribut face digunakan untuk menentukan jenis huruf.
3. Atribut size digunakan untuk menentukan ukuran huruf.

Contoh Tag pada HTML

Tag Utama

Tag	Atribut	Deskripsi
<html> </html>		Baris paling atas dari setiap file HTML
<head> </head>		Informasi Umum dari sebuah halaman Web
<body> </body>	§  Background §  Bgcolor §  Bgsound §  Font §  Link §  Alink §  Vlink §  Topmargin §  Leftmargin §  Marginheight §  marginwidth	Setingan atribut untuk seluruh dokumen

Modifikasi Teks

Tag	Deskripsi	Contoh
<b> </b>	Teks tebal	Teks tebal
<i> </i>	Teks Miring	Teks Miring
<u> </u>	Teks Bergaris Bawah	Teks Bergaris Bawah
<h1> </h1>	Header 1	Header 1
<h2> </h2>	Header 2	Header 2
<h3> </h3>	Header 3	Header 3
<h4> </h4>	Header 4	Header 4
<h5> </h5>	Header 5	Header 5
<h6> </h6>	Header 6	Header 6
<h7> </h7>	Menjadi teks standard, karena maksimal sampai H6 saja	Header 7
<sub> </sub>	Subscript	Subscript
<sup> </sup>	Superscript	Superscript

Font

Tag	Atribut	Deskripsi
<font> </font>	§  color §  size §  name	Mengubah gaya suatu huruf

Link

Tag	Atribut	Deskripsi
<a> </a>	§  href §  target §  style §  class §  name §  id	Membuat link kes dokumen atau situs lain

Gambar

Tag	Atribut	Deskripsi
<img> </img>	§  src §  alt §  name §  border §  height §  width	Menampilakan gambar

Formatting

Tag	Contoh	Deskripsi
<blockquote> </ blockquote >		Digunakan untuk mengatur teks dan gambar dalam suatu tag
<ol> </ol>	1.       item 1	Orderer List (digunakan dengan <li>)
<ul> </ul>	•         item 1	Unorderer List (digunakan dengan <li>)
<li> </li>		Element list
<dl> </dl>		Definition list(digunakan bersama <dd> dan <dt>)
<dd> </dd>		Definition description
<dt> </dt>		Definition term
<p> </p>		Paragraph
<br>		Ganti baris
<hr>		Garis horizontal
<center> </center>		Menengahkan elemen

Table

Tag	Atribut	Deskripsi
<table> </table>	§  border §  cellpadding §  cellspacing §  width §  height §  name §  id §  title §  bgcolor §  background §  alingn §  valign	Mengatur semua element table
<tr> </tr>	§  height §  bgcolor §  background §  align §  valign §  title	Membuat baris baru
<td> </td>	§  height §  width §  bgcolor §  background §  align §  valign §  title §  colspan §  rowspan	Membuat kolom
<th> </th>	§  height §  width §  bgcolor §  background §  align §  valign §  title §  colspan §  rowspan	Header table, otomatis rata tengah dan tebal
<tbody> </tbody>	§  height §  width §  align §  valign §  bgcolor §  background §	Format yang berlaku bagi cell yang diapit tag
<colgroup> </colgroup>	§  height §  width §  align §  valign §  bgcolor §  background §  colspan	Format yang berlaku bagi kolom

Silahkan digunakan Sebaik-baik nya, silahkan copas artikel di blog ini, tapi harus mencantumkan live link sumber dari http://verdiandzilqurnaini.blogspot.com 

gunakan kode 

<a href="http://verdiandzilqurnaini.blogspot.com">http://verdiandzilqurnaini.blogspot.com</a>

Cukup Sekian sedikit Tips tentang dasar-dasar HTML yang bisa saya berikan, jika ada kesalahan admin mohon maaf yang sebesar besarnya, TERIMA KASIH.