Meetup #3
HTML + CSS
- Darimana memulai membuat website?
- Langkah awal menjadi web programmer, frontend developer atau web engineer
- Belajar bahasa markup dan desain
- Menjadi Frontend Developer
Dua kutub web developer
Apa itu developer web? Developer adalah orang yang membuat / mengembangkan sebuah aplikasi web. Baik perseorangan maupun team, dalam sebuah perusahaan komersil atau sebuah proyek open source.
Dalam dunia development, terjadi dua jenis developer:
- Backend Developer
- Frontend Developer
Masing-masing mempunyai tugas khusus dalam sebuah team kolaborasi saat proses development (pengembangan aplikasi sebelum direlease ke publik, ke customer dst)
Backend Developer
Backend developer (web developer) biasanya bertugas untuk membuat kode aplikasi yang berjalan di server.
Misalnya seorang programmer php (python, ruby, dsb) bisa dikatakan dia adalah seorang backend developer.
Tugas backend developer adalah untuk membuat logika, membuat alur pemrograman, membuat skema, mengambil informasi dari database, dan sebagainya.
Intinya adalah coding, coding coding. Lebih ke logika daripada desain.
Frontend Developer
Frontend developer biasanya berkutat dengan desain web dengan kode yang bekerja di web browser.
Tugasnya adalah membuat tampilan website. Selain menguasai program desain, keindahan desain, jg harus mengetahui dasar-dasar mendesain website.
Biasanya bahasa yang dikuasai seorang frontend develolper adalah HTML, CSS, dan javascript.
Intinya adalah desain!
Langkah pertama menjadi Web Developer?
Menjadi seorang developer web (baik menjadi back-end developer maupun frontend developer) harus menguasai dasar-dasarnya terlebih dahulu.
Darimana memulainya? hampir semua backend developer memulai langkahnya dengan menjadi frontend developer.
Jawabannya:
HTML + CSS
Sekilas mengenai HTML
HTML atau HyperText Markup Language adalah bahasa standar markup yang digunakan untuk membuat halaman web
Jadi HTML bukanlah sebuah bahasa pemrograman, melainkan bahasa markup (turunan dari XML).
Perjalanan HTML pertama kali pada tahun 1995, selama perjalanan banyak halaman web memakai versi beragam dari HTML, dari mulai 3.0, 4.1, XHTML.
Dan pada akhirnya organisasi W3 pada tahun 2011 meresmikan dan menyarankan semua praktisi web memakai HTML5 sebagai standar
Struktur Bahasa HTML
Element
HTML terdiri dari elemen-elemen, dan elemen dideklarasikan dengan cara menulis
-
tag pembuka
-
content / isi
- tag penutup
<p>ini isi tag</p>
Tag tanpa content disebut tag kosong (empty tag)
Contoh:
<br>
Nama dan jenis elemen yang tersedia untuk HTML5 mengikuti standar yang berlaku.
(bisa dilihat di dokumentasi, kita tinggal mencoba satu-satu ketika belajar)
Attribute
Setiap elemen mempunyai attribute, attribute adalah data tambahan untuk tag tersebut disimpan:
<namaelemen attribute="nilai" attribute2="nilai">isi</namaelemen>
Contoh:
<p id="test" class="penting">ini adalah paragraph</p>
Content / Isi
Isi dari elemen adalah berupa informasi yang bisa ditampilkan pada browser.
Content dari elemen berupa teks tetapi juga bisa berupa elemen lainnya, (nested) artinya seperti struktur pohon. contoh:
<div id="utama" align="center">
<p class="aku">ini isi text <a href="/a">test</a></p>
</div>
<head>
element head adalah tempat wadah bagi elemen-elemen yang berkaitan dengan metadata, atau data yang dibaca oleh browser, mesin pencari, dan sebagainya.
Misalnya, <title> adalah elemen yang digunakan untuk judul pada web browser.
Data-data lain misalnya, <meta>, <link>, <style>, <script> dan lain sebagainya
<body>
elemen body, adalah tempat presentasi informasi, baik berupa teks, atau gambar, atau tampilan yang dibuat menggunakan javascript berada, yang pada nantinya akan ditampilkan pada web browser.
Untuk referensi tag, bisa dilihat disini:
Fitur HTML5
Fitur-fitur baru yang ada di HTML5 :
Elemen baru
Attribute Baru
Mendukung CSS3
tag <video> (selamat tinggal flash)
tag <audio>
dan lain-lain lebih ke spesifik javascript
Sekilas mengenai CSS
CSS (Cascading Style Sheets) adalah bahasa style sheet, untuk menjelaskan format dan tampilan dari bahasa markup (HTML).
Penggunaan pertama kali sebagai cikal bakal css, adalah di NeXT Browser, browser yg digunakan oleh Tim Berners-Lee.
Versi CSS, berkembang mengikuti tuntutan tekhnologi dan desain web, sekarang mencapai versi 3. Sedangkan versi mendatang, CSS4 masih dirancang oleh komite w3c.
Desain Website dengan CSS
Seorang web designer, wajib mengerti kode-kode CSS. Mampu menerjemahkan desain yang masih berupa gambar dan mengubahnya dalam bentuk CSS, dan menerapkan kodenya ke dalam elemen HTML.
Perumpamaan dalam seni menggambar, jika HTML adalah sebuah sketsa kasar, maka CSS adalah warna, ukuran, proporsi, layout.
Hubungan HTML dan CSS
Dari kiri ke kanan:
HTML merupakan sketsa struktur. CSS merupakan style, proporsi, warna, garis, teks, layout, dsb
HTML merupakan sketsa struktur. CSS merupakan style, proporsi, warna, garis, teks, layout, dsb
Mengenal Selector
Selector digunakan untuk mendeklarasikan bagian mana yang akan diterapkan desain melalui kode css.
Selector dapat diterapkan pada:
-
Seluruh elemen html
dari html, body, div, p, h1, h2, h3, span, .... - dari attribute id dan class suatu elemen
#utama, #kiri, .birutua, p.merah, div#sidebar, ... - struktur
div > p, ul li a, div#satu > p.pertama, li:first-child, ..
3 Jenis CSS Style
Untuk mengubah dan mendesain tampilan dokumen html, ada 3 jenis cara, yaitu
Inline style:
<div style="font-size: 24px; color: #ff000">Aku div</div>
Embedded Style (ditempatkan pada head):
<style type="text/css">
p { color: #00f; }
</style>
<link rel="stylesheet" type="text/css" href="styles.css" />
Aturan penulisan CSS
Untuk melihat property, fungsi, pseudo-class, dll dari css bisa melihat lengkap di:
Fitur CSS3
Animasi
Efek Teks
2D dan 3D
Background dan Border
Dan lain-lain
Terima Kasih
Dipersembahkan bagi teman-teman yang mengikuti meetup #3 kali ini.
Semoga setiap bulan komunitas ini semakin solid.