belajar ilmu komputer: Januari 2014

Selasa, 07 Januari 2014

Agar website kita tidak terlihat membosankan, kita dapat menyisipkan gambar dalam website kita. Adapun tag yang digunakan adalah <img>. Misalkan kita akan menyisipkan gambar yang terdapat dalam folder,contoh:pictures, kita akan menggunakan atribut "img" yang diletakkan tepat dalam tag <img> sehingga tag akan berubah seperti berikut <img src="...">. Lalu kemudian kita cari gambar yang akan kita sisipkan misalnya letak gambar tersebut di folder pictures tadi. Maka kita akan menuliskannya seperti berikut <img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpeg"></img>. Namun ukurannya cukup besar, nah, oleh karena itu kita akan menambahkan atribut "width" untuk lebar dan "height" untuk tinggi gambar. Jadi tag akan berubah lagi seperti berikut <img src="C:\Users\Public\Pictures\Sample Pictures\Desert.jpeg" width="20%" height="30%"></img>.

Nah mari kita latihan lagi!
Salin script berikut:
<html>
<head>
<title>selamat datang di web saya</title>
</head>
<body bgcolor="yellow">
<h1>saya mencoba menyisipkan gambar dalam website saya</h1>
<img src="C:\Users\Public\Pictures\Sample Pictures\koala.jpg" width="20%" height="30%"></img>
</body>
</html>
(anda harus menggunakan browser Internet explorer atau google crome agar gambarnya muncul, karena mozilla tidak akan menampilkan gambar)

Membuat tabel

Kali ini kita akan membuat tabel dalam dalam sebuah website. Tag yang kita butuhkan di sini adalah <table> sebagai langkah awal. Adapun atribut <table>.
Contoh penggunaan tag tabel pada html adalah sebagai berikut:

<html>

<head>

<title>Penggunaan atribut border dalam Tabel</title>

</head>

<body>

<h3>Belajar atribut border dalam Tabel</h3>

<table border="1" cellpadding="0" cellspacing="0">

<tr>

<td bgcolor="green">ini adalah contoh tabel</td>

</tr>     

<tr>

        <td>Baris 1, Kolom 1</td>

        <td>Baris 1, Kolom 2</td>

        <td>Baris 1, Kolom 3</td>

    </tr>

    <tr>

        <td>Baris 2, Kolom 1</td>

        <td>Baris 2, Kolom 2</td>

        <td>Baris 2, Kolom 3</td>

    </tr>

</table>

<br />

<table border="6">

    <tr>

        <td>Baris 1, Kolom 1</td>

        <td>Baris 1, Kolom 2</td>

        <td>Baris 1, Kolom 3</td>

    </tr>

    <tr>

        <td>Baris 2, Kolom 1</td>

        <td>Baris 2, Kolom 2</td>

        <td>Baris 2, Kolom 3</td>

    </tr>

</table>

</body>

</html>

Adapun penjelasannya adalah sebagai berikut:

<tr>untuk membuat baris</tr>

<td> untuk membuat kolom</td>

Membuat sebuah website sederhana dengan HTML

Dalam HTML terdapat banyak tag tetapi kali ini kita hanya akan mempelajari sedikit agar mudah dipahami dan tidak terlalu memberatkan. Kita akan mulai dari pemformatan karakter sederhana. Adapu tag tersebut antara lain:


