CSS-Mengatur Hyperlink

Mengatur Hyperlink Menggunakan CSS

   Hyperlink merupakan link yang digunakan  untuk mengalihkan ke link halaman lain ketika teks ber-link di klik. tag link ini menggunakan tag <a> dan diakhiri tag </a>. Pada tutorial kali ini saya akan menyampaikan bagaimana membuat link menggunakan CSS mulai dari warnanya ketika di-klik dll.

• Ada empat status Hyperlink pada html yang dapat dimanipulasi menggunakan CSS, dan untuk pemanggilannya menggunakan sintaxs: 

       a:link      : Merupakan link aktif biasa
       a:visited : Merupakan status sebuah link yang dikunjungi
       a:hover  : Merupakan status sebuah link yang ketika kursor diarahkan pada

                       link gayanya akan berubah
       a:active  : Merupakan status sebuah link atau hyperlink yang sudah di-klik 

Berikut contoh penerapannya : 

 

Script html

Script CSS

Hasil

Saat kursor diarahkan ke-link

Dapat teman-teman lihat bahwa setiap sintaxs CSS yang yang diterapkan pada link html memiliki perubahan masing - masing.
Sekian apa yang dapat saya sampaikan, ssemoga dapat menambah pengetahuan teman- teman.
Terimaksih Wassalamualaikum wr.wb

Read More

CSS-Mengenal Margin,Padding dan Model Kotak

BLC Telkom - KPLI Klaten kali ini saya akan shere ilmu di awal pembuka hari baru yaitu hari senin saya akan membahas tentang pengenalan margin,padding dan, model kotak

Assalamualaikum wr wb .
    Salam IT mari kita selalu bahas gali sedalam - dalamnya tentang CSS untuk memperindah tampilan web/blog .Selanjutnya saya akan membahas tentang Margin,Paddng dan Model Kotak . berikut penjelasan dan beberapa contoh penerapan .

• Margin-CSS 

CSS Margin properti yang digunakan untuk menghasilkan ruang di sekitar elemen.
CSS memiliki sifat untuk menentukan margin untuk setiap sisi elemen:

• margin-top
• margin-right
• margin-bottom
• margin-left

Script Penerapan margin dengan pembagian masing - masing sisi

Script tag penerapan margin menjadi satu kelompok

Hasil dari Script 1

• Padding-CSS

