Ebook Dasar-Dasar Design Web

Kali ini saya ingin berbagi ebook tentang Dasar-dasar Design Web. Ebook ini sangat cocok untuk anda yang belum tahu sama sekali akan design web dan ingin mempelajarinya, karena buku ini memang dikhususkan untuk pemula. Buku ini mengajarkan tentang HTML (Hypertext Markup Language), yaitu bahasa pemrogaman dasar design web. Selain itu diajarkan juga sedikit tentang CSS (Cascading Style Sheet) yaitu code yang disisipkan diantara code-code HTML yang berfungi mempercantik tampilan halaman web, dan beberapa pemrogaman Web dengan Javascript.

Berikut ada 3 ebook yang ingin saya bagikan untuk sahabat Maykheld :

1. Dasar-dasar Design Web
Judul ebook yang pertama adalah Dasar-dasar Design Web. Ebook ini sangat cocok untuk anda yang belum mengenal sama sekali tentang HTML, karena ebook ini mudah dipahami.

2. Cara membuat Website sendiri
Ebook yang kedua berjudul Cara membuat Website sendiri. Ebook ini adalah pelengkap dari ebook sebelumnya. Karena dalam ebook ini properti tag-tag HTML dikupas semuanya. Dan diajarkan pula CSS, Javascipt, dan lain-lain. (Biarpun ebook yang satu ini jadul, tapi tetap powerfull)

3. Mastering Kode HTML
Ebook berjudul Mastering Kode HTML ini untuk menyempurnakan pembelajaran anda mengenai HTML, dan juga untuk latihan.

Silahkan di download dan dinikmati Ebook nya dan selalu ingatlah, jangan pernah lelah untuk belajar.

Original: Dasar-dasar design web

sumber: binushacker.ner

Read More

Dasar Dasar Coding

Informasi di dalam WWW(Word Wide Web)menggunakan format HTML. Didalam HTML kita mengenal Hyper Text yaitu adanya link ke suatu dokumen, suatu alamat mesin bahkan ke suatu gambar, suara.
Banyak software yang digunakan untuk membuat WWW dengan format HTML. Yang akan kita bahas disini adalah yang paling dasar yaitu mengunakan notepad, dimana notepad lah software yang biasanya langsung udah ada dikomputer pada saat komputer aktif, dan notepad biasanya terletak pada accesories.
Langkah pertama yang dilakukan yaitu

Klik notepad

Simpan file dalam suatu folder dalam format nama_file.HTML%htm

Kemudian jalankan dengan Internet Explorer

Cara menjalakan

Klik Run, cari nama file html/htm

Klik Ok

Adapun perintah perintah dasar dari HTML adalah sebagai berikut:

1. <H1> sampai <H6>
   <H1>  </H1>font ukuran besar
   <H2>  </H2>
    ....         ....
   <H6>   </H6>font semakin kecil
   
2. <HR>
   Fungsi : perintah untuk membuat garis horizontal penuh layar
   cth :

   ---

   
   
3. <I>
   Fungsi : membuat teks miring
4. <B>
   Fungsi : membuat teks tebal
5. <U>
   Fungsi : membuat teks bergaris bawah
6. <CENTER>
   Fungsi : membuat text ke tengah layar
7. <ALIGN>
   Fungsi : Membuat teks rata kiri dan rata kanan
   Sintak
   <P ALIGN=right>untuk rata kanan
   <P ALIGN=left>untuk rata kiri
   <P ALIGN=center>untuk rata tengah
   <P ALIGN=justify>untuk rata kiri dan rata kanan atau
   <H?ALIGN=right>
   <H?ALIGN=left>
   <H?ALIGN=center>
   <H?ALIGN=justify>
   
   Contoh pemakaian:
   <H2 Align=right>Selamat Datang Ke Website Kami <H2>
   
8. <BR>
   Fungsi : memasukkan fungsi enter
   Cth : Jika perintah <BR> diberikan di awal atau diakhir baris, maka kalimat berikutnya akan dicetak pada baris berikutnya
