* Blog, web yang berisi artikel-artikel yang berkaitan dengan hal apa saja.
* Shopping/E-commerce berisi penjualan produk-produk serta fasilitas transaksi
* Company profile berisi profile-profile perusahaan yang dapat kita lihat dan akses secara public
* Photo, berisi fasilitas untuk upload foto dan sharing, misalnya photobucket.com
* News, berisi informasi yang sedang aktual dan berita-berita tentang peristiwa yang sedang terjadi.

Unsur-unsur dari suatu website :

1. Content / isi. Isi suatu web dapat berbagai macam tergantung pada tujuan web tersebut dibuat.
2. Presentation/format; tampilan layout merupakan suatu hal yang penting dalam suatu website. Dimana tampilan yang baik dan canggih lebih memberi kenyamanan dan kemudahan user dalam mengaksesnya.
3. How to accomplish /implementasi :

1. Technical Requirements (storage, bandwidth/ data transfer, DB ,dll)
2. Programming & system / CMS (Joomla,Mambo,wordpress,Magento,dll)
3. Maintenance
4. Marketing/promotion

Dalam suatu web juga terdapat programmingnya, yaitu
- Berbasiskan Linux/UNIX terdiri dari Php & Mysql, Perl/CGI, Ruby on Rails
- Berbasiskan Windows terdiri dari ASP/NET
- Java, dll
How to setup the website :
- cari website yang capable
- cari domain name yang sesuai (kurang lebih 100 ribu/tahun untuk .com /net/org/biz/info). Nama yang dipilih alangkah baiknya singkat, mudah di ingat, tak ad symbol.
- Setup hosting account

* Email
* DNS/nameserver
* Membuat data base
* CMS

Domain merupakan nama unik yang diberikan untuk mengidentifikasi nama server komputer seperti web server atau email server di internet. Nama Domain memberikan kemudahkan pengguna di internet untuk melakukan akses ke server dan mengingat server yang dikunjungi dibandingan harus mengenal deretan nomor atau yang dikenal IP.
Perbedaan Subdomain, Addon Domain, dan Park Domain
Subdomain adalah bagian dari domain utama dan bisa dibuat sebebas mungkin tanpa perlu membeli lagi domain.
Subomain sering digunakan untuk membedakan fungsi atau bagian dari web. Kita ambil contoh saja dari web tokokomputer.com. tokokomputer.com adalah nama domain dan memiliki beberapa subdomain:

* blog. tokokomputer.com, blog adalah subdomain yang gunakan untuk sebagai web blog tokokomputer.com.
* secure. tokokomputer.com, secure merupakah bagian dari domain tokokomputer.com dimana akses ke sana telah diberikan fitur secure (SSL) dan digunakan untuk member area.
* faq. tokokomputer.com, digunakan untuk Frequent Ask Question.

Addon domain adalah domain yang ditambahkan ke hosting domain utama dan diarahkan ke sub-direktori sebuah website sehingga domain tersebut akan menampilkan isi web dari sub-direktori itu.
Addon domain digunakan kalau ingin menampilkan beberapa web dalam satu hosting. Dengan fitur ini anda hanya perlu membeli nama domain lagi dan ditambahkan ke hosting anda dan anda akan mempunyai 2 web yang aktif dengan isi berbeda.
Parked domain adalah domain yang diparkirkan ke atas domain utama sehingga pada saat domain tersebut diakses akan menampilkan web domain utama.
Test Development

