Home » All posts

Judul Dalam Table

Posted by Gg Tuesday, 13 September 2011 0 comments
Ini merupakan lanjutan dari postingan sebelunya yaitu tentang "table HTML", namun pada pertemuan ini kita akan menambahkan sedikit judul pada table postingan sebelumnya.

Untuk membuat judul dalam table didefinisikan dengan tag <th>.
lebih jelasnya salin sintak berikut ini lalu save dengan nama latihan11.html


<table border ="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>

Hasilnya adalah :


Keterangan :
Sintak yang bercetak miring adalah judul dalam table yang ditambahkan pada sintak postingan sebelumnya.

Selamat mencoba...

Table HTML

Posted by Gg 0 comments
Untuk membuat Table pada format HTML yaitu didefinisikan dengan tag <table>. sebuah table di bagi ke dalam baris dengan tag <tr> dan setiap baris dibagi kedalam Sel yaitu dengan tag <td>.
tag <td> adalah singkatan dari "Data Table" yang merupakan isi dari sel data. Dan setiap sel data dapat berisikan text, gambar, daftar, paragraf, form, dan lain-lain.

Ok kita coba langsung coba !

Buka notepad lalu tulislah sintak berikut :

<table border ="1">
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>

<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
</tr>
</table>


Setelah selesai save dengan nama "latihan10.html". lalu buka dan hasilnya adalah sebagai berikut.

Selamat mencoba.... 

Style Teks Alignment

Posted by Gg 0 comments
Style Text-align menentukan tata letak Keselarasan Horizontal text dalam suatu elemen, Untuk lebih jelas silahkan Copy sintak berikut :


<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>



Pastekan pada notepad dan simpanlah dengan nama "latihan9.html" pada folder latihan yang anda buat. 
Setelah itu buka dan hasilnya adalah sebagai berikut :
Selamat Mencoba..



Style HTML Jenis Huruf, Warna dan Ukuran

Posted by Gg Monday, 12 September 2011 0 comments
Tutorial ini hampir sama dengan tutorial sebelumnya yaitu dengan judul :
Bentuk Huruf dalam HTML (HTML Font)
Namun pada kali ini yang berbeda adalah dengan menggunakan Style dengan sintak  :
<Body style="background-color : yellow">
Lebih jelasnya kita langsung mencoba....
buka Notepad lalu salin sintak berikut :


<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>




Maka Hasilnya adalah :


Berbeda dengan sintak yang tidak menggunakan Style :
<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>

<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>


Anda dapat memilih mana yang lebih mudah dan praktis.


Selamat mencoba...

Background Color (Warna Latar)

Posted by Gg 0 comments
Bagi anda yang sudah membaca tutorial Style HTML, mungkin ini sama isinya. saya memisahkannya karena untuk memudahkan pembaca untuk menemukan cara mengubah Warna background.


Background Color

Mendefinisikan Warna Latar Belakang untuk elemen.
langsung kita buka notepad lalu tuliskan sintak berikut :

<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

Simpan dengan nama "Latihan7.html". Setelah disimpan buka latihan tersebut, maka hasilnya adalah :
Selamat Mencoba.....


Style HTML

Posted by Gg 0 comments

Styling HTML dengan CSS

CSS di perkenalkan pada HTML 4 dengan tujuan untuk menyederhanakan cara yang lebih baik untuk  elemen gaya HTML.
CSS dapat ditambahkan ke HTML dengan cara berikut:
  • dalam file style sheet yang terpisah (file CSS)
  • dalam elemen style di bagian kepala HTML
  • di atribut style pada elemen HTML tungal

Namun pada latihan ini, kita menggunakan Atribut HTML Style, hal ini memang memakan waktu dan sangat tidak praktis untuk elemen HTML Style. dan cara yang lebih sering di gunakan adalah dengan cara  menggunakan CSS. dan menempatkan sintak CSS pada file terpisah.
Pada tutorial ini menggunakan atribut Style karena untuk menyederhanakan hal ini juga membuat mudah anda untuk terlebih paham pada dasar dan mudah untuk mengedit kode dan mencoba sendiri.


Tags dan Atribut Usang
Dalam HTML 4 ada beberapa Tags dan Atribut yang usang, artinya tags dan atribut tersebut tidak lagi didukung dalam versi masa depan dari HTML.

Pesannya adalah : Hindari menggunakan tag dan atribut usang!


Tag dan atribut harus dihindari:
TagsKeterangan
<center>Usang. Mendefinisikan konten berpusat
<font> dan <basefont>Usang. Mendefinisikan font HTML
<s> dan <strike>Usang. Mendefinisikan teks strikethrough
<u>Usang. Mendefinisikan teks yang digarisbawahi
AtributKeterangan
meluruskanUsang. Mendefinisikan keselarasan teks
bgcolorUsang. Mendefinisikan warna latar belakang
warnaUsang. Mendefinisikan warna teks
Untuk semua di atas: Gunakan gaya sebagai gantinya!

