Fitur Google : API program applikasi

Saat memeriksa html ada link yang menuju ke google developer dengan kata kunci googleapis atau ajax. Nah tentunya untuk memahaminya kita harus tau dulu apa itu google api..

Google API bisa di katakan bagian dari Framework Google. 

API  : Application Programming Interface.

Ini sangat berguna bagi pengembang web dan pengembang aplikasi desktop yakni untuk memanfaatkan berbagai fitur yang disediakan oleh Google antara lain :
- AdSense,
- Search Engine,
- Translation maupun
-  YouTube.

API  diartikan sebagai kode program yang disederhanakan yang merupakan penghubung antara aplikasi atau web yang kita buat dengan fungsi-fungsi yang dikerjakan. 

Misalnya Google API  pada aplikasi atau web yang memanfaatkan fitur  Google Map.

Google API dapat dipelajari langsung melalui Google Code. 

Ada banyak API yang disediakan oleh Google, :
1. Language API
untuk memanfaatkan fitur translation yang dimiliki Google.
2. Earth API
untuk memanfatkan fitur yang ada pada Google Earth
3. Javascript API
4. Maps API
untuk memanfaatkan fitur yang ada pada Google Maps
5. Search API
untuk memanfaatkan fitur pencarian pada Google Search
6. Visualization API
untuk membuat grafik maupun chart dengan Google API
7. YouTube API
untuk memanfaatkan fitur yang ada pada YouTube
misalnya untuk pencarian video

Salah satu cara mudah mempelajari Google API adalah dengan memanfaatkan Google AJAX APIs Playground. 

AJAX APIs playground adalah sebuah situs yang disediakan oleh Google bagi kita untuk mencoba secara langsung sejumlah Google API yang berbasis AJAX (Asynchronous Javascript and XML).
Karena berbasis AJAX maka tentunya semua kode program dalam sintaks Javascript yang bisa kita lihat, kopi dan paste secara langsung untuk digunakan pada website kita.
Dengan menggunakan Google AJAX API, kita bisa mengintegrasikan data pada website kita dengan API yang disediakan oleh Google.

Semoga artikel tentang Google API ini bermanfaat ya,, terus belajar optimalkan diri kita dengan semangat!

Read More

Versi Apa Jquery yang ada di Template Blog kita?

Kali ini Belajar Optimalkan akan membahas tentang  Jquery

Apa itu Jquery ?

Jquery adalah kumpulan JavaScript yang fungsinya untuk mempersingkat (menyerderhanakan) penulisan kode JavaScript itu sendiri yang mana akan berdampak pada kecepatan loading suatu blog..

nahh jadi penting juga kan untuk SEO blog kita... 

Misalnya,
dalam sebuah script widget tanpa Jquery, bisa tersusun atas 4-5 baris script,
sedangkan jika menggunakan Jquery, kemungkinan script widget tersebut dapat dipotong menjadi hanya 1-2 baris script JavaScript.
Sebenarnya, selain Jquery, masih ada library/kumpulan javascript yang sederhana lainnya,
seperti midori, YUI Library, dan lain sebagainya.
Namun, Jquery memiliki keunggulan tersendiri, yaitu cepat, dan terkenal, sehingga lebih mudah digunakan.

Contoh widget yang menggunakan Jquery dapat Anda lihat disini.

Google dan Microsoft adalah 2 dari sekian banyak website di internet yang menggunakan Jquery. Blogger juga dapat menggunakan Jquery.
Ada banyak versi Jquery yang beredar.
Biasanya, semakin baru versi Jquery, semakin baik kemampuannya.

Jika Anda ingin mengetahui versi Jquery di blog Anda, caranya cukup mudah. 

Ikuti beberapa langkah berikut :

1. Buka blog Anda di Blogger.com, lalu masuk ke Template.
2. Pada menu Template, klik pilihan Edit HTML.
3. Tekan CTRL + F untuk mencari kode url berikut :

http://ajax.googleapis.com/ajax/libs/jquery

Jika Anda menemukan kode pada langkah nomor 3, perhatikan angka yang ada setelahnya. Angka tersebut menunjukkan versi Jquery yang terpasang di blog Anda.

Jika Anda tidak menemukan kode URL diatas, berarti blog Anda belum menggunakan Jquery.

Bagaimana, mudah bukan cara mengetahui versi jquery?
Jika Anda merasa artikel ini bermanfaat, tolong share dengan menggunakan share tools yang ada di bawah ini yaaa.

Selamat mencoba!

Read More

Apa itu Kanonis, dan cara membuatnya Lengkap.

Apa itu Kanonis, dan cara membuatnya Lengkap.

Secara tidak langsung hal ini juga akan mempengaruhi nilai SEO situs di mata mesin telusur.
Jika kita memiliki satu halaman yang dapat diakses dengan beberapa URL, atau beberapa halaman dengan konten yang serupa (misalnya, halaman dengan versi seluler dan desktop), Google melihatnya sebagai versi duplikat dari halaman yang sama.

