Friday, March 31, 2017

TUTORIAL HTML PART 006 : STRUKTUR DASAR PADA HTML


Halo brosist akhirnya kita ketemu lagi Tutorial Ke 6, dimana pada tutorial ke 5 kita telah membahas tentang apa itu tag, elemen dan atribut pada HTML. Maka kali ini telah tiba waktunya kita untuk tahu gimana caranya buat bikin struktur dasar di HTML.

Struktur HTML

Pada HTML paling engga pasti ada struktur - struktur  dasar yang berupa : Tag DOCTYPE atau DTD, head, html, dan body. Nah ini nih struktur dasarnya HTML.

Biar kita jadi lebih gampang mempelajarinya, yuk kita praktek di aplikasi editor text yang sudah ada di komputer kita dengan cara mengtikan kode di bawah ini:

1   |   <!DOCTYPE html>
2   |           <html>
3   |           <head>
4                  <title>Title dari Websiteku</title>
5   |          </head>
6   |   <body>
7   |         <p>Selamat Pagi Dunia , Hello World!</p>
8   |   </body>
9   |   </html>

 Nah setelah semuanya sudah kita ketik sekarang kita tinggal save text diatas dengan format ,html kemudian tinggal kita jalankan, contohnya kita jalankan dengan mozzila firefox, yang caranya tinggal kita klik kanan pada file yang sudah kita save tadi kemudia pilih Open With dan pilih Mozilla Firefox. dimana hasilnya akan tampil sebagai berikut :
Mengenal Struktur Dasar HTML

 APA ITU DOCTYPE DAN DTD ??

Dari contoh diatas DOCTYPE  dan DTD berada di paling awal. yang dimana gunananya adalah membagikan informasi ke pada web browser kalau file yang bakalan di jalankan adalah HTML.

DTD  punya beberapa versi loh brosist tapi tergantung sama versi si HTML yang mau di pake juga. Nah dari contoh tadi, kita memakai HTML versi 5. DTD bisa mengandung text yang panjang dan engga mungkin banget buat kita hafalin loh brosist. Sebagai contoh dengan menggunakan xHTML 1.0 mari kita lihat dibawah ini :

<!DOCTYPE html PUBLIC "-//TOGELBOLA88C//DTD XHTML 1.0 Strict////EN"
"http://www.togelbola88.com/TR/xhtml1/DTD/xhtml1-strict.dtd">


Nah kalo kita sampai lupa nih ngetik DTD, si browser bakalan nampilin dan menjalankan nya kok seolah - olah engga ada apa - apa gitu. Tapi si browser ini sebenernya mengoperasikan HTMl yang kita ketikan tadi dengan mode khusus yang biasa di kenal dengan nama quirk mode.

 Nah penerjemahan dari web tadi apalagi dengan kode CSS akan dikit beda dibanding dengan yang seharusnya karena adanya quirk mode tadi brosist. Soalnya biasanya si browser sendiri bakal beranggapan kalau waktu si DTD engga ketemu, halaman/page itu bakalan memiliki kemungkinan menajadi page yang kusam. Nah biar si page yang kusam ini bisa tampil lebih oke, si browser tentunya perlung aturan yang beda, yaitu : quirk mode tadi brosist.
Nah agar kita tau kalau si browser tadi lagi di dalam mode quirk atau standart maka sebaiknya kita menggunaka browser firefox. Di Firefox sendiri kita bisa klik kana pada page web, dan kita bisa pilih Page Info,. Di bagian Render Mode kita bakalan ngeliat mode yang sekarang ini ada lah quirkmode atau standart mode.
Perbedaan quirk mode dan standard mode HTML


 Pengertian Tag <html>

Tag yang satu ini merupakan tag untuk pembukaan seluruh page di web. Dan semua kode html memang harus berposisi di dalam tag yang satu ini. Dan tag HTML biasanya bisa kita mulai dengan <html> dan kita selesaikan dengan </html>.

Pengertian Tag <head>

Tag <head> biasanya bakalan berisi tentang definisi dari page , kaya kode Javascript, CSS dan banyak kdoe lainya yang engga tampil di browser.

contohnya seperti Tag <title> yang tadi kita pakai diatas, tag ini bakalan nampilin title di di page web. Title ini juga biasanya bakalan tampil di bagian teratas sebuah web. Contoh lagi di tampilan page.html, 'Title dari Websiteku' bakalan nongol di bagian tab browser.

Pengertian Tag <body>

