Download Tutorial W3schools Offline Untuk Belajar Pemrograman dan CSS lengkap

Hello guys kali ini admin akan mengulas sedikit pemahaman tentang w3school, dimana w3school ini digunakan untuk belajar Pemrograman,CSS,Bootsrap, dll. Pada w3schools ini sangat bagus untuk belajar dasar-dasar dari pemrograman dimana pada penjelasan pada w3schools itu sangat lengkap oleh karena itu anda akan lebih cepat mengerti dengan penjelasan tersebut.

Jadi sebenarnya w3schools ini di operasikan secara online tetapi admin disini akan berbagi w3schools yang bisa di operasikan secara offline dimana gunanya pada saat anda tidak terkoneksi internet anda bisa mempelajari w3schools offline ini, jadi anda akan lebih mudah untuk mengoprasikannya. link download anda bisa kunjungi link di bawah ini:

link download

Tips dan Trik Belajar Pemrograman Dengan Meniru dan inspeksi Emelemnt Berbasis HTML dan CSS

Salam hangat para pejuang programmer bukan pro-gamer kali ini admin akan mengulaskan sedikit pemahaman mengenai cara cepat belajar pemrograman yang admin alami pada saat ini.

Pada gambar di atas admin mencoba meniru web sia unram bisa anda lihat dengan mengunjungi web site ini: sia.unram.ac.id dimana admin memulai belajar pemrograman dengan cara meniru website yang di anggap mudah dan tampilannya menarik untuk kita tiru.

Selanjutnya pada gambar di atas menggunakan sedikit elemen HTML dan lebih banyak digunakan CSS dari pada HTML karena CSS itu berfungsi  untuk mendesain halaman web supaya template web tersebut terlihat bagus di pandangan para pengunjung. Berkaitan dengan CSS admin belajar melalui W3school disana pusat pembelajaran admin mengenai CSS,HTML,PHP.dll 

Berikut ini adalah script gambar di atas

Seperti yang kita liat pada gambar script di atas ini yang berwana merah,hijau,kuning itu warna kombinasi HTML dan yang warna Biru adalah CSS bisa di lihat di bagian sebelah kanan gambar terdapat warna biru panjang itu adalah script CSS yang berguna untuk mendesain tampilan yang ada pada gamabr pertama di atas.

Sumber pembelajaran admin disini ada 2 cara yaitu:

1. belajar di w3school
2. inspeksi element (klik kanan pada browser kemudian plih paling bawah atau bisa menekan ctrl+shift+I )

pada gambar pertama di atas masih menggunakan versi localhost karena masih proses belajar untuk pemula 

Alat dan bahan yang digunakan:

1. aplikasi editor pemrograman (sublime)
2. XAMPP (untuk menjalankan di localhost)

sampai disini dulu ulasan pertama admin mengenai Cara Mudah belajar pemrograman semoga bermanfaat informasi yang di dapatkan pada postingan kali ini dan..... Salam programmer bukan pro-gamer

Membuat Form Dengan Input dan Pemrosesan Terpisah di HTML5 dan PHP

kembali lagi di blog kuasai teknologi kali ini saya akan membawa materi tutorial tentang membuat Form dengan input dan pemrosesan terpisah, maksudnya disini terpisah adalah reloadnya dari halaman 1 ke halaman 2 dengan menampilkan data yang ada pada halaman 1, selanjutnya simak penjelasannya di bawah ini.

Form  di HTML5 dikenal dengan adanya tag <form> dan di tutup dengan </form> . Di dalam tag pembuka <form> diikuti dengan atribut action dan method. Action menjelaskan ke halaman yang digunakan untuk memproses input, smentara method digunakan untuk mengatur cara mem-parsing konten. Ada 2 method yang biasa digunakan.

• GET: Variabel akan bisa dilihat di URL
• POST: Variabel akan disembunyikan dan tidak terlihat di URL, lebih secure dan cocok untuk memparsing informasi yang penting, seperti password.

Selain itu anda harus juga mengerti sintaks pembuatan form, yang terpenting adalah atribut "name" di masing-masing objek form (misalnya input atau text area). Atribut name ini penting karena nantinya digunakan untuk memanggil variabel di form lainnya.

Berikut ini adalah kode untuk menerima masukan user. Kode ini bisa disimpan dalam format HTML atau PHP karena tidak ada kode PHP di dalamnya dan hanya berfungsi untuk merender form dan menentukan actionnya, seperti gambar di bawah ini.

gambar 1

Apabila dijalankan pada browser tampilannya seperti gambar 2 di bawah ini:

gambar 2

