hasil Latihan halaman Web 2-a

Latihan Halaman Web 2-a

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 <<< Opposite Direction Marquees>>>

Hasil Uji Latihan Web 1

Isi halaman web ada disini.
Nama : IKA FITRIYANI
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

Apakah yang disebut sharing online pada Google Drive ?

Sharing Online Pada Google Drive 

Berbagi (sharing) dokumen

Dokumen yang sudah dibuat di Google Drive dapat di-share, sehingga memungkinkan banyak

orang dapat menggunakan secara bersamaan, bekerja pada dokumen yang sama meski tidak

berada pada satu tempat,. Pengguna bebas memilih kepada siapa saja dokumen tersebut akan

di-share.

Pengertian Website Forum dan Contohnya

Pengertian Website Forum dan Contohnya :


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.

Pengertian Google Drive, Google Docs, dan Google Maps

Google Drive 

 adalah layanan penyimpanan yang dimiliki oleh google. Google Drive ini sebenarnya sudah lama dilunjurkan yaitu sejak 24 April 2012 yang lalu. Pengguna google drive akan mendapatkan layanan penyimpanan gratis sebesar 5 GB. Google Drive merupakan perubahan dari Google Docs, jika sobat membuka google docs maka akan diredirect ke google drive.

Fungsi dan Keuntungan Google Drive

Google Drive memiliki fungsi layaknya Dropbox yaitu sinkronisasi data dari PC anda, jadi sobat bisa membuat dan berbagi data dan dokumen di google drive tersebut. Selain itu sobat juga bisa mengakses data file dari mana saja di rumah ataupun di kantor dengan terhubung dengan internet pastinya.

Keuntungan lainnya yaitu Google Drive telah terintegrasi dengan layanan google liannya diantaranya gmail, Gplus, google search dan lainnya.

Jika sobat ingin mencoba google drive ini silahkan langsung menuju drive.google.com lalu loginlah menggunakan Email sobat agar sobat bisa menggunakan Google Drive. Nanti akan tampil seperti gambar dibawah jika google drive sobat sudah diaktifkan, namun jika belum silahkan tunggu pemberitahuan dari google ke email sobat,

Kalau sudah berhasil login dan Google Drive sudah aktif sobat bisa langsung Upload File / folder seperti gambar di bawah ini,

Jika ingin menambah kapasitas penyimpanan di Google Drive sobat diharuskan membayar beberapa dollar, sesuai dengan harga yang diberikan oleh google seperti keterangan lengkap (gambar) dibawah ini,

Google Docs 

 

merupakan salah satu aplikasi yang dikembangkan Google untuk kebutuhan manajemen dokumen. Khususnya aplikasi office. Mulai dari pengolah kata (word processor), pengolah lembar kerja (spreadsheet) dan presentasi (presentation). Google Docs bukan hanya menyimpan saja, namun juga bisa digunakan untuk untuk mengolah, menyimpan, membuat, meng-edit dokumen perkantoran seperti layaknya Microsoft Office pada Windows atau Open Office pada Linux dengan secara online. Semuanya dalam satu paket dan tidak perlu menginstal di komputer. Karena sangat tangguh dan dasyat maka sering disebut aplikasi pembunuh Microsoft Office, Open Office, dan Neo Office. 

Fitur penyimpanan di ‘udara’ seperti ini memang bukanlah yang perdana. Beberapa layanan penyimpanan online lain yang tak kalah menariknya juga sudah lama tersedia, seperti DropBox (Google), Box.Net, Live Mesh (Microsoft) dan SkyDrive (Microsoft).

Tampilannya berbasis Web, dengan aplikasi ini anda dapat membuat dokumen baru, seperti doc, xls, dan bisa juga file odt, ods, rtf, csv, ppt, dan html. Tentu ini jauh lebih komplit karena file berektensi odt itu hanya hdimiliki oleh open office. Fitur yang tidak dimiliki oleh aplikasi lain adalah fitur kolaborasi, fitur ini bisa langsung anda gunakan degan memberi cek di depan nama file, lalu klik tombol share di atasnya. Sebuah boks akan menawarkan berbagai pilihan akan muncul, tersedia opsi "as collaborator" yang akan membuka akses baca tulis dokumen utuk orang-orang terpilih, sementara fungsi as viewer hanya akan memberikan akses baca saja. Tampilannya mirip dengan MS. Office 2003, sehingga akan dengan mudah menjalankannya.

 Google Maps 