Tag yang satu ini isinya itu elemen - elemen yang bakalan muncul di page kita nanntinya dalam bentuk tabel, paragraf, gambar dan lain - lain. Dan untuk menutup tag body ibni kita bisa menutup nya dengan mengetikan </body>.  Dan kita bakalan kehabisan banyak waktu untuk merancang web yang kita inginkan di dalam tag yang satu ini.


Nah Struktur yang barusan kita pelajari tadi merupakan yang paling dasar loh. Sebuah page web bahkan bisa punya puluhan,ratusa,bahkan sampai riiibuan baris, dimana baris - baris tersebut di tuliskan menggunakan bermacam - macam tag HTML. Dan di tutorial nanti kita bakal ngebahas tentang gimana caranya menggunakan tag <p> untuk menciptakan paragraf. Di tunggu ya :PP

Thursday, March 30, 2017

TUTORIAL HTML PART 005 : APA ITU TAG, ELEMENT, DAN ATRIBUT DI HTML


Nah kembali lagi nih sama mimin, Kalo di Tutorial ke - 4 kemarin kita udah bisa jalanin file HTML dengan menggunakan web browser kali ini kita bakalan ngebahas tentanf yang namanya tag, elemen , dan atribut di HTML. tiga - tiga nya adalah hal yang dasar yang ada di semua website di internet.

TAG dalam HTML

Sebagai markup, HTML memerlukan cara but ngasih tau si web browser tentang fungsi dari text. Akan kah text itu kita tulis dalam bentuk paragraf, list atau sebagai link? nah di HTML tanda - tanda ini biasanya disebut dengan Tag.

Di dalam HTML semua tag di tulis dengan berpasangan, yaitu tag pembuka dan tag penutup, dimana object yang berata di antara tag pembuka dan tag penutup. Object juga bisa beruma gambar, text, atau video. Dan cara menulis tag ada di antara tanda kurung siku : " < dan > ".

Dan berikut ini cara dasar menulis tag di HTML:
<tag_pembuka>Object</tag_penutup>

Contohnya coba di perhatikan ya brosist:

*   <p> ini tag pembuka, contoh p itu adalah paragraf.
*   </p> dan ini adalah tag penutup. yang bedanya hanya ada pada tanda (/) atau forward slash.

Nah kalo kita lupa ngasihi tag penutup, biasanya browser bakalan mangfaatin kesalahan kita ini dengan memunculkan hasil yang seolah -olah kalau kita menulis tag penutup. Meskipun ini keliatan mudah, tapi ternyata bisa bikin bingung juga.

Contoh yang lainya , kalo kita mau ngebuat text yang bermotif bold/tebal serta italic/miring di HTML kita bisa menulisnya seperti ini:

1 |  <p> Ini Paragraf. <i> Cuman kumpulan dari kalimat</i> .
2 |  Paragraf ini mengandung <b>tiga kalimat</b></p> .

Tag <i> disini berperan dan berfungsi untuk membuat text yang kita tulis di dalamnya menjadi miring dan i sndiri disingkat dari italic, <b> dalah tag untuk membuat text menjadi bold atau tebal.

Ada beberapa pengecualian yang ga berpasangan , contohnya <br> ini di gunakan untuk break (berpindah baris) <hr> Ini digunakan untuk membuat garis yang horizontal. Tag ini juga biasanya di katakan sebagai self closing tag atau void tag, dan cara menulisnya bisa dengan <br>, atau <br/>.

HTML tidak case-sensitif, yang artinya di dalam penulisan <p> bisa dianggap sama dengan <P>.

PENGERTIAN ELEMENT DALAM HTML

element sendiri merupakan isi dari tag yang berada di antara tag pembuka dan tag penutup, contohnya seperti ini:

1   |   <p> ini cuman satu <em>doang</em> </p>

Nah di contoh ini, <p> ini cuman satu <em>doang</em> </p> adalah elemen "p".


PENGERTIAN DARI ATRIBUT DI HTML

