Htmlib.com – Informasi Belajar Menggunakan Bahasa Program Html Css Php http://www.htmlib.com Wed, 20 Nov 2019 06:15:51 +0000 en-US hourly 1 https://wordpress.org/?v=5.0.7 http://www.htmlib.com/wp-content/uploads/2019/11/fav.png Htmlib.com – Informasi Belajar Menggunakan Bahasa Program Html Css Php http://www.htmlib.com 32 32 Membuat Efek Transisi Pada Css http://www.htmlib.com/membuat-efek-transisi-pada-css/ http://www.htmlib.com/membuat-efek-transisi-pada-css/#respond Mon, 18 Nov 2019 11:01:08 +0000 http://htmlib.com/?p=34 Hari ini kita akan belajar tentang properti transisi CSS3 di artikel ini dan belajar membuat beberapa efek menarik darinya. Hingga […]

The post Membuat Efek Transisi Pada Css appeared first on Htmlib.com - Informasi Belajar Menggunakan Bahasa Program Html Css Php.

]]>
Bahasa CSS dasar untuk pemula

Hari ini kita akan belajar tentang properti transisi CSS3 di artikel ini dan belajar membuat beberapa efek menarik darinya.

Hingga beberapa waktu yang lalu, flash telah banyak digunakan dalam mendesain web dan banyak efek transisi dan animasi yang dirancang olehnya, tetapi seperti yang Anda ketahui seberapa cepat perubahan terjadi dalam teknologi web dan sekarang saatnya telah tiba bahwa kami Anda dapat membuat desain yang menarik hanya menggunakan CSS3 tanpa plugin pihak ketiga seperti Flash, Silverlight dll.
Apa itu Efek Transisi CSS?
Transisi CSS sangat berguna untuk membuat elemen situs web Anda lebih menarik dan juga mudah digunakan, kami dapat merancang efek transisi terbaik hanya dengan beberapa baris kode.

Waktu perubahan gaya elemen dapat dikontrol melalui properti transisi.

Sebagai contoh, jika kita berbicara tentang desain menu yang sederhana, maka ketika kita mengarahkan mouse pada sebuah tombol, warna latar belakangnya berubah, ia segera berubah tetapi jika kita ingin mengarahkan warna latar secara perlahan -Switch, maka untuk ini kita akan menggunakan properti transisi CSS3.

Sebagai contoh, kami telah membuat dua kotak di bawah ini, di mana tidak ada transisi yang digunakan dalam satu, sedangkan yang lain durasi transisi disimpan 3 detik. Anda dapat melihat perbedaan antara keduanya dengan melayang di atas dua kotak.

Anda juga dapat membuat banyak jenis animasi dengan efek transisi dan meningkatkan keindahan halaman web Anda.

Properti Transisi CSS3

Ada empat jenis properti yang digunakan untuk menggunakan fitur transisi di CSS:

  1. transition-property
  2. transition-duration
  3. transition-timing-function
  4. transition-delay

transition-property

Sekarang, mari kita mencoba memahami properti ini dan mengetahui properti mana yang cocok untuknya: Langkah pertama untuk membuat efek transisi adalah memberi tahu properti atau properti mana yang menerapkan efek transisi.

Sebagai contoh, jika kita mengarahkan kursor ke suatu elemen, ada perubahan pada dua propertinya, pertama warna latar belakang dan lebar kedua, maka kita memiliki opsi untuk menerapkan transisi pada salah satu atau kedua properti ini.

Syntax yang diberikan di bawah ini digunakan untuk ini

transition-property: none | all | property

Mari kita memahami nilai-nilai properti ini:
none: tidak ada transisi
all: Efek transisi akan berlaku untuk semua properti dari semua elemen yang dipilih
property: sebagai gantinya kami akan menentukan satu atau lebih properti yang pengaruhnya diterapkan

Contoh:

transition-property: none;
transition-property: all;
transition-property: background-color;
transition-property: color, height, width;

 

transition-duration

Kami juga dapat mengontrol waktu dalam transisi, untuk ini kami harus menggunakan properti durasi transisi. Dalam nilainya kita dapat menentukan daftar waktu, satuan waktu dapat dalam detik atau milidetik. Nilai awalnya adalah 0 yang berarti bahwa transisi tidak akan memakan waktu.
Sintaksnya adalah sebagai berikut:

transition-duration: time;

Contoh:

