Showing posts with label Pelajaran HTML. Show all posts

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.

Friday 13 December 2013

Macam Macam Versi HTML

Hari ini, kita akan melanjutkan apa yang sudah kita pelajari bersama sebelumnya, karena pada postingan sebelumnya saya mengatakan kita akan mempelajari tentang DOCTYPE, dari kata ini salah satu tag yang bertuliskan seperti <!DOCTYPE html>. Seperti yang sudah saya dan sobat pelajari dari w3schools.com, itu adalah tag untuk mendeklarasikan bahwa dokumen web tersebut menggunakan HTML 5, pasti sobat bertanya-tanya kalo ada HTML 5, pasti ada HTML 4, 3, 2, dan seterusnya dihitung mundur, memang benar HTML 5 adalah jenis dokumen web yang terbaru, dan karena seperti sobat, saya juga penasaran, maka saya ingin sekali mengetahui berbagai macam versi HTML.

Namun sebelumnya, kita harus mengetahui sejarah dari HTML terlebih dahulu, dan dibawah ini, sudah dat-s kutip dari salah satu blog, mengenai sejarah HTML dan perkembangannya, hal itu dat-s lakukan agar sobat sekalian tidak mengalami kesulitan, dan, ini dia sejarahnya.

SEJARAH HTML

Konsep HTML diciptakan pertama kali oleh IBM pada tahun 1980 pada saat tercetus ide untuk meletakkan elemen-elemen yang menandai bagian suatu dokumen seperti judul, alamat dan isi dokumen. Lalu, pada akhirnya elemen-elemen itu menjadi suatu program untuk melakukan pemformatan dokumen secara otomatis.

Bahasa pemprograman untuk melakukan tugas tersebut disebut markup language, atau lebih lengkapnya IBM menamai program tersebut sebagai Generalized Markup Language (GML).
Konsep ini pada tahun 1986 disetujui oleh ISO (International Standard Organization) sebagai standar bagi pembuatan dokumen-dokumen dengan keluarnya ISO 8879. ISO menamai GML ini menjadi SGML (Standard Generalized Markup Language).

SGML ke HTML

HTML – yang juga menggunakan teknologi markup language – dulu merupakan salah satu bagian dari SGML ini. Seorang peneliti yang bernama Tim Berners-Lee dari CERN – yang kini menjadi direktur W3C (World Wide Web Consortium) mengemukakan suatu ide tentang pembuatan suatu skrip bahasa pemprograman dandokumen yang bisa diakses oleh seluruh komputer tanpa melihat jenis platform-nya apakah Windows, Unix, Linux dan sebagainya. Semenjak itu HTML lebih populer daripada SGML.

PERKEMBANGAN HTML

Sebelum suatu HTML disahkan sebagai suatu dokumen HTML standar, ia harus disetujui dulu oleh W3C untuk dievaluasi secara ketat.
Setiap terjadi perkembangan suatu versi HTML, maka mau tak mau browser pun harus memperbaiki diri agar bisa mendukung kode-kode HTML yang baru tersebut. Sebab jika tidak, browser tak akan bisa menampilkan HTML tersebut.

Dari sejarah awal mulai diciptakannya HTML, hingga Perkembangannya, di bawah sini, dat-s juga sudah membuatkan tabel yang berisi tentang Perkembangan HTML, dan, sejak perkembangan HTML, HTML bukan lagi bahasan pemrograman, melainkan bahasa markup.

HTML adalah bahasa markup

Versi-Versi HTML

Versi	Tahun
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	2000
XHTML 1.0	1993
HTML5	2012
XHTML5	2013

Dari table di atas, pasti sobat seperti saya, akan bertanya-tanya, gimana sih penulisan tag untuk mendeklarasikan sebuah dokumen web HTML dari versi-versi HTML yang ada pada tabel di atas. Dan biar sobat lebih dipermudah lagi. Ini dia tag untuk mendeklarasikan sebuah dokument HTML yang saya pelajari dari w3schools.com.

