Textual description of firstImageUrl

Pengenalan CSS ( Cascading Style Sheets )

Gambar CSS (Cascading Style Sheets)

Apa Itu CSS

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.CSS adalah sebuah teknologi internet yang direkomendasikan oleh World Wide Web Consortium atau W3C pada tahun 1996.

Sejarah Singkat CSS

Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan CSS sebagai bahasa pemrograman standard dalam pembuatan dokumen web. Tujuannya adalah mengurangi pembuatan TAG-TAG baru oleh Netscape dan Internet Explorer (IE), karena pada masa itu kedua browser saling bersaing mengembangkan TAG sendiri untuk mengatur tampilan web.

CSS level 1 mendukung pengaturan tampilan dalam hal:

  1. Font (jenis, ketebalan),
  2. Warna teks, latar belakang, dan elemen lainnya,
  3. Text attributes, misalnya spasi antar baris, kata, dan huruf,
  4. Posisi text, gambar, tabel, dan elemen lainnya,
  5. Marjin, border, dan padding,
Selanjutnya di tahun 1998, W3C menyempurnakan CSS awal dengan menciptakan standard CSS2(CSS level 2). yang menjadi standard hingga saat ini. Pada CSS level 2 ini, di masukkan semua atribut dari CSS1, serta diperluas dengan penekanan pada International accesibility and capability khususnya media-specific CSS.

Bahkan pada perkembangannya, saat ini sudah muncul CSS3. Pekerjaan dari CSS3 dimulai pada tahun 2000, tidak lama setelah CSS2 di implementasikan. CSS3 ini sampai sekarang masih terus dikembangkan, spesifikasinya dibagi pada beberapa topik atau modul.

Pengertian dan Manfaat CSS

Menurut Wikipedia, Cascading Style Sheets (CSS) adalah: bahasa pemrograman untuk mengatur tampilan suatu website atau blog

Tampilan yang dimaksud disini adalah jenis, ukuran, dan warna font; jarak antara baris dan panjangnya, marjin dan indentasi, background dan warna, serta masih banyak lagi. CSS merupakan fitur yang sangat penting dalam pembuatan Dynamic HTML. Meskipun bukan merupakan keharusan dalam membuat web, namun penggunaan CSS merupakan kelebihan tersendiri.

Menggunakan CSS tidak memerlukan perangkat lunak tertentu, karena merupakan script yang telah embedded dengan HTML. Anda cukup menggunakan aplikasi notepad untuk menciptakan script CSS sendiri.

Manfaat dari CSS

  1. Kode HTML menjadi lebih sederhana dan lebih mudah diatur,
  2. Ukuran file menjadi lebih kecil, sehingga load file lebih cepat,
  3. Mudah untuk merubah tampilan, hanya dengan merubah file CSS saja,
  4. Dapat berkolaborasi dengan JavaScript dan merupakan pasangan setia XHTML,
  5. Digunakan dalam hampir semua web browser.

Sintaks dan Penempatan Kode CSS

Sintaks CSS terdiri dari tiga bagian:
  • selector
    Selector adalah elemen atau tag HTML yang akan di-definisi-kan.
  • property
    Property adalah atribut yang akan diganti dengan “nilai” tertentu
  • value
    Value CSS adalah nilai dari property
Properti dan nilai dipisahkan dengan tanda titik dua (:) dan keduanya diapit oleh tanda kurung kurawal ({Isi Css}).
Berdasarkan ketiga bagian tersebut, sintaks dasar CSS dapat dituliskan:
selector {
property: value
}
contoh 1:
p {
color:red
}

Jika suatu nilai mengandung spasi, nilai tersebut harus diapit dengan tanda petik (“). Untuk memberikan lebih dari satu roperty bagi suatu roperty, pisahkan setiap kombinasi “property:value” dengan tanda titik koma (;). Untuk membuat definisi gaya lebih mudah dibaca, definisi tiap property dapat dilakukan per baris. Sehingga sintaksnya menjadi:
selector {
property1: value;
property2: “value_value”; … }