9. <!->
   Fungsi : membuat komentar
   Semua teks atau perintah yang diapit oleh perintah ini tidak akan dijalankan
10. <P>
    Fungsi : memisahkan paragraph yang satu dengan paragraph yang lain
11. <DD>
    Fungsi : membuat teks atau sebuah paragraph agak masuk ke dalam
12. <BASEFONT>
    Fungsi : Mengubah ukuran font
    Contoh :
    <BASEFONT SIZE=6>
    WELCOME TO MY WEBSITE
    <B>WELCOME TO MY WEBSITE DAN TEBAL</B>
13. <FONT>
    Fungsi : mengubah ukuran font, tetapi angka yang terdapat dalam size yang merupakan ukuran font harus diberi tanda kutib
14. <FACE>
    Fungsi : mengubah jenis font
15. <SUP>
    Fungsi : membuat cetak naik suatu teks
    Contoh :
    Kami adalah yang pertama:1^stin the world
16. <SUB>
    Fungsi : membuat suatu teks cetak turun
    Contoh :
    contoh-contoh teks cetak turun :
    H₂O (Disebut Air) dan
    C₂₁27No (Disebut Methadon)
17. <UL> atau Unorder List
    Fungsi : membuat bullet
18. <LI>
    Fungsi : juga untuk membuat bullet
    Catatan : perintah <LI> harus berada dalam perintah OL,UL,DIR,Menu
    Contoh :
    <UL>
    <LI>
    <H2> Jawa Timur </H2>
    <UL>
    <LI> SURABAYA </LI>
    <LI> MALANG </LI>
    <LI> GRESIK </LI>
    </UL>
    </LI>
    </BR>
    <LI>
    <H2> Jawa Barat </H2>
    <UL>
    <LI> Bandung </LI>
    <LI> Sukabumi </LI>
    <LI> Bogor </LI>
    </UL>
    </LI>
    </UL>
19. <IMGSRC>
    Fungsi : memasukkan gambar ke dalam Website
    Anda dapat juga memasukkan gambar berakhiran *.Jpg, *.Gif, *.Bmp dll
    Sintak :<IMG BORDER="5">
    "5" merupakan ukuran border(Bingkai), ganti angka ini sesuai keinginan anda
20. <BGSOUND>
    Fungsi : memasukkan suara atau musik ke dalam Website
    Sintak : <BGSOUND loop=infite Src="d:/Selamat datang.WAV">
