• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Beranda
  • Kontak
  • Jasa Digital
Awiez Fathwa Zein Logo

Awiez

Pengejar Mimpi

  • Kategori
    • Cerita
    • Desain
    • Jaringan
    • Pemrograman
  • Github
  • Pencapaian
  • Portofolio
  • Tentang Penulis
You are here: Home / Pemrograman / #2 Tutorial HTML Dasar – Struktur HTML

#2 Tutorial HTML Dasar – Struktur HTML

23 February 2022 16:08 by Awiez Fathwa Zein Leave a Comment

struktur html

Baik, setelah sebelumnya kita telah mengenal HTML melalui artikel Pengenalan Materi HTML selanjutnya kita akan membahas mengenai struktur HTML agar pada saat membuat sebuah website kita lebih mudah dalam membaca kodingan yang kita buat.

Tapi sebelum kita mulai menulis kode HTML kita akan mempersiapkan tools yang akan kita gunakan, sebenarnya untuk menulis kode HTML dapat dilakukan menggunakan berbagaimacam text editor yang ada di internet yaitu seperti Sublime Text, Notepad++, Visual Studio Code, dan masih banyak lagi. Biasanya saya sendiri menggunakan Visual studio code untuk menulis kode (ngoding) karna fiturnya lumayan banyak dan juga gratis.

Dari sekian banyak teks editor yang ada kali ini kita akan gunakan yang sudah ada di komputer atau laptop yang kita miliki yaitu dengan menggunakan Notepad agar kita tidak perlu melakukan instalasi software lain mengingat yang kita pelajari ini masih sangat basic sekali.

Daftar Isi

  • 1. Membuat folder untuk menyimpan file
  • 2. Membuat file index.html
  • 3. Buka file dengan notepad
  • 4. Penjelasan Kode
  • 5. Hasil

1. Membuat folder untuk menyimpan file

Oke langsung saja kita mulai, pertama kita buat terlebih dahulu folder yang akan kita gunakan untuk latihan dimana saja. Silahkan beri nama sesuai dengan keinginan kalian, disini saya akan membuat folder bernama “latihan-html”

Membuat folder latihan

2. Membuat file index.html

Setelah kita membuat folder latihan selanjutnya kita akan membuat folder index.html. Apa itu index.html? File dengan nama “index” merupakan file yang akan dibuka pertama kali oleh browser, sehingga jika folder kita berisi beberapa file seperti “index.html” dan “coba.html” maka yang akan diakses oleh browser untuk pertama kali adalah file “index.html” untuk lebih jelasnya nanti jika sudah mencoba membuka folder yang kita buat dengan webserver.

Untuk membuat file “index.html” caranya cukup mudah yaitu dengan klik kanan di dalam folder yang telah kita buat tadi, kemudian pilih “new” lalu pilih “Dokumen Teks” atau “Text Document”

Buat file index.html

Kemudian akan terbuat file dengan ekstensi .txt seperti dibawah ini.

File baru yang terbuat

Kemudian ganti nama file dengan klik kanan lalu pilih “rename” kemudian ganti nama dengan “index” jangan lupa untuk mengganti ekstensi dengan .html sehingga nama file akan menjadi “index.html” seperti dibawah ini. Jika pada saat rename tidak bisa mengganti ekstensi menjadi .html silahkan atur agar file ekstensi dapat terlihat dengan cara klik view pada bagian atas (taskbar) kemudian klik show kemudian centang filename extensions.

File index.html

3. Buka file dengan notepad

Setelah membuat folder dan file index.html selanjutnya kita buka file tersebut menggunakan notepad dengan cara klik kanan pada file index.html kemudian open with noteoad.

Buka file dengan notepad

Setelah terbuka silahkan tulis kode dibawah ini

<!DOCTYPE html>
<html>
<head>
    <title>Latihan HTML</title>
</head>
<body>
    <h1>Halo Dunia</h1>