Untuk memproses Anda perlu membuat terlebih dahulu file tangkapaninput.php. Yang harus di perhatikan adalah nama dari objek-objek form yang akan di gunakan untuk mengambil nilai variabel. Cara mengambilnya adalah dengan menggunakan sintaks $_POST['nama_variabel']." misalnya untuk mengambil variabel yang diisikan di kotak dengan name = "nama" maka digunakan sintaks $_POST['nama']. sperti ambar di bawah ini adalah file tangkapinput.php nya:

gambar 3

Script yang ada pada gambar 3 akan mengambil variabel-variabel yang dimasukkan dari from yang ada pada gambar 1 yang kemudian ditampilkan dengan memanfaatkan label untuk me-layout-nya.

Gambar 3 apabila dijalankan pada browser maka tampilannya akan seperti di bawah ini:

gambar 4

Data yang ada di gambar 4 ini adalah Data yang di isi oleh user pada Gambar 2 di atas dan hasilnya seperti gambar di atas.

Mungkin sampai disini dulu penjelasan tutorial kali ini

jangan lupa di praktikan lansung...

membuat input Date Picker menggunakan HTML5

script date picker

sampai jumpa lagi di blog saya kuasai teknologi tutorial kali ini akan membahas tentang Date Picker, ini gunanya untuk mengambil data dan waktu lansung saja simak penjelasannya di bawah ini:

• Date: memilih tanggal, bulan dan tahun
• Month: memilih bulan dan tahun
• week: memilih minggu dan tahun
• Time: memilih waktu (jam dan menit)
• Datetime-local: memilih waktu, tanggal, bulan dan tahun (waktu lokal)

contoh kodenya adalah seperti di bawah ini:

date: <input type="date" name="tanggal" />

berikut ini contoh beberapa kode untuk input type:

<html>

<head>

<title>penggunaan input Date Picker</title>

</head>

<body>

<form>

silahkan masukkan data anda: </br>

alamat email: <input type="email" name="email_pengunjung" /></br>

wbsite : <input type="url" name="url_pengunjung" /></br>

angka: <input type="number" name="angka" min="1" max="10" /></br>

range: <input type="range" name="jangkauan" min="1" max="10" /></br>

tanggal: <input type="date" name="tanggal" />

</form>

</body>

</html>

apabila dilihat di browser (contohnya oprea), tampilan tiap field akan sesuai dengan jenisnya bisa anda lihat seperti gambar di bawah ini:

hasil dari script di atas

mungkin sampai disini pembahasa kali ini megenai Date Picker, apabila mau penjelasan lebih lengkap tonton video di bawah ini:

sekian dan terimakasih sudah menyimak dan menonton video di atas semoga bermanfaat dan jangan lupa di Subscribe videonya see you again next time

jangan lupa di praktikan lansung

Membuat Tabel di HTML Dengan Detail

lansung saja script yang ada pada gambar di atas adalah script dari tabel yang kita buat pada pertemuan kali ini, script yang sekarang ini lumayan banyak tetapi simpel karena penjelasannya sudah di jelaskan sebagian di potingan yang kemarin" bagi yang belum tau silahkan klik disini

dan juga penjelasannya sebagian disini

penjelasan: Tabel merupakan sebuah kotak yang terdiri dari baris/row dan kolom/column. untuk membuat tabel, anda menggunakan <table> dan menutupnya dengan tag </table>. anda juga bisa menambahkan atribut lain di tag <table> pembuka. misalnya menentukan border,warna dan sebagainya.

Di dalam tag <table> ada beberapa tag lain yang perlu anda pahami yaitu:

• Tag <tr>, artinya adalah tag untuk menuliskan baris biasa di tabel, TR singkatan dari Tabel Row
• Tag <td>, artinya adalah tag untuk menuliskan kotak di dalam baris, makanya tag <td> ada di dalam tag <tr>. TD singkatan dari Tabel Data
• Tag <th> artinya adalah tag untuk menuliskan kotak biasa seperti <td> namun untuk header tabel. TH singkatan dari tabel header.

selanjutnya apabila script yang di atas di jalankan pada browser tampilannya akan seperti di bawah ini:

Di dalam tag table ada tertulis "border" di sana pada gambar 1, fungsi dari border ini untuk mempertebal ukuran garis pinggir pada tabel seperti gambar yang di atas tebal hitam itu hasil dari border, dan ketebalan yang saya gunakan tingkat 10.

mungkin sampai disini pembahasan tentang tabel, pada akhir pembahasan ada tertera SUBSCRIBE 

lansung saja taruh email anda dan klik submit, apabila ada postingan terbaru dari blog kuasai teknologi akan lansung masuk pada kontak email anda.

