Kode-kode dasar HTML

Pada postingan sebelumnya kita telah membahas apa itu HTML?
Bagi Anda yang belum mengerti silahkan baca lagi disini...Dan pada postingan kali ini kita akan membahas kode-kode dasar HTML.
Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.

Di bawah ini ada beberapa kode-kode untuk mewakili pemformatan text maupun mebuat berbagai object dalam halaman anda,meskipun sekarang sudah banyak pembuatan halaman HTML dengan software instant seperti Dreamweaver dll.

---

Membuat Center,gunakan kode : <p align="center">Belajar</p> hasilnya seperti:

Belajar

---

Membuat Posisi kekanan gunakan kode : <p align="right">Belajar</p> hasilnya seperti :

Belajar

---

Membuat Posisi kekiri gunakan kode: <p align="left">Belajar</p> hasilnya seperti :

Belajar

---

Membuat Huruf Tebal gunakan kode: <b>Belajar</b> hasilnya seperti :
Belajar

---

Membuat Huruf Garis Bawah gunakan kode : <u>Belajar</u> hasilnya seperti :
Belajar

---

Membuat Huruf bercetak Miring gunakan kode : <i>Belajar</i> hasilnya seperti :
Belajar

---

Membuat Kombinasi huruf tebal,miring,garisbawah,gunakan kode :
<b><i><u>Belajar</u></i></b> hasilnya seperti :
Belajar

---

Membuat Huruf tebal strong gunakan kode : <srong>Belajar</strong> hasilnya seperti :
Belajar

---

Membuat Huruf Hidden gunakan kode : <span style="visibility: hidden">Belajar</span> hasilnya seperti :

Namanya juga hidden..ya..ga keliatan..

---

Membuat Huruf Besar semua (uppercase) gunakan kode :
<span style="text-transform: uppercase">Belajar</span> hasilnya seperti :
Belajar

---

Membuat Huruf Small caps gunakan kode:
<span style="font-variant: small-caps">Belajar</span> hasilnya seperti ini:
Belajar

---

Membuat Huruf Subscribe / kecil di bawah gunakan kode:
<p>4₂</p>hasilnya seperti ini:
4₂

---

Membuat Huruf Superscribe / pangkat gunakan kode:
<p>4²</p> hasilnya seperti ini:
4²

---

Membuat Huruf bergaris atas gunakan kode:
<span style="text-decoration: overline">Belajar</span> hasilnya seperti ini:
Belajar mengganti huruf

---

Membuat Huruf bergaris tengah gunakan kode:
<strike>Belajar</strike> hasilnya seperti ini:
Belajar

---

Menentukan jenis huruf gunakan kode:
<p><font-family="Arial" >Belajar</font></p> hasilnya seperti ini:
Belajar

---

Menentukan ukuran huruf gunakan kode:
<p><font-size="3" >Belajar</font></p> hasilnya seperti ini:
Belajar

---

Menentukan warna huruf gunakan kode:
<p style="color: green; >Belajar</p> hasilnya seperti ini:
Belajar

---

Membuat bullet dot bolong gunakan kode:
<ul type="circle">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Membuat bullet dot kotak gunakan kode:
<ul type="square">
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Membuat bullet dot bulat gunakan kode:
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Mengatur posisi bullet gunakan kode:
<blockquote>
<blockquote>
<blockquote>
<ul>
<li>DOT 1</li>
<li>DOT 2</li>
<li>DOT 3</li>
</ul>
</blockquote>
</blockquote>
</blockquote>
hasilnya seperti ini:

• DOT 1
• DOT 2
• DOT 3

---

Menentukan kombinasi warna,jenis,dan ukuran huruf gunakan kode:
<p><font style="color: red; font-family: courier new; font-size: 15px;" >Belajar</font></p>
hasilnya seperti ini:

Belajar

---

Membuat tabel border solid gunakan kode:

<table border="1" width="200">
<tr>
<td style="border-style: solid">Text</td>
</tr>
</table>

hasilnya seperti :

Text

---

Membuat tabel border dot gunakan kode:
<table border="1" width="200"
style="border-style: dotted">
<tr>
<td border="2" style="border-style:
dotted">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border dashed gunakan kode:
<table border="1" width="200" style="border-style: dashed">
<tr>
<td style="border-style: dashed">Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border groove gunakan kode:
<table border="1" width="200" style="border-style: groove">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Ridge gunakan kode:
<table border="1" width="200" style="border-style: ridge">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Insert gunakan kode:
<table border="1" width="200" style="border-style: inset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat tabel border Outset gunakan kode:
<table border="1" width="200" style="border-style: outset">
<tr>
<td>Text</td>
</tr>
</table>
hasilnya seperti ini:

Text

---

Membuat Tabel Biasa gunakan kode :
<table border="1"width="200"><td>Text</td></table>
hasilnya seperti:

Text

---

Membuat Tabel berwarna gunakan kode :
<table border="1"width="200"bgcolor="green"><td>Text</td></tabel> hasilnya seperti :

Text

---

Membuat Tabel berwarna tak berbingkai gunakan kode :
<table border="0"width="200"bgcolor="blue"><td>Text</td></tabel> hasilnya seperti:

Text

---

Untuk kode-kode HTML yang lain anda bisa anda cari lewat software-software web designer atau situs-situs penyedia layanan HTML.

**Tabel-tabel diatas,akan terlihat sempurna jika dibuka pada browser IE (Internet Explorer)

Pengertian HTML

Apa itu HTML?

         