</body>
</html>

4. Penjelasan Kode

Kode diatas merupakan struktur dasar pada HTML yang akan selalu digunakan saat kita membuat sebuah website.

<!DOCTYPE html> //Tag ini digunakan sebagai penanda bahwa file index.html yang kita buat ditulis menggunakan HTML versi terbaru yaitu HTML versi 5.
<html> // Tag ini digunakan sebagai tag pengenal bahwa dokumen ini merupakan dokumen HTML.
<head> // Tag head digunakan untuk menulis judul dokumen, dan menulis tag  meta yang dapat digunakan untuk menambahkan deskripsi sebuah halaman web.
    <title>Latihan HTML</title> //tag  title ini digunakan untuk memberikan judul halaman yang akan terlihat pada tab browser
</head>
<body> //Tag body merupakan tag penting  tag ini digunakan untuk menulis konten website yang akan kita buat
    <h1>Halo Dunia</h1>
</body>
</html>

5. Hasil

Sekarang coba buka file index.html yang kita buat tadi dengan cara double click pada file index.html, setelah dibuka maka akan tampil halaman website pertama yang kita buat pada tutorial kali ini.

Hasil website yang dibuat

Nah cukup sekian tutorial kali ini semoga dapat membantu dalam memahami pembuatan website teman-teman yang masih awam dengan web development. Terimakasih!

Telah dibaca sebanyak (Bulan ini) : 1,181
Yuk Bagikan Informasi Ini :

Filed Under: Pemrograman, Tutorial HTML Dasar Tagged With: CSS, HTML, PEMROGRAMAN, Tutorial

About Awiez Fathwa Zein

Halo, perkenalkan nama saya Awiez Fathwa Zein. Saya merupakan seorang mahasiswa Teknik Informatika pada salah satu perguruan tinggi negeri yang fokus pada pemrograman web dan sedikit IoT.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

PENCARIAN

Berlangganan Artikel

Tulis email anda agar tetap update artikel terbaru!

Video Popular

https://www.youtube.com/watch?v=UadEy4r_a8g

POSTINGAN TERBARU

  • Gampang Banget! Cara Upload Form Dengan jQuery Ajax Pada Laravel 10
  • Cara Mendownload Seluruh Isi Google Drive Dengan Google Takeout 2023
  • Cara Membuat Website Shortenlink Sendiri Menggunakan Laravel 9
  • Cara Mengatasi Spam Telepon 188 Telkomsel
  • #2 Tutorial HTML Dasar – Struktur HTML

KOMENTAR TERBARU

  • Putra surya setiawansyah on Cara Mendapatkan Canva Pro Gratis Melalui Github Education Dengan Email Mahasiswa 2021
  • Putra surya setiawansyah on Cara Mendapatkan Canva Pro Gratis Melalui Github Education Dengan Email Mahasiswa 2021
  • rls on Cara Mendapatkan Canva Pro Gratis Melalui Github Education Dengan Email Mahasiswa 2021

ARSIP

KATEGORI

  • Cerita (1)
  • Desain (5)
  • Jaringan (1)
  • Pemrograman (5)
    • Laravel (2)
    • Tutorial HTML Dasar (2)
  • Perkuliahan (1)
  • Solusi (14)
  • Umum (11)

Tags

Adobe AdobeXD Ajax Bigjpg bot Canva Canva Pro Canva Pro Gratis CSS Desain Grafis ENSP Figma Google Drive Google Takeout Gratis Handbrake HTML HUAWEI Icons8 Internet Security Investasi jQuery K-Drama Kamera Laravel Logika PEMROGRAMAN Phising Photoshop Review Serial Cina Serial Korea sosmed Spam Telepon SSL TBA Telkomsel Tutorial TV Indonesia TV Streaming twitter Video Waifu2x Webcam windows 11
DMCA.com Protection Status

Flag Counter

Copyright © 2023 · awiez.com