contoh 2:
p {
text-align:center;
font-family:“sans serif”
}

Aturan-aturan yang berlaku dalam sintaks CSS:

  1. Jangan ada spasi antara property value dengan unitnya (contoh 1 & 2),
  2. Nama properti bersifat CASE SENSITIVE dan menggunakan huruf kecil,
  3. Jika nilai / value lebih dari satu kata, maka gunakan tanda titik koma (;) untuk membatasi properti yang satu dengan yang lain (contoh 2),
  4. Jika selector lebih dari satu dan mempunyai properti dan nilai yang sama, gunakan tanda koma (,).
Contoh Css Untuk Banyak Selector
h1,h2,h3 {
color:green
}
Class selector
Dengan menggunakan class selector, Anda dapat mendefinisikan perbedaan style untuk tag elemen html yang sama.
contoh 3:
Misalkan Anda ingin membuat dua tipe paragraf dalam dokumen, yang satu rata kanan, dan yang lain rata kiri. Maka:
p.right {
text-align: right
}
dan
p.left {
text-align: left
}

Aturan Class selector:

  • Jangan memberi nama class dengan angka,
  • Jika memberikan nama class lebih dari satu kata/kalimat, penulisannya menggunakan tanda petik (“).

Atribut ID

Aturan penamaan ID:
  • Dapat mengandung huruf, angka, atau karakter garis bawah,
  • Karakter pertama harus berupa huruf atau karakter garis bawah,
  • Diawali dengan tanda #,
  • Jangan memberi nama id sama dengan value,
  • Jangan memberi nama id dengan tag html kemudian diikuti tanda #.
#Contoh4

<html>
<head>
<style type = "text/css">
<!--
#tebal { font-weight : bold;
color : blue; }
#miring { font-style : italic;
color: pink; }
-->
</style>
</head>
<body>
<h1>Contoh</h1>
<h2 id = "miring">
The quick brown fox jumps over the lazy dog
</h2>
<h3 id = "tebal">
And then it falls into the well
</h3>
</body>
</html>

Penempatan kode CSS dalam HTML

Ada tiga cara penempatan kode CSS dalam HTML:
  1. Internal CSS
    Metode penulisan kode CSS langsung dalam file HTML. contoh:

    <html>
    <head>
    <style type=”text/css”>
    p {color: white; }
    body {background-color: black; }
    </style>
    </head>
    <body>
    <p>Menguak Rahasia CSS</p>
    </body>
    </html>
  2. Eksternal CSS
    Memanggil file CSS dari luar atau tempat/folder/lokasi lain, dengan kata lain file CSS terpisah dengan file HTML. Browser akan membaca definisi style dari file test.css dan akan mengikuti format tersebut. Eksternal style ditulis di text editor lain dengan ekstention .css. contoh:

    <html>
    <head>
    <link rel=”stylesheet” type=”text/css” href=”test.css”/>
    </head>
    <body>
    <h3>Menguak Rahasia CSS</h3>
    </body>
    </html>
  3. Inline CSS
    Penulisan kode CSS dalam tag HTML. contoh:

    <html>
    <head>
    </head>
    <p style=”background: red; color: black;”>Menguak Rahasia CSS</p>
    </body>
    </html>

Selamat! Anda baru saja berhasil menguak rahasia pertama dari CSS. Setelah membaca postingan ini ini, Anda telah memiliki pengetahuan dasar untuk melanjutkan ke rahasia berikutnya: Kumpulan Tag CSS. # Tapi Nanti Dipostingan yang akan datang

Cukup Sekian Dan Terimakasih, Semoga artikel tentang Pengenalan CSS Cascading Style Sheetsini dapat bermanfaat bagi kita semua.
Readmore → Pengenalan CSS ( Cascading Style Sheets )
Textual description of firstImageUrl

Kumpulan Tag HTML Beserta Fungsinya

Kumpulan Tag HTML Beserta Fungsinya

Apa itu HTML ?