HTML merupakan singkatan dari Hyper Text Markup Language, dalam arti umum sebuah web adalah sebuah dokumen HTML, yang mana sebuah HTML itu sendiri merupakan bahasa yang menggunakaan tanda-tanda tertentu (Tag) untuk menyatakan kode-kode yang harus diterjemahkan oleh Browser,agar halaman dapat di tampilkan secara benar.

HTML sendiri,sebenarnya hanya dokument biasa,hanya dokumen ini dapat dilakukan untuk pemformatan text, peletakan object, maupun Hypertext yakni text yang berfungsi ganda sebagai penghubung (Link) antara halaman satu dengan yang lain.
Nah! link inilah yang menjadi ciri sekaligus membentuk suatu www (Jaringan global antar text / halaman)

---

Bagaimana contoh sederhana bentuk sebuah halaman HTML?
Sebagaimana Pengertian Blog ,bahwa sebuah halaman web yang baik secara fisik akan terdiri dari sebuah Header,Body,Sidebar dan Footer.
Untuk membentuk sebuah halaman HTML secara sederhana, kita memanfaatkan Notepad pada komputer anda.
Tapi sebelum itu, pergi ke My Document, pilih Folder Option, lalu pilih View,kosongkan check box pada Hide Extentions for Known Filetypes, ini hanya untuk memperlihatkan File type dari setiap file di komputer anda.
(Kalo haus minum dulu sob)hehe
Setelah itu,buka Notepad dan tuliskan kode di bawah ini :

---

<html><head>
<title>Belajar HTML</title>
</head>
<body>
<p>Saya sedang belajar HTML</p>
</body>
</html>

---

Setelah itu simpan dengan nama "belajar",yang nantinya di komputer anda akan menjadi "belajar.txt",setelah itu,klik kanan file tersebut pilih Rename rubah menjadi "belajar.htm".
Setelah itu,Open file tersebut,dan anda sudah bisa melihat suatu tampilan halaman HTML yang di maksud.
Apa keterangan dari kode-kode di atas?

Kode HTML,dalam setiap kodenya di awali dengan tanda <> dan di akhiri dengan </>
contoh:
<html>merupakan penandaan bahwa halaman HTML di mulai.
</html>merupakan tanda bahwa halaman html ditutup.
<Head>artinya merupakan awal kepala
</Head>artinya merupakan akhir bagian kepala.
<Title>menujukkan judul yang akan keluar pada Bar atas yang ditutup dengan </title>
<body>isi dari halaman tesebut,seperti contoh HTML diatas,isinya berupa kata "Hallo! aku sedang belajar blog di Pelajaran Blog !"yang ditutup dengan akhir isi halaman,yaitu </body>
Sedangkan tanda <p> yaitu pembentukan alinea baru,seperti halnya anda menekan Enter pada Ms Word untuk membentuk kursor baru pada Alinea baru,yang mana diakhiri pula dengan tanda </p>.
Untuk membentuk alinea baru bisa juga menggunakan kode <br> dan diakhiri dengan </br>

Untuk kode-kode pengoptimalan, seperti mempertebal huruf, miring, garis bawah, membuat tabel dan lain-lain silahkan pelajari kode-kode dasar HTML

Cara membuat form/box link exchange/tukar link dengan mudah

Link exchange merupakan budaya bagi para blogger untuk bertukaran link antar blogger yang satu dengan blogger lainnya dan anchor text/link blogger tersebut akan ditampilkan pada blogger lainnya setelah proses bertukar link selesai.
Tidak hanya itu saya bertukar link merupakan cara agar blog kita bersahabat dengan seo. Semakin banyak link teman-teman diblog kita maka akan semakin baik blog kita dimata search engine.

Cara ini sangat mudah dan praktis langsung saja kita ke TKP :

---

<textarea rows="3" cols="17" style="width: 252px; height: 83px; color: Black; background-color: white;" readonly>&lt;a href="http://rizkyguna1.blogspot.com/" target="_blank" title="Cara Membuat Form Link Exchange/Tukar Link."&gt;&lt;img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0PD9A4ZqwKEdhl-HaZeQW6nHEZggruCiILdis4OvYMLjgu_Tg6RhFeHOk2O13Wmw6-hl6EqROOgYkvQC71fSmC_UQH9A310MWXt57BU03u7QybdvnfKCIx9bw5n5hTMfOkLAD-Q1kn3AF/s1600/banner.jpg" border="0" alt="Cara Membuat Form Link Exchange/Tukar Link."&gt;&lt;/a&gt;</textarea>

---

Keterangan:

• ’tulisan yang berwarna merah’ ganti sesuai dengan alamat blog Anda.
• ’tulisan yang berwarna hijau’ gantilah dengan URL Image/banner yang ingin ditampilkan.
• ’tulisan yang berwarna biru’ gantilah dengan Deskripsi Blog anda.

Dari kode diatas,kira-kira hasilnya akan seperti di bawah ini:

---

<a href="http://rizkyguna1.blogspot.com/" target="_blank" title="Cara Membuat Form Link Exchange/Tukar Link"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0PD9A4ZqwKEdhl-HaZeQW6nHEZggruCiILdis4OvYMLjgu_Tg6RhFeHOk2O13Wmw6-hl6EqROOgYkvQC71fSmC_UQH9A310MWXt57BU03u7QybdvnfKCIx9bw5n5hTMfOkLAD-Q1kn3AF/s1600/banner.jpg" border="0" alt="Cara Membuat Form Link Exchange/Tukar Link."></a>



Sekian dulu ya.
Terimakasih sudah menyempatkan untuk membaca.
Oiya lupa, jika ingin bertukar link dengan saya klik disini.