DEKLARASI DOCTYPE UMUM

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict
DTD ini berisi semua elemen HTML dan atribut, tapi TIDAK TERMASUK presentasional (seperti font). Framesets tidak diperbolehkan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional
DTD ini berisi semua elemen HTML dan atribut, TERMASUK elemen presentasional (seperti font). Framesets tidak diperbolehkan.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset
DTD ini sama dengan HTML 4.01 Transitional, namun memungkinkan penggunaan Frameset.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML 1.0 Strict
DTD ini berisi semua elemen HTML dan atribut, tapi TIDAK TERMASUK presentasional (seperti font). Framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional
DTD ini berisi semua elemen HTML dan atribut, TERMASUK elemen presentasional (seperti font). Framesets tidak diperbolehkan. Markup juga harus ditulis sebagai well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset
DTD ini sama dengan XHTML 1.0 Transitional, namun memungkinkan penggunaan Frameset.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1
DTD ini sama dengan XHTML 1.0 Strict, tetapi memungkinkan Anda untuk menambahkan modul (misalnya untuk memberikan dukungan ruby untuk bahasa Asia Timur).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Nah sobat, dari yang sudah kita lihat dan pelajari bersama ini, semoga dapat bermanfaat ya, karena semakin kita mengenal HTML dari dasarnya, maka kita akan semakin memahami apa sebenarnya HTML itu.

Dan seperti yang sudah kita pelajari sebelumnya mengenai cara browser menrayap dokument HTML kita, maka kita harus memilih DOCTYPE yang tepat. Sekian dari saya sekali lagi semoga dapat bermanfaat, jika ada kekurangan harap berikan komentarnya, agar kita dapat belajar bersama, mempelajari dan memahami apa itu HTML yang sesungguhnya.

Sekarang hampir semua browser mendukung HTML 5

Thursday 12 December 2013

Mengenal Lebih Dalam Tentang Tag HTML

Hari ini kita kembali akan mempelajari atau memperdalam lagi pengetahuan kita tentang tag HTML, karena sebelumnya kita sudah mengenal Apa Itu HTML? maka sekarang tinggal kita perdalam lagi pengetahuan kita tentang tag HTML.

Seperti yang sudah kita pelajari sebelumnya secara bersama-sama, melalui w3schools.com yakni :

HTML adalah singkatan dari Hyper Text Markup Language
HTML adalah bahasa markup
sebuah bahasa markup adalah seperangkap markup tags
tags menggambarkan isi dokument
Dokument HTML berisi HTML tags dan plain text
Dokument HTML Juga disebut halaman web

Merasa belum puas tentang apa itu tag HTML, saya kembali mengunjungi w3schools.com untuk mempelajari kembali bagaiman cara menempatkan tag HTML, dan apa saja tag-tag HTML itu.

Di bawah ini, ada contoh kode HTML, untuk memperjelas dan menambah pengetahuan kita tentang tag HTML maka akan saya jelaskan kembali fungsi dari tag HTML yang ada pada contoh di bawah ini :

<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

Agar sobat memahami betul mengenai tag HTML, coba sobat kembali buka aplikasi notepad sobat untuk kembali mengetik kode HTML yang terdapat dalam kota contoh di atas, kemudian menyimpannya dengan nama "pelajaran1.html" tanpa tanda kutip, dengan cara seperti yang sudah saya jelaskan pada postingan sebelumnya tentang Apa Itu HTML?.

Jika sudah, maka langkah selanjutnya, coba sobat jalankan file yang sudah dibuat tadi, dengan cara mengklik dua kali pada file "pelajaran1.html". Maka, pada browser tampilannya akan menjadi seperti di bawah ini :

My First Heading

My first paragraph.

Nah, dari contoh di atas, saya mempelajari ini dari w3schools.com :

Deklarasi DOCTYPE mendefinisikan tipe dokumen
Teks antara <html> dan </ html> menjelaskan halaman web
Teks antara <body> dan </ body> adalah isi halaman yang terlihat
Teks antara <h1> dan </ h1> ditampilkan sebagai judul
Teks antara <p> dan </ p> ditampilkan sebagai sebuah paragraf

<!DOCTYPE html> adalah definisi untuk tipe dokumen HTML5

Dan, kesimpulannya, setiap tag HTML dan element HTML akan hadir berpasangan, seperti :

<tagname>Konten</tagname>

Nah, w3schools.com menjelaskan keseluruhan tentang bagaimana cara yang benar menempatkan tag HTML dan element HTML, di bawah ini ada struktur halaman HTML yang saya kutip dari w3schools.com, dan sobat akan lebih memahami cara yang benar menempatkan tag HTML.

Struktur Halaman HTML