Hyper Text Markup Language atau HTML adalah file teks atau file ASCII yang berisi instruksi/script kepada web browser untuk menampilkan suatu tampilan grafis dari sebuah halaman web. Didalam file HTML terdapat beberapa "tag" atau kode-kode yang dimengerti oleh web browser dan dapat menampilkannya di layar monitor.

Apa itu Tag HTML ?

Tag HTML merupakan suatu pasangan yang terdiri 2 bagian yang disebut dengan tag pembuka dan tag penutup. Tag pembuka dinyatakan dalam bentuk <nama_tag> dan tag penutup dinyatakan dalam bentuk </nama_tag>. Contoh Penulisannya :
<nama_tag>
Isi Konten Disini
</nama_tag>

Nah dibawah ini adalah kumpulan beberapa tag-tag HTML yang sudah saya rangkum.

Tag

Description

DTD

<!-...->

Mendefinisikan komentar

STF

<!DOCTYPE>

Mendefinisikan tipe dokumen

STF

<a>

Mendefinisikan sebuah anchor

STF

<abbr>

Mendefinisikan singkatan

STF

<acronym>

Mendefinisikan akronim

STF

<address>

Mendefinisikan elemen alamat

STF

<applet>

Mendefinisikan applet (tidak digunakan lagi)

TF

<area>

Mendefinisikan sebuah area dalam image map

STF

<b>

Memberi style bold pada teks

STF

<base>

Mendefinisikan base URL untuk semua link pada halaman

STF

<basefont>

Mendifinisikan base font (tidak digunakan lagi)

TF

<bdo>

Mendefinisikan arah display teks

STF

<big>

Membuat teks menjadi berukuran besar

STF

<blockquote>

Membuat kutipan panjang

STF

<body>

Mendefinisikan elem bodi

STF

<br>

Memasukkan line break single

STF

<button>

Membuat push button

STF

<caption>

Mendefinisikan table caption

STF

<center>

Membuat teks berada di tengah (tidak digunakan lagi)

TF

<cite>

Membuat kutipan

STF

<code>

Membuat kode bahasa komputer

STF

<col>

Mendefinisikan atribut untuk kolom pada tabel

STF

<colgroup>

Mendefinisikan grup pada kolom tabel

STF

<dd>

Mendefinisikan deskripsi pada definisi (?_?)

STF

<del>

Mendefinisikan teks yang didelete

STF

<dir>

Membuat directory list (tidak digunakan lagi)

TF

<div>

Mendefinisikan sebuah bagian pada dokumen

STF

<dfn>

Mendefinisikan sebuah istilah definisi

STF

<dl>

Membuat sebuah daftar definisi

STF

<dt>

Membuat sebuah istilah definisi

STF

<em>

Membuat sebuah teks ter-emphasize

STF

<fieldset>

Membuat sebuah fieldset

STF

<font>

Menentukan jenis, warna, dan tipe huruf (tidak digunakan lagi)

TF

<form>

Membuat sebuah form

STF

<frame>

Membuat sebuah frame

F

<frameset>

Mendefinisikan set frame

F

<h1> to <h6>

Mendefinisikan header satu sampai enam

STF

<head>

Memberikan informasi tentang dokumen

STF

<hr>

Memberikan ukuran horizontal

STF

<html>

Membuat sebuah dokumen HTML

STF

<i>

Membuat teks dengan style italic

STF

<iframe>

Membuat inline frame

TF

<img>

Mendefinisikan sebuah image

STF

<input>

Mendefinisikan sebuah input field

STF

<ins>

Mendefinisikan teks yang di insert

STF

<isindex>

Mendefinisikan sebuah single-line input field (tidak digunakan lagi)

TF

<kbd>

Mendefinisikan teks keyboard

STF

<label>

Mendefinisikan label untuk form control

STF

<legend>

Mendefinisikan judul dalam fieldset

STF

<li>

Mendefinisikan list item

STF

<link>

Mendefinisikan referensi/daftar pustaka

STF

<map>

Mendefinisikan sebuah image map

STF

<menu>

Membuat sebuah menu list (tidak digunakan lagi)

TF

<meta>

Mendefinisikan sebuah meta information

STF