Google akan memilih satu URL sebagai versi kanonis dan meng-crawl-nya, serta menganggap semua URL lainnya sebagai URL duplikat dan jarang meng-crawl-nya.

Jika kita tidak secara eksplisit menyebutkan URL mana yang kanonis, Google yang akan menentukan pilihan, atau mungkin keduanya dianggap valid, yang berisiko menimbulkan perilaku yang tidak diinginkan.

Mengapa kita butuh menentukan kanonis?

Jadi begini...
Saat mengindeks situs, Googlebot mencoba menentukan topik yang dicakup dalam setiap halaman.
Jika Googlebot menemukan beberapa halaman yang serupa pada situs yang sama, Googlebot memilih halaman yang dianggap paling lengkap dan berguna, kemudian menandainya sebagai kanonis.
Yang paling sering di-crawl adalah halaman kanonis, sedangkan duplikat tidak terlalu sering di-crawl untuk menghemat biaya crawling pada situs kita.

Jadi, jika kita tidak memberi tahu Googlebot halaman mana yang kanonis, lalu menentukan halaman kanonis yang berbeda, kita menjadi pembuang waktu dengan mengupdate halaman yang tidak akan sering diindeks oleh Googlebot atau ditampilkan dalam hasil penelusuran.

Google menggunakan halaman kanonis pada situs , sebagai standar tertinggi  dalam mengevaluasi konten dan kualitas situs kita,
dan hasil Google Penelusuran biasanya mengarah ke halaman kanonis, 
kecuali jika salah satu duplikat secara eksplisit lebih cocok dengan kueri pengguna
contohnya,
hasil penelusuran mungkin mengarah ke halaman seluler jika pengguna menggunakan perangkat seluler, meskipun halaman desktop ditandai sebagai kanonis.

Mengapa situs  bisa memiliki URL yang berbeda namun mengarah ke halaman yang sama? 

Jawabnya adalah :

• Untuk mendukung berbagai jenis perangkat:

https://contoh.com/berita/binatang
https://m.contoh.com/berita/binatang
https://amp.contoh.com/berita/binatang

• Untuk mengaktifkan URL dinamis bagi beberapa hal seperti parameter penelusuran atau ID sesi:

https://www.contoh.com/produk?kategori=baju&warna=hijau
https://contoh.com/baju/koktail?gclid=ABCD
https://www.contoh.com/baju/hijau/bajuhijau.html

• karena sistem blog ada yang otomatis menyimpan beberapa URL saat kita menempatkan entri blog yang sama pada beberapa sesi.

https://blog.contoh.com/baju/hijau-baju-bagus/
https://blog.contoh.com/hijau-barang/hijau-baju-bagus/

• karena ada server yang dikonfigurasi untuk menayangkan konten yang sama untuk varian www/non-www atau http/https:

http://contoh.com/hijau-baju
https://contoh.com/hijau-baju
http://www.contoh.com/hijau-baju

• karena ada konten yang di tayangkan pada blog untuk distribusi offline ke situs lain direplikasi sebagian atau sepenuhnya di domain tersebut:

https://news.contoh.com/hijau-baju-untuk-tiap-hari-155672.html (postingan yang dapat didistribusikan offline)
https://blog.contoh.com/baju/hijau-baju-bagus/3245/ (postingan asli)

Alasan mengapa kita perlu memilih halaman kanonis secara eksplisit dalam kumpulan halaman duplikat/serupa, yaitu :

=  URL akan ditentukan, mana yang ingin dilihat orang dalam hasil penelusuran. 
kita mungkin lebih suka orang membuka halaman produk gaun hijau melalui https://www.contoh.com/baju/hijau/bajuhijau.html, bukan melalui https://contoh.com/baju/koktail?gclid=ABCD.
=  sinyal link untuk halaman yang serupa atau duplikat akan dikonsolidasikan. 
Tindakan ini membantu mesin telusur agar dapat mengonsolidasikan informasi yang dimiliki untuk URL individual (misalnya link ke URL individual tersebut) pada 1 URL pilihan.
Artinya, link dari situs lain ke http://contoh.com/baju/koktail?gclid=ABCD dikonsolidasikan dengan link ke https://www.contoh.com/baju/hijau/bajuhijau.html.
=  pelacakan metrik untuk 1 produk/topik akan menjadi sederhana. 
Dengan berbagai variasi URL, akan lebih sulit untuk mendapatkan metrik hasil konsolidasi untuk bagian konten tertentu.
= konten bersindikasi akan terkelola dengan baik. 
Jika menyindikasikan konten untuk dipublikasikan di domain lain, kita perlu mengonsolidasikan peringkat halaman ke URL pilihan.
=  crawling yang tidak diperlukan pada halaman duplikat akan bisa dihindari. 
Jika ingin mendapatkan hasil maksimal dari situs, sebaiknya minta Googlebot untuk melakukan crawling halaman baru (atau yang diupdate) pada situs kita, daripada melakukan crawling halaman yang sama pada versi desktop dan seluler.