Di bawah ini adalah bentuk dari struktur HTML, setiap kontent akan berada di dalam tag HTML :

<html>

<body>

<h1>Ini Heading</h1>

<p>Ini adalah sebuah paragraf.</p>

<p>Ini adalah paragraf lain.</p>

</body>

</html>

Dari struktur tag HTML di atas, sobat akan mengetahui mana penulisan tag yang benar dan mana yang salah, seperti contoh di bawah ini :

Ini adalah struktur HTML yang salah

<b><i>Ini Salah</b></i>

Ini adalah strukur HTML yang benar

<b><i>Ini Benar</i></b>

Nah sobat, dari apa yang sudah kita pelajari bersama-sama, sobat pasti masih bertanya-tanya mengenai DOCTYPE, kenapa dia tidak memiliki pasangan? Nah, untuk DOCTYPE, akan kita lanjut mempelajarinya pada postingan selanjutnya. Demikian dulu postingan kali ini, jika ada yang kurang dimengerti silahkan berikan komentarnya.

Sukses Selalu ^_^

Wednesday 11 December 2013

Apa Itu HTML?

Hari ini saya mulai belajar mengenai cara membuat sebuah website dari situs w3schools.com, dan sebagai awal, saya memilih pelajaran pertama yang disarankan w3schools.com untuk seorang weber pemula, yakni, Pelajaran HTML.

Sebagai seorang weber pemula, kita harus tahu dulu apa itu HTML, sehingga kita akan lebih dipermudah dalam mempelajari cara pembuatan sebuah website.

Menurut w3schools.com dengan HTML, Sobat dapat membuat website Sobat sendiri, selain itu menurut w3schools.com juga, belajar HTML itu mudah, Sobat akan menikmatinya. Lantas, Apa itu HTML?

Apa itu HTML?

Menurut w3schools.com HTML adalah bahasa untuk mendeskripsikan halaman web.

HTML adalah singkatan dari Hyper Text Markup Language
HTML adalah bahasa markup
sebuah bahasa markup adalah seperangkap markup tags
tags menggambarkan isi dokument
Dokument HTML berisi HTML tags dan plain text
Dokument HTML Juga disebut halaman web

Lantas, bagaimana cara menggunakan HTML? banyak yang bilang bahwa HTML adalah bahasa pemrograman, tapi itu salah, HTML adalah bahasa markup, jika Sobat tidak mengerti apa itu bahasa markup coba Sobat googling mengenai Apa Itu Bahasa Markup,

Jika Sobat sudah mengerti mengenai apa itu bahasa markup, maka menurut saya, belajar HTML Sobat akan semakin dipermudah, dan bagi yang belum mengerti, akan saya jelaskan apa itu bahasa marup.

Contoh Dokument Web :

Coba sobat buka aplikasi notepad yang ada di komputer Sobat, kemudian, di dalam notepad tersebut coba tuliskan kata-kata berikut ini :

Ini Header
Ini Menu Navigasi
Ini Article
Ini Sidebar
Ini Footer

Gambar Contoh :

Setelah Sobat mengikuti langkah di atas, coba sobat save halaman notepad yang sudah berisi kata-kata di atas dengan nama file "pengenalan-html.html" tanpa tanda kutip, dengan cara sebagai berikut :

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

Gambar Contoh :

Setelah sudah disave, maka langkah selanjutnya coba Sobat buka file yang sudah disave tadi, dengan cara klik 2 kali pada file HTML yang sudah disave tadi, maka file tersebut akan dibuka di salah satu browser yang sobat miliki seperti chrome, firefox, internet explore dan lain sebagainya.

Gambar Contoh :

Ketika Sobat melakukan langkah di atas, apa yang terjadi? Kata kata yang sobat tulis tadi, akan muncul di sebua web browser, namun tidak beraturan, tanpa enter dan hanya lurus saja, meski pada dokument notepad ditulis terpisah dengan menggunakan enter, kenapa? Hal itu, disebabkan karena, browser berfungsi untuk membaca dokumen HTML dan menampilkannya sebagai halaman web. Sehingga, walaupun kata kata yang terdapat dalam satu dokument HTML yang sobat buat tadi sudah menjelaskan mengenai isi dokument, tapi web browser tidak mengakui bahwa apa yang tertulis di dalam file HTML itu benar, seperti Ini Header, namun browser hanya menerjemahkan itu sebagai text saja, nah bagaiman agar tulisan itu dapat terbaca oleh sebuah web browser sebagai suatu header? Caranya, dengan menggunakan tag HTML. Lantas, bagaimana cara menulis tag HTML?