CSS Properti yang digunakan untukmenghasilkan ruang disekitar konten.
Padding membersihkan area disekitar konten (dalam perbatasan dari elemeen.
Dengan CSS, teman - teman memliki kontrol penuh atas padding. Pengaturan padding untuk setiap sisi elemen (atas,bawah,samping kanan,kiri).
CSS memiliki sifat untuk menentukan padding untuk setiap sisi elemen:

• padding-top
• padding-right
• padding-bottom
• padding-left

Script Penerapan padding dengan pembagian masing - masing sisi

Script tag penerapan margin menjadi satu kelompok

Hasil dari Script 1

• Mengatur Panjang dan Lebar Element

The height dan width properti yang diguanakan untuk mengatur tinggi dan lebar elemen .

Script Pengaturan panjang dan lebar elemen

Hasil Script 1

• Model Kotak

Semua elemen HTML dapat dianggap sebagai kotak. Dalam CSS, istilah "model kotak" digunakan ketika berbicara tentang desain dan tata letak.
Kotak CSS Model pada dasarnya adalah sebuah kotak yang membungkus di sekitar setiap elemen HTML. Ini terdiri dari: margin, perbatasan, padding, dan konten yang sebenarnya. Gambar di bawah mengilustrasikan model kotak:

Contoh penerapan dasarnya :

Sekian, apa yang dapat saya sampaikan , kesimpulannya bahwa pengaturan untuk tampilan menggunakan CSS dapat mengatur bagian margin,padding, letak posisinya dll.

Terimakasih, Wassalamualaikum wr.wb

Read More

Pengenalan Flowchart

Assalamu'alaikum wr.wb.

I. Pengertian

   Menurut wikipedia bahasa Indonesia, Flowchart atau diagram alir merupakan sebuah diagram dengan simbol-simbol grafis yang menyatakan aliran algoritma atau proses yang menampilkan langkah-langkah yang disimbolkan dalam bentuk kotak, beserta urutannya dengan menghubungkan masing masing langkah tersebut menggunakan tanda panah. Diagram ini bisa memberi solusi selangkah demi selangkah untuk penyelesaian masalah yang ada di dalam proses atau algoritma tersebut.

II. Latar Belakang

      Ada banyak tahapan saat seorang programmer merancang program. Salah satu yang paling penting adalah tahap perancangan program. Tahapan ini dikatakan sebagai tahapan yang paling penting karena pada tahapan ini dasar dari program akan dibuat (rancangan program).
       Untuk membuat rancangan program tersebut programmer menggunakan alat bantu,yakni flowchart. Flowchart adalah penggambaran secara grafik dari langkah-langkah dan urut-urutan prosedur dari suatu program. Flowchart biasanya mempermudah penyelesaian suatu masalah khususnya masalah yang perlu dipelajari dan dievaluasi lebih lanjut.
       Bagi kita yang notabenenya sebagai calon programmer, mungkin masih ada yang belum memahami benar tentang apa itu flowchart dan simbol-simbolnya.

III. Alat dan Bahan 

•  Dia (Diagram Editor)
• OS Linux Mint 18.1

IV. Tujuan

     Bertujuan untuk mengenal apa itu flowchart, bagaimana cara menggunakan dan penyusunan dari flowchart.

V. Tahap Pelaksanaan

• Pada tahap pelaksanaan ini kita akan mempraktekkan membuat sebuah flowchart sederhana menggunakan software aplikasi Dia. Bisa mendownload aplikasinya di sini. Jika juga langsung masuk ke Menu -> software manager -> ketikkan pada pencarian Dia.
• Kali ini kita akan membuat sebuah contoh pembuatan dari flowchat dari login. Mari kita buka aplikasi Dia yang ada di laptop kita masing-masing.

Gambar dari Aplikasi Dia

• Simbol-simbol yang kita gunakan untuk membuat flowchat login yaitu sebagai berikut 

• Kita akan membuat flowchart dari login yaitu seperti dibawah ini.

Keterangan :

• Kita mulai terlebih dahulu
• Kita masukkan username dan password yang telah ada 
• Jika password salah maka kita akan mengisi ulang
• Jika password yang kita masukkan benar maka akan masuk ke halaman yang lain.
• Selesai

VI. Kesimpulan

     Dari  pembahasan diatas dapat ditarik kesimpulan bahwa penggunaan dari flowchart dalam pembangunan sebuah sistem atau aplikasi dapat mempermudah kita sebagai programmer ataupun bagi pembaca agar supaya dapat membaca dan mengetahui alur yang kita buat.

VII. Referensi

•  https://id.wikipedia.org/wiki/Diagram_alir

Sekian dan Terimakasih.

SMK Bisa!!

Wasalamu'alaikum wr.wb.

Read More

CSS- Warna / Background / Border

kali ini saya akan share tentang cara memilih warna yang pas dengan menggunkan css.

Assalamulaikum wr.wb
     Untuk lebih lanjutnya setelah mengenal CSS selanjutnya saya akan berbagi bagaimana menerapkan warna,background,border pada CSS

Latar Belakang
     Warna,background dan border merupakan bagian yang berguna untuk memperindah tampilan dari halaman web. CSS memberikan berbagai tag dan perintah yang berguna untuk merubah berbagai tampilan warna,background dan border.

Tujuan
     Mempelajari Beberapa perintah yang berfungsi mengatur warna,background dan border menggunakan CSS.

Pembahasan dan Langkah Kerja

• WARNA 

Warna dalam CSS yang paling sering ditentukan oleh:
1. Nilai RGB :
    Warna RGB adalah model warna additive yang bertujuan sebagai penginderaan dan presentasi gambar dalam tampilan visula dalam peralatan elektronik seperti komputer,televisi dan fotografi. 
Warna RGB difungsikan untuk tampilan di komputer karena warna latar komputer Hitam. 
   R : Red (Merah)
   G : Green (Hijau)
   B : Blue (Biru)

Contoh : 

Format warna RGB

 2.Warna Hexadesimal 
         Warna Hexadesimal sebenarnya merupakan sebuah penyebutan untuk penulisan kode warna diantara jenis kode warna lainnya . khususnya untuk halaman web/blog . karena itulah disebut dengan hexa color code.penulisannya menggunakan angka 0 - 9 . jumlah kodenya 6 karakter bisa terdiri dari huruf saja angka saja atau gabungan dari keduanya dan penandanya menggunakan pagar sebelum penulisannya.

Contoh :

format warna hexadesimal

Warna tersebut berlaku pada hampir seluruh penerapan CSS contoh untuk mengatur warna font,background,tabel,border  .

1. Font-CSS

Script CSS Pewarnaan Font

Hasil

2. Background-CSS

Script background warna

Hasil

3. Border atau batas
      The border-style properti menentukan jenis perbatasan apa yang akan ditampilkan.
    Nilai-nilai berikut yang diizinkan :

• dotted - Mendefinisikan perbatasan bertitik
• dashed - Mendefinisikan perbatasan putus-putus
• solid - Mendefinisikan sebuah perbatasan yang solid
• double - Mendefinisikan perbatasan ganda
• groove- Mendefinisikan sebuah perbatasan berlekuk 3D.Efeknya      tergantung  
• pada nilai border-color
• ridge- Mendefinisikan sebuah perbatasan bergerigi 3D. Efeknya tergantung
• pada nilai border-color
• inset- Mendefinisikan sebuah perbatasan inset 3D. Efeknya tergantung pada
• nilai border-color
• outset- Mendefinisikan sebuah perbatasan awal 3D. Efeknya tergantung pada
• nilai border-color
• none - Mendefinisikan ada batas
• hidden - Mendefinisikan perbatasan tersembunyi



Script style css

Hasil

 Lebar border dapat diatur dengan satuan px :

Pengaturan ukuran pada CSS

Warna border dapat diatur :

Pengaturan warna yang berbeda 4 sisi

Pengaturan warna semua sisi sama

Style yang berbeda pada satu paragraf

style border

Hasil dua style border

Contoh tersebut diatas menggunakan dua style bordernya dengan sekaligus.

Cukup sekian apa yang dapat saya sampaikan semoga bermanfaat Terimakasih Wassalamualaikum wr.wb

Read More

CSS : Cara penulisan CSS

asalamualaikum temanteman semoga hari ini kalian sehat  nah pagi ini saya ingin membahas sedikit cara penulisan CSS yang benar dan bagaimana cara menyimpan file CSS tersebut

1.CSS

      CSS ( Cascading Style Sheet ) Merupakan sebuah bahasa pemrograman web yang memiliki fungsi dan tujuan untuk mengatur atau mendesign tiap-tiap komponen dari HTML seperti element dan tag. Dengan menggunakan CSS kita dapat mengatur ukuran, warna dan bentuk dari element HTML. Mengganti font, mengatur margin dan mengatur padding dan banyak lagi yang dapat dilakukan menggunakan CSS untuk mempercantik atau men-design halaman website.

     CSS Menggunakan seletor(id dan class) untuk menentukan element yang akan di modifikasi atau yang akan diberi sentuhan CSS. Jika di ibaratkan HTML sebagai tiang pada sebuah bangunan rumah, maka CSS berfungsi sebagai cet dan dekorasi pada bangunan rumah tersebut. Ada tiga teknik metode penulisan CSS, yaitu :

• Inline CSS Style
• Internal CSS Style
• External CSS Style

Ketiga teknik metode cara penulisan CSS tersebut akan kita bahas pada tutorial Belajar CSS Dasar Cara Penulisan Pada CSS

2.TEKNIK PENULISAN CSS INLINE STYLE
      Teknik penulisan CSS pertama yaitu dengan menulis syntax CSS dengan inline Style adalah teknik penulisan Syntax CSS yang tidak memerlukan sector (id dan class) sehingga syntax CSS diletakkan atau langsung disisipkan pada element HTML. Suntax CSS diletakkan di dalam atribute style="".

3.CONTOH PENULISAN INLINE STYLE
      Untuk membuat contoh penulisan CSS dengan inline caranya sediakan sebuah file html atau php. Disi saya membuat file html dan memberi nama dengan belajar.html

<!DOCTYPE html>
<html>
<head>
    <title>Penulisan CSS dengan Inline Style</title>
</head>
<body>
<h1 style="color: red">Belajar CSS Dasar Penggunaan inline </h1>
</body>
</html>

      Perhatikan contoh penulisan CSS Inline style diatas. Syntax CSS diletakkan
dalam element h1 menggunakan atribut style=" ". Perintah color adalah perintah CSS yang berfungsi untuk mengatur warna font. Jadi pada contoh inline css style ini kita membuat heading h1 dengan warna font yang kita atur menjadi red ( merah ). Dan saat dijalankan di web browser seperti berikut.

Hasil script saat di run

4.TEKNIK PENULISAN CSS INTERNAL STYLE
Teknik Penulisan Syntax CSS Dengan Internal Style adalah teknik penulisan syntax css yang diletakkan satu file dengan file html atau php. Syntax CSS diletakkan di dalam tag <style> dan diakhiri dengan </style>. Dan biasanya diletakkan pada bagian tag <head> pada HTML.

• CONTOH PENULISAN INTERNAL STYLE

<!DOCTYPE html>
<html>
<head>
    <title>Penulisan CSS dengan Internal Style</title>
    <style type="text/css">
        #text{
            color: white;
            text-shadow: black ;
        }
        .background{
            background: green;
            padding: 10px;
        }
    </style>
