Belajar HTML - Tutorial HTML 1

         Belajar HTML gratis, mudah dan menyenangkan di rplcomunity10.blogspot.com aja. Nah kita mulai ya. Belajar HTML merupakan proses pertama yang umumnya dilakukan oleh para web programer. Nah setelah selesai dengan belajar HTML, maka kamu akan memiliki kemampuan untuk membuat halaman web statis. Berikutnya kamu pasti pengen bisa bikin halaman web yang memiliki kemampuan untuk berinteraksi dengan pengunjung secara lebih intens. Waktu itulah kamu perlu mulai belajar PHP. Setelah belajar PHP maka kamu bisa melanjutkan dengan belajar MySQL untuk menambah kemampuan PHP kamu.

Saya bisa dengan singkat menjelaskan sabagai berikut. HTML diperlukan terutama untuk membuat tampilan web, PHP untuk menambah kemampuan interaksi dengan pengunjung dan kemampuan menyimpan data akan disupport oleh MySQL. Lengkap sudah semuanya. Namun tentu saja web programming tidak hanya sebatas itu. Selain belajar HTML, PHP dan MySQL, tentu saja kamu dapat mempelajari juga bahasa script lain yang akan lebih memperindah tampilan web kamu dan mempermudah proses desain web kamu seperti CSS dan Javascript. Kamu juga mungkin akan perlu menambah ketrampilan kamu dalam membuat desain web dangan berbagai aplikasi pembuat web seperti Dreamweaver dan FrontPage serta belajar aplikasi pengolah gambar seperti Fireworks dan Adobe.

Tetapi untuk saat ini kita akan konsentrasi ke materi belajar HTML yang menjadi dasar semua pemrograman web.

Perlu saya sampaikan di sini bahwa meskipun kamu sudah  menguasai berbagai aplikasi yang mempermudah desain web, tetapi walau bagaimanapun pada akhirnya kamu tetap akan memerlukan kemampuan untuk melakukan pemrograman hands on alias manual untuk melakukan berbagai tuning dalam program kamu.

Pengen belajar sambil praktek? 

Siap? OK, kita akan mulai belajar HTML.

Pengenalan HTML

Apa yang dimkasud dengan file HTML?

-    HTML merupakan kependekan dari Hyper Text markup Language

-    Sebuah file HTML merupakan sebuah file teks yang berisi tag-tag markup

-    Tag markup memberitahukan browser bagaimana harus menampilkan sebuah halaman

-    File HTML harus memiliki ekstensi htm atau html

-    File HTML dapat dibuat menggunakan editor teks yang biasa kamu pakai.

Pengen Nyoba Bikin?Mulailah dengan membuka Notepad (di Windows XP bagi yang belum pernah klik Start, Program, Accessories, Notepad).
Ketikkan teks berikut:

<html>

<head>

<title>Judul Halaman</title>

</head>

<body>

Ini halaman pertama saya. <b>Teks ini ditebalkan</b>

</body>

</html>

Simpan dengan nama “halamanku.htm” (jangan lupa tambahkan tanda kutip ganda pada nama filenya. Kalau lupa maka nama filenya akan menggunakan ekstensi default .txt sehingga menjadi halamanku.htm.txt).

Buka Browser kamu (misalnya internet explorer). Kilk File, Open, Browse dan pilih cari file halamanku.htm yang tadi kamu bikin. Klik OK, dan browser akan menampilkan halaman yang tadi kamu buat.


Gampang kan? Atau masih bingung? Ok, kita akan melihat penjelasan dari contoh di atas.
Setiap tag diapit oleh tanda lebih kecil dan lebih besar. Kamu bisa melihat bahwa tag pertama adalah . Tag HTML pada umumnya selalu memiliki pasangan yang memiliki tag sama dengan sedikit tambahan tanda garis miring “/”, dan kamu bisa melihat pasangan tag di akhir script yaitu .

Tag memberitahu browser bahwa inilah awal dari dokumen HTML. Tag pasangannya yaitu menyatakan bahwa inilah akhir dari dokumen HTML.

Teks di antara dan adalah teks informasi header. Informasi header ini tidak ditampilkan pada jendela browser.

Teks di antara <title> adalah judul dokumen kamu. Judul ini akan ditampilkan di caption browser (lihat di bagian paling atas kanan dari browser kamu).</title>

