Showing posts with label HTML5. Show all posts
Showing posts with label HTML5. Show all posts

Cara Mudah Membuat Layout Desain Web "HTML"

3:39:00 AM 0
Cara Mudah Membuat Layout Desain Web "HTML"-hay apa kabar sudah lama rasanya saya tidak berbagi artikel, karena kesibukan kuliah, nah kali in saya sempatkan untuk melakukan update artike saya,
Saya akan memberikan tutorial untuk membuat tampilan layout design halaman web sederhana,menggunkan HTML dan CSS, Karena desain ini sangat penting sebelum kita membuat sebuah website,,

walaupun sederhana semoga ini bermanfaat ya,,

Baca Juga Audio Da Video HTML5

ok sebelum membuatya,
sobat harus memiliki Aplikasi

  •  Notepad++ atau sejenisnya
  • WebBrowser


ok,pertama2 copy lah script di bawah Kedalam Notepad sobat,kemudian beri nama Index.html,
Simpan di folder,yang sudah sobat siapkan.kalo belom buat lagi juga gak papa kok?


Nah, untuk membentuk sebuah designya bisa copy css,di bawah ini sudah saya siapkan sobat" beri nama "style.css" simpan di folder yang sama dengan file index.html di atas,



Kemudian Buka file Index.hmtl nya di web browser,
Dan inilah Tampilan sederhana, Design layout halaman WEB yang telah Saya buat dari scrip di atas.



Sekian Tutorial Dari Saya semoga bermanfaat, Unuk Sobat Semua,, Thank You.
Baca Juga sourcode HTML Aritmatika

HTML5 Mudah Banget Cara menampilkan Gambar di halaman web

7:46:00 PM 2
Mudah Banget Cara menampilkan Gambar di halaman web-Pada kesempatan kali ini saya akan membagikan post tentang cara bagaimana kita menyisipkan atau memasukan gambar ke dalam skrip HTML agar nantinya bisa di tampilkan di halaman web, ok sobat intinya seperti itu. ok lasung saja,

Siapkan gambar yang akan di sisipkan ke halaman web simpan di folder yang anda sudah buat.
Kemudian siapkan notepad++ untuk membuat kodingnya.
dan web browser untuk menjalankan file HTML.

Ok sbat lasung saja berikut ini adalah kodingnya.

<html>
<head>
<title>Menampilkan gambar di halaman web</title>
</head>
<body>
<hr/>
<h1 align="center">Menampilkan Gambar Di halaman Web</h1>
<hr/>
<img src="icon.png">
<hr/>
</body>
</html>
Sedikit penjelasan, koding yang saya beri tag warna merah adalah tag,untuk memanggil file gambar untuk di tampilkan di web browser nantinya. icon.png ,adalah nama gambar yang akan di tampilkan di web browser.

Kemudian simpan di folder di mana anda menyimpan gambar ya,simpan dengan nama , contoh.html ,kemudian jalan kan /atau buka file tersebut dengan web browser.
jika di jalankan akan tampak seperti berikut.



Nah sampai sini semoga sobat semua mengerti,dan pastinya mengerti karena ini sangat mudah,

Kita juga bisa mengatur Gambar yang di tampilkan di web browser dengan sedemikian rupa ,contohnya saya akan meberi atribut untuk merubah size gambar tersebut caranya dengan menambah atribut height dan width.
lebih lengkapnya lihat koding berikut.

<html>
<head>
<title>Menampilkan gambar di halaman web</title>
</head>
<body>
<hr/>
<h1 align="center">Menampilkan Gambar Di halaman Web</h1>
<hr/>
<img src="icon.png"  height="420px" width="380px">
<hr/>
</body>
</html>
Makan akan Tampak Di halaman web seperti berikut.



Tampak halaman web ,bahwa gambar tersebut tampil di sisi kiri,untuk meletakan gambar di tengah ,kita bisa menggunakan tag <center></center> ,caranya lihat koding berikut.

<html>
<head>
<title>Menampilkan gambar di halaman web</title>
</head>
<body>
<hr/>
<h1 align="center">Menampilkan Gambar Di halaman Web</h1>
<hr/>
<center>
<img src="icon.png"  height="420px" width="380px">
</center>
<hr/>
</body>
</html>

