Skip to main content

Perkenalan HTML

Elemen - elemen HTML

Dokumen HTML terdiri dari File Text yang dibuat dengan berbagai elemen (unsur/dasar) HTML.

Elemen-elemen HTML didefenisikan dengan menggunakan berbagai Tag


Tag-tag HTML



  • Tag HTML digunakan untuk memberikan tanda pada elemen HTML

  • Tag HTML diapit oleh tanda dengan dua buah karakter < and >

  • Diantara dua karakter yang diapit disebut sebagai “angle brackets”

  • Biasanya Tag HTML terdiri dari sepasang tanda seperti <b> dan </b>

  • Tag yang pertama dari pasangan tersebut adalah “start tag”, dan yang kedua adalah “end tag”.

  • Tulisan (text) diantara start dan end tags adalah “element content”.

  • Tag HTML tidak mempermasalahkan huruf besar atau kecil <b> artinya sama dengan <B>


Elemen- elemen HTML


Contoh Membuat Halaman HTML :






<html>
<head>
<title>Judul page</title>
</head>
<body>
Tulis isi halaman html di dalam tag body.
<b>Tulisan ini menggunakan bold</b>
</body>
</html>

Ini contoh elemen HTML :






<b>Tulisan ini menggunakan bold</b>

Elemen HTML dimulai dengan sebuah start tag: <b>

Content atau Isi dari elemen HTML adalah: Tulisan ini menggunakan bold

Elemen HTML diakhiri dengan sebuah end tag: </b>

Kegunaan dari tag <b> adalah untuk mendefenisikan sebuah elemen HTML supaya mendisplaykannya sebagai tulisan tebal (bold).

Ini juga sebuah elemen HTML:






<body>
Tulis isi halaman html di dalam tag body.
<b>Tulisan ini menggunakan bold</b>
</body>

Elemen HTML dimulai dengan sebuah start tag: <body> dan diakhiri dengan sebuah end tag: </body>

Kegunaan dari tag <body> adalah untuk mendefenisikan sebuah elemen HTML bahwa dianya (tubuhnya) mengandung dokumen HTML.


Mengapa kita menggunakan tag dengan huruf kecil ?


Diatas kita menyebutkan Tag HTML tidak mempermasalahkan huruf besar atau kecil <b> artinya sama dengan <B>.

Bila Anda mengamati Web, Anda akan memberikan catatan bahwa kebanyakan contoh menggunakan tag dengan huruf besar. Kita selalu menggunakan huruf kecil , mengapa?

Bila kita mempersiapkan diri untuk generasi HTML yang berikutnya, maka kita harus membiasakan diri dengan menggunakan tag dengan huruf kecil. World Wide Web Consortium (W3C) merekomendasikan huruf kecil untuk HTML4 dan juga untuk XHTML (generasi berikutnya dari HTML)


Atribut-atribut (lambang) Tag


Tag dapat memiliki atribut. Atribut dapat memberikan informasi tambahan tentang elemen HTML pada page Anda.

Tag ini mendefenisikan elemen body dari page HTML Anda: <body>. Dengan menambahkan sebuah atribut bgcolor, Anda dapat memberitahukan Browser, bahwa warna latar belakang (background color) dari page Anda akan diubah menjadi merah seperti : <body bgcolor="red">.

Tag ini mendefenisikan sebuah tabel HTML : <table>. Dengan menambahkan sebuah atribut border(batas), Anda dapat memberitahukan Browser, bahwa tabel dibuat tanpa tanda: <table border=”0”>


Atribut selalu dibuat dalam bentuk pasangan seperti ini : name=”value”.

Atribut selalu ditambahkan pada bagian start tag dalam sebuah elemen HTML.


Bentuk tanda kutip “red” atau ‘red’ ?


Nilai atribut selalu diapit oleh dua tanda kutip. Biasanya digunakan tanda kutip ganda ( “ ) tetapi yang single ( ‘ ) pun dapat digunakan.


Pada beberapa kondisi tertentu (janggal), seperti bila nilainya sendiri memiliki tanda kutip, biasanya kita gunakan tanda kutip tunggal, seperti contoh dibawah ini :

Name=’Zaky “beragama” Islam’.


Sampai disini dulu yah besok kita sambung dengan judul "Dasar-Dasar Tag HTML".... Selamat Mencoba

Penting: Untuk penulisan kade HTML menggunakan Notepad dan simpan dengan nama "namafile.html"

Comments

Post a Comment

Silahkan ketik kritik dan saran sahabat untuk saya di sini.

Popular posts from this blog

Kumpulan Cartoon Anak Muslim cdr

Salam Kopi Sahabat... Dalam beberapa bulan ini saya di sibukkan dengan pekerjan mendesain mulai dari cober tabloid, kalender 2015 dan yang terahir adalah desain spanduk untuk RA/TK. Kalo untuk desain cover tabloid ga masalah karena banyak rujukan untuk inspirasi saya mendesain. Tetapi, untuk desain spanduk dan baliho RA/TK ini yang sulit. Karena, yang minta ingin ada gambar cartoonnya :).
41 comments
Read more

Google Translite

Apa manfaat google translite...? Google translite berguna untuk menterjemahkan sebuah kata bahkan kalimat dari berbagai bahasa dan bukan hanya itu. Google translite juga dapat menterjemahkan, sebuah halaman Blog atau Website. Dengan adanya fasilitas Google translite di sebuah blog atau website kita, para pengunjung bisa dengan bebas menterjemahkan website atau blog kita dengan bahasa yang ia fahami. Lalu bagaimana cara memasang Google translite...? apa harus daftar dulu ke google...? caranya sangat mudah kita tidak harus mendaftar dulu ke google untuk menaruh fasilitas tersebut. kitaa hanya tinggal menyisipkan script di salah satu bagian dari website atau blog kita. lalu scriptnya seperti apa...? Sabar kawan di bawah ini akan saya berikan script untuk memasang google translite di web atau blog. silahkan kopi paste (kopas) script di bawah ini:  <script src="http://www.gmodules.com/ig/ifr?url=http://www.google.com/ig/modules/translatemypage.xml&up_source_language=id&w...
9 comments
Read more

Form Pendaftaran Online

Assalamu'alaikum, Wr. Wb Bismillahirrohmanirrohim. Apa kabar semua...? mudah-mudahan kita menjadi orang yang semakin kratif. Karena, kemarin saat berbincang-bincang ringan dengan teman membicarakan masalah harta. Yang lebih banyak dan mudah mendapatkan harta atau kekayaan adalah orang-orang yang penuh inspiratif dan kreatif. Tentunya, kita mendapatkan kreatif itu dengan ilmu. Jadi, jangan pernah bosan untuk belajar dan menggali sesuatu yang baru kita pahami sedikit. Sebagai mana Rasul (Nabi Muhammad SAW) bersabda : "Belajarlah dari tiang ayunan sampai ke liang lahat". Wah jadi banyak ceramahnya. Maaf ya bukan maksud untuk menggurui. Ok, langsung saya jabarkan tentang apa yang akan kita pelajari bersama pada kesempatan kali ini. Kali ini kita akan membahas tentang bagaimana membuat form pendaftaran member atau anggota seperti website-website interaktif yang banyak kita kenal. Untuk membuat form pendaftaran ini kita membuat table databasenya terlebih dahulu silahkan lih...
21 comments
Read more