Note : Di bawah ini saya ingin menjelaskan cara meletakan tag HTML dalam sebuah dokument .html. tapi tidak seperti blog-blog lain yang mempermudah pembelajaran dengan cara membiarkan seorang yang sedang belajar untuk mengkopi paste isi tag HTML, alangkah baiknya seorang yang sedang belajar itu mengetik satu persatu isi dari dokument HTML pertamanya.

Penulisan tag HTML?

Menurut w3schools.com, tag HTML adalah tag markup HTML, lantas, bagaimana penulisan tag HTML tersebut?

Tag HTML adalah kata kunci (nama tag) yang dikelilingi oleh kurung sudut seperti <html>
Tag HTML biasanya datang berpasangan seperti <b> dan </ b>
Tag pertama dalam pasangan adalah tag awal, tag kedua adalah tag akhir
Tag akhir ditulis seperti tag awal, dengan garis miring sebelum nama tag
Mulai dan tag akhir juga disebut tag pembuka dan tag penutup

Coba sobat edit file .html yang sudah sobat buat tadi dengan menggunakan notepad, sehingga menjadi seperti di bawah ini :

Gambar Contoh :

Setelah sudah Sobat edit menjadi seperti di atas, selanjutnya coba save kembali file tersebut dan jalankan kembali dengan cara mengklik 2 kali file yang sudah ada, atau, kalau file tadi masih terbuka di browser Sobat, coba sobat segarkan halaman browser sobat. maka akan ada perubahan.

Gambar Contoh :

Nah, setelah sobat melihat apa yang sudah di tampilkan browser, pasti sobat mulai ada gambaran tentang apa itu HTML, seperti yang sudah saya jelaskan di awal, HTML adalah tag untuk menandai suatu isi dokument sebuah web. seperti :

<!DOCTYPE html> adalah tag yang berfungsi untuk mendeklarasikan bahwa dokument web tersebut adalah dokument web HTML5. Ada banyak macam tag untuk mendeklarasikan sebuah dokument web. dan sesuai perkembangan sekarang semua sudah beralih ke HTML5, dan itu akan dijelaskan pada postingan berikutnya
Kemudian ada tag <html> dan </html>, ini adalah tag untuk menjelaskan bahwa ini adalah halaman web.
setelah itu ada tag <head> tag tersebut berfungsi untuk meletakan semua tag yang berisi penjelasan dari isi Dokument web, seperti, judul web, tag meta deskripsi, kata kunci, serta style css dan javascript yang secara keseluruhan berfungsi untuk mengatur layout web kita, semua itu akan Sobat dapatkan di postingan-postingan selanjutnya
setelah itu ada tag <body> tag ini adalah tag untuk mengisi apa saja yang akan kita tampilkan ke halaman web kita
dan tag lain-lain yang ada di dalam tag <body> akan saya jelaskan pada postingan blog selanjutnya.

Nah, setelah mengikuti dan membaca tentang apa itu HTML. semoga, Sobat dapat memahami apa sesungguhnya HTML itu, namun saya hanyalah manusia biasa, jika ada yang belum dipahami mohon berikan komentar Sobat, sehingga kita dapat belajar bersama-sama, sekian dulu postingan hari ini, selebihnya saya akan lanjutkan lewat postingan selanjutnya, jika sobat berminat mengikuti pelajaran dari blog ini, silahkan klik mengikuti, agar setiap update blog dapat langsung dikirimkan ke email Sobat. Sekian untuk hari ini, sampai bertemu di pelajaran selanjutnya.

Sukses Selalu ^_^

Belajar Web Bersama Dat-s

Pages

Monday 16 December 2013

Elements HTML

Sunday 15 December 2013

Pelajaran HTML Dasar

Saturday 14 December 2013

Macam Macam Editor HTML

Friday 13 December 2013

Macam Macam Versi HTML

DEKLARASI DOCTYPE UMUM

Thursday 12 December 2013

Mengenal Lebih Dalam Tentang Tag HTML

My First Heading

Struktur Halaman HTML

Wednesday 11 December 2013

Apa Itu HTML?

Tentang

Labels