Pengertian HTML dan Contoh HTML

06 March 2013 10:47:00 Dibaca : 466

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. 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 (contoh: myfile.html ) maka itu artinya anda telah membuat file yang berformat HTML.

HTML (Hyper Text Markup Language) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. 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 berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer. HTML juga dapat dikenali oleh aplikasi pembuka email ataupun dari PDA dan program lain yang memiliki kemampuan browser.

HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat teks ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: TAMPIL TEBAL. Tanda digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh teks yang ingin ditebalkan, dan diakhiri dengan tanda untuk menonaktifkan cetak tebal tersebut.

Berikut ini adalah contoh penerapan html :

Judul HTML

----- ISI TEXT DISINI -----

Contoh Penggunaan Tag-tag HTML

HeadingHeading digunakan untuk penulisan huruf besar atau pemberian nama bab. Heading memiliki enam level mulai dari yang terbesar sampai yang terkecil yaitu tag

sampai tag

. Contoh Sebagai berikut :

 

Contoh Heading

 

Ini adalah heading 1

Ini adalah heading 2

Ini adalah heading 3

Ini adalah heading 4

Ini adalah heading 5
Ini adalah heading 6

Posisi heading dapat diletakkan di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag heading yang diinginkan.

- Paragraf

Untuk membuat paragraph dalam web, HTML menyediakan Tag

sebagai tag pembuka dan tag

sebagai tag penutup. Paragraph dapat diletakkan di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag

yang diinginkan Berikut ini contoh pembuatan paragraph.

 

Penggunaan Paragraf

 

Paragraf ini mengandung spasi dan baris tetapi browser mengabaikannya.

 

Sedangkan yang ini memiliki           spasi panjang.

Jumlah baris dalam setiap paragraf tergantung pada ukuran window browser Anda.

 

 

- Line Break

Untuk membuat satu baris baru di halaman web maka HTML menyediakan tag
. Berikut ini contoh pembuatan baris baru atau line break:

Penggunaan Line Break

Ini adalah baris pertama, dan
Ini Baris kedua
Kemudian ini baris ke Tiga

- Horisontal Dan Komentar Tersembunyi

Tag


digunakan untuk membuat garis horisontal menggunakan sepanjang yang nilai lebar yang diberikan pada tag tersebut. Tag


dapat berada di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag


yang di inginkan. Tag


dapat ditentukan tinggi garisnya dengan atribut SIZE dan dapat dihilangkan bayangan garisnya dengan penggunaan atribut NOSHADE.

Berikut ini contoh membuat garis horizontal tanpa bayangan, tinggi = 2 dengan

lebar separuh atau 50% pada layar web browser.

Penggunaan Horisontal Line


Tag hr dengan properties


<!— Ini adalah komentar yang tidak akan ditampilkan di layar browser –>

- Pemformatan Teks Dan Preformat

Agar penulisan kode HTML web ditampilkan di web browser seperti dengan format penulisan apa adanya maka digunakan tag

 kemudian ditutup dengan tag 

. Berikut ini contoh penggunaan tag

Penggunaan Format Text

Teks ini tebal

Teks ini juga tebal

Teks ini hurufnya besar

Teks ini miring

Teks ini hurufnya kecil

Teks ini berisi subscript

Teks ini berisi superscript

Tag pre cocok untuk menampilkan kode komputer di bawah ini:

 

for i = 1 to 10

print i

next i

- List unordered, ordered list, Definition List, Daftar Menu

Unordered List digunakan untuk menandai setiap item dari daftar/list menggunakan bullet berupa tiga simbol yaitu : Disk (Cakram), Circle (Linkaran), Square (Kotak)

Penulisan unordered list diawali tag

    serta diikuti
  • dan ditutup dengan tag

.

Ordered List digunakan untuk menandai setiap item dari daftar/list menggunakan penomoran.

Ordered List diawali tag

    serta diikuti tag
  1. dan ditutup dengan tag
  2. dan tag

.

Definition List untuk memberi keterangan pada setiap item dari daftar/list. Definition List diawali tag

serta diikuti tag
dan ditutup dengan tag
dan tag

.

Daftar menu digunakan untuk membuat daftar menu dengan menggunakan tag

dengan diikuti tag

Sebentuk list unordered:

 

  • Kopi

 

 

  • Teh

 

 

  • Susu

 

Sebentuk list ordered:

 

  • Kopi

 

 

  • Teh

 

 

  • Susu

 

Sebentuk Definition List :

Sistem

Kumpulan beberapa usnsur dan saling terkait

Informasi

Sekumpulan data yang mempunyai makna

Manajemen

Proses untuk mencapai tujuan

Untuk property dari list order dan unorder, silahkan anda kembangkan sendiri.

- Membuat Link

Agar halaman web dapat mengakses ke halaman satu dengan yang lainnya atau mengakses website yang lain, HTML menyediakan pasangan tag di sertai atribut HREF dan diakhiri dan link juga bisa anda tambah dengan title untuk memberikan informasi tentang link yang dibuat, title ini akan muncul saat link disorot. Link bisa anda buat dengan 2 macam, yaitu link text dan link gambar. Berikut contoh penggunaan link :

Contoh Link dengan Text dan Gambar

Link Gambar


Kunjungi Web Gianto

Link Text


Atau Klik ini Untuk mengunjungi web gianto

Klik Gianto

- Membuat table

Berikut adalah tag yang dipakai untuk membuat table pada halaman web yang nantinya akan kita buat, table ini biasanya dipakai untuk desain website yang akan kita buat.

Satu baris satu kolom dengan border normal:

100

Satu baris dan tiga kolom dengan border tebal:

100200300

Dua baris dan tiga kolom dengan border sangat tebal:

100200300

400500600

Tabel ini tidak memiliki border:

100200

300400

- Tag DIV

Tag

mempunyai perbedaan dengan tag

yaitu tag

tidak membuat paragraph baru hanya melakukan pergantian baris terhadap kalimat. Tag
dapat membuat dokumen berada di posisi left (kiri), right (kanan), center (tengah) bahkan justify (rata kiri dan rata kanan) terhadap layar web browser dengan menggunakan atribut ALIGN pada tag
yang di inginkan. Dengan ditambahkan atribut CSS tag div ini biasanya juga digunakan untuk desain layout website yang akan dibuat.

Berikut ini contoh penggunaan tag

:

Contoh Penggunaan Tag div

Web Programming

Selain HTML dan CSS untuk mahir mendesain web maka harus mempunyai keahlian dalam desain dan kepekaan terhadap kombinasi warna yang akan ditampilkan dalam website yang akan dibangun.
Untuk menguasai pemrograman website harus memahami logika dan pemrograman serta proses logika matematika.

Jika ingin mahir memprogram website maka yang diperlukan adalah ketekunan dan pantang menyerah untuk selalu explorasi.

Tulisan ini akan berada di kanan

Sumber:

http://49012035siti.wordpress.com/2012/10/14/pengertian-html-dan-contohnya/

http://gobalbabali.wordpress.com/tugas-sekolah/pengertian-html-http-url-ftp-domain-hosting-dan-www/

http://www.giantowidodo.com/2012/09/contoh-pengunaan-tag-tag-html.html

 

Kategori

  • Masih Kosong

Blogroll

  • Masih Kosong