Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Tuesday, 14 April 2015

cara memasukan/membuat link page lebih SEO.. monggo di reading dengan seksama.. !!

 nah untuk kali ini saya akan memberi rumus/Cara agar link blog lebih SEO Friendly. Membuat link SEO Friendly masih termasuk ke dalam optimasi SEO on Page. Tujuan dan membuat link SEO Friendly yaitu untuk mempermudah search engine dalam merayapi blog kita sehingga postingan atau artikel yang ada di blog kita dapat dengan mudah terindex search engine.
Cara Agar Link Blog Lebih SEO Friendly

Untuk demonya umumnya link di Postingan ini menggunakan title!

Untuk membuat link agar lebih SEO Friendly, kita hanya perlu menambahkan kode tag kedalam kode script link. Sebelum kita membahas bagaimana cara membuat link SEO Friendly, saya akan menjelaskan perbedaan  link biasa dan link yang sudah dioptimalkan.

Untuk mengoptimalkan link di blog juga usahkan agar tidak ada yang namanya Brokenlink / link rusak di blognya sobat .

Link biasa jika kita templatkan pointer diatasnya, maka tidak akan terjadi sesuatu, sedangkan link yang sudah SEO Friendly ( sudah disisipkan tag title ) jika kita tempatkan pointer mouse diatasnya, maka akan muncul sejenis tooltip. Jika berbicara soal tooltip mungkin saja anda tertarik dengan cara membuat efek tooltip pada link blog.

A. Kode link biasa.
<a href="URL Tujuan">Anchor Text</a>
Misalnya :
<a href="http://www.seocips.com/">Tutorial Blog</a>
dan hasilnya seperti dibawah ini :

Tutorial Blog

Sedangkan untuk membuat link yang SEO Friendly anda hanya perlu menyisipkan kode title kedalam kode link tersebut, untuk mengetahui bagaimana caranya, anda bisa melihat langkah-langkah berikut ini ( Mode HTML bukan Mode Compose ):

B. Kode Link yang sudah diberikan title
<a href="URL Tujuan" title="Judul Link">Anchor Text</a>
Misalnya :
<a href="http://www.seocips.com/" title="Tutorial Blogg" >Tutorial Blog</a>

Saturday, 8 November 2014

PENGERTIAN HTML DAN FUNGSINYA


HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language)
HTML (Hyper Text Markup Language) adalah sebuah Bahasa Markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah Browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya olehWorld Wide Web Consortium (WWWC).