transition-duration: 2s; transition-duration: 2000ms;
transition-duration: 2000ms, 3000ms;

transition-timing-function

Dengan fungsi transisi-waktu-kita menentukan apa yang akan menjadi gaya transisi. Kita dapat menggunakan nilai yang telah ditentukan untuk melakukan ini atau kita dapat membuat gaya khusus dengan menggunakan bezier kubik.

Sintaksnya diberikan di bawah ini:

transition-timing-function: linear | ease | ease-in | ease-out | ease-in-out| cubic-bezier(n,n,n,n);

Contoh:

transition-timing-function: ease;
transition-timing-function: ease, linear;
transition-timing-function: cubic-bezier(1.000, 0.5, 0.15, 0.8);

Anda dapat melihat dalam contoh di bawah ini bagaimana fungsi waktu yang telah ditentukan ini bekerja. Dalam contoh ini, kami telah membuat 5 kotak tempat mouse melayang, mereka mengembang hingga 500px dan untuk ini kami menjaga durasi transisi 2 detik.

transition-delay

Dengan properti transisi-penundaan, kami juga dapat memutuskan kapan transisi akan dimulai. Nilai defaultnya adalah 0 dan, seperti properti durasi transisi, waktu ditentukan dalam detik atau milidetik.

Sintaks properti ini adalah sebagai berikut:

transition-delay: time;

Contoh:

transition-delay: 2s;
transition-delay: 3000ms, 6000ms;
transition-delay: -3s;

Saya telah berfokus pada konsep transisi CSS dasar dalam artikel ini sehingga Anda dapat memahami cara kerjanya dan cara menggunakannya, jika Anda ingin membuat beberapa efek lanjutan, maka cobalah mentransisikan dengan properti lain.

Katakan apakah Anda menyukai artikel ini, jika Anda memiliki pertanyaan, Anda dapat bertanya melalui kotak komentar.

 

 

 

The post Membuat Efek Transisi Pada Css appeared first on Htmlib.com - Informasi Belajar Menggunakan Bahasa Program Html Css Php.

]]>
http://www.htmlib.com/membuat-efek-transisi-pada-css/feed/ 0
Balajar Javascript Dasar Dalam 20 Menit (Bahasa Indonesia) http://www.htmlib.com/balajar-javascript-dasar-dalam-20-menit-bahasa-indonesia/ http://www.htmlib.com/balajar-javascript-dasar-dalam-20-menit-bahasa-indonesia/#respond Fri, 15 Nov 2019 10:39:57 +0000 http://htmlib.com/?p=29 Beberapa hari yang lalu kami menulis sebuah artikel di mana kami memberi tahu Anda tentang JavaScript, apa itu Javascript dan […]

The post Balajar Javascript Dasar Dalam 20 Menit (Bahasa Indonesia) appeared first on Htmlib.com - Informasi Belajar Menggunakan Bahasa Program Html Css Php.

]]>
Javascript dasar sangat mudah dipelajari

Beberapa hari yang lalu kami menulis sebuah artikel di mana kami memberi tahu Anda tentang JavaScript, apa itu Javascript dan apa kegunaannya. Hari ini di artikel ini, kami ingin menjelaskan kepada Anda tutorial dasar Javascript, sehingga Anda dapat mempelajari dasar-dasar dasar JavaScript.

JavaScript adalah salah satu bahasa pemrograman paling populer di dunia. Dalam situasi seperti itu, permintaan pengembang Javascript sangat tinggi, jadi dengan mempelajari ini, Anda dapat membangun karier yang lebih baik dan yang paling penting adalah bahwa itu sangat mudah dipelajari, setelah Anda membaca tutorial ini yang hanya 20 menit, maka Anda dapat mempelajari pemrograman dasar Javascript.

Jadi jika Anda siap untuk belajar Javascript, maka Anda dapat mulai coding dalam Javascript sekarang dengan membaca tutorial dasar ini. Selanjutnya kami juga akan memberikan Anda tutorial lanjutan, jadi jika Anda mau, Anda juga dapat berlangganan newsletter kami secara gratis sehingga pembaruan lebih lanjut akan diterima di email Anda.

Tag Script HTML

Anda dapat memasukkan program JavaScript di mana saja di bagian kepala atau badan dokumen HTML Anda, untuk ini Anda akan memerlukan tag <script>.

Contoh:

<script>  
JavaScript code  
</script>

Browser secara otomatis mengartikan kode yang ditulis di dalam tag <script> sebagai skrip.

Ada juga beberapa atribut tag skrip yang saya berikan di bawah ini, walaupun sangat jarang digunakan tapi Anda harus tahu.

Menurut standar lama HTML4, atribut type di dalam tag skrip ditulis seperti ini:

<script type = "text / javascript">
Kode JavaScript
</script>

Dalam HTML modern Anda tidak perlu menulis atribut tersebut.

Atribut bahasa yang digunakan untuk memberi tahu bahasa mana yang kami gunakan. Itu ditulis sebagai:

<script language="javascript">
Kode JavaScript 
</script>

Syntax JavaScript

Sekarang Anda telah memahami bahwa kode JavaScript ditulis di dalam tag <script>. Sekarang coba pahami bagaimana kode ditulis dalam syntax JavaScript misalnya JavaScript manggunakan contoh kode yang diberikan di bawah ini

Contoh:

<!DOCTYPE HTML>  <html>  <body>  <script>  alert( 'Hello, world!' ); </script> </body> </html>

Dalam kode ini, kami telah menulis kode JavaScript dalam tag skrip di dalam tubuh, yang akan memunculkan kotak dialog di layar pengguna di mana Halo, dunia! Akan menulis

Hal yang perlu diperhatikan di sini adalah bahwa kita meletakkan tanda koma (;) setelah kode tetapi tidak perlu jika Anda menulis kode yang sama dalam satu baris.

alert('Hello');
alert('World');

Jika beberapa kode ditulis dalam satu baris, maka kita harus meletakkan tanda koma di akhir setiap pernyataan untuk memisahkannya secara terpisah.

alert('Hello'); alert('World');

External Script

Anda dapat membuat file JavaScript terpisah dan menulis kode di dalamnya dan mengimpor file itu ke dalam dokumen HTML.

Untuk melampirkan file skrip dalam HTML, tag <script> harus menentukan lokasi file tersebut melalui atribut src.

<script src="/scriptfolder/myscript.js"></script>

Kami mengimpor file JavaScript bernama myscript.js dalam kode di atas. /scriptfoljs-/myscript.js dalam kode menentukan lokasi js-l itu.

Jika file myscript.js berada di lokasi yang sama dengan file HTML, maka kita dapat menulis src = “myscript.js”.

Salah satu keuntungan menggunakan file Terpisah adalah browser menyimpan file ini dalam cache setelah mengunduhnya dan setiap kali halaman membutuhkan file itu, ia diambil langsung dari cache alih-alih mengunduh lagi. Apakah.

Ini untuk mengatakan bahwa skrip eksternal ini tidak akan diunduh lagi dan lagi, yang akan meningkatkan kecepatan pembukaan halaman.

Komentar Javascript

Banyak kali program kami menjadi sangat logis atau kami menulis beberapa kode yang kompleks dan setelah beberapa bulan ketika kami melihatnya, ada banyak kebingungan dalam memahaminya.

Dalam situasi seperti itu, komentar terbukti sangat membantu. Jika kami menulis komentar di sebelah kode dan menjelaskan apa yang terjadi dalam kode itu, maka Anda atau siapa pun dapat dengan mudah memahaminya dengan membacanya nanti.

Kita dapat menulis komentar di mana saja dalam skrip, itu tidak berpengaruh dalam pelaksanaan program karena penerjemah mengabaikannya.

Seperti bahasa pemrograman lainnya, dua jenis komentar dapat digunakan dalam Javascript:

1. Komentar satu baris:
Jika Anda ingin menulis komentar dalam satu baris, Anda cukup menulis komentar di sebelahnya dengan mengedepankan dua garis miring //.

// This is a single line comment
alert('Hello');

2. Beberapa baris komentar:
Jika Anda ingin menulis komentar di lebih dari satu baris, maka Anda akan menggunakan / * dan * /.

/* This code will not work
alert('Hello'); 
*/
alert('World');

Pada contoh, teks dan kode yang ditulis antara / * dan * / tidak akan muncul di layar.
Jika Anda ingin menonaktifkan kode sementara, Anda dapat melakukan ini hanya dengan membuat komentar.

