Belajar | HTML Element

HTML Element

Ketika anda membuka sebuah halaman web dan anda melihat semua yang ada di hadapan anda, mulai dari sebuah paragraf, banner dan link-link navigasi... itulah elemen-elemen dari sebuah halaman web.
Sebuah elemen terdiri dari tiga buah bagian penting :

• Tag pembuka
• Isi
• Tag penutup

Berikut adalah sebuah elemen paragraf HTML yang lengkap :

<p>isi elemen</p>

Satu halaman sebuah web bisa mengandung ratusan hingga ribuan elemen HTML.

Beberapa contoh elemen-elemen HTML yang lain :

<html></html>

<body></body>

<h1></h1>

---

Nested HTML

Nested HTML adalah sebuah elemen yang berada di dalam elemen HTML lainnya.

<body><h1>hallo</h1></body>

---

Dokumen HTML

<html>

<title>Judulku</title>

<body>

<p>Paragrafku</p>

</body>

</html>

Pada contoh di atas terdapat empat elemen HTML

Elemen <p> :

• <p> merupakan paragraf elemen
• Elemen ini dibuka dengan <p> dan di tutup dengan </p>
• Isi dari elemen ini adalah 'Paragrafku'

Elemen <body> :

• <body> merupakan elemen isi atau badan dari sebuah dokumen HTML
• Elemen ini dibuka dengan <body> dan di tutup dengan </body>
• Elemen ini memiliki sebuah nested elemen yaitu elemen <p> beserta isinya
  
  

Elemen <title> :

• <title> merupakan elemen yang mendefinisikan judul dari sebuah dokumen HTML
• Elemen ini dibuka dengan <title> dan di tutup dengan </title>
• Isi dari elemen ini adalah 'Judulku'

Elemen <html> :

• <html> merupakan elemen yang mendefiniskan seluruh bagian dari sebuah dokumen HTML
• Elemen ini dibuka dengan <html> dan di tutup dengan </html>
• Elemen ini memiliki tiga nested elemen lainnya, yaitu :<title>,<body> dan <p>

---

Selalu ingat agar menutup setiap elemen dengan tag penutup

<p>Paragraf 1
<p>Paragraf 2

Contoh di atas mungkin bisa berjalan di banyak browser karena penutup dari elemen dianggap sebagai opsional, tetapi sebaiknya hal ini jangan anda biasakan sebab banyak elemen-elemen HTML yang bisa mengakibatkan error bila tidak terdapat tag penutup di dalamnya.

---

Case sensitive

HTML tag tidaklah case sensitive, jadi tidak akan bermasalah meskipun anda menuliskannya dengan huruf  besar maupun kecil. <html> -> <HTML>. 

Akan tetapi kami sarankan agar anda menggunakan lowercase / huruf kecil sebab World Wide Web Consorsium (W3C) menyarankan agar menggunakan lowercase untuk setiap elemen HTML 4 dan mengharuskan menggunakannya pada XML









source

Belajar | HTML Instalasi

Berikut ini adalah beberapa hal yang anda perlukan untuk mencoba HTML sendiri di komputer anda :

• Teks Editor, mis : notepad.
• Browser, mis : Internet Explorer, FireFox, Opera, Google Chrome, dsb.

Langkah-langkah 

1. Buka notepad (Windows) 

2. Misalkan kita akan membuat sebuah halaman HTML dengan kode sebagai berikut :

<html>

<head>

<title>Judul Websiteku</title>

</head>

<body>

Isi dari websiteku

</body>

</html>

3. Copy dan paste kode di atas ke notepad

4. Kemudian simpan dan ganti *.txt dengan coba.html seperti gambar berikut :

5. Buka file yang sudah tersimpan tersebut

6. Selamat anda telah membuat sebuah halaman web pertama anda :)

source

Belajar | Menulis Special Character Di Dokumen HTML

Alhamdulillah, Masih ada waktu buat nulis artikel lagi nih. Tapi mohon maaf sebesar-besarnya karena saya tidak menanggapi komentar masuk. Bukan merasa paling sombong maupun lainnya, tapi memang saya ga sempet buat nanggepin satu satu komentar masuk. Okelah, Langsung aja ke tEKapE nih. Tulisan sebelumnyakan membahas tentang tag <br /> dan tag <p>, Nah sekarang kita coba menulis Special Character Dalam Dokumen HTML.

Special Character itu apa ?