Ok untuk lebih jelasnya kita akan mencobanya langsung.

Background Color

Mendefinisikan Warna Latar Belakang untuk elemen.
langsung kita buka notepad lalu tuliskan sintak berikut :

<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

Simpan dengan nama "Latihan7.html". Setelah disimpan buka latihan tersebut, maka hasilnya adalah :

Dan untuk membedakan antara Tags dan atribut Usang, berikut adalah contoh dari Atribut Bgcolor gaya lama.

<html>
<body bgcolor="yellow">
<h2>look:Colored Background!</h2>
<p>For future proof HTML, use HTML styles instead:</p>
<p> style="bakground-color:yellow"</P>
</body>
</html>

Anda bisa melihat perbedaan antara tags/Atribut yang lama dengan yang baru.

Selamat mencoba....

Bentuk Huruf dalam HTML (HTML Font)

Posted by Gg Sunday, 11 September 2011 0 comments
Dalam Microsoft Office kita dapat memilih berbagai macam Font, demikian pula dalam HTML. 
Ok kita langsung mulai.


Yang pertama jangn lupa buka notepad lalu tuliskan tag berikut.


<p>
<font size="5" face="arial" color="red">
This paragraph is in Arial, size 5, and in red text color.
</font>
</p>

<p>
<font size="3" face="verdana" color="blue">
This paragraph is in Verdana, size 3, and in blue text color.
</font>
</p>


Kedua save pada folder yang teman sediakan dengan menggunakan ".html" pada akhir judul. seperti contoh "Latihan6.html".


Ketiga buka file "Latihan6" yang baru teman buat, maka hasilnya :


Selamat Mencoba.....

Mempercepat Kinerja Window 7

Posted by Gg Thursday, 8 September 2011 0 comments
Windows 7 adalah sistem operasi jaman sekarang yang memang bagus untuk dicoba. Secara garis besar fitur tampilan windows 7 lebih baik di bandingkan windows vista dan windows xp, tetapi dalam segi kecepatan lebih bagus windows xp. Tetapi windows 7 ini juga bias dipercepat kinerjanya seperti halnya windows xp. Pengaturan konfigurasi yang tidak tepat pada windows 7 menyebabkan windows 7 akan berjalan lambat.

Bagaimana tips mempercepat kinerja windows 7 ? windows 7 hadir dengan berbagai macam fitur yang lebih baik secara visual maupun interaksi yang tentunya tidak anda dapatkan di windows vista maupun windows xp. Berikut adalah cara mempercepat kinerja windows 7 :


1. Mempercepat Booting Windows 7
Klik Start > ketik “msconfig” pada bagian search programs and files > enter
Klik pada tab “Boot” dan klik pada “Advanced options”
Cek pilihan “Number of processors” dan tentukan berapa processor yang Anda inginkan sesuai dengan yang dimiliki PC Anda (biasanya 2, 4 atau 8).
Klik “OK” dan “Apply” > Reboot

2. Mempercepat Proses Shutdown Windows 7
Klik Start > ketikkan regedit > enter.
Buka HKEY-LOCAL_MACHINESYSTEMCurrentControlSetControl
Klik kanan pada WaitToKillServiceTimeOut dan rubah nilainya menjadi lebih kecil.
Klik OK > restart

3. Melakukan Perpindahan Antar Window Lebih Cepat
Klik Start dan ketikkan “SystemPropertiesPerformance“
Klik tab Visual Effects
Hilangkan centang pada “Animate windows when minimizing and maximizing” lalu klik OK


4. Nonaktifkan Index Search di Windows 7
Klik start > mengetik services.msc pada Start Search > enter.
Cari Windows Search, klik kanan dan kemudian dan nonaktifkan service tersebut.

5. Non-aktifkan Program Start-Up Extra
Klik Start > klik Run.
Ketiklah msconfig > klik OK.
Tampil System Configuration Utility > Klik Startup
Pada tab Startup, Anda akan melihat box-box akan ditandai check list hijau (v). Pelajarilah setiap item tersebut dengan melihat Command. Cobalah hilangkan checklist hijau (v) pada item-item program yang tidak diinginkan. Program-program dengan command C:Windows sebaiknya dibiarkan seperti kondisi semula.
Setelah beberapa item telah di unchekc (menghilangkan v pada box), maka kliklah Apply dan/atau OK. Akan ada konfirmasi apakah ingin restart?
Setelah restart, pada layar akan muncul konfirmasi lagi, dan pilihlah “option for not showing this dialogue every time your PC reboots“

6. Optimasi Aturan Tampilan (Display Setting)
Klik start, lalu klik kanan My Computer > Properties
Pilihlah Advanced > Pada Perfomance, kliklah Setting
Akan muncul Perfomance Option dan Visual Effect
Klik Custom dan silahkan hilangkan beberapa item check list pada box, dan biarkan item-item dibawah ini tetap check (v).
Use visual styles on windows and buttons
Show shadows under menus
Show shadows under mouse pointer
Show translucent selection rectangle
Show Window contents when dragging
Slide taskbar buttons
Use common tasks in folders