Kemudian simpan file html kembali dan refresh web browser sobat,maka akan tampak gambar sudah terletak di tengah.


Nah,sekian sobat,post dari saya semoga post ini bermanfaaat. untuk sobat semua.

Cara Mudah Membuat Link Navigasi di HTML5

10:48:00 PM 0
Membuat Link Navigasi di HTML5-Sebuah halamn Web bisa menafigasi ke halaman web lain dengan cara memberikan Link.di HTML, untuk membuat link di gunakan tag <a href="url">Teks</a>. Link Dapat di bedaakan menjadi 2 di tinjau dari dari url-nya,yaitu ke URL web atau ke email.


  • untuk web, url=www.namasitu.com
  • untuk email,url=mailto:nama@tujuan.com
Ok lasung saja, berikut ini contoh kode yang bisa di gunakan untuk membuat link navigasi di halaman web :

Ups sebelum membuat koding nya siapkan alatnya dulu,
  • Notepad++
  • web browser
<html>
<head>
<title>Membuat Link Navigasi</title>
</head>
<body>
<hr/>
<h1>Contoh Pembuatan Link Navigasi Ke halaman Web</h1>
<a href="http://www.artikel-ciwer.tk">Llik Untuk Untuk Membuka Ciwer.id</a>
<hr/>
<hr/>
<h1>Contoh Pembuatan Link Navigasi Ke Email</h1>
<a href="mailto:nama_user@gmail.com">Klik Untuk Mengirim Email</a>
<hr/>
</body>
</html>

Kemudian simpan dengan nama index.html .kemudin buka di web browser file index html nya.
maka akan muncul gambar seperti berikut :


Ok sobat Sekian Cara Mudah Membuat Link Navigasi di HTML5, Semoga Artikel ini bermanfaat,apa lagi di buatnya di bulan Puasa,,yan berbagi akan mendapan berkah ramadhan..Aminn...

Membuat Pemutar Audio Video Dengan HTML5

8:01:00 PM 0
Membuat Pemutar Audio Video Dengan HTML5- Untuk Memainkan File Video di Web Browser Dengan Bantuan HTML5,ada pun sebagai berikut Kodingnya.

Sebelum menuju ke koding persiapkn alat yang di butuhkan.

  • Notepad++
  • web browser yang mendukung

<html>
<head>
</head>
<body>
<video  src="video1.MP4" controls="controls">Untuk Memutar Audio Klik Audio</video>
</body>
</html>

Simpan dengan dengan nama index.html ,video1.MP4,adalh video yang di simpan satu folder dengan file index.html ,Jika koding HTML tersebut di jalankan di web browser,maka Akan muncul Tampilan,Video,,Tapi Video Yang elum di putar atau di mainkan.




Untu memainkan video tersebut Anda bisa menekan tombol play,Maka anda sudah bisa melihat video yng di mainkan di web browser.,
Anda Juga bisa mengontrol memutar dan menjalankan video dengan kode otomatis,misal kode berikut ini yang akan memainkan video jika pointer mouse hover(ada di atas video),dan kemudian memp-pause video ketika pointer mouse belum di lepaskan dari atas video.
<html>
<head>
<title>Menjalankan Video dengan Pointer</title>
</head>
<body>
<h3>
Letakan Pointer Mouse Di atas Video unntuk memainkan</p>
Untuk Pause Hilangkan Pointer mouse pada Video</h3>
<video onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true" width="480" height="320"  src="video1.MP4" >Untuk Memutar Audio Klik Audio</video>
</body>
</html>

dengan kode di atas, juga ada koding untuk mengatur besar ukuran video yang akan di tampilkan ,dengan atribut, height dan width. jika fle tersebuut di jalankan  di web browser maka akan tampil.


untuk memainkan video letakan mouse pointer di atas,video maka video akan di mainkan secara otomatis,dan untuk mempausnya pindhakn mouse pointer dari atas video,maka video akan otomatis pause.


Kemudian untuk Pemutar Audionya, Bisa lihat koding berikut.