Cara Menemukan URL mana yang dipilih google sebagai kanonis adalah :

dengan menggunakan fitur Inspeksi URL
Perhatikan bahwa meskipun  secara eksplisit halaman kanonis sdh kita tentukan, Google mungkin memilih halaman lain sebagai kanonis karena berbagai alasan, seperti performa atau konten.
Berikut ini faktor/sinyal Google memilih halaman kanonis yakni :
1. penayangan halaman melalui http atau https;
2. domain pilihan pengguna;
3. kualitas halaman;
4. keberadaan URL dalam peta situs; dan
5. pemberian label "rel=canonical" apa pun.
JADI, Kita tidak dapat memaksa Google untuk memilih halaman kanonis, tetapi  dapat mempengaruhi pilihan tersebut dengan menggunakan teknik.

Beberapa Cara untuk menentukan halaman kanonis adalah :

I. Tetapkan Domain Pilihan

Domain pilihan adalah domain yang akan digunakan untuk mengindeks laman situs atau versi yang ingin digunakan untuk situs dalam hasil penelusuran (disebut juga domain kanonis).

Jika ada pesan bahwa situs kita tidak diindeks, hal ini dapat terjadi karena situs diindeks dengan domain yang berbeda.
Maka dari itu, kita harus menentukan domain pilihan kita selanjutnya beritahukan kepada google hal tersebut. Karena jika tidak , google  dapat memperlakukan versi domain yang berbeda tersebut sebagai referensi yang terpisah untuk laman yang terpisah.

Dibutuhkan beberapa saat sebelum perubahan ini sepenuhnya di indeks google. Semua laman yang saat ini menampilkan versi URL yang bukan domain pilihan dalam indeks akan tetap ada di indeks sampai google menyegarkan pengindeksan atas laman tersebut.

Cara Menentukan domain pilihan:
- Di Beranda Search Console, klik situs yang  diinginkan.
- Klik ikon roda gigi , lalu klik Setelan Situs.
- Di bagian Domain pilihan, pilih opsi yang diinginkan.
- verifikasi kepemilikan versi www dan non-www domain kita.
Hal ini akan memengaruhi perayapan dan pengindeksan, jadi kita perlu memastikan google tahu kita adalah pemilik kedua versi tersebut. Biasanya, kedua versi menunjukkan lokasi fisik yang sama, namun tidak selalu demikian. Umumnya, begitu verifikasi satu versi domain berhasil, maka google akan  dapat memverifikasi yang lain dengan mudah. Namun, jika  file, tag meta, atau data DNS telah terhapus maka kita perlu mengulangi langkah verifikasi.

Setelah menentukan domain pilihan,  pengalihan 301 dapat dipakai untuk mengalihkan traffic dari domain yang bukan pilihan kita, sehingga mesin telusur lain dan pengunjung mengetahui versi pilihan kita.

Misalnya untuk domain:
https://www.contoh.com
https://contoh.com

Jika kita menetapkan domain yang kedua yaitu https://contoh.com,
Google akan memperlakukan URL serupa atau halaman pada https://www.contoh.com sebagai duplikat halaman di https://contoh.com

Dari pemisalan domain pilihan diatas, maka lanjut gunakan Search Console untuk menentukan URL pada 1 domain yang telah ditetapkan tersebut sebagai kanonis.

Note : Jangan menggunakan Search Console untuk situs salinan http/https.

Kelebihan Cara ini adalah :
Sangat mudah diimplementasikan, dikelola, dan diubah
Gunakan jika yang dimiliki adalah situs di domain yang berbeda.

Kekurangan Cara ini adalah :
Hanya berfungsi pada perincian domain, dan halaman harus memiliki jalur dan nama yang identik agar dianggap duplikat.
Hanya mengaktifkan pemetaan per halaman untuk halaman yang diberi nama jalur yang identik.

II. Tag rel=canonical
Tambahkan tag dalam kode untuk semua halaman duplikat, yang mengarah ke halaman kanonis.
Gunakan tag link rel="canonical"
kita dapat menggunakan tag di header halaman untuk menunjukkan bahwa halaman adalah duplikat halaman lain.




Misalnya,  https://contoh.com/baju/hijau akan dijadikan  URL kanonis,
walaupun berbagai URL dapat mengakses konten ini.
Tunjukkan URL ini sebagai kanonis melalui langkah-langkah berikut:

1. Tandai semua halaman duplikat dengan elemen link rel="canonical".
Tambahkan elemen <link></link> dengan atribut rel="canonical" ke bagian <head> di halaman duplikat, yang mengarah ke halaman kanonis, seperti ini:
<link href="https://contoh.com/baju/hijau" rel="canonical"></link>

