Selasa, 03 Juni 2014

UNTUK MEMASUKKAN GAMBAR, AUDIO & VIDEO DALAM KODE HTML

CONTOH CSS

Cara memasukkan gambar,video,audio kedalam HTML

1. Memasukkan gambar



Untuk memasukkan gambar kedalam HTML, kita menggunakan tag < img >. Atribut-atribut yang bisa kita gunakan adalah :
  • src untuk bmenunjukkan lokasi file gambar
  • align untuk menentukan posisi gambar
  • height untuk menentukan tinggi gambar dalam pixel ketika di tampilkan di browser
  • width untukmenentukan lebar gambar dalam pixel ketika di tampilkan di browser, apa bila tidak disebutkan atribut height dan width, maka ukuran gambar akan di tampilkan ke dalama browser dengan ukuran asli file nya
  • hspace untuk menentukan jarak antara gambar dengan text secara horizontal
  • vspace untuk menentukan jarak antara gambar dengan text secara vertikal
  • border untuk menentukan batas batas pada gambar

Contoh :

hasilnya akan jadi:

2. Memasukkan Audio

 Untuk memasukkan audio kedalam HTML, kita menggunakan tag < embed >. Atribut-atribut yang bisa kita gunakan adalah :
  • src digunakan untuk menentukan lokasi file music
  • align digunakan untuk menentukan posisi.
  • border digunakan untuk menentukan batas-batas.
  • height digunakan untuk menentukan tinggi dari object yang dimasukkan.
  • width digunakan untuk menentukan lebar dari object yang dimasukkan.
  • hspace digunakan untuk menentukan jarak horizontal antara object dengan text.
  • vspace digunakan untuk menentukan jarak vertikal antara object dengan text.

Contoh :

Apa bila ingin menjadikannya bgsound (Suara latar belakang) dalam halaman web kita maka di kunakan tag < bgsound >
Contoh :


3. Memasukkan Video



Dan untuk memasukkan video ke dalam dokumen HTML, juga digunakan tag yang sama yaitu tag < embed > Penulisan kode HTML-nya juga menyerupai penulisan kode HTML untuk memasukkan file audio. Hanya saja bedanya di format file nya saja, misalnya kalau
format audio: .mp3
format video: .mp4, .flv, .avi dll
Contoh :
Diposting oleh di 34 komentar:

CARA MEMBUAT TABEL DENGAN KODE HTML

Membuat Tabel Dengan Kode HTML

Membuat table dengan Kode HTML

