hasil latihan halaman web 2

Google Indonesia = www.google.co.id
Yahoo Indonesia = www.yahoo.co.id
Facebook = www.facebook.com

Twitter= www.twitter.com

membuat marquee

change text between marquee tags
Alternate marquee behavior up marquee direction down marquee direction &1t;&1t;&1t; opposite direction marquees>>:>

Latihan Halaman Web

Latihan Halaman Web Hari ke-1 Isi halaman web ada disini.
Nama : Cici Imelia S
Kelas : XII AP 1

Ini Tulisan Judul Paling Besar

Judul ini lebih kecil dari di atas

Ini lebih kecil lagi

Tambah kecil saja

Apa cukup kecil?

Belum, ini yang paling kecil

Belajar Bullet dan Numbering

• Ini bullet berbentuk bulat

• Sedangkan ini berbentuk kotak

3. Ini nomor 3
4. Ini nomor 4
7. Ini nomor 7
8. Ini nomor 8

• Yang ini menggunakan bullet circle
• Tapi yang ini square
• Yang ini tetap circle

Sharing Online Pada Google Drive

Sharing Online Pada Google Drive
Internet sharing adalah kemampuan untuk melakukan sharing/berbagi koneksi internet. Jadi yang disebut sharring online pada google drive adalah melakukan sharring/berbagi dengan koneksi internet pada layanan penyimpanan yang dimili oleh google. Hadirnya sebuah media penyimpanan On-line saat ini memang sangat membantu kita dalam hal penyimpanan file, dimana kita dapat upload file apa saja ke dalam drive on line pada media penyimpanan yang telah disiapkan. Sehingga anda tidak perlu repot-repot membawa media penyimpanan yang bersifat fisik, seperti Hard disk, flash disk maupun CD atau DVD. Simplenya metode dalam penyimpanan file di dalam media penyimpanan On Line membuat kita dimanjakan olehnya. Bagaimana tidak, file yang sudah tersimpan dalam media penyimpanan OnLine tersebut dapat tersimpan dengan aman, dengan catatan anda harus benar-benar menjaga akun yang telah anda buat pada cloud storage itu, jangan sampai password yang telah anda buat tersebut diketahui oleh orang yang tidak bertanggung jawab terhadap file yang anda upload tadi, dan tentunya hal ini mempunyai kelebihan dimana kita dapat mengakses kapanpun kita mau selama terkoneksi dengan jaringan internet. Istilah penyimpanan file secara OnLine ini biasa dikenal dengan sebutan Cloud Storage, Kita mengenal cloud storage adalah merupakan media penyimpanan secara Online, jadi ini tidak ada kaitanya dengan arti sebenarnya yaitu cuaca. Tidak perlu susah untuk mendapatkan free storage atau ruang penyimpanan gratis yang disediakan oleh media penyimpanan OnLine ini, Anda hanya perlu mendaftar menggunakan Email untuk mendapatkanya. Masing-masing layanan menyediakan free storage yang berbeda pada file yang tersimpan di remote database nya, ada yang menyediakan 2 GB dan ada juga yang menyediakan sampai 50 GB, itu tergantung pada kebijakan masing-masing penyedia layanan.

PENGERTIAN FORUM

PENGERTIAN FORUM

Website Forum dapat diartikan sebagai kumpulan hal yang menampilkan informasi data teks, data gambar diam atau gerak, data animasi, suara, video, atau gabungan dari semuanya baik yang bersifat statis maupun dinamis yang membentuk rangkaian bangunan yang saling terkait dimana masing-masing di hubungkan dengan jaringan-jaringan halaman (hyperlink). Bersifat statis apabila isi informasi website tetap jarang berubah dan isi informasinya hanya searah.

Adapun beberapa contoh diantaranya :

1. Facebook

 

Facebook Adalah Sebuah Website Yang bertemakan social networking (Pencari Teman di Dunia Maya).

Facebook merupakan situs web jaringan sosial yang diluncurkan pada 4 Februari 2004 dan didirikan oleh Mark Zuckerberg.

Jejaring sosial ini digunakan sebagai komunikasi jarak jauh.

2. Twitter

 

Twitter berfokus pada layaan blogging mikro (microblogging) dan RSS untuk pesebaran informasi. Ia sering disebut-sebut sebagai “SMS-nya internet”

Twitter dibangun oleh Jack Dorsey, Noah Glass, Evan Williams, dan Biz Stone pada 15 Juli 2006.

