Tips dasar belajar bahasa pemrograman HTML, CSS mudah dan lengkap

Tips dasar belajar bahasa pemrograman –  lagi niat belajar bahasa pemograman dasar HTML dan CSS ? perlu tips untuk belajar gimana cara belajar dengan baik dan benar ? Jika iya simaklah artikel ini dengan baik.. tapi jangan terlalu baik karna wanita tidak suka pria yang terlalu baik.. wkwkw..  ok langsung aja pembahasannya guys..

untuk belajar bahasa pemograman HTML dan CSS ini tidak ada jalan pintas guys, jadi harus belajar dari dasar-dasar nya, setalah paham dasar-dasarnya barulah kembali ke anda sendiri, jika anda pintar dan pemikiran logikanya bagus akan sangat cepat untuk mencapai expert dalam hal pemrograman, karena dalam hal pemrograman tidak hanya pintar saja tetapi harus mempunyai pemikiran logika yang baik, beda dengan cinta kadang-kadang tak ada logika..  jadi untuk bahasa pemoraman dasar yang wajib dikuasai adalah HTML dan CSS.

HTML sendiri adalah teknologi yang telah ada selama puluhan tahun dan terus dikembangkan. Saat ini versi HTML terakhir adalah HTML5. Agar lebih mengenal tentang HTML, Untuk menjalankan HTML, kita butuh web browser. Web browser adalah program yang akan menerjemahkan kode-kode HTML dan menampilkannya menjadi halaman website.

Saya yakin aplikasi web browser sudah terinstall di komputer anda, apakah itu Google Chrome atau Mozilla Firefox. Kedua web browser ini merupakan web browser terbaik untuk pengembangan web. Keduanya juga selalu mengikuti standar dan fitur terbaru HTML (selama anda rajin men-updatenya).
Selain Google Chrome dan Mozilla Firefox, masih terdapat web browser lain yang bisa digunakan,seperti Internet Explorer, Opera dan Apple Safari.

Walaupun tidak harus, saya menyarankan anda untuk menginstall kelima web browser ini.Tujuannya, untuk melihat bagaimana kode HTML yang kita buat ditampilkan pada masingmasing web browser.Untuk mendownload web browser ini, silahkan mengunjungi situs resminya di alamat berikut:

https://www.google.com/chrome/browser/
https://www.mozilla.org/en-US/firefox/new/
http://www.opera.com/download/
http://windows.microsoft.com/en-US/internet-explorer/download-ie
http://support.apple.com/kb/DL1531
 
Khusus untuk web browser Apple Safari for Windows, Apple telah lama tidak men-update web browsernya sehingga kemungkinan terdapat beberapa fitur yang belum didukung oleh web browser ini (Apple hanya mengupdate Safari untuk Mac OS dan iOS).

Web browser Internet Explorer (IE) juga sebaiknya tidak dipakai lagi dalam proses pengembangan web. Microsoft sendiri sudah meninggalkan IE dan menggantinya dengan Microsoft Edge6 yang menjadi web browser default Windows 10. IE hanya cocok untuk proses percobaan, yakni melihat seperti apa tampilan halaman web untuk web browser “jadul”.

Memilih Text Editor

Sebagaimana yang akan kita pelajari nanti, pada dasarnya file HTML hanyalah file teks biasa.
Untuk membuat kode HTML, kita bisa menggunakan aplikasi text editor. Text editor adalah aplikasi yang berfungsi untuk membuat dan mengedit file text.

Salah satu contoh text editor adalah aplikasi Notepad bawaan Windows. Namun Notepad ini kurang cocok digunakan untuk pemrograman. Terdapat banyak aplikasi text editor khusus pemrograman yang tersedia di internet dan mayoritas bisa didapat dengan gratis. Salah satunya adalah Notepad++, Atom, Sublime text dan lai-lain/

Baik langsung saja kami akan memberikankan tips-tips belajar dasar bahasa pemrograman HTML dan CSS :

• Niat dan target.

Niatkan ke dalam diri anda bahwa saya akan bisa menguasai ini dan berilah target misalnya dalam 1 bulan saya akan bisa menguasai html dan css, untuk menjadi tantangan kepada diri anda sendiri.

• Belajar dan mempraktekannya.

Tidak hanya baca kontennya atau melhat vidionya tapi WAJIB untuk mempraktekannya, karena dalam hal pemograman itu yang paling penting adalah pengalaman melakukan pengkodingannya, mencoba dan terus mencoba lalu tantangan mendapat eror dalam pengkodingan itu hal yang biasa, dalam melakukan koding itu eror adalah yang nantinya akan menjadi guru terbaik anda, karena anda harus berfikir dan bermain dengan logika pemrograman untuk membetulkan eror tersebut.

