Belajar Web Bersama Dat-s

Monday, 16 December 2013

Elements HTML

Hari ini, kita akan semakin teliti lagi mempelajari HTML, dan sesuai judul, kita akan mempelajari apa itu Elements HTML, seperti yang sudah kita pelajari bersama mengenai tag HTML dalam postingan postingan sebelumnya,yang disebut dengan elements HTML adalah segalanya dari tag awal sampai tag akhir, contohnya seperti yang terlihat di bawah ini :

Elements HTML

Tag Awal *	Element Kontent	Tag Akhir *
<p>	Ini adalah paragraf	</p>
<a href="default.htm">	Ini adalah link	</a>
<br> or <br />

* Tag awal sering disebut tag pembuka. Tag akhir sering disebut tag penutup.

Elements HTML Sintaks

Seperti yang saya katakan di atas, segala yang berada dalam tag awal dan tag akhir di sebut elements HTML, seperti yang w3schools.com ajarkan seperti dibawah ini :

Sebuah elemen HTML dimulai dengan tag awal tag / membuka
Sebuah elemen HTML diakhiri dengan tag akhir tag / menutup
Isi elemen adalah segalanya antara tag awal dan tag akhir
Beberapa elemen HTML memiliki konten kosong
Elemen kosong ditutup pada tag awal
Sebagian besar elemen HTML dapat memiliki atribut

Tip: Sobat akan belajar tentang atribut dalam postingan berikutnya dari Belajar Web Bersama Dat-s.

Nested HTML Elements

Ditambahkan juga, Sebagian besar elemen HTML dapat bersarang (dapat berisi elemen HTML lainnya). Apa yang disebut dengan HTML bersarang? HTML bersarang adalah elements HTML yang berada di dalam elements HTML lainnya. seperti terlihat pada contoh di bawah ini, dalam sebuah dokumen HTML terdiri dari tiga elements HTML.

Dokumen HTML terdiri dari elemen HTML bersarang.

<!DOCTYPE html>
<html>

<body>

<p>Ini adalah paragraf.</p>

</body>

</html>

Di atas adalah contoh Dokumen HTML dengan elemen HTML bersarang, kenapa dibilang bersarang, karena tag <html> mendefinisikan seluruh dokumen HTML disebut sebuah elemen HTML karena dia memiliki tag awal <html> dan tag akhir </html> sebagai tag penutup, di dalam tag <html> memiliki isi elemen <body> yang didefinisikan untuk menampilkan tubuh dokumen HTML, dan, dia juga merupakan suatu elemen HTML karena memiliki tag awal <body> dan tag akhir </body> dengan isi elemen HTML <p>, sedangkan tag <p> adalah tag untuk mendefinisikan suatu paragraf dia juga adalah suatu element HTML karena memiliki tag awal <p> dan tag akhir </p> dengan isi elemen "Ini adalah paragraf", untuk menampilkannya maka dia harus disisipkan ke dalam elemen HTML <body>, sehingga di dalam dokumen HTML tersebut sudah memiliki 3 elemen HTML. yakni <html>, <body> dan <p>, maka dari itu dia disebut element HTML bersarang.

Jangan Melupakan Tag Akhir

Untuk menciptakan suatu elemen HTML, jangan melupakan tag akhir, seperti pada contoh di bawah ini :

<p>Ini adalah paragraf.

Browser tidak dapat mendefinisikan suatu elemen HTML jika tidak memiliki tag akhir, jadi jangan sampai melupakan tag akhir dari sebuah elemen HTML.

Tapi ada juga suatu tag HTML yang disebut elemen HTML tapi tanpa isi, seperti tag <br>, <img> dan lain-lain, kita akan mempelajarinya lagi di postingan selanjutnya.

Elemen HTML Kosong

Elemen HTML tanpa kontent disebut elemen HTML Kosong, seperti <br> dan <img>.

Tip: Dalam XHTML, semua elemen harus ditutup. Menambahkan slash di dalam tag awal, seperti <br />, adalah cara yang tepat untuk menutup elemen kosong di XHTML (dan XML).

HTML Tip : Gunakanlah huruf kecil untuk menulis Tag HTML

Tag HTML tidak case sensitif: <P> berarti sama dengan <p>. Banyak situs web menggunakan tag HTML huruf besar. Namun, W3Schools.com menyarankan untuk menggunakan tag huruf kecil karena World Wide Web Consortium (W3C) merekomendasikan huruf kecil dalam HTML 4, dan menuntut tag huruf kecil dalam XHTML.

