Tidak Ada yang Tak Mungkin, Selama Mau Belajar

Jadilah Pelajar Handal Dalam Sekejap

Metode belajar teknologi informasi dari nol dengan kurikulum terstruktur dalam bahasa Indonesia

Apa Itu IT? Materi I
Frontend Materi II
Backend Materi III
FullStack Materi IV
Website Materi V
DevOps Materi VI
Data Analyst Materi VII
Data Scientist Materi VIII
Programer Materi IX
Game Development Materi X
Cyber Security Materi XI
Soal Project
100% Siap Untuk Menghadapi Kemajuan Dunia Digital
100% Mudah Dipahami, Asalkan Niat Dan tidak Putus Dijalan
99% Dunia kerja membutuhkan bidang ini
Coding Illustration

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:

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:

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:

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:

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

Tugas Utama Front-End

1.Menentukan : judul,Paragraf,Gambar,Form Login,Tabel,Layout Halaman.memakai HTML>

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?

Bagaimana Cara Kerja HTML?

Point Penting Untuk Dipahami

LATIHAN I

Apa Saja yang Harus Disiapkan?

Langkah Berikutnya

Apa Fungsi Dari Tag/Tagging HTML?

Struktur Dokumen

Format Text

Menyisipkan Media

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>

JARAK & SPASI TEKS
<p style="line-height:30px;">Jarak antar baris</p>
<p style="letter-spacing:3px;">Jarak antar huruf</p>
<p style="word-spacing:10px;">Jarak antar kata</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>

TEKS TEBAL MANUAL
<p style="font-weight:bold;">Tebal</p>
<p style="font-weight:normal;">Normal</p>
<p style="font-weight:lighter;">Tipis</p>

TEKS MIRING MANUAL
<p style="font-style:italic;">Miring</p>

GARIS PADA TEKS
<p style="text-decoration:underline;">Garis bawah</p>
<p style="text-decoration:line-through;">Coret</p>
<p style="text-decoration:overline;">Garis atas</p>

LATIHAN II

Mengatur Bagian Halaman Web Dasar tag(html,head,body,footer,h1,p dan div)

LATIHAN III

Menambahkan Tombol Button.

LATIHAN IV

Menambahkan Link.

LATIHAN V

Menambahkan Background Warna Dan Sedikit Jebakan.

LATIHAN VI

Menambahkan Penginputan,Kenapa Data Tidak Tersimpan,Error and Trial.

LATIHAN VII

Merapikan Tombol Button.

LATIHAN VIII

Membuat Tombol "Ijasah" Berfungsi,Dan Pemanggilan File Bergambar.

LATIHAN IX

Membuat Tombol "Ketrampilan" Berfungsi,Dan Membuat File Html Lain.

Latihan II




BIODATA



Profilku

				
Nama	 	:

				
Umur		:

				
Kelas	:

				
Alamat	:

		
Ijazahku

		
Ketrampilanku

		
Hobbyku

Latihan III




BIODATA


		
Profilku

				
Nama	 	:

				
Umur		:

				
Kelas	:

				
Alamat	:

Latihan IV




BIODATA


		
Profilku

				
Nama	 	:

				
Umur		:

				
Kelas	:

				
Alamat	:

		

		

		

		

			
		Facebook Saya

Latihan V




BIODATA




	
Profilku

	
Nama	 	:

	
Umur		:

	
Kelas	:

	
Alamat	:


	

	

	


	

		
		Facebook Saya
		
	






Web Ini Dibuat Oleh Doni Kelas 7A tahun 2026

Latihan VI




BIODATA




	
Profilku



	
Nama :
		
	


	
Umur :
		
	


	
Kelas :
		
	


	
Alamat :
		
	


	



	

	

	


	

		
		Facebook Saya
		
	






Web Ini Dibuat Oleh Doni Kelas 7A tahun 2026

Latihan VII




BIODATA




	
Profilku



	
Nama :
		
	


	
Umur :
		
	


	
Kelas :
		
	


	
Alamat :
		
	


	



	

	

		
			
		
		
			
		
		
			
		
	




	

		
		Facebook Saya
		
	






Web Ini Dibuat Oleh Doni Kelas 7A tahun 2026

Latihan VIII




BIODATA




	
Profilku



	
Nama :
		
	


	
Umur :
		
	


	
Kelas :
		
	


	
Alamat :
		
	


	



	

	

		
		
			
		
		
			
		
		
			
		
	




	

		
		Facebook Saya
		
	






Web Ini Dibuat Oleh Doni Kelas 7A tahun 2026

Latihan IX




BIODATA




	
Profilku



	
Nama :
		
	


	
Umur :
		
	


	
Kelas :
		
	


	
Alamat :
		
	


	



	

	

		
		
			
		
		
			
		
			
		
		
			
		
	




	

		
		Facebook Saya
		
	






Web Ini Dibuat Oleh Doni Kelas 7A tahun 2026

Latihan X




	Ketrampilanku




	
Daftar Ketrampilanku


	
    
		
  • Microsoft Word
    • 
		
  • Microsoft Excel
    • 
		
  • Menggambar
    • 
		
  • Editing Video
    • 
		
  • HTML Dasar
    •

Mengapa Belajar Sejak Hari Ini!?

Agar Siap Menghadapi Pesatnya Dunia Digital, Masih Belum Ada Kata Terlambat!

Gabung Komunitas Untuk Bertemu & Belajar Bersama

Belajar Bersama Dari Basic Hingga Menciptakan Sesuatu Yang Berguna

Gabung Komunitas!