Selamat datang di repositori tugas kuliah praktikum web Muhamad Subhi Adzani.
Pada kesempatan kali ini saya telah menyelesaikan tugas praktikum web dengan menyelesaikan berbagai kursus yang ada di website W3Schools, diantaranya yaitu.
- Tutorial HTML
- Tutorial CSS
- Tutorial Javascript
- Nama: Muhamad Subhi Adzani
- NIM: 230202017
- Kelas: TI-1A
Repositori ini berisi proyek-proyek yang dikembangkan dalam rangka memenuhi tugas praktikum web menggunakan HTML, CSS, dan JavaScript.
Tutorial Materi - HTML, CSS, dan JavaScript
Proyek ini bertujuan untuk memberikan pemahaman mendalam tentang dasar-dasar HTML, CSS, dan JavaScript melalui berbagai tutorial interaktif dari W3Schools
- HTML (Hypertext Markup Language):
- Pengenalan dasar HTML
- Struktur dasar HTML
- Tag-tag dasar HTML
- Penggunaan atribut dalam HTML
- CSS (Cascading Style Sheets):
- Pengenalan dasar CSS
- Selektor CSS
- Properti CSS umum
- Box model CSS
- JavaScript:
- Pengenalan dasar JavaScript
- Variabel dan tipe data
- Operasi dasar
- Struktur kontrol JavaScript
Tutorial HTML di W3Schools mencakup berbagai aspek penting dalam pengembangan web menggunakan HTML. Berikut adalah beberapa materi yang dicakup dalam tutorial tersebut:
- Pengenalan Dasar HTML: Materi ini membahas konsep dasar HTML, struktur dasar dokumen HTML, serta cara menulis kode HTML yang valid.
- Tag-tag Dasar HTML: Tutorial ini mencakup pengenalan dan penggunaan berbagai tag dasar HTML seperti <html>, <head>, <title>, <body>, <h1> hingga <h6>, <p>, <a>, <img>, <div>, dan lainnya.
- Penggunaan Atribut dalam HTML: Anda akan mempelajari tentang atribut HTML dan cara menggunakannya untuk menambahkan informasi tambahan atau mengatur perilaku elemen HTML.
- Formulir HTML: Materi ini mencakup pembuatan formulir HTML menggunakan tag <form>, serta berbagai elemen formulir seperti <input>, <select>, <textarea>, dan lainnya.
- Tabel HTML: Anda akan mempelajari cara membuat dan mengatur tabel dalam HTML menggunakan tag <table>, <tr>, <td>, <th>, dan lainnya.
- HTML Semantik: Tutorial ini membahas konsep HTML semantik dan bagaimana menggunakan elemen HTML semantik seperti <header>, <footer>, <nav>, <article>, <section>, dan lainnya untuk meningkatkan struktur dan aksesibilitas halaman web.
- Multimedia dalam HTML: Anda akan mempelajari cara menambahkan gambar, audio, dan video ke halaman web menggunakan tag <img>, <audio>, <video>, serta atribut-atribut terkait.
- HTML Styles dan Formatting: Materi ini membahas cara menambahkan gaya dan format ke halaman web menggunakan tag dan atribut HTML seperti <style>, <b>, <i>, <strong>, <em>, dan lainnya.
- HTML Layouts: Anda akan mempelajari berbagai teknik untuk membuat layout halaman web yang responsif dan menarik menggunakan tag dan properti CSS.
- HTML Responsive: Tutorial ini membahas strategi dan teknik untuk membuat halaman web yang responsif, yang dapat menyesuaikan tampilannya dengan baik di berbagai perangkat dan ukuran layar.
- HTML Computercode: Materi ini mencakup cara menampilkan kode komputer atau sintaks dalam halaman web menggunakan tag <code>, <pre>, dan <samp>.
- HTML Entities: Anda akan mempelajari tentang karakter khusus dalam HTML dan cara menampilkan mereka menggunakan HTML entities.
Tutorial ini juga dilengkapi dengan contoh kode yang jelas dan latihan-latihan interaktif untuk memastikan pemahaman yang baik. Dengan menguasai materi-materi ini, Anda akan memiliki dasar yang kuat dalam pengembangan web menggunakan HTML.
Tutorial CSS di W3Schools memberikan pemahaman mendalam tentang Cascading Style Sheets (CSS) yang diperlukan untuk mendesain dan memperindah tampilan halaman web. Berikut adalah beberapa materi yang dicakup dalam tutorial tersebut:
- Pengenalan Dasar CSS: Materi ini membahas konsep dasar CSS, termasuk aturan CSS, sintaks dasar, dan cara memasukkan CSS ke dalam halaman HTML.
- Selektor CSS: Tutorial ini mencakup berbagai jenis selektor CSS, termasuk selektor elemen, selektor kelas, selektor ID, selektor atribut, dan selektor pseudo-class. Anda juga akan mempelajari konsep grup dan warisan selektor.
- Properti CSS Umum: Anda akan mempelajari berbagai properti CSS yang umum digunakan untuk mengubah tampilan dan layout elemen HTML, seperti warna, font, ukuran, padding, margin, dan lainnya.
- Box Model CSS: Materi ini membahas konsep box model CSS, yang terdiri dari margin, border, padding, dan content. Anda akan memahami bagaimana elemen HTML dirender dalam bentuk kotak dan bagaimana memanipulasi kotak tersebut dengan CSS.
- Tata Letak CSS: Tutorial ini mencakup berbagai teknik untuk mengatur tata letak halaman web menggunakan CSS, termasuk tata letak grid, tata letak fleksibel (flexbox), dan tata letak responsif.
- Pemilihan Warna CSS: Anda akan mempelajari berbagai cara untuk menentukan warna dalam CSS, termasuk menggunakan nama warna, nilai heksadesimal, nilai RGB, dan nilai HSL.
- Animasi dan Transisi CSS: Materi ini membahas cara membuat animasi dan transisi halus dalam elemen HTML menggunakan CSS, termasuk penggunaan aturan @keyframes dan properti transisi.
- Transformasi CSS: Anda akan mempelajari tentang transformasi CSS, yang memungkinkan Anda untuk memindahkan, memutar, membesar, atau memiringkan elemen HTML.
- Responsif dan Media Query CSS: Tutorial ini membahas strategi dan teknik untuk membuat halaman web responsif menggunakan media query CSS, yang memungkinkan Anda mengatur tampilan halaman berdasarkan ukuran layar dan perangkat pengguna.
- Penggunaan Eksternal CSS: Anda akan mempelajari cara menggunakan file CSS eksternal untuk memisahkan gaya dari struktur HTML, sehingga memudahkan pemeliharaan dan pengembangan.
Tutorial ini dilengkapi dengan contoh kode yang jelas dan latihan-latihan interaktif untuk memastikan pemahaman yang baik. Dengan menguasai materi-materi ini, Anda akan memiliki keterampilan yang diperlukan untuk mendesain tampilan halaman web yang menarik dan responsif menggunakan CSS.
Tutorial JavaScript di W3Schools mencakup berbagai aspek penting dalam pengembangan web interaktif menggunakan JavaScript. Berikut adalah beberapa materi yang dicakup dalam tutorial tersebut:
- Pengenalan Dasar JavaScript: Materi ini membahas konsep dasar JavaScript, termasuk sintaks dasar, tipe data, variabel, dan cara menulis kode JavaScript yang valid.
- Variabel dan Tipe Data: Anda akan mempelajari berbagai jenis variabel dan tipe data dalam JavaScript, seperti string, number, boolean, array, dan objek.
- Operasi Dasar: Tutorial ini mencakup operasi dasar dalam JavaScript, termasuk operasi aritmatika, pembandingan, logika, dan penggunaan operator ternary.
- Struktur Kontrol JavaScript: Materi ini membahas struktur kontrol dalam JavaScript, seperti pernyataan if, else, switch, serta penggunaan perulangan for, while, dan do-while.
- Fungsi JavaScript: Anda akan mempelajari cara mendefinisikan dan menggunakan fungsi dalam JavaScript, serta konsep parameter dan return value.
- Manipulasi DOM: Tutorial ini mencakup cara mengakses dan memanipulasi elemen HTML menggunakan JavaScript melalui Document Object Model (DOM), termasuk pembacaan dan penulisan konten, manipulasi atribut, dan menangani event.
- Manipulasi String dan Array: Anda akan mempelajari berbagai metode yang tersedia untuk manipulasi string dan array dalam JavaScript, seperti menggabungkan, memotong, menyortir, dan mencari elemen.
- Pemrograman Obyek: Materi ini membahas konsep pemrograman obyek dalam JavaScript, termasuk pembuatan obyek, properti, dan metode, serta konsep warisan (inheritance) dan penggunaan obyek built-in seperti Math dan Date.
- Ekspresi Reguler: Tutorial ini membahas penggunaan ekspresi reguler (regular expressions) dalam JavaScript untuk pencocokan pola teks.
- Manipulasi Browser dan Cookie: Anda akan mempelajari cara mengontrol browser dan mengelola cookie menggunakan JavaScript, termasuk mengarahkan pengguna, mengubah URL, dan menyimpan informasi dalam cookie.
Tutorial ini disajikan dengan contoh kode yang jelas dan latihan-latihan interaktif untuk memastikan pemahaman yang baik. Dengan menguasai materi-materi ini, Anda akan memiliki kemampuan untuk mengembangkan aplikasi web yang interaktif dan dinamis menggunakan JavaScript.
- HTML:
- Bahasa markup yang digunakan untuk membuat struktur konten halaman web.
- CSS:
- Bahasa gaya yang digunakan untuk memperindah tampilan halaman web.
- JavaScript:
- Bahasa pemrograman yang digunakan untuk membuat halaman web interaktif.
- Anda tidak perlu menginstal apa pun untuk mempelajari HTML, CSS, dan JavaScript. Cukup buka browser web Anda dan akses tutorial di situs web w3schools.com.
Membangun dari Sumber:
- HTML:
- Gunakan teks editor seperti Notepad++ atau Visual Studio Code.
- Buat file baru dengan ekstensi .html.
- Tulis kode HTML Anda di dalamnya.
- Simpan file tersebut.
- CSS:
- Gunakan teks editor yang sama seperti untuk HTML.
- Buat file baru dengan ekstensi .css.
- Tulis kode CSS Anda di dalamnya.
- Simpan file tersebut.
- JavaScript:
- Sama seperti HTML dan CSS, gunakan teks editor.
- Buat file baru dengan ekstensi .js.
- Tulis kode JavaScript Anda di dalamnya.
- Simpan file tersebut.
Setelah mempelajari dasar-dasar, Anda dapat memperluas pengetahuan Anda dengan mencoba membangun halaman web yang lebih kompleks atau belajar tentang framework dan library yang berhubungan dengan HTML, CSS, dan JavaScript seperti Bootstrap, React, atau Vue.js.
- diperlukan untuk belajar HTML, CSS, dan JavaScript. lobih lanjut dikarenakan 3 bahasa pemrograman ini adalah dasar untuk mulai belajar menjadi seorang programer atau ahli IT, walaupun banyak sekali bahasa pemrograman yang lebih canggih dari HTML, CSS dan Javascript namun bahasa pemrograman ini masih sangat berguna dan belum di tinggalkan oleh orang orang dalam dunia industri.