Dalam membuat tabel, kita membutuhkan perintah

  • < table >
  • < width > untuk lebar table
  • < height > untuk tinggil table
  • < colspan > untuk menyatukan kolom
  • < rowspan > untuk menyatukan baris

    Ok Langsung aja :D

    Tabel dengan 1 colom :

    Hasil

    teks 1teks 2

    Tabel dengan3 kolom:

    Hasil

    teks 1teks 2teks 3

    Menggabungkan kolom

    Hasil

    teks 1teks 2&3

    Menggabungkan Baris

    Hasil

    baris 1 baris 1,2,3
    baris 2
    baris 3


    Saya rasa hari ini cukup sampai disini dulu, Semoga brmanfaat buat agan2 !!!



    Lihat Profil Saya

    • Diposting oleh di Tidak ada komentar:
    Label: , , ,

    Share arif.jpg - 58 KB

    Share arif.jpg - 58 KB
    Diposting oleh di Tidak ada komentar:
    Label: , , ,

    Senin, 02 Juni 2014

    Berikut adalah sebagian dari kode-kode dasar HTML yang sangat sering digunakan. Untuk penulisan kode tersebut, harap memperhatikan deklarasi jenis dokumen (DTD) yang di gunakan. Adakalanya, beberapa jenis tag HTML tidak didukung oleh suatu jenis dokumen. Selain itu, sangat penting memperhatikan penulisan tag HTML, utamanya tag akhir (Tag penutup) dalam dokumen XHTML
    Contoh sederhana penulisan tag HTML yang berbeda adalah penulisan baris baru. Dalam HTML 4.01, penulisan baris baru adalah <br> sedangkan dalam xhtml, penulisannya adalah <br />. Hal ini juga berlaku pada penulisan tag garis dan gambar.
    Kode dasar HTML
    Penulisan teks untuk HEADING menggunakan kode:
    <h1> Teks </h1>. Heading pada halaman terdiri dari kode <h1> sampai <h6>
    Penulisan teks tebal dan besar (Penguatan huruf atau teks) menggunakan kode:
    <strong>Teks disini</strong>
    Penulisan teks tebal menggunakan kode:
    <b>Teks disini</b>
    Penulisan teks besar menggunakan kode:
    <big> Teks </big>
    Penulisan teks kecil menggunakan kode:
    <small> Teks </small>
    Penulisan
    teks bercoretmenggunakan kode yang didefenisikan dengan tag <s> atau tag alternatif lainnya yaitu <del>
    <s> Teks bercoret </s>
    <del> Teks bercoret </del>
    Penulisan teks miring atau gaya italic menggunakan kode:
    <i> Teks italic </i>
    Teks huruf berwarna. Kodenya:
    <font color="kode_warna"> teks disini </font>
    Kode warna ditulis menggunakan nama warna dalam bahasa inggris (RGB) atau dalam bentuk HEX yang diawali symbol pagar #
    Membuat Paragraf dalam HTML dituliskan dengan kode:
    <p> teks anda disini </p>
    Menyelaraskan teks paragraf.
    Untuk teks rata kanan gunakan
    <p align="left"> teks anda disini </p>
    teks rata tengah
    <p align="center"> teks anda disini </p> dan teks rata kiri
    <p align="right"> teks anda disini </p>
    Membuat kode referensi atau link pada halaman. Kodenya:
    <a href="url">Link Teks</a>
    Penulisan nama link yang berwarna seperti home adalah:
    <a href="URL"><font color="red"><b>Link</b></font></a>
    Membuat garis. Untuk garis sederhana gunakan kode <hr />. Untuk lebar dan tebal garis, anda tinggal menyesuaikan misalnya:
    <hr width="50%" />
    <hr width="80%" />
    <hr width="100%" />
    Garis dengan ukuran dan warna
    <hr style="color: yellow; size: 5; width: 75%;" />.
    Anda juga dapat membuat tampilan garis yang unik menggunakan CSS Style.

    Huruf atau teks dengan ukuran kodenya:
    <font size="22px">Teks</font>.
    Anda bisa menggunakan unit EMS (em), PIXELS (px), PERSEN (%), dan POINT (pt) dalam menentukan ukuran huruf.
    Membuat Link dengan gambar seperti dibawah
    judul alternatif kodenya adalah:
    <a href="URL">
    <img src="URL_GAMBAR" alt="Judul_Alternatif" />
    </a>
    Mengubah ukuran gambar menjadi tampilan penuh
    Kodenya adalah <img src="url_gambar" width="100%" height="100%" alt="Judul alternafif" />
    Memperkecil ukuran gambar dari ukuran yang sebenarnya seperti ini:
    *
    Kodenya adalah <img src="url_gambar" width="lebar_gambar" height="tinggi_gambar" alt="Judul alternafif" />
    Anda tinggal menyesuaikan ukuran lebar dan tinggi gambar dengan menggunakan unit px atau %
    Membuat Ikon halaman seperti yang terdapat disudut kanan atas halaman ini atau lebih dikenal dengan nama Favicon ICO dengan kode:
    <link rel="shortcut icon" type="images/x-icon" href="url_gambar" />.
    Ukuran file gambar sebaiknya 16x16 Pixels dalam format ICO atau PNG
    Membuat tombol Button yang dapat diklik seperti

    Kodenya:
    <input type="button" value="HOME" />
    Radio Button
    : On/Off
    Kodenya:
    <input type="radio" name="ok" value="" />
    Body halaman dengan latarbelakang gambar kodenya:
    <body style="background-image: url_gambar">
    Body halaman dengan latarbelakang warna kodenya:
    <body style="background-color: kode_warna">
    Body tags didefenisikan dengan:
    <body alink="red" valink="maroon" link="yellow" text="white" bgcolor="black">
    Body tags menyangkut body dokumen, seperti hyperlink, gambar, teks, list, background dan sebagainya.
    Daftar Tanpa Nomor atau list-style di defenisikan dengan tag <ul> sedangkan item didefenisikan dengan <li>. Untuk type item list dapat disesuaikan menggunakan list-type: disc, circle atau square.
    • Item list default menggunakan type DISC
    • Teks
    • Teks
    • Teks
    Penulisan kode tersebut adalah:
    <ul>
    <li>Teks</li>
    <li>Teks</li>
    <li>Teks</li>
    </ul>
    Daftar list dengan penomoran otomatis di defenisikan dengan tag <ol>. Contohnya:
    1. Teks
    2. Teks
    3. Teks
    Penulisan kode tersebut adalah:
    <ol>
    <li>Teks</li>
    <li>Teks</li>
    <li>Teks</li>
    </ol>
    Membuat kotak textarea copy paste yang didefenisikan dengan kode tag <textarea>
    Contoh:
    Dianjurkan untuk menentukan jumlah baris dan kolom dalam penulisan kotak area teks. Kodenya adalah:
    <textarea cols="Jumlah_kolom" rows="jumlah_baris">
    Text, kode disini
    </textarea>
    Membuat Teks berlatarbelakang warna dengan kode HTML <span>. Contoh diatas menggunakan kode:
    <span style="background-color: #800; color: lime;"><b>Text Berstabilo</b></span>.
    Tag <span> juga biasanya digunakan pada gaya inline dalam dokumen.
    Membuat Text Berbayang
    Kodenya <font color="#ff0000" style="text-shadow: #ffff00 1px 1px 1px;"><b>Text Berbayang</b></font>
    Text underline atau BergarisBawah dengan kode:
    <u>Teks disini</u>
    Superscript text didefinisikan dengan kode <sup>.
    Teks superscript muncul setengah karakter diatas baseline. Contohnya:
    <b>TeksA<sup>TeksB</sup>TeksC</b>
    Hasilnya:
    TeksATeksBTeksC.
    Subscript text atau mendefinisikan teks subscript dengan kode:
    <sub>.
    Teks subscript muncul setengah karakter bawah baseline. Contohnya:
    <b>TeksA<sub>TeksB</sub>TeksC</b>
    Hasilnya:
    TeksATeksBTeksC
    Tag <div> digunakan untuk mendefinisikan divisi atau bagian dalam dokumen HTML. Tag <div> juga digunakan untuk kelompok elemen block untuk memformat mereka dengan CSS. Contohnya::
    <div style="color: #00ff00; background-color: #800000; margin: 3px; padding: 4px; text-align: center; border: 1px solid #ff4500;">Teks disini</div>
    Hasilnya:
    Teks disini
    Adapun tag HTML <blink> (Teks berkedip) dan <marquee> (Teks berjalan), sebaiknya tidak digunakan sebab kedua tag tersebut tidak merupakan tag standard HTML yang di anjurkan oleh W3 dan juga karena banyaknya browser yang tidak mengenal dan mendukung penggunaan tag tersebut (Sumber : http://www.w3.org).
    Adapun jenis tag atau kode dasar HTML yang digunakan pada jenis dokumen html 4.01 Wenru, bentuknya dapat anda lihat di Kode dasar HTML


    Diposting oleh di 1 komentar:
    Label: , , ,
    Langganan: Komentar (Atom)