Memori online ulil

Home Blog Photos Video Music Calendar Reviews Links

ulil's posts with tag: tutorial

What are tags? You can give your posts a "tag", which is like a keyword. Tags help you find content which has something in common. You can assign as many tags as you wish to each post.
View posts by people in your network with tag tutorial

Belajar CSS

Aug 30, '07 2:35 AM
for everyone

Pertama kita kenalan dulu deh ma yang namanya css ini. kalau dilihat dari kegunaannya sih, kayaknya css itu adalah kumpulan kode-kode yang dipakai buat mengatur tampilan halaman situs atau blog kita. Bisa dipakai untuk memperindah bisa juga untuk memperburuk. Tergantung citarasa seni kita. Dengan css kita bisa mengatur background halaman web, huruf, tampilan link, jumlah dan posisi kolom pada halaman web/blog, dll.

Beberapa kelebihan menggunakan css untuk menghias situs kita, jika dibandingkan dengan hanya menggunakan kode html saja antara lain, lebih hemat waktu dan lebih mudah dalam mengedit tampilan web, karena css fungsinya seperti master halaman. Jadi ketika ingin mengubah seluruh web hanya cukup mengubah dari file css-nya tanpa perlu satu per satu dari tiap halaman. Karena sekali css ditulis, akan berlaku untuk semua halaman web. Ini juga berefek pada loading halaman yang menjadi lebih cepat, karena ukuran file tiap halaman web jadi lebih kecil. Kemudian, dengan css, juga memungkinkan berbagai efek yang lebih beragam untuk mempercantik tampilan web kita yang tidak bisa didapat dari html. Sedangkan kekurangannya adalah, beberapa kode css yang berjalan baik pada satu web browser, belum tentu bisa aktif pada web browser yang lain.

Oh iya, lupa. Css itu singkatan dari Cascading Style Sheet ^_^

Cara penulisan CSS

Seperti yang udah dijelasin sebelumnya, css itu bisa buat ngatur macam-macam, dari background sampai huruf. Format penulisan css contohnya seperti ini:

body { color: red; background: black; }
h1{font:25px helvetica;font-weight:bold;}
h2{font:23px helvetica;font-weight:bold;}
h3{font-size:16px;}
h4{font-size:14px;}
a{color:#333;text-decoration:none;}
a:hover{color:#666;}

Untuk menjelaskannya kita buat permisalan saja seorang bos dan karyawannya. Si bos (yaitu kita) ingin memberikan perintah pada karyawannya (maksudnya halaman blog kita). Nama karyawan yang akan di tuju adalah body,h1, h2, h3, h4, dan a. Sedangkan isi perintahnya adalah yang ada di antara {…}. Body tugasnya mengatur tampilan halaman web secara umum, h1 tugasnya mengatur tampilan judul utama, h2 dst mengatur sub judul, dan si a untuk mengatur tampilan link yang ada pada halaman web. Untuk kode di atas si bos bermaksud memerintahkan si body supaya menggunakan huruf berwarna merah (color: red;) dan warna backgroundgnya harus hitam (background: black;). Untuk h1 si bos memerintahkan dia supaya menampilkan judul utama dengan huruf helfitica dengan ukuran 25 px dan ditampilkan dengan efek tebal. Dan begitu seterusnya.

Css bisa juga ditulis secara berkelompok seperti

h1,h2,h3,h4,h5,h6 { color: blue }

Ini bisa dilakukan jika kita menginginkan judul utama dan sub judulnya memiliki warna yang sama yaitu biru. Jadi tidak perlu ditulis satu per satu.

Untuk memudahkan membacanya bisa juga dituliskan dalam bentuk seperti ini

h1 {
color:blue;
font-family:arial;
font-size:14px;
}

Untuk bisa mengaktifkan css di halaman situs kita, ada 3 cara.

Pertama, ditulis langsung di tag htmlnya

<html>
<head>
<title>test css</title>
</head>
<body>
<h1 style=”color: red”>ini judul</h1> <!–ini kode css-nya–>
<p>kalau yang ini paragraf</p>
</body>
</html>

Kedua, di tulis di dalam tag <style>

</head>
<body>
<h1>Ini judul</h1>
<p>ini paragraf</p> <!–bagian ini (tag P) yang terkena efek css–>
</body>
</html>

Yang terakhir, melalui link ke file css lain

Supaya cepat mengerti ada baiknya sering-sering melihat contoh-contoh kode css dari suatu web/blog. Bandingkan kode css yang tertulis dengan tampilan halamannya di web browser.

Tags: css, internet, tutorial

12 comments share

Belajar css dan html untuk pemula

Aug 18, '07 1:57 AM
for everyone

Link: http://www.quackit.com

Buat yang mau belajar css, html, web graphic, dan berbagai pelajaran yang terkait dengan pembuatan website, bisa main kesini. Walaupun tutorialnya berbahasa inggris, tapi mudah dipahami dan memang dikhususkan untuk pemula. Jadi tutorialnya cukup mendetail membahas tiap bagiannya.

Tags: belajar, internet, tutorial

5 comments share

html singkat, bekal untuk nge-blog

Feb 25, '07 10:11 PM
for everyone

Kode dasar HTML:

<HTML>
<HEAD>

<TITLE>judul halaman</TITLE>

</HEAD>

<BODY>

isi halaman

</BODY>
</HTML>

kemudian ini adalah kode warna jika ingin menulis dengan warna berbeda

#FFFFFF adalah putih
#FFFF66 adalah kuning
#FF66FF adalah pink
#FF0000 adalah merah
#66FF66 adalah hijau
#0066FF adalah biru
#00000 adalah hitam

Kode-kode untuk mengatur tampilan huruf:

<B>Untuk membuat huruf tebal</B>

<I>Untuk membuat huruf miring.</I>

<U>Untuk membuat garis bawah.</U>

<FONT COLOR="red">untuk mengatur warna huruf.</FONT>

<FONT SIZE="1">untuk mengatur ukuran huruf.</FONT>

<FONT FACE="Arial">untuk mengatur font yang digunakan.</FONT>

kalau mau digabung contoh penulisannya seperti ini

<FONT SIZE="4" FACE="Comic Sans MS" COLOR="green"><B> Ini huruf tebal, memakai font Comic Sans MS, berukuran 4, berwarna hijau. </B></FONT>

Kode untuk mengatur paragraf:

<CENTER> membuat tulisan berada di tengah.</CENTER>

<BR>untuk membuat baris baru.</BR> biasanya cukup di tulis <BR>

<P>untuk membuat paragraf baru.</P> biasanya cukup di tulis <P>

<P align="left"> yang membuat paragraf menjadi rata kiri,</P>

<P align="right"> yang membuat paragraf menjadi rata kanan dan</P>

<P align="center"> membuat paragraf menjadi berada di tengah.</P>

Kode untuk membuat link:

<A HREF="http://alamatweb.com">nama link yang ditampilkan</A>

<A HREF="mailto:alamatemail@yahoo.com">nama link yang ditampilkan</A>

<IMG SRC="url gambar"> untuk mengambil dan menampilkan gambar.

<A HREF="http://alamatweb.com"><IMG SRC="url gambar"></A> untuk membuat link dari gambar.

<EMBED AUTOSTART="True" SRC="audio/Video URL" HIDDEN="True"></EMBED> untuk meletakkan audio/video

<LINK REL="stylesheet" TYPE="text/css" HREF="url css"/> untuk menggunakan css eksternal

Kode untuk membuat tabel:

<TABLE>
<TR>
<TD>tulisan di baris 1 Kolom 1</TD>
<TD>tulisan di baris 1 Kolom 2</TD>
<TD>tulisan di baris 1 Kolom 3</TD>
</TR>
<TR>
<TD>tulisan di baris 2 Kolom 1</TD>
<TD>tulisan di baris 2 Kolom 2</TD>
<TD>tulisan di baris 2 Kolom 3</TD>
</TR>
</TABLE>

Banyaknya <TR> adalah banyaknya baris, kalau banyaknya <TD> adalah banyaknya kolom dalam satu baris.
Tabel diatas terdiri dari 2 baris, masing-masing baris 3 kolom.
Agar bordernya tampak <TABEL> diganti saja dengan <TABEL BORDER="1"> untuk ukuran border 1

Kode untuk membuat list:

List titik
<UL>
<LI> point 1
<LI> point 2
<LI> dst
</UL>

List angka
<OL>
<LI> point 1
<LI> point 2
<LI> dst
</OL>

Kode HTML lainnya:

<BLOCKQUOTE>membuat paragraf sedikit lebih ke dalam, istilahnya indent.</BLOCKQUOTE>

<STRIKE>membuat tulisan yang dicoret.</STRIKE>

Untuk menulis angka 2 pada H2O digunakan <SUB> 2 </SUB>

<SUP>untuk menulis tanda pangkat</SUP>

<MARQUEE direction="left" behavior="scroll" scrolldelay="25">membuat teks yang ditulis disini bergerak</MARQUEE>

<MARQUEE direction="right" behavior="scroll" scrolldelay="50">IMG SRC="url gambar"/></MARQUEE> untuk meletakkan gambar bergerak

Tags: internet, tutorial

14 comments share

css mp untuk pemula (4)

Feb 24, '07 3:14 AM
for everyone

Kita bisa mengganti warna latar belakangnya, mengganti jenis huruf, menghilangkan border atau garis pinggir dan lain-lain. Yang perlu kita lakukan adalah mengetahui dulu property dan valuenya.

Untuk mengubah-ubah background kita bisa menggunakan property:

background-color untuk mengganti warna. misalnya {background-color: red;}

background-image untuk mengganti gambar. Contohnya {background-image: url (http://alamatgambar.com/namafile.jpg) ;

color untuk mengganti warna huruf. Misalnya {color: black;}

untuk box atau kotak kita bisa mengubah:

border untuk mengubah tampilan garis tepi. Misal {border: 1 px} atau {border: none}

border-color untuk mengganti warna border misal {border-color: red}

Untuk mengatur huruf:

font-family untuk mengubah-ubah jenis huruf. Misal {font-family: arial}

font-size untuk mengubah ukuran huruf. Misalnya {font-size: 12 px}

udah dulu ya, selengkapnya nyari aja sendiri dari bahan bacaan di bawah ini ^_^

bahan bacaan:

1. buku resep css (cascading style sheet) karya mas windra swastika
2. e-book Tutorial Cascading Style Sheet(CSS) karya mas abe poetra (www.ilmukomputer.org)
3. e-book HTML(Hypertext Markup Language) dan CSS (Cascading Style Sheet) karya mas Nur Hasyim (www.ilmukomputer.org)
4. blognya mas didats (www.didats.net)

link lain yg bisa membantu:

http://www.ilmukomputer.com/umum/abepoetra-css.php
http://webdesign.about.com/cs/webdesignlayout/a/bl_layouts.htm
http://glish.com/css/
http://www.w3schools.com/css/pr_class_position.asp
http://www.southerntwilight.com/tutorials/css.html
http://www.htmlgoodies.com/css-ref/
http://www.htmlite.com/CSSintro.php
http://www.yourhtmlsource.com/stylesheets/introduction.html
http://www.nettnett.net/webdesign/css_commands.php

Tags: tutorial, css

8 comments share

css mp untuk pemula (3)

Feb 24, '07 3:13 AM
for everyone

di bagian dua tadi kita sudah bertemu dengan yang namanya width, height, background dan padding. ada lagi yang belum di sebut yaitu margin dan border. bisa dibilang keenamnya ini punya hubungan keluarga yang tak terpisahkan. sebenarnya bentuk layout dari format css itu adalah sebuah kotak yang memiliki keenam unsur diatas. misalnya kita memformat teks, maka secara otomatis, teks itu sebenarnya berada dalam sebuah kotak. yang ukuran kotak itu bisa kita tentukan dengan mengatur width dan heightnya. kalau kita tidak menuliskan widthnya maka akan secara otomatis mengikuti lebar maksimal halaman. sedangkan height, tanpa di tulispun akan otomatis menyesuaikan dengan isi dari kotak tersebut. terus kalao kita mau mengatur warna kotak itu bisa dengan mengatur backgroundnya. kalau border digunakan untuk mengatur garis pinggir dari kotak tersebut. kalau margin dan padding digunakan untuk mengatur posisi. margin digunakan untuk mengatur posisi kotak terhadap sisi kiri, kanan, atas dan bawah dari halaman utama atau terhadap kotak lain yang ada di luarnya. kalau padding digunakan untuk mengatur posisi objek di dalam kotak tehadap sisi kiri, kanan, atas dan bawah dari batas luar kotak (jarak dari border ke bagian sisi terluar objek). contohnya:

<html>
<head>
<title>test css</title>

<style type="text/css">
#kolom1 { color:red;font-weight:bold; width: 500px; padding-right: 50px; background: black; border: solid red 1 px; margin-left: 200px;} /*ini kode css-nya. ditujukan untuk tag <kolom1>*/
</style>

</head>
<body>
<div id="kolom1">Ini judulIni judulIni judulIni judulIni judulIni juduljudulIni juduljudulIni juduljudulIni juduljudulIni judul</div> 
<p>ini paragraf</p>
</body>
</html>

color:red; artinya warna teksnya merah
font-weight: bold; artinya teksnya di bold
width: 500px; artinya lebar kotak 500 px
padding-right: 50px; artinya batas teks dengan sisi kanan kotak adalah 50 px
background: black; artinya warna backgroundnya hitam
border: solid red 1 px; artinya ada border dengan bentuk solid berwarna merah dengan ukuran 1 px
margin-left: 200px; artinya jarak kotak dari sisi kiri halaman adalah 200 px

oh iya, karyawan tadi sebutan aslinya adalah selector. kalau width, background, color, border, dkk itu namanya property. kalau bold, red, 50 px, dkk namanya value. property dan value harus ditulis di antara {...}. antara property dan value di kasih tanda : dan diakhiri dengan tanda ; . susunan property bisa ditulis dalam satu baris atau di urutkan ke bawah seperti ini:

#kolom1 {
    color:red;
    font-weight:bold;
    width: 500px;
    padding-right: 50px;
    background: black;
    border: solid red 1 px;
    margin-left: 200px;
}

Bersambung lagi...

Tags: tutorial, css

0 comments share

css mp untuk pemula (2)

Feb 24, '07 3:10 AM
for everyone

seperti yang udah dijelasin sebelumnya, css itu bisa buat ngatur macam-macam, dari background sampai huruf. format penulisan css contohnya seperti ini:

body { color: red;background: black; }

kalau di mp ini adalah kode css untuk mengatur background halaman mp kita. untuk menjelaskannya kita buat permisalan saja seorang bos dan karyawannya. si bos (yaitu kita) ingin memberikan perintah pada karyawannya (maksudnya halaman blog kita). nama karyawan yang akan di tuju adalah body, sedangkan isi perintahnya adalah yang ada di antara {...}. untuk kode di atas si bos bermaksud memerintahkan si body (background halaman mp) supaya menggunakan huruf berwarna merah (color: red;) dan warna backgroungnya harus hitam (background: black;). kalau di mp nama karyawannya sudah di tentukan dari sananya, jadi kita tinggal menuliskan pesan yang sesuai untuk masing-masing "karyawan" itu. mau tau nama beberapa karyawannya, liat aja di sini.

kalau pada situs buatan kita sendiri, kita bisa memberi nama karyawannya terserah kita. misalnya kita kasih nama kolom1:

<html>
<head>
<title>test css</title>

<style type="text/css">
#kolom1 { color:red;font-weight:bold; width: 100px; height: 50px; padding: 5px; background: black;} /*ini kode css-nya. ditujukan untuk tag <kolom1>*/
</style>

</head>
<body>
<div id="kolom1">Ini judul</div> 
<p>ini paragraf</p>
</body>
</html>

kenapa ditambahin tanda # atau kenapa pake tag <div> udah dari sananya kali ya ^_^

Tags: tutorial, css, multiply

0 comments share

css mp untuk pemula (1)

Feb 24, '07 3:09 AM
for everyone

hanya sekedar berbagi ilmu, dari seseorang yang juga baru belajar. jadi kalau ada salah dan khilaf, mohon doa restu...lho ;p

pertama kita kenalan dulu deh ma yang namanya css ini. kalau dilihat dari kegunaannya sih, kayaknya css itu adalah kumpulan kode-kode yang dipakai buat mengatur tampilan halaman situs atau blog kita. bisa dipakai untuk memperindah bisa juga untuk memperburuk. tergantung citarasa seni kita. dengan css kita bisa mengatur background blog, huruf, tampilan link, jumlah dan posisi kolom pada halaman blog, dll.

untuk bisa mengaktifkan css di halaman situs kita, ada 3 cara.

pertama, ditulis langsung di tag htmlnya
<html>
<head>
<title>test css</title>
</head>
<body>
<h1 style="color: red">ini judul</h1> 
<p>kalau yang ini paragraf</p>
</body>
</html>

kedua, di tulis di dalam tag <style>
<html>
<head>
<title>test css</title>

<style type="text/css">
p { color:#0000FF;font-weight:bold; } /*ini kode css-nya. ditujukan untuk tag <p>*/
</style>

</head>
<body>
<h1>Ini judul</h1>
<p>ini paragraf</p> 
</body>
</html>

yang terakhir, melalui link ke dokumen css lain
<html>
<head>
<title>test css</title>
<link rel=stylesheet type="text/css"href="http://www.alamatsitus/styles/namafile.css"/>
</head>

untuk mengedit css mp, bisa masuk ke setting > my site > costum css. ntar ada kotak buat masukin kode css-nya. bisa langsung nulisin kodenya misal:

body { color:#0000FF;backgroun-color: black; }

atau bisa masukin link ke dokumen css kita yang ada di situs lain. misalnya:

<link rel=stylesheet type="text/css"href="http://www.alamatsitus/styles/namafile.css"/>

oh iya, lupa. css itu singkatan dari Cascading Style Sheet ^_^

Tags: tutorial, css, multiply

5 comments share

Cara mencari css blog

Feb 24, '07 3:07 AM
for everyone

Tertarik melihat tampilan mp yang lain? Pengen yang sama seperti itu? Sebenarnya gampang, kita tinggal copy aja cssnya, terus pindahin ke mp kita. Untuk mencari css mp seseorang, ini caranya. Dapat nemu cara ini dari desainblog.blogspot.com Ternyata gampang banget. Tinggal klik tab view di jendela browser kita. Terus, seperti biasa masuk ke page source. Tekan ctrl dan F secara bersamaan. Nah ntar keluar toolbar baru untuk fasilitas menemukan kata. Masukan kata css, dan tekan enter. Ntar akan diarahkan ke lokasi url dari css-nya. Tinggal copy paste url nya dan cari alamatnya. Kelihatan deh, css blog kita. Setelah itu, tinggal disave seperti biasa.

biasanya ada 4 link.

ketiga link ini adalah default dari mp

http://multiply.com/style/site/42.css
http://multiply.com/style/local/12.css
http://multiply.com/style/custom/mykonos/13.css
nah yang keempat adalah link dari kode css yang sudah di edit pemilik mp. contohnya:

http://lilamr.multiply.com/style-custom/lilamr/74/custom.css
(udah gak ada lagi. hiks...

Tags: tutorial, css

0 comments share

lilblog

Do you know ulil?

Who is on Multiply?

Want to learn more?

Already a Member?

Memori online ulil

ulil's posts with tag: tutorial