<noframes>

Mendefinisikan sebuah bagian noframe

TF

<noscript>

Mendefinisikan sebuah bagian noscript

STF

<object>

Mendefinisikan sebuah objek

STF

<ol>

Membuat sebuah ordered list

STF

<optgroup>

Membuat sebuah option group

STF

<option>

Mendefinisikan option dalam sebuah drop-down list

STF

<p>

Membuat paragraf

STF

<param>

Memberikan parameter untuk sebuah objek

STF

<pre>

Membuat preformatted text

STF

<q>

Membuat sebuah kutipan singkat

STF

<s>

Membuat teks memiliki atribut strikethrough (tidak digunakan lagi)

TF

<samp>

Membuat sampel computer code

STF

<script>

Membuat sebuah script

STF

<select>

Membuat selectable list

STF

<small>

Membuat teks berukuran kecil

STF

<span>

Mendefinisikan sebuah bagian dalam sebuah dokumen

STF

<strike>

Membuat teks strikethrough (g dipake)

TF

<strong>

Membuat teks dengan atribut strong

STF

<style>

Membuat definisi dari sebuah style

STF

<sub>

Membuat teks dengan style subscript

STF

<sup>

Membuat teks dengan style superscript

STF

<table>

Membuat tabel

STF

<tbody>

Membuat body tabel

STF

<td>

Mebuat cell tabel

STF

<textarea>

Membuat sebuah area teks

STF

<tfoot>

Membuat footer pada tabel

STF

<th>

Membuat header pada tabel

STF

<thead>

sama dengan di atas!

STF

<title>

Mendefinisikan judul dokumen

STF

<tr>

Membuat row pada tabel

STF

<tt>

Membuat teks teletype

STF

<u>

Membuat teks underline (tidak digunakan lagi)

TF

<ul>

Membuat sebuah unordered list

STF

<var>

Mendefinisikan sebuah variabel

STF

<xmp>

Membuat preformatted text (tidak digunakan lagi)

 

Readmore → Kumpulan Tag HTML Beserta Fungsinya
Textual description of firstImageUrl

Basic SEO Search Engine Optimization Techniques

Basic SEO Search Engine Optimization Techniques

Basic Search Engine Optimization Techniques


Determine what keywords you want to appear in SE results (this requires some research and analysis).
Understand how search engine spiders work.
Understand how search engines crawl and compile data on the Web and know what documents (html files) relate to which keywords and phrases.

Basically, search engines collect data about a unique Web site by sending an electronic spider to visit the site and copy its content which is stored in the search engine’s database. Generally known as ‘bots’ (robots), these spiders are designed to follow links from one document to the next. As they copy and assimilate content from one document, they record links and send other bots to make copies of content on those linked documents. This process continues ad infinitum. By sending out spiders and collecting information 24/7, the major search engines have established databases that measure their size in the tens of billions.

Spiders are designed to read site content like you and I read a newspaper. Starting in the top left hand corner, a spider will read site content line by line from left to right. If columns are used (as they are in most sites), spiders will follow the left hand column to its conclusion before moving to central and right hand columns. If a spider encounters a link it can follow, it will record that link and send another bot to copy and record data found on the document the link leads to. The spider will proceed through the site until it records everything it can possibly find there.

As spiders follow links and record everything in their paths, one can safely assume that if a link to a site exists, a spider will find that site. Webmasters and SEOs no longer need to manually or electronically submit their sites to the major search engines. The search spiders are perfectly capable of finding them on their own, provided a link to that site exists somewhere on the web. Google and Yahoo both have an uncanny ability to judge the topic or theme of documents they are examining, and use that ability to judge the topical relationship of documents that are linked together. The most valuable incoming links (and the only ones worth perusing), come from sites that share topical themes.

Offering spiders access to the areas of the site one wants them to access is half the battle. The other half is found in the site content. Search engines are supposed to provide their users with lists of documents that relate to user entered keyword phrases or queries. Search engines need to determine which of billions of documents is relevant to a small number of specific words. In order to do this, the search engine needs to know your site relates to those words.
After the URL of a site, there are four basic elements a search engine looks at when examining a document:
  • the Title of the site (Page Title meta tag)
  • the Description meta tag
  • the Keywords meta tag
  • keywords in text and especially in the anchor text used in internal links