Nah, demikian sobat pelajaran kita hari ini, pada postingan selanjutnya, kita akan bersam sama mempelajari dengan teli mengenai Atribut HTML, dan akhirnya, semoga postingan kali ini dapat bermanfaat.

Sukses Selalu ^_^

Sunday, 15 December 2013

Pelajaran HTML Dasar

Hari ini kita akan belajar bersama dan mengenal lebih dalam mengenai tag HTML, mungkin perasaan sobat saat mulai memahami apa itu HTML, sobat akan merasa penasaran sama seperti saya, sobat sudah ingin sekali mengetahui apa saja tag tag HTML itu. Saran saya, sebagai weber pemula kita harus bersabar, karena walaupun sobat sudah mengetahui bahwa HTML itu mudah, sobat harus lebih tekun dan fokus serta teliti mempelajarinya.

sebagai pelajaran dasar, seperti w3schools.com ajarkan kepada saya, kita akan memulai mempelajari tag tag dasar dari HTML, seperti <h1>, <p>, <a>, <img> dan masih banyak lagi.

Jangan khawatir jika contoh menggunakan tag HTML belum sobat pelajari.

Sobat akan belajar tentang tag HTML dalam postingan berikutnya.

Mengapa kita harus bersabar, karena ketika kita mempelajarinya satu per satu maka secara otomatis segala macam tag HTML akan tertanam dalam otak kita dan tidak mudah dilupakan. salah satu efek dari belajar instan adalah kita mudah melupakannya. berbeda dengan mempelajarinya secara teliti. Dan tidak usah panjang lebar lagi, ini dia tag HTML yang harus diketahui oleh seorang weber pemula.

Seperti pada postingan sebelumnya tentang Pelajaran HTML Dasar, seperti cara penulisan serta cara meletakan atau struktur HTML, sekarang kita akan kembali mempelajari tentang tag HTML :

HTML Heading

Mengenai HTML Heading, kebanyakan seorang weber pemula menggunakannya untuk memperbesar huruf dan mengecilkan huruf, itu salah. Dari ke enam tag HTML Heading mulai dari <h1> s/d <h6>, itu adalah tag untuk mendeklarasikan sebuah Heading, diperuntukan untuk sebuah judul, seperti judul blog ini, karena Belajar Web Bersama Dat-s adalah sebuah judul blog atau judul teratas maka dia menggunakan tag <h1>, sedangkan judul postingan menggunakan tag <h2>, jangan sobat menggunakan tag ini untuk memperbesar dan mengecilkan suatu kalimat atau huruf, karena, sekali lagi itu salah.

HTML hanyalah bahasa formating atau bahasa markup, untuk mengatur ukuran besar huruf atau warna huruf, itu tugas dari CSS yang nantinya akan kita pelajari bersama pada postingan postingan selanjutnya

Nah di bawah ini adalah contoh penulisan tag HTML Heading :

<!DOCTYPE html>
<html>

<head>

<title>Pengenalan HTML Heading</title>

</head>

<body>

<h1>Ini adalah HTML Heading h1</h1>
<h2>Ini adalah HTML Heading h2</h2>
<h3>Ini adalah HTML Heading h3</h3>
<h4>Ini adalah HTML Heading h4</h4>
<h5>Ini adalah HTML Heading h5</h5>
<h6>Ini adalah HTML Heading h6</h6>

</body>

</html>

Coba sobat, buka Notpad seperti yang sudah kita pelajari bersama pada postingan sebelumnya dan ketikan seperti terlihat pada contoh di atas, setelah itu save dan jalankan file html tersebut.

Maka tampilannya akan terlihat seperti di bawah ini :

Nah demikian contoh penulisan tag HTML Heading dan Tampilannya, selanjutnya, setelah kita mempelajari tag HTML untuk judul, sekarang kita akan mempelajari tentang tag HTML paragraf, dan seperti yang sudah kita pelajari bersama pada pelajaran HTML Dasar sebelumnya, ini dia tag HTML paragraf :

HTML Paragraf

Setiap paragraf didefinisikan dengan tag HTML <p> seperti pada contoh di bawah ini :

<!DOCTYPE html>
<html>

<head>

<title>Contoh Paragraf</title>

</head>

<body>

<h1>Ini adalah Contoh Paragraf HTML</h1>
<p>Ini adalah paragraf.</p>
<p>Ini juga adalah paragraf lainnya.</p>

</body>

</html>

Setelah sobat mengetik tag di atas, saat dijalankan filenya, maka hasilnya akan terlihat seperti pada gambar di bawah ini :

Selanjutnya, setelah kita mempelajari HTML heading dan HTML paragraf, maka selanjutnya kita akan mempelajari cara membuat link dengan tag HTML, atau dalam kata lain kita akan mempelajari tentang tag HTML Link.

