Belajar Menjadi Web Designer Dengan HTML

Halo semuanya, kembali lagi di blog saya. Kali ini saya akan menceritakan sedikit tentang pengalaman PKL saya di ISTN, pada kali ini saya akan menceritakan hal-hal yang saya alami dan pelajari pada hari ke sembilan belas.

Perjalanan saya ke tempat PKL seperti biasa, saya berangkat pukul 07.20 bersama teman saya, yakni Daniel dan sampai di ISTN pada pukul 07.40 tanpa kendala. Setiba nya saya di tempat PKL kami langsung melaksanakan piket masing-masing. Kali ini saya menjadi PJ yang bertugas mengambil foto-foto.

Berikut foto-foto keseharian saya:

Setelah itu kami di beri pemaparan materi tentang HTML oleh pak Nico, untuk itu mungkin akan saya jelaskan sedikit tentang HTML.

XAMPP

XAMPP adalah paket perangkat lunak open-source yang menyediakan lingkungan web server lokal untuk keperluan pengembangan website/aplikasi web. Karena cross-platform maka bisa dijalankan di berbagai sistem operasi seperti Windows, macOS, Linux. Gunanya untuk menguji, mengembangkan, dan merancang website/aplikasi secara lokal sebelum di-deploy ke server produksi di internet.

Kelebihan XAMPP

Ada beberapa alasan mengapa XAMPP sangat populer di kalangan web developer maupun pelajar:

Gratis dan open source – XAMPP dapat digunakan tanpa biaya lisensi.
Mudah diinstal – semua komponen web server sudah terintegrasi dalam satu paket.
Bisa digunakan offline – cocok untuk belajar atau uji coba tanpa perlu internet.
Cross-platform – mendukung berbagai sistem operasi.
Komponen lengkap – sudah termasuk phpMyAdmin, server FTP, hingga modul tambahan.
Cocok untuk pemula – ideal untuk belajar pemrograman web dan membuat prototype aplikasi.

Kekurangan XAMPP

Selain memiliki banyak kelebihan, XAMPP juga memiliki beberapa kekurangan yang perlu diketahui:

Kurang cocok untuk skala besar – performanya terbatas jika digunakan untuk server produksi dengan traffic tinggi.
Keamanan bawaan rendah – konfigurasi awal XAMPP lebih ditujukan untuk kemudahan, bukan keamanan, sehingga tidak aman jika langsung digunakan di server publik.
Konfigurasi lanjutan lebih rumit – jika ingin melakukan pengaturan tertentu, butuh pengetahuan tambahan.
Membutuhkan resource komputer – bisa cukup berat dijalankan di perangkat dengan spesifikasi rendah.
Tidak sepenuhnya sama dengan server produksi – konfigurasi default di XAMPP tidak selalu identik dengan server hosting nyata.

Kesimpulan

XAMPP adalah solusi praktis bagi siapa saja yang ingin belajar membuat website atau mengembangkan aplikasi berbasis web. Kelebihannya adalah mudah digunakan, gratis, dan lengkap. Namun, XAMPP kurang cocok dipakai untuk server skala besar atau produksi karena faktor keamanan dan performa. Jadi, XAMPP lebih ideal digunakan sebagai media pembelajaran, percobaan, dan pengembangan awal sebelum aplikasi benar-benar dirilis ke server hosting online.

HTML

Jadi, HTML itu singkatan dari HyperText Markup Language. Ini adalah bahasa standar yang dipakai untuk membuat dan menyusun halaman web. Anggap saja HTML ini seperti kerangka atau fondasi dari sebuah bangunan. Dia yang menentukan struktur konten di sebuah website, misalnya mana yang jadi judul, mana yang jadi paragraf, di mana harus meletakkan gambar, dan sebagainya. HTML menggunakan elemen-elemen yang ditandai dengan "tag" untuk mengatur semua itu. Tanpa HTML, browser tidak akan tahu cara menampilkan teks atau elemen lain di halaman web.

Setelah dijelaskan konsep dasarnya, kami langsung diberikan contoh kode lengkap untuk membuat halaman profil pribadi. Kodenya lumayan panjang karena tidak hanya berisi HTML untuk struktur, tapi juga CSS untuk mempercantik tampilan (seperti warna, layout, dan font), bahkan ada sedikit JavaScript untuk membuatnya interaktif (seperti tombol dark mode dan notifikasi).

