›

kumpulan kode HTML terlengkap

Sunday, April 9, 2017 Add Comment Edit

happy weekend...

Setelah belajar tentang pengenalan dan struktur HTML kita lanjut ke pelajaran HTML berikutnya yaitu kumpulan kode tag HTML. Kode HTML dibawah dapat di copy ke text editor apps seperti notepad dan disave dengan nama file.html kemudian di open with browser apps seperti IE, Mozilla Firefox,etc. Kalau mymelody13 sendiri pakai aplikasi xplore symbian os kemudian di copy ke postingan blog untuk preview..


Berikut kumpulan kode tag HTMl terlengkap:
  1. Tag Struktur HTML Dasar
    • HTML
      • <html></ html> Menginformasikan kepada browser bahwa dokumen termasuk file dokumen HTML
    • HEAD
      • <head></ head> Berupa informasi umum halaman web yang tidak akan ditampilkan kehalaman utama
    • TITLE
      • <title></ title> Menampilkan judul halaman di tab browser.
    • BODY
      • <body></ body> Informasi tentang semua yang akan tampil dihalaman web browser. Attribute untuk setiap textnya: Background, bgcolor, bgsound, font, link, alink, vlink, topmargin, leftmargin, marginheight, marginwidth.
  2. Tag Format Text
    • Baris baru
      • <br> nb: tidak perlu tag penutup.
    • Paragraph
      • <p align="left" or "center" or "right"</p> Element paragraph mempunyai attribute "align" dengan nilai "left", "center", dan "right".
    • Teks Tebal
      • <b></b>
    • Teks Miring
      • <ins> </ins>
    • Teks Underline
      • <u> </u> nb: tag u=ins untuk underline text
    • Teks Coret
      • <del> </del>

    • Teks Header

      • <h1></h1> nb: h1 bisa diubah menjadi h2, h3, dst. Sampai h6 sesuai kebutuhan. Tag ini berfungsi untuk membuat 6 jenis ukuran huruf dengan h1 ukuran terbesar dan h6 ukuran terkecil. Attributenya align dengan nilai left, center, dan right.
    • Teks superscript
      • <sup></sup>
    • Teks subscript
      • <sub></sub>
  3. Tag Edit Font
    • Tag Basefont
      • <basefont size="pixel"> Basefont merupakan dasar ukuran huruf saat tampil di web browser. Attributenya size dengan nilai "1" sampai "7" pixel (ukuran default "3" pixel). Nb: tanpa tag penutup.
    • Tag Font
      • <font color="warna" face="font" size="pixel"></font> attributenya adalah color="warna" face="jenis huruf" size="pixel".
    • Tag Shadow