</head>
<body>
<div class="background">
<center>
<h1 id="text">Belajar CSS Dasar Internal </h1>
</center>
</div>
</body>
</html>

      Perhatikan contoh penulisan CSS Inertnal Style diatas. Syntax CSS diletakkan satu file dengan file html. Syntax CSS diletakkan dalam tag <style> dan di bagian tag <head>. Syntax CSS Padding berfungsi sebagai pengatur jarak pada sisi dalam element. Pada contoh diatas kita memberi jarak sebesar 10px atau 1- pixel. CSS memanggil selector class dengan tanda titik " . " dan memanggil selector id dengan tanda pagar "#" .

<style type="text/css">
        #text{
            color: white;
            text-shadow: black ;
        }
        .background{
            background: green;
            padding: 10px;
        }
    </style>

Hasil script saat di run

5.TEKNIK PENULISAN EXTERNAL STYLE
Teknik Penulisan Syntax CSS Dengan External Style adalah teknik penulisan yang memisahkan file CSS dan HTML. penggunaan CSS yang baik adalah menggunakan teknik penulisan ini agar kode program kita tidak berantakan karena syntax css disimpan pada file css. File CSS dan HTML dihubungkan menggunakan.

<link rel="stylesheet" type="text/css" href="file css anda">

• CONTOH PENULISAN EXTERNAL STYLE

     Untuk membuat External Style siapkan satu buah file HTML dan satu buah file CSS. Disini saya membuat sebuah file dengan nama index.html dan style.css

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Penulisan CSS dengan External Style</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="background">
<h1 id="text">Belajar CSS Dasar dengan External Style </h1>
</div>
</body>
</html>

