Kamis, 10 Maret 2016

Menambahkan Audio pada HTML


1.) Format tampilan file audio
Kebanyakan file audio diputar melalui sebuah plug-in, misalnya seperti flash. Namun, browser yang berbeda mungkin memiliki berbagai plug-in. HTML5 mendefinisikan elemen baru yang menentukan cara standar untuk menanamkan file audio pada halaman web: elemen <audio> </audio>.
·         Untuk memasukkan suara pada html bisa menggunakan tag <audio>.
·         Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP.
·         Tidak semua tipe file audio tersebut didukung oleh browser.
·         File-file Audio yang didukung HTML5 adalah
1.       OGG merupakan format audio yang didukung oleh Mozilla firefox, opera, dan google chrome.
2.       MP3 merupakan format audio yang didukung oleh Google Chrome dan safari.
3.       WAV merupakan format audio yang didukung oleh Mozilla Firefox dan Opera.


Contoh format :






Diposting oleh di Tidak ada komentar:

Kamis, 03 Maret 2016

Menggabung Gambar Dalam Teks


Selamat datang kembali,sebelumnya saya ucapkan Assalammualaikum.wr.wb
kembali lagi dengan saya,saya akan memberikan sebuah "Menggabung Gambar Dalam Teks"

1. Menggabung gambar dalam teks secara Vertical

                                                          ...==Coding==...

<html>
<head>
    <title>Tugas1</title>
</head>
<body>
    <h1>Menggabung Gambar dan teks,posisi terhadap teks secara virtual</h1>
    <p><img src="gantengmaksimal.jpg" width="350px" height="250px" align="top">Gambar pertama(menggunakan align=Top)</img>
    <p><img src="gantengmaksimal.jpg" width="350px" height="250px" align="middle">Gambar kedua(menggunakan align=Middle)</img>
    <p><img src="gantengmaksimal.jpg" width="350px" height="250px" align="bottom">Gambar ketiga(menggunakan align=Bottom)</img>
</body>
</html>
                                                       ...==Hasil Gambar==...
                                     
     




2. Menggabung gambar dalam teks secara Horizontal


                                                           ...==Coding==...
<html>
<head>
     <title>tugas2</title>
     <h2><b>Menggabung gambar dan teks, posisi terhadap teks secara horizontal</h2>
</head>
<body>
    <img src="dyusrezaaa.JPG" width="350px" height="250px" align="top" align> INI SAYA</p>
    <img src="dyusrezaaa.JPG" width="350px" height="250px" align="right" align="bottom" align="right"> KAMU MANA?</p>
</body>
</html>                                               
                                                         ...==Hasil Gambar==...






3. Memberi keterangan pada Gambar


                                                         ...==Coding==...

<html>
    <head>
        <title>Tugas3</title>
            <h2><b> Menyajikan format dengan keterangan</h2>
    </head>
        <body>
            <img src="IMG_5204.JPG" title="X TKJ B" width="470" height="310" title=""/>
        </body>
</html>
                                                    ...==Hasil Gambar==...
 

Diposting oleh di Tidak ada komentar:

Kamis, 11 Februari 2016

Halaman layout kerangka (Tugas web ke-2)

okee,Assalammualaikum wr.wb

 Selamat datang kembali di blog kesayangan saya, kali ini saya akan menjelaskan materi yang sama tetapi ada sedikit berbeda dari sebelumnya,tidak usah basabasi mari di pelajari........
Kegiatan 7

Coding :

<html>
<Head>
    <title>INI WEB SAYA</title>
</Head>

 <body>
        <table bgcolor="#F0F0F0" border="1" width="720px" height="360px">
            <tr><td bgcolor="#cyan" rowspan="3" align="bottom" width="120px">
            <ul type="disc">
            <li>Home<br></li>
            <li>Profil<br></li>
            <li>About us<br></li>
            <li>Blog<br></li>
            <li>Contact us</td></li>
            <td align=center>Electronic Shop</td></tr>
            <tr><td bgcolor="#cyan" align=center>ini meruapak bagian dari semua blog salah sehingga tidak menghasilkan Balance sehingga blog ini tidak aktif<p >
                    syaa tidak aakan membuat web jika isi nya seperti ini    </td></tr>
            <tr><td align=center>DHARMA YUSREZA 007</td></tr>
        </table>
</body>
</html>

                                                               Hasilnya :

                        



Kegiatan 8

 Coding :

<html>
<head>
    <title>INI WEB SAYA</title>
</head>
<body>
    <table border=1 width=720px height=400px>
    <tr><td bgcolor=#80FFFE rowspan=2 align=center>Daftar isi</td>
    <td bgcolor=pink align=center><h3>Banner/Judul</h3></td>
    <td bgcolor=#80FFFE rowspan=2 align=center>Daftar isi</td></tr>
    <tr><td bgcolor=#009999 align=center>
    <p>Body atau contents(isi)</p>
        <p><font color="#B20000">Body atau contents(isi)</font></p>
        <p><font color="#0066B3">Body atau contents(isi)</font></p>
        <p><font color="#FF6600">Body atau contents(isi)</font></p>
        <p><font color="#E6FE80">Body atau contents(isi)</font></p>
    </td></tr>
    <tr><td bgcolor=pink colspan=3 align=center>Lain-lain</td></tr>
    </table>