3. LinkedIn

 

Situs jejaring sosial ini fokus pada relasi profesional. Situs ini dibangun oleh Reid Hoffman, dkk di tahun 2003. Sebagai situs yang bermain di bidang profesionalitas, kita bisa juga mencari relasi atau bahkan pekerjaan pada LinkedIn.

4. Myspace

 

MySpace adalah situs jaringan sosial populer yang menawarkan jaringan antar teman, profil pribadi, blog, grup, foto, musik dan video untuk remaja dan dewasa di seluruh dunia.

5. Google+

 

Google+ bisa dibilang merupakan jejaring sosial paling anyar. Google+ banyak digemari orang karena fitur barunya Circle dan Hangout yang memudahkan orang mengatur komunikasi dan berinteraksi dengan video.

6. deviantART

 

Suatu situs jejaring sosial yang bergelut dalam bidang seni, terutama dalam seni gambar. DeviantArt meluncur pada 7 Agustus 2000  oleh Angelo Sotira,dkk.

7. Cafemom

 

Dikhususkan untuk ibu-ibu atau wanita yang sesaat lagi menjadi ibu. Memang situs ini dibatasi untuk pengguna minimal 16 tahun dan wanita.

Prinsip situs ini adalah bebas pria (ketahun akun cowok akan langsung dihapus). Situs ini menyedian tempat bagi para ibu untuk saling bertanya dan bertukar informasi.

CafeMom dibuat oleh  Andrew Shue dan Michael Sanchez pada tahun 2006.

8. Ning

 

Situs jejaring yang unik, Pengguna dapat membuat “jejaring sosial”-nya sendiri disini. Tampilan, rasa, dan bahkan set fitur setiap jejaring sosial (seperti foto atau likes) dapat diatur sendiri oleh pengguna. Bahkan persyaratan untuk mendaftar jejaring sosial yang dibuat juga bisa diatur.

Ning dibangun bersama oleh  Marc Andreessen dan Gina Bianchini.

9. Badoo

 

Situs jejaring sosial Badoo berfokus pada perkencanan. Situs ini dibangun oleh enterpreneur Andrey Andreev pada tahun 2006.

10. Pinterest

       

Pinterest adalah jejaring sosial yang bertindak seperti papan pengumuman online (online pin board).Di papan pengumuman ini, kita mengepin artikel dan foto menarik yang kita suka dari berbagai belahan web.

Papan pengumuman ini, disebut pinboard, bisa ditemakan dengan kategori tertentu agar mudah ditata dan diperhatikan oleh pengguna lain.

CICI IMELIA XII AP1/10

1. UPLOAD
Upload adalah juga proses transmisi sebuah file dari sebuah sistem komputer ke sistem komputer yang lainnya dengan arah yang berkebalikan dengan download. Dari internet, user yang melakukan proses upload adalah proses dimana user mengirimkan file ke komputer lain yang memintanya. User yang men-share gambar,foto dengan yang user yang lainnya di bulletin board sytem (BBS), mengupload file ke BBS. File Transfer Protocol (FTP) adalah contoh Internet protokol untuk downloading and uploading files.

Arti istilah Upload dianggap berkaitan erat dengan pengertian berikut :
Mengirim file dari komputer Anda ke komputer lain. Kegiatan pengiriman data (berupa file) dari komputer lokal ke komputer lainnya yang terhubung dalam sebuah network.

Secara umum upload dapat diartikan proses transmisi data dari komputer client/pemakai ke internet.


2. DOWNLOAD
Download adalah proses transmisi sebuah file dari sebuah sistem computer ke sistem komputer yang lainnya. Dari internet, user yang melakukan proses download adalah proses dimana seorang user meminta / request sebuah file dari sebuah komputer lain (web site, server atau yang lainnya) dan menerimanya. Dengan kata lain, download adalah transmisi data dari internet ke komputer client/pemakai.

3. Google Drive
Google Drive adalah layanan penyimpanan daring milik Google yang diluncurkan pada 24 April 2012. Layanan ini merupakan ekstensi dariGoogle Docs dan akan mengganti URL docs.google.com dengan drive.google.com setelah diaktifkan.

4.Google Docs 
Google Docs  adalah layanan pengolah kata, lembar sebar, presentasi, formulir, dan penyimpanan data berbasis web gratis dari Google.