Teks di antara tag adalah teks yang akan ditampilkan pada jendela browser kamu.

Dan terakhir, teks di antara dan akan ditampilkan dalam huruf tebal.

Nah, dengan penjelasan ini kamu mustinya udah mulai manggut-manggut dan merasa, ko ternyata belajar HTML gampang gini yah :). Mudah-mudahan.

Sekarang kita akan lihat mengenai ekstensionnya. Sebagaimana sudah disampaikan di awal, kita bisa membuat file HTML dengan 2 ekstension yaitu .htm dan .html. Nah ekstension .htm ditujukan untuk operating sistem jaman dulu yang hanya mensupport ekstensi 3 huruf. Sedangkan ekstensi .html akan lebih aman digunakan jika OS dan aplikasinya support karena lebih jelas menunjukkan bahwa ini adalah file HTML.

Sebagai catatan, setiap kamu melakukan perubahan pada file HTML kamu, maka kamu harus me refresh browser untuk melihat perubahan tampilannya.

Ok, tutorial belajar HTML sesi perkenalan cukup, kita akan melanjutkan ke level berikutnya tentang elemen HTML.

Check back soon for new tutorial.

Read More

Tutorial Belajar HTML Untuk Pemula

            Pada artikel tentang Related Post sebelumnya, saya telah memberikan tutorial untuk memanipulasi realated post yang terkesan biasa saja. Pada artikel itu juga telah saya singgung bahwa anda minimal harus belajar HTML atau CSS, karena kode tersebut adalah dasar dari pembuatan template blog dan website. Baiklah sebelum melanjutkan ke tahap - tahap Belajar Html untuk pemula, alangkah baiknya anda mengerti apa itu kode Html.

Hypertext Markup Language (HTML) adalah standarisai kode dalam pembangunan website dan menampilkan berbagai informasi di dalam sebuah web browser. Pada dulunya HTML bermula dari SGML (Standart Generalized Markup Language) yang sebelumnya banyak digunakan penerbit dan percetakan.

Versi HTML terakhir pada saat ini adalah HTML 4.01, meskipun lebih cendrung berkembang ke arah XHTML (Extensible Hypertext Markup Language) yang nantinya akan saya bahas di artikel yang lainnya.

Attention!!!

Bagi anda yang masih Newbie atau Pemula usahakan hindari kebiasaan What I See, That's What I Copy (WISTWIC). Maksudnya jangan copy semua code yang saya contohkan kepada anda, tapi cobalah mengetik sendiri dan mulailah untuk menghafalkannya.

Langkah Awal(Pengenalan Kode HTML)

Silahkan buka Notepad, dan cobalah untuk mengetikkan kata - kata di bawah ini :

<i> adalah kode untuk memiringkan sebuah text.

<b> adalah kode untuk menebalkan sebuah text

<u> adalah kode untuk menggaris bawahi sebuah text.

Semua tag - tag atau kode html tersebut haruslah diberi penutup / seperti kode di bawah ini

<i>Hello</i> <b>My name is Kenny</b>, <u>What is your name?</u>

(Ingat diketik jangan Copy Paste). Lalu simpan dengan nama TEST.HTML bukan test.html.text atau test.text.

Cobalah klik 2 kali pada TEST.HTML, maka akan keluar browser dengan tampilan sebagai berikut :

Hampir semua tag html memiliki tag penutup yang harus ditambahkan /, jadi untuk tag penutup maka anda tinggal menambahkan / seperti contoh : <i>, maka tag penutupnya </i>, dan <u>, maka tag penutupnya adalah </u>, ingat hanya menambahkan /.

Standalone Tag

Walau hampir semua tag memiliki tag penutup, akan tetapi ada beberapa tag / kode html yang tidak memiliki tag penutup.Contoh : <hr> yang memberikan baris dan <br> yang memberikan jarak pada baris. Jika anda ingin mengetahuinya silahkan buka kembali file TEST.HTML 

Caranya :

• Klik kanan pada file
• Open with
• Pilih Notepad
• Taruh kode <br> di bawah kode semula
• Kemudian taruh kode <hr> di bawah kode <br&gt.
• Save.

Coba anda buka kembali kode dengan cara yang sama dengan yang di atas, maka akan terlihat perbedaan , seperti jarak antara text dengan baris yang agak jauh, dan adanya garis di bawahnya.

HTML Entity 

