Tampilkan postingan dengan label WEB Desain. Tampilkan semua postingan
Tampilkan postingan dengan label WEB Desain. Tampilkan semua postingan

Selasa, 24 November 2015

Kode dasar HTML

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 bercoret menggunakan 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
Untuk kode-kode dasar html yang lain dan lebih lengkap, silahkan klik di :
http://www.w3.org, http://www.w3schools.com atau di http://werbach.com
Diposting oleh di Tidak ada komentar:
Label:

Cara Membuat Tabel HTML

Contoh , di bawah ini adalah serangkaian kode HTML  untuk membuat tabel :
<table border=1>
<tr>
<td>tanggal</td>
</tr>
</table>
Hasilnya, browser akan menampilkan gambar tabel seperti  di bawah ini :
Cara membuat tabel dengan kode html
CARA MEMBUAT TABEL  1 BARIS 2 KOLOM
Berikut ini adalah cara  membuat tabel  dengan kode HTML 1 baris 2 kolom, lihat penerapannya di bawah ini  :
<table border=1>
<tr>
<td>tanggal</td>
<td>nama</td>
</tr>
</table>
Hasilnya,   browser akan menampilkan gambar tabel seperti di bawah ini :
Cara membuat tabel dengan kode html
CARA MEMBUAT TABEL 3 BARIS  1 KOLOM
Berikut ini adalah cara membuat tabel dengan kode HTML 3 baris 1 kolom adalah sebagai berikut :
<table border=1>
<tr>
<td>tanggal</td>
</tr>
<tr>
<td>kota</td>
</tr>
<tr>
<td>jenis kelamin</td>
</tr>
</table>
Hasilnya,   browser akan menampilkan gambar tabel seperti di bawah ini :
Cara membuat tabel dengan kode html
CARA MEMBUAT TABEL DENGAN ATRIBUT CELLSPACING
Atribut CELLSPACING digunakan untuk menentukan jarak antar sel pada sebuah tabel. Lihat penerapan CELLSPACING  pada kode HTML berikut ini :
<table border=1 cellspacing=10>
<tr>
<td>becak</td>
<td>sepeda</td>
</tr>
<tr>
<td>mobil</td>
<td>motor</td>
</tr>
</table>
Hasilnya,   browser akan menampilkan gambar tabel seperti di bawah ini :
Cara membuat tabel dengan kode html
CARA MEMBUAT TABEL DENGAN ATRIBUT CELLPADDING
Atribut CELLPADDING  digunakan  untuk member jarak antara sel dengan tulisan. Lihat penerapannya pada kode HTML berikut ini :
<table border=1 cellpadding=10>
<tr>
<td>becak</td>
<td>sepeda</td>
</tr>
<tr>
<td>mobil</td>
<td>motor</td>
</tr>
</table>
Hasilnya,   browser akan menampilkan gambar tabel seperti di bawah ini :
Cara membuat tabel dengan kode html
CELLSPACING DAN CELLPADDING  DIPAKAI BERSAMA – SAMA
Jika kedua atribut tersebut dipakai bersamaan dalam pembuatan tabel, maka penerapannya seperti kode HTML berikut ini :
<table border=1 cellpadding=10 cellspacing=10>
<tr>
<td>becak</td>
<td>sepeda</td>
</tr>
<tr>
<td>mobil</td>
<td>motor</td>
</tr>
</table>
Hasilnya,   browser akan menampilkan gambar tabel seperti di bawah ini :
Cara membuat tabel dengan kode html
MENENTUKAN LEBAR KOLOM DENGAN PROSENTASE ( WIDTH=100% )
Jika lebar kolom ditentukan 100 %, maka tampilan tabel akan melebar memenuhi lebar halaman. Jika lebar setiap kolom tidak ditentukan,  maka lebar 100% akan terbagi sama lebar untuk setiap kolomnya. Apabila jumlah kolomnya 2, maka tabel tersebut akan terbagi menjadi 2 sama lebar, masing – masing 50%.
Lebar kolom pada tabel dapat ditentukan tidak sama lebar, artinya masing – masing kolom lebarnya tidak sama. Lihat contoh penerapannya pada kode HTML berikut ini :
<table border=1 width=100%>
<tr>
<td width=25%>becak</td>
<td width=75%>sepeda</td>
</tr>
<tr>
<td width=25%>mobil</td>
<td width=75%>motor</td>
</tr>
</table>
Hasilnya,   browser akan menampilkan gambar tabel seperti di bawah ini :
Cara membuat tabel dengan kode html
MENENTUKAN LEBAR DAN TINGGI KOLOM DENGAN SATUAN PIXEL
Untuk membuat tabel, lebar kolom ( WIDTH ) dan tinggi kolom ( HEIGHT ) dapat ditentukan dengan satuan pixel. Lihat penerapannya dengan kode HTML berikut ini :
<table border=7 >
<tr height=40>
<td width=150>becak</td>
<td width=250>sepeda</td>
</tr>
<tr height=80>
<td width=150>mobil</td>
<td width=250>motor</td>
</tr>
</table>
Hasilnya,   browser akan menampilkan gambar tabel seperti di bawah ini :
Cara membuat tabel dengan kode html
PERATAAN TULISAN DALAM TABEL
Perataan tulisan dalam sebuah tabel menggunakan tag ALIGN  ( untuk perataan horizontal )  dan VALIGN ( untuk perataan vertical ). Untuk lebih memahaminya lihat contoh kode HTML berikut ini :
<table border=7 >
<tr height=40>
<td width=150 align=left valign=top>becak</td>
<td width=250 align=right valign=middle>sepeda</td>
</tr>
<tr height=80>
<td width=150 align=right valign=bottom>mobil</td>
<td width=250 align=center valign=middle>motor</td>
</tr>
</table>
Hasilnya,   browser akan menampilkan gambar tabel seperti di bawah ini :
Cara membuat tabel dengan kode html
Mudah – mudahan materi belajar HTML tentang cara membuat tabel dengan kode HTML di atas bermanfaat bagi anda.
Sumber : http://www.edyutomo.com/internet-dan-komputer/cara-membuat-tabel-dengan-kode-html