Membuat Pemutar  Audio WEB HTML5-Cara Membuat Pemutar  Audio WEB HTML5-Untuk Memainkan file audio dan video sama saja,hanya saja tag yang di gunakan berbeda untuk memutar audio tag yang digunkan adalah, <audio>,dan di tutup dengan </audio>,
untuk lebih jelasnya lihat koding berikut:

Sebelum Membuat Koding persiapkan lat yang di butuhkan

  • Notepad++
  • Dan Web Browser yang mendukung.

<html>
<head>
</head>
<body>
<audio controls src="audio1.mp3">Untuk Memutar Audio Klik Audio</audio>
</body>
</html>

Simpan dengan nama index.html,sedikit penjelasan,di atas ada file audio dengan nama audio1.mp3 dengan lokasi penyimpanan satu folder dengan file html yang sudah di buat seperti kode diatas, jika di jalan kan di web browser yang mendukung,maka akan muncul tampilan berikut di web browser.

jika di klik play,barulah file audio akan diputar atau di mainkan,anda juga bisa mengontrol pemutar audio tersebut dengan dengan klik kanan.

Anda juga dapat menambah sorces file audio atau  video lebih dari satu,nantinya browser akan melihat mana file yang lebih feasible untuk di akses.
<audio controls>
<source  src="audio1.mp3">
<source  src="audio2.mp3">
<source  src="audio3.mp3">
lakukan reload halaman web browser anda,untuk menampilkan audio yang baru di tambahkan
</audio>

 Anda juga dapat memutar audio secara automatic,artinya apabila file html yang berisi source audio di jalankan di web browser,maka audio tersebut akan otomatis terputar,tanpa kita mengklik play.agar file audio autamatik terputar kita hanya melakukan perubahan atribut koding di bagian tag <audio>,di mana kkita menambahkan kan atribut autoplay.
untuk lebih jelasnya lihat koding berikut.

<html>
<head>
</head>
<body>
<audio autoplay src="audio1.mp3">Untuk Memutar Audio Klik Audio</audio>
</body>
</html>
Dengan atribut autoplay ,media akan di mainkan begitu file html di jalankan di web browser.



Nah itu sedikit tutorial dari saya semoga bermanfaat,untuk sebagai referensi anda,,,jika berkenan silahkan di share ,terimakasih.


Audio Dan  Video di HTML5

Audio Dan Video di HTML5

9:20:00 PM 0

Sebuah file audio atau video sebenarnya adalah file kontainer,artinya ada file video dan audio di dalamnya.,mirip dengan arsio .zip .rar yang di dalamnya bisa ada beberapa file.

contohnya sebuah file video,akan mengandung track video ,track audio, dan metadata tambahan.Track audio, dan video ini di kombinasikan saat run time untuk memainkan video plus suaranya,adapun metadata menampilkan informasi seputar video, seperti convert art,title dan subtitle,captioning dan lain sebagainya. berikut beberapa ormat kontainer vidio yang populer antara lain:

  • Audio Video Interleave (.avi)
  • Flash Video (.flv)
  • MPEG 4 (.mp4)
  • Matroska (.mkv)
  • ogg (.ogv)
Codec Audio dan Video,adalah algoritma yang di gunakan untu encoding dan decoding video atau stream video tertentu sehingga bisa di putar.media raw sangat banyak sekali,sehingga tanpa encoding klip video dan audio akan memiliki ukuran yang sangat besar.

tanpa decoder,penerimaan file tidak akan  bisa menyusun kembali sumber media asli dari bentukk yang sudah ter-encoding.codec memungkinkan memahami berbagai format kontainer,dan kemudian mendecode track audio dan video yang di kandungnya.

berikut jenis-jenis codec audio:
  • AAC
  • MPEG-3
  • Ogg Vorbis
Adapun contoh codec Video sebagai berikut:
  • H.264
  • VP8
  • Ogg Theora
Tidak semua web browser memndukung codec di atas.

Baca juga Cara memutar audio dan video dengan HTML5 di web Browser.

Cara membuat penambahan dan pengurangan secara otomatis dengan JQuery |PHP dan HTML

2:11:00 AM 0