2. Jika halaman kanonis memiliki versi seluler, tambahkan link rel="alternate" ke halaman tersebut, yang mengarah ke versi seluler halaman:
<link href="http://m.contoh.com/baju/hijau" media="only screen and (max-width: 640px)" rel="alternate"></link>

3. Tambahkan hreflang atau pengalihan lainnya yang sesuai untuk halaman.

Kelebihan cara kedua ini adalah :
Dapat memetakan halaman duplikat dalam jumlah yang tidak terbatas.

Sedangkan Kekurangan :
Dapat menambah ukuran halaman.
Pengelolaan pemetaan dapat menjadi kompleks pada situs yang besar atau situs dengan URL yang sering berubah.
Hanya berfungsi untuk halaman HTML, bukan untuk file seperti PDF.
Untuk itu, kita dapat menggunakan header HTTP rel=canonical.

III.  header rel=canonical 

Cara header HTTP rel="canonical" (bukan tag HTML) ini dilakukan Jika kita dapat mengonfigurasi server untuk menunjukkan URL kanonis untuk dokumen non-HTML seperti file PDF.

Kelebihan:
Tidak meningkatkan ukuran halaman.
Dapat memetakan halaman duplikat dalam jumlah yang tidak terbatas.

Kekurangan:
Pengelolaan pemetaan dapat menjadi kompleks pada situs yang besar atau situs dengan URL yang sering berubah.

IV. Peta Situs

Pilih URL kanonis untuk setiap halaman dan kirimkan dalam peta situs.
Semua halaman yang tercantum dalam peta situs sebaiknya berupa kanonis.
Googlebot akan menentukan halaman mana (jika ada) yang duplikat, berdasarkan kemiripan kontennya.

Peta situs adalah cara yang tepat untuk memberi tahu Google halaman mana yang dianggap paling penting di situs.

Jangan menyertakan halaman non-kanonis dalam peta situs.
Jika menggunakan peta situs, tentukan hanya URL kanonis dalam peta situs tersebut.

Kelebihan:
Mudah dilakukan dan dikelola, terutama di situs besar.

Kekurangan:
Googlebot masih harus menentukan duplikat terkait untuk setiap kanonis yang dinyatakan di peta situs.
Sinyal kurang kuat untuk Googlebot dibandingkan teknik pemetaan rel=canonical.

V. Pengalihan 301 untuk URL yang tidak aktif

Cara ini dipakai jika ingin menghapus halaman duplikat , tetapi harus dipastikan transisinya berjalan lancar sebelum menonaktifkan URL lama.

Misalnya,
halaman yang bisa dijangkau dengan beberapa cara:

https://contoh.com/home
https://home.contoh.com
https://www.contoh.com

Pilih salah satu URL tersebut sebagai URL kanonis, dan gunakan pengalihan 301 untuk mengirim traffic dari URL lain ke URL pilihan (URL kanonis).
Pengalihan 301 sisi server adalah cara terbaik untuk memastikan bahwa pengguna dan mesin telusur diarahkan ke halaman yang tepat.
Kode status 301 berarti halaman telah dipindahkan secara permanen ke lokasi baru.

Jika situs menggunakan layanan hosting situs, lakukan penelusuran  tentang penyiapan pengalihan 301.

Gunakan pengalihan ini hanya jika halaman duplikat tidak digunakan lagi.

VI. Variasi AMP
Jika salah satu variasi situs menggunakan AMP, maka harus mengikuti panduan AMP untuk menunjukkan halaman kanonis dan variasi AMP.


Meskipun sebaiknya menggunakan salah satu dari keenam metode diatas, namun itu ssemuanya tidak wajib. Jikakita tidak mengindikasikan URL kanonis, maka google akan mengidentifikasi URL atau versi yang terbaik menurut google.

Sekian semoga ada manfaat dari uraian artikel definisi , fungsi dan cara membat kanonis secara lengkap ini yang bisa pengaruh untuk nilai SEO situs dalam hal pengindex an oleh mesin telusur.

Read More

Menentukan Kueri untuk kinerja blog di mata google

Untuk mencapai kinerja blog yang baik dalam serp (search engine result page) google atau

Menentukan Kueri untuk kinerja blog di mata google 

tentunya kita harus tahu dulu proses kerja google search engine dan memahami kueri penelusuran Google.

Artikel ini khusus membahas cara kerja kueri penelusuran google yang sebenarnya.

Pada dasarnya tiap kali kita coba untuk memilih judul atau menentukan judul untuk menunjukkan dalam hasil pencarian, google sedang mencari deskripsi singkat dari halaman yang relevan dengan permintaan pengguna.

Kriteria yang akan di lihat google adalah : 

1. deskripsi  yang relatif singkat.
2. penjelasan halaman yang relevan dari situs aktif.
3. relevan dengan query.
Jadi jika judul HTML yang ada sesuai kriteria tersebut, maka sering kali default akan hanya menggunakan judul Anda.