adalah Peta Online atau Membuka peta secara online. kini dapat dilakukan secara mudah melalui servis gratis dari Google ini. bahkan, servis ini menyediakan API )Application Programming Interface) yang memungkinkan developer lain untuk memanfaatkan aplikasi ini di aplikasi buatannya. Tampilan GoogleMaps pun dapat dipilih, berdasarkan foto asli atau peta gambar rute saja.

IKA FITRIYANI

XII AP1

Pengertian Upload dan Download

Pengertian 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.



.Pengertian 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.

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

Secara umum dapat diartikan bahwa download adalah untuk menerima file dan upload adalah untuk mengirimkan file.

Cara Membuat Email di Gmail

1. Buka/klik link berikut ini → Daftar Gmail
2. Masukkan data lengkap

• Nama Depan dan belakang
  Jika nama lebih dari 2 kata, Anda bisa memasukkan 2 kata sekaligus pada salah satu kolom
• Nama pengguna
  Nama pengguna adalah alamat email anda nantinya. Alamat email ini berfungsi layaknya nomor handphone. Alamat email juga dibutuhkan jika anda ingin masuk ke inbox Email anda. Anda bisa bebeas memilih alamat email selama alamat tersebut masih tersedia/belum digunakan orang lain. Penulisan huruf besar kecil tidak dibedakan.
  
• Kata sandi
  Kata sandi diperlukan untuk mengamankan akun ada agar tidak sembarang orang bisa mengakses inbox email. Kata sandi ini diperlukan ketika Anda ingin masuk/login ke inbox Email. Berbeda dengan alamat email, penulisan huruf besar dan kecil pada kata sandi dibedakan (ruMah dan rumah di anggap kata yang berbeda). Jadi ingat baik-baik penulisan kata sandi Anda.
• Isi Tanggal lahir
• Pilih Gender
• Masukkan Nomor HP
  Penulisannya menggunakan +62, jadi jika nomor anda 08969xxx maka ditulis menjadi +62896xxx
• Biarkan kosong kolom "Alamat email Anda saat ini"
• Kemudian ketikkan teks pada gambar ke kolom yang telah disediakan
• Centang persetujuan, kemudian klik "Langkah Berikutnya"

3. Sebelumnya, anda bisa mencentang kolom "Buktikan Anda Bukan Robot" pada contoh gambar di atas, sehingga Anda tidak perlu menginputkan kata yang tertulis digambar. Tetapi sebagai gantinya, Google akan mengirimkan SMS yang berisi 6 digit angka ke nomor HP Anda. Jadi pastikan Anda memasukkan nomor HP yang valid





4. Pada langkah berikutnya Anda akan diberikan penawaran untuk membuat akun Google Plus. Lewati langkah ini untuk langsung menuju Gmail



5. Klik Memulai/Lanjutkan ke Gmail



6. Selamat, Anda telah memiliki akun Email dari Gmail. Ingat baik-baik alamat email Anda an password agar bisa masuk/login ke inbox email Anda

Pengertian Template dan Perintah-Perintahnya

Pengertian Template dan Perintah-Perintahnya

template

Apa sebenarnya template blog / website itu? jadi merupakan halaman yang berisi desain-desain di blog atau website beserta seluruh komponennya (misalnya: gambar, sylesheet, javascript, dsb) baik berupa file statis maupun dinamis yang berupa program atau aplikasi yang berjalan sebagai aplikasi web.  Template bisa juga anda artikan sebagai tema blog atau tampilanblog. Seperti yang anda lihat saat ini di blog belajar blog dan seo, bahwa terlihat tatanan gambar atau tampilan serta tulisan di layar monitor anda, itulah yang dinamakan template. ni contoh gambarnya: (di klik biar lebih jelas gambarnya).

Sedangkan Website merupakan situs atau halaman di Internet yang menyediakan informasi pada World Wide Web (www).