Use drop shadows for icons labels on the desktop
Silahkan klik Apply > OK > Restart

7. Mempercepat Browsing File
Klik start, dan double klik My Computer
Kliklah menu Tools (bagian atas)
Pilihlah Folder Options
Muncul box Folder Options, dan pilihlah View
Hilangkan check (v) pada Automatically search for network folders and printers check box
Klik Apply > OK.

Komputer yang kinerjanya lambat bisa saja membuat penggunanya males untuk berlama-lama di depan komputer. Sebaliknya komputer dengan kinerja yang prima membuat penggunanya akan menjadi betah untuk bekerja didepan komputer. 7 tips mempercepat kinerja windows 7 ini semoga bermanfaat dan selamat mencoba mempraktekannya. Setelah mengikuti tips ini mudah-mudahan windows 7 anda kenceng. Pengalaman anda dalam hal optimalisasi windows 7 bisa jadi tambahan tips ini sehingga menjadi lebih sempurna, silahkan tulis saran atau tips trik lain di kolom komentar.

Efek Photo Dengan Butiran Air

Posted by Gg Wednesday, 7 September 2011 0 comments
Efek photo dengan butiran air.....?????
Wah awas jangan salah arti dengan memercikkan air pada photo, bisa rusak tuh photo....

Ok gan, kali ini saya akan sering tentang cara memberikan efek butiran air pada photo. sebelumnya kita menggunakan photoshope untuk mengedit photo.
aktifkan dahulu photoshope, lalu cari gambar atau objek gambar yang akan kita beri efek. disini saya menggunakan gambar pemandangan.
Setelah memilih gambar maka buat lingkaran dengan Elipse Tool
catatan: foreground dan background harus putih.
Maka Hasilnya :
 Setelah itu, klik kanan pada layer shape1 lalu pilih Rasterize Layer.
Langkah selanjutnya adalah menambahkan layer style pada lingkaran tersebut. dan jangan lupa terus aktif pada layer pertama yaitu pada layer lingkaran.
Klik "add layer style" pada bagian bawah layer, lalu pilih Blending Option. 

Centang Drop Shadow dan Inner Shadow.
Setelah di centang lalu klik OK.
Tahap terakhir, lalu pada pallete di rubah menjadi Multiply.
Setelah Selesai maka hasilnya :

Butiran tersebut tinggal di perbanyak dengan mengaktifkan layer shape 1 lalu klik Ctrl + J

Gamana lumayan kan....!!!
Lumayan untuk edit photo ehem nya....he..he... siapa yah...

Ok deh gan, slamat mencoba.....







Membuat Daftar Isi Berjalan

Posted by Gg 0 comments
Artikel ini merupakan kelanjutan dari artikel sebelumnya yaitu tentang membuat Daftar isi. Kali ini daftar isi yang akan kita buat yaitu daftar isi yang dapat berjalan dari bawah ke atas. dengan demikian dapat menghemat tempat yang kita gunakan. 
caranya gampang kita tinggal mengganti script  berikut 


<div style="border: 2px solid rgb(51, 255, 51); overflow: auto; height: "350px;" margin="5px" ;>


pada bagian atasnya dengan script :


<p><marquee direction="up" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="1" scrolldelay="3" align="left"><font face="Arial, Helvetica, sans-serif" color="#000000">


Ok, untuk lebih jelasnya kita langsung mencoba....


1. Login ke Blogger trus pilih menu "Layout" atau "Tata Letak"
2. Kemudian klik pada "Add Gadget" atau "tambah gadget".
3. Lalu pilih HTML/Javascript"
4. Kemudian masukkan script berikut ini kedalamnya.



<p><marquee direction="up" onmouseout="this.start();" onmouseover="this.stop();" scrollamount="1" scrolldelay="3" align="left"><font face="Arial, Helvetica, sans-serif" color="#000000">
<script style="text/javascript" src="http://adesanusi.googlepages.com/daftar-isi.txt"></script>
<script style="text/javascript">
var numposts = 100;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;
var standardstyling = true;
</script>
<script src="http://girimaulana21.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&max-results=999&callback=showrecentposts"></script>
</font></marquee></p>

5. Lalu simpan


Keterangan:
Untuk kode berwarna merah silakan diganti nilainya sesuai selera sobat
Ganti girimaulana21.blogspot.com dengan url blog masing-masing :)
var numposts : Jumlah Daftar posting yang ditampilkan
var showpostdate: menampilkan tanggal (false berarti tidak ditampilkan)
var showpostsummary: menampilkan ringkasan posting
var numchar : jumlah karekter post summary
rgb(51, 255, 51)  warna border daftar isi
dan huruf yang bercetak miring adalah script yang di tambahkan
sekian semoga berhasil.....

.

Copyright © Blog G21. All rights reserved.

Super SEO created by Blogger Tuts From Jom Kenal Islam