Pengantar HTML beserta Contohnya
Pengertian HTML beserta Contohnya - Apabila kita ingin mempelajari Pemrograman HTML maka hal-hal yang harus kita ketahui pertama kali adalah Pengertian HTML beserta Contohnya, supaya nanti kita lebih cepat memahami ketika hendak mempelajari lebih jauh Pemrograman HTML tersebut.
oleh karena itu kali ini Febbiez akan sedikit berbagi pengetahuan tentang Pengertian HTML Beserta Contohnya sesuai dengan apa yang Febbiez ketahui.
Jika Anda adalah seorang pemula dan ingin mempelajari Pemrograman HTML silakan Anda lanjutkan membaca, tapi jika Anda sudah mengetahui apa itu HTML silakan abaikan postingan ini dan lanjut ke tahap pembelajaran berikutnya.
PENGERTIAN HTML
HTML singkatan dari Hyper Text Markup Language adalah simbol-simbol atau tag-tag yang dituliskan dalam sebuah file yang bertujuan untuk menampilkan halaman pada suatu web browser.
pada dasarnya tag-tag HTML selalu diawali dengan tag pembuka dan diakhiri dengan tag penutup dimana x adalah tag HTML seperti b, i, u dan sebagainya. Namun ada juga tag yang tidak diakhiri dengan tanda penutup seperti tag
, dan lain-lain.
pada umumnya sebuah halaman website akan diapit oleh tag ……..
File-file HTML selalu berakhiran dengan ekstensi .htm atau .html. Jadi jika anda mengetik sebuah naskah dan menyimpannya dengan ekstensi .html maka anda membuat file yang berformat HTML.
suatu contoh jika Anda mengetik sebuah document dengan software apapun kemudian anda menyimpannya dengan extensi .html (misal: fileku.html ) maka itu artinya anda telah membuat file yang berformat HTML.
satu hal yang perlu di ingat bahwa dalam menuliskan sebuah tag HTML kita harus teliti, karena jika ada sedikit saja kesalahan maka tag HTML kita tidak akan di tampilkan di web browser, atau mungkin di tampilkan tetapi tidak sesuai dengan apa yang kita harapkan.
CONTOH TAG HTML DAN CARA PENGGUNAANYA
berikut ini adalah contoh tag HTML dan cara penggunaannya.
sebagai contoh pertama yang akan Febbiez pergunakan adalah tag b.
tag b fungsinya untuk menebalkan suatu text.
contoh penggunaan tag i.
ini adalah contoh text tebal
maka hasilnya akan menjadi seperti berikut.
ini adalah contoh text tebal
Yang ke dua adalah tag i.
tag i berfungsi untuk membuat text menjadi miring.
contoh penggunaan.
ini adalah contoh text miring
maka hasilnya akan menjadi seperti berikut.
ini adalah conttoh text miring
yang ketiga adalah tag u.
tag u berfungsi untuk memberikan garis bawah pada suatu text, pada umumnya tag u ini secara default digunakan pada suatu link di halaman website.
contoh penggunaan tag u.
ini adalah contoh text yang bergaris bawah
maka hasilnya akan menjadi seperti berikut.
ini adalah contoh text yang bergaris bawah
Anda juga dapat menggabungkan ketiga tag tersebut kedalam sebuah text, sebagai contoh sederhana adalah sebagai berikut.
ini adalah contoh text dari penggabungan ketiga tag
dan hasilnya seperti ini.
ini adalah contoh text dari penggabungan ketiga tag
Febbiez rasa dengan penjelasan mengenai Pengertian HTML Beserta Contohnya di atas Anda sudah dapat memahami apa itu HTML dan bagaimana cara kerjanya, namun apa yang Febbiez jelaskan di atas hanyalah sebagian kecil contoh dari sekian banyak tag HTML, dan ada pula beberapa tag yang mempunyai atribut didalamnya yang dapat kita sisipkan jika kita memerlukannya.
Seperti apa cara menggunakan atribut tersebut?
yang jelas tidak kita bahas sekarang, karena Febbiez sudah capek ngetik.
jadi selebihnya akan kita bahas pada kesempatan berikutnya.
Contoh :
<FONT SIZE=4 FACE="Verdana, Arial, Helvetica" COLOR="#FF0000">Contoh teks yang berwarna merah</FONT>
Hasilnya akan terlihat seperti :
Contoh teks yang berwarna merah
Contoh lainnya :
<FONT SIZE=2 FACE="Times_New_Roman" COLOR="#0066CC">
Base Font: <BASEFONT> Digunakan untuk mendefinisikan "default text". Attribut sama dengan attribut FONT. Tag FONT akan mengoverwrite setting pada BASEFONT.
Contoh :
<BASEFONT SIZE=2 FACE="Arial,Helvetica" COLOR="#FF0000">
Selain tag dan atribut di atas, masih terdapat lagi tag-tag yang berhubungan dengan pengaturan teks, yaitu :
Perhatian : Semua tag di bawah ini membutuhkan tap penutup.
<B> Bold text
<I> Italic text
<U> Underscore
<TT> Typewriter
<S> Strikeout - draws a line through the text
<PRE> Preformatted Text <DFN> Definition
<BLINK> Text berkedip (lebih baik jangan digunakan)
<STRONG> Strong
<ADDRESS>
Italic
<CITE> Digunakan untuk quoting text
<CODE> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<SAMP> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<KBD> Monospaced font (digunakan bila Anda ingin meletakkan (memperlihatkan) kode HTML pada dokumen HTML Anda)
<BIG> Ukuran teks akan lebih besar satu ukuran
<SMALL> Ukuran teks akan lebih kecil satu ukuran
<SUP> Membuat tekssuperscript
<SUB> membuat tekssub script
<ABBREV> Abbreviations
<ACRONYM> Untuk akronim
<PERSON> Digunakan untuk indexing
<Q> Membuat short inline quotation
<VAR> Membuat variable name, selalu dalam italics.
Lists
Terdapat tiga tipe list yang dapat digunakan, yaitu :
Unordered Lists: <UL> Untuk membuat daftar item dengan tanda bullet. List entries didefinisikan dengan tag <LI>.
Contoh :
<UL>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</UL>
Hasil dari kode di atas adalah:
Item nomer 1Item nomer 2Item nomer 3
Dengan atribut TYPE Anda dapat mendefinisikan bentuk disc, circle atau square bullet point.
Contoh :
<UL COMPACT TYPE=square> …
Ordered Lists: <OL> Juga digunakan untuk membuat daftar item, dengan tiap item dapat menggunakan angka arab atau romawi. List entries juga didefinisikan dengan <LI> tag.
Contoh :
<OL TYPE=I>
<LI> Item nomer 1
<LI> Item nomer 2
<LI> Item nomer 3
</OL>
Hasil dari kode di atas adalah :
Item nomer 1Item nomer 2Item nomer 3
Untuk TYPE Anda dapat juga menggunakan :
1- Default numbers, 1, 2, 3, etc.
A- Huruf besar. A, B, C, etc.
a- Huruf kecil. a, b, c, etc.
I- Romawi huruf besar. I, II, III, etc.
i- Romawi huruf kecil , i, ii, iii, etc.
Definition Lists: <DL>
Contoh :
<DL>
<DT> Item pertama.
<DD> Penjelasan tentang item pertama.
<DT> Item kedua.
<DD> Penjelasan tentang item kedua
</DL>
Hasil dari kode di atas adalah :
Item pertama.
Penjelasan tentang item pertama.
Item kedua.
Penjelasan tentang item kedua
Images
Images :
Digunakan untuk menampilkan image atau animasi gif pada halaman web Anda.
Atribut : alt, align=(center, left, right), hspave, vspace, border, width & height
Contoh :
<IMG SRC="logo.gif" alt="Ini adalah logo halaman pembuka" width=200 height=100>
<IMG SRC="logo.gif" hspace=10 vspace=5 align=right border=2>
Links :
Digunakan untuk membuat link ke halaman lain. Tulisan yang terletak antara <A> dan </A> akan terdapat garis bawah.
Contoh :
<A HREF="halaman2.html">Klik di sini</A> Untuk membuat link ke halaman lain.
<A HREF="ronaldsatria@gmail.com">Klik di sini</A> Untuk membuat link pada alamat e-mail.
<A HREF="#aplikasi">Klik di sini</A> Untuk membuat link ke bagian lain pada halaman yang sama.
<A HREF="halamanlain.html#aplikasi">Klik di sini</A> Untuk membuat link kebagian lain pada halaman yang berbeda.
<A HREF="halaman2.html"><IMG SRC="gambar.gif"></A> Untuk membuat link dengan menggunakan gambar.
Sumber : http://www.febbiez.com/2012/05/pengertian-html-beserta-contohnya.html