Huruf Tebal	`<B></B>`	(Bold)
Huruf Miring	`<I></I>`	(Italic)
Garis Bawah	`<U></U>`	(Underline)
Huruf Coret	`<STRIKE></STRIKE>`	(Strikeout )
Huruf Coret	`<S></S>`	(Strikeout)
Huruf Geser Bawah	`<SUB></SUB>`	(Subscript)
Huruf Geser Atas	`<SUP></SUP>`	(Superscript)
Huruf Mesin Ketik	`<TT></TT>`	(Typewriter - huruf berjarak tetap)
Pra-format (Preformatted)	`<PRE></PRE>`	(menampilkan dengan jarak pra-format)
Jarak Huruf	`<PRE WIDTH=?></PRE>`	(mengatur jarak huruf)
Rata Tengah	`<CENTER></CENTER>`	(Center - berlaku untuk teks maupun gambar)
Huruf Kedip	`<BLINK></BLINK>`	(Blinking - tag terlucu sampai kini)
Ukuran Huruf	`<FONT SIZE=?></FONT>`	(Font Size - boleh diisi dari 1 sampai 7)
Rubah Ukuran Huruf	`<FONT SIZE="+\|-?"></FONT>`
Basis Ukuran Huruf	`<BASEFONT SIZE=?>`	(boleh diisi 1 sampai 7; ukuran standard/default=3)
Warna Huruf	`<FONT COLOR="#$$$$$$"></FONT>`
Pilih Jenis Huruf	`<FONT FACE="***"></FONT>`
Teks Multi Kolom	`<MULTICOL COLS=?></MULTICOL>`
Jarak Batas Kolom	`<MULTICOL GUTTER=?></MULTICOL>`	(default = 10 pixels)
Lebar Kolom	`<MULTICOL WIDTH=?></MULTICOL>`
Celah (Spacer)	`<SPACER>`
Jenis Celah	`<SPACER TYPE=horizontal\| vertical\|block>`
Ukuran Celah	`<SPACER SIZE=?>`
Dimensi Celah	`<SPACER WIDTH=? HEIGHT=?>`
Penataan Celah	`<SPACER ALIGN=left\|right\|center>`

Nah mari kita mulai latihan lagi dengan memasukkan tag di atas.

<html>
<head>
<title>selamat datang di website saya</title>
<body bgcolor="green">
<h1> Saya lagi latihan</h1>
<p> Hay, saya latihan lagi</p><br>
<B>ini adalah huruf tebal</B><br>
<I>ini adalah huruf miring</I><br>
<S>huruf ini dicoret</S><br>
Lihat! hurufnya turun ke bawah dan ke atas<SUB>lihat saya</SUB><SUP>lihat juga</SUP><br>

<FONT COLOR="yellow" face="verdana" size="12">ini adalah jenis huruf verdana dengan warna kuning dan ukurannya 12</FONT><br>
<marquee direction="left">lihat! Saya bergerak ke kiri</marquee>
<marquee direction="right"> lihat! saya bergerak ke kanan</marquee>
<marquee direction="up"> lihat! saya bergerak ke atas</marquee>
<marquee direction="down"> lihat! saya bergerak ke bawah</marquee>
</body>
</html>
simpan dengan nama belajar2.html, lalu buka filenya.

Dasar dasar HTML

Dalam mengolah HTML seperti yang sudah dijelaskan bahwa HTML dibuat berdasarkan intruksi atau kode yang dikenal dengan tag. HTML tidak membedakan penggunaan huruf besar ataupun huruf kecil dari suatu elemen. Suatu elemen HTML terdiri dari tag-tag beserta teks yang ada dalam tag-tag tersebut. Tag ini dinyatakan dengan tanda lebih kecil (<) dan tanda lebih besar (>).
Tag biasanya merupakan suatu pasangan yang disebut dengan:

Tag awal, dinyatakan dalam bentuk <nama tag>
Tag akhir, dinyatakan dalam bentuk </nama tag>

Formatnya: <nama tag> teks yang ditampilkan </nama tag>.
Contoh: untuk menampilkan teks dalam format teks miring Teks ini terlihat miring di browser anda dengan perintah HTML < i>Teks ini terlihat miring di browser Anda</i>

Tag dasar yang harus anda ketahui adalah sebagai berikut:

<html>
 <head>
 <title>'''Selamat Datang''' HTML</title>
 </head>
 <body>
 <p>Halo dunia!</p>
 </body>