Pernahkah sobat melihat suatu text di halaman web yang ketika diklik akan meload suatu halaman atau akan membuka suatu halaman baru? nama dari text tersebut adalah link, di bawah ini adalah cara membuat link dengan tag HTML link.

HTML Link

Untuk membuat suatu link, kita akan menggunakan tag <a> seperti pada contoh di bawah ini :

<a href="http://belajar-web-bersama-dats.blogspot.com">Cara Asik Belajar Web</a>

Catatan : Alamat link ditentukan dalam atribut href.

(Kita akan belajar tentang atribut dalam postingan postingan selanjutnya dari pelajaran HTML).

Selanjutnya kita akan belajar mengenai cara menampilkan gambar pada dokumen HTML, langsung saja pada contoh di bawah ini :

HTML Image

Untuk menampilkan gambar pada dokumen HTML, tag yang kita butuhkan adalah tag <img>, coba ketikan tag sesuai contoh di bawah ini :

Catatan: Nama file dan ukuran gambar disediakan sebagai atribut.

Sobat pasti bertanya kenapa tag <img> tidak menggunakan tag penutup, tetap sabar dan tekun berlatih karena itu akan kita bahas pada postingan postingan selanjutnya.

Oke sobat, demikian dulu pelajaran kali ini mengenai Pelajaran Dasar HTML, semoga bermanfaat.

Sukses Selalu ^_^

Saturday, 14 December 2013

Macam Macam Editor HTML

Hari ini, saya mengenal cukup banyak editor HTML dari w3schools.com, dan sama seperti saya w3schools.com tidak menyarankan kita untuk menggunakan editor HTML yang ada, karena kita adalah pemula, supaya kita cepat mengerti tentang ada itu HTML, w3schools.com menyarankan kita untuk menggunakan Notepad sebagai editor HTML untuk pemula.

Macam Macam Editor HTML

Di bawah ini, ada beberapa editor yang saya ketahui dari w3schools.com antara lain :

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor
Sublim text
Notepad ++

Namun agar kita dapat mengenal lebih dalam tentang tag HTML, sebagai pembelajaran, untuk weber pemula, kita sebaiknya menggunakan Notepad, karena kita tidak perlu mendownload dan menginstalnya, Notepade sudah ada pada aplikasi bawaan dari Windows dan sebagainya.

Cara menjalankan notepade seperti yang sudah kita pelajari pada postingan awal di Belajar Web Bersama Dat-s, seperti ini cara menjalankan aplikasi Notepade :

Cara Menjalankan Aplikasi Notepade :

Untuk memulai menjalankan aplikasi Notepade sebagai editor HTML, langkah awal yang kita lakukan adalah :

Klik Start
All Programs
Accessories
Notepad

Maka hasilnya akan terlihat seperti ini :

Untuk menciptakan sebuah dokument HTML, ketikan tag HTML ke dalam Notepad tersebut, seperti pada contoh di bawah ini, seperti yang sudah kita pelajari sebelumnya :

Ketika selesai mengetikan tag HTML, selanjutnya untuk membuat dokumen menjadi seutuhnya dokumen HTML, langkah selanjutnya menyimpan file tersebut dengan type file .html, sehingga dokumen tersebut menjadi seutuhnya dokumen HTML.

Cara Menyimpan File Notepad Menjadi File HTML

Cara ini juga sudah pernah dat-s ajarkan pada Pelajaran HTML yang pertama, hanya sedikit mengingatkan kembali, dan ini dia caranya :

Klik file
Setelah muncul menu, klik save
Setelah muncul tampilan explorer, pilih tempat untuk menyimpan file tersebut, disarankan Sobat membuat folder khusus untuk file ini, karena ini akan menjadi awal pembelajaran Sobat.
Pada save as type, pilih All Files (*.*), dan pada File name tuliskan "pengenalan-html.html" tanpa tanda kutip
klik save

Seperti terlihat pada gambar contoh di bawah ini :

Bila sobat menyimpan file HTML, sobat dapat menggunakan baik htm. Atau ekstensi file. Html. Tidak ada perbedaan, itu sepenuhnya terserah sobat.

Simpan file dalam folder yang mudah diingat, seperti Pelajaran HTML.

Nah sobat, demikian Macam Macam Editor HTML dan Cara Menggunakan Notepad, semoga bermanfaat, kalau ada yang kurang dimengerti harap berikan komentarnya ya.

Sukses Selalu ^_^

pada dasarnya, cara menggunakan editor HTML adalah sama, hanya saja ada hal lain yang harus kita pelajari.