Kami harap Anda menyukai informasi ini (tutorial Javascript dalam bahasa Indonesia). Selanjutnya, kami akan terus memberikan Anda lebih banyak tutorial yang berkaitan dengan JavaScript, jadi jika Anda mau, Anda dapat berlangganan secara gratis, yang kotak langganannya diberikan di bawah ini.

Jika Anda memiliki pertanyaan atau ingin memberikan saran, silakan tulis di kotak komentar di bawah, itu akan membuat kami senang.

The post Balajar Javascript Dasar Dalam 20 Menit (Bahasa Indonesia) appeared first on Htmlib.com - Informasi Belajar Menggunakan Bahasa Program Html Css Php.

]]>
http://www.htmlib.com/balajar-javascript-dasar-dalam-20-menit-bahasa-indonesia/feed/ 0
Panduan Cara Belajar Coding Html Gratis Untuk Pemula http://www.htmlib.com/panduan-cara-belajar-coding-gratis-untuk-pemula/ http://www.htmlib.com/panduan-cara-belajar-coding-gratis-untuk-pemula/#comments Thu, 14 Nov 2019 12:04:06 +0000 http://htmlib.com/?p=1 Mempelajari coding dapat menjadi salah satu tugas paling menantang yang dapat dilakukan programmer. Kode terlihat rumit, tulisan teks sangat sulit […]

The post Panduan Cara Belajar Coding Html Gratis Untuk Pemula appeared first on Htmlib.com - Informasi Belajar Menggunakan Bahasa Program Html Css Php.

]]>
Mempelajari coding dapat menjadi salah satu tugas paling menantang yang dapat dilakukan programmer. Kode terlihat rumit, tulisan teks sangat sulit untuk dibaca, terdengar membosankan, dan mungkin mengingatkan Anda pada waktu yang Anda butuhkan untuk mengingat rumus-rumus.

Tapi hampir 2 tahun sejak saya pertama kali memperlajarinya, dan saya percaya itu adalah keterampilan paling berharga yang bisa dimiliki seorang desainer. Ya, ini tidak baik. Tapi tidak, itu juga tidak sesulit yang Anda bayangkan.

Dan masalahnya adalah, ini sangat mudah  dan benar-benar mempelajari coding gratis saat ini sehingga benar-benar tidak ada alasan Anda  tentu boleh mencobanya. Jadi di sini adalah panduan sederhana untuk memberi tahu Anda semua yang Anda butuhkan untuk belajar coding.

Manfaat Belajar Coding

Anda memiliki pemahaman yang lebih baik tentang apa yang dapat dilakukan dalam kode dan apa yang tidak dapat dilakukan, sehingga desain Anda menjadi lebih realistis dan kurang berubah. Developer akan lebih menikmati bekerja dengan Anda.

Ketika pengembang memberi tahu Anda bahwa desain Anda tidak dapat diimplementasikan, Anda akan memiliki pemahaman yang lebih baik tentang apa solusi potensial dan juga apakah itu benar. Ini berarti Anda dapat membuat kompromi terbaik untuk produk Anda. Anda akan berkomunikasi sedikit lebih baik dengan pengembang Anda, karena Anda lebih memahami istilah mereka.

Anda akan siap untuk membuat desain Anda sendiri tanpa bergantung pada orang lain. Semua ide-ide gila untuk halaman web, game, atau aplikasi yang Anda harapkan dapat diwujudkan oleh seseorang? Anda dapat melakukan ini sendiri. Wajahku sangat terkagum-kagum Jika ini tidak berguna bagi Anda, karena Anda tidak perlu bekerja dengan developer atau tidak ingin menerapkan desain Anda sendiri, maka mungkin coding bukan untuk Anda.

Tetapi jika Anda tidak yakin seberapa berguna coding ini, saya mendorong Anda agar Anda mempelajarinya. Anda hanya perlu beberapa minggu untuk menentukan apakah manfaatnya sepadan dengan waktu yang Anda sisihkan.

Berapa Biayanya?

Tidak ada Sumber daya gratis lebih dari cukup untuk memulai sumber daya dasar. Anda akan dapat membuat halaman web, situs interaktif, dan bahkan game.

Namun, Anda akan meluangkan waktu untuk mempelajari pengkodean. Lebih lanjut tentang itu nanti.
Apa yang harus dipelajari