Cara membuat penambahan dan pengurangan secara otomatis dengan JQuery |PHP dan HTML-ciwer.id kesempatan kali ini saya akn share program sederhana untuk melakukan proses penmbhan dan pengurangan secara otomatis di PHP dan HTML menggunkan jquery.

lasung saja sobat.
berikut ini ini adalah script text javascript

<script language='JavaScript'>
$(document).ready(function(){
    var inpA = "input[rel=Ajumlah]";
    var inpB = "input[rel=Bjumlah]";  
    $(inpA).bind('keyup',function() {
        var avalA=0;
        var bVal = parseInt($('#Btotal').val(),10);
        $(inpA).each(function() {
            if(this.value !='') avalA += parseInt(this.value,10);
        });
        $('#Atotal').val(avalA);
        $('#selisih').val(avalA - bVal);
        console.log('Value avalA: ' + avalA);
    });  
    $(inpB).bind('keyup',function() {
        var avalB=0;
        var aVal = parseInt($('#Atotal').val(),10);
        $(inpB).each(function() {
            if(this.value !='') avalB += parseInt(this.value,10);
        });
        $('#Btotal').val(avalB);
        $('#selisih').val(aVal - avalB);
        console.log('Value avalB: ' + avalB);
    });
});
</script>
script di atas berfungsi untuk melakukan proses hitung penambahan dan pengurangan otomatis.
untuk script lengkpanya bisa lihat di bawah ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Koding Sederhana CIWER.ID</title>
<!-- Latest compiled and minified CSS --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script language='JavaScript'>
$(document).ready(function(){
    var inpA = "input[rel=Ajumlah]";
    var inpB = "input[rel=Bjumlah]";  
    $(inpA).bind('keyup',function() {
        var avalA=0;
        var bVal = parseInt($('#Btotal').val(),10);
        $(inpA).each(function() {
            if(this.value !='') avalA += parseInt(this.value,10);
        });
        $('#Atotal').val(avalA);
        $('#selisih').val(avalA - bVal);
        console.log('Value avalA: ' + avalA);
    });
      $(inpB).bind('keyup',function() {
        var avalB=0;
        var aVal = parseInt($('#Atotal').val(),10);
        $(inpB).each(function() {
            if(this.value !='') avalB += parseInt(this.value,10);
        });
        $('#Btotal').val(avalB);
        $('#selisih').val(aVal - avalB);
        console.log('Value avalB: ' + avalB);
    });
});
</script>
</head>
<body>
<div class="container">
<div class="jumbotron col-md-8">
<div class="panel panel-primary ">
<div class="panel-heading">
<h3 class="panel-title">
CIWER.ID |Penambahan Dan Pengurangan Otomatis Dengan Jquery</h3>
</div>
<div class="panel-body">
<div class="col-md-4">
<input type="text" class="form-control" name="Ajumlah1" placeholder="masukkan angka" rel="Ajumlah"/><br/>
<input type="text" class="form-control" name="Ajumlah2" placeholder="masukkan angka" rel="Ajumlah"/><br/>
<input type="text" class="form-control" name="Ajumlah3" placeholder="masukkan angka" rel="Ajumlah"/><br/>
<input type="text" class="form-control" name="Ajumlah4" placeholder="masukkan angka" rel="Ajumlah"/><br/>
<input type="text" class="form-control" name="Ajumlah5" placeholder="masukkan angka" rel="Ajumlah"/><br/>
<input type="text" class="form-control" name="Ajumlah6" placeholder="masukkan angka" rel="Ajumlah"/><br/>
Total A: <input type="text" class="form-control" name="Atotal" placeholder="Hasil Dari Penambahan" id="Atotal"/><br/><br/>
</div>
<!-- Dan seterusnya -->
<div class="col-md-4">
<input type="text" class="form-control" placeholder="masukkan angka" name="Bjumlah1" rel="Bjumlah"/><br/>
<input type="text" class="form-control" placeholder="masukkan angka" name="Bjumlah2" rel="Bjumlah"/><br/>
<input type="text" class="form-control" placeholder="masukkan angka" name="Bjumlah3" rel="Bjumlah"/><br/>
<input type="text" class="form-control" placeholder="masukkan angka" name="Bjumlah4" rel="Bjumlah"/><br/><br/>
<!-- Dan seterusnya -->
Total B: <input type="text" class="form-control" name="Btotal" placeholder="Hasil dari Penambahan" id="Btotal"/><br/><br/>
Selisih: <input type="text" class="form-control" name="selisih" placeholder="Hasil dari A-B" id="selisih"/><br/><br/><br/>
</div>
</div>
</body>
</html>

