Kamis, 17 Januari 2019

Daftar Isi Tutorial Blogging

Blogger.com merupakan layanan untuk membuat blog secara gratis yang cukup mudah untuk digunakan dengan fitur-fitur yang begitu banyak. Berbeda dengan penyedia layananan blog lainya seperti Wordpress, Blogger.com tidak memerlukan hosting yang mengharuskan kita membayar per periodenya.

01. Tutorial Blogging - Membuat Blog
02. Tutorial Blogging - Mengenal Menu-menu pada Blogger
03. Tutorial Blogging - Cara Memposting Artikel
04. Tutorial Blogging - Membuat Laman
05. Tutorial Blogging - Memasang Widget
06. Tutorial Blogging - Mengganti Template
07. Tutorial Blogging - Membuat Label
08. Tutorial Blogging - Memasang Favicon
08. Tutorial Blogging - Mengganti Judul dengan Logo

Rabu, 16 Januari 2019

Daftar Isi Tutorial HTML Dasar

Senin, 07 Januari 2019

Tutorial HTML - Text Formating


Di materi kali ini, kita akan mempelajari bagaimana cara memberi Style pada sebuah Teks. Dan style disini hanya merubah format teksnya, dan mungkin sedikit membahas bagaimana merubah warna teks dan lainya, walaupun pembahasan itu nanti lebih detail nya dijelaskan di seri CSS Dasar.

<b>Bold text ( Menebalkan Teks )
<strong>
:  Important text ( Mendifisikan Teks  yang penting** )
<i>:  Italic text ( Memiringkan Teks )
<em>:  Emphasized text ( Mendifisikan Teks  yang ditekankan** )
<mark>Marked text ( Menandai atau Menyorot Teks )
<small>Small text ( Mengecilkan Teks )
<del>Deleted text ( Memberikan efek Tercoret ** )
<u>:  Underline text ( Memberikan efek garis bawah )
<ins>Inserted text ( Mendefinisikan teks yang di input ** )
<sub>Subscript text ( Efek teks menjorok ke bawah )
<sup>Superscript text ( Efek teks menjorok ke atas )


Untuk cara menulisnya :
Bold<p>Ini bagian teks yang <b>tebal</b></p>
Important<p>Ini bagian teks yang <strong>Penting</strong></p>
Italic<p>Ini bagian teks yang <i>Miring</i></p>
Emphasized <p>Ini bagian teks yang <em>Ditekankan</em></p>
Marked <p>Ini bagian teks yang <mark>Ditandai</mark></p>
Small<h1>Ini bagian teks yang <small>Dikecillkan</small></h1>
Dell<p>Ini bagian teks yang <dell>Tercoret</dell></p>
Underline<p>Ini bagian teks yang <u>di Garis Bawahi</u></p>
Inserted<p>Ini bagian teks yang <ins>Terinput</ins></p>
Subscripted<p>Ini bagian yang diberi efek <sub>Subscript</sub></p>
Superscripted <p>Ini bagian yang diberi efek <sup>Superscript</sup></p> 


#Catatan 







Jika kita lihat tampilan di browser, maka  akan terlihat kesamaan Output atau yang ditampilan browser antara tag Bold dengan Important, Italic dengan Emphasized, Underline dengan Insert. Memang yang ditampilkan memiliki Output yang sama tetapi ada perbedaan Sifat dan Perilaku antara masing-masing tag/element.

Tutorial HTML - Paragraf dan Heading



Sebelum kita masuk ke pembahasanya, ada yang perlu saya sampaikan terlebih dahulu, bahwa semua "Konten" dalam tampilan sebuah website itu harus dibungkus dengan Tag-tag HTML. Walaupun mungkin ada kasus dimana untuk menampilkan "Konten" itu tidak memerlukan Tag HTML, tapi  itu adalah penulisan yang salah.

#Catatan : semua kode tampilan website, harus ditulis didalam tag <body> 

Sekarang kita lihat saja contoh kasusnya, jika di dalam tag body, saya hanya menuliskan konten yang isi nya "Ini adalah penulisan yang salah" maka bisa saja menulis nya seperti ini :
<!DOCTYPE html>
<html>
   <head>


   <head>

   <body>
        Ini adalah penulisan yang salah
   </body>
</html>
Maka tulisan "ini adalah penulisan yang salah" akan ditampilkan di browser, tapi seperti yang saya jelaskan tadi bahwa itu adalah penulisan yang salah. Karna HTML-nya tidak mengenali tulisan "ini adalah penulisan yang salah" mempunyai arti apa?

Untuk lebih lanjutnya kita langsung ke pembahasanya, dan kali ini kita akan memulai untuk mempelajari Paragraf dan Heading, apa kegunaanya dari tag kedua nya dan bagaimana menulisnya.

