Belajar Sintax HTML Dasar

Posted by : Yukie Fadzillah Senin, 13 April 2015

Hyper Text Markup Language (HTML) 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. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa.

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

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" />
<input type="button" value="HOME" />

Radio Button

: On/Off
Kodenya:
<input type="radio" name="ok" value="" />
<input type="radio" name="ok" value="Example" />

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:

Teks
Teks
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:
TeksA^TeksBTeksC.

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:
TeksA_TeksBTeksC

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).

Semoga Bermanfaat and come back.. :D