simpan dengan nama index.php atau sesuka anda.,sebelumnya anda menjalan kan program tersebut sobat harus mendownload jquery terlebih dahulu .
Download Jquery.
Setelah di download letakan jquery bersandingan dengan file index.php yang telah di buat.

ok sobat sekian,semoga ini bermanfaat.

Lihat juga ke sini

Source Code HTML Aritmatika.

9:54:00 AM 0
Source Code HTML Aritmatika Cara Membuat Pembagian PHP dan HTML Berikut ini merupakan koding sederhana,untuk melakun proses perhitungan pembagian di dalam web browser dengan menggunkan PHP dan HTML.yang sobat semua pasti bisa untuk membuatnya.

Persiapan :
Editor notepad++
Web browser Crome or firefox.
pastikan akses localhost sobat sudah aktif.

Pertama buat file index.php dan simpan di folder yang sobat tentukan,
kemudian copy contoh koding berikut yang kemungkinan sobat bisa kembangkan koding nya,



   <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <title>Koding Sederhana CIWER.ID</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    </head>
    <body>
    <div class="container">
    <div class="jumbotron col-md-4">
    <div class="panel panel-primary ">
    <div class="panel-heading">
    <h3 class="panel-title">
    CIWER.ID</h3>
    </div>
    <div class="panel-body">

    <!--Koding .PHP-->
    <?php
    //definisikan setiap variabel yang digunakan
        $nilai1 = "";
        $nilai2 = "";
        $nilai3 = "";
    if(isset($_POST['text1'])and
            ($_POST['text2'])
            ){
        $nilai1 = $_POST['text1'];    #mengambil nilai didalam
        $nilai2 = $_POST['text2'];    #formulir sesuai name yang ada
        $nilai3 = $nilai1/$nilai2;
    }
    ?>
    <!--end koding .PHP-->
    <form action="index.php" method="post">
        <input type="text" class="form-control" name="text1" value="<?php echo $nilai1?>" placeholder="masukkan angka"><br/>
        <input type="text" class="form-control" name="text2" value="<?php echo $nilai2?>" placeholder="masukkan angka"><br/>
        <input type="submit" class="btn btn-primary" value="Tambah">
     <br/><br/>
        <input type="text" class="form-control" value="<?php echo $nilai3?>"/>
    </form>
    </body>
    </html>


koding di atas,yang pertama kali dilakukan adalah menginisiali variabel yang dibutuhkan, setelah itu, mengambil nilai dari dalam formulir sesuai dengan name masing-masing.

Kemudian pata button form action. Terdapat aksi menuju ke dokumen index.php yang tak lain adalah dokumen untuk file program itu sendiri. Jadi eksekusi program dilaksanakan dengan tujuan formulir . HTML pada dokumen yang sama.

dan koding di atas sudah di lengkpi dengan ccs bootstrap ,yang berfungsi untuk mempercantik tampilan desain contoh program tersebut..


OK sobat sekian semoga artikel ini membantu..
Baca Juga artikel Yang cocok dengan pencarian sobat . Baca disini

Tag : Membuat Calculator PHP Cara membuat pengurangan penambahan PHP dan HTML Cara Membuat Perkalian PHP

Koding  untuk Perkalian di PHP dan HTML

Koding untuk Perkalian di PHP dan HTML

11:32:00 PM 0
Berikut ini merupakan koding sederhana,untuk melakun proses perhitungan perkalian di dalam web browser dengan menggunkan PHP dan HTML.yang sobat semua pasti bisa untuk membuatnya.

Persiapan :
Editor notepad++
Web browser Crome or firefox.
pastikan akses localhost sobat sudah aktif.