5. Google Maps 
Google Maps adalah sebuah jasa peta globe virtual gratis dan online disediakan oleh Google dapat ditemukan di http://maps.google.com.

cara / langkah-langkah membuat email pada Google Mail (Gmail)

Cara membuat email baru di gmail memang sangat mudah. Jika anda sampai ke halaman ini besar kemungkinan anda belum bisa membuat email. Tapi itu tidak menjadi masalah buat saya.

Menurut saya, Gmail ini memiliki fitur-fitur yang lebih lengkap dari layanan email lainnya seperti yahoo mail (Ymail). Selain itu, Gmail juga memiliki fitur-fitur lainnya seperti blogger.com untuk membuat blog, google analytics, google webmaster, dan masik banyak lagi...

Anda bisa pelajari selengkapnya tentang apa itu gmail dan fitur apa saja yang diberikan di halaman wikipedia: http://id.wikipedia.org/wiki/Gmail 

"KARENA TAMPILAN PENDAFTARAN GOOGLE MAIL (GMAIL) SUDAH BERUBAH, MAKA GAMBAR YANG SAYA BERIKAN DISINI "SEDIKIT BERBEDA" DENGAN APA YANG ANDA LIHAT DI GMAIL NANTINYA, JADI SILAHKAN SESUAIKAN SAJA KARENA PERUBAHANNYA HANYA SEDIKIT DAN TIDAK BERBEDA JAUH."

Cara Membuat Email Baru Di Gmail (Google Mail) Gratis!

Cara Membuat Email Gmail Gratis

Langsung saja kita ke pokok pembahasan, untuk cara membuat Email di gmail, silahkan ikuti langkah-langkah simple berikut...

• Buka http://gmail.com
• Klik Create An Account di bawah form login.

• Anda akan masuk ke halaman pengisian data, silahkan isi formulir pendaftaran sesuai data pribadi anda..

1. Nama : Isi dengan nama depan dan nama belakang anda.
2. Pilih nama pengguna anda : Isikan alamat email yang anda inginkan (nama email harus belum digunakan orang lain).
3. Buat sandi : Isi dengan password yang anda ingikan.
4. Konfirmasi sandi anda : Masukkan ulang password anda.
5. Tanggal lahir : Silahkan isi dengan tanggal lahir anda.
6. Gender : Pilih jenis kelamin anda.
7. Ponsel : Isikan dengan nomor telepon anda.
8. Alamat email anda saat ini : Masukkan alamat email lain (masukkan jika ada). Bisa anda kosongi.
9. Lokasi : Isi dengan lokasi negara tempat anda tinggal.
10. Centang dua persyaratan dari google tersebut...
11. Klik tombol LANGKAH BERIKUTNYA.

• Setelah anda mengisi formulir pendaftaran, anda akan dibawa ke halaman verifikasi akun, klik Lanjutkan..

• Anda akan diberi kode verifikasi yang dikirim oleh google secara otomatis ke nomor telepon yang anda isikan tadi. Kemudian masukkan angka verifikasi ke dalam kotak yang tersedia. Jika sudah, silahkan klik Verifikasi.

• Anda akan dibawa ke halaman Profil, langkah selanjutnya adalah menambahkan foto profil. Jika anda sudah punya silahkan ditambahkan dengan mengklik "Menambahkan Foto Profil". Jika sudah, klik saja Langkah berikutnya..

• Jika semua langkah diatas sudah anda lakukan dengan benar, akan ada ucapan sambutan dari Google. Klik Lanjutkan ke Gmail.

• Anda akan langsung dibawa ke halaman muka Gmail. Google akan langsung memberikan 4 pesan ke inbox email anda.

Sampai disini akun Gmail anda sudah jadi, silahkan anda manfaatkan fitur-fitur yang sudah disediakan oleh produk google gmail ini. Atau.. Jika anda tidak atau kurang mengerti dengan tutorial yang saya tuliskan diatas, anda juga bisa mempelajari cara membuat email melalui video dari youtube berikut ini...

Setelah anda membuat email, jika anda tertarik dengan blog dan ingin sekali punya blog, anda bisa ikuti juga tutorial Cara membuat blog Di blogger. Semoga artikel ini bisa membantu anda dan terima kasih sudah mau berkunjung. - See more at: http://www.seoterpadu.com/2013/04/cara-membuat-gmail-di-google.html#sthash.EDH1MeNC.dpuf

Pengertian Template

Pengertian Template