sekian dan selamat mencoba....

Membuat Daftar List Pada HTML: Lengkap Dengan Penjelasannya

assalamu'alaikum wr.wb salam sejahtera untuk kita semua, kali ini saya akan berbagi tutorial dengan judul cara membuat list pada HTML, baiklah lansung saja simak tutorialnya seperti di bawah ini:

gambar 1

penjelasan: dari beberapa code HTML di atas sudah di jelaskan pada postingan yang kemarin bagi yang belum tahu bisa klik disini.

selanjutnya penjelasan tentang beberapa code html yang berguna untuk membuat list. Dari gambar di atas ada kode yang tertera di dalam gambar seperti berikut <ol> , <li> dan <ul> . arti dari ketiga code tersebut adalah:

<ol> artinya adalah Order List yang dimaksud dengan daftar yang berurutan seperti contoh di gambar 2, tentang cara membuat program disitu ada no urut 1,2 dan 3. itulah yang dimaksud dengan <ol> (Order List)

<li> artinya adalah List yang dimaksud dengan list disini adalah isi dari Order list yang di atas seperti "tulisan script code", "kompilasi", dan "buat file executable"

<ul> artinya adalah unorder list maksudnya unorder list ini baris yang tidak berurutan contohnya bisa di lihat pada gambar 2, disana ada tanda titik hitam tebal itu salah satu contoh dari unorder list yang tidak berurutan.

gambar 2

saya rasa cukup jelas dengan penjelasan dari code html pada gambar 1 dan pada gambar 2 ini adalah hasil dari gambar 1 apabila di jalankan pada browser.

oke sampai di sini penjelasan kali ini karena tutorial pemograman nya secara bertahap jadi nantikan postingan" yang terbaru lagi di blog saya kuasai tekologi.

sekian dan terimakasih, jangan lupa langsung di praktikan.

Membuat Link Menggunakan HTML5

assalammu'alaikum wr.wb salam sejahtera bagi kita semua, postingan kali ini saya akan berbagi tutorial untuk membuat link menggunakan HTML, selanjutnya mari kita simak langkah" pembuatannya seperti berikut:

gambar 1

perhatikan gambar 1 di atas kode program di atas adalah kode setandar dari HTML dimana terdapat beberapa bagian/elemen HTML seperti, <html>, <head>, <title>, <body>, dan di akhiri dengan </html>.

• <html>  adalah awal kode dari HTML atau bisa di bilang sebagai pembukaannya
• <head> adalah tempat penampungan elemen yang terkandung di dalamnya seperti <link>,<meta>,<title> tetapi elemen yang di kandung di dalam head ersebut akan di bahas divlain waktu
• <title> adalah untuk mnampilkan judul dari coding yang anda buat
• <body> adalah bagian dari halaman web, jadi semua elemen yang di inputkan ke dalam body akan muncul di halaman web
• </html> adalah penutup dari kode HTML yang di awali dengan tanda /

kemudian di dalam body ada elemen 

• <hr/> untuk membuat garis horizontal/garis pembatas dari <hr /> lainnya
• <h1> artinya heding 1, heding ini berfungsi untuk memberikan judul yang ada di dalam body tersebut 
• <a href> adalah tempat penaruhan link yang kita inginkan.

apabila coding pada gambar satu di simpan bentuk html kemudian di jalankan di browser tampilannya akan muncul seperti berikut:

gambar 2

pada gambar 2 di atas sudah ada penjelasan yang di maksud dengan code" yang ada di gambar 1 bagian" dari elemen HTML tersebut

apabila link bagian blog di klik akan muncul ke link yang kita masukan tadi, pada gambar 1 saya memasukan link kuasai teknologi maka link tersebut akan muncul seperti ini apa bila sudah di klik:

gambar 3

begitupun link email juga apabila di klik akan lansung muncul email yang kita cantumkan pada pengelingan di gambar 1

mungkin sampe disini toutorial kita kali ini apabila ada kekurangan/kurang jelas silahkan lansung di komen dan apabila anda mengerti dengan penjelasan singkat yang ada pada di atas silahkan di peraktikan dan sampaikan keluhan anda di kolom komentar.

anda bisa juga simak video tutorial Membuat Link Menggunakan HTML di bawah ini:

sekian untuk toutorial kali ini See you again

Mengenal dan Tutorial HTML5 Dalam Bahasa Pemrograman

assalamualaikum wr.wb salam sejahtera bagi kita semua postingan kuasai teknologi kali ini kita akan membahas tentang HTML sperti yang kita ketahui HTML itu sangat luas tetapi kali ini kita akan mengambil poinnya aja supaya tidak terlalu membingungkan, oke lansung saja mari kita simak artikel di bawah ini.

