Tutorial HTML5 Lengkap (Part 1)

 
Karena HTML dahulu telah menjadi bahasa utama dari World Wide Web. Memang, tidak ada bagian kecil yang membuat World Wide Web. “World Wide” adalah HTML. Dengan penciptaan HTML dan browser web yang menafsirkannya siapapun yang memiliki komputer dan saluran telepon bisa surfing web *.
Ada bahasa lain (misalnya XML) yang digunakan untuk menulis halaman web, namun sebagian besar situs web yang ditulis dalam HTML dan akan selalu digunakan di masa mendatang.

Pada dasarnya:

HTML adalah bagaimana dua komputer berbicara satu sama lain melalui internet.
Situs Web adalah apa yang mereka katakan.

HTML adalah “berbicara” dengan dua komputer:

1. Client, digunakan oleh orang yang surfing internet, seperti komputer yang Anda lihat sekarang.
2. Server, Sebuah server menyimpan dan mendistribusikan situs melewati net. Sebagai contoh : Saya memiliki server di mana saya menyimpan situs web ini.

Istilah ini sering ditemui dalam “sisi server-” frase dan “client-side”, sesuatu yang berarti terjadi pada server dan Client. “Script itu berjalan sisi Client.” berarti “script itu berjalan pada klien”.

Mari kita berasumsi bahwa seseorang ingin membeli Dodol, dan sebagai nasib itu Anda menjual yang menjual dodol.

Ini calon pembeli ternyata di komputernya – “Client”, membuka browser, pergi ke Google, mengetikkan “dodol”, klik “Cari” dan (di dunia yang sempurna) link ke situs Anda muncul di bagian atas hasil pencarian.

Orang ini, dengan kartu kredit di tangan, mengklik link ke halaman home Anda. “Client” (komputer, bukan orangnya) mengirimkan permintaan ke server “” untuk mengirim halaman home Anda kembali ke “Client”.

Server menemukan file bernama “index.html” atau “index.htm” ** (nama default dari halaman home) dan mengirimkannya ke Client. File indeks dalam permintaan gilirannya file apapun tambahan (misalnya gambar) yang diperlukan untuk menampilkan halamanhome Anda dalam segala kemudahan.

Index.html ditulis dalam HTML, versi terbaru HTML5.
apa itu HTML? seperti di artikel ini

Web browser pertama, Mosaic, diperkenalkan pada tahun 1993. Sebuah Netscape di tahun berikutnya, Mosaic, diperkenalkan dan mulai menjadi populer. HTML digunakan dalam kedua browser, tetapi tidak ada “standar” HTML sampai pengenalan HTML 2.0.

HTML 2.0 pertama kali diterbitkan pada tahun 1995 kemudian HTML 3.0 diterbitkan dua tahun kemudian dan 4,01 dua tahun setelah itu.. HTML 4.01 telah menjadi kuda kerja internet sejak itu.

“Rancangan kerja” pertama dari HTML5 keluar pada bulan Januari 2008 dan sudah memiliki dukungan browser  secara luas. Namun HTML5 belum sepenuhnya dilaksanakan dan tidak akan dilaksanakan selama beberapa tahun. Ada sejumlah perencanaan komite yang memiliki rencana untuk membuatnya menjadi “sebuah Rekomendasi”, tapi rencana tersebut masih dalam tahap perencanaan – dan tidak berencana bahwa mengubah waktu dekat. **