Pertama buat file index.php dan simpan di folder yang sobat tentukan,
kemudian copy contoh koding berikut yang kemungkinan sobat bisa kembangkan koding nya,


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Koding Sederhana CIWER.ID</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron col-md-4">
<div class="panel panel-primary ">
<div class="panel-heading">
<h3 class="panel-title">
CIWER.ID</h3>
</div>
<div class="panel-body">

<!--Koding .PHP-->
<?php
//definisikan setiap variabel yang digunakan
    $nilai1 = "";
    $nilai2 = "";
    $nilai3 = "";
if(isset($_POST['text1'])and
        ($_POST['text2'])
        ){
    $nilai1 = $_POST['text1'];    #mengambil nilai didalam
    $nilai2 = $_POST['text2'];    #formulir sesuai name yang ada
    $nilai3 = $nilai1*$nilai2;
}
?>
<!--end koding .PHP--> 
<form action="index.php" method="post">
    <input type="text" class="form-control" name="text1" value="<?php echo $nilai1?>" placeholder="masukkan angka"><br/>
    <input type="text" class="form-control" name="text2" value="<?php echo $nilai2?>" placeholder="masukkan angka"><br/>
    <input type="submit" class="btn btn-primary" value="Tambah">
 <br/><br/>
    <input type="text" class="form-control" value="<?php echo $nilai3?>"/>
</form>
</body>
</html>

koding di atas,yang pertama kali dilakukan adalah menginisiali variabel yang dibutuhkan, setelah itu, mengambil nilai dari dalam formulir sesuai dengan name masing-masing.

Kemudian pata button form action. Terdapat aksi menuju ke dokumen index.php yang tak lain adalah dokumen untuk file program itu sendiri. Jadi eksekusi program dilaksanakan dengan tujuan formulir . HTML pada dokumen yang sama.

dan koding di atas sudah di lengkpi dengan ccs bootstrap ,yang berfungsi untuk mempercantik tampilan desain contoh program tersebut..

OK sobat sekian semoga artikel ini membantu..
Baca Juga artikel Yang cocok dengan pencarian sobat . Baca disini

apa itu HTML5 ? MENGENAL HTML5

3:27:00 PM 0


        Hai sobat blogger apa kabar semua,,,pada sehatkan,ok sobat kali ini saya akan post tentang HTML5,untuk yang hobi design-design web pasti tidak asing lagi dengan HTML5, yah HTML5 memang sangat di kenal di seluruh dunia .tapi pasti masih ada banyak orang yang belom mengenal HTML5,ya termasuk saya sendiri ,,heheh

apa itu HTML5 ? MENGENAL HTML5

HTML (Hypertext Markup Language) Adalah sebuah bahasa untuk menampilkan konten di WEB.HTML sendiri adalah Bahasa pemrograman yang bebas yang artinya tidak di miliki oleh siapapun,pengembanganya di lakukan oleh banyak orang di banayk negara belahan dunia.bisa di sebut bahasa yang di kembangkan bersama-sama secara global.
Dokumen HTML  adalah sebuah dokumen teks yang dapat di edit oleh editor teks apapun,HTML di kelilingi oleh tag-teks yaang di awali dengan < dan berakhiran >.
Contoh dari tag yang di maksut adalah <img src="gambar.jpg"/>,tag ini berfungsi untuk menampilkan gambar yang bernama gambar.jpg ,natinya  gabar akan di tampilkan di web browser jika file Dokumen HTML di buka di web browser.
HTML dapat mencakup petunjuk untuk memformat dalam bahasa yang di sebut css (Cascading style sheets) dan program untuk interaksi dalam bahasa yang di sebut bahasa javascript.tidak perduli halaman web di buat dengan bahasa apapun seperti PHP ,JSP, ASPX Atau cold fusion,dan akhirnya yang ditampilkan oleh browser adalah tetap bahasa HTML murni.HTML awalnya di deain sebagai bahasa untuk pertukaran dokumen teknis.
Versi terbaru dari HTML, adalah HTML5,yang juga membahas mengenai css dan java sript,banyak orang di dunia menyambut kehadiran HTML 5,karena membawa fitur baru yakni canvas untuk membuat sebuah animasidukungan vidio dan audio,serta tag baru untuk mendefinisikan elemen-elemen dokument.