Hypertext Markup Language (HTML) adalah sebuah bahasa untuk menampilkan konten di web. HTML sendiri adalah bahasa pemrograman yang bebas, artinya tidak dimiliki oleh siapa pun, pengembangannya dilakukan oleh banyak orang di banyak negara dan bisa dikatakan sebagai sebuah bahasa yang dikembangkan bersama-sama secara gelobal.

Sebuah dokumen HTML sendiri adalah dokumen teks yang dapat di edit oleh editor teks apapun. Dokumen HTML punya beberapa elemen yang di kelilingi oleh tag teks yang dimulai dengan tanda < dan berakhir dengan tanda > .

1. pengenalan

Dasar HTML dapat mencakup petunjuk untuk memformat dalam bahasa yang disebut cascading style sheets (CSS) dan program untuk interaksi dalam bahasa yang disebut JavaScrip. Halaman web yang biasa anda lihat ketika browsing di internet selalu ditulis menggunakan bahasa HTML tak peduli halaman web tersebut dibuat menggunakan berbagai bahasa seperti PHP, JSP, ASPX, atau Cold Fusion, hasil akhirya yang di tampilkan oleh browser tetap adalah HTML murni.

HTML awalnya hanya didesain sebagai bahasa untuk pertukaran dokumen teknis dan saintifik, karena itu HTML didesain secara sederhana, HTML menggunakan tag-tag yang dapat di pahami dengan mudah untuk membuat dokumen sederhana. Dalam waktu yang singkat HTML kini telah populer dan dikuasai banyak orang untuk membuat halaman web.

HTML adalah bahasa yang mengatur bagaimana tampilan isi dari situs web, di dalam html ada tag-tag dimana tag berfungsi menyediakan informasi berkaitan dengan sifat dan struktur konten serta refrensi untuk gambar dan media lainnya.

jadi dengan menggunakan HTML5, anda dapat membuat situs web canggih yang sangat interaktif, memang hingga saat ini tidak semua browser bisa memparsing dan menampilkan semua fitur, tetapi browser yang berbobot sudah bisa menampilkannya. Dan anda pun mulai bisa belajar HTML5, CSS, dan JavaScript dengan spesifikasi baru.

• Sruktur Dasar HTML

Elemen HTML dimulai dengan tag awal, yang diikuti dengan isi elemen dan tag akhir. Tag berakhir termasuk simbol / diikuti oleh tipe elemen misalnya </HEAD>. Sebuah elemen HTML dapat bersarang di dalam elemen lainnya. sebuah dokumen HTML standar terlihat seperti ini:

gambar 1

kode di atas penulis beri indentasi untuk membuat program bisa terbaca lebih jelas, tetapi HTML sebenarnya mengabaikan indentasi ini (sering juga dibuat spasi atau whitespace). jadi anda tidak wajib untuk anda membuat indentasi di kode anda sendiri.

Dokumen HTML sendiri terdiri dari unsur HTML di tandai dengan tag <html> awal dan di akhiri dengan tag html penutup berupa </html>. dokumen HTML biasanya memiliki HEAD dan elemen BODY. HEAD ini di dalamnya berisi judul atau <title>. judul nantinya muncul di bagian title bar dari browser.

ini adalah hasil dari kode program yang di atas pada saat di jalankan di browser:

gambar 2

jadi saya menyimpan di localhost dengan folder"html" dan nama filenya adalah "tombol.html". sperti yang kita lihat pada gambar browser di atas yang mempunya judul "ini judul dokumen html" sudah kita tulis di kode HTML pada gambar pertama dengan elemen <title> ini judul dokumen html </title>

selanjutnya elemen:

<body>

Teks ini adalah teks yang muncul di body dari dokumen

</body>

pada gambar pertama ada elemen body yang di tulis seperti yang di atas maksudnya di sini segala sesuatu yang di tulis di dalam elemen body, akan muncul di halaman web, sperti gambar pertama yang ada di dalam elemen body ketika di jalankan isinya akan muncul di halaman web seperti gambar yang ke dua.

oke bro sampe disini dulu pembahasan mengenai HTML, dan jangan lupa luangkan waktunya untuk mengunjungi blog saya kuasai teknologi masih banyak lagi artikel" tentang bahasa pemrograman yang akan di sampaikan di blog ini dan artikel" tentang bahasa pemrograman tersebut akan menyusul dan satu lagi toutorial berbentuk video juga akan segera menyusul di channel youtube saya dan jangan lupa juga untuk di subscribe.

sekian terimakasih.