Home » » Tag-tag dasar HTML

Tag-tag dasar HTML

Posted by Catatan Wong Awam on Saturday 10 May 2014

Sebagai ulasan atau rangkuman mengenai kode html sederhana. Semoga bermanfaat bagi pemula yang ingin menjadi Web Master !:)
1. Membuat kutipan teks
<blockquote>Masukkan teks anda di sini</blockquote>
Hasil:

Blockquote
2. Membuat teks teletype (untuk membedakan tulisan biasa dengan kode html)
<tt>Masukkan teks anda di sini</tt>
Hasil:
Teletype text
3. Membuat teks miring
<i>Masukkan teks anda di sini</i>
Hasil:
Italic text
4. Membuat teks tebal
<b>Masukkan teks anda di sini</b>
Hasil:
Bold text
5. Membuat tulisan dicoret
<strike>Masukkan teks anda di sini</strike>
Hasil:
Strike
6. Membuat tulisan digarisbawahi
<u>Masukkan teks anda di sini</u>
Hasil:
Underlined text
7. Membuat teks ke kiri
<p style=”text-align: left;”>Masukkan teks anda di sini</p>
Hasil:
Left
8.Membuat teks ke tengah
<p style=”text-align: center;”>Masukkan teks anda di sini</p>
Hasil:
Center
9. Membuat teks ke kanan
<p style=”text-align: right;”>Masukkan teks anda di sini</p>
Hasil:
Right
10. Membuat Bullet Numberring
<li>Masukkan teks anda di sini</li>
Hasil:

  • Bullet
  • Agar menjorok kedalam anda bisa menambahkan <ul> dan </ul>
    Contoh:
    <ul><li>Bullet</li></ul>
    Hasil:
    • Bullet
    11. Membuat teks lebih besar
    <big>Masukkan teks anda di sini</big>
    Hasil:
    Big text
    12. Membuat teks lebih ke kecil
    <small>Masukkan teks anda di sini</small>
    Hasil:
    Small text
    13. Membuat teks agak ke bawah
    <sub>Masukkan teks anda di sini</sub>
    Hasil:
    Tulisannya akan ke bawah subscript
    14. Membuat teks agak ke atas
    <sup>Masukkan teks anda di sini</sup>
    Hasil:
    tulisannya akan ke atas superscript
    15. Membuat kotak teks area
    <textarea>Masukkan teks anda di sini</textarea>

    Untuk mengubah besar kolom dan barisnya
    Anda bisa menambahkan kodenya menjadi
    <textarea rows=”3″ cols=”30″>textarea</textarea>
    Hasil:

    Untuk mengganti ukurannya tinggal ganti angkanya saja
    16. Membuat tabel
    Tag <tr> mendefinisikan baris dalam tabel HTML
    Tag <th> mendefinisikan header cell pada tabel HTML
    Tag <td> mendefinisikan standard cell pada tabel HTML
    Sebuah tabel HTML memiliki dua macam cell:

  • Header cells – berisi informasi header (dibuat dengan elemen th)
  • Standard cells – berisi data (dibuat dengan elemen td)
  • Teks dengan elemen th akan tebal dan ke tengah
    Teks dengan elemen td akan biasa dan letaknya di kiri.
    Contoh:
    <table border=”1″>
    <tr>
    <th>Bulan</th>
    <th>Tabungan</th>
    </tr>
    <tr>
    <td>Januari</td>
    <td>Rp.1000000</td>
    </tr>
    </table>
    Hasil:
    BulanTabungan
    JanuariRp.1000000
    Catatan: angka 1 bisa diganti angka 2,3,dst untuk jenis border tabel.
    Jika masih bingung bisa langsung dipraktekkan di sini
    http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_table_test
    17. Membuat tulisan ke bawah (Enter)
    <br />
    Caranya sisipkan kode tersebut pada kode yang ingin buat menjadi enter atau ke bawah
    18. Membuat tulisan berkedip
    <blink>Masukkan teks anda di sini</blink>
    Hasil:
    blink
    19. Membuat tulisan bergerak atau berjalan
    <marquee>Masukkan teks anda di sini</marquee>
    Hasil:
    marquee
    Secara default maka tulisan akan bergerak dari kanan dan ke kiri
    Agar bisa ke arah lainnya tambahkan kodenya menjadi sebagai berikut
    Bergerak ke atas
    <marquee direction=”up”>Masukkan teks anda di sini</marquee>
    Up
    Bergerak ke bawah
    <marquee direction=”down”>Masukkan teks anda di sini</marquee>
    Down
    Bergerak ke kiri
    <marquee direction=”left”>Masukkan teks anda di sini</marquee>
    Left
    Bergerak ke kanan
    <marquee direction=”right”>Masukkan teks anda di sini</marquee>
    Right
    Anda bisa mengganti tulisan up dengan down, left, atau right untuk mengganti arah tulisan.
    Untuk pengembangan marquee lebih lanjut silahkan ke sini
    http://www.artikelinternet.com/trik-membuat-teks-berjalan-dengan-marquee/
    2o. Membuat link pada tulisan atau teks
    <a href=”Masukkan link anda di sini”>Masukkan tulisan atau teks anda di sini</a>
    Contoh:
    <a href=”http://array16.net/”>Array16</a>
    Hasil:
    Array16
    21. Membuat link pada gambar
    <a href=”Masukkan link anda di sini”><img border=”0″ width=”Masukkan ukuran lebar gambar anda” src=”Masukkan lokasi gambar anda” height=”Masukkan ukuran panjang atau tinggi gambar anda”/></a>
    Contoh:
    <a href=”http://pilihansempurna.com”><img border=”0″ width=”236″ src=”http://i812.photobucket.com/albums/zz42/pilihansempurna/pilihansempurna.gif” height=”22″/></a>
    Hasil:

    Nah biasanya kita menggabungkan kode ini dengan kode textarea untuk bertukar banner. <textarea> dan </textarea>
    <textarea> <a href=”http://pilihansempurna.com”><img border=”0″ width=”236″ src=”http://i812.photobucket.com/albums/zz42/pilihansempurna/pilihansempurna.gif” height=”22″/></a></textarea>
    Hasil:

    22. Mengganti warna teks
    <span style=”font-family: Arial; color: #Masukkan kode warna di sini;”>Masukkan teks anda di sini</span>
    Contoh:
    Warna hijau
    <span style=”font-family: Arial; color: #00cc00;”>TEXT</span>
    Hasil:
    TEXT
    Untuk kode warna html bisa dilihat di sini
    http://html-color-codes.info/
    Untuk pengembangannya menjadi berwarna pelangi bisa dilihat di sini
    http://www.artikelinternet.com/memberikan-efek-pelangi-pada-link/
    23. Membuat efek stabilo pada tulisan
    <span style=”background-color: Masukkan kode warna di sini ;”> Masukkan teks anda di sini</span>
    Contoh:
    <span style=”background-color: #F5A9A9 ;”> Teks yang distabilo </span>
    Hasil:
    Teks yang distabilo
    Untuk kode warna html bisa dilihat di sini
    http://html-color-codes.info/
    24. Mengganti background tulisan dengan gambar
    <div style=”background:url(Masukkan lokasi gambar anda) no-repeat;”><span style=”color: #Masukkan kode warna di sini;”>Masukkan teks anda di sini</span></div>
    Contoh:
    <div style=”background:url(http://i812.photobucket.com/albums/zz42/pilihansempurna/thumbnail.jpg)no-repeat;”><span style=”color: #000000;”>Tulis Teks disini</span></div>
    Hasil:
    Tulis Teks anda di sini
    Untuk menggunakan enter silahkan tambahkan kode


    Maka anda akan mendapatkan tulisan dengan ada background

    dibelakangnya

    http://inforay.awardspace.info/


    0 comments:

    Post a Comment

    Translate

    Arsip Blog

    .comment-content a {display: none;}