Secara garis besar, terdapat Empat jenis elemen dari HTML:
  • structural. tanda yang menentukan level atau tingkatan dari sebuah teks (contoh, <h1>Golf</h1> akan memerintahkan browser untuk menampilkan Golfsebagai teks tebal besar yang menunjukkan sebagai Heading1.
  • presentational. tanda yang menentukan tampilan dari sebuah teks tidak peduli dengan level dari teks tersebut (contoh, <b>boldface</b> akan menampilkan bold. Tanda presentational saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan teks,
  • hypertext. tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, <a href="http://www.ilmukita.com/">IlmuKita</a> akan menampilkan IlmuKita sebagai sebuah hyperlink ke URL tertentu),
  • Elemen widget yang membuat objek-objek lain seperti tombol (<button>), list (<li>), dan garis horizontal (<hr>).
HTTP juga mengatur aksi-aksi apa saja yang harus dilakukan oleh Web Server dan jugaWeb Browser sebagai respon atas perintah-perintah yang ada pada protokol HTTP ini. Sebagai contoh, ketika Anda mengetikkan suatu alamat atau URL pada internet browser Anda, maka sebenarnya web browser akan mengirimkan perintah HTTP ke web server.
Web server kemudian akan menerima perintah ini dan melakukan aktivitas sesuai dengan perintah yang diminta oleh web browser (misalnya akses ke database, file, e-mail dan lain sebagainya). Hasil aktivitas tadi akan dikirimkan kembali ke web browser untuk ditampilkan kepada pengguna.

Fungsi HTML (HyperText Markup Language)


HTML (HyperText Markup Language) adalah suatu bahasa yang menggunakan tanda-tanda tertentu (tag) untuk menyatakan kode-kode yang harus ditafsirkan oleh browser agar halaman tersebut dapat ditampilkan secara benar.

Secara umum, fungsi HTML adalah untuk mengelola serangkaian data dan informasi sehingga suatu dokumen dapat diakses dan ditampilkan di Internet melalui Layanan Web.

Fungsi HTML yang lebih spesifik yaitu :

  1. Membuat halaman Web.
  2. Menampilkan berbagai informasi di dalam sebuah browser Internet.
  3. Membuat Link menuju halaman web lain dengan Kode tertentu (hypertext).

Friday, 7 November 2014

PERBEDAAN FORM METHOD POST DAN GET



Perbedaan Form Method POST Dan GET
POST Dan GET

Method POST dan GET pada php atau pada pembuatan aplikasi web sangat sering digunakan yaitu untuk mengirim data dari client ke server untuk diolah dan dikembalikan ke client menjadi sebuah Informasi. Pengiriman data tersebut biasanya berupa formulir(form) yang kemudian di kirim dengan menggunakan method POST atau GET.


Perbedaan keduanya memang sangat tipis tapi jelas dapat terlihat. Method GET mengirimkan data dengan menambahkannya pada URI. Sedangkan Method POST dikirim ke Server dengan disertakan dalam sebuah permintaan (body of request) dan bukan melalui URI Dan hasil dari permintaan dengan metode POST ini tidak bersifat Cacheable.
Contoh sebuah file form.html akan mengirimkan data pada file action.php dengan menggunakan method POST dan GET.


Fungsi dan Perbedaan Method POST dan GET pada PHP – Dalam dunia PHP Programming tentu menggunakan Method POST dan GET. Sedikit pengertian dari kegunaan Method POST dan GET ini sama yaitu untuk mengirimkan nilai variabel ke halaman lain atau mengirimkan ke database dan mengambil nilai variabel dari halaman lain atau mengambil data pada database.
Sebagai contoh :

METHOD $_POST


Buatlah file dengan nama index.php dan isikan dengan code dibawah ini:


<html>
<head>
<title>Fungsi dan Perbedaan Method POST dan GET pada PHP</title>
</head>
<body>

Silakan Login dengan Username dan Password Anda

<form action="lihat.php" method="POST">
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Login"/></td>
</tr>
</table>
</form>
</body>
</html>


 METHOD $_GET


Buatlah file dengan nama index.php dan isikan dengan code dibawah ini:

<html>
<head>
<title>Fungsi dan Perbedaan Method POST dan GET pada PHP</title>
</head>
<body>

Silakan Masukkan Username dan Password Anda

<form action="lihat2.php" method="GET">
<table>
<tr>
<td>Username</td>
<td><input type="text" name="username"/></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="Login"/></td>
</tr>
</table>
</form>
</body>

</html>

MEMBUAT MENU PADA BIDANG GAMBAR DALAM HTML



Untuk beberapa Kategori blog atau website, pemakaian gambar slide show pada blog / website sangat diperlukan, disamping untuk mempercantik penampilan blog / website itu sendiri, ada beberapa alasan kenapa gambar slide show sangat diperlukan dalam tampilan blog / website.

Untuk blog / kategory Movie misalnya, hal ini diperlukan, agar penyampaian isi konten dalam blog / website dapat tersampaikan kepada para pengunjung blog / web tersebut, begitu juga dengan blog / website dari sebuah perusahaan, penggunaan gambar slide show banyak diaplikasikan. Lalu bagaimana cara membuat  atau memasang gambar slide show di blog atau website? ada banyak cara diantaranya dengan menggunakan Gambar dengan format Flash, bisa juga dengan menggunakan script / kode HTML / Javascript tertentu.


Membuat Menu Pada Bidang Gambar Dalam HTML
HTML5
Kini HTML 5 telah mendukung penggunaan gambar slide show dengan menggunakan kode script tanpa harus menggunakan gambar dengan format file flash. Nah untuk kali ini saya akan berbagi panduan cara membuat gambar slide show dengan kode html / javascript pada blogger.

Slice berfungsi untuk memotong dokumen Fireworks ke dalam beberapa bagian kecil dan mengekspor setiap bagian sebagai file hasil salinan. Pada proses ekspor, Fireworks CS4 juga akan membuat file HTML dan CSS yang mengandung kode tabel dan kode format untuk menampilkan kembali grafik di dalam browser. Memotong gambar memiliki beberapa keuntungan pokok, seperti: Gambar pada desain web dapat di-download dengan cepat tanpa mengurangi kualitasnya. Anda dapat menggunakan slice untuk membuat area yang dapat direspon oleh aksi mouse.

Langkah-langkahnya sebagai berikut :

  • Siapkan beberapa gambar dengan ukuran tertentu sesuai dengan kebutuhan anda.
  • Upload gambar-gambar tersebut di media penyimpanan online (anda dapat menyimpan gambar di picasaweb.google.com).
  • Catat url link dari masing-masing gambar yang sudah anda upload tersebut.
  • Masuk / Login ke Blog anda. (Blogger)
  • Pilih "Template" >> Klik "Edit HTML" >> beri tanda centang pada "Expand Template Widget".
  • Untuk keamanan jika terjadi kesalahan sebaiknya anda "COPY" terlebih dahulu script HTML anda dan "PASTE" kan ke dalam NOTEPAD untuk backup.
  • Cari kode </head> pada bidang HTML template blog anda (gunakan tombol "Ctrl+F" untuk memudahkan pencarian)
  • Masukkan kode script berikut tepat diatas kode </head>

KARAKTER DAN SIMBOL KHUSUS DALAM HTML




Karakter Dan Simbol Khusus Dalam HTML
HTML


Simbol atau Karakter khusus memang jarang sekali digunakan dalam menyajikan sebuah informasi di halaman web, meskipun ada seringkali disajikan dalam bentuk gambar. Contoh untuk menyajikan rumus matematika maupun rumus fisika tentunya kita memerlukan kode atau karakter khusus tersebut. Kode dan simbol rumus memang tidak disediakan dalam susunan tombol keyboard, sehingga kita tidak bisa mengetiknya secara langsung. Alternatifnya yaitu dengan menambahkan manual kode penggantinya dalamDokumen html. 

Untuk itu semua sebaiknya kita memahami terlebih dahulu tentang kode HTML. Bagaimana menampilkan kode HTML pada posting blog? Untuk menulisnya dapat dilakukan dengan mengganti karakter yang mau ditulis di posting dengan notasi tertentu. Dapat dilakukan secara manual atau dengan bantuan software tertentu dan layanan situs menulis kode html atau Parse HTML. 

Karakter Spesial HTML Entity

HasilNomber EntityNama Entity
Deskripsi
"&#34;&quot;tanda kutip
'&#39;&apos;tanda apostrof
&&#38;&amp;ampersand
<&#60;&lt;kurang dari
>&#62;&gt;lebih dari

Simbol ISO 8859-1

HasilNomber EntityNama EntityDeskripsi
&#160;&nbsp;spasi
¡&#161;&iexcl;tanda seru terbalik
¢&#162;&cent;cent
£&#163;&pound;pound
¤&#164;&curren;mata uang
¥&#165;&yen;yen
¦&#166;&brvbar;vertical bar patah
§&#167;&sect;section
¨&#168;&uml;spasi tanda titik dua di atas
©&#169;&copy;hak cipta
ª&#170;&ordf;Indikator feminin ordinal
»&#187;&raquo;sudut tanda kutip (kanan)
«&#171;&laquo;sudut tanda kutip (kiri)
¬&#172;&not;penyangkalan
&#173;&shy;tanda hubung lembut
®&#174;&reg;merek dagang terdaftar
¯&#175;&macr;spasi garis makron
°&#176;&deg;derajat
±&#177;&plusmn;lebih kurang
²&#178;&sup2;pangkat 2
³&#179;&sup3;pangkat 3
´&#180;&acute;akut spasi
µ&#181;&micro;micro
&#182;&para;paragraf
·&#183;&middot;titk tengah
¸&#184;&cedil;spasi cedilla
¹&#185;&sup1;pangkat 1
º&#186;&ordm;Indikator maskulin ordinal
¼&#188;&frac14;pecahan 1/4
½&#189;&frac12;pecahan 1/2
¾&#190;&frac34;pecahan 3/4
¿&#191;&iquest;tanda tanya terbalik
×&#215;&times;perkalian
÷&#247;&divide;
bagi

CARA MENGGANTI BACKGROUND BLOG ATAU WEBSITE


Background Blog
Background Blog 
Memang mengganti Background blog atau mengubah Gambar latar belakang blog bukan merupakan suatu hal yang harus diprioritaskan dalam membangun sebuah blog. Akan tetapi sah sah saja jika anda menginginkan untuk menggantinya  dengan tujuan menambah keindahan tampilan sebagai salah satu daya tarik blog anda.

Cara Mengganti Background Blog Atau Website
BLOG
Mengganti background Template bawaan dari google mungkin tidak menjadi suatu masalah yang merepotkan, akan tetapi kebanyakan para blogger sudah menggunakan template blog dari pihak ke-3 (pihak ketiga) yang dianggap lebih seo. Dan tentunya kita juga dihadapkan harus dapat meng-edit kode HTML yang ada jika ingin mengganti latar belakang template tersebut.

Cara Mengganti Background Blog Blogspot

Cara mengganti warna background blog

Ini prosesnya sangat mudah sekali, jika ingin Mengganti Warna background blog anda, silahkan ikuti langkah-langkah berikut..
  • Masuk ke akun blogger anda
  • Masuk ke menu template, kemudian klik Edit HTML
  • Cari kode yang mirip seperti kode dibawah ini

    body {
    background: #18E115;
    …….
    …….
    }


Cara mengganti background blog dengan gambar 

Cara ini hampir sama seperti cara mengganti warna bacground blog. Perbedaan nya hanya pada penambahan kode pada CSS BODY tersebut. Lebih mudahnya, silahkan ikuti langkah-langkah berikut.
  • Masuk ke blogger
  • Masuk menu template, kemudian klik Edit HTML
  • Cari kode yang mirip seperti kode dibawah ini 

    body {
    background: #18E115;
    …….
    …….
    } 

TRIK MEMBUAT KOTAK SCROLL DENGAN KODE HTML


Trik Membuat Kotak Scroll Dengan Kode HTML
Scroll Box
Ada berbagai cara untuk membuatBlog menjadi kelihatan rapih. Salah satunya yaitu dengan menerapkan scroll pada Postingan blog.Scroll berfungsi untuk menyederhanakan tampilan supaya lebih terlihat rapi dan menjadi tidak terlalu luas dan scroll bar bisa digunakan untuk menyisipkan suatu kalimat yang melebihi lebar postingan blog. Contohnya jika kita menyisipkan kode HTML yang tidak bisa kita pisah dengan enter. Untuk membuat scroll pada Postingan WordPress yang menjadi code utama untuk membuat scroll ini adalah adanya code OverFlow. Jadi jika anda menemukan kode seperti ini, maka ini akan membentuk sebuah scroll. 

Berikut ini ada cara membuat kotak scroll pada blog :

 Login Ke Blogger
  • Pilih Post >> Entri Baru
    ketikkan postingan anda
  • Masukan Script yg ingin di buat Kotak Script
           Di pojok kiri atas ada 2 opsi, yaitu Compose dan HTML, 
           Pilih yg HTML
  • Copy paste script berikut ini pada bagian yg ingin di buatkan kotak script
  • dan setelah itu jangan lupa kembali compose dan satu lagi sebelum kembali ke compose setelah mempaste script ini anda harus clik Enter dan ketikkan sesuatu <alasanya adalah agar blog menjadi indah dan rapih> 

<div style="border: 1px solid #000000; height: 200px; overflow: auto; padding: 5px; width: auto;"> masukkan Kode / Script yg ingin di masukan </ div>
  • Simpan

TRIK CARA MEMBUAT TABEL DENGAN KODE HTML




Trik Cara Membuat Tabel Dengan Kode HTML
Kode HTML


Fungsi Tabel dalam HTML ini adalah bertujuan untuk menyajikan data dalam betuk baris dan kolom. Definisi Tabel Untuk di HTML adalah, suatuTempat untuk menampilkan sejumlah data dan informasi yang biasanya berupa kata-kata maupun Bilangan yang tersusun dengan garis pembatas berupa kolom dan Baris.

Dalam pembuatan tabel selalu terdiri dari Dua Elemen Utama, yaitu baris dan kolom. Syarat Dalam membuat tabel di HTML harus memiliki elemen atau kode tertentu akan tetapi sebelum membuat baris dan kolom dari tabel kita harus membuat tabelnya terlebih dahulu. Proses Pembuatan tabel dimulai dari inisialisasi tabel, dengan cara menggunakan elemen atau kode penulisan tabel.


Perintah Dasar Membuat Tabel di HTML :


<table border="1">
  <tr>
    <th>Nama</th>
    <th>Tanggal Lahir</th>
  </tr>
  <tr>
    <td>Ahmad Ridwan</td>
    <td>21-03-2013</td>
  </tr>
</table>



Apabila melihat contoh susunan tabel diatas, pengertian kode HTML nya adalah sebagai berikut :


<table> diakhiri dengan </table> : digunakan sebagai tanda awal tabel
<tr>..</tr> : digunakan sebagai tanda awal baris, tr kependekan dari table row
<th>..</th> : digunakan untuk membuat tampilan kolom header tabel, th kependekan dari table head
<td>..</td> : digunakan untuk menyusun kolom data, td kependekan dari table data

Setiap elemen dari kode HTML tersebut harus tersusun dan tertata dengan benar.
Perhatikan tanda slash / garis miring di setiap akhir elemen, itu merupakan Kode penutup untuk kode pembuka di semua jenis kode HTML.

CARA MEMBUAT FAVICON DENGAN KODE HTML

Pengertian Favicon 


Favicon (Favorit Icon) adalah logo yang ditampilkan di sebelah kiri domain url maupun di tab browser. Pengguna blogspot tentu saja memiliki favicon default bawaan dari blogger. Hal ini tidak sama dengan Wordpress dimana favicon secara otomatis dapat digenerasikandi ubahsuaikan. Favicon menjadi identitas dari suatu blog karena merupakan ciri khas dan bisa dibilang sebagai brand.

Gambar yang digunakan sebagai favicon berformat .ico seperti halnya format icon-icon yang biasa kita temui sebagai icon file ataupun folder di dalam PC. Format ini unik karena dimanapun dia ditampilkan, gambar aslinya akan langsung terlihat tanpa membuka filenya (dan ini bukan preview seperti yang kita lihat di format lain misalnya jpg, tif, dan lain-lain ketika ditampilkan di dalam folder). Untuk animated favicon  anda dapat menggunakan file gambar berformat gif.

Bagaimana Cara Membuat Favicon ?

Favicon
Untuk membuat favicon Anda hanya perlu membuat sesuatu dan menyimpannya dalam format File Gambar (.jpg .jpeg .png .gif), setelah itu ganti format file gambar tersebut kedalam format file favicon atau icon yaitu (.ico) caranya bagaimana :
  • Masuk ke www.favicon.co.uk
  • Upload gambar yang akan dijadikan favicon atau icon, klik Choose File pada Source Image
  • Silahkan klik salah satu ukuran yang akan Anda gunakan sebagai favicon, saran saya pilih yang 16x16 atau 32x32
  • Lalu silahkan download file favicon tersebut, klik Download Your Favicon Here
  • Selesai

Bagaimana Cara Mengganti Favicon Pada Blog ?

Setelah membuat favicon untuk blog, kini saatnya mengganti favicon default blog dengan favicon Hasil buatan kita sendiri, silahkan cari file favicon yang sudah didownload tadi lalu kita upload ke blog kita agar favicon blog kita berubah, caranya yaitu :
  • Masuk ke Blogger.com
  • Klik Tata Letak
  • Pada bagian Favicon klik Edit
  • Upload file favicon tersebut (.ico)
  • Klik Simpan

CARA MEMBUAT KODE HTML UNTUK GAMBAR BERJALAN DI BLOG

Adapun untuk mempercantik tampilan gambar berjalan dalam blog kita bisa menggunakan atribut yang dapat digunakan untuk tag <marquee> antara lain atribut: width, height, color, direction, bgcolor, font face, Scrolldelay, Scrollamount, loop dan sebagianya.


Marquee merupakan tag non-standard element HTML yang menyebabkan suatu text / gambar bergerak ke atas, bawah, kanan, atau kiri secara otomatis. Untuk membuat marquee, caranya cukup simple dan mudah sekali. Kita hanya perlu menyisipkan kode HTML untuk membuat marquee, diantara text / gambar yang akan kita buat Bergerak. Berikut kode dasar HTML marquee :


MARQUEE ATTRIBUTE

Untuk lebih memperjelas dalam Membuat Marquee, berikut beberapa attribute yang sering digunakan dalam tag marquee :



WIDTH = menentukan lebar area marquee, value yang digunakan yaitu berupa angka dalam piksel (px) dan persen (%). Contoh :


Kode HTML Marquee
<marqueewidth="50%">Kursus Komputer Online</marquee>
Jika attribute width tidak digunakan, maka secara default width yang digunakan yaitu 100%. Misalnya marquee disimpan di bagian sidebar yang memiliki width 300px, maka width marquee pun memiliki width 300px.



HEIGHT = menentukan lebar area marquee, value yang digunakan yaitu berupa angka dalam piksel (px) dan persen (%). Contoh :


Kode HTML Marquee
<marqueeheight="60px"> Kursus Komputer Online </marquee>
Jika attribute height tidak digunakan, maka secara default height yang digunakan sesuai dengan ukuran font (font-size).


DIRECTION = menentukan arah pergerakan marquee, value yang digunakan yaitu left, right, up, dan down. Contoh :


Kode HTML Marquee
<marqueedirection="left"><font color="Blue"Kursus Komputer Online</font></marquee>


<marqueedirection="right">Kursus Komputer Online</marquee>


<marqueedirection="up">Les Private </marquee>


<marqueedirection="down">Bimbingan Belajar </marquee>