Breaking News
Tampilkan postingan dengan label Web. Tampilkan semua postingan
Tampilkan postingan dengan label Web. Tampilkan semua postingan

Senin, 05 Januari 2015

Belajar HTML Dasar Part 2: Dasar-dasar HTML

 
Langsung saja, sebelum mempelajari dan menuliskan tag html di code editor, ada baiknya kalian membuka dulu software editor yang kalian miliki. Disini penulis menyarankan menggunakan Sublime Text atau Notepad ++. Kemudian jalankan Text Editor Anda.

Tag HTML

Apa itu TAG? Tag adalah perintah-perintah khusus (markup) yang digunakan untuk menentukan tampilan dokumen HTML. TAG HTML harus diawali dengan tag pembuka dan diakhiri dengan tag penutup. Yang musti di ingat adalah Tag penutup HTML harus selalu diberi tanda backslash “/” sebelum karakter “<”.

Contohnya sebagai berikut :

<tag pembuka>..</tag penutup> 

Contoh Jelasnya :

<html>..</html>

Tag HTML bersifat no case sensitive, atau tidak sensitif. Artinya Kita bebas menuliskan tag dengan huruf besar semua atau dengan huruf kecil semua.

Contoh: <HTML> <html>. Namun pada XHTML, semua tag harus ditulis dengan huruf kecil semua. Agar dokumen XHTML yang dibuat sesuai dengan standar yang telah ditentukan oleh W3c.

Struktur Tag HTML

Struktur dokumen HTML terdiri dari 5 bagian, dengan berpedoman pada 3 bagian utama. 5 bagian tersebut adalah:

<!DOCTYPE>

Document Type Definition (DTD/Doctype) adalah tag yang digunakan untuk menjelaskan versi HTML, dan harus ditulis pada baris paling awal sebelum tag <html>.

Contohnya sebagai berikut :


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

Tag Doctype diatas menjelaskan bahwa kita menggunakan HTML versi 4.0 atau yang biasa disebut XHTML versi 1.0.

Ingat! tanpa harus menuliskan Doctype, dokumen HTML yang kita buat masih dapat berjalan dengan baik. Namun, W3C menganjurkan agar kita selalu menggunakan <!DOCTYPE> pada baris paling awal dokumen HTML, supaya sesuai dengan standar yang telah ditetapkan oleh W3C.


<html>

Tag ini digunakan untuk memberitahukan kepada browser bahwa dokumen yang kita buat adalah dokumen HTML. Tag <html> merupakan salah satu dari tiga bagian utama struktur HTML. Dan setiap tag lainnya harus ditulis dan berada didalam tag <html> dan </html>, istilahnya diapit. Tag <html> .... </html> juga menandakan bahwa kita akan memulai dan mengakhiri dokumen HTML.

<head>

Tag ini mendefinisikan bahwa <head> adalah bagian header dari suatu file HTML. Biasanya didalam tag ini berisi tag <title>, tag <meta>, dan tag lain yang masih merupakan bagian dari tag <head>. Contohnya seperti tag <script>. Selain itu tag <head> juga merupakan salah satu dari 3 bagian utama struktur HTML.

<title>

Tag ini berfungsi untuk menampilkan judul dokumen HTML.

<body>

Tag ini berfungsi untuk menampilkan isi dari dokumen HTML. contohnya seperti: Link, image, text, video, dan semua yang akan ditampilkan ke browser. Tag body merupakan salah satu dari 3 bagian utama struktur HTML.

Maka, jika semuanya digabungkan struktur lengkapnya adalah sebagai berikut:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html>
<head>
<title>Untuk Judul Dokumen HTML</html>
</head>
<body>
Untuk Isi Dokumen HTML
</body>
</html>

Sekarang coba anda ketikan skrip diatas pada aplikasi Text Editor anda, dan save dengan nama coba.html, kemudian jalankan dibrowser. Maka akan tampil sebagai berikut:



Element HTML  

Apa itu Element HTML? Element HTML adalah nama tag yang terdiri dari 3 bagian, yaitu: tag pembuka, isi, dan tag penutup.

Contoh :