Berikut adalah kode yang kami pelajari:

<!DOCTYPE html>

<head>

<title>Institut Sains dan Teknologi Nasional</title>

</head>

<body>

<a href="#"><em>ISTN</em> Official</a>

</div>

<li><a href="#section1">Beranda</a></li>

<li class="has-submenu"><a href="#section2">Tentang Kami</a>

<li><a href="#section2">Profil ISTN</a></li>

<li><a href="#section3">Sejarah</a></li>

</ul>

</li>

<li><a href="#section4">Program Studi</a></li>

<li><a href="#section5">Video Profil</a></li>

<li><a href="#section6">Kontak</a></li>

</ul>

</nav>

</header>

</video>

<h6>Institut Sains dan Teknologi Nasional</h6>

<h2><em>Kampus</em> Unggul & Inovatif</h2>

<div class="scroll-to-section"><a href="#section2">Selengkapnya</a></div>

</div>

</section>

<h4><i class="fa fa-pencil"></i>Program Studi</h4>

</div>

<p>ISTN memiliki berbagai program studi unggulan di bidang sains, teknologi, dan manajemen.</p>

<div class="scroll-to-section"><a href="#section4">Lihat Prodi</a></div>

</div>

<h4><i class="fa fa-graduation-cap"></i>Kampus Modern</h4>

</div>

<p>Fasilitas modern untuk menunjang proses pembelajaran berbasis teknologi.</p>

<div class="scroll-to-section"><a href="#section2">Detail</a></div>

</div>

<h4><i class="fa fa-book"></i>Kegiatan Akademik</h4>

</div>

<p>Seminar, penelitian, pengabdian masyarakat, hingga kegiatan kemahasiswaan aktif di ISTN.</p>

<div class="scroll-to-section"><a href="#section3">Selengkapnya</a></div>

</div>

</section>

<h2>Mengapa memilih ISTN?</h2>

</div>

<ul>

<li><a href='#tabs-2'>Sejarah</a></li>

<li><a href='#tabs-3'>Akreditasi</a></li>

</ul>

</div>

<p>Menjadi perguruan tinggi unggul di bidang sains dan teknologi yang berwawasan global.</p>

<p>Menyelenggarakan pendidikan, penelitian, dan pengabdian masyarakat yang berkualitas untuk mencetak lulusan kompeten.</p>

</div>

</article>

</div>

<h4>Sejarah ISTN</h4>

<p>ISTN didirikan pada tahun 1950-an sebagai salah satu perguruan tinggi teknik swasta tertua di Indonesia.</p>

</div>

</article>

</div>

<h4>Akreditasi</h4>

<p>Program studi di ISTN telah terakreditasi oleh BAN-PT, menjamin mutu dan kualitas pendidikan.</p>

</div>

</article>

</section>

</div>

</section>

<span>Video Profil ISTN</span>

<h4>Tonton untuk mengenal lebih dekat <em>ISTN</em></h4>

<p>Institut Sains dan Teknologi Nasional berkomitmen mencetak lulusan yang unggul, inovatif, dan berdaya saing global.</p>

</div>

<h4>Profil ISTN</h4>

</div>

</a>

</figure>

</article>

</div>

</section>

<h2>Hubungi Kami</h2>

</div>

</fieldset>

</div>

</fieldset>

</div>

</fieldset>

</div>

<button type="submit" class="button">Kirim Pesan</button>

</fieldset>

</div>

</form>

</div>

width="100%" height="422px" frameborder="0" style="border:0" allowfullscreen></iframe>

</div>

</section>

<p><i class="fa fa-copyright"></i> 2025 Institut Sains dan Teknologi Nasional | Design: TemplateMo</p>

</div>

</footer>

</body>

</html>

Berikut hasil dari saya:

Baik, segitu saja materi saya untuk hari ini. Terimakasih kepada para pembaca yang telah menyempatkan waktunya membaca blog saya. Mohon maaf apabila ada salah kata dan kurangnya penjelasan. saya pamit undur diri sampai bertemu di blog saya yang lainnya.

Azash.

Mustafidh Rafan Ahyan

Search This Blog