• Membuat web paling sederhana dengan HTML dan CSS.

Belajarlah membuat web sedehana dengan HTML dan CSS seperti contoh dibawah ini

Tutorialnya :  Membuat halaman web sederhana dengan HTML dan CSS lengkap dan mudah

Struktur Dasar HTML.

HTML(HyperText Markup Language) Adalah sebuah bahasa pemrograman dasar standar yang digunakan oleh browser Internet untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel. HTMLjuga dapat digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet. dibawah ini adalah struktur kode HTML.

Sobat bisa lihat dan edit langsung di halamannya, tetapi jika sobat ingin buat sendiri di komputer/laptop sendiri caranya copy kode diatas lalu paste kan ke notepad atau jika kalian mempunyai software browser untuk menulis koding seperti dreamweaver dan sublime text.

setelah dipastekan lalu simpan dengan merubah extention file menjadi contoh : belajarpemrograman.html setelah disimpan cari file tersebut di file manager anda lalu klik 2 kali, dan lihat hasilnya..

Pengertian Tag

Dari file belajarpemrograman.html yang telah kita jalankan diatas, tentunya anda sudah mengetahui bahwa file HTML ditulis dengan menggunakan tanda-tanda seperti <html>, <head>, <body>atau <p>. Tanda-tanda ini dikenal dengan sebutan HTML tag.

Tag di dalam HTML berfungsi untuk memberi tahu web browser apa dan bagaimana sebuah teks harus ditampilkan. Sebagaimana yang telah kita pelajari, file HTML hanyalah sebuah file text biasa. Web browser lah yang akan memproses file tersebut dan menampilkan hasilnya. Sebagian besar tag-tag HTML ditulis secara berpasangan, yang terdiri dari tag pembuka dan tag penutup. Tag pembuka ditulis menggunakan kurung siku, seperti <p>. Sedangkan tag penutup ditulis dengan menambahkan tanda garis miring atau slash seperti </p>.

Tanda p disini berarti paragraf, dimana kita memberitahukan kepada web browser bahwa seluruh teks yang berada diantara tag pembuka <p> dan tag penutup </p> adalah sebuah paragraf. Sebagai contoh, jika saya ingin membuat struktur teks yang terdiri dari 2 paragraf, maka saya menulisnya sebagai berikut:

<p>Ini adalah paragraf pertama</p>
<p>Ini adalah paragraf kedua </p>

Ketika web browser membaca kode diatas, teks diantara tag <p> dan tag </p> akan ditampilkan
sebagai paragraf yang terpisah.

Setiap tag memiliki fungsi dan peran masing-masing. Total, terdapat sekitar seratusan tag di dalam HTML. Walaupun HTML memiliki banyak tag, tidak semuanya harus digunakan. Sebagai contoh, tag <p> akan sangat sering kita jumpai, tetapi tag <wbr> relatif jarang ditemukan.

Dalam artikel ini saya akan membahas sebagian besar tag-tag yang ada di dalam HTML, namun kita akan fokus kepada tag-tag yang sering digunakan dan memiliki peran penting untuk membuat struktur halaman. Jadi, kita memiliki tag html lalu didalamnya terdapat tag head dan body.

Sebagai catatan, semua kode html harus ditulis didalam tag html. Lalu, tag head berfungsi untuk menyimpan informasi dari sebuah halaman misalnya title (Judul dari sebuah Halaman) dan meta (pengkodean karakter UFT-8). Sedangkan bagian tag body akan ditampilkan ke browser. Dan pada contoh diatas kita memasukan tag h1 dan p didalam tag body.

Nah, seperti yang anda lihat. Hampir semua setiap tag pembuka memiliki tag penutup (contoh: <h1> tulisan </h1>). Sebagai tips, tulislah html dengan jarak menonjol antar tag seperti contoh diatas..
Fungsinya: untuk memudahkan dalam melihat struktur html yang anda tulis.

Untuk lebih lengkap tentang pembahasan tag tag dasar HTML bisa baca artikel dibawah ini

 Baca juga : Kamus bahasa pemrograman dasar tag-tag HTML

Dan selanjutnya CSS. 

Apa itu CSS?

CSS adalah singkatan dari Cascading Style Sheet. Sebagaimana HTML, CSS bukanlah sebuah bahasa pemrograman, tetapi berupa kode-kode perintah sederhana dengan aturan penulisan tertentu.
CSS berfungsi untuk mengatur tampilan dari HTML. Jika HTML bertanggung jawab untuk membuat struktur halaman, maka CSS bertugas untuk ‘mewarnai’ halaman tersebut.

Cara Menggunakan CSS