Ada Dua kelompok, W3C dan WHATWG, bertanggung jawab atas perkembangan HTML5. Mengapa dua kelompok itu? “WHATWG ini dibentuk sebagai tanggapan terhadap perkembangan yang lambat dari standar web dipantau oleh W3C.”Dengan kata lain mereka masuk bertengkar dan berpisah. ( wikipedia -

Mereka mengatakan telah sejak dulu ingin berpendapat tentang apa yang mereka buat. Kedua kelompok setuju bahwa itu akan membutuhkan beberapa tahun untuk sepenuhnya melaksanakan HTML5, padahal akan digunakan secara luas jauh sebelum itu – dengan asumsi bahwa, mereka tidak membagi dan mengalikan lagi.

Banyak di dewan W3C dan WHATWG bekerja untuk perusahaan browser yang bersaing. Tak pelak konflik kepentingan (untuk upaya brutal misalnya MS di akhir 1990-an untuk mengendalikan semuanya – ), telah menimbulkan masalah, tapi saya akui – meskipun begrudgingly, bahwa secara keseluruhan mereka telah melakukan pekerjaan yang cukup baik. (wikipedia-

Dalam banyak hal HTML5 tidak semua yang berbeda dengan 4,01. Tag tertentu, seperti tag <font>, yang “ditinggalkan” (tetapi bekerja) dalam HTML 4.01, dan tidak bekerja di HTML5. Ada sejumlah peluang lainnya dan berakhir perurubahan, tetapi mereka merapikan messes tua daripada memperkenalkan perubahan mendasar.

Perubahan mendasar yang datang dengan pengembangan API yang akan berjalan di HTML5 – alat baru yang menarik dan kuat yang akan mengambil tempat internet kita tidak dapat mulai bayangkan. Juga unsur-unsur baru seperti <header> itu, <nav> dan <article> telah diperkenalkan yang akan membantu mesin pencari menganalisis halaman web yang lebih baik.

Sekarang jika Anda ingin menambahkan video ke halaman Anda, Anda juga harus menambahkan script rumit untuk halaman Anda, menanamkan video YouTube atau harus membukanya di aplikasi terpisah seperti Windows Media Player. Yang pertama adalah tidak mudah dan kemudian kurangnya tenaga profesional. Tag <video> baru HTML5 akan mengatasi masalah tersebut. Saat ini tidak ada yang bisa sepakat tentang apa format video untuk digunakan. Akhirnya mereka akan bekerja dan ketika mereka membuat dan mendistribusikan program televisi akan berada dalam jangkauan setiap orang yang dapat membuat video dan menulis HTML.

Jika Anda ingin melihat contoh dari apa yang akan mendaftar untuk YouTube HTML5 beta http://www.youtube.com/html5, pilih “Join Trial HTML5″. Kemudian tutup jendela itu, klik http://www.youtube.com/embed/3NjXs_nXB5U dan mendengarkan Howlin wolf bertanya “Berapa Banyak Tahun Lagi?” Secara teori ada seharusnya tidak ada masalah tetapi masih dalam versi beta jadi siapa tahu. ***

Dengan diperkenalkannya IE9 bahkan Microsoft semakin di depan dengan sebagian besar elemen HTML yang lebih baru. Chrome, Firefox, Opera dan Safari telah memenuhi standar HTML5 untuk beberapa waktu.

Sekarang kita coba menggunakan “tag”. *

Dengan beberapa pengecualian penting (yang kita akan gunakan) semua tag harus dibuka dan ditutup. Lihatlah kode ke kanan. Tag pembuka adalah: <html>. Tag penutup adalah </ html> – yang menjadi pembeda adalah “/” pada tag penutup.

Tag adalah kontainer. Tag html menunjukkan bahwa segala sesuatu antara <html> dan </ html> adalah kode yang sesuai dengan standar jenis HTML didikte oleh deklarasi DOCTYPE – dalam hal ini kasus HTML5 .

Segala sesuatu di antara tag pembuka dan tag penutup berada di dalam tag itu dan karena itu memiliki atribut yang memberi tag mereka. Atribut-atribut dapat dimodifikasi. Misalnya di situs ini saya telah mengubah warna default (putih) untuk tag </ html> menjadi hitam.

Di dalam tag <html> dua tag penting lainnya:
tag <head>
tag <body>

Pertama mari kita lihat tag <head> di sini :

Situs web memiliki dua audien:

- Yang pertama adalah human atau manusia
- Yang lain “spider” atau “bot“

Sementara isi dari tag head menampilkan sedikit untuk manusia sangat penting untuk bot (juga disebut web crawler). Search engine memiliki crawler (misalnya dari Google disebut “Googlebot”) yang terus-menerus menjelajahi link berikut bersih dari satu situs ke situs lainnya semuanya mengumpulkan dan mengindeks mereka temukan. Google memiliki algoritma yang kemudian memutuskan halaman mana yang paling relevan untuk pencarian istilah.

Situs web yang membaca dengan baik untuk kata-kata yang paling mungkin muncul tinggi dalam hasil mesin pencari. Ini adalah apa yang disebut SEO atau Search Engine Optimization. Buku – buku besar Website – telah ditulis tentang SEO. Kita tidak memiliki waktu untuk mempelajarinya dengan sangat mendalam, tapi saya berulang kali akan menyentuh di atasnya sambil Anda melanjutkan mengikuti tutorial.

Yang paling penting yang dapat Anda lakukan untuk SEO adalah menulis tag titlle yang baik. Tag titlle saya untuk halaman ini adalah: head tag atau dapat dituliskan seperti contoh ini <title> – HTML5 tutorial </ title>. Ini tidak muncul pada halaman itu sendiri tetapi pertunjukan di bar di bagian atas browser dan di tombol di taskbar, biasanya ditemukan di bagian bawah monitor di PC.

Judul juga muncul di hasil pencarian Google. misalnya sebagai berikut :
Judul merupakan teks yang berwarna biru seperti gambar diatas, Cobalah untuk membuat keyword yang baik, tapi jangan lupa bahwa manusia juga akan membacanya. Idealnya judul harus kurang dari 64-70 karakter.

Yang paling penting kedua yang dapat Anda lakukan adalah realistis. Pada titik ini itu semua tidak mungkin untuk mendapatkan peringkat tinggi pada kata pencarian populer. Toko Bunga Udin tidak akan muncul ketika seseorang mencari “Bunga”. Namun “Toko Bunga Udin” google atau “CSS weaver” dan sampai pada halaman http://terusmaju-asthok.blogspot.com/. Jika istri dari beberapa pria di toko bunga benar-benar menandai off, Udin pun hanya melakukan penjualan.

Situs web Udin membuat uang Udin sebagian karena siapa pun yang membuat situs Udin mengambil waktu untuk hati-hati memilih kata kunci yang tepat dan untuk menulis judul yang baik. Sungguh menakjubkan bagaimana web designer sedikit mengambil dua langkah sederhana namun penting.

Meta tag juga berada pada tag head. Dua secara khusus penting, yang keduanya dapat Anda lihat pada source code halaman ini.

Tag meta charset:
  • <meta charset="utf-8">
Deskripsi meta tag:
  • <meta name="description" content="berisi judul dan meta tag-penting bagi engines, pencarian dan informasi bagi browser untuk benar menampilkan page tersebut">
Yang pertama memberitahu browser apa ketik huruf halaman yang ditulis masuk Jika situs web Anda dalam bahasa lain selain bahasa Inggris berhati-hati untuk menggunakan charset yang benar. Jika halaman Anda di plain vanilla Inggris kuno hanya copy dan paste charset=”UTF-8″> <meta tepat di atas * judul, dan dengan sedikit keberuntungan Anda tidak akan pernah memikirkannya lagi.
Nanti kadang-kadang muncul dalam hasil pencarian dan dapat membantu dalam SEO.
Ada juga “kata kunci” meta tag awalnya dibuat untuk membantu dalam SEO namun telah menjadi dasarnya tidak berharga karena web designer begitu banyak ditipu. Pada akhir 90-an mencari “ini” mungkin membawa Anda ke “itu”. Jika Anda tidak berhati-hati Anda tidak akan pernah mendapatkan pengunjung tetap. 

Tag body :
Tag body berisi kode yang menghasilkan apa yang dilihat di browser. Ini adalah apa yang Anda lihat pada layar komputer Anda ketika Anda pergi ke sebuah halaman web, dan sebagian besar pekerjaan yang Anda lakukan adalah pada kode ditemukan antara pembukaan dan penutupan tag body.

Dengan kata lain, sekarang menyenangkan dimulai – seperti halnya kejengkelan, jadi saya ingin mengambil waktu untuk membantu Anda memulai benar. Saya telah menemukan bahwa secara umum ada dua jenis web designer. Mereka yang memiliki latar belakang ilmu komputer dan mereka yang tertarik dalam desain.

Sulit membayangkan dua disiplin kurang sama, namun desain web yang baik membutuhkan keahlian beberapa di keduanya. Itu akan terjadi dalam waktu – terutama jika Anda berhati-hati untuk mengikuti sederhana, tetapi aturan penting: Keep it simple!

Itu berlaku baik menulis kode dan desain. Memang menulis kode sederhana yang baik bersih cenderung menghasilkan desain yang baik * bersih sederhana dan sebaliknya.

Berbelit-belit, kode berantakan sulit untuk debug dan tweak – dan bahkan dalam situasi yang terbaik satu menghabiskan banyak waktu melakukan keduanya.

Ada banyak hal indah yang bisa dilakukan di halaman web. Sangat mudah untuk masuk ke mode “bukankah itu keren!”. Saya melakukannya sepanjang waktu – dan ya, mungkin akan sangat dingin, tetapi terutama sebagai pemula mungkin akan membuat Anda gila mendapatkan itu untuk bekerja. Yang mengatakan, itu terobosan ketika akhirnya mengatakan  tidak!

Ingat, tag adalah kontainer. Kadang-kadang mereka berisi teks, kadang-kadang gambar. Seringkali mereka berisi tag lagi yang pada gilirannya, berisi teks, gambar dan tag lagi. (misalnya Kalimat ini dalam lima tag yang berbeda.) Bahkan melakukan apa saja untuk tetap sederhana, hal-hal rumit bisa terburu-buru. 

Tag <p> (Paragaf) :
Tag <p> mungkin adalah handiest dan paling umum digunakan dari semua tag.

Meskipun sudah ada sejak HTML4 diperkenalkan, banyak dari Anda berkenalan dengan HTML4 dan versi sebelumnya dari HTML mungkin tidak pernah menggunakannya. Hal ini karena menggantikan tag <font> kemudian mana-mana yang “ditinggalkan” di HTML4, tapi masih bekerja. Tidak bekerja di HTML5.

Web desainer yang tidak mengikuti dengan pengembangan standar HTML (…) akan menemukan ini menjadi perbedaan terbesar antara HTML5 dan versi sebelumnya dari HTML.

Lihatlah shouce code ini halaman. *

Di sana Anda akan melihat <p>. <menampilkan “kurang dari” simbol dan> yang “lebih besar dari” simbol. Jika saya tidak menggunakan browser mereka akan berpikir <p> adalah sebuah tag yang sebenarnya.

No comments:

Post a Comment