Google akan menggunakan konten pada halaman dan melihat link kita , kemudian menggabungkan beberapa teks dari link tersebut atau menggunakan Open Directory Project untuk mencari tahu judul yang baik dan relevan.

Google menawarkan tips untuk membuat judul halaman deskriptif di pusat bantuan. 

Ini menunjukkan dan memastikan setiap halaman di situs memiliki judul yang ditentukan dalam tag judul.

Jadi untuk menentukan kueri penelusuran google , cantumkan di blog kita :

- judul yang mendominasi
- deskripsi artikel singkat
- konten yang relevan serta kaya dengan keyword
- anchor link

 perkaya konten , serta berikan anchor link yang relevan dengan artikel  yang lainnya

Sekian , Semoga Bermanfaat rangkuman tentang kueri penelusuran google untuk kinerja blog kita. 

Read More

Menghubungkan HTML dengan CSS | Apa itu Class dan Id

Belajar Optimalkan

Menghubungkan HTML dengan CSS

Tag <link> lah yang bisa digunakan untuk menghubungkan html dengan css, letakkan pada bagian element head pada struktur HTML.

Contoh applikasinya :

File html bisa diberi nama dengan : index.html

File css dengan nama style.css

Ini index.html :

<head>
<title>Menghubungkan HTML dengan CSS | www.bloggerdokter.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head> 

<body>
<h1>Belajar HTML menghubungkan html dengan css</h1>
</body>

Artinya :

• atribut rel=”stylesheet” dan type=”text/css”

menjelaskan bahwa file yang dipanggil atau dihubungkan adalah file stylesheet atau css.

• atribut href di gunakan untuk meletakkan lokasi dan nama file css yang ingin dihubungkan.

pada contoh ini file html dihubungkan dengan file css yang bernama style.css

Jika di jalankan pada browser maka tidak akan muncul apa-apa karena pada file html masih kosong
belum berisi element apapun selain struktur dasar html.

Tag h1 dalam tag body adalah CONTOH untuk meninjau apakah file css sudah berhasil terhubung dengan file html. 

Ini file CSS nya : style.css

h1{ color: orange; font-family: sans-serif; text-align: center; }

yang artinya kata kata dalam tag h1 akan tampil dengan warna orange,dst sesuai style.css

Hasilnya bisa buktikan sendiri ya..

Class dan Id pada HTML merupakan dasar yang harus di pahami sebelum mempelajari CSS.

Class dan id bisa di bilang sebagai penanda pada html,

maksud penanda di sini adalah element-element html dapat di beri tanda dengan class atau id. 

Untuk apa di beri tanda ? 

agar dapat di manipulasi menggunakan css atau javascript. 

Praktisnya begini :

jika ada empat kertas, semua kertas berwarna orange, kemudian kita ingin mengubah warna kertas yang keempat menjadi biru, nah di sinilah letak kegunaan class dan id, 

yakni, untuk memberikan tanda atau nama pada kertas  agar bisa di ubah dan kertas yang lain tidak akan berubah.

Perbedaan dari class dan id 

class di panggil pada css atau javascript dengan menggunakan tanda titik “.”

id di panggil pada css atau javascript dengan tanda pagar “#”, 

kelebihan  class : dapat di berikan pada banyak element html dan dapat di panggil sekaligus, sedangkan id hanya dapat bekerja pada satu penandaan saja, maksudnya satu nama id hanya bisa di berikan pada satu element saja. 

Aplikasinya seperti ini :

index.html

<head>
<title>Mengenal Class dan Id pada HTML | www.bloggerdokter.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Mengenal Class dan Id pada HTML<br/>www.bloggerdokter.com</h1>
<!-- contoh penggunaan class -->
<div class="kertas">kertas 1</div>
<div class="kertas">kertas 2</div>
<div class="kertas">kertas 3</div>
<!-- contoh penggunaan id -->
<div id="kertas">Kertas 4</div>
</body>

style.css