Style.css

#text{
    color: red;
}
.background{
    background: green;
    padding: 10px;
}

Jika kita run file index.html maka akan tampil di browser seperti di bawah ini :

Hasil run

Dari contoh di atas kita dapat memahami penggunaan CSS secara dasar dan mengerti cara penerapan dan pemanggilan file CSS.

REFERENSI : www.malasgoding.com

Read More

koneksi HTML ke CSS

1.HTML

     Tutorial Menghubungkan HTML Dengan CSS ini merupakan tutorial yang bisa dibilang penting. Karena jika kita tidak dapat menghubungkan HTML dengan CSS secara otomatis kita tidak mengetahui bagaimana cara untuk mendesain halaman website yang kita buat karena file HTML tidak terhubung dengan CSS. Bukan hanya CSS, tetapi PHP juga

2.CARA MENGHUBUNGKAN HTML DENGAN  CSS
    Untuk Cara Menghubungkan HTML Dengan CSS saya kira sangat mudah. Gunakan tag <link> untuk menghubungkan HTML dengan CSS. Tag link di letakkan pada bagian element head pada struktur HTML. Silahkan perhatikan contoh berikut :

<!DOCTYPE html>
<html>
<head>
    <title>HTML : Menghubungkan HTML dgn CSS </title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>  

   Dari contoh diatas saya membuat tag link yang berfungsi untuk menghubungkan file html/php dengan file CSS yang kita inginkan.

  <link rel="stylesheet" type="text/css" href="style.css">

     Atribut rel="stylesheet" dan type="text/css" merupakan deklarasi untuk menjelaskan bahwa file yang kita panggil atau hubungkan adalah file stylesheet atau CSS. Dan pada atribut href yang digunakan untuk meletakkan nama dan lokasi file CSS yang ingin kita hubungkan. Pada contoh ini saya menghubungkan file HTML saya dengan file CSS yang sudah tersedia dan bernama style.css

    Jika kita run di web browser maka tidak muncul apa - apa karena HTML hanya berisi struktur dasar dan belum terisi element apapun. Untuk mencoba apakah file CSS sudah terhubung dengan file HTML kita maka akan kita cek dengan cara berikut ini. Kita buat contoh sederhana dengan cara membuat element heading, dan kemudian kita beri warna text heading 1 dengan warna biru.

Buat satu file dengan nama INDEX.html :

<!DOCTYPE html>
<html>
<head>
    <title>HTML : Menghubugkan HTML dengan CSS</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Belajar Menghubungkan HTML dengan CSS
http://muhfajarshodiq.blogspot.co.id</h1>
</body>

Lalu buat file CSS nya dengan nama style.css

h1{
    color: blue;
    font-family: roboto;
    text-align: center;
}

Hasil script saat di run

     HTML berhasil dihubungkan dengan CSS terbukti dengan berhasilnya syntax CSS yang kita buat mengatur element heading 1. Syntaxt color diatas merupakan perintah untuk menetapkan warna font/text, font-family untuk mengatur text apa yang kita gunakan, dan text-align berfungsi untuk mengatur rata text dan pada tutor ini kita gunakan text rata tengah. Syntax CSS diatas merupakan syntax CSS paling dasar.

     Oke sekian dulu postingan kali ini , ikuti terus postingan saya selanjutnya , sekian dan terima kasih

REFERENSI : www.malasngoding.com

Read More