1. Paragraf
Element paragraf atau tag paragraf itu akan mengartikan bahwa konten di dalamnya adalah sebuah paragraf, baik paragraf itu satu kata, dua kata, atau sampai berbaris-baris. Untuk menulisnya cukup simpel, yaitu dengan menuliskan tag <p>, dan tentu saja dengan tag penutupnya </p>. Contoh :
<p>Ini adalah  sebuah paragraf </p>
#Catatan : dalam penulisan kode HTML ini, spasi tambahan atau enter (menambah garis baru ) itu tidak akan di tampilkan di browser, itulah sifat bahasa HTML. Contohnya :
<p>Ini adalah        sebuah        paragraf </p>
<p>
Ini adalah 
paragraf yang lain
dengan menambahkan
enter
</p>
Maka browser akan menghapus semua tambah itu, dan akan diubah menjadi teks yang normal, tanpa ada spasi yang berlebihan dan enter. Lalu bagaimana jika kita ingin paragraf yang berada di garis baru? Kita bisa menggunakan tag <br> tanpa tag penutupnya.
<p> Ini adalah paragraf <br> dengan garis baru</p>

2. Heading
Tag heading akan di artikan sebagai "Judul". Jika kita melihat website-website, maka ada sebuah "Judul" dari postingan, yang paling mencolok dan menarik perhatian bagi orang yang melihat website itu.


Tag heading dapat ditulis dengan tag <h1> sampai tag <h6>, bisa di artikan bahwa tag <h1> itu merupakan "Judul Utama-nya" dan tag <h2> sampai <h6> adalah "Sub Judul-nya". Contoh penulisanya :
<h1>Ini adalah heading</h1>
<h2>Ini adalah heading</h2>
<h3>Ini adalah heading</h3>
<h4>Ini adalah heading</h4>
<h5>Ini adalah heading</h5> 
<h5>Ini adalah heading</h6>  
Jika kita lihat tampilannya di browser, maka ukuran tag <h1> yang paling besar ukuranya, dan tag selanjutnya akan lebih kecil dan sampai ke tag <h6> yang ukuranya paling kecil. Itu adalah ukuran default yang ada pada HTML, namun kita juga merubah sesuai keinginan kita.

Untuk tambahanya, ada satu tag HTML yang berhubungan tag Heading ini, yaitu tag <hr> yang mempunya arti "Horizontal Rule" dalam bahasa indonesia bisa di artikan "Garis Horizonal". Tag <hr> ini biasa nya dipakai untuk memisahkan Judul dengan Konten-nya, di tulis setelah tag <h1> baru kemudian tag <p> sebagai pembungkus Kontenya.
<h1>Ini adalah Judul</h1>
<hr>
<p>Ini dalah kontennya</p>

Sekian untuk tutorial kali ini --

Jumat, 04 Januari 2019

Tutorial CSS Dasar - Intro

Setelah kita menyelesaikan pembelajaran tentang HTML, yang merupakan basic nya membuat sebuah Website, maka kita harus mempelajari yang nama nya CSS. Lalu apa itu CSS dan apa fungsi nya dalam kegiatan membuat sebuah Website.

Untuk lebih mudah menjelaskanya, saya akan menjelaskanya dalam sebuah gambar :


Pada gambar ini terlihat HTML itu adalah sebuah kerangka manusia yang lengkap dari mulai kepala sampai kaki. Dan CSS disini diumpakan sebagai seorang manusia, lengkap dengan baju, celana dan sepatu nya.

Itu arti nya HTML adalah sebuah kerangka yang berupa tag-tag html yang disusun menjadi kerangka sebuah website. Dan CSS yang berguna untuk menutupi atau mempercantik kerangka itu tadi. Agar terlihat lebih menarik, lebih elegan dan enak untuk di lihat.

Lalu apa kepanjangan CSS itu sendiri..?
CSS adalah kependekan dari Cascading Style Sheet. Dalam pembelajaran kita mengenai CSS ini, kita akan mempelajari cara merubah warna text atau background, menentukan posisi suatu elemen dan lain sebagainya.

Jadi, ikuti terus kelanjutan Tutorial CSS ini!!
Oke sekian, Enjoyy


Kamis, 29 November 2018

Tutorial HTML - Dasar Tag HTML


Untuk membuat file html, hal awal yang harus dilalukan adalah membuat file dengan extensi file ".html". Jadi sebelum kita mulai untuk menulis baris kode html, kita harus menyimpan file tersebut dengan extensi file ".html". Jadi supaya di biasakan sebelum menulis baris kode kita simpan dulu dengan extensi file ".html".

1. Element
Elemen HTMl biasanya terdiri dari tag pembuka dan tag penutup, walaupun tidak semua tag harus ada tagpembuka dan tagpenutup, dan kontenya disisipkan di tengahnya :