</body>
</html>

                                                             Hasilnya :

                        



Kegiatan 9

 Coding :

<html>
<head>
    <title>INI WEB SAYA</title>
</head>
<body>
<table border=1>
    <tr><td bgcolor="B28F00" align=center width=250px height=170px>Teks daftar isi</td>
        <td bgcolor="0066B3" align=center width=250px height=170px>Gambar</td></tr>
            <tr><td bgcolor="0066B3" align=center width=250px height=170px>Gambar</td>
        <td bgcolor="B28F00" align=center width=250px height=170px>Teks daftar isi</td></tr>
    <tr><td bgcolor="B2B300" colspan=2 align=center width=170px height=100px>Lain-lain</td></tr>
</table>
</body>
</html>

                                     Hasilnya :




Sekian dari saya mohon maaf kalo ada kekurangan atau kesalahan,Wassalammualaikum wr.wb







Diposting oleh di Tidak ada komentar:

Kamis, 28 Januari 2016

TUGAS PEMOGRAMAN WEB

LAYOUT HALAMAN WEB TUGAS 6

Nah,yang ini hampir sama saja tapi ada sedikit beda..

Codingnya :

 <!DOCTYPE html>
<head>
<title>Top index</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="542" border="1" align="center">
<tr>
<td height="23" align="center" bordercolor="#FFFFFF" bgcolor="#FFFF00"><strong><font size="+5">Banner / Judul</font></strong></td>
</tr>
<tr>
<td height="457" align="center" bgcolor="#C0C0C0">
<p>Body atau contents(isi)</p>
<p><font color="#006600">Body atau contents(isi)</font></p>
<p><font color="#CC0000">Body atau contents(isi)</font></p>
<p><font color="#FFFF00">Body atau contents(isi)</font></p>
<p><font color="#800080">Body atau contents(isi)</font></p></td>
</tr>
<tr>
<td height="23" align="center" bgcolor="#CCFF99"><font color="#FF0000"><font size="+1"><b>Daftar isi atau navigasi</b></font></td>
</tr>
</table>
</form>
</body>
</html>

                                                  Hasil dari coding :
         









LAYOUT HALAMAN WEB TUGAS 5

 HOLLA,Saya kembali lagi untuk menulis sebuah halaman web blog saya,tapi kali ini saya akan menjelaskan sebuah coding yang di beri tugas oleh guru pembimbing saya,Mari di simak....

Codingnya :

<!DOCTYPE html>
<head>
<title>Top index</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="800" height="542" border="1" align="center">
<tr>
<td height="23" align="center" bordercolor="#FFFFFF" bgcolor="#FFFF00"><strong><font size="+5">Banner
atau iklan</font></strong></td>
</tr>
<tr>
<td height="27" align="center" bgcolor="#FFCCCC"><font color="#FF0000">Daftar
isi atau navigasi </font></td>
</tr>
<tr>
<td height="457" align="center" bgcolor="#FF66CC">
<p>Body atau contents(isi)</p>
<p><font color="#006600">Body atau contents(isi)</font></p>
<p><font color="#CC0000">Body atau contents(isi)</font></p>
<p><font color="#FFFF00">Body atau contents(isi)</font></p>
<p><font color="#FF6633">Body atau contents(isi)</font></p></td>
</tr>
<tr>
<td height="23" align="center" bgcolor="#CCFF99"><font color="#9966CC">Info
tambahan atau lain-lain </font></td>
</tr>
</table>
</form>
</body>
</html>
                                                Hasil dari coding :
Diposting oleh di Tidak ada komentar:

Rabu, 27 Januari 2016

TABEL IN TABLE

    
ASSALAMMUALAIKUM WR.WB

Selamat datang kembali di blog saya,disini saya akan menjelaskan tentang tabel lagi tapi yang ini berbeda daripada sebelumnya dan ini bisa di gunakan dalam Notepad atau Notepad++,tidak usah basa basi lagi mari dilihat....

<head>
    <title>Table In Table</title>
</head>