Page Titles should be written using the strongest keyword targets as the foundation. Some titles are written using two or three basic two-keyword phrases. A key to writing a good title is to remember that human readers will see the title as the reference link on the search engine results page (followed by the description). Concentrate on the strongest keywords that best describe the topic of the document content.

The Description Meta tag is also fairly important. Search engines tend to use it to gather information on the topic or theme of the document. A well written Description is phrased in two or three complete sentences with the strongest keyword phrases woven early into each sentence. As with the title tag, some search engines will display the Description on the search results pages, generally using it in whole or in part to provide the text that appears under the reference link. Some search engines place minor weight in the Keywords Meta tag.

After reading information found in the section of the source code, spiders continue on to examine site content. It is wise to remember that spiders read the same way we do, left to right and following columns.

Good content is the most important aspect of search engine optimization. The easiest and most basic rule of the trade is that search engine spiders can be relied upon to read basic body text 100% of the time. By providing a search engine spider with basic text content, SEOs offer the engines information in the easiest format for them to read. While some search engines can strip text and link content from Flash files, nothing beats basic body text when it comes to providing information to the spiders. Very good SEOs can almost always find a way to work basic body text into a site without compromising the designer’s intended look, feel and functionality.

The content itself should be thematically focused. In other words, keep it simple. Some documents cover multiple topics on each page, which is confusing for spiders and SEOs alike. The basic SEO rule here is if you need to express more than one topic on a page, you need more pages. Fortunately, creating new pages with unique topic-focused content is one of the most basic SEO techniques, making a site simpler for both live-users and electronic spiders. An important caveat is to avoid duplicate content and the temptation to construct doorway pages specifically designed for search placements.

When writing document content, try to use the strongest keyword targets early in the copy. For example, a site selling the ubiquitous Blue Widget might use the following as a lead-sentence; “Blue Widgets by Widget and Co. are the strongest construction widgets available and are the trusted widget of leading builders and contractors.”

The primary target is obviously construction applications for the blue widget. By placing the keyword phrases “blue widgets”, “construction widgets” and “trusted widget” along side other keywords such as the singular words, “strongest”, “trusted” and “builders” and “contractors”, the sentence is crafted to help the search engine see a relationship between these words. Subsequent sentences would also have keywords and phrases weaved into them. One thing to keep in mind when writing basic SEO copy is that unnecessary repetition of keywords is often considered spam by search engines. Another thing to remember is that ultimately, the written copy is meant to be read by human eyes as well as search spiders. Each page or document in the site should have its own unique content.

The last on-site element a spider examines when reading the site (and later relating the content to user queries), is the anchor text used in internal links. Using relevant keyword phrases in the anchor text is a basic SEO technique aimed at solidifying the search engine’s perception of the relationship between documents and the words used to phrase the link (following a link to a similarly named topic on the internal page that the link points to).

The goal is to make a site easy to find, easy to follow, and easy to read for search spiders and live-visitors, with well written topical content and a fair number of relevant incoming links.

Sebagai contoh Post aja Basic Search Engine Optimization Techniques
Readmore → Basic SEO Search Engine Optimization Techniques
Textual description of firstImageUrl

Penjelasan Tentang Apa Itu Seo?

Pengertian dan Definisi SEO

Pengertian dan Definisi SEO


SEO atau kepanjangan dari (Search Engine Optimization) adalah suatu cara atau teknik untuk membuat situs atau blog kita berada pada halaman/posisi satu di mesin pencarian (search engine) sepertiGoogle, Bing, dan Yahoo.

Keuntungan Melakukan SEO


Banyak sekali keuntungan dari melakukan SEO yang tidak bisa saya sebutkan satu persatu, diantaranya yaitu :