Link dengan sorotBerikut adalah contoh program bagaimana membuat link hanya dengan sorot saja (link tak perlu diklik, tetapi cukup disorot dengan mouse. <HTML> <HEAD> <TITLE> </TITLE> <META Name="description"Content=" "> <META Name="keywords"Content=" "> <META Name="generator"Content="Cute HTML"> </HEAD> <BODY BG Color="#FFFFFF"Text="#000000="#"0000FF"VLink="#800080"> <Center> <A href=" "target=main on mouse over="Window.open('c:/html/keterangan.html'):"> <Font Size=3 FACE=Arial Color=#804000> Keterangan </FONT> </e> </CENTER> </BODY> </HTML> Link dengan tombolBerikut adalah contoh program link dengan tombol Sintak : <Input type="button"Value="Nama Tombol" On Click="parent.location="Link anda disini" > Contoh Buatlah link dengan nama tentang_kami.html produk_kami.html cara_memesan.html < HTML > < HEAD > < TITLE > </TITLE> < META name="description"Content=" "> < META name="keywords"Content=" "> < META name="generator"Content="Cute HTML"> < /HEAD > < BODY BGCOLOR="#FFFFFF"Text="#000000"Vlink="#800080" > < Center > < h1 > PT.OCTA > < Input Type="button"value="Tentang Kami" on click="parent.location="c:/website/tentang_kami.html'" > < Input Type="button"value="Produk Kami" on click="parent.location="c:/gambar/produk_kami.html'" > < Input Type="button"value="cara memesan" on click="parent.location="c:/gambar/cara_memesan.html'" > < /Center > < /Body > < /HTML > Kolom< tr > adalah perintah untuk membuat kolom pada notepadBerikut adalah contoh perintah cara membuat kolom pada notepad < html > < head > < title > Belajar membuat kolom < /title > < /head > < H3 Align="Center" > DAFTAR MAHASISWA < H3 > < table border="3" border color="red" < tr > < td > No < td > Nama < td > Alamat < td > No. Phone < td > Gambar < /tr > < tr > < td > 1 < td > Octa < td > Padang Bulan < td > 8214773 < td > < Img src="C:\Documents and Settings\XP\My Documents\My Webs\octa_pic1.JPG" > < /tr >
Hasilnya menjadi
Membuat Frame-Framecols : membagi layar dalam bentuk kolom-FrameRows : membagi layar dengan bentuk baris-Frame Src : menampilkan file dalam frameBentuknya(Frame cols="30%,*")(Frame Src="Nama.file Name="Teks")(Frame Rows="40%,*")(Frame Src="Nama.file"Nama="teks")(Frame Src="Nama.file"Nama="Teks)(/Frameset)Contoh Program Frame < Html >< Head >< Title >Melink dengan sorot < /Title >< /Head >< Frameset cols="30%,*" >< Frame Src="Nama file"Nama="Teks" >< Frame Rows="40%%,*" >< Frame Src="Gambar File’Nama="Gambar" >< Frame Src="Nama File"Nama="Teks >< /Frameset >
Hasilnya menjadi

Read More

Cara Membuat Header Blog Menjadi Dua Kolom di Blogspot

ehm.... kalo di perhatikan header blog ini juga ada dua lho... bagian kiri adalah judul blog TuCoCor dan bagian kanan adalah kotak search engine. untuk yang belum berpengalaman nguprek-nguprek HTML di blog spot saya maungasih tau Cara Membuat Header Blog Menjadi Dua Kolom di Blogspot karena banyak juga yang ngeluh tentang header yang gitu gitu aja. jadi saya maungasih solusi buat para pecinta TuCoCor. Gini nih caranya

• Login Blogger
• Pilih Rancangan
• Pilih Edit HTML ( jangan lupa untuk selalu backup template setelah memasuki langkah ini )
• Beri tanda Centang pada Expand Widget Template

Jika langkah diatas sudah dilakukan, selanjutnya kita cari kode  .header-outer(untuk lebih mudahnya gunakan Ctrl+F dalam melakukan pencarian)

Maka akan tampak kode seperti ini :

.header-outer {
  margin: $(header.margin.top) 0 $(header.margin.bottom) 0;
  background: $(header.background.color) $(header.background.gradient) repeat scroll 0 0;
}

(kode bisa saja berbeda-beda untuk masing-masing template)

Hapus kode diatas gantikan dengan kode berikut :

.header-outer {
background: $(header.background.color) $(header.background.gradient) repeat-x scroll 0 -400px;
_background-image: none;min-height: 126px;width:930px;margin:0 auto 0px;border:1px solid ; /* untuk mengatur tinggi header (height) */}
#header {
width: 59%;height: 105px; margin: 10px;padding: 0px;float: left;border:1px solid ;/* untuk mengatur lebar header kiri - title, description, image */}
#bgsGR_headerkanan {
float: right;
width: 36%;height: 105px;border:1px solid ; /* mengatur lebar header kanan */
margin: 10px;
padding: 0px;}
#bgsGR_headerkanan .widget {margin: 0px;}

Nah untuk menjalankan perintah diatas langkah berikutnya kita cari kode :

<div class='region-inner header-inner'>

Kalau sudah ketemu tambahkan kode berikut :

<b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

Beginilah kira2 hasilnya :

<div class='region-inner header-inner'> <b:section class='bgsGR_headerkanan' id='bgsGR_headerkanan' maxwidgets='1' showaddelement='yes'></b:section>

Ok , langkah terakhir Simpan Template kamu dan lihat hasilnya.
Semoga berhasil dan sukses selalu.

Read More