Langsung ke konten utama

CARA MEMBUAT FILE HTML SEDERHANA UNTUK PEMULA

 CARA MEMBUAT FILE HTML SEDERHANA UNTUK PEMULA


Oleh: Dwi Agus Saputro


---


Apa itu HTML?


HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat struktur halaman web. HTML bukanlah bahasa pemrograman, melainkan bahasa markup yang digunakan untuk menandai elemen-elemen pada sebuah halaman web, seperti teks, gambar, video, link, dan lainnya.


Setiap halaman website yang Anda lihat di internet pada dasarnya adalah file HTML yang diakses melalui browser.


---


Cara Membuat File HTML


1. Siapkan Teks Editor


Anda bisa menggunakan:


· Notepad (Windows)

· TextEdit (Mac)

· Visual Studio Code (rekomendasi)

· Sublime Text

· Notepad++


2. Tulis Kode HTML Dasar


Buka teks editor, lalu tulis kode berikut:


```html

<!DOCTYPE html>

<html>

<head>

    <title>Halaman Pertama Saya</title>

</head>

<body>


    <h1>Selamat Datang di Blog Saya</h1>

    <p>Ini adalah contoh file HTML sederhana.</p>

    <p>Belajar HTML itu mudah dan menyenangkan!</p>


</body>

</html>

```


3. Simpan File dengan Ekstensi .html


· Klik File → Save As.

· Beri nama file, misalnya: index.html

· Pada bagian "Save as type", pilih "All Files" (agar tidak tersimpan sebagai .txt).

· Pilih folder penyimpanan (misalnya di Desktop).

· Klik Save.


4. Buka File di Browser


· Cari file index.html di folder penyimpanan.

· Klik dua kali file tersebut, maka akan terbuka otomatis di browser default Anda.

· Hasilnya akan muncul halaman web sederhana dengan tulisan:

  Selamat Datang di Blog Saya

  Ini adalah contoh file HTML sederhana.

  Belajar HTML itu mudah dan menyenangkan!


---


Penjelasan Kode HTML


Tag Fungsi

<!DOCTYPE html> Menandakan bahwa dokumen ini menggunakan HTML5

<html> Elemen utama dari halaman HTML

<head> Berisi informasi tentang halaman (judul, meta, link CSS)

<title> Menentukan judul yang muncul di tab browser

<body> Berisi konten yang akan ditampilkan di halaman

<h1> - <h6> Heading (judul), ukuran dari terbesar (h1) ke terkecil (h6)

<p> Paragraf


---


Contoh Kode HTML Lebih Lengkap


```html

<!DOCTYPE html>

<html>

<head>

    <title>Profil Saya</title>

</head>

<body>


    <h1>Dwi Agus Saputro</h1>

    <p>Halo! Saya adalah pelajar SMK Negeri 2 Surakarta.</p>

    

    <h2>Keahlian:</h2>

    <ul>

        <li>Jaringan Komputer</li>

        <li>Instalasi Linux</li>

        <li>HTML & CSS</li>

    </ul>


    <h2>Kontak</h2>

    <p>Email: <a href="mailto:dwisaputro5147@gmail.com">dwisaputro5147@gmail.com</a></p>


</body>

</html>

```


---


Tips Belajar HTML


1. Praktik terus menerus dengan menulis kode sendiri.

2. Gunakan Developer Tools di browser (tekan F12) untuk melihat kode HTML website lain.

3. Pelajari CSS untuk menghias tampilan website.

4. Gunakan validator HTML seperti validator.w3.org untuk mengecek kesalahan kode.


---


Penutup


HTML adalah fondasi utama dalam pembuatan website. Dengan menguasai HTML, Anda akan lebih mudah mempelajari teknologi web lainnya seperti CSS, JavaScript, PHP, dan lainnya.


Selamat belajar dan berkarya!


Dwi Agus Saputro

SMK Negeri 2 Surakarta


Komentar

Postingan populer dari blog ini

DWI AGUS SAPUTRO

MATERI PEMBELAJARAN JARINGAN KOMPUTER SMK/MAK KELAS X, XI Tentang Saya: Halo! Nama saya Dwi Agus Saputro, seorang pelajar SMK Negeri 2 Surakarta yang sedang mendalami bidang Teknik Jaringan Komputer dan Telekomunikasi. Saya sangat antusias dengan perkembangan teknologi, khususnya dalam hal jaringan dan telekomunikasi. Saya selalu tertarik untuk memahami bagaimana teknologi dapat diintegrasikan dalam kehidupan sehari-hari, serta bagaimana hal tersebut bisa menjadi peluang bisnis di masa depan. Sebagai seorang pelajar, saya juga aktif berbagi pengetahuan dan pengalaman saya melalui blog pribadi saya. Melalui blog ini, saya ingin membantu teman-teman seumuran saya dan siapa pun yang memiliki minat yang sama untuk lebih memahami dunia teknologi dan jaringan. Saya percaya bahwa berbagi ilmu adalah salah satu cara terbaik untuk belajar dan berkembang bersama. Keahlian: - Pemahaman dasar tentang jaringan komputer - Konfigurasi jaringan LAN dan WAN - Instalasi perangkat jaringan - Troubleshoot...

TOPOLOGI HYBRID

DWI AGUS SAPUTRO Baca Juga: METODE PENELITIAN KUALITATIF DALAM RISET SOSIAL

LAPORAN INSTALASI KALI LINUX

DWI AGUS SAPUTRO LAPORAN INSTALASI KALI LINUX          TAHUN AJARAN 2024/2025                                       OLEH :                           DWI AGUS SAPUTRO  NOMOR ABSEN : 10                                         KELAS : XI TJKT B                     SMK NEGERI 2 SURAKARTA LANGKAH-LANGKAH MENGINSTAL KALI LINUX DI VIRTUAL BOX VERSI   7 1. Pertama, install VirtualBox (disini saya menggunakan VirtualBox Versi 7). 2. Kedua, pastikan kita sudah memiliki file ISO Kali Linux, jika tidak punya bisa download di google. 3. Jika sudah, buka VirtualBox dan pilih New. 4. Siapkan Virtual Machine untuk Ka...