1# Mendatangkan Traffic yang Banyak
Kita semua pasti tahu jika situs atau blog berada pada halaman satu Search Engine pasti akan mendatangkan pengunjung (Traffic) yang sangat besar, tergantung pada keyword yang kita target dan besar kecilnya data hasil pencarian dari Google Planner.

2# Meningkatkan Penjualan
Jika suatu situs menjual suatu produk atau barang seperti lazada.co.idyang menjual aneka barang seperti laptop atau lainnya, maka jika ada orang mencari di google dengan keyword “jual laptop murah” kemudian situs tersebut ranking 1, maka sudah 95% lazada akan mendapatkan penjualan dari hasil SEO tersebut.

3# Meningkatkan Daya Saing
Mudah saja untuk keuntungan SEO yang satu ini, jika posisi suatu situs lebih tinggi maka secara otomatis daya saingnya pun akan lebih tinggi. Masih banyak lagi keuntungan dari SEO ini yang tidak saya sebutkan semua, karena saya yakin dengan 3 hal diatas saja pasti anda sudah mengerti mengenai keuntungan SEO.

Sekilas Sejarah SEO


Menurut Danny Sullivan, istilah search engine optimization pertama kali digunakan pada 26 Juli tahun 1997 oleh sebuah pesan spam yang diposting di Usenet. Pada masa itu algoritma mesin pencari belum terlalu kompleks sehingga mudah dimanipulasi.

Versi awal algoritma pencarian didasarkan sepenuhnya pada informasi yang disediakan oleh webmaster melalui meta tag pada kode html situs web mereka. Meta tag menyediakan informasi tentang konten yang terkandung pada suatu halaman web dengan serangkaian kata kunci (keyword).

Sebagian webmaster melakukan manipulasi dengan cara menuliskan kata kunci yang tidak sesuai dengan konten situs yang sesungguhnya, sehingga mesin pencari salah menempatkan dan memeringkat situs tersebut. Hal ini menyebabkan hasil pencarian menjadi tidak akurat dan menimbulkan kerugian baik bagi mesin pencari maupun bagi pengguna internet yang mengharapkan informasi yang relevan dan berkualitas.

1. On Page SEO
Mendengar kata diatas pastinya sudah tidak asing lagi bagi para pakar seo, namun akan asing sekali untuk para pemula di dunia seo. On Page SEO adalah suatu teknik mengoptimisasi halaman website dengan menerapkan beberapa dasar keyword yang ditarget kedalamnya. Keuntungan dari on page seo ini yaitu situs anda akan lebih dinilai relevan oleh google, juga jika halaman tersebut hanya mendapatkan sedikit backlink bisa dipastikan akan mudah ranking #1 Google.

Berikut dasar yang harus diterapkan dalam on page seo :
1. Title Tag
2. Meta Description
3. URL
4. Heading (h1, h2, h3, h4)
5. Image & Image ALt Tag
6. Link to Site Authority

2. Off Page SEO
Off Page Search Engine Optimization adalah cara mengoptimisasi suatu halaman dari luar situs (menggunakan backlink), “Apa itu Backlink?”

Backlink adalah Link dari halaman situs kita yang berada pada halaman situs orang lain yang mempunyai PR (Page Rank) yang tinggi.

Search Engine seperti Google sangat menyukai Backlink yang berkualitas yang artinya Backlink dari situs authority atau situs yang dipercayai Google dan mempunyai PR yang tinggi seperti Wikipedia,Twitter, WordPress, dan lain-lain.

Oleh karenanya suatu situs akan di angkat posisinya oleh google jika mempunyai backlink dari situs authority tersebut, dan bahkan bisa menjadikan situs kita ranking tinggi dengan kata kunci yang di target jika mendapatkan backlink dari situs yang ber-PR tinggi.

H1 Suspendisse potenti.

H2 Proin ipsum sem, consequat et magna eget.

H3 Nunc dapibus risus adipiscing.

H4 Rutrum urna sit amet, suscipit mi.

H5 Rutrum urna sit amet, suscipit mi.
H6 Rutrum urna sit amet, suscipit mi.
Readmore → Penjelasan Tentang Apa Itu Seo?