PWEBTUGAS01_Membuat CV-Website Menggunakan HTML, CSS dan JS.
Apa itu Website?
Website adalah laman-laman web yang terdiri dari konten berupa teks, media, maupun aplikasi yang dikenali atau diakses secara global melalui browser dengan nama domain dan disimpan pada sebuah web server.
(referensi : "Website - Wikipedia")
Apa itu Domain dan Server?
Domain adalah alamat suatu website yang aksesibel secara global. Awal mulanya domain website adalah berupa IP-address namun seiring perkembangan teknologi dan dalam rangka menyederhanakan dan mempermudah manusia untuk mengingat maka IP-address tersebut digantikan oleh domain berupa string yang memiliki struktur khusus seperti yang diulas oleh gambar berikut.
Lalu Apa Relasi Domain dengan Server?
source : google.com
Pada gambar tersebut dapat kita simpulkan bahwa; agar rumah kita dapat dikenali oleh pengguna internet di dunia maka kita harus memiliki alamat yang dapat diakses/dikenali. Server adalah lahan dimana dengan hosting kita dapat menyewa lahan di jejaring internet agar website kita dapat dibangun dan mendapatkan alamat. Hosting sendiri adalah pemilik server dan jasa yang menyediakan layanan maintenance website beserta penyedia sumber daya website di internet.
Jadi..
Karena sudah membahas sedikit tentang website maka pada kali ini kita akan mengimplementasikan pembuatan website dari perakitan hingga deployment-nya ke internet hingga aksesibel untuk semua pengguna internet.
MEMBUAT WEBSITE PRIBADI SEDERHANA
----------------------------------------------------------------------------------
Pada kali ini saya membuat website pribadi sederhana dengan menerapkan HTML,CSS, JS dan JS-CSS framework bernama Materializecss. Untuk menginisiasi project alangkah baiknya kita modularisasi source-code agar terstruktur dan mudah diakses. Adapun modularisasi file pada direktori adalah direpresentasikan oleh gambar berikut :
analogi dari HTML, CSS dan JS adalah seperti tubuh manusia dengan skenario sebagai berikut;
HTML diibaratkan sebagai kerangka-tulang. CSS diibaratkan sebagai kulit yang membungkus badan dari tulang-tulang tersebut. dan JAVASCRIPT diibaratkan menjadi otot dan komponen yang menggerakkan tulang-tulang yang statis. Tanpa HTML website tidak bisa dijalankan. Tanpa CSS tampilan website akan terlihat hambar. dan Tanpa Javascript fitur-fitur website tidak akan berfungsi.
BREAK-DOWN ON HTML
Seperti yang nampak pada tampilan di atas kita dapat mengetahui bahwa syntax pada html dibuka dan ditutup oleh tag. terdapat tag-tag yang berbeda dengan tujuan yang berbeda pula. umumnya pada file html terdapat tag html, body dan head. Konten yang akan terlihat pada website akan ditulis dalam tag body dan tag head biasanya digunakan untuk mendefinisikan file-file yang berhubungan dengan file html dan resources yang diimpor seperti font, script files, dan lain-lain.
tag link dapat digunakan untuk menghubungkan file CSS. tag script adalah tag khusus yang menghubungkan file dengan javascript.
memberikan class atau id pada komponen html dapat mempermudah kita dalam melakukan styling di CSS.
dokumentasi fungsionalitas tag dapat diakses secara penuh di : HTML Tutorial (w3schools.com)
BREAK-DOWN ON CSS
Pada CSS syntax yang digunakan jelas juga berbeda dengan HTML yang sebelumnya. CSS berfokus pada styling komponen-komponen dalam website dengan cara mendefinisikan style komponen tersebut dengan selector yang berbeda-beda menyesuaikan dengan komponen apa yang akan diberi styling. Selector pada CSS banyak macamnya dapat berupa class, id, dll. Syntax CSS lain yang membuat mudah pekerjaan adalah variable defining di dalam bracket :root. Dimana pada field ini kita dapat mendefinisikan warna, shadow, dan nilai untuk atribut-atribut lainnya yang nantinya digunakan ketika mendefinisikan styling secara konstan.
BREAK-DOWN ON JAVASCRIPT
Pada javascript saya hanya menggunakan sedikit syntax untuk mengaktifkan carousel yang ada pada website yang diadaptasi dari js-css framework materializecss. Sebenarnya javascript ini tidak hanya selalu didefinisikan di dalam file khusus javascript. Terdapat pada source-code html embedded-javascript syntax yang juga mendefinisikan javascript yaitu pada "onclick".
BREAK-DOWN ON MATERIALIZECSS
Materializecss adalah css-(js) framework yang berfungsi untuk mempermudah dan mempercantik styling pada website dengan js dan css yang sudah teratur built-in pada framework tersebut. Terlebih lagi dengan fitur auto-fit media query agar tampilan website responsif dan aksesibel dengan media device yang digunakan user. Dapat digunakan secara umum dengan cara impor yang bermacam-macam. dapat diinisiasi dengan CDN link, npm install, maupun raw-download.
Dokumentasi Materializecss dapat diakses pada link berikut :
VIDEO & LINK DEMO
----------------------------------------------------------------------------------
Oleh : Tsania Az Zahra - 05111940000032 - PWEB_D
Comments
Post a Comment