#under_header{ margin:10px 0; padding:1%; width:98%; }

Rabu, 11 Juli 2012

Kode - kode Dasar HTML



Berikut kode-kode HTML yang sering dipakai oleh para blogger.


-   <b>membuat tulisan menjadi tebal</b>
hasilnya 
membuat tulisan menjadi tebal
******************************************************
<u>membuat tulisan bergaris bawah</u>
hasilnya
membuat tulisan bergaris bawah
******************************************************
<i>membuat tulisan miring</i>
hasilnya
membuat tulisan miring
******************************************************
<center>membuat tulisan di tengah</center>
hasilnya


membuat tulisan di tengah


******************************************************
<s>membuat tulisa coret tengah</s>
hasilnya
membuat tulisa coret tengah
*******************************************************
<marquee>membuat tulisan berjalan</marquee>
hasilnya
membuat tulisan berjalan
*******************************************************
<small>membuat tulisan agak kecil</small>
hasilnya
membuat tulisan agak kecil
*******************************************************
<blink>membuat tulisan berkedip</blink>
hasilnya
membuat tulisan berkedip
*******************************************************
<div style="color:red">membuat tulisan berwarna (merah)</div>
hasilnya
membuat tulisan berwarna (merah)

NB: tulisan red bisa di ganti sesuai selera anda misal, blue (biru), yellow (kuning), brown (coklat), green (hijau), white (putih), black (hitam) purple (ungu) dll.
*******************************************************
atau bisa seperti ini menggunakan kode-kode warna.
<div style="color:#b45f06;">membuat tulisan berwarna (oranye)</div>
hasilnya
membuat tulisan berwarna (oranye)
*******************************************************
<div style="background-color:yellow">membuat tulisan background warna (kuning)</div>
hasilnya
membuat tulisan background warna (kuning)
*******************************************************
<a href="mailto:phoonix8@gmail.com">HTML untuk mengirim email</a>
hasilnya
kirim email ke phoonix8@gmail.com
*******************************************************
<ul>
<li>membuat bullet dot
<li>membuat bullet dot
<li>membut bullet dot
</ul>
hasilnya
  • membuat bullet dot
  • membuat bullet dot
  • membuat bullet dot                                                                                                                       
    *************************************************
    <ol>
    <li>membuat bullet angka urut
    <li>membuat bullet angka urut
    <li>membuat bullet angka urut</ol>
hasilnya
  1. membuat bullet angka urut
  2. membuat bullet angka urut
  3. membuat bullet angka urut
************************************************
Heading ditandai dengan tag <h1>. Tag <h1> adalah elemen HTML yang digunakan untuk menampilkan sebuah judul pada artikel atau dokumen data pada sebuah halaman web. HTML heading terdiri atas 6 tingkatan menurut ukuran besar dan kecilnya, yaitu dari Tag<h1> <h2> <h3> <h4> <h5> dan<h6>.  Dan Tag <h1> merupakan tag heading yang berukuran paling besar. Sedang tag <h2> dan seterusnya biasanya berfungsi sebagai elemen HTML yang digunakan untuk menampilkan sub-judul.

Lihat perbedaan penulisan dan hasil yang tampil pada halaman web :

<h1>Ini Judul 1</h1>
<h2>Ini Judul 2</h2>
<h3>Ini Judul 3</h3>
<h4>Ini Judul 4</h4>
<h5>Ini Judul 5</h5>
<h6>Ini Judul 6</h6>
Ini Judul 1
Ini Judul 2
Ini Judul 3
Ini Judul 4
Ini Judul 5
Ini Judul 6


  HTML PARAGRAF
HTML Paragraf didefinisikan dengan tag<p>

<p>Disini Paragraf teks yang merupakan isi dari artikel</p>
Disini Paragraf teks yang merupakan isi dari artikel
  HTML LINK
HTML Link didefinisikan dengan tag <a>
<a href="http://toar-tangkere.blogspot.com/"> KLIK DISINI </a>
KLIK DISINI
 HTML  GAMBAR