h1{ color: orange; font-family: sans-serif; text-align: center; }
 .kertas{ padding: 50px; width: 100px; color: #fff; margin: 10px; background: orange; }
#kertas{ width: 400px; color: #fff; background: blue; padding: 50px; }

Arti dari contoh applikasi diatas adalah :
kertas 1,  2 dan  3 diberi tanda dengan class yang kita beri nama “kertas”,
kertas 4 diberi tanda dengan id yang diberi nama kertas juga.

maka perbedaannya di sini akan tampak, bahwa

• class bisa di panggil sekaligus, ini di buktikan dengan kertas 1,2 dan 3 di beri tanda class yang sama yaitu class kertas,  di panggil dengan tanda titik “.” 
• kertas 4 diberi tanda dengan id kertas, di panggil dengan tanda pagar “#”.

Read More

Belajar HTML : Gambar dan Iframe

Belajar Optimalkan

Gambar

Untuk menampilkan gambar dengan HTML
harus menggunakan tag img kemudian masukkan atribut “src=” pada tag .

Atribut src berguna untuk menghubungkan dengan file gambar,

jadi atribut src ini di gunakan untuk pemanggilan lokasi dan nama file gambar.
Jika file gambar terletak satu folder dengan file html yang bertugas untuk menampilkan gambar ini maka kita bisa langsung memasukkan nama file gambar yang ingin di tampilkan tersebut pada atribut src ini, tapi jika file gambar berada pada folder yang berbeda dengan file html yang menampilkan gambar maka anda bisa menambahkan nama folder nya seperti misalnya “nama_folder/filegambar”.
Jika file gambar berada di luar folder file html yang menampilkan gambar maka anda bisa menambahkan perintah “../”.

Ukuran gambar yang tampil dengan menambahkan atribut height=”....”

untuk mengatur tinggi gambar, dan menambahkan aribut width=”....” untuk menentukan lebar gambar yang tampil.
Tetapi cara ini sangat tidak di rekomendasikan karena anda harus memberikan atribut height dan width pada semua gambar yang anda tampilkan.
Jadi cara untuk mengatur ukuran gambar yang benar anda bisa menambahkan class atau id pada tag dan kemudian mengatur tinggi dan lebarnya menggunakan CSS.
Seperti contoh di bawah ini :

<head>
<title>Menampilkan gambar pada HTML | www.bloggerdokter.com</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Menampilkan gambar pada HTML | www.bloggerdokter.com</h1>
<img class="gambar" src="boggerdokter.png">
</body>

style.css :

.gambar{
height: 300px;
width: 500px;
}

Iframe 

Merupakan sebuah tag html yang berfungsi untuk menampilkan halaman website tanpa harus membuka website tersebut.
Menggunakan tag <iframe> untuk menampilkan.
Caranya : tambahkan atribut src=”...” pada tag pembuka <iframe> untuk meletakkan link url dari website yang ingin anda tampilkan.

<html>
<head>
<title>Simak Nasehat Dokter di bloggerdokter.com</title>
</head>
<body>
<h1>
Simak Nasehat Dokter di bloggerdokter.com</h1>
<iframe height="1000px" src="https://www.bloggerdokter.com" width="1000px"></iframe>
</body></html>

Simak Nasehat Dokter di bloggerdokter.com

Read More

HTML , Halaman statis , Tag, Elemen dan Atribut nya

Belajar Optimalkan

Menjadi seorang blogger yang tulisannya ditayangkan atau di upload di internet mau tidak mau harus belajar juga cara penulisan yang dapat terbaca di situs yang dinaungi.

Apa cara penulisan nya?

iya, itulah yang namanya 

HTML (Hyper Text Markup Language), 

yang dalam bahasa indonesia nya adalah Bahasa Markah Hiper Teks (BMHT)



.
Merupakan bahasa Mark Up yang digunakan untuk membuat sebuah halaman website.
Dalam dunia pemograman berbasis website atau Web Programming, html menjadi pondasi dasar pada halaman website.

Sebuah website yang dinamis tidak cukup hanya menggunakan HTML, namun juga memerlukan

• CSS, 
• JavaScript dan 
• PHP 

Jika halaman website dibuat hanya menggunakan HTML saja maka halaman website tersebut di sebut halaman statis karena tidak memiliki aksi atau fungsi-fungsi yang dapat mengelola website. Kalau hanya bisa halaman statis saja maka tentu saja pembuat website akan sangat di sibukkan dengan harus mengubah file HTML setiap kali ingin mengupdate artikel.

File HTML dapat dibuat dengan teks editor 

seperti notepad yang biasa disediakan oleh windows.
Lebih bagus lagi menggunakan teks editor yang memiliki fitur syntax highlighter seperti Notepad++, Sublime Text, Gedit, Kate, TextEdit yang disediakan oleh sistem operasi Mac , Nano yang disediakan oleh sistem operasi linux dan lain-lain.
File HTML disimpan dengan ekstensi html atau htm, dan dapat di eksekusi atau dijalankan menggunakan web browser baik itu Google Chrome, Mozilla Firefox, Opera, Safari dan lain-lain.

Sampai saat ini HTML sudah sampai pada versi 5. 

HTML5 sudah memiliki banyak sekali fitur tambahan salah satunya dengan HTML5 memungkinkan untuk membuat streaming video tanpa bantuan flash.

Element pada HTML 

merupakan isi atau objek yang berada diantara tag, maksudnya adalah isi yang ada diantara tag pembuka dan tag penutup. Di dalam element ini bisa berupa text ataupun tag lain nya.

HTML di disusun dengan tag-tag (penanda).

Tag <!– ….–>  untuk memberi sebuah komentar atau keterangan

Tag <!DOCTYPE html> untuk Mendefinisikan tipe dokument

Tag <a> 

untuk menunjukkan adanya sebuah anchor (digunakan untuk saling menautkan antara satu dokumen HTML ke dokumen HTML yang lain), ini selalu diikuti oleh atribut href, dimana di dalam href (hypertext reference) ini lah yang akan diisikan alamat yang dituju.
Applikasinya : <a href="...">text anchor</a>
dalam penulisan alamat Membuat Hyperlink Pada HTML memiliki dua jenis yaitu
1. alamat absolute yaitu penulisan alamat file yang disertai dengan alamat website.
2. alamat alternatif yang merupakan penulisan alamat file yang akan di panggil berada dalam aplikasi yang sama, jadi sebelum memanggil file yang diperlukan tidak menggunakan nama dari websitenya.

Tag <b> untuk membuat teks menjadi tebal

Tag <h1> berfungsi untuk membuat judul artikel. H1 adalah ukuran judul terbesar di HTML.

Tag <p> 

berfungsi untuk membuat paragraf.

• Teks yang berada di dalam tag H1 akan ditampilkan lebih besar, karena teks itu adalah sebuah judul artikel. Sementara itu, teks yang berada di tag <p> akan ditampilkan dengan ukuran normal.
• paragraf disini merupakan suatu tag untuk membuat suatu elemen dalam penulisan HTML. dalam paragraf itu sendiri terdapat 3 element/tag lain yang bisa dikombinasikan langsung dengan tag paragraf.

element tag yang dimaksud diatas adalah :

1. paragraf rata kiri menggunakan align left 
2. paragraf rata kanan menggunakan align right 
3. paragraf rata tengah menggunakan align center 
4. paragraf rata kiri kanan menggunaan align justify

Contoh penulisan : <p align="left">....isi text yang akan ditampilkan di blog....</p>

Tag </br> atau break 

dipasang hanya sebagai tag penutup saja akan hampir sama fungsinya dengan tag pembuka dan penutup <p></p>, ini dipakai lebih praktis jika tidak ada elemen atau atribut lain yang diperlukan. Dan perlu diingat fungsi sebenarnya adalah memisahkan teks satu dengan teks lainnya, dengan jarak yang lebih pendek daripada membuat paragraf baru.

Tag <h2>untuk membuat heading dua
<h3> membuat heading tiga dan seterusnya

Tag <head> merupakan kepala dokumen

Tag <title> harus diletakkan di dalam tag <head>.

Tag <body> dan </body>

tag ini merupakan tubuh dokumen. Setiap informasi yang ditulis di dalam penada ini, akan tampil di halaman web.

Tag <div> untuk mendefinisikan halaman

Tag <link> untuk mendefinisikan hubungan antar dokumen

Tag <script> untuk mendefinisikan client-side script

Tag <table> 

mendefinisikan tabel, 

•  <th> table head atau bagian kepala pada tabel, untuk mendefinisikan sel header di dalam  sebuah tabel
•  <td> table data merupakan tag yang digunakan untuk membuat kolom dalam baris dan untuk menampilkan data dalam tabel
• <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat baris dalam tabel HTML

Aplikasi nya : 

<table border=1> (border disini mengidentifikasikan garis tepi )

<tr>

<th>..</th>

</tr>

<tr> 

<td>....isi data dalam kolom...</td>

</tr>

</table>

Tag <ul> untuk mendefinisikan daftar dalam format bullet

Tag <li> untuk mendefinisikan list dalam bentuk bullet.
Tag <ol> untuk menampilkan daftar list dalam bentuk huruf atau angka.
Dengan menggabungkan CSS, JavaScript tag list ini bisa di gunakan untuk membuat menu navigasi pada halaman web, selain itu dapat digunakan untuk me-list bersarang (list yang berdasarkan dalam list yang lain). 

Tag <code> 

pada HTML termasuk kelompok inline level element, dan mengikuti alur text yang ada. penulisan format code ini misalkan dalam penulisan syntak yang akan ditampikan kedalam halaman web, maka untuk menampilkannya bisa menggunakan <code>  pada bagian <body> HTML.
Isi dari tag code tidak akan di eksekusi oleh browser, tetapi akan di tampilkan dalam bentuk text yang berformat syntax atau kode program. Perbedaan nya akan tampak pada bentuk font yang akan ditampilkan.

Tag <form> 

merupakan tempat penginputan data sebelum diproses oleh sistem, contohnya :

• form login, 
• form comment, 
• form data user, dan lain sebagainya. 

untuk proses penginputan data dari form harus lengap dengan materi PHP, MYSQL, dan JavaScript. Di dalam tag <form> bisa ada :

• tag <input> yang merupakan tag yang akan digunakan dalam form pengisian. Tag input ini memiliki banyak sekali bentuk yang bisa digunakan misalkan isian teks, password, checkbox, radiobutton, sampai dengan tombol submit berada dalam tag input. Beberapa atribut yang biasa ada dalam tag input adalah :

1. <input type=’text’> adalah textbox yang bisa menerima inputan text misalkan username atau berupa inputan text yang pendek
2.  type=’password’ : textbox yang menerima inputan text, akan tetapi text yang diinput akan di tampilkan sebagai tanda bintang atau titik, textbox ini biasanya digunakan untuk inputan password.
3.  type=’submit’ : inputan ini berupa tombol (button) untuk memproses data inputan dari form
4.  type=’checkbox’ : inputan berupa checkbox yang dapat di ceklis oleh user. 
5. type=’radio’ : inputan yang berupa radio grup, dimana user dapat memilih salah satu dari pilihan yang disediakan.

• tag<textarea> merupakan tag yang sama fungsinya dengan inputan text, hanya saja pada textarea ini dapat diisikan dengan lebih banyak teks didalamnya. untuk mengatur panjang dan banyak baris pada textarea ini dapat menggunakan CSS

• tag<option>  
• tag<select> merupakan tag yang digunakan untuk user memilih data yang sudah disediakan. Dalam penggunakan <select> selalu diikuti oleh tag<option> yang digunakan untuk membuat pilihan.

tag <form>

 ini dibutuhkan beberapa atribut untuk memproses data yang akan dikirim, dan biasanya itu adalah alamat dari sebuah halaman untuk memproses data inputan, atribut yang kedua berupa method, method ini menjelaskan bagaimana data yang akan dikirim oleh web browser.
nilai dari method biasanya get atau post.

Atribut HTML 

merupakan informasi tambahan yang digunakan di dalam tag pembuka.
Informasi tambahan ini bisa berupa instruksi untuk memberikan efek warna, ketebalan, dll.
Biasanya memiliki 2 bagian yaitu :

1. nama , Atribut name merupakan atribut yang nilainya akan digunakan pada saat memproses data oleh web server. 
2. nilai, atribut ini merupakan nilai awal yang akan ditampilkan pada saat menjalankan di browser

dapat ditulis name=”value”.
Penulisan nilai/value diapit oleh dua tanda kutip (bisa digunakan kutip satu atau kutip dua)
Penulisan atribut pada HTML diawali dengan penulisan tag, didalam tag berikan atribut dan element dari tag itu sendiri.
Untuk mempercantik form yang anda buat harus menggunakan CSS

Contoh penggunaan atribut value :

<form>
 Nama Depan :<input type="text" value="nama"><br/>
Nama Belakang : <input type="text">
</form> Dan hasilnya seperti ini :

 Nama Depan :
Nama Belakang :

atribut readonly : jika menggunakan atribut ini maka nilai value tidak bisa di ubah

Contoh :

<form> 

Nama Depan :<input type="text" value="nama" readonly><br/> 

Nama Belakang : <input type="text"> 

</form> 

Hasilnya :

Nama Depan :
Nama Belakang :

atribut disabled : atribut ini digunakan untuk menonaktifkan inputan. maksudnya elemen disabled bisa digunakan akan tetapi tidak bisa di gantu atau di edit.

atribut size : atribut ini mengatur lebar kotak inputan

Format contoh :

<form>
Nama Depan :<input type="text" value="nama" size="50"><br/>
Nama Belakang : <input type="text">
</form>

Hasilnya :

Nama Depan :
Nama Belakang :

atribut maxlength : atribut ini digunakan untuk menentukan jumlah inputan teks yang di batasi

Contoh format :

<form>
Nama Depan :<input type="text" value="nama" maxlength="10"><br/>
Nama Belakang : <input type="text">
</form>

Hasilnya :
Nama Depan :
Nama Belakang :

atribut list : 

atribut ini untuk menampilkan list pada form inputan

Contoh format :

<form> 

<input list="city" name="indonesia" /> 

<datalist id="city"> 

<option value="surabaya"> </option><option value="malang"> </option><option value="jakarta"> </option></datalist> </form>

Hasilnya : (klik kanan pojok ya, akan ada pilihan kota yang telah ditentukan)

atribut min dan max :  menentukan nilai minimum dan maksimum untuk elemen <input>. Atribut min dan maks digunakan untuk jenis inputan seperti : nomor, kisaran, tanggal,datetime, datetime-lokal, bulan, waktu, dan minggu

Contoh Format :

<form>
<input type="date" name="day" max="1979-12-31">
 <input type="date" name="day" min="2000-01-02">
</form>

Hasilnya : (klik pojok kanan)




laceholder Attribute. atribut ini digunakan untuk sebagai pengganti dari label field.

Contoh Format :
<form>
<input type="text" name="nama" placeholder="masukkan nama">
 </form>

Hasilnya :



Simbol di HTML kodenya selalu diawali dengan : &
untuk simbol HTML berupa number ditambah dengan tanda pagar (#&)

Read More