<tag pembuka> isi </tag penutup>

Lebih jelasnya :

<body> isi </body>
<p> isi </p>
<b> isi </b>
<title> isi judul html </title>

<p> = adalah element yang digunakan untuk membuat paragraph.
<b> = adalah element yang digunakan untuk membuat huruf menjadi tebal (bold).
<title> = adalah element yang digunakan untuk mendefinisikan judul dokumen html.

Elemen HTML mempunyai ciri-ciri sebagai berikut:

  • Elemen HTML dimulai dengan tag pembuka.
  • Elemen HTML diakhiri dengan tag penutup.
  • Isi Elemen HTML adalah semua yang terdapat diantara tag pembuka dan tag penutup.
  • Beberapa elemen HTML ada yang tidak memiliki isi dan tag penutup.
  • Elemen yang tidak memiliki isi ditutup pada awal tag />.
  • Sebagian besar elemen HTML dapat diberi atribut tertentu.

Element yang tidak memiliki isi dan tag penutup contohnya:


<hr />
<br />
<hr /> adalah element yang akan membuat garis lurus.
<br /> adalah element yang akan membuat baris baru (line break).

Tag-tag yang ditulis secara berpasangan artinya “yang memiliki” tag pembuka dan tag penutup, dan yang musti di ingat adalah penulisan tag yang memiliki pasangan tidak boleh saling tumpah tindih dengan pasangan tag lain.

Contoh penulisan tag yang salah (tumpah tindih dengan pasangan tag lain):


<p>
<b> ... </p>
</b>

Contoh penulisan tag yang benar:

<p> <b>..</b> </p>

Tag <p> Harus berpasangan dengan tag </p>
Tag <b> Harus berpasangan dengan tag </b>

Attribute HTML

Apa itu Attribute HTML? Attribute HTML adalah property dari suatu element HTML. Attribut HTML terdiri atas nama dan nilai.

Contoh :

<tag nama-attribute=”nilai-attribute”>


Lebih Jelasnya :

<body bgcolor=”black”>

<body = adalah element html (nama tag)
bgcolor = adalah nama attribute
“black” = adalah nilai attribute

Contoh Lainnya :

<font color=”red”> Isi </font>

<font = element html
color = adalah nama attribute
“red” = adalah nilai attribute
Isi = adalah isi element html
</font> = adalah tag penutup

Contoh Lagi :

<div align=”center”>

<div = adalah element html
align = adalah nama attribute
“center” = adalah nilai attribute

Ingat! Nilai attribute harus berada didalam tanda petik dua “ “, contohnya jika kita ingin mengubah warna background html menjadi kuning, maka penulisan yang benar adalah seperti ini:

<body bgcolor=”yellow”>

Sebenarnya nilai attribute yang tidak diberi tanda petik dua “ “ masih bisa dijalankan di browser, namun agar memenuhi standar yang telah ditetapkan oleh W3C, maka ada baiknya kita menggunakan tanda petik dua untuk mendefinisikan nilai attribute. Dan ingat! Harus ditulis menggunakan huruf kecil semua yak :D

Bagaimana? mudah kan? oke sekian tutorial Belajar Dasar-Dasar HTML. Semoga Bermanfaat :)

Sumber : http://w3schools.com
Read more ...

Perbedaan Ekstensi .htm dan .html



Ekstensi .htm sebenarnya tidak terlalu berbeda dengan .html, htm adalah versi singkat dari HTML. Sejarahnya begini, Saat internet baru saja muncul, hampir semua website berjalan di sistem operasi UNIX. .html adalah ekstensi standar untuk file halaman website. Ketika orang mulai menggunakan DOS atau windows sebagai server website, ekstensi .html menjadi permasalahan. Soalnya, DOS dan windows menggunakan format 8.3 untuk nama file. Artinya, nama file tidak boleh lebih dari 8 karakter dan ekstensinya tidak boleh lebih dari 3 karakter. Jadi, supaya halaman web bisa dipakai diserver bebasis dos atau windows, dibuatlah standar baru yakni .HTM.