HTML  Gambar didefinisikan dengan tag <img>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Ox_ahSPO5bJYOEIvDMkTMEJ0uM6kf-gT0x2sdHN8qJhLIrU7meoq_OHqxjjKd9msVVMVsig4Ehll8kx5s_uTL9p26gmF0xrSIEVs8UBuPvQgRoIUIHNkSO9fvStvxvQUx6tUivvDkt-K/s104/DASAR.jpg" width="104" height="142" />

Membuat garis

Garis dalam penulisan html ditandai dengan tag <hr/>, dan tag <hr/> penulisannya tidak menggunakan tag pembuka.

Berikut contoh cara penulisan saat menyisipkan garis diantara paragraf :


<h1>HTML</h1>
<hr/>
<p>
Struktural yaitu sebuah tanda yang menentukan level atau tingkatan dari sebuah tulisan seperti tag &lt;h1&gt;&lt;h2&gt;&lt;h2&gt; dan seterusnya, tag ini menampilkan tulisan lebih tebal dan besar yang digunakan sebagai penulisan judul..
</p>
<hr/>
<p>
Presentational adalah tag yang menentukan tebal tipisnya tampilan dari sebuah tulisan yang sering kita lihat lihat sebagai tanda bold, tag ini berlaku untuk semua teks pada sebuah paragraf termasuk Heading atau judul. (contoh, <b>Teks Tebal </b>).
</p>
<hr/>

Berikut hasilnya :

Struktural yaitu sebuah tanda yang menentukan level atau tingkatan dari sebuah tulisan seperti tag dan seterusnya, tag ini menampilkan tulisan lebih tebal dan besar yang digunakan sebagai penulisan judul..

Presentational adalah tag yang menentukan tebal tipisnya tampilan dari sebuah tulisan yang sering kita lihat lihat sebagai tanda bold, tag ini berlaku untuk semua teks pada sebuah paragraf termasuk Heading atau judul. (contoh, Teks Tebal).

- Menempatkan Link pada teks
<a href="http://toar-tangkere753080512.blogspot.com/">Membuat Menu Dropdown</a>

Berikut hasilnya :



-Menempatkan Link pada Gambar

<a href="http://toar-tangkere753080512.blogspot.com/"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQnNh2cYUPq63SFXj_Mu1kxUCtBJ5d5kOVPQsDcCd6BvDkV0DRWhjW4Qw_Y2NBcmKmZt7IeP3XhOetFDd18BVdhYqFfP6GrqyeNWOh4_lmVeYUAGAWrM7bMBTMxB2roAROPSUIPC-IJVzz/s200/Link.jpg" width="200" /></a>


Berikut hasilnya :




- Membuat Link agar terbuka pada tab atau jendela baru

<a href="http://toar-tangkere753080512.blogspot.com/" target="_blank" > Cara membuat Menu Dropdown </a>


Berikut hasilnya :
                                      Cara membuat Menu Dropdown

Catatan : Tinggal menambahkan kode target="_blank" setelah ULR.

Format Teks


Untuk membuat teks lebih fungsional dan lebih berfariasi, format teks termasuk yang sangat sering digunakan dalam penulisan artikel. Dengan menggunakan format teks kita dapat merubah bentuk atau ukuran teks.


Beberapa format teks yang sering digunakan yaitu :


Bold (Ketebalan), ditandai dengan tag awal <b> dan tag akhir </b>
Strong (Besar), ditandai dengan tag awal <strong> dan tag akhir </strong>
Italic (Kemiringan), ditandai dengan tag awal <i> dan tag akhir </i>
Small (sedang), ditandai dengan tag awal <small> dan tag akhir </small>
Under line (Garis bawah), ditandai dengan tag awal <u> dan tag akhir </u>
Strikethrough (Garis ditengah teks), ditandai dengan tag awal <strike> dan tag akhir </strike>


Perhatikan contoh :

<b> Bold (Ketebalan) </b>
<strong> Strong (Besar) </strong>
<i> Italic (Kemiringan) </i>
<small> Small (sedang) </small>
<u> Under line (Garis bawah) </u>
  <strike> Strikethrough (Garis ditengah teks)