Anda pasti sudah tidak asing dengan istilah ini. Apalagi bagi para netter yang biasa berkelanan di dunia maya. Setiap kali mereka browsing mencari situs tertentu pasti mereka akan menemui template, yang berbentuk desain web tertentu. Selain di ranah internet sebenarnya template memiliki beberapa arti, tergantung dari mana kita melihatnya.

Dalam software template adalah fasilitas yang disediakan oleh aplikasi tertentu dengan model/type tampilan/program tertentu. Contohnya MS. Word templatenya adalah berbagai bentuk surat, Ms. Exel templatenya adalah berbagai bentuk nota atau biling, dreamweaver templatenya berbentuk halaman html atau php.

Sementara itu dalam dunia internet, template adalah layout atau tampilan webblog, atau website yang akan dirancang, atau sebuah desain tampilan halaman dengan berisikan dokumen file model-model tambahan yang dikodekan dalam bahasa program dan siap pakai. Untuk lebih jelasnya, perhatikan gambar-gambar template di bawah ini:

Template merupakan salah satu identitas anda. Kita tidak dapat memilih template secara sembarangan, tentu saja jika website Anda ditujukan untuk konsumsi public. Kita tidak boleh memilih template yang hanya mengikuti selera sendiri, mengabaikan selera public yang menjadi sasaran Anda. Sebenarnya sah-sah saja membuat template yang aneh dan tidak lazim (tidak sinkron dengan tema web), tetapi hasilnya nanti akan kelihatan lucu bin ndagel.

Ada beberapa hal yang perlu Anda perhatikan dalam memilih / membuat template

• Sebelum merancang sebuah web, sebaiknya Anda memikirkan template yang sesuai dengan tema / isi web Anda. Misalnya Anda ingin membuat web tentang kuliner, tentu saja tidak cocok jika template Anda dihiasi dengan gambar-gambar mobil, atau alat-alat musik.

• Carilah template yang menarik sehingga pengunjung betah melihat website Anda. Anda dapat mencari template di situs-situs tertentu yang menyediakan template gratis.

• Hal lain yang perlu Anda perhatikan adalah, template Anda diusahakan agar ringan sehingga ketika dikunjungi tidak lemot. Gambar-gambar ukurannya harus kecil sehingga tidak memperberat jika diakses. Biasanya para pengunjung akan membatalkan berkunjung ke website Anda jika aksesnya berat.

• Usahakan template Anda SEO Friendly untuk mendapatkan pengunjung yang banyak. Apalah artinya website kita yang bagus tetapi tidak ada pengunungnya.
• 
  

Pengertian Javascript

Pengertian Javascript

JavaScript adalah bahasa skrip yang populer di internet dan dapat bekerja di sebagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan dalam halaman web menggunakan tag SCRIPT.
JavaScript pertama kali dikembangkan oleh Brendan Eich dari Netscape dibawah nama Mocha, yang nantinya namanya diganti menjadi LiveScript, dan akhirnya menjadi JavaScript.
Navigator sebelumnya telah mendukung Java untuk lebih bisa dimanfaatkan para programmer yang non-Java. Maka dikembangkanlah bahasa pemrograman bernama LiveScript untuk mengakomodasi hal tersebut. Bahasa pemrograman inilah yang akhirnya berkembang dan diberi nama JavaScript, walaupun tidak ada hubungan bahasa antara Java dengan JavaScript.
JavaScript bisa digunakan untuk banyak tujuan, misalnya untuk membuat efek rollover baik di gambar maupun teks, dan yang penting juga adalah untuk membuat AJAX. JavaScript adalah bahasa yang digunakan untuk AJAX.

Penulisan JavaScript

Kode JavaScript biasanya dituliskan dalam bentuk fungsi yang ditaruh di tag <head> yang dibuka dengan tag

<script type=”teks/javascript”>.
<script type=”teks/javascript”>
alert(“Halo Dunia!”);
</script>

Kode JavaScript juga bisa diletakkan di file tersendiri yang berekstensi .js (singkatan dari JavaScript). Untuk memanggil kode JavaScript yang terdapat di file sendiri, di bagian awal <head> harus ditentukan dahulu nama file .js yang dimaksud menggunakan contoh kode seperti berikut:

<script type=”teks/javascript” src=”alamat.js”>
</script>

Script pada bagian head
Script ini akan dieksekusi ketika dipanggil (biasanya berbentuk function) atau dipanggil berdasarkan trigger pada event tertentu. Peletakkan script di head akan menjamin skript di-load terlebih dahulu sebelum digunakan (dipanggil).