<style type="text/css">b.drop-shadow { text-shadow: 2px 2px 3px red }</style><font color="green"><b class="drop-shadow"><b>your text</b></font></b>
  • Tag Warna Font
    • <span style="color:#3300FF">your text</span>
  • Tag Garis Horizontal
    • Tag hr (horizontal rule) menggunakan attribute align ("left", "center", dan "right"), size (tebal garis "pixel"), width or height ("persen") dan noshade(garis solid). Nb: tanpa tag penutup.
    • Tag HR setting Color, Size, Letak
      • <hr style="color:#00f" width="60%" align="center">
    • Tag HR for Backgorund
      • <hr style="height:3px;background:#00f;color:#f00;">
    • Tag HR for Garis Bla..bla..bla
      • <div style="border-bottom:3px dotted #00f;"></div>
    • Tag HR for Garis Putus-putus
      • <div style="border-bottom:3px dashed #00f;"></div>

  • Tag Make List

    • list number
      • <ol> <li>M</li> <li>N</li> <li>O</li> </ol>
      1. M
      2. N
      3. O
    • list bullet
      • <ul> <li>Text 1</li> <li>Text 2</li> <li>Text 3</li> </ul>
      • Text 1
      • Text 2
      • Text 3

  • Tag Links

    • link biasa
      • <a href="http://url tujuan">your text</a>
    • link dengan tombol
      • <div style="text-align:center;"><a href="http://URLanda"><input type="submit" value="your text" /></a></div>

  • Tag Gambar

    • klik langsung gambar aja
      • <img src="http://URL GAMBAR" > </img>
    • klik menuju situs lain
      • <a href='https://www.LINKSITUSLAIN.com ' target='_blank'><img alt='DESKRIPSIGAMBAR' src='HTTP://WWW.URLGAMBAR.COM/foto.JPG '/ ></a>
    Attributenya: src, alt, name, border, weight, height, width,etc.
  • Tag Textarea

    • textarea biasa
      • <textarea name="code" cols="15" rows="1" style="background:#FFF;">mymelody13</textarea>
    • textarea frame
      • <textarea name="code" cols="15" rows="1" style="border:5px inset #00ffff;">mymelody13</textarea>
    • textarea font color
      • <textarea name="code" cols="15" rows="1" style="color:#ff1382;border:5px inset #8821cc;">mymelody13</textarea>
    • textarea bgcolor
      • <textarea name="code" cols="15" rows="1" style="background:#8822cc;color:#ff6237;border:5px inset #ff1383;">mymelody13</textarea>
    • textarea dashed
      • <textarea name="code" cols="15" rows="1" style="background:#499;color:#284F00;border:5px #295F00 dashed;line-height:1.5em;padding:5px;">mymelody13</textarea>
    • textarea dotted
      • <textarea name="code" cols="15" rows="1" style="background:#6bb;color:#ffffff;border:5px dotted #FFEFF9;line-height:1.5em;padding:5px;">mymelody13</textarea>

  • Tag Tabel

    • tabel 1 column
      • <table width="100%" border="1"><tr><td width="100%" bgcolor="orange" align="center">mymelody13</td></tr></table>
      mymelody13
    • tabel 3 column
      • <table width="100%" border="1"><tr><td width="33%" bgcolor="orange" align="center">namaku</td><td width="34%" bgcolor="orange" align="center">Uchiha</td><td width="33%" bgcolor="orange" align="center">Sasuke</td></tr></table>
      namakuUchihaSasuke
    Keterangan:
    • tag table atributenya Border, cellpadding, cellspacing, width, height, name, id, title, bgcolor, background, align, valign,etc digunakan untuk mengatur semua elemen tabel.
    • tag tr atributenya Height, bgcolor, background, align, valign, title digunakan untuk membuat baris baru.
    • tag td atributenya Height, width, bgcolor, background, align, valign, title, colspan, rowspan digunakan untuk membuat kolom.
    • tag th atributenya Height, width, bgcolor, background, align, valign, title, colspan, rowspan digunakan untuk header kepala: automatic center and bold.
    • tag tbody atributenya Height, width, align, valign, bgcolor, background berfungsi untuk cell yang diapit tag
    • tag colgroup atributenya Height, width, align, valign, bgcolor, background berfungsi untuk kolom
    • tag caption atributenya align dengan nilai "top", "bottom" berfungsi untuk menampilkan judul di top atau bottom tabel
    Fungsi atribute diatas
    • colspan untuk kolom baris pertama nilainya "2",etc.
    • bgcolor untuk background color nilainya "pink",etc
    • border untuk membuat garis dalam tabel nilai "1",etc menunjukkan ketebalan garis
    • cellpadding untuk jarak antara line dan tulisan nilainya "1",etc.
    Example The Real Table<table border=”1" cellpadding=”2"> <caption align=”top”><b>Tabel Edit by Xplore<br>apps s60v3</b> </caption> <tr bgcolor=”green”> <td colspan=”3"> <center>Daftar Program</center></td> </tr> <tr bgcolor=”blue”> <td>No</td> <td>Name</td> <td>Rating</td> </tr> <tr bgcolor=”pink”> <td>1</td> <td>Naruto Shippuden</td> <td>17</td> </tr> <tr bgcolor=”pink”> <td>2</td> <td>Ninja Hatori</td> <td>13</td> </tr> <tr bgcolor=”pink”> <td>3</td> <td>Doraemon</td> <td>11</td> </tr> <tr bgcolor=”pink”> <td>4</dt> <td>Go For Speed</td> <td>9</td> </tr> <tr bgcolor=”pink”> <td>5</td> <td>Bobo Boy</td> <td>7</td> </tr> <tr bgcolor=”pink”> <td>6</td> <td>Upin dan Ipin</td> <td>2</td> </tr> </table>
    Table Edit by Xplore apps s60v3
    Daftar Program
    No Name Rating
    1 Naruto Shippuden 17
    2 Ninja Hatori 13
    3 Doraemon 11
    4



    Go For Speed


    9




    5

    Bobo Boy

    7




    6

    Upin dan Ipin

    2




  • Tag Form


    • Tag Form
      • <form method="post" action="proses.php"></ form>
      • Attribute Method: menentukan cara pengiriman data ke server "POST" atau "GET" (POST= data dikirim ke server sebagai block data ke script seperti password sedangkan GET= data dikirim dengan query string pada URL).
      • Attribute Action: lokasi script yang akan memproses data dari form ("URL").
    • Tag Input
      • Attribute Name: nama variabel
      • Attribute Type: terbagi atas:
      Text Input <form> First Name<br> <input type="text" name="Simon"> <br> Last Name<br> <input type="text" name="Weldy"> </form>
      First Name Last Name
      Radio Input <form> <input type="radio" name="Gender" value="Male">Male <br> <input type="radio" name="Gender" value="Female">Female </form>
      Male Female
      Submit Input <form> First Name:<br> <input type="text" name="Weldy"> <br> Last Name:<br> <input type="text" name="Simon"> <br><br> <input type="submit" value="submit"> </form>
      First Name: Last Name:
    • Tag Option and Select
      • Tag Select
        • <select name="name" size="number" multiple > ....... </select>
      • Tag Option
        • <option selected value="number" > ...... </option>
      • Jika Tag Digabung
        • <select name="Month"> <option value="" selected="selected">Choose Month</option> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select>
      • Keterangan Attributenya
      • Name = Nama variable dari control yang akan
        menyimpan nilai dari input field
      • Value = Text yang di tampilkan pada tombol, default =
        "submit query"
      • Size = Untuk menampilkan jumlah baris.
      • Multiple = Untuk menentukan apakah user boleh memilih lebih dari satu option apa tidak.
      • Selected = Pilihan ini di pilih secara default.

    Ini merupakan salah-satu artikel yang cukup melelahkan. Semoga bermanfaat and see you...

    0 Response to "

    kumpulan kode HTML terlengkap

    "

    Post a Comment

    Silahkan tinggalkan jejak!

    Subscribe to: Post Comments (Atom)

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel