PROGATE WEEK 3 - HTML DAN CSS

WHY WEB DEVELOPER IS BOOMING

Pada saat ini pengunaan website dan permintaan akan suatu website terus bertambah. menjadi hal biasa kita mengakses website setiap hari. mencari informasi mengikuti seminar atau acara online. dengan peningkatan pengunaan website maka tidak ada salahnya jika kita belajar untuk membuat website. meskipun tidak untuk dijual tapi untuk diri kita sendiri, sebagai contoh membuat website portofolio.

Website berisi halaman atau sekumpulan halaman yang saling terhubung berisi dengan informasi atau data yang disedikan oleh penyedia. Penyedia website bisa dari perorangan, kelompok atau organisasi. suatu website biasannya ditempatkan pada suatu webserver dan untuk mengaksesnya dibutuhkan jaringan yang menghubungkan sisi client dengan sisi server.

WEBSITE

Sebelum memulai pembelajaran mengenai website developer, ada baiknya mengenal website terlebih dahulu. Sebuah website ditulis dengan aturan html atau xhtml atau terkadang berisi dengan bahasa script untuk membantu website itu lebih hidup. Terdapat beberapa protokol dalam website, HTTP dan HTTPS. HTTP merupakan sebuah protokol permintaan-respons, dimana client akan melakukan permintaan kepada server dan akan dibalas dengan informasi atau data yang tersedia dalam server. Selanjutnya, HTTPS memiliki cara kerja yang hampir sama dengan HTTP. Namun, terdapat sebuah perbedaan yang melibatkan enkripsi TLS (Transport Layer Security) yang ditambahkan guna untuk meningkatkan keamanan jaringan .

Sebuah website juga dibagi menjadi 2 bagian berdasarkan cara pengubahannya. 2 bagian tersebut antara lain :
1. website statis adalah sekumpulan dokumen atau halaman yang hanya bisa dirubah secara manual. didalam web statis tidak tersedia database dan web server framework ( contoh: django, nodejs ). biasanya terdiri dari html, css dan javascript ( javascript hanya untuk tampilan saja ).
2. website dinamis adalah sekumpulan dokumen atau halaman yang bisa dengan mudah berubah dan bisa beroperasi sesuai dengan keinginan sang pembuat website. didalam sana ada local storage atau database untuk menyimpan data. dibangun dengan sistem yang complex ( contoh website dinamis: instagram, facebook)

WEB DEVELOPER

Jika sebelumnya, saya belajar tentang pengetahuan dasar mengenai web. Selanjutnya, terdapat sebuah pertanyaan orang yang membuat sebuah website disebut apa. Untuk menjawab pertanyaan tersebut, tentunya perlu mengenalkan tentang WEB DEVELOPER. Web Developer merupakan seorang programmer yang memiliki spesialisasi dalam pembangunan suatu Website atau Sistem Informasi.

Untuk macam tipe application yang dipakai pada seorang Website Developer ketika membuat sebuah Website atau SIstem Informasi antara lain:
1. HTML, CSS dan javascript biasannya ini dipakai sebagai application penampil document website
2. PHP,ASP, NET (C#), python, Node.js, Go atau Java adalah application yang dipakai untuk mengelolah cara Kerja website
3. Apache2 dan Nginx Berfungsi sebagai HTTP server. HTTP digunakan untuk menghubungkan client dan server

Ternyata Web Developer memiliki tiga macam class, yaitu Front-end web developer, Baclk-end web developer dan Full Stack web developer. Untuk penjelasannya dapat dijabarkan sebagai berikut :
1. Front-end web developer bertugas mengelola 'Graphical User Interface' dari website. Membuat User Interface dan User Experience yang bisa diterima oleh client.
2. Back-end web developer bertugas mengelola HTTP server dan database. Memastikan website bisa bekerja dengan baik.
3. Full stack web developer memiliki tugas untuk mengelola kedua bagian tersebut

 

HTML 

HTML ( HyperText Markup Language ) adalah suatu instruksi untuk menulis document agar bisa ditampilkan ke dalam web browser. web browser akan mengambil file HTML dari penyimpanan local dan akan diubah menjadi halaman website.

Fitur HTML:

1. Menulis text
2. Memberikan ukuran dan ketebalan kedalam text
3. Membuat table
4. memanbahkan gambar
5. Menambahkan Pranala ( lebih kita kenal dengan embedded link )
6. Menambahkan data suara
7. menambahkan Form yang dapat diisi

 

 Beberapa penjelasan mengenai gamabr di atas :

• <!doctype html> ini bukan HTML tag, dibutuhkan untuk memberi informasi kepada web browser tentang document apa ini.
• <html lang='en> Ini untuk membantu mesin pencari dan web browser dalam mengelola. Untuk informasi lebih banyak https://www.w3schools.com/tags/ref_language_codes.asp.
• <head> </head> data yang biasannya berada di dalamnya adalah title, css-source code, javascript-source code, 'META' data, data font style dan lain-lain.
• <body> </body> TAG ini digunakan untuk menyimpan informasi atau data sebelum di olah menjadi halaman website.
• <p> </p> TAG ini digunakan untuk menulis paragraph biasa didalam document.

CSS

Cascading Style Sheet (CSS) merupakan instruksi penulisan untuk mengatur tata letak dan penampilan document HTML. Dengan adannya Bantuan CSS sebagai pengelola tampilan dari document akan sangat mempermudah penulis menciptakan karyanya.

Beberapa Fitur CSS:

1. Mengubah warna text maupun background
2. Mengubah ukuran gambar atau text
3. Membuat animasi atau effect
4. Mengatur penempatan object
5. Memberikan border

Contoh code CSS

p { color: red; }

• p CSS akan mengambil object bernama 'p' dari HTML.
• color membuat fungsi untuk memilih warna. jika tidak ada 'color' maka warna yang dipakai adalah default.
• red memilih warna merah.

Ada tiga cara untuk menghubungkan CSS kedalam document HTML:

1. Inline Style Sheet Menulis code CSS tepat didalam object yang dituju. Contoh <p style='color:red;'> </p>
2. Embedded Style sheet Menulis code CSS didalam TAG HEAD. contoh:

<head>
<style>
p {color: 'red';}
</style>
</head>

3. External CSS Link menuju tempat penyimpanan CSS kita, ditulis didalam TAG ''. <link href='style.css' rel='stylesheet'>