Pelajaran Hidup

Inspirasi dari sebuah pengalaman dan pelajaran hidup..Semua butuh sebuah pembelajaran

Contoh Web dengan CSS






















CSSnya :
/* CSS Document
body {
text-align:center;
background-color:#828282;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
padding:0;
width:100%;

}
#wrap {
width:900px;
height:auto;
margin:auto;
padding:0px;
}

#header {
width:900px;
height:255px;
margin:auto;
background:url(IMG/headernew.jpg) no-repeat;
}

a {
font-family:Calibri;
color:#000000;
text-decoration: none;
}
a:hover {
font-family:Calibri;
color:#ffffff;
}
a:active {
font-family:Calibri;
color:#ffffff;
}
#menua a {
color:#333333;
padding-left:5px;

}

#menu {
font-size:15px;
font-family:Calibri;
padding-top: 10px;
padding-left: 180px;
}

.menu_nav {
width:400px;
height:30px;
float:left;
font-family:Arial, Helvetica, sans-serif;
margin:auto;
padding:190px 0 0 20px;
}
.menu_nav ul {
list-style:none;
}
.menu_nav ul li {
margin:0;
padding:0 5px 0 0;
float:left;
background:no-repeat right center;
}
.menu_nav ul li a {
display:block;
margin:0;
padding:13px 11px 11px 13px;
color:#ffffff;
text-decoration:none;
font-family:Calibri;
font-size:15px;
background-color:#0C4F6A;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
background-color:#0C4F6A;
color:#44b2ef
}



#content {
width:880px;
height:480px;
padding:10px 10px 10px 10px;
background:url(images/center_bg.gif) repeat-x top #FFFFFF;
}

#kmenu{
width:220px;
background-color:#EDECEC;
float:left;
text-align:top;
padding-left: 10px;
height:auto;
border:1px solid #d8dbdc;
padding-right:10px;
}

#k_menu {
width: 200px;
margin-bottom: 0px;
}

.templatemo_list { margin: 0; padding: 0; list-style: none; text-align:left; font-family:Calibri; font-size:14px;}
.templatemo_list li { margin: 0; padding: 0; }
.templatemo_list li a { display: block; padding: 5px 0 5px 5px; text-decoration: none; border-bottom: 1px solid #ffffff; }

#k_menudalam{
float: left;
width: 220px;
padding: 0px 0px;
}
#k_menujeda{
float: left;
width: 220px;
height:20px;
}
#k_menujedaa{
float: left;
width: 220px;
height:32px;
}
#k_menujeddaa{
float: left;
width: 220px;
height:28px;
}
#isi {
margin:0 ;
width:600px;
height:470px;
border:1px solid #d8dbdc;
float:right;
padding-top:10px; padding-left:10px;padding-right:10px;
}

#footer {
width:900px;
height:90px;
background-image:url(IMG/foot.jpg);
padding:10px 0px 0px 0px;
font-family:Calibri;
font-size:13px;
color:#FFFFFF;
}
*/

Seni Tipografi, yaitu karya atau desain yang menggunakan pengaturan huruf sebagai elemen utama. Dalam seni tipografi, pengertian huruf sebagai lambing bunyi bias diabaikan. Seni merupakan induk dari desain grafis.

Tipografi : seni huruf, meliputi pemilihan huruf, penentuan ukuran yang tepat, dimana teks dapat diputus, spasi jarak dan bagaimana teks dapat dengan mudah dibaca.

Jenis huruf secara garis besar :
1. Serif
- Jenis huruf yang mempunyai stroke
- Berkesan formal, elegan/intelektual, anggun dan konserpatif pada desain
- Cocok dipakai untuk organisasi, pemerintahan, pendidikan, perusahaan
- Cocok dipakai untuk teks yang panjang dengan jarak spasi yang sedikit

2. Sans-serif
- Jenis huruf yang tidak memiliki stroke, ujungnya dapat bentuk tumpul atau tajam. Contoh : arial, verdana, dll

3. Dekoratif
- Jenis huruf yang mempunyai desain rumit, sesuatu yang baru. Contoh : stencil, crackling, dll

4. Skrip
- Jenis huruf yang menyerupai tulisan tangan, sering disebut kursif (cursive). Contoh : brush script, larissa, dll

5. Monospace
- Jenis huruf yang mempunyai jarak dan lebar yang sama untuk setiap hurufnya. Contoh : monospace, courirer new, dll

Whitespace : bagian pada halaman website yang tidak mengandung konten di dalamnya, manfaatnya bagian ini untuk memisahkan area konten.

Slicing : teknik memecah atau memotong gambar pada website. Teknik ini digunakan untuk membuat gambar atau desain suatu web lebih fleksibel, cepat dan menarik.
Software yang bisa digunakan antara lain : adobe photoshop, adobe ilustrator, dll

Metode yang dapat digunakan untuk memecah gambar :
-Crop tool
contoh :














-Slice tool
contoh :













Referensi :
Materi kuliah pemrograman web(2011),UAD
http://rumahdot.com

Dasar-Dasar HTML

HTML (Hypertext Markup Language) merupakan standard bahasa yang digunakan untuk menampilkan dokumen web.
Yang bisa dilakukan oleh html :
1) Mengontrol tampilan dari web page dan contentnya
2) Mempublikasikan dokument secara online sehingga bisa diakses
3) Membuat online form yang bisa digunakan untuk menangani pendaftaran, transaksi secara online, dll
4) Menambahkan object-object seperti image, audio, video dan juga java applet dalam dokumen HTML
5) Membuat halaman web yang dapat dihubungkan dengan dokumen lain menggunakan link

