HTML (Hypertext Markup Language) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Pada HTML dipergunakan hypertext link atau hubungan antara teks dan dokumen lain. Dengan demikian pembaca dokumen bisa melompat dari satu dokumen ke dokumen yang lain dengan mudah.
Struktur:
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </body> </html>
Tags:
| <!– –> | Memberi komentar atau keterangan. Sintak ini tidak akan terlihat di browser |
| <a href> | Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut |
| <a name> | Membuat nama bagian yang didefinisikan pada link pada halaman yang sama |
| <applet> | Sebagai awal dari Java applets |
| <area> | Mendefinisikan daerah yang dapat diklik (link) pada image map |
| <b> | Membuat teks tebal |
| <basefont> | Membuat atribut teks default seperti jenis, ukuran dan warna font |
| <bgsound> | Memberi (suara latar) background sound pada halaman web |
| <big> | Memperbesar ukuran teks sebesar satu point dari defaultnya |
| <blink> | Membuat teks berkedip |
| <body> | Tag awal untuk melakukan berbagai pengaturan terhadap text, warna link & visited link |
| <br> | Pindah baris |
| <caption> | Membuat caption pada tabel |
| <center> | Untuk perataan tengah terhadap teks atau gambar |
| <comment> | Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser |
| <dd> | Indents teks |
| <div> | Represents different sections of text. |
| <embed> | Menambahkan sound or file avi ke halaman web |
| <fn> | Seperti tag <a name> |
| <font> | Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks |
| <form> | Mendefinisikan input form |
| <frame> | Mendefinisikan frame |
| <frameset> | Mendefinisikan attribut halaman yang akan menggunakan frame |
| <h1>, <h2>, <h3><h4>, <h5>, <h6> | Ukuran font |
| <head> | Mendefinisikan head document. |
| <hr> | Membuat garis horizontal |
| <html> | Bararti dokumen html |
| <i> | Membuat teks miring |
| <img> | Image, imagemap atau an animation |
| <input> | Mendefinisikan input field pada form |
| <li> | Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> ) |
| <map> | Mendefinisikan client-side map |
| <marquee> | Membuat scrolling teks (teks berjalan) – hanya pada MS IE |
| <nobr> | Mencegah ganti baris pada teks atau images |
| <noframes> | Jika browser user tidak mendukung frame |
| <ol> | Mendefinisikan awal dan akhir list |
| <p> | Ganti paragraf |
| <pre> | Membuat teks dengan ukuran huruf yg sama |
| <script> | Mendefinisikan awal script |
| <table> | Membuat tabel |
| <td> | Kolom pada tabel |
| <title> | Mendefinisikan title |
| <tr> | Baris pada tabel |
| <u> | Membuat teks bergaris bawah |
| <Blockquote> | Untuk menulis kutipan teks |
| <pre> | Untuk menamplkan teks yang sama |
Sintak HTML dengan penulisan rumus matematika, kimia dan fisika:
| <sup> | Superscript, yaitu untuk menuliskan karakter kecil di atas text normal. |
Contoh:
32
3<sup>2</sup>
| <sub> | Subscript, yaitu untuk menulis karakter kecil agak menjorok ke bawah dari text normal. |
Contoh:
H2O
H<sub>2</sub>O.
_ _
Panah ganda dalam reaksi kesetimbangan
C + O2 → CO2
HTML Code:
<div class="eq-c"> C + O<sub>2</sub> <span class="dblarrow">→</span> CO<sub>2</sub> </div>
CSS Code:
.dblarrow {
font-size: 125%;
top: -0.4ex;
margin: 0 2px;
}
.dblarrow:after {
content:"2190";
position: absolute;
left: 0;
top: 0.5ex;
}
Menampilkan bentuk pecahan (fraction)
c(NaOH) =
n(NaOH)
V(NaOH)
V(NaOH)
= 1.2345 mol dm-3
HTML Code:
<div class="eq-c"> <i>c</i>(NaOH) = <div class="fraction"> <span class="fup"><i>n</i>(NaOH)</span> <span class="bar">/</span> <span class="fdn"><i>V</i>(NaOH)</span> </div> = 1.2345 mol dm<sup>-3</sup> </div>
CSS Code:
.fraction {
display: inline-block;
vertical-align: middle;
margin: 0 0.2em 0.4ex;
text-align: center;
}
.fraction > span {
display: block;
padding-top: 0.15em;
}
.fraction span.fdn {border-top: thin solid black;}
.fraction span.bar {display: none;}
Menulis bilangan oksidasi diatas unsur-unsurnya dalam persamaan
O: Te+4O-22→←H+16Te+6O-26 +2e–
R: Cr+62O-272- +6e–→←2Cr+33+
HTML Code:
<div class="eq-c"> <b>O: </b> <span class="sy-r">Te<span class="oxbr">+4</span></span><span class="sy">O<span class="oxbr">-2</span></span><sub>2</sub> <span class="rarrow">→<span class="larrow">←</span></span> <span class="sy">H<span class="oxbr">+1</span></span><sub>6</sub><span class="sy-r">Te<span class="oxbr">+6</span></span><span class="sy">O<span class="oxbr">-2</span></span><sub>6</sub> + <span class="sy-g">2e<sup>-</sup></span> </div> <div class="eq-c"> <b>R: </b> <span class="sy-b">Cr<span class="oxbr">+6</span></span><sub>2</sub><span class="sy">O<span class="oxbr">-2</span></span><sub>7</sub><sup>2-</sup> + <span class="sy-g">6e<sup>-</sup></span> <span class="rarrow">→<span class="larrow">←</span></span> 2<span class="sy-b">Cr<span class="oxbr">+3</span></span><sup>3+</sup> </div>
CSS Code:
.sy,
.sy-r,
.sy-g,
.sy-b {
position: relative;
text-align: center;
}
.sy-r {color: #f00;}
.sy-g {color: #4f8c4f;}
.sy-b {color: #00f;}
.oxbr,
.oncapital,
.onsmall {
position: absolute;
top: -1em;
left: 0px;
width: 100%;
font-size: 70%;
text-align: center;
}
.onsmall {
top: -0.7em;
}