Template merupakan salah satu identitas Anda. Anda tidak bisa sembarang memilih template yang mengikuti selera Anda sendiri, apabila web yang Anda tunjukan untuk visitor dengan kalangan tertentu.

Berikut tips dalam memilih template untuk blog / website

• Tujuan atau arah website
• Pilih template yang menarik
• Template yang ringan
• SEO Friendly  

IKA FITRIYANI
XII AP1

Pengertian JavaScript dan Perintah-Perintahnya

Pengertian Javascript dan Perintah-Perintahnya

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.

Perintah Dasar pada JavaScript

1.Assignment adalah proses memasukkan data ke dalam variabel, baik variabel tunggal atau variabel jamak, atau proses pengisian variabel dengan data.

contoh:

nama = 'Rudianto'

angka = 11

umur = 25

namalengkap = 'Teknik Komputer'

2.Perintah Output
document.write(namavariabel)
document.write("Kalimat"+namavariabel)
alert("Kalimat"+namavariabel)

Contoh:
<html>
<head>
<title>Teknik Komputer</title>
</head>
<body>
 <h1>Contoh menampilkan output dan alert</h1>
 <script type="text/javascript" language="javascript">
  nama = "Rudianto"
  umur = 35
  document.write("Nama : "+nama)
  document.write("<br>")
  document.write("Umur : "+umur)
  alert("Nama anda : "+nama+"\n"+"Umur anda : "+umur)
 </script>
</body>
</html>

3. Perintah Input dengan prompt

namavariabel = prompt("Pesan" , nilaidefault)

dimana nilai default adalah nilai awal yang diberikan apabila pengguna tidak mengubahnya.

contoh:
<html>
<head>
<title>Teknik Komputer</title>
</head>
<body>
 <h1>Contoh menerima input</h1>
 <script type="text/javascript" language="javascript">
  nama = prompt("Siapa nama anda ? " , "Teknik Komputer")
  umur = prompt("Berapa umur anda ? ", 25)
  document.write("Nama : "+nama)
  document.write("<br>")
  document.write("Umur : "+umur)
 </script>
</body>
</html>

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>

Pengertian CSS dan Perintah-Perintahnya

Pengertian 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 teknik tableless 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 berwarna biru.

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;
}

HTML dan Perintah-Perintahnya

HTML dan Perintah-Perintahnya

PENGERTIAN HTML
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 oleh World Wide Web Consortium (W3C).

PERINTAH-PERINTAH HTML

1. <H1> Sampai <H6>

fungsi  : untuk membuat (memilih) ukuran teks.
Sintak  : <H1>             </H1>
Contoh
<HTML>
<HEAD><TITLE>Contoh Heading</TITLE></HEAD>
<BODY>
<H1> Teks dengan Heading 1</H1>
<H2> Teks dengan Heading 2</H2>
<H3> Teks dengan Heading 3</H3>
<H4> Teks dengan Heading 4</H4>
<H5> Teks dengan Heading 5</H5>
<H6> Teks dengan Heading 6</H6>
</BODY>
</HTML>

2. <HR>

Perintah ini digunakan untuk
membuat garis horizontal penuh layar
Sintaks            : <HR>
Contoh            :
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>

<HR> Kalimat ini diapit oleh 2 buah garis<HR>
</BODY>
</HTML>

3. <I>

Perintah ini digunakan untuk membuat teks miring.
Sintaks            : <I>    </I>
Contoh
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>

<I> Selamat Datang Ke Websiteku</I>
</BODY>
</HTML>

4. <B>

Perintah ini digunakan untuk membuat teks tebal.
Sintaks            : <B>   </B>
Contoh
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>
<B> Selamat Datang Ke Websiteku</B>
</BODY>
</HTML>

5. <U>

Perintah ini digunakan untuk membuat teks bergaris bawah.
Sintaks            : <U>   </U>
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>
<U> Selamat Datang Ke Websiteku</U>
<U><B> Selamat Datang Ke Websiteku</U></B>
</BODY>
</HTML>

6. <CENTER>