Untuk menggunakan CSS, kita tinggal ‘menyisipkan’ kode tersebut ke dalam halaman HTML.
Terdapat 3 metode untuk menginput kode CSS:

• Inline CSS

Metode inline CSS akan menyisipkan kode CSS langsung ke dalam tag HTML. Ini dilakukan menggunakan atribut style.

• Internal CSS

Metode internal CSS dilakukan dengan menginput kode CSS pada bagian <head> dari sebuah halaman HTML. Kita menggunakan tag <style> untuk keperluan ini.

• External CSS

Metode external CSS adalah menginput file CSS pada bagian <head> dengan menggunakan tag <link>. Dengan cara ini, sebuah file CSS bisa digunakan oleh banyak halaman HTML.

Pengertian Selector, Property dan Value

Selector, Property dan Value merupakan struktur dasar dari CSS. Berikut adalah contoh
penulisan kode CSS yang melibatkan ketiganya:

p {
font-size: 14px;
color: blue;
}

Kode CSS diatas bertujuan untuk mengubah ukuran font menjadi 14 pixel dan berwarna biru
untuk tag <p>.

Sebuah kode CSS diawali dengan selector. Selector berfungsi untuk ‘memilih’ tag atau bagian
mana dari halaman HTML yang ingin diubah tampilannya (yang akan di-style). Pada contoh
diatas ‘p’ berfungsi sebagai selector.

Dalam CSS terdapat banyak jenis-jenis selector. Selector paling sederhana adalah tag selector
atau element selector, dimana kita menulis jenis tag apa yang akan di-style (tag ditulis tanpa
kurung siku). Sehingga jika saya ingin men-style tag <p>, maka tinggal menulis: p, apabila ingin
men-style tag <h1>, maka tinggal menulis: h1.

Setelah selector, penulisan berikutnya adalah property beserta nilai-nya. Di dalam CSS, Property
adalah ‘sesuatu’ yang bisa diubah tampilannya, seperti jenis tulisan, besar huruf, warna
huruf, lebar tabel, tinggi kolom, dll. Terdapat ratusan property di dalam CSS. Mayoritas property
bersifat global (bisa digunakan pada selector apa saja), dan sebagian lagi hanya bisa digunakan
untuk selector tertentu.

Dalam contoh diatas, font-size dan color adalah property. font-size digunakan untuk mengatur
ukuran teks dan color digunakan untuk mengatur warna dari teks tersebut. Untuk memberikan nilai kepada property tersebut, kita menggunakan tanda titik dua ‘ : ’ dan kemudian diikuti dengan nilainya. Pada contoh diatas, jika saya ingin mengubah ukuran teks menjadi 14 pixel, maka penulisannya menjadi: font-size: 14px. Setiap pasangan property dan nilai CSS diakhiri dengan tanda titik koma ‘ ; ’, dan seluruh pendeklarasian property harus berada di dalam kurung kurawal: ‘ { ’ dan ‘ } ’.

Contoh penggunaan Internal CSS

Setelah memahami aturan dasar penulisan CSS, mari kita lihat bagaimana cara penggunaannya.
Kita akan membahas terlebih dahulu cara menggunakan metode internal CSS, yakni menempatkan
kode CSS pada bagian <head> dengan menggunakan tag <style>. Berikut contoh kode
programnya:

Untuk penjelasannya, kodingan CSS nya itu berada di dalam tag <style>, lalu coba jalankan di browser dan lihat perbedaannya dari yang hanya HTML dan yang menggunakan CSS. Perhatikan bagaimana setiap CSS mempengaruhi elemen-elemen yang bersangkutan pada gambar Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS.

Teks pada elemen h1 berubah menjadi warna merah karena CSS yang berada pada bagian atas dokumen, Yang juga perlu diingat, cara terbaik dalam mereferensikan CSS ialah dengan referensi ke file eksternal. Cara ini memungkinkan kita hanya menggunakan satu file CSS untuk seluruh web yang dikembangkan. Perubahan desain juga dapat dilakukan dengan mudah, hanya mengubah satu buah file saja. Untuk lebih detailnya tentang CSS, bisa kunjungi artikel dibawah ini.

Baca juga : Kamus bahasa pemrograman dasar CSS lengkap dan mudah

Kesimpulan

Jadi kesimpulannya untuk bisa menjadi seorang programer adalah tidak malas untuk praktek, belajarlah dengan mempraktekannya langsung sedikit demi sedikit dan pahami logikanya, pahami cara kerjanya buatlah web sistem yang menantang jika sudah paham dasar-dasarnya.

Untuk tutorial belajar HTML bisa kunjungi artikel dibawah ini lengkap dengan vidionya :