100%Siap Untuk Menghadapi Kemajuan Dunia Digital,yang semakin pesat.
100%Mudah Dipahami, Asalkan Niat Dan tidak Putus Dijalan.
99%Dunia kerja membutuhkan bidang IT,dari web design,game dev,data,dan design.
Apa itu Information Technology (IT)?
Information Technology (IT) atau Teknologi Informasi adalah
teknologi yang mempelajari penggunaan komputer, jaringan, dan sistem
digital untuk mengolah, menyimpan, mengirim, dan mengamankan informasi.
IT tidak hanya soal komputer, tetapi juga mencakup:
Perangkat keras (hardware)
- Komponen fisik komputer seperti prosesor, RAM, harddisk
- Handphone, Tablet, Robotic System, Sensor dll.
Perangkat lunak (software)
- Program dan aplikasi yang berjalan di komputer, game, absensi dan data system, editor foto, video.
Jaringan komputer
- Sistem yang menghubungkan komputer untuk berbagi data.
Data dan informasi
- Konten yang diolah dan dikelola oleh sistem IT, database dan engine lain.
Keamanan sistem
- Proteksi terhadap data dan sistem dari ancaman, hacking atau cyber security
Hampir semua bidang kehidupan modern bergantung pada IT,
mulai dari pendidikan, kesehatan, bisnis, hingga hiburan.
Tanpa IT, dunia modern seperti yang kita kenal tidak akan berfungsi dengan baik.
Cara Manusia Memakai Komputer Dan Teknologi Untuk Mengolah Sebuah Informasi
IT = Komputer + Internet + Data + Software
Kenapa IT Itu Penting?
Karena sekarang Sekolah memakai Komputer, Kerja Memakai Laptop, Jualan Online,
Hiburan Online Membutuhkan Koneksi Internet,
Bahkan Toilet Mall Memakai Sensor, Robot AI semakin maju.
Gambaran Besar IT
IT itu kayak kota besar, bukan satu rumah doang.
di dalamnya ada banyak bidang / jenis.
Sejarah Singkat IT
Perkembangan IT tidak terjadi secara instan, tetapi melalui beberapa tahap penting:
1. Era Komputer Awal (1940–1960)
Komputer pertama berukuran sangat besar dan digunakan untuk
keperluan militer dan penelitian ilmiah.
Contohnya adalah ENIAC (Electronic Numerical Integrator and Computer)
yang beratnya mencapai 27 ton.
2. Era Komputer Personal (1970–1980)
Komputer mulai digunakan oleh masyarakat umum.
Muncul PC (Personal Computer) yang lebih kecil dan terjangkau.
Perusahaan seperti Apple dan Microsoft mulai berkembang.
3. Era Internet (1990–2000)
Internet mulai berkembang pesat.
Website, email, dan mesin pencari menjadi bagian dari kehidupan sehari-hari.
World Wide Web (WWW) ditemukan oleh Tim Berners-Lee.
4. Era Digital Modern (2000–sekarang)
Muncul smartphone, cloud computing, media sosial,
artificial intelligence (AI), dan big data.
Teknologi menjadi semakin terintegrasi dalam kehidupan sehari-hari.
Apa Saja Bidang IT?
Bidang IT Bisa Dikembangkan Dari logika Kita Berfikir.
Bidang-Bidang dalam IT
IT memiliki banyak cabang dan spesialisasi, umumnya:
Programming / Software Development - Membuat aplikasi dan sistem dengan bahasa pemrograman.
- paling sering dan umum menggunakan bahasa C/C++,Java,Phyton
Web Development - Membangun website dan aplikasi berbasis web.
- paling mudah dipahami menggunakan .html,css,javascript.
Mobile App Development - Mengembangkan aplikasi untuk smartphone.
- ummunya menggunakan java,flutter,java script
Networking - Merancang dan mengelola jaringan komputer.
- umumnya menggunakan java,bash,Python
Cyber Security - Melindungi sistem dan data dari serangan digital
Data Analyst & Data Scientist - Menganalisis data untuk pengambilan keputusan.
- mengerti excell dan power BI
Game Development - Membuat video game untuk berbagai platform.
- Bisa jg menjadi pembuat game Roblox yang menyediakan software dan mendapatkan hasil.
Artificial Intelligence - Mengembangkan sistem yang dapat belajar dan berpikir
Cloud Computing - Mengelola layanan komputasi melalui internet
Database Administration - Mengelola dan mengoptimalkan database.
- umumnya sql,MySQL
Tips Karir: Pilih bidang yang sesuai dengan minat dan bakat Anda.
Setiap bidang memiliki tantangan dan peluang yang berbeda.
Pengetahuan Umum tentang IT
Beberapa pengetahuan dasar yang wajib diketahui dalam IT:
Apa itu hardware dan software - Perbedaan dan hubungan antara keduanya
Sistem operasi - Windows, Linux, macOS, dan perannya dalam komputer
Jaringan dan internet - Cara kerja koneksi internet dan jaringan lokal
Keamanan data dan privasi - Cara melindungi informasi pribadi online
Logika dan algoritma dasar - Cara berpikir sistematis untuk memecahkan masalah
Database dasar - Konsep penyimpanan dan pengelolaan data
Dasar pemrograman - Memahami kode dan logika programming
Filosofi Belajar IT
Di dunia IT, belajar tidak pernah berhenti.
Teknologi selalu berkembang dengan cepat, sehingga kemampuan
belajar mandiri dan beradaptasi sangat penting.
Prinsip penting dalam belajar IT:
Learning by doing - Belajar dengan praktik langsung
Problem solving mindset - Fokus pada penyelesaian masalah
Continuous learning - Selalu update dengan teknologi terbaru
Collaboration - Bekerja sama dengan komunitas dan tim
Documentation - Membuat catatan dan dokumentasi yang baik
Dasar Pemahaman Front-End
Secara Dasar Front-End Dibagi Menjadi Beberapa Tahap Materi
Apa Sih Front-End?
Front-End adalah bagian dari website atau aplikasi web yang
langsung dilihat dan digunakan oleh pengguna.
Semua yang tampil di layar seperti teks, gambar, tombol, warna,
animasi, dan interaksi termasuk ke dalam Front-End.
Seorang Front-End Developer bertugas membuat tampilan website
agar menarik, mudah digunakan, dan responsif.
Front-End Bekerja Dimana?
Front-End Berjalan di Browser (Chrome,Firefox,dll),HP (Mobile View/mobile Browser),Client Side (Bukan Server)
Front-End tidak mengatur database,tidak menyimpan data server langsung,tapi mengirim data dan menerima dari backend
2.Mengatur tampilan dan design Mengatur :Warna,Font,Ukuran,Posisi Element,Responsive (HP/Laptop).
3.Mengatur Interaksi User Contoh: a.tombol di klik muncul popup b.form diisi dan validasi c.scroll dan aanimasi berjalan d.data muncul tanpa reload Menggunakan CSS.
Komunikasi Ke Back-End
Mengirim data login,Ambil Data postingan,Ambil data product,Menggunakan fetch,axios,API(JSON)
Optimasi User Experience (UX)
Front-End Juga memikirkan : Loading cepat,Animasi halus,Mudah dipakai,error jelas ke user.
Bahasa & Teknology Front-End
Bahasa dasar wajib yang harus dipahami oleh front-end adalah HTML,CSS dan JS.
Apa Itu Internet?
Internet adalah jaringan global yang menghubungkan jutaan hingga milliaran komputer
dan perangkat di seluruh dunia. Website yang kita buka sebenarnya berada di
server, lalu dikirim ke browser kita melalui internet.
Internet bukan satu server, bukan satu negara, dan tidak dimiliki satu orang.
Internet isinya apa aja?,internet memungkinkan untuk:
Kirim data (teks,gambar,video)
Akses website
email
chat
streaming
game online
cloud
Ai
Semua itu berjalan di atas infrastrucktur Internet
Sejarah Internet
Era Sebelum Internet (1950-1960)
Kondisi Perang Dingin AS dan UniSoviet
Takut Serangan Nuklir
Sistem komunikasi Masih Terpusat
Masalah yang Terjadi kalau Pusat komunikasi Hancur= Semua Mati
Lahirnya ARPANET tahun (1969)
Siapa ARPA? ARPA (Advanced Research Projects Agency) → Departemen Pertahanan AS.
Tujuan ARPA? Membuat jaringan komunikasi tahan serangan nuklir.
💡 Solusi:
Jaringan tidak terpusat
Jika satu node mati, data cari jalan lain
📌 Nama proyek: ARPANET
📌 Tahun: 1969
📌 Node awal: 4 universitas
➡️ Inilah cikal bakal internet
TCP/IP – BAHASA INTERNET (1970–1983)
Siapa pencipta?
Vint Cerf
Bob Kahn
Mereka menciptakan:
TCP (Transmission Control Protocol)
IP (Internet Protocol)
📌 Tahun resmi dipakai: 1 Januari 1983
➡️ Hari lahir internet modern
TCP/IP membuat:
Semua jaringan berbeda bisa saling ngobrol.
Standar global lahir
INTERNET JADI PUBLIK (1980–1990)
Awalnya Internet Hanya digunakan untuk kalangan Militer.
Kemudian Dipakai Untuk meneliti
Dipakai untuk kampus
Dan Akhirnya Dipakai untuk Umum.
WWW (WORLD WIDE WEB) – REVOLUSI BESAR (1990)
Siapa?
Tim Berners-Lee
CERN, Swiss
Dia menciptakan: HTML HTTP URL
Browser web pertama
📌 Inilah alasan internet jadi:
Mudah diakses
Visual
Bisa klik-klik
⚠️ Penting:
Internet ≠ World Wide Web
Web hanyalah salah satu layanan di internet.
INTERNET MODERN (2000–SEKARANG)
Perkembangan :
Broadband
Wifi
Smartphone
Cloud
Media Sosial
AI
Sekarang INTERNET = Tulang Punggung Dunia Digital.
BAGAIMANA INTERNET BEKERJA
Disaat Kamu Membuka website maka:
Browser meminta alamat (DNS)
IP Ditemukan
Data dikirim via TCP/IP
Server Membalas
Browser render HTML,CSS,JS.
Semua terjadi dalam hitungan detik.
Apa Itu HTML?
HTML (HyperText Markup Language) adalah bahasa markup standar untuk membuat struktur dasar dan konten halaman web, seperti teks, gambar, dan tautan, menggunakan tag seperti <h1> untuk judul atau <p> untuk paragraf agar bisa dibaca dan ditampilkan oleh browser. HTML berfungsi seperti kerangka bangunan, mendefinisikan elemen-elemen utama, menjadikannya fondasi dari hampir semua situs web, dikelola oleh W3C (World Wide Web Consortium).
Apa Fungsi Utama HTML?
Struktur Konten: Menentukan bagian-bagian halaman seperti header, footer, artikel, dan navigasi.
Menampilkan Elemen: Menyisipkan teks, gambar <img>, tautan <a>, video, dan tabel.
Kerangka Dasar: Memberikan struktur logis pada halaman, di mana tag <head> berisi informasi meta dan <body> berisi konten yang terlihat pengguna.
Bagaimana Cara Kerja HTML?
Ditulis dalam Editor Teks: Kode HTML ditulis menggunakan tag (misalnya <p>Ini paragraf</p>) atau menggunakan VS Code
Disimpan sebagai .html: File disimpan dengan ekstensi .html atau .htm.
Dibuka di Browser: Browser (Chrome, Firefox) membaca file HTML dan "merender" atau menampilkan kode tersebut menjadi halaman web yang bisa dilihat.
Point Penting Untuk Dipahami
HTML adalah bahasa markup, bukan pemrograman, karena tidak memiliki logika dinamis seperti bahasa lain (misalnya JavaScript,C++ dll).
Mudah Dipelajari: Sifatnya open-source dan mudah diintegrasikan, sehingga ideal untuk pemula.
LATIHAN I
Apa Saja yang Harus Disiapkan?
Komputer,Laptop Dengan Spesifikasi Layak Pakai.
Internet
Memiliki Browser Di Dalam PC
Mempunyai Notepad
Instal VS Code (Bertahap)
Minat Dan Rasa Ingin Tahu
Langkah Berikutnya
Buat Folder Dengan Nama "Belajar_Doni_7A"
Di dalam Folder,Buat New text beri nama menjadi indext.txt
Di dalam index.txt,Buka dan Tuliskan
<DOCTYPE html> (ini berfungsi untuk memberi tahu browser bahwa ini document HTML
<html lang="id"> (ini berfungsi sebagai pembungkus isi website) ditutup dengan </html>
<head> dan tutup </head> (Bagian kepala: pengaturan, bukan isi tampilan)
Enter Bagian Head Agar Rapi dan ketik <meta charset="UTF-8"> (Biar huruf Indonesia aman: é, à, dll)
<title>Profil</title> (Judul Di Tab Browser)
<body> dan tutup </body> (Semua Yang Tampil Di Layar User Ada Disini)
Enter Di Bagian Body Dan Ketik "Belajar Web"
Ctrl S Atau Safe index.txt Masuk file Index.txt Dan Ubah Menjadi Index.html
Klik 2x Atau Jalankan Dengan Browser
Selamat Kamu Sudah Bisa Membuat Website Offline Pertamamu
Apa Fungsi Dari Tag/Tagging HTML?
Fungsi tag HTML adalah untuk memberi tahu peramban (browser) bagaimana cara menampilkan dan menyusun konten di halaman web, bertindak sebagai "kerangka" dengan mendefinisikan struktur (judul, paragraf, tabel, form), format (tebal, miring), serta menyisipkan media (gambar, video) dan tautan, sehingga halaman web menjadi terstruktur, fungsional, dan dapat diinteraksikan, bahkan mendukung optimasi mesin pencari (SEO).
Struktur Dokumen
Mengatur bagian-bagian halaman web seperti <html>, <head>, <body>, <h1> (judul), <p> (paragraf), <div> (bagian), <footer>, dan <header>.
Format Text
Mengubah tampilan teks, misalnya <strong> (tebal), <em> (miring), <sub>/<sup> (subskrip/superskrip).
Menyisipkan Media
Menampilkan konten visual seperti <img> (gambar).
Kamus HTML
HEADING (JUDUL)
<h1>Judul paling besar</h1>
<h2>Judul besar</h2>
<h3>Judul sedang</h3>
<h4>Judul kecil</h4>
<h5>Judul lebih kecil</h5>
<h6>Judul paling kecil</h6>
📌 Arti:
Digunakan untuk judul, bukan hiasan,
h1 hanya 1 kali pemakaian,idealnya (judul utama)
PARAGRAF & BARIS
<p>Ini paragraf</p>
<br>
<hr>
📌 Arti:
Tag Fungsi
<p> Paragraf
<br> Pindah baris
<hr> Garis pemisah
TEBAL, MIRING, GARIS
<b>Tebal</b>
<strong>Tebal penting</strong>
<i>Miring</i>
<em>Miring penekanan</em>
<u>Garis bawah</u>
<s>Teks dicoret</s>
📌 Catatan:
strong & em lebih baik secara standar,
b & i hanya visual
TULISAN KHUSUS
<mark>Teks disorot</mark>
<small>Teks kecil</small>
<sup>Pangkat</sup>
<sub>Index bawah</sub>
<code>Kode</code>
<pre>Teks tanpa berubah </pre>
📌 Contoh:
H<sub>2</sub>O
x<sup>2</sup>
WARNA TULISAN
<p style="color:#FF0000;">Merah</p>
<p style="color:#0000FF;">Biru</p>
<p style="color:#00FF00;">Hijau</p>
<p style="color:#000000;">Hitam</p>
<p style="color:#FFFFFF;">Putih</p>
UKURAN TULISAN
<p style="font-size:12px;">Kecil</p>
<p style="font-size:16px;">Normal</p>
<p style="font-size:24px;">Besar</p>
<p style="font-size:40px;">Sangat besar</p>
📌 px = ukuran pasti
JENIS FONT (TULISAN)
<p style="font-family:Arial;">Arial</p>
<p style="font-family:Verdana;">Verdana</p>
<p style="font-family:TimesNewRoman;">Times</p>
<p style="font-family:Courier;">Courier</p>
<p style="font-family:Georgia;">Georgia</p>
POSISI & ARAH TULISAN
<p style="text-align:left;">Kiri</p>
<p style="text-align:center;">Tengah</p>
<p style="text-align:right;">Kanan</p>
<p style="text-align:justify;">Rata kiri kanan</p>
HURUF BESAR / KECIL
<p style="text-transform:uppercase;">huruf besar</p>
<p style="text-transform:lowercase;">HURUF KECIL</p>
<p style="text-transform:capitalize;">huruf awal besar</p>
CSS adalah singkatan dari Cascading Style Sheets.
CSS digunakan untuk mengatur tampilan website, seperti:
Warna
Ukuran
Posisi
Bentuk
Tata Letaj
Kalau HTML adalah Kerangka Rumah,maka CSS adalah cat,dekorasi dan tata ruang
Tanpa Css Wesite tetap bisa dibuka,tapi tampilannya jelek dan berantakan.
Sejarah CSS?
Dulu sebelum ada CSS:
Warna
Ukuran
Font
ditulis langsung di HTML → ribet & berantakan.
Tahun 1996, CSS diperkenalkan agar: HTML focus ke Struktur,Css Fokus ke tampilan,Ini Membuat Web jadi Rapi dan Profesional.
Perkembangan CSS
CSS adalah singkatan dari Cascading Style Sheets.
CSS digunakan untuk mengatur tampilan website, seperti:
Warna
Ukuran
Posisi
Bentuk
Tata Letaj
Kalau HTML adalah Kerangka Rumah,maka CSS adalah cat,dekorasi dan tata ruang
Tanpa Css Wesite tetap bisa dibuka,tapi tampilannya jelek dan berantakan.
CSS Berkembang menjadi CSS1,CSS2 dan CSS3 yang sekarang kita pakai
animasi
Responsive design
Layout Modern
Penulisan CSS
Cara Menulis CSS dibagi Menjadi 3:
Inline CSS
Apa Itu Inline CSS?
CSS Ditulis langsung di dalam tag HTML
Memakai Attribut Style=""
Paling Dasar,tapi tidak disarankan untuk proyek besar