atribut itu info tambahan yang di berikan ke tag. Info ini dapart berupa intruksi yang bisa memberi warna di text, besar kecilnya huruf pada text, dan lain - lain. Dan masing - masing atribut juga memiliki pasangan nama dan Value (nilai), dan biasanya di tulis denan name="value". Nilai atau value ini biasanya berada diantara tanda kutip satu (') atau dua (").

Contohnya seperti ini :

1   |   <a href="http://www.togelbola88.com">ini adalah sebuah link bagus</a>

nah di kode yang tertulis barusan, href="http//www.togelbola88.com" adalah atribut. Dan href adalah nama dari atribut itu.

Engga semua tag sih bperlu pake atribut, tapi kita bakalan sering ngeliat tag beserta dengan atribut. apalagi atribut id dan class yang sering banget dipakai untuk memanipulasi website menggunakan Javascript dan CSS.

HTML juga punya atribut - atribut yang cocok di gunakan untuk tag - tag tertentu saja. Contohnya, "href" di pakai untuk tag <a> aja (dan ada juga tag lainya). Nah untuk mengulas lebih lanjut lagi tentang atribut seperti href ini, nanti bakalan kita bahas di tutorial selanjutnya ya :D dan di tutorial selanjut nya selain kita bakal ngebahas sedikit tentang href kita juga bakalan belajar tentang struktur dasar yang ada di halaman HTML.

Sunday, March 26, 2017

TUTORIAL HTML PART 004: BAGAIMANA CARA MENGOPERASIKAN FILE HTML?

 
 Halo Brosist kembali lagi nih sama mimin, seperti janji mimin kemarin ya, kali ini kita bakal sedikit belajar tentang bagaimana cara menjalankan file HTML. Nah jika di Tutorial sebelumnya kita sudah memiliki Web Browser dan Text Editor di komputer kita, Sekarang kita akan bahas bagaimana caranya menjalankan file HTML,  dari web browser.

Nah Biar kita mudah dan engga runyam untuk mengakses file HTML, ada baiknya kita buat satu folder yang berjudulkan "Tutorial HTML" di Drive D. Dengan adanya folder ini maka kita akan menjadikan folder ini sebagai tempat penyimpanan file HTML yang akan kita kerjakan.

Kemudian, Kita buka dahulu aplikasi Notepad++ yang sudah kita install di komputer atau laptop kita, atau mungkin aplikasi text editor yang lain juga bisa. Dan kita mulai dengan mengisi beberapa text seperti dibawah ini :

*     Selamat Pagi Dunia, Hello World!

Nah kemudan kita simpan atau kita save text tadi sebagai file hello.html, caranya brosist hanya perlu double klik pada file tersebut, bisa juga dengan cara mengklik kanan >> Open With >> Firegox ( kalau brosist menggunakan Firefox ya).
Menjalankan File HTML

Dan Hasil nya akan muncul seperti itu, Selamat kepada brosist ternya file HTML yang kita buat bisa berjalan dengan lancar meski sebenernya belum ada sih satu pun kode HTML di dalam file tersebut.

Tapi dari percobaan yang kita lakukan tadi brosist sendiri bisa melihat kalau semua halaman HTML itu harus diakhiri dengan extensi file (.html) . Brosist juga bakalan nemuin halaman-halaman yang mempunyai extensi .htm, lho kok .htm ??? Iya brosist ini dulu nya di gunakan pada windows versi dulu dimana windows veri lama ini hanya menggunakan 3 extensi huruf di belakang file.

Nah brosist, Semua yang kita kerjakan kali ini merupakan cara menjalankan file HTML di komputer lokal atau di komputer kita sendiri saja. Coba deh brosist perhatikan address atau alat di web browser kita tadi, di situ tertulis "file:///" yang kemudian diikuti dengan alamat file HTML yang kita simpan pada komputer brosist, contohnya :
"D:Tutorial HTML/hello.html". Dan ini bisa di artikan kalau kita engga harus online untuk menciptakan dan mengoperasikan file HTML.

Baik brosist, sesudah kita belajar dan mengetahui tentang bagaimana kita menjalankan file HTML di komputer kita sendiri atau komputer lokal, Di Tutorial selanjutnya, mimin bakalan ajak brosist untuk mulai mempelajari apa-apa saja kode HTML, seperti elemen, pengertian tag, dan beberapa attribute yang ada di HTML. Jadi brosist bisa lebih dalam lagi mengenal dan me mpelajari HTML.

Okedeh, sampai disini dulu tutorial kita brosist, jangan banyak-banyak biar brosist bisa mengerti lebih cepat dan mudah untuk diingat, yaaa biar seditkit demi sedikit kan lama-lama jadi bukit juga hehehe.



















































































Friday, March 24, 2017

TUTORIAL HTML PART 003 : PEMILIHAN APLIKASI HTML

Halo brosist, gimana kabarnya? kali ini kita bakal ngelanjutin lagi tutorial kita yang sebelumnya dan seperti janji mimin kemarin, kali ini kita bakal memilih aplikasi editor html. Jadi dari pada kita nunggu lama" langsung ajj dah ya.

Di tutorial sebelumnya kan kita udah belajar tentang apa itu web browser, dan setelah kita memiliki web browser yang sudah berhasil kita install, kita butuh sebuah aplikasi text editor. Nah kali ini di tutorial HTML kita kali ini kita bakalan ngebahas tentang gimana canya memilih aplikasi editor yang cocok buat kita, dan salah satunya itu adalah notepad++.

Aplikasi Editor HTML

Dalam memilih sebuah aplikasi seharusnya tidak terlalu sulit, apa lagi untuk HTML. Aplikasi editor HTML gunanya untuk membantu serta mempermudah kita dalam pembuatan kode-kode HTML. HTML yang pada dasarnya hanyalah text yang biasa-biasa saja tetapi ditulis dalam kode-kode khusus. Nah Web browser ini lah yang bakalan ngebantu kita buat nerjemahin kode-kode HTML supaya bisa menjadi tampilan web.

Untuk membuat web menggunakan HTML, kita engga perlu repot-repot menggunakan aplikasi yang berat dan besar. Notepad bawaan windows aja udah cukup buat bikin kode HTML kita. Tapi pada tutorial ini mimin bakal gunain aplikasi yang namanya notepad++.

Nah untuk aplikasi notepad++ ini brosist bisa obrak-abrik jenggotnya mbah google buat dapetin palis kasi ini secara gratis. Notepad++ ini adalah text editor yang ringan tapi punya banyak fitur, karena kecilnya ukuranya cuma 4MB doang. Dan salah satu fitur dari notepad++ ini adalah Syntax Highlighting atau pewarnaan kode yang akan membuat kita lebih mudah sewaktu penulisan HTML.



Terus Gimana Dong Dengan Adobe Dreamweaver?????

Adobe Dreamweaver sendiri adalah aplikasi editor web yang paling populer. Karena Adobe Dream Weaver sudah menyediakan berbagai fitur yang melimpah hanya untuk sekedar membuat halaman di web dengan menggunakan kode HTML. Dream Weaver sebenarnya tidak hanya Editor untuk HTML, tpi juga bisa untuk berbagai bahasa pemrograman web yang lainya.

Tapi dibalik keunggulanya itu, menurut mimin sendiri sih Dreamweaver engga begitu cocok buat belajar. Soalnya aplikasi ini rada berat dan harganya juga jutaan rupiah loh buat yang versi legalnya. Dan sekarang cuma bisa di dapat kalau kita berlangganan setiap bulanya. Dream Weaver itu lebih cocok buat di gunakan kalo brosist udah paham tentang kode-kode program yang ada di dalamnya.

Tapi nih, Apapun alatnya, apapun aplikasi yang digunakan, engga masalah kok. Soalnya selama text editor bisa menulis dan menyimpan text yang kita buat, aplikasi itu sudah lebih dari cukup untuk mengedit HTML.

*Aplikasi Alternative gratis yang bisa kita coba
-Komodo Edit
-Atom
-Bracket
-Aptana Studio
-Eclipse atau Net Beans

Nah brosist, setelah kita memiliki web browser dan aplikasi HTML kita di dalam komputer kita, maka tibalah kita untuk mencoba menjalankan file HTML pertama kita. Tapi kita lanjutin di tutorial selanjutnya ya :P mimin lapeeerrr XD Bye brosist



Wednesday, March 22, 2017

TUTORIAL HTML PART 002 : PENGERTIAN WEB BROWSER


Halo berjumpa lagi nih, Kali ini kita bakalan mengulas lagi tentang  HTML, Setelah sebelum kita udah pada pelajarin tantang apa itu pengertian dari  HTML di episode kita kali ini kita bakalan mengenal dulu yang namanya web browser, kenapa? karena browser ini memiliki kaitan dengan si  HTMLMari kita Scroll kebawah


Apa itu Web Browser?

Web Broser itu merupakan sebuat aplikasi atau software untuk menampilkan ,  menerima dan menterjemahkan informasi di internet. Dan tidak ketinggalan salah satu informasi tadi di buat dengan format  HTML.

Web Browser akan menerjemahkan dan menalpilkan kode HTML yang kita buat biar tampil dan muncul seperti yang kita inginkan. Sebenarnya semua Web Browser bisa menampilkan kode HTML, Tapi kalau sudah ngebahas desain halaman, masing-masing browser mempunyai beberapa perbedaan.

HTML memang diciptakan dan di atur oleh badan khusus standarisasi dunia yang biasa menangani soal web, siapa itu? dia adalah W3C ( World Wide Web Consortium). Kenapa? karen web browser memiliki cara yang berbeda-beda dalam menterjemahkan kode HTML, jadi di perlukanlah yang namanya sebuah standar untuk semua browser yang ada. Tapi sebenarnya standar seperti ini cuma rekomendasi. Dan tidak sedikit browser yang membuat aturan dengan sendirinya.

Seperti Internet Explorer. Sudah hampir lebih dari 90% browser yang di pakai adalah internet explorer, dan internet explorer ini ternyata tidak sepenuhnya mengikuti standar W3C. Dan yang menjadi tantangan para programmer sebenarnya adalah perbedaaan aturan-aturan pada setiap browser.

Apa Fungsi dari Web Browser?

Web Browser adalah aplikasi atau software utama yang kita butuh kan untuk mempelajari HTML.  Ibarat kata bahasa pemrograman, Browser itu compiler dan interpreter HTML. Kita bisa bebas menggunakan Web Browser yang kita mau, tapi dalam tutorial kita ini, kita bakalan menggunakan  Mozilla Firefox . Selain web browser, software atau aplikasi yg dibuthkan agar kita bisa mempelajari HTML adalah text editor, Apa itu text editor? Nah haha stop dulu... mimin laper nih, kita lanjutin tentang apa sih text editor itu di tutorial selanjutnya ya. bye bye * lari ke warung padang

Monday, March 20, 2017

TUTORIAL HTML PART 001 : APA ITU HTML ?

HTML ! ya HTML, kalau kita mau belajar dan mau tau gimana caranya membuat website, langkah pertamanya itu udah pasti kita harus belajar yang namanya HTML. HTML itu adalah dasar dari semua page atau halaman web yang sering kita buka-buka di internet. Namun apasih sebenernya HTML? nah kalo ini kita bakaln bahas tentang pengertian HTML di tutorial pertama kita. Monggo di pelongok in :P

HTML dan Pengertianya

HTML itu singkatanya Hypertext Markup Language. Kenapa disebut hypertext? karena didalam HTML sebuah text yang biasa-biasa saja bisa mempunya fungsi yang berbeda, dan kita dapat membuat link yang mampu berpindah - pindah dari satu halaman menuju ke halaman lainya cuma dengan klik text itu. Nah ini lah fungsi ini lah yang namanya hypertext, meskopum sebenatnya nanti tidak hanya text saja yang bisa kita jadikan link.

Markup Language, Kenapa disebut Markup Language? Karena bahasa HTML sendiri menggunakan tanda "mark", yang fungsi nya untuk memberi tanda pada bagian -bagian text. Contohnya text yang posisinya itu ada di antara tanda tertentu bisa menjadi tebal dan jika posisinya ada di antara tanda lainya maka bakalan keliatan besar. Tanda ini yang biasanya disebut dengan HTML tag.

Nah jadi kalau kita mau ngeliat gimana sih sebenernya HTML, kita tinggal klik kanan dan pilih View page Source di halaman ini (mozilla firefoc dan google chrome). Maka akan tampil halaman yang isi nya itu kode-kode ga jelas, tapi itu lah yang namanya kode HTML.



HTML itu adalah bahasa dasar dalam pembuatan web. Kenapa disebut dasat??? Karena kalau kita membuat web hanya dengan menggunakan HTML tampilan web kita bakalan berasa hambar banget. Sebenernya ada banyak bahasa pemrogramman web yang bisa dipakai untuk memanipulasi kode HTML, contohnya JavaScript dan PHP. Tapi sebelum kita belajar  JavaScript dan PHP, mendingan kita belajar dan pahami dulu yang namanya  HTML.

HTML itu bukan (programming language) atau baha pemrograman, tapi bahasa markup (markup language), Hal ini terdengar sedikit aneh sih, tapi kalau kita sudah mengenal baha pemrograman lain, dalam HTML  tidak akan ditemukan struktur yang biasanya kita temuin di bahasa program yang contohnya  IF,lOOP,  atau pun variable. HTML itu cuman bahasa struktur yang fungsinya cuma memberi tanda bagian-bagian dari sebuah hamalam, dan File HTML harus dijalakan dari aplikasi browser.

Sampai disini dulu untuk EPISODE PENGERTIAN HTML YA BROSIST semoga bermanfaat untuk kita semua yang mau belajar.






PREDIKSI PERTANDINGAN TOTTENHAM HOTSPUR VS NEWCASTLE UNITED 02 FEBRUARI 2019

PREDIKSI PERTANDINGAN TOTTENHAM HOTSPUR VS NEWCASTLE UNITED AGEN BOLA TERPERCAYA - Halo bertemu lagi kita pada pekan ini dimana hadir ...