Pada artikel sebelumnya yakni Membuat Baris Baru & Paragraf, Kita sudah tau bahwa browser tidak mengenal pembuatan baris dengan tombol Enter. Disamping itu, browser juga tidak mengenal pembuatan spasi lebih dari satu spasi dengan menekan tombol Spasi ataupun tombol Tab. Nah, bagaimana caranya membuat lebih dari satu spasi dalam dokumen HTML? Pembuatan spasi dalam kode-kode HTML diganti tulisan &nbsp; seperti pada contoh di bawah ini :

<html>

<head>

<title>Penulisan Spasi Dalam Dokumen HTML</title>

</head>

<body>

Ini Satu Spasi ....<br />

Ini&nbsp;&nbsp;&nbsp; Tiga &nbsp;&nbsp;&nbsp;Spasi<br />

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Lima &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Spasi<br />

</body>

</html>

Simpan dan lihat hasilnya. Coba perhatikan Spasi dalam tulisan tersebut ! Apakah hasilnya sama dengan halaman yang saya buat ? Oia, Diantara banyaknya Special Character, Coba deh perhatikan dan buat sendiri dokumen HTML dengan menyisipkan Special Character Di bawah ini untuk Sekedar latihan Ringan.

&       &    

>       >

<       &lt;

"       "

±       ±

©       ©

®       ®

 

 

 

 

 

 

 

 

 

source

Belajar | Membuat Baris Baru dan Paragraf

Sekarang kita akan mempelajari bagaimana cara membuat baris dam paragraf. Biasanya untuk membuat baris baru, kita lakukan dengan menekan tombol enter. Bagaimana dengan dokumen HTML ? Cobalah membuat tulisan berikut pada Notepad.

<html>

<head>

<title>Penggunaan Enter Dalam Dokumen HTML</title>

</head>

<body>

Baris Pertama

Baris Kedua

Baris Ketiga

</body>

</html>

Lalu Simpan & Lihat Hasilnya. Maka akan tampak seperti Halaman Membuat Baris Dengan Enter yang saya buat.

Tulisan akan tampak tanpa adanya paragraf. Kesimpulannya, penekanan tombol Enter tidak menghasilkan baris dalam tampilan browser. Demikianlah sifat penulisan dokumen HTML. Lantas, bagaimana caranya membuat baris? Gunakanlah tag <br/ >. Tag ini tidak mempunyai tag penutup. Nah, Cara untuk menerapkannya dengan mengedit Dokumen HTML yang di buat tadi. Anda bisa menyisipkan tag <br/ > untuk membuat baris baru. Contohnya bisa di lihat di bawah ini :

<html>

<head>

<title>Penggunaan BR Dalam Dokumen HTML</title>

</head>

<body>

Baris Pertama<br />

Baris Kedua<br />

Baris Ketiga<br />

</body>

</html>

Untuk bahan latihan silahkan anda buat sendiri kreasi masing masing tentang penggunaan tag BR. Contohnya seperti kode html yang saya buat di bawah ini :

<html>

<head>

<title>Penggunaan BR Dalam Dokumen HTML</title>

</head>

<body>

Baris pertama<BR/ ><BR/ >

Baris kedua kosong, dan ini baris ketiga<BR/ ><BR/ ><BR/ >

Baris keempat dan kelima kosong, dan ini baris keenam

</body>

</html>

Di sini kita lihat bahwa tag <BR> yang ditulis dua kali akan menghasilkan dua baris, demikian seterusnya. Setelah pandai membuat baris, sekarang kita akan belajar membuat paragraf. Perhatikanlah contoh tulisan di bawah ini :

<html>

<head>

<title>Penggunaan Tag P Dalam Dokumen HTML</title>

</head>

<body>

<p>Paragraf pertama</p>

<p>Paragraf kedua </p>

<p>Paragraf ketiga</p>

</body>

</html>

Simpan dan Lihat Hasilnya. Anda juga dapat melihat hasilnya di halaman Penggunaan Tag p Untuk Membuat Paragraf. Tentunya anda dapat memulai latihan sendiri dengan menggabungkan pelajaran sebelumnya dengan sekarang ini. Ini agar kita tidak melupakan pelajaran yang sudah di pelajari.

source

Belajar | Tag Header

Kembali berjumpa kawan, Ini mungkin tulisan penutup dalam menghadapi Akhir Bulan Romadhon. Lha maksudanya mau libur nulis nih ? Tenang aja, saya hanya ingin meluangkan banyak waktu buat beribadah. Jadi saya tetep nulis meski ga tiap hari atau dengan waktu yang tidak dapat di tentukan.

Mengenal Tag Header