Jika anda ingin memberi spasi antar text lebih dari satu , tentunya tidak akan bisa didalam sebuah template blog atau web , walaupun anda menekan spasi berkali - kali tetap akan dihitung satu spasi. Untuk itulah diperlukan kode khusus. Contoh coba tambahkan kode   dan spasi yang banyak pada yang satunya lagi, sehingga

<i>Hello</i> &nbsp&nbsp ,<b>My name is Kenny</b>,              <u>What is your name?</u>

anda perhatikan pasti ada bedanya antara yang memakai  &nbsp dengan yang spasi. yang perlu diingat bahwa kode entity selalu di awali dengan (&) dan diakhiri dengan (;) (tidak termasuk kurung).




Atribut HTML

Atribut adalah tambahan dalam tag - tag HTML, baik yang jenis standalone maupun yang biasa. 

Contoh 1 kode 

<div align="center"> Contoh text </div> 

sebenarnya hanya <div> dan </div>, maka align="center" adalah atribut tambahan. Tampilan 

Contoh text

Contoh 2 kode 

<font face="georgia" size="3" color="red">Contoh....!!!!</font>

Tampilan
Contoh....!!!!
 

Teks & Paragraph

Di dalam html ada yang namanya tag , tag tersebut berguna untuk menentukan ukuran text secara praktis, dan juga dapat membantu search engine untuk menentukan seberapa penting text dari suatu blog / web. Contoh :

<h1>Sebesar Apakah Text Ini?</h1>
<h2>Sebesar Apakah Text Ini?</h2>
<h3>Sebesar Apakah Text Ini?</h3>
<h4>Sebesar Apakah Text Ini?</h4>
<h5>Sebesar Apakah Text Ini?</h5>
<h6>Sebesar Apakah Text Ini?</h6>

Tampilan

Untuk lebih jelasnya, coba kita buat kode seperti ini dan save dengan nama Budi.html :

<p>Halo, nama saya <b>Budi</b> dan
saya senang bermain bola</p>
<p>Tutorial ini merupakan <i>Pelajaran pertama saya dalam HTML</i> dan saya ingin <u>Memodiifikasi </u> teks dalam HTML agar lebih menarik </p>

<h3>Terima kasih </h3>

Tampilan

Langkah Kedua (Struktur HTML)

Apakah anda pusing membaca pengenalan diatas?, yah sejujurnya pasti bagi seorang pemula hal tersebut sangat memusingkan, tetapi hal dasar janganlah dilewatkan. Untuk itu sebaiknya anda mengerti baik - baik apa yang saya sampaikan diatas barulah ke tahap selanjutnya.

Struktur HTML

<html>
<head>
<title>Judul</title>
</head>
<body bgcolor="blue"> <i>TEST TEST 1 2 3</i>,<b> ada orang di sini?</b>
</body>
</html>

Text yang berwarna biru adalah text struktur, sedangkan yang berwarna hitam adalah tambahan. Maka tampilannya seperti di bawah ini

Coba lihat pada kata judul yang saya lingkari dan saya beri tanda panah, hal tersebut terjadi karena saya menambahkan <title>Judul</title> di antara kode <head> dan </head>. Jika anda ingin menggantinya tinggal hapus text judul menjadi judul yang anda inginkan.

Jika anda masih tidak percaya coba anda buat notepad baru dengan nama struktur.html, lalu tes lagi seperti cara - cara sebelumnya.

Perlu diketahui di dalam struktur HTML, semua kode HTML ditulis di dalam tag <body>. Tidak boleh di tulis di dalam tag <head>.

Anda bisa mempraktekkan dengan menulis semua kode HTML yang telah saya ajarkan ke dalam tag <body> tag html anda </body>.

Mengapa hal ini menjadi penting?, karena di dalam mengedit template blog maupun di web, anda akan menggunakan kode - kode html tersebut. Setidaknya anda pelajari konsep - konsep di atas dengan cermat dan teliti, maka saya yakin anda pasti bisa. Nantikan Juga artikel berikutnya yang merupakan lanjutan dari artikel ini.

Walau susah, hal tersebut memang wajar, karena biasanya seseorang mengatakan susah karena baru pertama kali dan tidak terbiasa akan hal baru tersebut. Jika tidak mau susah yah tidur saja atau sekedar membalik - balikan telapak tangan, tentunya hal tersebut lebih mudah bukan? hahaha..

Read More