</html>

sedangkan anda harus menyimpan dalam ekstensi htm untuk index dan html untuk lainnya. Contoh, misalnya anda akan melihat

hasil dari pengeditan tag di atas, anda harus menyimpannya seperti misalnya belajar.html. Anda dapat mengganti nama belajar

namun ekstensinya harus tetap .html. Apabila anda belum mengerti tentang ekstensi silahkan klik di sini.

Head

Dokumen HTML diapit oleh tag < HEAD></HEAD>. Di dalam bagian ini biasanya dimuat tag TITLE yang menampilkan judul halaman pada titlenya browser. Selain itu Bookmark juga menggunakan tag TITLE untuk memberi mark suatu web site. Browser menyimpan “title” sebagai bookmark dan juga untuk keperluan pencarian (searching) biasanya title digunakan sebagai keyword. Header juga memuat tag META yang biasanya digunakan untuk menentukan informasi tertentu mengenai document HTML. Anda bisa menentukan author name, keywords, dan lainnya pada tag META.
Contoh:

<meta name="author" content="ubuntu-online">

Elemen Body

Bagian BODY, yang dinyatakan dengan tag < BODY>…</BODY>, merupakan tubuh atau isi dari dokumen HTML dimana anda meletakan informasi yang akan ditampilkan pada browser.

Atribut

Tag awal bisa memiliki beberapa buah atribut yang menyatakan karakteristik dari tag tersebut. Misalnya, <P ALIGN=”left”> digunakan untuk membuat rata kiri suatu paragraf. Tag yang digunakan adalah <P> dan atribut yang menyertainya adalah ALIGN dengan nilai left. Nilai atribut ALIGN hanya bisa berupa center, left, right atau justify.

Latihan

Cobalah salin Tag berikut lalu paste di Notepad

<html>
<head>
<title>selamat datang di website saya</title>
</head>
<body bgcolor="skyblue">
<h1> Hay,ini website saya</h1>
<p>
Ini adalah website saya, saya baru belajar, jadi mohon bantuannya!
</p>
</body>
</html>

simpan dengan nama belajar.html lalu buka.

Bahasa Pemograman HTML

Mengenal HTML

HyperText Markup Language (HTML) adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan dalam format ASCII normal sehingga menjadi halaman web dengan perintah-perintah HTML. 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). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

Tahun 1980, IBM memikirkan pembuatan suatu dokumen yang akan mengenali setiap elemen dari dokumen dengan suatu tanda tertentu. IBM kemudian mengembangkan suatu jenis bahasa yang menggabungkan teks dengan perintah-perintah pemformatan dokumen. Bahasa ini dinamakan Markup Language, sebuah bahasa yang menggunakan tanda-tanda sebagai basisnya. IBM menamakan sistemnya ini sebagai Generalized Markup Language atau GML.
Tahun 1986, ISO menyatakan bahwa IBM memiliki suatu konsep tentang dokumen yang sangat baik, dan kemudian mengeluarkan suatu publikasi (ISO 8879) yang menyatakan markup language sebagai standar untuk pembuatan dokumen-dokumen. ISO membuat bahasa ini dari GML milik IBM, tetapi memberinya nama lain, yaitu SGML (Standard Generalized Markup Language). ISO dalam publikasinya meyakini bahwa SGML akan sangat berguna untuk pemrosesan informasi teks dan sistem-sistem perkantoran. Tetapi diluar perkiraan ISO, SGML dan terutama subset dari SGML, yaitu HTML juga berguna untuk menjelajahi internet. Khususnya bagi mereka yang menggunakan World Wide Web. Versi terakhir dari HTML saat ini adalah HTML5.