<html>
<head>
<script type=”teks/javascript”>
…
</script>
</head>
</html>

Script pada Body
Script ini dieksekusi ketika halaman di-load sampai di bagian <body>. Ketika menempatkan script pada bagian <body> berarti antara isi dan JavaScript dijadikan satu bagian.

<html>
<head>
</head>
<body>
<script type=”teks/javascript”>
…
</script>
</body>
</html>

Jumlah JavaScript di <head> dan <body> yang ditempatkan pada dokumen tidak terbatas.
External JavaScript
Terkadang ada yang menginginkan menjalankan JavaScript yang sama dalam beberapa kali pada halaman yang berbeda, tetapi tidak mau disibukkan jika harus menulis ulang script yang diinginkan di setiap halaman. Maka JavaScript dapat ditulis di file secara eksternal. Jadi, antara dokumen HTML dan JavaScript dipisahkan, kemudian berkas tersebut dipanggil dari dokument HTML. Berkas JavaScript tersebut disimpan dengan ekstensi .js.
JavaScript : js/xxx.js document.write(“pesan ini tampil ketika halaman diload”);
Untuk menggunakan eksternal JavaScript (.js) dipakai atribut “src” pada tag <script> pada halaman HTML-nya.

<html>
<head>
</head>
<body>
<script src=”xxx.js”>
</script>
<p>Script di atas berada di berkas “xx.js” (eksternal) </p>
</body>
</html>

Penngertian CSS dan Perintah-Perintahnya

Penngertian CSS dan Perintah-Perintahnya

CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.

CSS dibuat untuk memisahkan konten utamadengan tampilan dokumen yang meliputi layout, warna da font. Pemisahan ini dapat meningkatkann daya akses konten pada web, menyediakan lebih banyak fleksibilitas dan kontrol dalam spesifikasi darisebuah karakteristik dari sebuah tampilan, memungkinkan untuk membagi halaman untuk sebuah formatting dan mengurangi kerumitan dalam penulisan kode dan struktur dari konten, contohnya tekniktableless pada desain web.

CSS juga memungkinkan sebuah halaman untuk ditampilkan dalam berbagai style dengan menggunakan metode pembawaan yang berbeda pula, seperti on-screen,in-print, by voice, dan lain-lain. Sementaraitu, pemilik konten web bisa menentukan link yang menghubungkan konten dengan file CSS.

Tujuan utama CSS diciptakan untuk membedakan konten dari dokumen dan dari tampilan dokumen, dengan itu, pembuatan ataupun pemrograman ulang web akan lebih mudah dilakukan. Hal yang termasuk dalam desain web diantaranya adalah warna, ukura dan formatting. Dengan adanya CSS, konten dan desain web akan mudah dibedakan, jadi memungkinkan untuk melakukan pengulangan pada tampilan-tampilan tertentu dalam suatu web, sehingga akan memudahkan dalam membuat halaman web yang banyak, yang pada akhirnya dapat memangkas waktu pembuatan web
Untuk perintah yang ada didalam CSS bisa disimak dibawah ini: .

Syntax / kalimat CSS terdiri dari beberapa set peraturan yang memiliki: 1 selector, 1 property, 1 value .
Adapun format penulisan kalimat CSS :

selector { property: value }

Selector itu untuk menunjukkan bagian mana yang hendak diatur / diformat.
Property untuk menunjukkan, bagian (properti) dari selector yang hendak diatur.
Value adalah nilai dari pengaturannya.

Contoh Syntax:

h1 { color: red }

Dari contoh di atas dapat kita simpulkan atau kita lihat bahwa :
Selector: h1
Property: color
Value: red
Kalau diterjemahkan ke kalimat bahasa Indonesia kira-kira begini: Mengatur color dari h1 ke warna merah (red).

Pengelompokan Selectors

Anda dapat menulis satu kode CSS untuk berbagai macam selector dengan cara menggunakan koma. Misalkan anda mau mengatur agar tag h1, h2 dan h3 semua menggunakan warna merah, maka kode CSS nya menjadi:

h1,h2,h3 { color: red }

Perhatikan penulisan h1,h2,h3 yang dipisahkan oleh koma.

Penggunaan Banyak Properties

Untuk mengatur lebih dari satu properties gunakan pemisah titik koma ( ; ).
Contoh:

h1,h2,h3 {color:red; font-family:arial; font-size:150%;}

Pada contoh di atas, tag h1, h2 dan h3 di atur agar menggunakan warna merah, dengan type font arial, dan ukuran font 150%.

Cara Penulisan Yang Baik

Sangat disarankan untuk menulis kode CSS menggunakan beberapa baris dimana pengaturan property dan values nya di indent. Hal ini bertujuan agar terlihat rapi.

h1,h2,h3 {
color:red;
font-family:arial;
font-size:150%;
}

Sekarang anda sudah mengerti aturan dasar penulisan kalimat CSS. Pelajaran berikutnya akan mengajarkan anda mengaplikasikan kode CSS ke halaman website.

CSS Comment

Kenapa kita perluh belajar membuat comment dalam CSS ? alasannya karena kadang kala, ada baiknya anda menuliskan komentar ke dalam kode CSS anda untuk memberi catatan pengingat.
Anda bisa menggunakan syntax pembuka /* dan penutup */ untuk menuliskan komentar. Segala teks yang berada di antara tag /* dan */ tidak akan dibaca sebagai kode, tapi hanya sebagai catatan untuk diri anda.

/* Tulis komentar anda di sini */
p
{
text-align: justify;
/* Tulis komentar anda di sini */
color: blue;
font-family: arial;
}

INPLEMNTASI CSS

Ada 4 cara memasang kode CSS ke dalam kode HTML / halaman web, yaitu:

• Inline CSS
• Embed atau memasang kode css ke dalam bagian <head>
• Pada link ke external CSS
• Import CSS file

Penasaran ? ,, Mari kita bahas satu per satu :

1. Inline CSS
Kode CSS dituliskan langsung ke dalam tag HTML yang ingin di format. Penulisan cara ini tidak memerlukan penulisan selector dalam kode CSS.
Cara ini sebaiknya hanya digunakan jika anda mau memformat suatu elemen satu kali saja.
Contoh:

<P style=”color:blue”>
Isi paragraf.
</p>

Pada contoh di atas, elemen paragraf <P> di format agar tulisannya menggunakan warna biru. Elemen paragraf lain, tidak akan menggunakan warna biru, karena format ini hanya berlaku pada elemen paragraf yang ditentukan kode CSS nya.
Penulisan CSS dengan cara ini di mulai dengan kata style:lalu di ikuti dengan syntax property: value.

2. Embedded CSS
Anda bisa juga menempelkan kode CSS di antara tag<head> dan </head>. Penulisan CSS dengan cara ini diawali dengan tag <style> dan diakhiri dengan tag </style>. Kode CSS-nya diletakkan pada halaman yang sama dengan yang ingin diformat.
Contoh:

<head>
<style type="text/css" media=screen>
p {color:blue;}
</style>
</head>

Dalam contoh di atas semua elemen <P> dalam halaman web tersebut akan diformat  menggunakan font berwarnabiru.

3. External CSS
Kode CSS external di tulis dalam satu file terpisah yang disimpan dengan akhiran .css atau ekstensi .css . Anda lalu perlu memanggil file CSS tersebut ke dalam semua halaman web yang anda buat. Dengan cara ini, anda hanya perlu memiliki satu set kode CSS yang digunakan untuk semua halaman web anda. Jadi ada dua langkah dalam pengimplementasian CSS dengan cara ini.
Contoh:

1. Anda membuat satu file dengan notepad atau teks editor lain, dan berinama, misalkan: style.css, lalu tuliskan kode-kode css di dalam file tersebut.

p {font-family: arial; font-size: small;} h1 {color: red; }

2. Langkah kedua adalah memanggil file style.css dari semua halaman web. Caranya dengan memasukkan kode di bawah ini, di antara tag <head> dan </head>

<head>
<link rel=”stylesheet” href=”style.css” type=”text/css”>
</head>

4. Import CSS
Anda bisa juga meng-import CSS ke dalam suatu halaman website menggunakan tag import.
Contoh:

@import "style.css";

atau
@import url("style.css");


Penggunaan Lebih dari Satu Kode CSS
Apabila ada lebih dari satu kode CSS untuk satu elemen, maka yang akan digunakan adalah kode yang lebih spesifik.
Misalkan dalam satu halaman web, menggunakan eksternal style sheet untuk memformat elemen H1 sebagai berikut:

h1 {
color: red;
text-align: left;
font-size: 8pt
}