Kini saatnya kita mengenal tag Heading / Header / Kepala Tulisan. Apa itu Header ? Header adalah huruf-huruf berukuran khusus yang digunakan untuk menuliskan judul bab atau sub bab. Tingkatan Header itu ada 6 dan dimulai dari H1 hingga H6. H1 adalah header yang paling besar dan H6 adalah header yang paling kecil.

Oke, untuk cara membuatnya silahkan ketik kode html di bawah ini :

<html>

<head>

<title>Membuat Heading Kepala Tulisan</title>

</head>

<body bgcolor="#fcf" text="#000">

<h1>Header Tingkat 1</h1>

<h2>Header Tingkat 2</h2>

<h3>Header Tingkat 3</h3>

<h4>Header Tingkat 4</h4>

<h5>Header Tingkat 5</h5>

<h6>Header Tingkat 6</h6>

</body>

</html>

Setelah itu simpan dan lihat hasilnya. Anda juga dapat melihat hasil yang sudah saya buat di Halaman Membuat Heading Kepala Tulisan. Cukup mudah bukan ? Ini baru tag Header, Masih banyak tag HTML lainnya di antaranya adalah Tag <br /> untuk Membuat Baris Baru & <p> Untuk Membuat Paragraf yang akan di bahas pada artikel selanjutnya.







source

Belajar | Menghias Tulisan dengan Tag HTML

Pada Latihan kali ini, kita akan mempelajari beberapa tag yang mudah diingat. Tag-tag ini berfungsi untuk mengubah tipe huruf yaitu :

1. Membuat Text Menjadi Tebal {Bold}
2. Membuat Text Menjadi Miring {Italic}
3. Membuat Text Di Garis Bawahi {Underline}
4. Membuat Text Di Garis Tengah {Strikethrough}
5. Membuat Text Berada Di Atas {^Superscript}
6. Membuat Text Berada Di Bawah {_Subscript}

Cara Penggunaannya

Pertama-tama hafalkan dulu fungsi dan cara penggunaannya. Di Bawah ini saya buat lagi daftar cara penggunaannya.

1. Membuat Text Menjadi Tebal {<b> atau <strong>}
2. Membuat Text Menjadi Miring {<i> atau <em>}
3. Membuat Text Di Garis Bawahi {<u> atau <ins>}
4. Membuat Text Di Garis Tengah {<del> atau <strike>}
5. Membuat Text Berada Di Atas {<sup>}
6. Membuat Text Berada Di Bawah {<sub>}

Hal yang harus kita ingat dari catatan yang sudah saya publish sebelumnya adalah “Kita harus menutup tag HTML dan jika menggunakan XHTML penyusunan awal dan akhir tag harus berurutan”. Contoh sederhananya gini, Misalkan kita mau membuat huruf tebal maka kita harus menulis tag pembuka yakni <strong> dan harus di akhiri dengan tag penutupnya dengan hanya menambahkan slash seperti </strong>. Penyusunan tag harus Rapih jika kita menggunakan XHTML, Contohnya adalah :

Penulisan Yang Salah

<strong>Sepertinya <ins>Belajar HTML</strong> itu Mudah Sekali</ins>

Penulisan Yang Benar

<strong>Sepertinya <ins>Belajar HTML</ins> itu Mudah Sekali</strong>

Contoh Penerapan Dalam Artikel

Oke, Buka Aplikasi Notepad, gEdit, dan semacamnya. Lalu coba ketik secara manual jangan kopi paste kode di bawah ini :

<html>

<head>

<title>Ini Adalah Tulisan Standard</title>

</head>

<body bgcolor="#fcf" text="#000">

Banyak Tag HTML untuk merubah suatu jenis tulisan

dan di antaranya ialah tulisan tebal, tulisan miring,

tulisan bergaris bawah, tulisan bergaris tengah,

tulisan Berada Di Atasdan tulisan Berada Di Atas.

Kita Bisa Membuat 2 tipe huruf dipadukan misalnya tulisan tebal

dan miring, tulisan tebal dan bergaris bawah atau tulisan miring

dan bergaris bawah. Bahkan Kita Juga Bisa Menggabungkan sekaligus

menjadi tulisan bergaris tengah, tulisan tebal, miring dan bergaris bawah.

</body>

</html>

Kemudian simpan tulisan tadi dengan nama tulisan-biasa.html lalu buka dan perhatikanlah tulidan tersebut. Tulisan tersebut masih dalam kondisi yang sama alias tidak ada huruf tebal, miring, dan lain-lain. Disini kita akan coba merubah tulisan tersebut agar di garis bawahi, di tebalkan, dan lain sebagainya.
Buka Notepad Lagi, Lalu Perhatikan Dan Ketikkan Kode yang ada di bawah ini :

<html>