<body>
    <table cellpadding="5" align="center" bgcolor="red" width="800px" cellspacing="5">
        <tr><td><b><center>Banjarmasin</center>
            <table width="100%" cellspacing="5" cellpadding="5"><tr><td  valign="top" bgcolor="white" height="50px"><b><center>KALIMANTAN SELATAN</center></td></tr></table>
            <table width="100%"  cellspacing="5" cellpadding="5"><tr><td  valign="top" bgcolor="white" height="80px"><b><center>SOUTH BORNEO</center></td></tr></table>
            <table width="100%" cellspacing="5" cellpadding="5"><tr><td  valign="top" bgcolor="white" height="100px"><b><center>INDONESIA</center></td></tr></table>
            <table width="100%" cellspacing="5" cellpadding="5"><tr><td  valign="top" bgcolor="white" height="250px"><b>BANJARMASIN
                <table width="100%" cellspacing="5" cellpadding="5">
                    <tr>
                    <td valign="top" bgcolor="#00BCD4" width="150px" height="250px"><center>BANJARMASIN</center></td>
                    <td valign="top" bgcolor="#00BCD4"><center>BANJARMASIN</center>
                        <table cellpadding="7" cellspacing="5" bgcolor="#yellow" width="100%">
                            <tr><td><b>KABUPATEN</td></tr>
                            <tr><td bgcolor="white" valign="top" height="50px">MARTAPURA</td></tr>
                            <tr><td bgcolor="white" valign="top">BINUANG</td></tr>
                            <tr><td bgcolor="white" valign="top" height="50px">RANTAU</td></tr>
                            <tr><td bgcolor="white" valign="top">HULU SUNGAI TIMUR</td></tr>
                            <tr><td bgcolor="white" valign="top" height="40px">HULU SUNGAI SELATAN</td></tr>
                            <tr><td bgcolor="white" valign="top">HULU SUNGAI UTARA</td></tr>
                            <tr><td bgcolor="white" valign="top" height="120px">BALANGAN</td></tr>
                        </table>
                    </td>
                    <td valign="top" bgcolor="#00BCD4" width="150px"><center>BANJARMASIN</center></td>
                    </tr>
                </table>
            </td></tr></table>
            <table width="100%" cellspacing="5" cellpadding="5"><tr><td  valign="top" bgcolor="00BCD4" height="30px"><b><colspan>DHARMA YUSREZA</colspan></td></tr></table>      
        </td></tr>
    </table>
</body>
</html>







                                            Gambar html dalam Notepad++,


         


                                              Gambar hasil dari Coding,






 Terima kasih sudah mampir di blog saya,sekian dari saya WASSALAMMUALAIKUM WR.WB
Diposting oleh di Tidak ada komentar:

Sabtu, 09 Januari 2016

Tutorial Cara Pembuatan Tabel Bersarang

Pertama saya ucapkan selamat datang di blog saya,mungkin kalian sudah tau apa itu tabel bersarang?nah di sini saya akan menjelaskan sedikit tentang "Apa itu tabel bersarang",ya langsung saja tabel bersarang adalah tabel dalam website yang banyak digunakan untuk menyajikan informasi yang terdiri dari baris dan kolom agar tampak lebih rapi dan mudah dipahami yang melalui Notepad ataupun Notepad++.


Berikut adalah contoh kode membuat table sederhana dalam html :

<html>
<head>
</head>
<body>
    <table border="1" cellpadding="5">
    <caption>Online Order</caption>
    <tr>
        <th>Description</th>
        <th>Qty</th>
        <th>Price</th>
        <th>Email Account Note</th>
    </tr>
   
   
    <tr>
        <td>Email Account</td>
        <td>10</td>
        <td>$9.90</td>
        <td rowspan="5">
            <table border="1">
                <tr><td>Mailbox</td><td>10GB</td></tr>
                <tr><td>Webmail</td><td>Yes</td></tr>
                <tr><td>POP3</td><td>Yes</td></tr>
                <tr><td>IMAP</td><td>Yes</td></tr>
                <tr><td>Anti-spam</td><td>Yes</td></tr>
            </table>
        </td>
    </tr>
   
    <tr>
        <td>FYIcenter.com ad</td>
        <td align="right">1</td>
        <td align="right">$99.00</td>
    </tr>
   
    <tr>
        <td>1-years Acces</td>
        <td align="right">1</td>
        <td align="right">$199.00</td>
    </tr>
   
    <tr>
        <td colspan="2">Shipping</td>
        <td>$3.99</td>
    </tr>
   
    <tr>
        <td colspan="2">Tax</td>
        <td>$15.99</td>
    </tr>
    </table>
</body>
</html>

Contoh gambar dalam pembuatan code di dalam Notepad++ :

      Gambar 1.
    





     Gambar 2.                                                                        




      Gambar Hasil dari coding di atas.                                                                                  

Diposting oleh di Tidak ada komentar:

Rabu, 23 Desember 2015

Belajar HTML (2)

List
 
<html>
<body>

<h2>Unordered List with Default Bullets</h2>

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul> 

</body>
</html>

 Hasil

 Tabel

<html>
<body>

<table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>       
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>       
    <td>94</td>
  </tr>
  <tr>
    <td>John</td>
    <td>Doe</td>       
    <td>80</td>
  </tr>
</table>

Hasil
Diposting oleh di Tidak ada komentar:
Langganan: Postingan (Atom)