HTML dokumen tersebut mirip dengan dokumen tulisan biasa, hanya dalam dokumen ini sebuah tulisan bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Sebagai contoh jika ingin membuat tulisan ditampilkan menjadi tebal seperti: TAMPIL TEBAL, maka penulisannya dilakukan dengan cara: < b> TAMPIL TEBAL</b>. Tanda < b> digunakan untuk mengaktifkan instruksi cetak tebal, diikuti oleh tulisan yang ingin ditebalkan, dan diakhiri dengan tanda </b> untuk menonaktifkan cetak tebal tersebut. HTML lebih menekankan pada penggambaran komponen-komponen struktur dan format di dalam halaman web daripada menentukan penampilannya. Sedangkan penjelajah web digunakan untuk menginterpretasikan susunan halaman ke gaya built-in penjelajah web dengan menggunakan jenis tulisan, tab, warna, garis, dan perataan text yang dikehendaki ke komputer yang menampilkan halaman web. Salah satu hal Penting tentang eksistensi HTML adalah tersedianya Lingua franca (bahasa Komunikasi) antar komputer dengan kemampuan berbeda. Pengguna Macintosh tidak dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat dalam pc berbasis Windows. Pengguna Microsoft Windows pun tidak akan dapat melihat tampilan yang sama sebagaimana tampilan yang terlihat pada pengguna yang menggunakan Produk-produk Sun Microsystems. namun demikian pengguna-pengguna tersebut dapat melihat semua halaman web yang telah diformat dan berisi Grafika dan Pranala.

HTML memungkinkan seseorang untuk menyunting tampilan atau format berkas yang akan dikirimkan melalui media daring. Beberapa hal yang dapat dilakukan dalam menentukan format berkas adalah:

Menampilkan suatu kelompok kata dalam beberapa ukuran yang dapat digunakan untuk judul, heading dan sebagainya.
Menampilkan tulisan dalam bentuk cetakan tebal
Menampilkan sekelompok kata dalam bentuk miring
Menampilkan naskah dalam bentuk huruf yang mirip dengan hasil ketikan mesin ketik
Mengubah-ubah ukuran tulisan untuk suatu karakter tertentu.

Secara garis besar, terdapat 4 jenis elemen dari HTML:

Struktural. Tanda yang menentukan level atau tingkatan dari sebuah tulisan (contoh, < h1> Golf</h1> akan memerintahkan peramban untuk menampilkan "Golf" sebagai tulisan tebal besar yang menunjukkan sebagai Heading 1
Presentasional. Tanda yang menentukan tampilan dari sebuah tulisan tidak peduli dengan level dari tulisan tersebut (contoh, < b> boldface</b> akan menampilkan bold. Tanda presentasional saat ini sudah mulai digantikan oleh CSS dan tidak direkomendasikan untuk mengatur tampilan tulisan,
Hiperteks. Tanda yang menunjukkan pranala ke bagian dari dokumen tersebut atau pranala ke dokumen lain (contoh, < a href="http://www.wikipedia.org/"> Wikipedia</a> akan menampilkan Wikipedia sebagai sebuah hyperlink ke URL tertentu),
Elemen widget yang membuat objek-objek lain seperti tombol (< button>), list (< li>), dan garis horizontal (< hr>). Konsep hypertext pada HTML memungkinkan pembuatan link pada suatu kelompok kata atau frasa untuk menuju ke bagian manapun dalam World Wide Web,

Ada tiga macam pranala (link) yang dapat digunakan:

Pranala menuju bagian lain dari page.
Pranala menuju page lain dalam satu web site.
Pranala menuju resource atau web site yang berbeda.

Selain markup presentasional, markup yang lain tidak menentukan bagaimana tampilan dari sebuah tulisan. Namun untuk saat ini, penggunaan tag HTML untuk menentukan tampilan telah dianjurkan untuk mulai ditinggalkan, dan sebagai gantinya digunakan Cascading Style Sheets.
Nah setelah itu mari kita mulai desain website dengan HTML. Adapun software yang paling umum digunakan saat ini untuk mengolah HTML adalah Notepad. Untuk membuka Notepad Klik Start-All programs-Accesories-Notepad. Mari mulai! Klik ini

Belajar desain website

Dalam belajar desain website, ada beberapa hal yang harus anda pelajari antara lain:
1. Bahasa Pemrograman HTML
HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet.HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan.Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox atau Microsoft Internet Explorer.

2. Bahasa Pemrograman PHP
PHP adalah bahasa pemrograman script yang paling banyak dipakai saat ini.
PHP pertama kali dibuat oleh Rasmus Lerdorf pada tahun 1995. Pada waktu itu PHP masih bernama FI (Form Interpreted), yang wujudnya berupa sekumpulan script yang digunakan untuk mengolah data form dari web.PHP banyak dipakai untuk membuat situs web yang dinamis, walaupun tidak tertutup kemungkinan digunakan untuk pemakaian lain.PHP biasanya berjalan pada sistem operasi linux (PHP juga bisa dijalankan dengan hosting windows).

3. Bahasa Pemrograman Javascript
Javascript adalah bahasa scripting yang handal yang berjalan pada sisi client.JavaScript merupakan sebuah bahasa scripting yang dikembangkan oleh Netscape.Untuk menjalankan script yang ditulis dengan JavaScript kita membutuhkan JavaScript-enabled browser yaitu browser yang mampu menjalankan JavaScript.

4. Bahasa Pemrograman CSS
Cascading Style Sheets (CSS) adalah suatu bahasa stylesheet yang digunakan untuk mengatur tampilan suatu dokumen yang ditulis dalam bahasa markup.Penggunaan yang paling umum dari CSS adalah untuk memformat halaman web yang ditulis dengan HTML dan XHTML.Walaupun demikian, bahasanya sendiri dapat dipergunakan untuk semua jenis dokumen XML termasuk SVG dan XUL.Spesifikasi CSS diatur oleh World Wide Web Consortium (W3C).

5. Bahasa Pemrograman ASP
ASP adalah singkatan dari Active Server Pages yang merupakan salah satu bahasa pemograman web untuk menciptakan halaman web yang dinamis.ASP merupakan salah satu produk teknologi yang disediakan oleh Microsoft.ASP bekerja pada web server dan merupakan server side scripting.

6. Bahasa Pemrograman XML
Extensible Markup Language (XML) adalah bahasa markup serbaguna yang direkomendasikan W3C untuk mendeskripsikan berbagai macam data.XML menggunakan markup tags seperti halnya HTML namun penggunaannya tidak terbatas pada tampilan halaman web saja.XML merupakan suatu metode dalam membuat penanda/markup pada sebuah dokumen.

7. Bahasa Pemrograman WML
WML adalah kepanjangan dari Wireless Markup Language, yaitu bahasa pemrograman yang digunakan dalam aplikasi berbasis XML (eXtensible Markup Langauge).WML ini adalah bahasa pemrograman yang digunakan dalam aplikasi wireless.WML merupakan analogi dari HTML yang berjalan pada protocol nirkabel.

8. Bahasa Pemrograman PERL
Perl adalah bahasa pemrograman untuk mesin dengan sistem operasi Unix (SunOS, Linux, BSD, HP-UX), juga tersedia untuk sistem operasi seperti DOS, Windows, PowerPC, BeOS, VMS, EBCDIC, dan PocketPC.PERL merupakan bahasa pemograman yang mirip bahasa pemograman C.

9. Bahasa Pemrograman CFM
Cfm dibuat menggunakan tag ColdFusion dengan software Adobe ColdFusion / BlueDragon / Coldfusion Studio.Syntax coldfusion berbasis html..

Daftar Materi

Dalam blog ini akan terbagi menjadi beberapa bagian,antara lain:

Desain Website
Desain Gambar
Merakit Komputer
Belajar Pemograman
Dan lain lain

Silahkan klik salah satu di atas untuk memulai pelajaran.

belajar ilmu komputer