Dokumen HTML memiliki file yang berekstensi .htm atau .html . Command Html biasanya disebut TAG.
TAG digunakan untuk menentukan tampilan dari dokumen HTML:

Sintaks Dasar :
Teks ini akan tampil


a. Perintah untuk membuat Heading
Heading terdiri dari H1 sampai H7
contoh :

INI MERUPAKAN HEADING


b. Perintah untuk membuat rata tengah
. . . .

c. Perintah untuk menampilkan gambar

Contoh :
Keterangan :
img src--> link gambar yang akan ditampilkan
width --> ukuran lebar gambar (dalam pixels)
height --> ukuran tinggi gambar (dalam pixels)

d. Perintah untuk membuat paragraph baru dengan rata kiri

. . . . .


e. Perintah untuk membuat paragraph baru dengan rata kanan

. . . . . .


f. Perintah untuk membuat tulisan miring
. . . .

g. Perintah untuk membuat list dan rumus
  • . . .
  • . . .

  • Membuat rumus perpangkatan :
    . . .

    contoh :
    • Air : H 2 O
    • Udara : O 2

    • referensi :
      Petunjuk praktikum pemrograman web, UAD, 2011

      Buat web butuh perjuangan juga !!!

      Pertama kali saya belajar web lumayan terasa susah. Apalagi scrip2mya baru pertama kali tau. Seperti html,head, body,title,dan lain2. Susah sepertinya baru liat scripnya saja. Pertama kali masuk saya gag tau apa itu google (haa...katrok..bget). Apalai suruh pelajari kaya gini.(heee). Tapi lama kelamaan alhamdulillah sya bisa mengikuti juga.
      Dan setelah hampir kenaikan kelas saya mendapat kepercayaan guru untuk mengikuti workshop web desain di sebuahuniversitas di jogja (hee). Setelah itu saya dan teman saya ditunjuk juga untuk mengikuti lomba web desain. Web yang kita buat waktu itu masih statis..ya karena kita bisanya baru itu ...heeee
      1/2 perjalanan membuat web udah jadi. Tapi akhirnya saya harus mengundurkan diri sebagai peserta karena saya harus pindah sekolah mengikuti orang tua..he
      Setelah pindah tidak lama kemudian saya dikasih tau kalau teman saya ada yang berhasil maju lomba ke tingkat NAS. Dengan itu saya ingin berusaha seperti dia. Dan saya berusaha harus memperdalam ilmu tentang web. Waalaupun untuk programingnya lumayan rumit juga klo gag teliti.
      Setelah belajar kira-kira 1thn saya mendapat kepercayaan untuk mengikuti lomba web desain di tingkat prov. Waktu persiapannya mendadak hanya 1 minggu. Untuk persiapan konsep dan lain2 bnyak memakan waktu. hingga hari2 mendekati lomba monitor komputer saya kebakar (..hangus ...hee). Sehingga saya hanya bisa menyelesaikan di sekolah yang hanya terbatas. Tapi tak apalah karena lomba semakin dekat dan dikejar target waktu juga. Hingga perlombaan itu dimulai awalnya mulus2 aja lum ada problem. E..e ditengah2 perjalanan mengerjakan antara komputer dan server gag conect..(aduh!!.).

      Akhirnya kita buat dua database yang satu di komputer masing2(kacian to..!!). Dan penilaian pun dilaksanakan secara manual. Tapi pada akhirnya q lum berhasil mengikuti jejak teman saya. Ya saya menganggap ini belum keberuntungan saya dan menjadikan sebuah pengalaman yang berharga.1bln setelah itu saya mendapat tawaran untuk presentasi website pada saat peresmian taman pintar. Tapi akhirnya gagal karena presentasi ditiadakan.(kecewa..!!hee)
      2bln setelah itu saya dan teman2 mendapat kepercayaan untk mengikuti lomba web design di semarang. Tapi akhirnya gagal juga karena saat itu bersamaan kita menyelesaikan tugas akhir kita. Kita kecewa bgt. Saya cuma berharap semoga sebelum lulus kita bisa mengikuti lomba web sekali lagi.(hee).

      Ujian NAS udh berlalu saatnya hari tenang menunggu pengumuman. Tanpa diduga q dapet info dari teman saya tentang lomba web desain. Akhirnya saya dan teman saya memutuskan untuk mengikuti lomba itu. Kita diberi waktu 1bulan untuk membuat web dengan html murni tnpa programing. Saat perlombaan itu bersamaan dengan snmptn. Tapi saya bertekad menyelesaikan web ini. Dan setelah pengumuman alhamdulillah berhasil masuk 3 besar.(hee..alhamdulillah).
      Dengan ini sebagai pemicu buat saya untuk terus melankah dan berusaha membantu semuanya.(hee)
      Jadi untuk mendapatkan kesuksesan itu buth perjuangan. Banyaknya kegagalan bukan berarti kita tidak mampu, tapi kita belum mampu untuk melakukannya. Maka teruslah berjuang dan bersemangat untuk menjalani kehidupan yang penuh liku-liku ini. Jangan pernah berfikir kalau kesuksesan itu bisa didapat dengan cepat tanpa melakukan usaha, perjuangan dan do'a.

      GoodLuck for friends..