Dibiasakan dan jangan lupa, ketika kita menulis tag pembuka kita harus menulis tag penutupnya. Karna akan erorr jika dari tagpembuka dan tagpenutup ada yang salah dalam penulisanya.
<namatag> isi konten </namatag>

 atau

<tagpembuka> isi konten </tagpenutup>
Semua dokumen atau file html harus di mulai dengan mendeklarasikan tipe dokumen <!DOCTYPE html> tag ini juga untuk mendeklarasikan bahwa ini adalah HTML5. Kemudian diikuti dengan tag html pembuka <html>, dan tag html penutup </html>. Dan di dalam nya kita buat 2 tag lagi. yaitu tag <head> dan tag <body>, tentunya ada tag pembuka dan tag penutup. Kemudian dengan tambahan tag <title> di dalam tag <head>.

<!DOCTYPE html>
<html>
   <head>
      <title>Website Pertama Saya</title>
   <head>

   <body>

   </body>
</html>


Penjelasan bari kode diatas :
- <!DOCTYPE html> : Mendeklarasikan atau mengartikan HTML 5
- <html> : Tag yang memuat semua kode HTML-nya
- <head> : Tag yang berisi semua info website
- <body> : Tag yang berisi semua kode tampilan website  

Jika ingin menampilkan sesuatu di Halaman Website kita bisa memakai tag <h1>
<h1>Hallo ini adalah website pertama saya</h1> menjadi seperti ini :


<!DOCTYPE html>
<html>
   <head>
      <title>Website Pertama Saya</title>
   <head>
<body>
<h1>Hallo ini adalah website pertama saya</h1>

   </body>
</html>
 
2. Attribut
Attribut dalam  HTML adalah sebuah informasi tambahan yang ada pada Element HTML, informasi yang ada bisa berupa apa saja, misalnya informasi sebuah link, warna teks, warna background, letak, title dan lainya.

Dan Attribut pada HTML memiliki beberapa sifat atau perilaku, diantaranya :
   1. Semua Element pada HTML dapat memiliki  Attribut
   2. Memberikan informasi tambahan tentang suatu elemen
   3. Atribut selalu ditulis pada tag awal 
   4. Memiliki Name dan Value ( nama dan nilai )
<p style="color:red">Ini adalah sebuah paragraf</p>
Seperti yang kita lihat, bahwa style="color:red"yang dinamakan Attribut. Name nya adalah color dan Value nya red. Dan pada baris kode diatas Attribut ditulis pada tag pembuka atau tag awal.

Jadi ini adalah dasar dari sebuah tag yang ada pada bahasa pemograman HTML. Sampai saat ini masih sangat simple, kita hanya menulis beberpa tag.

Okey, Sekian dan Enjooyy!

Tutorial HTML - Persiapan

Sebelum kita ke Tutorial nya, ada beberapa hal yang harus dipersiapkan, yaitu menginstall aplikasi atau software pendukung untuk pembelajaran HTML kita nanti. Secara global ada 2 hal yang perlu Wajib dipersiapkan, yaitu Web Browser dan Text Editor, sedangkan selain itu sifat nya opsional.

1. Web Browser
Karna kita akan membuat Website, maka kita perlu sebuah Software yang berfungsi untuk menampilkan halaman Web kita, yang memang pada dasarnya terbuat dari HTML.

Ada banyak sekali browser saat ini, sekalipun kita tidak menginstall sebuah web browser di PC atau Laptop, pasti sudah terinstall yang namanya Internet Exploler jika menggunakan OS Windows, Safari (Mac), Firefox (Linux). 

Tetapi disini saya merekomendasikan Chrome atau Mozilla Firefox.
Untuk mendownload Chrome atau Mozilla, silahkan kunjungi Official Website nya :
Download Chrome atau Download Mozilla

 2. Text Editor
Text Editor ini akan kita gunakan untuk menulis baris program HTML-nya, atau sering juga di sebut NGODING. Sama hal-nya dengan Web Browser, ada banyak juga Text Editor, dari yang ukuranya besar seperti Adobe Dreamweaver, sampai yang ukuran rendah. Karna kita dalam tahap awal, saya sarankan untuk menggunakan Text Editor yang ukuranya kecil tapi sangat banyak fitur yang memudahkan dalam proses ngoding kita nanti.

Beberapa Text Edior ringan yang kaya fitur diantara nya :
1). Notepad++ | Download
2). Sublime Text | Download
3). Atom | Download
4). Brackets | Download
5). Dll


Dan disini saya akan memakai Text Editor Sublime Text, dan untuk teman-teman silakan memakai Sublime Text juga atau menggunakan Text Editor yang lain. Karna kegunaan Text Editor sama saja, yang membedakan adalah Fitur-nya.

Okey sampe sini, Sekian dan Enjooyy!!