Makanya pada era-era awal internet, orang bisa mengetahui sistem operasi yang digunakan oleh sebuah web server dengan melihat dari ekstensi filenya saja. Kalau jumlah karakter pada file ekstensinya 4, berarti sistem operasi yang digunakan adalah UNIX. Kalau panjang ekstensinysa Cuma 3 karakter, web server bisa menggunakan UNIX atau windows. Sekarang, jumlah karakter dalam ekstensi ini sudah tidak bisa digunakan karena ekstensi file di windows bisa lebih dari 3. Jadi, Lebih baik menggunakan ekstensi .html daripada .htm.
Read more ...

Web Browser, Code Editor, Dan WYSIWYG.


Web Browser, merupakan aplikasi yang digunakan untuk menjelajah halaman website yang bertebaran didunia maya. Pengguna internet meminta kepada web browser untuk memanggil halaman website yang di inginkan, menterjemahkan tag-tag HTML menjadi halaman website, dan kemudian menampilkannya kepada pengguna internet.

Web browser yang umum digunakan contohnya seperti: Mozilla Firefox, Google Chrome, Internet Explorer, Opera, Dan lain sebagainya.


Code Editor, adalah software yang digunakan untuk membuat program aplikasi. Dengan menggunakan code editor, kita dapat menuliskan tag-tag HTML dan membuat dokumen HTML. Code Editor yang umumnya digunakan untuk membuat halaman website antara lain: Adobe Dreamweaver (dulunya Macromedia Dreamweaver), MS. Frontpage, Notepad, dan lain-lain.


WYSIWYG, merupakan singkatan dari “What You See is What You Get” artinya apa yang kamu lihat, adalah apa yang yang kamu dapat . Istilah ini erat kaitannya dengan kata content. Biasanya dalam suatu Web dinamis, misalnya konten berita pada website dapat diupdate dan juga dapat didelete. Tentunya sebagai calon web master, kita harus memikirkan kemudahan untuk pengisian
dan perubahan konten. Didalam penggunaan Content management System, untuk memudahkan user dalam pengisian ataupun pengeditan konten diperlukan adanya WYSIWYG. Contohnya pada CMS wordpress, semua form pengisian diberi editor WYSIWYG untuk memudahkan pengisian konten atau membuat postingan sesuai yang diinginkan.

Dengan editor WYSIWYG kita diberikan pelayanan untuk mengisi artikel ataupun konten berita dan lainnya, form tersebut dilengkapi dengan toolbar untuk pemformatan teks, tautan, memasukan gambar, memasukan video, dan lain-lain. Cara inilah yang diterapkan oleh CMS (Content management System) atau situs penyedia blog seperti wordpress, blogspot, dan sebagainya. Contoh salah satu editor WYSIWYG adalah TinyMCE yang berbasiskan Java Script. Lebih jelasnya, Editor WYSIWYG dapat menggantikan peran sebuah TextArea pada form HTML.


Read more ...

Belajar HTML Dasar Part 1: Pengenalan HTML

 

Apa itu HTML?

HTML atau HyperText Markup Language adalah bahasa markup yang digunakan untuk membuat halaman-halaman website. HTML merupakan bahasa markup yang menggambarkan kepada browser tentang bagaimana caranya menampilkan format teks, data, dan grafik ke layar komputer, ketika sedang berkunjung ke sebuah website.

Ingat! HTML bukanlah bahasa pemrograman. HTML adalah bahasa Markup yang digunakan untuk membuat halaman-halaman website, dan menampilkan halaman-halaman tersebut ke browser.

Tag HTML menginstruksikan kepada browser untuk menampilkan halaman website. Sebuah file yang merupakan file HTML dan berextensi .html atau .htm dapat dibuka menggunakan web browser seperti Mozilla Firefox atau Internet Explorer.

Sejarah HTML

HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa). Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.

Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language).

ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML adalah HTML 4.01, meskipun saat ini telah berkembang XHTML yang merupakan pengembangan dari HTML.

Nah.. itulah Pengenalan HTML dimulai dari apa itu HTML dan sejarahnya. Semoga Bermanfaat :)

Read more ...
Copyright Multimedia 2014 Blogger Templates