1. Setup LAMP (Linier apache MySQLphp) di desktop PC kita
2. Download Joomla di joomla.org
3. Setup Database pada PhpMyAdmin
4. Setup joomla (http://localhost/joomla)
5. Import DB (database)

Hosting terdiri dari dua jenis yaitu :
-Shared hosting, dipakai banyak costumer. Kelemahannya mudah di hack
-Dedicated hosting, lebih private , untuk sendiri/pribadi (usaha skala besar). Kelemahannya lebih mahal.

CSS Merupakan singkatan dari Cascading Style Sheet. Dengan CSS, Anda bisa memisahkan antara desain tampilan website dengan konten/isi website.

HTML/xHTML sebenernya digunakan untuk memberi tahu browser bagaimana sebuah tag HTML ditampilkan di browser. Misalnya saja tag HTML <i>Teks miring</i>, tag tersebut sama artinya dengan “Halo web browser, teks ini tolong dicetak miring”. Dengan begitu, web browser yang Anda gunakan akan menampilkan teks secara miring(italic). Contoh lainnya, tag HTML <b>halo semua</b>, sama artinya dengan “Browser, tolong teks halo,semua ditampilkan dengan cetak tebal” yang selanjutnya web browser akan menampilkannya dengan cetak tebal.

Tapi bagaimana jika Anda ingin menampilkan teks tersebut agar tampil dengan teks yang miring dan bercetak tebal? Jika menggunakan HTML, solusinya adalah menuliskan tag HTML sebagai berikut :

<i><b>teks ini blod dan italic</b></i>

Yup, masalah selesai dengan tag tersebut. Tapi bagaimana jika Anda memiliki banyak teks yang harus dicetak tebal sekaligus miring? Apakah dengan menuliskan tag HTML seperti contoh diatas? Bisa saja tapi sangat tidak direkomandasikan dan tidak ada orang yang melakukan hal seperti itu. Selain karena harus mengetikkan berulang-ulang, juga akan memperbesar ukuran file HTML. Solusi untuk permasalahan diatas adalah dengan menggunakan CSS.

CSS sebenarnya berguna untuk memberikan perintah tambahan terhadap web browser agar suatu teks/elemen HTML bisa ditampilkan dengan tampilan tertentu sesuai yang dideskripsikan pada perintah stylesheet. Intinya, CSS berfungsi untuk memberikan style pada suatu tag/elemen HTML.

Ada 3 cara dimana kita bisa meletakkan kode CSS, yaitu:

Internal StyleSheet

Internal StyleSheet adalah sebutan kalau kita meletakkan kode CSS di bagian head sebuah file HTML. Atau dengan kata lain, kita meletakkan kode CSS diantara tag <head> dan tag </head>. Formatnya bisa seperti contoh dibawah:

<head
<style>
.. letak kode css ..
</style>
</head>
<body>

Dengan meletakkan kode CSS pada bagian head, berarti halaman HTML yang Anda buat akan mengandung kode CSS. Cara ini bagus jika Anda hanya perlu untuk memberikan style pada halaman HTML itu saja. Jika Anda ingin agar tiap halaman HTML memiliki style yang berbeda-beda, Anda bisa menggunakan cara ini.

Inline Style

Inline Style berbeda dengan Internal StyleSheet. Jika Internal StyleSheet berarti Anda meletakkan kode CSS pada file HTML (bagian head), maka Inline Style berarti Anda meletakkan kode CSS pada elemen HTML. Untuk lebih memberikan gambaran seperti apa Inline Style, berikut adalah contoh kodenya:

<p style="color:#ff0000;">teks warna merah </p>

Hasil dari kode diatas adalah:

teks warna merah

Seperti yang bisa Anda lihat, disini kode CSS diletakkan langsung pada elemen paragraf (tag <p>), dengan menambahkan atribut style dan mengetikkan kode CSS. Cara ini bagus jika Anda ingin suatu elemen memiliki tampilan yang berbeda. Misalnya saja Anda ingin ada teks yang berwarna merah dan ada teks yang berwarna biru.

External StyleSheet

External StyleSheet adalah peletakkan kode CSS pada file yang berbeda. Dimana nantinya Anda akan membuat sebuah file khusus yang berekstensi .css dimana nantinya kode-kode CSS akan diletakkan pada file tersebut. Setelah kode CSS diketikkan pada file tersebut, Anda bisa menghubungkan file CSS dengan file HTML yang Anda buat dengan mengetikkan perintah:

<link rel="stylesheet" href="letak file .css" />

Perintah diatas diketikkan pada bagian head. Atau dengan cara kedua seperti berikut ini:

<style>
@import url(letak file .css)
</style>

Dengan menggunakan Eksternal StyleSheet, maka file HTML akan terhubung dengan file CSS. Jika Anda perlu untuk mengubah suatu style, cukup dengna mengubah kode CSS pada file .css. Ada beberapa alasan mengapa cara ini dianjurkan:

• Maintenance kode CSS lebih mudah
• Mengurangi ukuran file HTML, karena kode CSS diletakkan pada file yang berbeda
• Dapat menghemat bandwidth

Yang mana yang lebih baik ?

Dengan banyaknya cara untuk meletakkan kode CSS Anda mungkin bertanya cara yang mana yang sebaiknya dipilih? Jawabannya adalah tergantung kebutuhan. Tapi saya sendiri lebih menyukai menggunakan External StyleSheet karena beberapa alasan yang sudah disebutkan tadi.

Bagaimana jika ketiga cara diatas digabungkan?

Jika ketiga cara diatas digabungkan atau jika Anda menggunakan 2 cara, maka web browser akan membuat style baru hasil dari penggabungan style tersebut dengan prioritas pertama ada pada Inline Style, kedua adalah Inline StyleSheet dan terakhir adalah External StyleSheet.

Maksud dari prioritas disini adalah jika pada External StyleSheet anda mengetikkan kode CSS untuk menampilkan teks warna merah, sedangkan di Internal StyleSheet Anda mengetikkan kode CSS untuk menampilkan teks warna biru, maka hasil yang tampil adalah teks warna biru akan prioritas Internal StyleSheet lebih diutamakan daripada External StyleSheet.

Tampilan berbeda di tiap web browser

Semakin Anda mendalami CSS maka Anda akan semakin sadar bahwa setiap browser mempunyai cara berbeda dalam menterjemahkan kode CSS. Inilah yang membuat sedikit kerja keras bagi para web designer untuk membuat tampilan sebuah halaman bisa tampil sama pada browser yang berbeda.

Pada artikel berikutnya saya akan membahas tentang Syntax CSS. Syntax CSS adalah bentuk kode CSS. Untuk mendapatkan update terbaru, jangan lupa untuk berlangganan via feed. Jika ada pertanyaan silahkan ditanyakan via komentar.

http://majalahweb.com/pengenalan-css/

Step 1: writing the HTML

For this tutorial, I suggest you use only the very simplest of tools. E.g., Notepad (under Windows), TextEdit (on the Mac) or KEdit (under KDE) will do fine. Once you understand the principles, you may want to switch to more advanced tools, or even to commercial programs, such as Style Master, Dreamweaver or GoLive. But for your very first CSS style sheet, it is good not to be distracted by too many advanced features.

Don’t use a wordprocessor, such as Microsoft Word or OpenOffice. They typically make files that a Web browser cannot read. For HTML and CSS, we want simple, plain text files.

Step 1 is to open your text editor (Notepad, TextEdit, KEdit, or whatever is your favorite), start with an empty window and type the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
</head>

<body>

<!-- Site navigation menu -->
<ul>
  <li><a href="index.html">Home page</a>
  <li><a href="musings.html">Musings</a>
  <li><a href="town.html">My town</a>
  <li><a href="links.html">Links</a>
</ul>

<!-- Main content -->
<h1>My first styled page</h1>

<p>Welcome to my styled page!

<p>It lacks images, but at least it has style.
And it has links, even if they don't go
anywhere&hellip;

<p>There should be more here, but I don't know
what yet.

<!-- Sign and date the page, it's only polite! -->
<address>Made 5 April 2004<br>
  by myself.</address>

</body>
</html>

(If you are using TextEdit on the Mac, don’t forget to tell TextEdit that the text is really plain text, by going to the Format menu and selecting “Make plain text”.)

The first line of the HTML file above tells the browser which type of HTML this is (DOCTYPE means DOCument TYPE). In this case, it is HTML version 4.01.

Words within < and > are called tags and, as you can see, the document is contained within the <html> and </html> tags. Between <head> and </head> there is room for various kinds of information that is not shown on screen. So far it contains the title of the document, but later we will add the CSS style sheet there, too.

The <body> is where the actual text of the document goes. In principle, everything in there will be displayed, except for the the text inside <!– and –>, which serves as a comment to ourselves. The browser will ignore it.

Of the tags in the example, <ul> introduces an “Unordered List”, i.e., a list in which the items are not numbered. The <li> is the start of a “List Item.” The <p> is a “Paragraph.” And the <a> is an “Anchor,” which is what creates a hyperlink.

If you want to know what the names in <…> mean, one good place to start is Getting started with HTML. But just a few words about the structure of our example HTML page.

• The “ul” is a list with one hyperlink per item. This will serve as our “site navigation menu,” linking to the other pages of our (hypothetical) Web site. Presumably, all pages on our site have a similar menu.
• The “h1” and “p” elements form the unique content of this page, while the signature at the bottom (“address”) will again be similar on all pages of the site.

Note that I didn’t close the “li” and “p” elements. In HTML (but not in XHTML), it is allowed to omit the </li> and </p> tags, which I did here, to make the text a little easier to read. But you may add them, if you prefer.

Let’s assume that this is going to be one page of a Web site with several similar pages. As is common for current Web pages, this one has a menu that links to other pages on the hypothetical site, some unique content and a signature.

Now select “Save As…” from the File menu, navigate to a directory/folder where you want to put it (the Desktop is fine) and save the file as “mypage.html”. Don’t close the editor yet, we will need it again.

(If you are using TextEdit on Mac OS X before version 10.4, you will see an option Don’t append the .txt extension in the Save as dialog. Select that option, because the name “mypage.html” already includes an extension. Newer versions of TextEdit will notice the .html extension automatically.)

Next, open the file in a browser. You can do that as follows: find the file with your file manager (Windows Explorer, Finder or Konqueror) and click or double click the “mypage.html” file. It should open in your default Web browser. (If it does not, open your browser and drag the file to it.)

As you can see, the page looks rather boring…

Step 2: adding some colors

You probably see some black text on a white background, but it depends on how the browser is configured. So one easy thing we can do to make the page more stylish is to add some colors. (Leave the browser open, we will use it again later.)

We will start with a style sheet embedded inside the HTML file. Later, we will put the HTML and the CSS in separate files. Separate files is good, since it makes it easier to use the same style sheet for multiple HTML files: you only have to write the style sheet once. But for this step, we just keep everything in one file.

We need to add a <style> element to the HTML file. The style sheet will be inside that element. So go back to the editor window and add the following five lines in the head part of the HTML file. The lines to add are shown in red (lines 5 to 9).

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style>
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]

The first line says that this is a style sheet and that it is written in CSS (“text/css”). The second line says that we add style to the “body” element. The third line sets the color of the text to purple and the next line sets the background to a sort of greenish yellow.

Style sheets in CSS are made up of rules. Each rule has three parts:

1. the selector (in the example: “body”), which tells the browser which part of the document is affected by the rule;
2. the property (in the example, ‘color’ and ‘background-color’ are both properties), which specifies what aspect of the layout is being set;
3. and the value (‘purple’ and ‘#d8da3d’), which gives the value for the style property.

The example shows that rules can be combined. We have set two properties, so we could have made two separate rules:

body { color: purple }
body { background-color: #d8da3d }

but since both rules affect the body, we only wrote “body” once and put the properties and values together. For more about selectors, see chapter 2 of Lie & Bos.

The background of the body element will also be the background of the whole document. We haven’t given any of the other elements (p, li, address…) any explicit background, so by default they will have none (or: will be transparent). The ‘color’ property sets the color of the text for the body element, but all other elements inside the body inherit that color, unless explicitly overridden. (We will add some other colors later.)

Now save this file (use “Save” from the File menu) and go back to the browser window. If you press the “Reload” button, the display should change from the “boring” page to a colored (but still rather boring) page. Apart from the list of links at the top, the text should now be purple against a greenish yellow background.

Colors can be specified in CSS in several ways. This example shows two of them: by name (“purple”) and by hexadecimal code (“#d8da3d”). There are about 140 color names and the hexadecimal codes allow for over 16 million colors. Adding a touch of style explains more about these codes.

Step 3: adding fonts

Another thing that is easy to do is to make some distinction in the fonts for the various elements of the page. So let’s set the text in the “Georgia” font, except for the h1 heading, which we’ll give “Helvetica.”

On the Web, you can never be sure what fonts your readers have on their computers, so we add some alternatives as well: if Georgia is not available, Times New Roman or Times are also fine, and if all else fails, the browser may use any other font with serifs. If Helvetica is absent, Geneva, Arial and SunSans-Regular are quite similar in shape, and if none of these work, the browser can choose any other font that is serif-less.

In the text editor add the following lines (lines 7-8 and 11-13):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style>
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]

If you save the file again and press “Reload” in the browser, there should now be different fonts for the heading and the other text.

Step 4: adding a navigation bar

The list at the top of the HTML page is meant to become a navigation menu. Many Web sites have some sort of menu along the top or on the side of the page and this page should have one as well. We will put it on the left side, because that is a little more interesting than at the top…

The menu is already in the HTML page. It is the <ul> list at the top. The links in it don’t work, since our “Web site” so far consists of only one page, but that doesn’t matter now. On a real Web site, there should not be any broken links, of course.

So we need to move the list to the left and move the rest of the text a little to the right, to make room for it. The CSS properties we use for that are ‘padding-left’ (to move the body text) and ‘position’, ‘left’ and ‘top’ (to move the menu).

There are other ways to do it. If you look for “column” or “layout” on the Learning CSS page, you will find several ready-to-run templates. But this one is OK for our purposes.

In the editor window, add the following lines to the HTML file (lines 7 and 12-16):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style>
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]

If you save the file again and reload it in the browser, you should now have the list of links to the left of the main text. That already looks much more interesting, doesn’t it?

The ‘position: absolute’ says that the ul element is positioned independently of any text that comes before or after it in the document and the ‘left’ and ‘top’ indicate what that position is. In this case, 2em from the top and 1em from the left side of the window.

’2em’ means 2 times the size of the current font. E.g., if the menu is displayed with a font of 12 points, then ’2em’ is 24 points. The ‘em’ is a very useful unit in CSS, since it can adapt automatically to the font that the reader happens to use. Most browsers have a menu for increasing or decreasing the font size: you can try it and see that the menu increases in size as the font increases, which would not have been the case, if we had used a size in pixels instead.

Step 5: Styling the links

The navigation menu still looks like a list, instead of a menu. Let’s add some style to it. We’ll remove the list bullet and move the items to the left, to where the bullet was. We’ll also give each item its own white background and a black square. (Why? No particular reason, just because we can.)

We also haven’t said what the colors of the links should be, so let’s add that as well: blue for links that the user hasn’t seen yet and purple for links already visited (lines 13-15 and 23-33):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style>
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  </style>
</head>

<body>
[etc.]

Traditionally, browsers show hyperlinks with underlines and with colors. Usually, the colors are similar to what we specificed here: blue for links to pages that you haven’t visited yet (or visited a long time ago), purple for pages that you have already seen.

In HTML, hyperlinks are created with <a> elements, so to specify the color, we need to add a style rule for “a”. To differentiate between visited and unvisited links, CSS provides two “pseudo-classes” (:link and :visited). They are called “pseudo-classes” to distinguish them from class attributes, that appear in the HTML directly, e.g., the class="navbar" in our example.

Step 6: adding a horizontal line

The final addition to the style sheet is a horizontal rule to separate the text from the signature at the bottom. We will use ‘border-top’ to add a dotted line above the <address> element (lines 34-37):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <style>
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  ul.navbar li {
    background: white;
    margin: 0.5em 0;
    padding: 0.3em;
    border-right: 1em solid black }
  ul.navbar a {
    text-decoration: none }
  a:link {
    color: blue }
  a:visited {
    color: purple }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[etc.]

Now our style is complete. Next, let’s look at how we can put the style sheet in a separate file, so that other pages can share the same style.

Step 7: putting the style sheet in a separate file

We now have an HTML file with an embedded style sheet. But if our site grows we probably want many pages to share the same style. There is a better method than copying the style sheet into every page: if we put the style sheet in a separate file, all pages can point to it.

To make a style sheet file, we need to create another empty text file. You can choose “New” from the File menu in the editor, to create an empty window. (If you are using TextEdit, don’t forget to make it plain text again, using the Format menu.)

Then cut and paste everything that is inside the <style> element from the HTML file into the new window. Don’t copy the <style> and </style> themselves. They belong to HTML, not to CSS. In the new editor window, you should now have the complete style sheet:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
ul.navbar li {
  background: white;
  margin: 0.5em 0;
  padding: 0.3em;
  border-right: 1em solid black }
ul.navbar a {
  text-decoration: none }
a:link {
  color: blue }
a:visited {
  color: purple }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Choose “Save As…” from the File menu, make sure that you are in the same directory/folder as the mypage.html file, and save the style sheet as “mystyle.css”.

Now go back to the window with the HTML code. Remove everything from the <style> tag up to and including the </style> tag and replace it with a <link> element, as follows (line 5):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>My first styled page</title>
  <link rel="stylesheet" href="mystyle.css">
</head>

<body>
[etc.]

This will tell the browser that the style sheet is found in the file called “mystyle.css” and since no directory is mentioned, the browser will look in the same directory where it found the HTML file.

If you save the HTML file and reload it in the browser, you should see no change: the page is still styled the same way, but now the style comes from an external file.

The next step is to put both files, mypage.html and mystyle.css on your Web site. (Well, you might want to change them a bit first…) But how to do that depends on your Internet provider.

http://www.w3.org/Style/Examples/011/firstcss

CSS Syntax

Syntax bisa diartikan sebagai bentuk kode. Jadi Syntax CSS bisa berarti bentuk kode CSS. Kode CSS berbeda dengan kode HTML. Kode CSS tidaklah sulit.

Kode CSS hanya dibagi menjadi 3 bagian, yaitu selector, property, dan value.

selector {
    property : value;
}

Selector adalah elemen HTML yang akan diberikan style. Property adalah atribut dari suatu elemen HTML yang ingin anda tentukan stylenya, sedangkan Value adalah nilai dari atribut tersebut. Untuk memberikan gambaran yang lebih jelas, berikut contoh kodenya:

body {
    background-color:#cccccc;
    font-family: "Calibri", Verdana, Tahoma;
}

Kode CSS diatas bisa berarti elemen body (tag <body>) akan ditampilkan dengan warna background abu-abu (#cccccc adalah kode warna untuk abu-abu), dan pada perintah berikutnya kita menentukan agar elemen body menggunakan font Calibri. Jika font Calibri tidak ada pada komputer user, maka gunakan font Verdana, begitu seterusnya. Penulisan font Calibri menggunakan petik dua adalah karena font Calibri bukan merupakan font standart dalam CSS. Font yang tidak standart dalam CSS sebaiknya diberi tanda petik dua. Font yang namanya terdiri lebih dari satu kata juga harus diberikan tanda petik, misal “Times New Roman”.

Inheritance/Pewarisan

Maksud dari Interitance pada CSS adalah begitu kita memberikan style pada elemen body, maka elemen yang didalamnya akan mengikuti style dari elemen body kecuali elemen tersebut diberi style tertentu.

Misalnya saja ada file html seperti berikut :

<html>
<head>
<title>Latihan syntax CSS</title>
<style>
    body {
        background-color:#cccccc;
        font-family: "Calibri", Verdana, Tahoma;
    }
</style><head>
<body>
    <h1>Halo apa kabar</h1>
    <p>paragraf halo apa kabar</p>
</body>
</html>

Dari contoh kode diatas, kita memberikan style pada elemen body (tag <body>). Dengan begini, maka tag-tag HTML yang ada diantara <body> dan </body> (tag <h1> dan tag <p>) akan mengikuti style <body>, yaitu memiliki warna latar abu-abu dan menggunakan font Calibri. Agar heading (tag h1) memiliki style yang berbeda, misalnya saja heading menggunakan font Times New Roman, maka harus dibuatkan style lagi khusus untuk heading. Berikut contoh kodenya:

<html>
<head>
<title>Latihan syntax CSS</title>
<style>
    body {
        background-color:#cccccc;
        font-family: "Calibri", Verdana, Tahoma;
    }
    h1 {
        font-family: "Times New Roman";
    }
</style><head>
<body>
    <h1>Halo apa kabar</h1>
    <p>paragraf halo apa kabar</p>
</body>
</html>

Pada contoh diatas, ditambahkan style baru untuk elemen heading 1. Dengan begini, heading akan memiliki font Times New Roman, tidak lagi mengikuti style dari elemen induxnya (body).

Walaupun begitu, ada beberapa property pada CSS yang tidak akan di-warisi oleh elemen didalamnya, misalnya saja property margin seperti pada kode dibawah:

body {margin:20px}

Misalnya kita menambahkan property margin pada style body, maka heading 1 dan paragraf tidak akan memiliki margin sebanyak 20px, hanya elemen body saja.

Kombinasi Selector

Untuk menghindari pengetikan ulang style CSS, elemen HTML yang memiliki style yang sama bisa menggunakan selector yang sama dengan cara menambahkan nama elemen dan dipisahkan dengan tanda koma, contohnya :

h1, h2, h3, h4, h5, h6 {
     color: #009900;
     font-family: Georgia, sans-serif;
}

Pada contoh diatas, heading 1, heading 2, sampai heading 6 diset menggunakan style yang sama.

Memberikan Komentar pada CSS

Untuk memberikan komentar pada kode CSS, dimulai dengan tanda /* dan diakhiri dengan tanda */. Contohnya saja:

/* Ini adalah komentar */

Komentar pada CSS tidak akan diproses oleh browser. Komentar berguna untuk mengetikkan sesuatu pada file CSS tapi Anda tidak ingin teks tersebut diproses.

Seperti halnya mempelajari HTML, mempelajari CSS juga bukan merupakan hal yang sulit. HTML dan CSS bukan bahasa pemrograman karena tidak terdapat percabangan (if … else … then) ataupun perulangan ( for, while, do), jadi CSS bukan sesuatu yang sulit untuk dipelajari, hanya perlu banyak latihan.

http://majalahweb.com/css-syntax/#more-39

Cara Membuat Header Untuk Blog

Beberapa teman sering menanyakan cara membuat gambar header untuk blog mereka. So, kali ini akan kubahas cara membuat sebuah gambar header.
Untuk membuat sebuah header, tentu kita perlu program yang bisa mengolah/membuat gambar dalam format bitmap. Ada banyak program yang bisa digunakan, pilih aja yang familiar dengan kamu, ada Adobe Photosop, Corel Photopaint, Macromedia Firework, dan masih banyak lagi. Tapi yang kubahas sekarang adalah yang pake Photoshop.

Sebelum kita mulai membuat gambarnya, ada beberapa hal yang perlu kita siapkan sebelumnya, yaitu:

• Ukuran header yang sesuai.
  Ini harus dilihat sendiri dari template blog yang dipake. Untuk contoh yang akan kita buat, ukuran header ini adalah 780 kali 180 pixel. Sama dengan ukuran header yang sekarang aku pake di blog ini, aku pakai template yang namanya Nyoba-780 buatan mas Isnaini.
  Kalo pake template dari Blogger, ukurannya bisa disesuaikan sendiri (tapi aku pernah nyoba kukasih gambar, gambarnya nggak muncul sebagai background header, mungkin biar muncul ada CSS yang harus dirubah (aku agak katrok kalo soal css, apalagi php..). Bisa juga diakali dengan membuat page element baru tentang Image sih sebenarnya, tapi nggak bisa diletakkan sebagai background header.). Kalo mau digunakan sebagai page element, ukur dulu berapa ukuran maksimal dari letak page element tadi.
• Bahan gambar atau materi yang akan digunakan.
  Ingat bahwa gambar tersebut bakalan nongol terus di blog kamu.
• Siapkan juga makanan kecil dan minuman di samping komputer, siapa tahu waktu keasyikan mbuat gambar merasa laper…

Terus caranya bikin header dengan Photoshop:

1. Buka dulu program photoshop, kemudian buat file baru dengan memilih menu File > New. Pada kotak dialog New, isikan ukuran header yang akan dibuat. Misalnya pada width=780 dengan satuan ukur pixel, terus pada height=180. Jangan lupa pada resolusi harus 72 pixel/inch. Klik OK jika semua ukuran sudah sesuai.
2. Kemudian buat gambar yang kamu inginkan pada file baru ini.
   Gambar header bisa dengan memasukkan gambar lain, kasih tulisan, atau apa aja terserah dengan ide dan kreativitasmu. Kalo bingung, nggak ada ide? Buka aja website dan blog yang ada di internet, banyak sekali kan, tinggal cari aja ide dari gambar-gambar tersebut. Tapi ingat, JANGAN ngopi paste gambar header orang lain terus dipasang lagi, itu sama kayak mencuri. Cari Ide, bukan Curi Ide.

1. Setelah gambar jadi, jika gambar tersebut menggunakan lebih dari satu layer, pilih dulu menu Layer > Flatten Image agar semua layer menjadi satu di layer background.

1. Kemudian simpan (File > Save) dengan format JPEG/JPG atau GIF. Ini agar ukuran file-nya kecil. Jika pake JPEG/JPG aturlah nilai kompresi yang dilakukan pada kotak dialog JPG option yang muncul setelah kamu klik tombol Save. Seberapa banyak kompresi yang diperlukan, itu tergantung kondisi gambar, misalnya ukuran dan warna yang digunakan. Sesuaikan sendiri antara ukuran file hasil jadi dengan kualitas gambar, karena semakin banyak dikompres maka kualitas gambar akan turun.

1. Setelah gambar udah jadi, tinggal diupload aja pakai software blog kamu.

Misalnya kamu pake Blogger, gunakan page element-nya. Kalo hosting sendiri, upload di cpanel-nya. Atau bisa juga diupload dulu ke web yang melayani image hosting, misalnya Photobucket, ImgPlace, atau yang lain.

http://sadewo-photology.blogspot.com/2007/07/cara-membuat-header-untuk-blog.html

Cara buat blog header halaman blogger (blogspot) dengan file flash “swf”.

Pernahkah berkeinginan membuat header blog anda di blogspot dengan menggunakan file animasi berekstensi swf ? Meskipun ukuran file bisa dibilang lumayan besar sebab menggunakan fileswf, namun seukuran hosting blogger ini tidak begitu masalah, kendala hanya akan muncul bila akses internet kita lambat untuk itu tidak ada salahnya bila ingin mencoba buat header image dengan file flash. Lihat contoh klik disini.

Untuk membuat file swf tersebut bisa menggunakan program adobe flash (macromedia flash), flash web design, swishmax dan program-program flash lainnya.

Setelah file atau image untuk header tersebut selesai dibuat, sekarang giliran menyimpannya disebuah hosting yang mau menyimpan file-file berextensi swf. Gunakan web http://sites.google.com untuk menyimpan file swf tersebut. Disini anda akan diminta untuk membuat sebuah halaman tempat penyimpan file swf tersebut.

Setelah selesai, cari “attachment” kemudian pilih file swf yang ingin anda upload. Setelah berhasil di upload sekarang letakkan kode berikut pada blog anda diantara <div id=’headerimg‘> dan </div>

<param name=’movie’ value=’lokasi file swf‘/> <embed height=’115‘ src=’lokasi file swf‘ width=’760‘> </embed> </object>

“headerimg” sebenarnya ini tidak mutlak, artinya tergantung parameter-parameter di blog anda, yang jelas ini mengartikan pada bagian header. Tulisan warna biru adalah lokasi file yang anda upload tadi, untuk mengetahuinya anda klik kanan kemudian klik “copy link location” dari file yang telah diupload di http://site.google.com dan paste untuk mengganti tulisan warna biru diatas.

Sedangkan untuk ukuran width dan height tergantung dari blog anda.

Cara Memasang Header ke Blog
1. Login ke acount blog anda
2. kemudian klik Tata Letak
3. klik Edit HTML
4. Cari kode dibawah

/* Header */
#headerimg {
position: relative;
padding: 50px 15px 10px 28px;
margin-bottom: 0px;
background:url(http://4.bp.blogspot.com/
_0FbXVm7r-Wc/R6VREzbxX5I/AAAAAAAAALw/Gp64u9xI_pQ/
s400/header.jpg) fixed ;
height:90px;

ganti code yang berwarna merah dengan code seperti ini:

<embed src=”http://www.tempat menyimpan file.com/nama file.swf”
quality=”high” bgcolor=”white” width=”lebar” height=”tinggi”
type=”application/x-shockwave-flash”
pluginspage=”http://www.macromedia.com/shockwave/download/index.cgi?
P1_Prod_Version=ShockwaveFlash”></embed>

Ganti code yang berwarna hijau, sesuaikan dengan parameter-parameter blog anda.

5. Simpan

http://www.taktiku.com/2008/08/cara-memasang-header-flash-swf-pada.html

Seminar Sehari PC Modding dan Design Games

Jakarta, 26 Agustus 2009

Auditorium Gedung Utama Lantai 3

Universitas Tarumanagara

Jakarta

Seminar ini terselenggara atas kerjasama dengan Intel, Chip, dan Games Design oleh Cartix Studio.

Sesi I :

Pembicara I : David Cahyadi (Channel Platform Manager Intel Indonesia)

Moderator : Fany Indriaty, ST.MT.

Intel mempunyai 3 jenis prosesor :

· Desktop : -Atom

-Core

- Mobile

· Server

1. Atom

Intel Atom ini diklaim oleh Intel sebagai prosesor terkecil, dibuat dengan teknologi baru yang disebut “hafnium infused 45 nanometer high-k silicon” yang disingkat dengan sebutan teknologi 45 nanometer. Prosesor yang besarnya kurang dari 26 milimeter persegi itu mengandung 47 juta transistor.

Selain terkecil dalam ukuran, Atom juga diklaim kecil dalam mengonsumsi daya. yaitu membutuhkan daya kurang dari 1 watt sampai 2,5 watt. sehingga cocok untuk perangkat mobile karena akan hemat baterai.

Produk perangkat bergerak seperti netbook dan nettop yang beredar saat ini sudah ada yang dilengkapi dengan Intel Atom, netbook adalah sebuah perangkat yang mirip dengan notebook hanya saja berukuran lebih kecil dan digunakan khusus untuk berinternet. contohnya Asus Eee PC 901, MSI Wind, Axioo Pico dan Acer Aspire One. sedang nettop dibuat untuk berinternet juga hanya saja nettop bukan perangkat bergerak, nettop tak ubahnya desktop hanya saja fungsinya khusus untuk berinternet.

Intel Atom ini menggunakan desain arsitektur yang benar-benar baru, jadi tidak mengadaptasi arsitektur prosesor yang sudah ada. selain hemat energi Atom juga memberikan performa yang baik untuk berinternet, Intel Atom memiliki FSB (Front Side Bus) dengan kecepatan sampai 533 MHz, prosesor ini juga mendukung multi-threading. Performa multimedia dan game juga digenjot dengan adanya dukungan untuk Streaming SIMD Extensions 3 (SSE3). Tetapi jangan harap game tiga dimensi bisa berjalan mulus di perangkat Atom. karena Atom memang dibuat bukan untuk main game, melainkan untuk berinternet.

http://www.artiku.com/2008/08/18/mengenal-intel-atom/

Atom adalah prosesor Intel terkecil yang terbuat dari transistor berukuran paling kecil di dunia saat ini.

Atom dibuat untuk memenuhi basic computing dengan deskripsi :

- Arsitektur yang hemat daya, untuk penggunaan konmputasi dasar.

- Dibuat menggunakan teknologi proses 45nM, Hi-k Metal Gate (pertama di industry semikonduktor).

Atom dibuat dengan arsitektur sederhana yang hanya dapat memenuhi 40% kinerja dari prosesor biasa.

Memungkinkan perangkat computer dengan:

1. Harga terjangkau.

2. Pemakaian daya yang rendah.

3. Kinerja yang cukup baik untuk pemakaian sehari-hari.

4. Dimensi atom hanya sebesar butiran beras

Atom lebih hemat energy dikarenakan oleh daya panas yang dihasilkan lebih sedikit sehingga lebih dingin dan energy yang dibutuhkan lebih sedikit.

Oleh karena itu Atom sangat cocok untuk platform Nettop dan Netbook.

Platform Intel Atom :

1. Mobile Internet Device

2. Netbook

3. Nettop

4. Main Cashier

5. Hotel PC

6. Etc

2. Intel Core

Mikroarsitektur Intel Core merupakan mikroarsitektur baru yang digunakan oleh perusahaan Intel sebagai pondasi pembuatan jajaran prosesor terbarunya, yang mengarah pada pembuatan prosesor multi core. Contoh prosesor yang berbasis mikroarsitektur intel core adalah:

Prosesor desktop:

o Celeron dengan nama sandi Conroe L

o Pentium Dual Core dengan nama sandi Allendale

o Core 2 Duo, yang terdiri dari dua keluarga prosesor yang masing-masing diberi nama sandi Allendale dan Conroe.

o Core 2 Extreme (2 core) dengan nama sandi Conroe XE

o Core 2 Extreme (4 core) dengan nama sandi Kentsfield XE

o Core 2 Quad (4 core) dengan nama sandi Kentsfield.

Prosesor mobile untuk laptop:

• Celeron M dengan nama sandi Merom 1024
• Core 2 Duo, yang terdiri dari dua keluarga prosesor yang masing-masing diberi nama sandi Merom dan Merom-2M
• Core 2 Extreme dengan nama sandi Merom XE

Prosesor server dan workstation:

o Dual Core Xeon, yang terdiri dari tiga keluarga prosesor yang masing-masing diberi nama sandi Woodcrest, Allendale, dan Conroe.

o Quad Core Xeon, yang terdiri dari dua keluarga prosesor yang masing-masing diberi nama sandi Kentsfield dan Clovertown.

Ketiga kelompok prosesor tersebut di atas (versi desktop, mobile, dan server), walaupun diproduksi dengan teknologi mikroarsitektur yang sama, yaitu Intel Core, ketiganya menggunakan soket, kecepatan bus (bus speed), dan konsumsi daya yang berbeda. Perlu diketahui, bahwa prosesor yang berbasis ‘core’ ini, akhirnya tidak lagi diberi nama pentium, tetapi diberi nama yang lain seperti disebutkan di atas.

Mikroarsitektur Intel Core didesain oleh team Intel Israel (IDC) yang sebelumnya telah mendesain prosesor mobile Pentium M. Mikroarsitektur Intel Core diperkenalkan pertama kali oleh Intel pada kuartal pertama tahun 2006. Sebelumnya, perusahaan Intel memproduksi prosesor Pentium 4 dengan menggunakan mikroarsitektur NetBurst. Arsitektur tersebut, ternyata mengakibatkan prosesor membutuhkan konsumsi energi yang tinggi dan tidak efektif bahkan kesulitan meningkatkan clock speed prosesor. Dua hal tersebut yang menjadi alasan utama, sehingga pihak intel meninggalkan mikroarsitektur NetBurst dan beralih ke mikro arsitektur Intel core.

Pada saat ini, dua perusahaan besar produsen prosesor, yaitu Intel dan AMD terus bersaing untuk menciptakan prosesor baru yang hemat energi dengan konsumsi daya yang lebih rendah dibandingkan prosesor-prosesor yang ada sekarang, dan bersaing untuk menciptakan prosesor yang lebih dingin, tidak banyak kehilangan panas akibat kebocoran arus listrik. Untuk mengatasi hal tersebut, perusahaan Intel mengembangkan mikroarsitektur Intel Core. Teknologi mikroarsitektur ini mampu menghasilkan prosesor yang hemat energi dengan panas yang tidak berlebihan dan secara keseluruhan menghasilkan peningkatan performa yang tidak mengecewakan.

Filosofi efisiensi energi ini sebenarnya diterapkan pertama kali pada prosesor Pentium M, kemudian dikembangkan lagi dengan menggunakan teknologi mikroarsitektur Intel core. Konsep efisiensi energi ini bermanfaat sekali, terutama untuk desain komputer laptop. Dengan konsumsi daya yang rendah, dapat meningkatkan daya tahan batere, hingga dapat dioperasikan dalam waktu yang lebih lama.

Terdapat lima fitur yang menjadi unsur utama pendukung suksesnya mikro arsitektur Intel core. Kelima fitur tersebut antara lain:

o Intel Wide Dynamic Execution

o Intel Advanced Digital Media Boost

o Intel Intelligent Power Capability

o Intel Advanced Smart Cache

o Intel Smart Memory Access

Kelima unsur utama ini secara bersama-sama menghasilkan efisiensi energi yang tinggi. Sebagai contoh, bila dibandingkan dengan Pentium D, prosesor desktop Intel Core 2 Duo menampilkan lebih dari 40 % perbaikan performa, dan lebih dari 40 % pengurangan daya listrik. Hal yang sama, juga terjadi pada prosesor mobile dan server yang berbasis mikroarsitektur Intel Core.

http://gpinkom.wordpress.com/2008/06/12/mikro-arsitektur-intel-core/

Core i7 :««««« : Untuk Gamning Advanced

Quad Core :«««« : Untuk Desing, Gaming

Core 2 :«««« : Standart Processor

Pentium :«« : Basic Processor

Perbedaan Core dan Atom.

Atom lebih hemat energy, lebih cepat, lebih kecil, namun perfoma kurang

Core lebih boros energy, lebih besar, namun performa lebih baik.

Gambar Core i7

Gambar Atom

Sesi Tanya Jawab

1. Apakah semua core atau atom yang lebih tepat untuk OS tertentu?

Atom cocok untuk OS yang tidak memakan resource yang besar seperti Windows XP, Linux 32 bit, Solaris, Mac, dan Ubuntu.

Kalau Core semua OS bisa beroperasi.

2. Peran processor dengan konektivitas internet?

Untuk Streaming atau Download memang membutuhkan konektivitas internet, tetapi untuk memproses hal itu dibutuhkan peran processor.

3. Berdasarkan rating i7 paling tinggi, tapi lebih baik mana i7 terendah atau Quad tertinggi ?

Lebih baik Core i7 karena berdasrkan kinerja i7 lebih baik dari Quad meskipun harga Quad lebih mahal dari i7.

4. Kabar mengenai Core i5?

Core i5 belum launching tetapi sudah siap di launching ( sedang masa testing ).

5. Perbedaan Core 2 Duo dan Core Duo?

Core Duo adalah nama prosesor intel untuk mobile yang mempunyai arsitektur yang sama dengan Core 2 Duo.

Sedangkan Core 2 Duo adalah Core Duo tetapi dalam bentuk mikroprosesor.

6. Perbedaan logo biru dan hitam?

Hitam dipergunakan untuk prosesor extreme series; seperti : Core i7

Biru untuk prosesor standar.

Pembicara II : Dedy Irvan ( Kepala Lab Majalah Chip )

Moderator : Fany Indriaty, ST.MT.

Chip berasal dari Jerman yang merupakan majalah IT pertama pada tahun 1978.

Sedangkan Chip masuk ke Indonesia tahun 1997 dan pada tahun 2000 melakukan research sendiri.

Chip paling banyak membahas Desktop PC

Desktop Vs Notebook

- Kelebihan Notebook

1. Kian terjangkau.

2. Kinerja semakin baik.

3. Mudah dibawa dan dipindahkan.

4. Memiliki layanan purna jual.

5. Lebih bergaya.

- Kekurangan Notebook :

1. Untuk harga yang sama masih di bawah desktop.

2. Tidak mudah di upgread.

3. Model dan spesifikasi bergantung pada produser.

4. Bergantung pada paket yang disediakan produser.

5. Layar kecil.

- Kekurangan desktop :

1. Tidak mudah dibawa.

2. Layanan purna jual bergantung pada komponen.

3. Kabel rumit.

4. Space besar.

5. Casing biasa.

6. Berisik.

- Kelebihan Desktop :

1. Kinerja lebih baik dari notebook.

2. Mudah di upgread.

3. Model dan spesifikasi dapat ditentukan sendiri.

4. Ergonomi.

Pengenalan Komponen PC :

1. Motherboard

Motherboard adalah komponen paling utama pada komputer. Kualitas motherboard sangat berpengaruh pada kemampuan dukungan terhadap jenis dan kapasitas komponen lainnya serta batas kemampuan upgrade.

Spesifikasi yang harus diperhatikan pada motherboard adalah:

• Jenis Slot/ Socket Prosessor,
  Jenis konektor prosessor (slot/socket) menentukan jenis prosessor yang dapat digunakan dan batasan upgrade dari prosessor. Contoh Socket 478 dapat dipakai untuk semua prosessor kelas Pentium 4 dan Celeron 4 dengan FSB 400, 533 dan 800 Mhz.

• Chipset motherboard
  Pilih motherboard dengan chipset terbaru yang mendukung memori SDRAM DIMM atau RDRAM RIMM, AGP slot 4X minimal dan harddisk ATA 100 minimal.

• Jenis dan kapasitas slot memory
  Slot jenis DDR DIMM atau RIMM adalah pilihan yang terbaik karena mendukung kapasitas memori lebih besar. Untuk kecepatan, memori terbaik adalah DDR SDRAM atau RDRAM, tetapi RDRAM lebih mahal.

• Slot ekspansi
  Perhatikan jenis dan jumlah slot ekspansi yang tersedia, seperti PCI bus minimal tipe 2.1, AGP bus 4 X support (minimum) dan ISA bus. Sesuaikan slot ekspansi dengan card adapter yang akan dipasang. Sebaiknya masih tersisa slot kosong untuk memasang card adapter yang mungkin diperlukan.

• Port I/O
  Periksa jenis dan jumlah port I/O yang tersedia seperti USB, firewire, serial dan parallel port. Sesuaikan dengan kebutuhan piranti eksternal.

• Feature
  Motherboard berkualitas baik akan dilengkapi dengan fitur Power Management ACPI untuk efisiensi penggunaan daya listrik dan PnP System (Plug and Play) yakni instalasi otomatis piranti eksternal.

http://www.e-dukasi.net/pengpop/pp_full.php?ppid=201&fname=semua.htm

2. Prosesor

Spesifikasi yang harus diperhatikan pada prosessor adalah :

• Jenis Prosessor ,
  Jenis boxed lebih baik dari OEM karena sudah dilengkapi dengan heatsink atau fan serta diberikan garansi 3 tahun.

• Kecepatan FSB
  FSB ( Front Side Bus) merupakan kecepatan asli/internal dari prosessor. Kecepatan FSB yang lebih tinggi akan lebih baik.

• L1 Cache memori.
  Kapasitas yang lebih besar akan lebih baik

• L2 Cache Memori
  Faktor kecepatan pada L2 cache lebih berpengaruh terhadap kemampuan kerja daripada kapasitasnya.
  L2 cache jenis on die lebih baik karena bekerja pada kecepatan FSB.

http://www.e-dukasi.net/pengpop/pp_full.php?ppid=201&fname=semua.htm

3. Memory RAM

Memori akses acak (bahasa Inggris: Random access memory, RAM) adalah sebuah tipe penyimpanan komputer yang isinya dapat diakses dalam waktu yang tetap tidak memperdulikan letak data tersebut dalam memori. Ini berlawanan dengan alat memori urut, seperti tape magnetik, disk dan drum, di mana gerakan mekanikal dari media penyimpanan memaksa komputer untuk mengakses data secara berurutan.

Pertama kali dikenal pada tahun 60′an. Hanya saja saat itu memori semikonduktor belumlah populer karena harganya yang sangat mahal. Saat itu lebih lazim untuk menggunakan memori utama magnetic.

Perusahaan semikonduktor seperti Intel memulai debutnya dengan memproduksi RAM , lebih tepatnya jenis DRAM.

Biasanya RAM dapat ditulis dan dibaca, berlawanan dengan memori-baca-saja (read-only-memory, ROM), RAM biasanya digunakan untuk penyimpanan primer (memori utama) dalam komputer untuk digunakan dan mengubah informasi secara aktif, meskipun beberapa alat menggunakan beberapa jenis RAM untuk menyediakan penyimpanan sekunder jangka-panjang.

Tetapi ada juga yang berpendapat bahwa ROM merupakan jenis lain dari RAM, karena sifatnya yang sebenarnya juga Random Access seperti halnya SRAM ataupun DRAM. Hanya saja memang proses penulisan pada ROM membutuhkan proses khusus yang tidak semudah dan fleksibel seperti halnya pada SRAM atau DRAM. Selain itu beberapa bagian dari space addres RAM ( memori utama ) dari sebuah sistem yang dipetakan kedalam satu atau dua chip ROM.

Tipe umum RAM

Beberapa jenis RAM. Dari atas ke bawah: DIP, SIPP, SIMM 30 pin, SIMM 72 pin, DIMM, DDR DIMM.

• SRAM atau Static RAM
• NV-RAM atau Non-Volatile RAM
• DRAM atau Dynamic RAM
  • Fast Page Mode DRAM
  • EDO RAM atau Extended Data Out DRAM
  • XDR DRAM
  • SDRAM atau Synchronous DRAM
    • DDR SDRAM atau Double Data Rate Synchronous DRAM sekarang (2005) mulai digantikan dengan DDR2
    • RDRAM atau Rambus DRAM

Tipe tidak umum RAM

• Dual-ported RAM
• Video RAM, memori port-ganda dengan satu port akses acak dan satu port akses urut. Dia menjadi populer karena semakin banyak orang membutuhkan memori video. Lihat penjelasan dalam Dynamic RAM.
• WRAM
• MRAM
• FeRAM

Produsen peringkat atas RAM

• Infineon
• Hynix
• Samsung
• Micron
• Rambus
• Corsair

http://id.wikipedia.org/wiki/RAM

4. VGA

VGA, singkatan dari Video Graphics Adapter, adalah standar tampilan komputer analog yang dipasarkan pertama kali oleh IBM pada tahun 1987. Walaupun standar VGA sudah tidak lagi digunakan karena sudah diganti oleh standar yang lebih baru, VGA masih diimplementasikan pada Pocket PC. VGA merupakan standar grafis terakhir yang diikuti oleh mayoritas pabrik pembuat kartu grafis komputer. Tampilan Windows sampai sekarang masih menggunakan modus VGA karena didukung oleh banyak produsen monitor dan kartu grafis.

Istilah VGA juga sering digunakan untuk mengacu kepada resolusi layar berukuran 640×480, apa pun pembuat perangkat keras kartu grafisnya. Kartu VGA berguna untuk menerjemahkan keluaran komputer ke monitor. Untuk proses desain grafis atau bermain permainan video, diperlukan kartu grafis yang berdaya tinggi. Produsen kartu grafis yang terkenal antara lain ATI dan nVidia.

Selain itu, VGA juga dapat mengacu kepada konektor VGA 15-pin yang masih digunakan secara luas untuk mengantarkan sinyal video analog ke monitor. Standar VGA secara resmi digantikan oleh standar XGA dari IBM, tetapi nyatanya VGA justru digantikan oleh Super VGA.

http://id.wikipedia.org/wiki/VGA

5. Harddisk

Cakram keras (Inggris: harddisk atau harddisk drive disingkat HDD atau hard drive disingkat HD) adalah sebuah komponen perangkat keras yang menyimpan data sekunder dan berisi piringan magnetis. Cakram keras diciptakan pertama kali oleh insinyur IBM, Reynold Johnson di tahun 1956. Cakram keras pertama tersebut terdiri dari 50 piringan berukuran 2 kaki (0,6 meter) dengan kecepatan rotasinya mencapai 1.200 rpm (rotation per minute) dengan kapasitas penyimpanan 4,4 MB. Cakram keras zaman sekarang sudah ada yang hanya selebar 0,6 cm dengan kapasitas 750 GB.

Jika dibuka, terlihat mata cakram keras pada ujung lengan bertuas yang menempel pada piringan yang dapat berputar

Data yang disimpan dalam cakram keras tidak akan hilang ketika tidak diberi tegangan listrik. Dalam sebuah cakram keras, biasanya terdapat lebih dari satu piringan untuk memperbesar kapasitas data yang dapat ditampung.

Dalam perkembangannya kini cakram keras secara fisik menjadi semakin tipis dan kecil namun memiliki daya tampung data yang sangat besar. Cakram keras kini juga tidak hanya dapat terpasang di dalam perangkat (internal) tetapi juga dapat dipasang di luar perangkat (eksternal) dengan menggunakan kabel USB ataupun FireWire.

Cakram keras era tahun 1990-an tampak atas (kiri) dan tampak bawah (kanan)

http://id.wikipedia.org/wiki/Harddisk

6. Power Supply Unit

Secara garis besar, power supply elektrik dibagi menjadi dua macam, yaitu Power Supply Linier dan Switching Power Supply.

A computer‘s switched mode power supply unit.

• Power Supply Linier

Merupakan jenis power supply yang umum digunakan. Cara kerja dari power supply ini adalah mengubah tegangan AC menjadi tegangan AC lain yang lebih kecil dengan bantuan Transformator. Tegangan ini kemudian disearahkan dengan menggunakan rangkaian penyearah tegangan, dan dibagian akhir ditambahkan kapasitor sebagai pembantu menyearahkan tegangan sehingga tegangan DC yang dihasilkan oleh power supply jenis ini tidak terlalu bergelombang.

Selain menggunakan dioda sebagai penyearah, rangkaian lain dari jenis ini menggunakan regulatorVolt dengan arus antara 0 – 5 Ampere. tegangan sehingga tegangan yang dihasilkan lebih baik daripada rangkaian yang menggunakan dioda. Power Supply jenis ini dapat menghasilkan tegangan DC yang bervariasi antara 0 – 30

• Switching Power Supply

Power Supply jenis ini menggunakan metode yang berbeda dengan power supply linier. Pada jenis ini, tegangan AC yang masuk ke dalam rangkaian langsung disearahkan oleh rangkaian penyearah tanpa menggunakan bantuan transformer.

Cara menyearahkan tegangan tersebut adalah dengan menggunakan frekuensi tinggi antara 10KHz hingga 1MHz, dimana frekuensi ini jauh lebih tinggi daripada frekuensi AC yang sekitar 50Hz. Pada switching power supply biasanya diberikan rangkaian feedback agar tegangan dan arus yang keluar dari rangkaian ini dapat dikontrol dengan baik.

http://id.wikipedia.org/wiki/Power_supply

7. Monitor

Tampilan komputer atau monitor komputeradalah salah satu jenis soft-copy device, karena keluarannya adalah berupa signal elektronik, dalam hal ini berupa gambar yang tampil di layar monitor. Gambar yang tampil adalah hasil pemrosesan data ataupun informasi masukan. Monitor memiliki berbagai ukuran layar seperti layaknya sebuah televisi. Tiap merek dan ukuran monitor memiliki tingkat resolusi yang berbeda. Resolusi ini lah yang akan menentukan ketajaman gambar yang dapat ditampilkan pada layar monitor. Jenis-jenis monitor saat ini sudah sangat beragam, mulai dari bentuk yang besar dengan layar cembung, sampai dengan bentuk yang tipis dengan layar datar (flat).. Untuk saat ini monitor komputer terdiri dari beberapa jenis, di antaranya:

• monitor Tabung sinar kathoda

Tabung sinar katoda (bahasa Inggris: cathode ray tube atau CRT), ditemukan oleh Karl Ferdinand Braun, merupakan sebuah tabung penampilan yang banyak digunakan dalam layar komputer, monitor video, televisi dan oskiloskop. CRT dikembangkan dari hasil kerja Philo Farnsworth yang dipakai dalam seluruh pesawat televisi sampai akhir abad 20, dan merupakan dasar perkembangan dari layar plasma, LCD dan bentuk teknologi TV lainnya.

Tabung sinar katoda pada pesawat televisi 14 inch

· Penjelasan perangkat

Versi paling awal CRT adalah sebuah dioda katoda-dingin, sebuah modifikasi dari tabung Crookes (lihat sinar-X) dengan layar dilapisi fosfor, kadangkala dipanggil tabung Braun. Versi pertama yang menggunakan kathoda panas dikembangkan oleh J.B. Johnson (yang merupakan asal istilah noise Johnson) dan H.W. Weinhart dari Western Electric dan menjadi produk komersial pada 1922.

Sinar katoda adalah aliran elektron kecepatan tinggi yang dipancarkan dari katoda yang dipanaskan dari sebuah tabung vakum.

Dalam tabung sinar katoda, elektron-elektron secara hati-hati diarahkan menjadi pancaran, dan pancaran ini di”defleksi” oleh medan magnetik untuk men”scan” permukaan di ujung pandan (anode), yang sebaris dengan bahan berfosfor (biasanya berdasar atas logam transisi atau rare earth. Ketika elektron menyentuh material pada layar ini, maka elektron akan menyebabkan timbulnya cahaya.

Secara teori, CRT dan LCD memiliki perbedaan di mana CRT menggunakan elektron yang ditembakkan ke layar sehingga mewarnai menjadi suatu gambar. LCD memiliki cahaya di belakang yang konstan di mana intensitas kecerahan menjadi berbeda karena adanya penutupan/penghalangan dari molekul untuk sinar yang melewati panel.

• monitor LCD

Tampilan Kristal Cair (bahasa Inggris: Liquid Crystal Display) juga dikenal sebagai LCD adalah suatu jenis media tampilan yang menggunakan kristal cair sebagai penampil utama. LCD sudah digunakan di berbagai bidang misalnya dalam alat-alat elektronik seperti televisi, kalkulator ataupun layar komputer.

Pada LCD berwarna semacam monitor terdapat banyak sekali titik cahaya (piksel) yang terdiri dari satu buah kristal cair sebagai sebuah titik cahaya. Walau disebut sebagai titik cahaya, namun kristal cair ini tidak memancarkan cahaya sendiri. Sumber cahaya di dalam sebuah perangkat LCD adalah lampu neon berwarna putih di bagian belakang susunan kristal cair tadi.

Titik cahaya yang jumlahnya puluhan ribu bahkan jutaan inilah yang membentuk tampilan citra. Kutubpolarisasi medan magnetik yang timbul dan oleh karenanya akan hanya membiarkan beberapa warna diteruskan sedangkan warna lainnya tersaring. kristal cair yang dilewati arus listrik akan berubah karena pengaruh

• monitor plasma

Tampilan plasma adalah sebuah tampilan layar datar emisif di mana cahaya dihasilkan oleh phosphorplasma antara dua layar datar gelas. Gas yang dilepas muatannya tidak mengandung merkuri (berlawanan dengan AMLCD); sebuah campuran gas mulianeon dan xenon) digunakan. Campuran gas ini sulit bereaksi dan sama sekali tidak berbahaya. yang tereksitasi oleh sebuah pelepasan muatan (

Sejarah

Tampilan plasma diciptakan di Universitas Illinois oleh Donald L. Bitzer dan H. Gene Slottow pada 1964 untuk Sistem Komputer PLATO. Panel monochrome orisinal (biasanya oranye atau hijau) menikmati penggunaan yang bertambah pada awal 1970-an karena tampilan ini kuat dan tidak membutuhkan sirkuit memori dan penyegaran. Namun diikuti oleh kurangnya penjualan yang dikarenakan perkembangan semikonduktor memori membuat tampilan CRT sangat murah pada akhir 1970-an. Dimulai dari dissertasi PhD Larry Weber dari Universitas Illinois pada 1975 yang berhasil membuat tampilan plasma berwarna, dan akhirnya berhasil mencapai tujuan tersebut pada 1995. Sekarang ini sangat terangnya dan sudut pandang lebar dari panel berwarna plamsa telah menyebabkan tampilan ini kembali mendapatkan kepopulerannya.

• monitor OLED

Organic Light-Emitting Diode (OLED) atau dioda cahaya organik adalah sebuah semikonduktor sebagai pemancar cahaya yang terbuat dari lapisan organik. OLED digunakan dalam teknologi elektroluminensi, seperti pada aplikasi tampilan layar atau sensor. Teknologi ini terkenal fleksibel dengan ketipisannya yang mencapai kurang dari 1 mm.

Tampilan Layar OLED

Teknologi OLED

OLED merupakan piranti penting dalam teknologi elektroluminensi. Teknologi tersebut memiliki dasar konsep pancaran cahaya yang dihasilkan oleh piranti akibat adanya medan listrik yang diberikan. Teknologi OLED dikembangkan untuk memperoleh tampilan yang luas, fleksibel, murah dan dapat digunakan sebagai layar yang efisien untuk berbagai keperluan layar tampilan.

Jumlah warna dari cahaya yang dipancarkan oleh piranti OLED berkembang dari satu warna menjadi multi-warna. Fenomena ini diperoleh dengan membuat variasi tegangan listrik yang diberikan kepada piranti OLED sehingga piranti tersebut memiliki prospek untuk menjadi piranti alternatif seperti teknologi tampilan layar datar berdasarkan kristal cair.

8. Optical Disk Drive

CD-ROM (singkatan dari Compact Disc – Read Only Memory) adalah sebuah piringan kompak dari jenis piringan optik (optical disc) yang dapat menyimpan data. Ukuran data yang dapat disimpan saat ini bisa mencapai 700MB atau 700 juta bita.

CD-ROM bersifat read only (hanya dapat dibaca, dan tidak dapat ditulisi). Untuk dapat membaca isi CD-ROM, alat utama yang diperlukan adalah CD Drive. Perkembangan CD-ROM terkini memungkinkan CD dapat ditulisi berulang kali (Re Write / RW) yang lebih dikenal dengan nama CD-RW.

Catatan: Nilai megabita (MB) dan menit adalah tepat.

Nila MiB adalah Mega binary Byte atau Mebi Byte (1 MiB = 2 ²⁰ = 1.048.576)

http://id.wikipedia.org/wiki/CD-ROM

Pembicara III : Edi Syahputra, ST.

Moderator : Fany Indriaty, ST.MT.

Robot terdiri dari :

1. Elektronik

2. Mekanik

3. Artificial Intelligence

Aplikasi Robot untuk :

- Militer

- Kedokteran

- Industri

- Hiburan

- Rumah Tangga

Hubungan Jurusan Elektro dengan Robotika :

1. Dasar Elektronika

2. Rangkaian Logika

3. Sistem Mikroprosesor

4. Sistem Cerdas

5. Perancangan Berbasis Komputer

6. Arsitektur Sistem computer

7. Teknik Interfacing

Sesi II

Pembicara I : Chandra ( Job Environment Artist Cartix Studio )

Moderator : Didi Surian, ST.MT.

Proses pembuatan game :

1. Story

2. Concept ( Ilustrasi model-model atau tokoh-tokoh )

3. Prototype ( Membuat model-model secara 3D )

4. Creating Game Asset ( pelengkap; sepeti : environment, peta, dll )

5. Game Testing

6. Bug Fixing

7. Final Touch ( Marketing material )

Pekerja / artist yang dibutuhkan untuk membuat game :

1. Concept Artist

2. Modeler

3. Texture Artist

4. Animator

5. Lighting Artist

6. Rigger

Untuk sound effect pada pembuatan game dapat dibuat secara digital atau direkam

Untuk animasi pada pembuatan game juga sama yaitu dapat manual ( direkam dari model ) atau dibuat dengan program.

Bahasa pemrograman yang sering dipakai adalah C++ dan Java.

Pembicara II : Djoko Hartanto

Moderator : Didi Surian, ST.MT.

Good Design menurut Dieter Rams adalah :

• Good design is innovative

It does not copy existing product forms, nor does it produce any kind of novelty for the sake of it. The essence of innovation must be clearly seen in all functions of a product. The possibilities in this respect are by no means exhausted. Technological development keeps offering new chances for innovative solutions.

TP 1 radio/phono combination, 1959, by Dieter Rams for Braun

• Good design makes a product useful

A product is bought in order to be used. It must serve a defined purpose – in both primary and additional functions. The most important task of design is to optimise the utility of a product.

MPZ 21 multipress citrus juicer, 1972, by Dieter Rams and Jürgen Greubel for Braun

• Good design is aesthetic

The aesthetic quality of a product – and the fascination it inspires – is an integral part of its utility. Without doubt, it is uncomfortable and tiring to have to put up with products that are confusing, that get on your nerves, that you are unable to relate to. However, it has always been a hard task to argue about aesthetic quality, for two reasons.

Firstly, it is difficult to talk about anything visual, since words have a different meaning for different people.

Secondly, aesthetic quality deals with details, subtle shades, harmony and the equilibrium of a whole variety of visual elements. A good eye is required, schooled by years and years of experience, in order to be able to draw the right conclusion.

RT 20 tischsuper radio, 1961, by Dieter Rams for Braun

• Good design helps us to understand a product

It clarifies the structure of the product. Better still, it can make the product talk. At best, it is self-explanatory and saves you the long, tedious perusal of the operating manual.

T 1000 world receiver, 1963, by Dieter Rams for Braun

• Good design is unobtrusive

Products that satisfy this criterion are tools. They are neither decorative objects nor works of art. Their design should therefore be both neutral and restrained leaving room for the user’s self-expression.

Cylindric T 2 lighter, 1968, by Dieter Rams for Braun

• Good design is honest

An honestly-designed product must not claim features – more innovative, more efficient, of higher value – it does not have. It must not influence or manipulate buyers and users.

Wall mounted Audio 2/3 (Components: control TS 45, reel-to-reel tape deck TG 60, slim speakers L 450, record player PCS 5), 1962/1962, by Dieter Rams for Brau

• Good design is durable

It is nothing trendy that might be out-of-date tomorrow. This is one of the major differences between well-designed products and trivial objects for a waste-producing society. Waste must no longer be tolerated.

620 Chair Programme, 1962, by Dieter Rams for Vitsœ

• Good design is consequent to the last detail

Thoroughness and accuracy of design are synonymous with the product and its functions, as seen through the eyes of the user.

World traveller ET 88 calculator, 1987, by Dietrich Lubs for Braun

• Good design is concerned with the environment

Design must contribute towards a stable environment and a sensible use of raw materials. This means considering not only actual pollution, but also the visual pollution and destruction of our environment.

606 Universal Shelving System, 1960, by Dieter Rams for Vitsœ

• Good design is as little design as possible

Back to purity, back to simplicity.

L 01 speaker, 1958, by Dieter Rams for Braun

http://www.vitsoe.com/en/gb/about/gooddesign