Cara membuat background lewat CSS

Yezato~Hi sobat kembali lagi dengan blog saya, disini saya akan kembali membahas tentang bagaimana sih cara buat background website melalui css? nah apa itu css, CSS (Cascading Style Sheet) adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumenXML, termasuk SVG dan XUL bahkan ANDROID.

oke gak perlu banyak kata ayo praktekkan secara langsung....

Pertama :

buat file berformat ekstensi HTML dan CSS lalu tambahkan satu gambar yang akan digunakan untuk backgroundnya nanti, seperti dibawah ini

 

Kedua :

buat struktur pada html seperti biasanya dan tambahkan skirp <link rel="stylesheet" type="text/css" href="style.css"> skrip ini berguna sebagai letak dari css yang kita buat.

Ketiga :

untuk CSS tambahkan skrip seperti dibawah ini. 

- color untuk warna

- background: url('1.png') ; merupakan letak alamat gambar

- background-size: cover; ukuran background full

- background-attachment: fixed; background tidak dapat di scroll

- background-repeat: no-repeat; background tanpa pengulangan

Keempat :

setelah selesai jangan lupa disave kemudian uji coba. hasilnya akan seperti dibawah ini

Itulah hasil dari tutorial diatas sekian dari tutorial cara membuat background lewat css saya ucapkan terima kasih sudah berkunjung....

Read More »

Cara Memasukan Gambar ke HTML

Yezato~ Hai guys... apa masih ada yang bingung buat masukin gambar ke html? bingung skripnya?

oke disini saya akan membuat sebuah tutorial cara memasukan gambar ke html. Tidak hanya memasukan gambar disini juga kita akan mengatur lebar dan panjang dari gambar yang kita masukan dalam website yang kita buat.

Nah gak usah lama-lama ayo kita praktekkan..

Jadi langkah awalnya :

 1. Pertama siapkan text editor, bisa menggunakan notepad++,sublime text, atau text editor lainnya. Dalam memilih apliksi editor, pilihlah yang memudahkan kalian dalam menulis/membuat skirp html. 

2. Kedua buat kode struktur html dan tulis kode untuk memasukan gambar seperti dibawah ini.
    <img src="1.jpg">(untuk mencari direktori gambar/tempat gambar itu disimpan)
    width dan height merupakan untuk panjang dan lebar.

    Dibawah ini merupakan direktori gambar yang kita masukan.

3. Ketiga setelah selesai jangan lupa simpan file berekstensi .HTML. Kemudian kita uji hasil yang kita buat.

Mungkin disini saya tidak akan membuat tutorial yang lebih panjang dan hanya untuk memasukkan gambar Jika kalian ingin membuat gambar kalian ketangah, fullscreen, diborder, atau disliding maka belajar variasikan skrip kalian sendiri dan cari lebih banyak tentang tutorial-tutorial html. sekian dari saya terima kasih.

Read More »

MEMBUAT TEKS BERJALAN PADA HTML

Marquee ~Bagaimana sih cara buat teks berjalan di html? itu adalah pertanyaan yang mungkin kita pikirkan pada saat kita ingin agar animasi teks kita tidak membosankan. Marquee adalah sebuah perintah di HTML yang dapat membuat text dapat berjalan kekiri,kanan,bawah, atas dan sesuai keinginan kita.

Pada kesempatan kali ini saya akan membuat sebuah tutorial tentang mebuat teks dapat berjalan menurut keinginan kita. oke langsung kita praktekkan.

~ Membuat teks berjalan code dasarnya.
<marquee>Si kuda lumping sang pencakar langit</marque>

Hasil :

Si kuda lumping sang pencakar langit

ini adalah contoh kode dasarnya, jika ingin digerakkan sesuai keinginan, kita harus menambah kode tambahan lainnya.


~ Membuat teks berjalan dari kanan maupun kiri.
   Kanan= <marquee direction="right">Si kuda lumping sang pencakar langit</marque>
   Kiri    = <marquee direction="left">Si kuda lumping sang pencakar langit</marque>

Hasil :

Si kuda lumping sang pencakar langit
Si kuda lumping sang pencakar langit

~ Membuat teks berjalan dari bawah ke atas maupun sebaliknya.
   <marquee direction="up">Si kuda lumping sang pencakar langit</marquee>
   <marquee direction="down">Si kuda lumping sang pencakar langit</marquee>

Hasil :

Si kuda lumping sang pencakar langit
                                                                                Si kuda lumping sang pencakar langit

~ Membuat teks berjalan lambat atau cepat (Jeda waktu berjalan).
   Berjalan dengan lambat <marquee scrolldelay="500"Si kuda lumping sang pencakar langit</marquee>
   Berjalan dengan cepat<marquee scrollmount="200"Si kuda lumping sang pencakar langit</marquee>

Hasil :

Si kuda lumping sang pencakar langit
Si kuda lumping sang pencakar langit

~ Membuat teks berjalan bolak-balik.
   Kode agar teks berjalan bolak-balik <marquee behavior="alternate" direction="right" https:="" onmouseout="this.start()" onmouseover="this.stop()&gt;&lt;a href="yezato.blogspot.com" target="_blank" >Si kuda lumping sang pencakar langit</marquee>

Hasil :

Si kuda lumping sang pencakar langit

Sekian tutorial dari saya semoga tutorial ini dapat membantu dan bermanfaat bagi kita semua, saya ucapkan terima kasih sudah berkunjung.

Read More »