Sementara di halaman web yang sama, di antara tag<head> ada kode CSS sbb:

h1 {
text-align: right;
font-size: 20pt
}

Perhatikan bagaimana pemformatan saling bertabrakan, dari eksternal style sheet, text-align=left sementara dari internal style sheet, text-align=right.
Dalam kasus seperti ini, maka yang akan aktif adalah kode yang lebih spesifik, dalam hal ini, internal style sheet lebih spesifik dibandingkan eksternal style sheet.
Jadi, dalam contoh di atas, kode yang akan diimplementasikan adalah sebagai berikut :

color: red;
text-align: right;
font-size: 20pt

CLASS dan ID SELECTOR
Masih ingat kan pada pelajaran syntax CSS pada bagian atas posting ini , yang di tulis adalah selector. Pada contoh-contoh di pelajaran sebelumnya, anda melihat penggunaan tag HTML sebagai selector.
Misalkan anda membuat kode CSS untuk tag <h1>. Sekarang bagaimana jika anda ingin memformat tag <h1> dengan warna / property berbeda? Misalkan, anda ingin tag <h1> di kolom kiri berwarna biru sementara tag <h1> di kolom tengah berwarna hitam.
Untuk kasus seperti ini, anda bisa menggunakan Class selector dan ID selector.

Class Selector

Class selector adalah penggabungan beberapa properties yang digunakan lebih dari satu kali.
Cara penulisan Class Selector:

.nama-class {property:value;}

Untuk menempelkan class ke dalam tag HTML:

taghtml.nama-class {Property:value;}

Perhatikan tanda titik di setiap awal nama Class. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div class=nama-class> dan di akhiri dengan tag </div>.
Contoh:
Penulisan kode CSS:

.tengah {text-align:center;}
p.tengah {color:red;}
h1.kiri {color:blue;}
h1.tengah {color:black;}

Pemakaian kode CSS
<div class=tengah>
<p>Teks tengah akan berwarna merah.</p>
<h1 > Tag H1 tengah akan berwarna hitam</h1>
</div>
<h1 class=kiri>Tag H1 kiri akan berwarna biru</h1>

Hasilnya jika di jalankan pada browser adalah :

Teks tengah akan berwarna merah.

Tag H1 tengah akan berwarna hitam

Tag H1 kiri akan berwarna biru

ID Selector

ID Selector mirip dengan Class selector. Untuk membedakannya, gunakanlah ID selector untuk memformat bagian yang hanya muncul satu kali dalam satu halaman web, misalnya untuk memformat bagian menu / sidebar.
Cara penulisan ID Selector:

#nama-ID {property:value;}

Untuk menempelkan ID selector ke dalam tag HTML:

taghtml#nama-ID {Property:value;}

Perhatikan tanda # di setiap awal nama ID. Jika anda ingin menggunakan class selector di luar kode HTML anda menggunakan tag <div id=nama-ID> dan di akhiri dengan tag </div>.

CSS Font Family

CSS dapat memformat font dengan berbagai macam cara mulai dari pengaturan tipe font, ukuran, dll. Saya akan coba bahas satu per satu ya.

1. CSS Font Family

Kalau anda biasa menggunakan ms word atau aplikasi lainnya dimana anda bisa merubah jenis / tipe font, pasti anda sudah mengenal nama-nama font seperti: arial, verdana, times new roman dll. Nah kalau di CSS kita sebut tipe font ini Font Family.
Cara penulisan:
property -> font-family
value -> nama-nama font, disarankan menggunakan hanya nama-nama font default
Contoh penulisan:

h1 {
font-family: verdana;
}
h2 {
font-family: “times new roman”;
}

Hasilnya jika dijalankan di browser :

Ini adalah Heading 1 (H1) menggunakan font Verdana

INI ADALAH HEADING 2 (H2) MENGGUNAKAN FONT TIMES NEW ROMAN

2. CSS Font Variant

Properti font variant digunakan untuk menampilkan font dalam huruf kapital kecil. Jadi semua huruf non kapital akan berubah menjadi huruf kapital, tetapi ukuran nya tetap sama. Perlu diketahui, tidak semua jenis font dapat menggunakan properti ini.
Cara penulisan:
property -> font-variant
value -> small-caps
Contoh penulisan:

h1 {
font-size: 14px;
font-variant: small-caps;
}

Hasilnya jika dijalankan pada browser :

Ini adalah Heading 1 (H1) menggunakan properti font variant