Kode-kode dasar HTML Dalam HTML seperti pemformatan text berupa tebal,miring,garis bawah,membuat tabel,dll,dapat di lakukan dengan kode-kode.Bagi anda yang belum begitu mengerti HTML,bisa baca disini 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<sub>2</sub></p>hasilnya seperti ini: 42 Membuat Huruf Superscribe / pangkat gunakan kode: <p>4<sup>2</sup></p> hasilnya seperti ini: 42 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 mengulik lewat software-software web designer atau situs-situs penyedia layanan HTML

Dalam latihan kedua ini, kita akan mempelajari beberapa tag yang relatif mudah diingat. Tag-tag ini berfungsi untuk mengubah tipe huruf yaitu menebalkan (bold), membuat tulisan miring (italic) atau memberi garis bawah (underline). Buka lagi program Notepad kemudian tuliskan seperti berikut ini:

<HTML>

<HEAD>

    <TITLE>Tipe-tipe

Teks</TILE>

</HEAD>

<BODY>

Ada tiga macam tipe tulisan yang paling sering digunakan

dalam

penulisan dokumen apa saja. Ketiga tipe tersebut

ialah tulisan tebal, tulisan miring dan tulisan bergaris

bawah. Bisa

pula dua tipe huruf dipadukan misalnya

tulisan tebal dan miring, tulisan tebal dan bergaris bawah

atau tulisan miring

dan bergaris bawah. Bahkan bisa pula

ketiga tipe tulisan tersebut sekaligus bergabung menjadi

satu berupa tulisan

tebal, miring dan bergaris bawah.

</BODY>

</HTML>

Simpanlah file tersebut. Jangan lupa mengikuti langkah-langkah cara menyimpan file HTML yang sudah kita pelajari dalam latihan pertama dahulu. Setelah file tersimpan, bukalah file tersebut dengan program Internet Explorer. Perhatikanlah bahwa semua tulisan dalam dokumen tersebut masih seragam. Kini, kita akan melakukan sedikit perubahan pada beberapa kata dan kalimat yang ada di situ sehingga menjadi seperti ini:

Ada tiga macam tipe tulisan yang paling sering digunakan dalam penulisan dokumen apa saja. Ketiga tipe tersebut ialah tulisan tebal, tulisan miring dan tulisan bergaris bawah. Bisa pula dua tipe huruf dipadukan misalnya tulisan tebal dan miring, tulisan tebal dan bergaris bawah atau tulisan miring dan bergaris bawah. Bahkan bisa pula ketiga tipe tulisan tersebut sekaligus bergabung menjadi satu berupa tulisan tebal, miring dan bergaris bawah.

Bagaimana caranya? Bukalah source code dari dokumen tadi (tekan F5), kemudian tambahkan tag-tag berikut. Tag-tag tersebut adalah :

1. <B> untuk menebalkan (bold) tulisan,
2. <I> untuk memiringkan (italic) tulisan dan
3. <U> untuk menggaris-bawahi (underline) tulisan

Sehingga hasilnya akan seperti ini :

<HTML>

<HEAD>

<TITLE>Tipe-tipe

Teks</TITLE>

</HEAD>

<BODY>

Ada tiga macam tipe tulisan yang paling sering

digunakan dalam

penulisan dokumen apa saja. Ketiga

tipe tersebut ialah tulisan <B>tebal</B>,

tulisan

<I>miring</I> dan tulisan <U>bergaris bawah</U>.

Bisa pula dua tipe huruf dipadukan misalnya

tulisan <B>

<I>tebal dan miring</B></I>, tulisan <B><U>tebal dan

bergaris

bawah</B></U> atau tulisan <I><U>miring dan

bergaris bawah</I></U>. Bahkan bisa pula

ketiga tipe

tulisan tersebut sekaligus bergabung menjadi satu berupa

tulisan <B><I><U>tebal, miring

dan bergaris bawah</B></I></U>.

</BODY>

</HTML>

Setelah anda menambahkan semua tag-tag tersebut, simpan (Save) file source code itu kemudian lakukan Refresh pada dokumen web yang tampak pada program browser anda. Lihatlah hasil perubahannya! Andaikata ada yang tidak beres, coba perhatikan baik-baik penulisan tag-tag anda, mulai dari tag pembuka <HTML> hingga </HTML> jangan sampai ada yang salah tulis meskipun satu karakter. Misalnya: bila tag </TITLE> anda tulis </TILE> maka browser tidak akan menampilkan tulisan apa-apa dalam dokumen anda. Kalau tidak percaya, cobalah menulis source code yang salah seperti itu, simpan (save) kemudian refresh dokumen anda dan lihatlah hasilnya!

Untuk lebih mempermantap keterampilan yang anda dapatkan dari latihan kedua ini, ada baiknya anda mencoba membuat dokumen HTML berikut ini. Buatlah dokumen dengan judul (titel): Pemantapan Tipe-tipe Teks, yang isinya adalah tulisan seperti berikut:

Karena file-file HTML sebenarnya adalah file-file ASCII biasa, maka anda dapat menggunakan editor-editor teks sederhana seperti WordStar (WS), Notepad, MS Write, dan lain-lain. Editor-editor teks tersebut dapat membimbing anda mempelajari kode-kode HTML secara luar dalam. Akan tetapi mungkin anda sedikit frustrasi karena harus mengetik semua kode HTML baris per baris yang dalam perkembangannya akan menjadi sangat rumit. Meski demikian, menggunakan teks editor untuk membuat halaman web adalah cara terbaik untuk benar-benar mengerti tentang struktur file HTML

Bila anda sudah menyimpannya, bukalah dan lihatlah hasilnya dalam program browser. Sudah samakah?

Variasi Font

Tanpa campur tangan kita, dokumen HTML menggunakan font default dari Windows (Sistem Operasi Komputer) atau browser (Internet Explorer), biasanya Times New Roman dengan ukuran 12 point. Kita bisa mengubah jenis, warna dan ukuran font sesuai dengan selera kita menggunakan tag <FONT> diikut dengan atribut-atributnya. Misalnya untuk mengubah jenis font kita gunakan atribut FACE:

<HTML><BODY> Ini adalah font <FONT FACE=”Arial”>Arial</FONT>, ini adalah font <FONT FACE=”Verdana”>Verdana</FONT>, dan ini adalah font <FONT FACE=”Impact”>Impact</FONT> </BODY></HTML>

Bila dilihat dalam browser, akan tampak seperti ini:

Ini adalah font Arial, ini adalah font Verdana, dan ini adalah font Impact

Untuk mengubah ukuran font, gunakan atribut SIZE:

<HTML><BODY> <FONT SIZE=”1″>Font Size 1</FONT>, <FONT SIZE=”2″>Font Size 2</FONT>, <FONT SIZE=”3″>Font Size 3</FONT>, <FONT SIZE=”4″>Font Size 4</FONT>, <FONT SIZE=”5″>Font Size 5</FONT>, <FONT SIZE=”6″>Font Size 6</FONT>, <FONT SIZE=”7″>Font Size 7</FONT> </BODY></HTML>

Bila dilihat dalam browser, akan tampak seperti ini:

Font Size 1, Font Size 2, Font Size 3, Font Size 4, Font Size 5, Font Size 6, Font Size 7

Sedangkan untuk mengubah warna tulisan, menggunakan atribut COLOR:

<HTML><BODY> <FONT COLOR=”blue”>Tulisan warna biru</FONT>, <FONT COLOR=”red”>Tulisan warna merah</FONT>, <FONT COLOR=”yellow”>Tulisan warna kuning</FONT> </BODY></HTML>

Bila dilihat dalam browser, akan tampak seperti ini:

Tulisan warna biru, Tulisan warna merah, Tulisan warna kuning

Dalam satu tag FONT kita bisa menggabungkan lebih dari satu atribut. Perhatikan contoh berikut:

<HTML><BODY> <FONT FACE=”Arial” SIZE=”2″>Font Arial ukuran 2</FONT>, <FONT FACE=”Verdana” COLOR=”red”>Font Verdana warna merah</FONT>, <FONT FACE=”Impact SIZE=”5″ COLOR=”blue”>Font Impact ukuran 5 warna biru</FONT> </BODY></HTML>

Bila dilihat dalam browser, akan tampak seperti ini:

Font Arial ukuran 2, Font Verdana warna merah, Font Impact ukuran 5 warna biru

Untuk mengubah font default untuk satu halaman HTML, digunakan tag <BASEFONT> yang ditempatkan diantara tag <HEAD> dan </HEAD>. Contoh:

<HTML> <HEAD> <BASEFONT FACE=”arial” SIZE=”10″ COLOR=”blue”> </HEAD> <BODY> Font default untuk semua tulisan pada halaman ini adalah font arial dengan ukuran 10 dan warna biru. </BODY></HTML>

Cobalah buat dalam sebuah file HTML kemudian lihat hasilnya dalam browser!

SUBSCRIPT DAN SUPERSCRIPT

Subscript adalah tulisan yang agak kecil dan letaknya agak di bawah sedangkan superscript adalah tulisan yang agak kecil dan letaknya agak di atas. Untuk menulis subscript kita gunakan tag <SUB> sedang untuk menulis superscript kita gunakan tag <SUP>. Inilah contohnya:

<HTML><BODY> Tulisan Normal<SUB>Tulisan Subscript</SUB> <P>Tulisan Normal<SUP>Tulisan Superscript</SUP> </BODY></HTML>

Beginilah hasilnya dalam browser:

Tulisan NormalTulisan Subscript Tulisan NormalTulisan Superscript

Bagusnya, anda berlatih sedikit. Coba buat tulisan berikut:

Rumus kimia Asam Sulfat adalah H2SO4 Luas kolam 150 m2 sedang volume kolam 300 m3

Gampang, kan?