Berikut hasilnya :

Bold (Ketebalan)
Strong (Besar)
Italic (Kemiringan)
Small (sedang)
Under line (Garis bawah)
Strikethrough (Garis ditengah teks)



HTML list
<h4>List bentuk Angka :</h4>   
 <ol>
 <li>Satu</li>
 <li>Dua</li>
 <li>Tiga</li>
 <li>Empat</li>
</ol>

    List bentuk Angka :                

  1. Satu
  2. Dua
  3. Tiga
  4. Empat

<h4>List bentuk Huruf besar:</h4>
<ol type="A">
 <li>Huruf besar A</li>
 <li>Huruf besar B</li>
 <li>Huruf besar C</li>
 <li>Huruf besar D</li>
</ol>

List bentuk Huruf besar :        

  1. Huruf besar A
  2. Huruf besar B
  3. Huruf besar C
  4. Huruf besar D

<h4>List bentuk Huruf kecil:</h4>
<ol type="a">
 <li>Huruf kecil a</li>
 <li>Huruf kecil b</li>
 <li>Huruf kecil c</li>
 <li>Huruf kecil d</li>
</ol>

List bentuk Huruf kecil :           

  1. Huruf kecil a
  2. Huruf kecil b
  3. Huruf kecil c
  4. Huruf kecil d

<h4>List bentuk Romawi besar:</h4>
<ol type="I">
 <li>Romawi besar I</li>
 <li>Romawi besar II</li>
 <li>Romawi besar III</li>
 <li>Romawi besar IV</li>
</ol>

List bentuk Romawi besar :

  1. Romawi besar I
  2. Romawi besar II
  3. Romawi besar III
  4. Romawi besar IV

<h4>List bentuk Romawi kecil:</h4>
<ol type="i">
 <li>Romawi kecil i</li>
 <li>Romawi kecil ii</li>
 <li>Romawi kecil iii</li>
 <li>Romawi kecil iv</li>
</ol>

List bentuk Romawi kecil :   

  1. Romawi kecil i
  2. Romawi kecil ii
  3. Romawi kecil iii
  4. Romawi kecil iv

<h4>Disc bullets list:</h4>              
<ul type="disc">
 <li>Merah</li>
 <li>Kuning</li>
 <li>Hijau</li>
 <li>Biru</li>
</ul>

Disc bullets list :                   

  • Merah
  • Kuning
  • Hijau
  • Biru

<h4>Circle bullets list:</h4>            
<ul type="circle">
 <li>Merah</li>
 <li>Kuning</li>
 <li>Hijau</li>
 <li>Biru</li>
</ul>

Circle bullets list :                

  • Merah
  • Kuning
  • Hijau
  • Biru

<h4>Square bullets list:</h4>          
<ul type="square">
 <li>Merah</li>
 <li>Kuning</li>
 <li>Hijau</li>
 <li>Biru</li>
</ul>

Square bullets list :               

  • Merah
  • Kuning
  • Hijau
  • Biru

<h4>Sub Daftar:</h4>                    
<ul> <li>Buah</li>
  <li>Hewan
    <ul>
    <li>Reptil</li>
    <li>Mamalia
      <ul>
      <li>Sapi</li>
      <li>Kambing</li>
      </ul>
    </li>
    </ul>
  </li>
  <li>Pohon</li>
</ul>

Sub Daftar :                           

  • Buah
  • Hewan
    • Reptil
    • Mamalia
      • Sapi
      • Kambing
  • Pohon
    
   Spasi
Berikut contoh penggunaan spasi pada teks :
<h2>Nama-nama buah :</h2>
<p>
Mangga
<br/>
Rambutan
<br/>
Pepaya, dll
</p>

Berikut hasilnya :

Nama-nama buah :
Mangga


Rambutan


Pepaya, dll
Berikut yang tidak menggunakan tag<br/> :

Nama-nama buah :
Mangga
Rambutan
Pepaya, dll
Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)