Diposting oleh di Tidak ada komentar:
Label:

Cara membuat Bullet And Numbering

HTML mendukung beberapa format list, baik numbering List dan bullets List.
  1. Tag HTML Numbering List
    Ada beberapa tipe Penomoran (numbering list) antara lain:
    1. type umum (default) dari Numbering adalah lambang bilangan (1,2,3,... dst)
      Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
      Contoh:<ol>
      <li>urutan ke-1</li>
      <li>urutan ke-2</li>
      <li>urutan ke-3</li>
      <li>urutan seterusnya...</li>
      </ol>
      Hasilnya akan terlihat seperti ini:
      Contoh:
      1. urutan ke-1

      2. urutan ke-2

      3. urutan ke-3

      4. urutan seterusnya...

      Ket: Tag ini selalu berpasangan

    2. Huruf romawi (I, II, III, ... atau i, ii, iii,... ),
      Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol type="I"> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
      Contoh:<ol type="I">
      <li>urutan ke-1</li>
      <li>urutan ke-2</li>
      <li>urutan ke-3</li>
      <li>urutan seterusnya...</li></ol>
      Hasilnya akan terlihat seperti ini:
      Contoh:

      1. urutan ke-1

      2. urutan ke-2

      3. urutan ke-3

      4. urutan seterusnya...
    3. Huruf Alfabet ( A,B,C,... atau a,b,c,...)
      Adapun Tag HTML yang digunakan untuk type ini, dibuka dengan kode <ol type="A"> dan ditutup dengan kode </ol> , sedangkan untuk masing masing item /list dibuka dengan <li> dan ditutup dengan </li>.
      Contoh:<ol type="I">
      <li>urutan ke-1</li>
      <li>urutan ke-2</li>
      <li>urutan ke-3</li>
      <li>urutan seterusnya...</li></ol>
      Hasilnya akan terlihat seperti ini:
      Contoh:

      1. urutan ke-1

      2. urutan ke-2

      3. urutan ke-3

      4. urutan seterusnya...
  2. Tag HTML Bullet List
    Ada beberapa tipe Bullet (bullet list) antara lain:
    1. Tipe Disc,
      Penulisan Tag HTML nya( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
      Contoh:<ul type="Disc"> <li>urutan ke-1</li> <li>urutan ke-2</li> <li>urutan ke-3</li> <li>urutan seterusnya...</li></ul>
      Hasilnya:
      Contoh:
      • urutan ke-1
      • urutan ke-2
      • urutan ke-3
      • urutan seterusnya...
    2. Tipe Circle
      Penulisan Tag HTML nya ( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
      Contoh:<ul type="Circle"> <li>urutan ke-1</li> <li>urutan ke-2</li> <li>urutan ke-3</li> <li>urutan seterusnya...</li></ul>
      Hasilnya sbb:
      Contoh:
      • urutan ke-1
      • urutan ke-2
      • urutan ke-3
      • urutan seterusnya...
    3. Tipe Square
      Penulisan Tag HTML nya ( contoh agar jarak antar barisnya tidak terlalu jauh maka penulisan tagnya tidak perlu ganti baris (tidah usah di enter)
      Contoh:<ul type="Square">
      <li>urutan ke-1</li><li>urutan ke-2</li><li>urutan ke-3</li><li>urutan seterusnya...</li></ul>
      Hasilnya sebagai berikut:
      Contoh:
      • urutan ke-1
      • urutan ke-2
      • urutan ke-3
      • urutan seterusnya...
Yang menjadi pertanyan adalah bagaimana jika List Numbering dan Bulleting digabung dan bertingkat seperti pada postingan blog saya kali ini?



Contoh Penulisan Tag HTML Bertingkat Selamat mencoba:
<ol type="I"><li>Tingkat I-a <ol type="1"><li>Tingkat ke-2a<ol type="a"><li>Tingkat ke-a</li><ul type="square"><li>square 1</li><li>square 2</li></ul><li>tingkat ke a-2<ul type="disc"><li>disc 1</li><li>disc 2</li></ul></li></ol></li><li>Tingkat ke-2b<ol type="a"><li>Tingkat ke-a</li><ul type="square"><li>square 1</li><li>square 2</li></ul><li>tingkat ke a-2<ul type="disc"><li>disc 1</li><li>disc 2</li></ul></li></ol></li></ol></li>
<li>tingkat I-b<ul type="disc"><li>disc 1<ol type="a"><li>pertama</li><li>kedua</li></ol></li><li>disc 2<ol type="&lt;i&quot;"><li>pertama</li><li>kedua</li>
</ol></li></ul>
</li></ol>
Hasilnya seperti ini:
  1. Tingkat I-a
    1. Tingkat ke-2a
      1. Tingkat ke-a
        • square 1
        • square 2
      2. tingkat ke a-2
        • disc 1
        • disc 2
    2. Tingkat ke-2b
      1. Tingkat ke-a
        • square 1
        • square 2
      2. tingkat ke a-2
        • disc 1
        • disc 2

  2. tingkat I-b
    • disc 1
      1. pertama
      2. kedua
    • disc 2
      1. pertama
      2. kedua

Demikian postingan kali ini mengenai cara Cara Membuat Bullets dan Numbering Tag HTML pada Posting Blog semoga bermanfaat.

Sumber : http://www.jual-rebanamarawis.com/2012/04/cara-membuat-bullets-numbering-tag-html.html
Diposting oleh di Tidak ada komentar:
Label:
Langganan: Komentar (Atom)