Showing posts with label Web. Show all posts
Showing posts with label Web. Show all posts

programmerpremidnight.blogspot.com


1. Code editor yang support syntax highlighting dan package pembantu pengembangan software.

1. Sublime Text 
2. Visual Studio Code
3. ATOM

3 Code editor diatas saya yang paling memenuhi syarat UI/UX , dengan tampilan sederhana , 3 code editor tersebut menyediakan bermacam package mulai dari snippets,theme,completions beberapa bahasa pemrograman,plugin,dll.

kalian bisa mengecek pro kontra beberapa code editor di website ini https://mythemeshop.com/blog/code-editors/


2. Browser

 Pilihlah browser yang paling kompatibel dengan bahasa pemrograman , saya sendiri menggunakan Firefox.

3.  Perangkat Lunak yang membantu mengelola data dan menjalankan server

Siapa sih programmer yang gatau xampp, eittss selain xampp juga ada loh.
diantaranya :
1. LAMP
2. SAMP
3. MAMP
4. WAMP
5. Phpserv
6. dll
Sekian terimakasih, semoga tutorial tentang software yang dibutuhkan web programmer pemula ini bisa bermanfaat buat kalian semua :).


 



https://programmerpremidnight.blogspot.com/


Langsung saja scriptnya

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .kotak{
            height: 500px;
            width: auto;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="kotak" class="kotak" onmouseover="over()">
      
    </div>
<script
              src="https://code.jquery.com/jquery-3.4.1.min.js"
              integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
              crossorigin="anonymous"></script>

<script>
    $('.kotak').mousemove(function(event){
        const x = Math.round((window.innerHeight / event.clientX) * 255);
        const y = Math.round((window.innerWidth / event.clientY) * 255);

        $('.kotak').css('background-color','rgb('+x+',0,'+y+')');
    });
</script>
<script>
    $('.kotak').mouseleave(function(){
        $('.kotak').css('background-color','blue');
    });
</script>


</body>
</html> 

Saya menggunakan jQuery untuk event handlingnya , kalian bisa saja menggunakan Vanilla Javascript (Native Javascript). 

CSS saya menggunakan rgb (Contoh: rgb(200,0,200))
jadi saya menggunakan hasil dari gabungan event window innerheight/width dan event client height/width.

logikanya ketika kursor bergerak (mousemove) akan otomatis mengganti hasil dari perhitungan dalam variabel x dan y lalu variabel x dan y akan digunakan untuk rgb pada background color yang mana akan terus berganti jika kursor bergerak valuenya.


1. MEMBUAT TEKS BERADA DI TENGAH PADA HTML DAN CSS

https://programmerpremidnight.blogspot.com/

Buatlah file bernama textcenter.html lalu copy paste skrip dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <style>
        p{
            text-align: center;
        }

        ul li{
            text-align: center;
        }

        div{
            background-color: blue;
            float: left;
            text-align: center;
        }
    </style>
</head>
<body>

    <center><h1>Hello World</h1></center>   
   
    <p>Hello World.</p>
   
    <ul>
        <li>Hello World.</li>
        <li>Hello World</li>
    </ul>

    <div>
        Hello WORLD
    </div>


</body>
</html>

 Setelah itu coba buka filenya, nanti akan diarahkan ke browser default kalian, dan bisa lihat hasilnya, teks sudah berhasil berada di tengah.. loh kenapa yang div nggak? karena yang dipentingkan adalah posisi float dari elementnya terlebih dahulu disamping teks yang berada didalamnya..


coba hapus
            background-color: blue;
            float: left;

otomatis teks akan berada ditengah karena tidak ada yang mencegah (prevent).


2. MEMBUAT ELEMEN BERADA DI TENGAH PADA HTML DAN CSS

Buatlah file bernama element.html lalu copy paste skrip dibawah ini :

<!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>test</title>

        <style>

           .block{
               height:50px;
               max-width: 50px;
               background-color:blue;
               margin: 10px auto;
           }

        </style>

    </head>

    <body>

        <div class="block">
      
        </div>

    </body>

    </html>

Elemen divnya berhasil dibuat ditengah dengan menggunakan perantara atribut 'class' lalu 
menggunakan margin: 0px auto; untuk membuat elemen tersebut berada ditengah. 

jika kalian ganti margin nya dengan text-align:center; tidak akan berjalan dengan baik dan malah membuat teks berada di kiri.

Jadi sekian saja tutorialnya ... lain kali saya share juga apa itu class pada html , width height, dan margin.

Wasalammualaikum warahmatullahi wabarakatuh.. See you on next post!

 


Follow:

Blogger Templates20 Created by ThemeXpose