Selasa, 21 November 2017

Belajar bahasa pemrograman: HTML & CSS

https://theseosystem.com/wp-content/uploads/2015/01/html-css-validation-authority-sites.jpg



HTML (HyperText Markup Language)

            ↪  yaitu sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-lee Robert ketika mereka bekerja di CERN pada tahun 1989 (CERN adalah lembaga penelitian fisika energi tinggi di Jenewa).

Lalu, seperti apa wujud HTML itu?

Bagi kalian yang mungkin masih awam tentang dunia komputer khusunya dalam bahasa pemrograman, kalian pasti pernah denger yang namanya HTML kan tapi jujur saja ada beberapa dari kalian yang belum pernah melihat HTML itu seperti apa. Nah, semoga artikel ini cocok bagi kalian yang masih benar-benar awam dan sudah sedikit paham, jujur ane juga ga pandai bahasa pemrograman :v
Oke, semua halaman page yang sering kalian buka seperti facebook.com, twitter.com, instagram.com dan seterusnya, halaman itu semua ditampilkan dengan HTML. Jadi, bisa disimpulkan kalau HTML ini bahasa dasar untuk menampilkan halaman web pada web browser kalian.
Ga percaya? Mari kita buktikan :p

Coba kalian buka salah satu halaman web, terserah.. Oke, disini kita coba buka facebook.com, setelah terbuka klik kanan disembarang tempat, kemudian pilih opsi Inspect Element.
 

Maka akan muncul seperti ini:


Nah, kode-kode diatas adalah HTML Code milik facebook, terbukti kan?

 A. PENGENALAN TAG HTML

Seperti yang saya sebutkan sebelumnya, bahwa HTML adalah bahasa Markup, artinya
bahasa HTML hanya digunakan untuk me-markup suatu dokumen. Sebagai penyederhanaan kita analogikan dengan pembuatan dokumen di Microsoft Word atau aplikasi Word Processing lainnya. Ketika membuat sebuah dokumen Ms. word, biasanya kita melakukan formatting text seperti menebalkan, membuat miring, menggaris-bawahi tulisan, membuat judul atau bahkan list / daftar, dalam HTML proses ini kita sebut Markup proccessing. 
Contohnya untuk membuat format tulisan tebal kita bisa pakai tag <p> 
 <p>Ini adalah contoh menebalkan huruf dengan tag HTML</p> 

 <p> ... </p> kita sebut sebagai Tag HTML, perhatikan bahwa setiap tag HTML memiliki pasangan yaitu penutupnya atau closing tag.
 
 B. STRUKTUR FILE HTML

Semua file HTML memiliki aturan dalam penulisannya, ada beberapa tag yang harus kita tulis karena sudah menjadi ketentuan. Jika diperbaiki contoh kalimat yang kita buat tadi, hasilnya akan menjadi seperti ini ↓ ↓ ↓


 Eitsss, gausah bingung, biar ane jelasin hehe..

 <!DOCTYPE HTML> adalah tag awal dari semua file HTML, tag ini berfungsi untuk
memberi tahu browser bahwa file yang akan dimuat adalah file HTML. Tag ini wajib ada dalam setiap file HTML.

 <HTML> .. </HTML> awal dari isi sebuah dokumen dimulai disini, artinya semua kode HTML yang akan dibuat akan ditulis disini. Perlu dicermati bahwa kode ini harus lengkap, ada opening tag dan harus ada closing tag. 

 <head> .. </head> tag head ini digunakan untuk menyimpan informasi tentang dokumen HTML. Apa yang ada dalam tag ini tidak akan ditampilkan secara langsung oleh Browser.

 <title> .. </title> salah satu informasi yang ada pada tag head adalah title. Title akan menunjukan judul halaman pada tab browser kita.

 <body> .. </body> Nah, apa yang ingin kita tampilkan di browser akan ditulis pada tag ini, tag body itu sendiri merupakan pembuka dari badan dokumen HTML.

Gimana? Mudah bukan? :D

Dengan HTML kita juga bisa menyisipkan gambar yaitu dengan menambahkan atribut-atribut HTM, jika kita hendak memasukan gambar kita harus menulis: <img src="lokasi/alamat gambar.jpg"> 
Dengan HTML pula kita bisa membuat form seperti layaknya formulir ketika kita hendak mendaftar ke facebook, yahoo ataupun gmail. 

CSS (Cascading Style Sheets)
             ↪  adalah salah satu bahasa desain web (style sheet language) yang mengontrol format tampilan sebuah halaman web yang ditulis dengan menggunakan penanda(markup laguage. Biasanya CSS digunakan untuk mendesain sebuah halaman HTML dan XHTML, tetapi sekarang CSS bisa diaplikasikan untuk segala dokumen XML.

CSS berisi rangkaian instruksi yang menentukan bagiamana suatu text akan tertampil di halaman web. Perancangan desain text dapat dilakukan dengan mendefinisikan fonts (huruf) , colors (warna), margins (ukuran), latar belakang (background), ukuran font (font sizes) dan lain-lain. Elemen-elemen seperti colors (warna) , fonts (huruf), sizes (ukuran) dan spacing (jarak) disebut juga “styles”.  Cascading Style Sheets juga bisa berarti meletakkan styles yang berbeda pada layers (lapisan) yang berbeda. CSS terdiri dari style sheet yang memberitahukan browser bagaimana suatu dokumen akan disajikan.  Fitur-fitur baru pada halaman web lama dapat ditambahkan dengan bantuan style sheet.  Saat menggunakan CSS, Anda tidak perlu menulis font, color atau size pada setiap paragraf, atau pada setiap dokumen. Setelah Anda membuat sebuah style sheet, Anda dapat menyimpan kode tersebut sekali saja dan dapat kembali menggunakannya bila diperlukan.


Fungsi utama CSS adalah merancang, merubah, mendisain, membentuk halaman wesite(blog juga website). dan isi dari halaman website adalah tag-tag html, logikanya css itu dapat merubah tag-tag html(yang sederhana) sehingga menjadi lebih fungsional dan menarik.


Ane kira, ane belum cukup mahir buat jelasin semua, daripada capek nulis banyak dan ada yang keliru mending kalian bisa langsung download Ebooknya, di Ebook itu ada 140+ halaman, pokoknya lengkap banget deh :v ntar ane sediain link-nya.
Oke, sekian. 

Download Ebook bahasa HTML dan CSS




 

0 komentar:

Posting Komentar