jadi sobat dengan HTML5 ini kita bisa membuat sebuah situs web,web yang canggih dan interaktif.
nah sobat, itu lah sekilas pembahasan tentang HTML dan HTML5, salam kenal yang lagi berkunjung ke blog saya,kritik dan saran sangat bermanfaat  buat saya,dan terimakasih buat sobat yang sudah mampir ke blog saya,, thank's
happy blogger,,

Apa Itu Design Web Responsif

1:19:00 PM 0
Gambar Design Web Responsif

oleh |Heri Priady
Hai sobat blogger semua apa kabar,semoga  pada sehat semua yang lagi mampir ke blog saya yag sederhana ini,dan kali Saya akan membuat post tentang Apa Itu Design Web Responsif.

 istilah Responsif berkaitan dengan bagaimana web browser merespon lingkungan sekitarnya,jadi design Web responsif, bagaimana sebuah design web dikembangkan,sehingga bisa menyesuaikan dengan lingkungan pengaksesnya,apakah web browser,piranti,atau ukuran layar yang di gunakan.
Jadi dengan Design web Responsif akan membuat layout website mudah di adaptasi menggunkan grid yang fleksible dan konten-konten yang fleksible pula.
      kemudian apa yang di maksud Design Web Responsif  yaitu bahawa semua display harus menerima konten yang sama,namu di bangun dengan sangat fleksible sehingga dapat mengoptimalkan tiap-tiap tampilan di berbagai Piranti.
ada banyak cara untuk membuat Design Web Responsif,salah satu caranya ialah kita menggunkan Template Bootstrap.

nah ok sobat,sekilas tentang Design Web Responsif semoga bermanfaat jika ada kritik dan saran monggo corat coret di kolom komentar.

Belajar HTML5 |Membuat Hello World menggunakan aplikasi NetBeans IDE

7:30:00 PM 0
Oleh |HERI PRIADY
Belajar HTML5 |Membuat Hello World menggunakan aplikasi NetBeans IDE-HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet.Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifat semantik pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>), sebagai contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia <audio> dan <video>.Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti <font> dan <center>, yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS).
Sekian  penjelasan sedikit Tentang HTML5,Kali ini Saya akan bebagi dan sama-sama belajar Tentang HTML5. Uuntuk Belajar HTML5 |Membuat Hello Word menggunakan aplikasi NetBeans IDE ,Lasung saja ke TKP.

Aplikasi yang di perlukan:
  1. NetBeans IDE .Yang Belom Punya Bisa Download Di sistus Resminya DOWNLOAD
  2.  Web Browser,Seperti Google Crome Dan Lain-lain.
L:angkah-langka |Belajar HTML5 |Membuat Hello Word menggunakan aplikasi NetBeans IDE :

Buka aplikasi  Netbeans IDE,sobat
Gambar Start Page NetBeans IDE
Selanjutnya Unutuk Belajar HTML5 |Membuat Hello Word menggunakan aplikasi NetBeans IDE.Sobat Bisa Membuat New Project Dengan menekan Ctrl+Shift+N.
Gambar New Project
Kemudian Pilih HTML/JavaScript.KLik Next.
Gambar Pemilihan pemberian nama Project dan Direktori penyimpana
Setelah,memberi nama project,dan menentukan di mana akan di simpan project.klik next,dan finish.

Gambar Page index.html project Belajar HTML5 |Membuat Hello Word menggunakan aplikasi NetBeans IDE.

Berikut Penampakan Koding.

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body>
        <div>
            <h1>Hello World</h1><p>
            <h2>Saya HERI PRIADY</h2>
            </p>
        </div>
    </body>
</html>

Koding di atas Akan Tampak Di web Browser sebagi berikut.

Hello World

Saya HERI PRIADY



Ok Sobat sekian Dari saya tentang Belajar HTML5 |Membuat Hello World menggunakan aplikasi NetBeans IDE, Semoga article ini bermanfaat, .
Happy Bloging..