Untuk dapat membuat kode situs web interaktif, Anda perlu tahu:

  1. Html + css
    Ini adalah blok bangunan dasar situs web. HTML menyediakan struktur ke situs web, dan CSS memberi tahu browser Anda bagaimana struktur itu seharusnya terlihat. Jika Anda menguasai HTML dan CSS, Anda akan dapat membuat kode desain web apa pun yang Anda impikan.
  2. JavaScript
    Ini adalah bahasa pemrograman dasar yang berjalan di sebagian besar situs web. Dengan JavaScript, Anda dapat membuat situs interaktif, yaitu situs web yang merespons tindakan pengguna. Anda juga dapat membuat game. Saya sarankan menguasai setidaknya JavaScript dasar, sehingga Anda dapat memahami cara kerja bahasa. Kemudian, Anda dapat melanjutkan ke jQuery.
  3. jQuery
    Secara teknis itu bukan bahasa itu sendiri, tetapi perpustakaan JavaScript. Ini pada dasarnya adalah perantara yang memungkinkan Anda berbicara dengan peramban dalam “bahasa gaul modern” alih-alih “bahasa Inggris abad pertengahan”. Anda berbicara untuk jQuery dalam bahasa slang yang disederhanakan, dan itu diterjemahkan ke JavaScript asli (dan agak rumit) di browser. Sebagai analogi, “Dengan demikian akan diketahui bahwa kotak ini akan berwarna biru”, Anda hanya dapat mengatakan “Anda dapat membuat kotak ini biru”. Saya sangat merekomendasikan belajar jQuery, karena itu membuat pengkodean sangat mudah.

Tempat Belajar Coding

Saya hanya merekomendasikan tutorial yang telah saya ambil sebelumnya, jadi jika Anda pikir ada kursus gratis, itu harus dimasukkan, silakan tinggalkan komentar!

Html + css

Akademi Khan dan Akademi Kodak
Kedua situs menawarkan kursus gratis, interaktif, dan sangat terstruktur tentang HTML dan CSS. Mereka jauh lebih baik daripada memulai perjalanan coding Anda.

Sementara Khan Academy sepenuhnya gratis, Kodak Academy memiliki beberapa konten tanggal yang hanya dapat diakses oleh pengguna berbayar.

Tetapi Khan Academy menggunakan video untuk mengajar Anda, yang benar-benar meningkatkan pengalaman belajar. Pamela (instruktur untuk sebagian besar kursus pemrograman KA) tampaknya benar-benar dapat diterima, dan saya mulai menyukai suaranya dan keanehan dari waktu ke waktu.

Saya sarankan untuk melakukan keduanya, karena pertama sebagian besar konten mereka tumpang tindih, dan pengulangan membantu memperkuat konsep dalam pikiran Anda, kedua mereka menggunakan pendekatan yang sedikit berbeda untuk mengajar Anda, Karena itu pengertian Anda akan lebih lengkap.

Tetapi jika Anda hanya punya waktu untuk melakukan 1 saja, saya akan memilih Khan Academy.

Ikuti kursus ini:

Khan Academy: Pengantar HTML / CSS: Membuat Halaman Web
Codecademy: HTML dan CSS

JavaScript

Akademi Khan dan Akademi Kodak
Sekali lagi, kedua situs menawarkan kursus luar biasa yang akan memberi Anda dasar yang baik tentang JavaScript.

Ikuti kursus ini:

Khan Academy: HTML / JS: Membuat halaman web interaktif
Codecademy: Pelajari JavaScript dan JavaScript

jQuery

Akademi Khan dan Akademi Kodak
Anda mungkin telah melihat polanya di sini. Kedua situs terus memberikan tutorial yang baik untuk jQuery.

Sekolah Coding

Kebanyakan kursus kode sekolah dibayar, tetapi beruntung bagi kami, perkenalan mereka biasanya gratis. Kursus-kursusnya juga diajarkan menggunakan video, meskipun tidak seperti Khan Academy, instrukturnya memiliki fasilitas di layar bagi siswa untuk berbicara.

Dan seperti yang dapat Anda lihat dari tangkapan layar di bawah ini, sekolah kode terkadang menjalankan promosi, di mana semua kursus mereka akan gratis untuk waktu yang terbatas.

The post Panduan Cara Belajar Coding Html Gratis Untuk Pemula appeared first on Htmlib.com - Informasi Belajar Menggunakan Bahasa Program Html Css Php.

]]>
http://www.htmlib.com/panduan-cara-belajar-coding-gratis-untuk-pemula/feed/ 1