Perintah ini untuk membuat teks ke tengah layar.
Sintaks            : <CENTER>  </CENTER>
Contoh            :
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>
<H1><CENTER> Selamat Datang Ke Websiteku</CENTER></H1>
</BODY>
</HTML>

7. ALIGN

Digunakan untuk membuat teks rata kiri, tengah, kanan atau rata kanan dan kiri.
Sintaks            :
<P ALIGN=right>      → Rata Kanan
<P ALIGN=left>        → Rata Kiri
<P ALIGN=center>   → Rata Tengah
<P ALIGN=justify>   → Rata Kanan dan Kiri
atau
<H ALIGN=right>
<H ALIGN=left>
<H ALIGN=center>
<H ALIGN=justify>
Contoh pemakaian :
<H2 ALIGN=center>SELAMAT DATANG </H2>

\

8. <BR> (Line Break)

Perintah ini digunakan untuk memasukan fungsi Enter. Sebagai contoh, jika perintah <BR> diberikan di akhir baris, maka kalimat berikutnya akan
dicetak pada baris berikutnya.

9. <!–

Perintah untuk membuat KOMENTAR. Semua teks atau perintah yang diapit perintah ini tidak akan dijalankan. Ini hanya komentar untuk program.
Sintaks            : <!–    –>
Contoh            : <!—Ini adalah contoh komentar –>

10. <SMALL>

Perintah untuk membuat teks berukuran kecil.

11. <BIG>

Perintah untuk membuat teks berukuran besar

12. <P> (Paragraph)

Perintah ini digunakan untuk memisahkan paragraph yang satu dengan paragraph yang lain.
Sintaks            : <P>   </P>

13. <DD>

Perintah ini digunakan untuk membuat teks atau sebuah paragraph agak masuk ke dalam.
Sintaks            : <DD>

14. BASEFONT

Perintah ini digunakan untuk mengubah ukuran font.
Contoh            :
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>

15. <BASEFONT SIZE=6>

Teks dengan ukuran 6 pt<BR>
<B>Teks dengan ukuran 6 pt dan tebal</B>

<BASEFONT SIZE=10>
<BR>
Teks dengan ukuran 10 pt

</BODY>
</HTML>

16. FONT

Juga untuk mengubah ukuran font, tetapi angka yang terdapat dalam SIZE yang merupkan ukuran font harus diberi tanda kutip.
FACE
Untuk mengubah jenis font
Contoh :
<HTML>
<HEAD><TITLE>     </TITLE>
</HEAD>
<BODY>

<FONT SIZE =”6” FACE=”Times New Roman”>
Teks dengan jenis font Times New Roman.
<FONT SIZE =”6” FACE=”Arial”>
Teks dengan jenis font Arial.

</BODY>
</HTML>

17. <SUP>

Perintah ini digunakan untuk membuat cetak naik suatu teks.
Contoh :
<HTML>
<HEAD><TITLE>     </TITLE>
</HEAD>
<BODY>

Kami adalah yang pertama : 1<SUP>st</SUP> in the world.

</BODY>
</HTML>

18. <SUB>

Perintah ini digunakan untuk membuat cetak turun suatu teks.
Contoh :
<HTML>
<HEAD><TITLE>     </TITLE></HEAD>
<BODY>

H<SUB>2</SUB>O (disebut air(

</BODY>
</HTML>

19. <UL>

Perintah <UL> (Unordered List) adalah perintah untuk membuat daftar (list).

20. <LI>

Perintah <LI> (List Item) adalah perintah untuk membuat daftar (list)

CATATAN : Perintah <LI> harus berada dalam perintah OL, UL, DIR, MENU.

Contoh            :
<HTML>
<HEAD><TITLE>     </TITLE>
</HEAD>
<BODY>

<UL>
<LI>
<H2>JAWA TIMUR</H2>
<UL>
<LI>SURABAYA</LI>
<LI>MALANG</LI>
<LI>GRESIK</LI>
</UL>
</LI>
<BR>
<LI>
<H2>JAWA BARAT</H2>
<UL>
<LI>BANDUNG</LI>
<LI>SUKABUMI</LI>
<LI>BOGOR</LI>
</UL>
</LI>
</BODY>
</HTML>