<head>

<title>Ini Adalah Tulisan Modifikasi</title>

</head>

<body bgcolor="#fcf" text="#000">

Banyak Tag <sup>HTML</sup> untuk merubah suatu jenis tulisan dan

di antaranya ialah <strong>tulisan tebal</strong>,

<em>tulisan miring</em>, <ins>tulisan bergaris bawah</ins>,

<del>tulisan bergaris tengah</del>, <sup>tulisan Berada Di Atas</sup>

dan <sub>tulisan Berada Di Atas</sub>.

Kita Bisa Membuat 2 tipe huruf dipadukan misalnya

<strong><em>tulisan tebal dan miring</em></strong>,

<ins><strong>tulisan tebal dan

bergaris bawah</strong></ins> atau

<em><ins>tulisan miring dan bergaris bawah</ins></em>.

Bahkan Kita Juga Bisa Menggabungkan sekaligus

menjadi tulisan <strong><em><del><ins>bergaris tengah,

tulisan tebal, miring dan bergaris bawah</ins></del></em></strong>.

</body>

</html>

Simpan dan Lihatlah Perbedaannya. Anda juga dapat melihat perbedaannya di Halaman Tulisan Standard Dan Halaman Tulisan Modifikasi. Coba anda perhatikan tulisan Output Browsernya dan lihat juga Source Codenya Dengan CTRL + U. Usahakan untuk menggunakan Editor Notepad dan jangan memakai Editor Seperti Macromedia Dreamweaver. Karena jika anda menggunakan Editor Notepad dan menuliskannya secara manual, itu akan membuat anda lebih cepat mengerti tentang Tag HTML.

source

Belajar | Tag Body

Selanjutnya kita bertahap sedikit demi sedikit menganal tag <body>. Apakah tag <body> fungsinya sekedar penanda tubuh atau isi dari Dokumen Website ? Ngga, tag BODY ini bisa kita sisipkan bermacam-macam atribut yang akan merubah tampilan halaman web secara keseluruhan. Pada kesempatan ini kita mengambil contoh bagaimana mengubah warna latar belakang dan warna tulisan dari halaman web dengan penambahan atribut ke dalam tag <body>. Perhatikan kode di bawah :

<html>

<head>

<title>Mengenal Tag Body</title>

</head>

<strong><body>

Ini akan tampak di dalam browser anda !!!

</body></strong>

</html>

 

Di atas merupakan contoh tag body di terapkan dan hasilnya bisa anda lihat di halaman mengenal tag body. Di situ tertera text “Ini akan tampak di dalam browser anda !!!”, itu menandakan klo apa yang kita tulis dalam tag <body> akan tertera / tampak di browser anda. Lain halnya dengan tag <head>, penulisan di antara tag <head> tidak akan tampak dalam browser seperti apa yang sudah saya bahas sebelumnya di halaman Pengenalan Tentang Tag head dan title.

Bagaimana kita mengkreasi tag body salah satunya adalah dengan mengganti warna background dalam halaman yang kita buat. Lihat kode yang saya tulis di bawah ini :

<html>

<head>

<title>Tag Body Berlatar Belakang Merah</title>

</head>

<strong><body bgcolor="red" text="black">

Ini akan tampak di dalam browser anda !!!

</body></strong>

</html>

 

Coba simpan dan lihat hasilnya di browser anda ! Atau anda bisa lihat di Halaman Tag Body Berlatar Belakang Merah. Anda juga dapat mengganti warna latar belakangnya dengan cara mengganti kata red dalam bgcolor="red" dengan warna yang anda inginkan. Warna Text juga dapat anda ganti warnanya dengan cara mengganti kata black dalam text="black" dengan warna lainnya.

Namun yang harus anda ketahui, bahwa kode warna dalam html dapat di tulis dengan : 1. anda dapat menulis dengan nama warna tapi dalam bahasa inggris {Jangan sampe nulis dengan bahasa indonesia seperti Putih, Hitam, dan Lain-Lain}. 2. Anda bisa menuliskan kode warna dengan format heksa #rrggbb {Misalnya Warna Pink di tulis dengan #ffccff atau hanya dengan #fcf}. Penulisan #000000 adalah angka Nol bukan huruf O.

Sekian pembahasan tentang Pengenalan Tag Body, Semoga Bisa Berlanjut Lebih Jauh Lagi. Namun Jika merasa lama menunggu Update Artikel blog ini, Silahkan kunjungi saja W3schools Dot Kom. Anda juga dapat menggunakan fasilitas Translate di Situs tersebut jika anda belum bener bener mengerti bahasa inggris.







source