Damnthelion > HTML > Belajar HTML dari Nol untuk Pemula: Buat dan Hosting Web-mu
Belajar HTML dari Nol untuk Pemula: Buat dan Hosting Web-mu - Featured Image

Belajar HTML dari Nol untuk Pemula: Buat dan Hosting Web-mu

Kalau kamu tertarik untuk belajar html dasar dan masuk ke dunia coding, khususnya sebagai web developer, maka kamu sudah berada di jalur yang tepat, selamat datang!

Di semua aspek web development, selalu ada HTML yang digunakan di dalamnya, maka dari itu belajar HTML merupakan langkah awal dan utama dalam meresapi konsep web development yang luas ini.

HTML merupakan titik nol dari setiap perjalanan seseorang untuk menjadi web developer. Beberapa bahasa pemrograman yang paling banyak di cari saat ini seperti Javascript dan PHP memanfaatkan HTML untuk membangun aplikasi yang dinamis.

Meskipun HTML bersifat statis (konten tetap dan harus diubah secara manual), ia bisa dibuat menjadi dinamis menggunakan Javascript dan PHP, contohnya seperti:

  • Damnthelion.com (WordPress) – Situs dinamis yang dibangun dengan PHP.
  • Netflix – Situs dinamis yang dibangun dengan Javascript (Node Js).
  • Profil Damnthelion – Situs profil statis yang akan menjadi goal dari tutorial ini.

Pada artikel ini kita akan belajar html dasar dari nol, kita akan membahas mengapa HTML itu ada, hubunganya dengan www, cara kerja HTML, struktur HTML, elemen dan tag HTML, dan cara hosting web HTML di Internet.

Artikel ini sudah distruktur dengan baik agar para pemula dapat memahami apa itu sebenarnya html dan kegunaanya di Internet dan bisa melanjutkan perjalanan belajar ke artikel yang membahas CSS dan Javascript.

Tentunya kamu juga akan membuat halaman web pertamamu dalam bentuk codingan html website biodata yang nantinya bisa kamu akses di Internet. Sekali lagi saya ucapkan, selamat datang!

Mengapa HTML itu ada?

HTML atau kepanjangannya HyperText Markup Language adalah sebuah bahasa yang digunakan untuk membuat struktur halaman web di Internet.

Bahasa ini merupakan bahasa markah – penanda atau tag dalam bahasa inggris yang di mana, untuk membentuk sebuah struktur halaman, kamu perlu meletakkan penanda atau tag ini pada dokumen HTML.


Logo Damnthelion
Nama

Biodata

Tag yang digunakan

<img>
<h1>Nama</h1>
<p>Biodata</p>

Misalnya, kamu ingin membuat halaman profil yang terdiri dari foto, nama, dan biodata, maka kita perlu meletakkan penanda yang sesuai dengan konten tersebut seperti penanda gambar, judul, dan paragraf.

mar.kah

n tanda; merek; tanda pada tali penduga

Dokumen HTML dibangun menggunakan penanda – selanjutnya akan kita sebut dengan tag, yang digunakan untuk membentuk sebuah struktur konten atau informasi.

HTML menjadi standar modern untuk menyajikan informasi di World Wide Web (WWW). Setelah melewati evolusi selama bertahun-tahun dari awal kemunculannya di tahun 1990-an, kini HTML dapat menyajikan konten dan informasi yang kompleks kepada penggunanya.

Hingga kini HTML masih mendapatkan pembaruan untuk mengakomodasi teknologi baru yang terus berkembang, tidak heran kalau HTML menjadi pondasi utama yang harus dipelajari untuk menjadi web developer.

HTML dan World Wide Web (WWW)

Seperti kata web dalam World Wide Web, yang dalam bahasa Indonesai berarti jaringan, Internet dapat diartikan sebagai jaringan luas yang mencakup seluruh dunia.

web

n sistem untuk mengakses, memanipulasi, dan mengunduh dokumen hipertaut yang terdapat dalam komputer yang dihubungkan melalui internet; jejaring; jaringan.

Dalam pengertian KBBI, web merupakan interkoneksi antara dokumen hipertaut (HTML) yang saling terhubung melalui tautan-tautan (link).

Dokumen-dokumen ini tersebar di berbagai server di dunia, yang kemudian kita dapat mengaksesnya melalui alamat domain (misal: damnthelion.com) ataupun alamat IP (misal: 192.0.01).

Server merupakan sebuah komputer yang terhubung dengan Internet. Ia bertugas untuk memberikan dokumen yang diminta oleh pengguna.

Gambaran interaksi antara Server dan Pengguna – Gambar oleh Akshat Trivedi via Medium

Misalnya kamu mengakses artikel ini menggunakan aplikasi browser, maka Server pada situs ini akan memberikan dokumen HTML yang kamu minta, lalu browser akan menterjemahkan dokumen HTML tersebut hingga memiliki struktur-strukturseperti gambar utama, judul, dan paragraf pada artikel ini.

Terdapat miliaran bahkan triliunan dokumen HTML yang ada di Internet, tentunya akan menjadi rumit jika kita harus mencari tau alamat URL dari setiap informasi yang kita inginkan. Bisa aja kita berpindah dari satu halaman ke halaman lain menggunakan link yang tersedia di suatu halaman web, tapi tetap aja, proses ini rumit. Hadirlah Google.

Logo Google - Mesin pencari paling populer di dunia
Logo Google – Mesin pencari paling populer di dunia

Google merupakan sebuah mesin pencari terbesar di dunia ini. Ia mengindeks setiap dokumen atau halaman web yang bermunculan setiap hari di Internet. Dengan begitu, kita bisa mencari dokumen yang relevan terhadap apa yang kita butuhkan melalui sebuah kata kunci tanpa harus mengetahui alamat URLnya.

Hingga sekarang setidaknya ada dua elemen penting yang membangun Internet yang kita nikmati tanpa henti ini, yaitu dokumen informasi dan mesin pencari.

Dokumen tersebut bisa berupa teks, gambar, video, atau berbagai jenis informasi lainnya yang struktur kontennya dibangun menggunakan HTML.

Seperti itulah kira-kira penjelasan sederhana untuk memahami bagaimana HTML dan Internet bekerja sama. Ketika kita menjelajahi Internet, kita sebenarnya sedang berkeliling di dalam jaringang komputer yang luas dan saling terhubung satu dengan lainnya.

HTML dan contohnya

Sebagai contoh, ketika kamu membaca artikel di suatu situs berita, teks artikel, gambar, dan tautan yang kamu lihat semuanya dibangun menggunakan HTML. Itu sebabnya HTML menjadi bahasa dasar yang mendukung hampir semua halaman web yang kamu temui saat menjelajahi internet.

Ilustrasi HTML, CSS dan JavaScript – Gambar oleh Franklin Bado via Medium

Selain itu, ada komponen pendukung lainnya yang membuat halaman HTML dapat menjadi lebih menarik dan interaktif, yaitu CSS dan Javascript.

Contoh HTML

Hasil HTML

Kode HTML

<!-- HTML -->
<button>Tombol</button>

HTML + CSS

CSS, yang merupakan singkatan dari “Cascading Style Sheets,” adalah bahasa yang digunakan untuk mendesain tampilan dan format halaman web. Mari kita analogikan halaman web sebagai sebuah rumah. HTML merupakan kerangka atau pondasi dari sebuah rumah — dinding, atap, pintu, dll. — sedangkan CSS adalah seperti cat, wallpaper, dan dekorasi yang membuat rumah itu menarik (enak dilihat) dan unik.

Dengan CSS, ktia dapat menentukan warna, ukuran font, jarak antar elemen, dan banyak aspek visual lain dari sebuah halaman web.

Contoh HTML + CSS

Hasil HTML

Kode HTML

<!-- CSS -->
<style>
    .btn-contoh {
        padding: 1rem;
        background: #007CBA;
        border-radius: 1rem;
        border: none;
        color: white;
        cursor: pointer;
    }
</style>

<!-- HTML -->
<button class="btn-contoh">Tombol</button>

HTML + CSS + JavaScript

JavaScript adalah bahasa pemrograman yang digunakan untuk memberikan interaksi yang dinamis dan interaktif di halaman web kita.

Jika sebelumnya kita ketahui HTML adalah rangka dan pondasi rumah dan CSS adalah dinding, atap dan dekorasi dari rumah yang dibangun, maka Javascript adalah sebuah pintu dan jendela.

Javascript membuat pintu dan jendela tersebut menjadi interaktif sehingga kita bisa melakukan interaksi seperti membuka atau menutupnya. JavaScript berfungsi untuk membuat pengalaman pengguna di situs web menjadi lebih kaya dan menarik.

Contoh HTML + CSS + JavaScript

Hasil HTML

Kode HTML

<!-- CSS -->
<style>
    .btn-contoh2 {
        padding: 1rem;
        background: orange;
        border-radius: 1rem;
        border: none;
        color: white;
        cursor: pointer;
    }
</style>

<!-- HTML -->
<button class="btn-contoh2" id="contoh">
    Klik Saya!
</button>

<!-- Javascript -->
<script>
    document.getElementById("contoh").onclick = function () {
        alert("Tombol di klik!");
    };
</script>

Kira-kira seperti itulah penjelasan dasar nan sederhana tentang apa itu HTML dan hubungannya dengan internet. Dengan memiliki pemahaman dasar HTML ini, kamu akan menjadi lebih mudah untuk menyerap gambaran web development itu seperti apa.

Sejarah HTML

Tim Berners-Lee, pengembang HTML – Gambar oleh CERN via Google Arts & Culture
  1. Pengembangan Awal: Pada awalnya HTML dikembangkan oleh Tim Berners-Lee pada tahun 1990 di CERN (Organisasi Eropa untuk Riset Nuklir) dengan tujuan untuk berbagi dan mengakses informasi secara efisien menggunakan dokumen hypertext (dokumen yang mempunyai link ke dokumen lainnya, sehingga memudahkan navigasi menuju dan ke informasi terkait). Versi pertama HTML disebut HTML 1.0.
  2. HTML 2.0: Pada tahun 1995, HTML 2.0 dirilis sebagai standar resmi World Wide Web, yang mengenalkan fitur-fitur seperti formulir dan dukungan media seperti gambar dalam halaman web.
  3. HTML 3.2: Versi ini dirilis pada tahun 1997 dan menghadirkan lebih banyak elemen dan atribut, untuk mengatur tampilan halaman web serta dukungan untuk menampilkan tabel.
  4. HTML 4.01: HTML 4.01 dirilis pada tahun 1999 dan memperkenalkan banyak perbaikan dan fitur baru, termasuk cascading style sheets (CSS) untuk mengatur tampilan halaman web dan Javascript untuk membuat halaman web menjadi lebih interaktif.
  5. HTML5: HTML5, yang dikembangkan mulai sekitar tahun 2004, adalah perubahan besar dalam sejarah HTML. Versi ini menyediakan elemen-elemen baru, tag semantik yang mendukung SEO, audio dan video native, serta dukungan untuk aplikasi web yang lebih interaktif. HTML5 dirilis sebagai rekomendasi resmi oleh W3C pada tahun 2014.

Dalam sejarahnya HTML selalu berkembang untuk mengikuti perkembangan teknologi untuk menyediakan struktur dalam menyajikan informasi.

Aplikasi dan Pengaturan yang dibutuhkan

Aplikasi Browser

Browser populer moderen – Gambar oleh ORESoftware via Medium

Pada dasarnya, kamu boleh menggunakan aplikasi browser apapun untuk menjalankan kode HTML yang akan dibuat karena pada dasarnya semua browser moderen sudah mendukung HTML5.

Namun pada tutorial ini, saya menggunakan browser Google Chrome yang berjalan pada sistem operasi Windows 10,

Aplikasi Code Editor

Tampilan Visual Studio Code
Tampilan Visual Studio Code

Untuk menulis kode HTML, kamu boleh menggunakan aplikasi apapun yang bisa menulis teks. Notepad juga boleh, tapi saya sarankan untuk menggunakan aplikasi code editor Visual Studio Code karena aplikasi ini memiliki banyak fitur yang memudahkan dan mempercepat kamu dalam menulis kode ataupun mempercepat proses pembelajaran ini.

Kamu bisa lihat tutorial cara install visual studio code untuk belajar html ini untuk mulai menggunakannya.

Pengaturan Windows

Kita akan menulis kode html, maka kita perlu melakukan atur pengaturan Windows untuk menampilkan ekstensi file.

Ekstensi file HTML adalah .html, jadi kita perlu mengubah ekstensi file yang kita gunakan.

Cara menampilkan ekstensi file di Windows

  1. Buka Windows Explorer dengan shortcut Windows + E.
    Tampilan Windows Explorer
  2. Klik View.
  3. Lalu Centang opsi File name extensions.
    Atur Windows Explorer untuk menampilkan ekstensi file

Oke sekarang kita lanjutkan untuk mengenali struktur dasar HTML terlebih dahulu sebelum kita membuat file HTML pertamamu.

Belajar Struktur Dasar HTML

Struktur dasar HTML dibuat menggunakan beberapa penanda (tag) yang harus ada dalam sebuah file .html urutannya adalah seperti ini:

Tag Dokumen HTML

Tag-tag yang akan disebutkan dibawah ini hukumnya wajib ada untuk memberitahu browser bahwa file yang kita buka merupakan dokumen HTML.

1. Tag <!DOCTYPE html>

<!DOCTYPE html>

Tag <!DOCTYPE html> deklarasi bahwa dokumen/ file ini adalah bertipe HTML.


2. Tag <html>

Tag <html> menandai awal dan akhir dari sebuah dokumen HTML. Semua elemen lain harus berada di dalam tag ini.

<html>
  <!-- Elemen lain di sini -->
</html>

3. Tag <head>

<head>
  <!-- Judul, link ke CSS/JS, dan lainnya -->
</head>

Bagian <head> berisi informasi tentang dokumen, seperti judul dan link ke file CSS atau JavaScript.


4. Tag <title>

Tag <title> digunakan untuk menentukan judul halaman web, yang biasanya ditampilkan di tab browser. Tag ini berada di dalam tag <head></head>.

<title>Judul Halaman</title>

5. Tag <meta>

<meta name="description" content="Deskripsi Halaman">

Tag <meta> menyediakan metadata tentang halaman web, seperti deskripsi halaman, kata kunci, dan pengaturan responsif. Tag ini juga berada di dalam tag <head></head>.


Tubuh (body) Dokumen HTML

Bagian tubuh dokumen HTML adalah bagian di mana konten yang akan ditampilkan kepada pengunjung diletakkan.

Tag <body>

Tag <body> berisi semua konten yang ingin ditampilkan di halaman web, seperti teks, gambar, video, dan lainnya.

<body>
  <!-- Konten halaman di sini -->
</body>

Contoh Struktur Dasar HTML

Jika kita gabungkan semuanya menjadi satu, maka kode HTML nya menjadi seperti ini.

Kode HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Judul Halaman</title>
    <meta name="description" content="Deskripsi Halaman">
    <!-- Link ke CSS/JS, meta dan lainnya -->
  </head>
  <body>
    <!-- Konten halaman di sini -->
  </body>
</html>

Memahami struktur dasar HTML adalah langkah pertama dalam pembuatan website. Dengan mengetahui fungsi dari tag-tag dasar seperti <html>, <head>, <body>, dan lainnya, kamu udah bisa mulai membangun halaman web-mu sendiri.

Belajar HTML: Membuat Halaman Web Pertamamu

Hasil project HTML yang akan dibuat
Hasil project HTML yang akan dibuat, lihat secara langsung di https://storage.damnthelion.com/files/html/belajar-html-dasar/

Pada tutorial ini kita akan membuat halaman profile seperti gambar di atas sebaga project pertama. Dalam project ini kita akan menggunakan tag HTML dasar seperti:

  1. Gambar <img>
  2. Heading <h1>, <h2> dan <h3>
  3. Paragraf<p>
  4. List terurut <ol>
  5. List tidak terurut <ul>
  6. Anchor link atau tautan <a>

Di sini kita akan membuat halaman web profile seperti gambar di atas sebagai project pertama HTML pertamamu. Project ini terdiri dari dua halaman yang saling terhubung, yaitu halaman profil dan portfolio. Mari kita mulai ngoding!

Membuat folder project

Pertama-tama, kita buat dulu folder baru untuk meletakan file-file project HTML kita, di contoh ini, saya membuat folder bernama html.

Membuat folder project HTML
Membuat folder project bernama html

Setelah berhasil dibuat, klik kanan pada folder html, kita akan membuka folder tersebut melalui Context Menu Windows, dengan cara klik kanan pada folder tersebut, lalu pilih Open With Code.

Membuka Visutal Studio Code melalui Context Menu (Klik Kanan)
Membuka Visutal Studio Code melalui Context Menu (Klik kanan)

Sebelum melanjutkan, mari kita install ekstensi Live Server terlebih dahulu agar aplikasi browser selalu menampilkan hasil kodingan terbaru setelah kita menyimpan hasil kodingan.

Tahap-tahap meng-install Live Server
Tahap-tahap meng-install Live Server
  1. Pilih Menu Extensions atau dengan Ctrl + Shift + X.
  2. Masukkan Live Server pada pencarian di Extension Marketplace.
  3. Klik tombol Install untuk menginstall ekstensi tersebut.
  4. Kembali ke VSCode Explorer atau dengan Ctrl + Shift + E.

Kita sudah berhasil install ekstensi Live Server. Lalu, kita akan membuat file baru dengan klik kanan pada bagian daftar file yang tersedia di bagian kiri seperti di gambar berikut. Klik kanan, lalu pilih New File..., lalu beri nama index.html.

Membuat dokumen HTML baru di Visual Studio Code
Membuat dokumen HTML baru di Visual Studio Code

Tahap selanjutnya kita akan membuat struktur dasar HTML. Karena kita menggunakan Visual Studio Code, kita bisa memanfaatkan fitur snippet yang tersedia. Jadi kita hanya perlu mengetik html lalu memilih html:5 kemudian tekan Enter atau Tab atau Klik untuk membuat struktur HTML5 secara otomatis.

Fitur snippet HTML di Visual Studio Code
Fitur snippet HTML di Visual Studio Code

Untuk menyimpan, tekan Ctrl + S atau File > Save. Selamat kamu sudah berhasil membuat file HTML dengan nama index.html.

Struktur Dasar HTML yang telah dibuat secara otomatis menggunakan fitur snippet
Struktur Dasar HTML yang telah dibuat secara otomatis menggunakan fitur snippet

Menyalakan Live Server

Kita bisa menyalakan ekstensi Live Server dengan klik Go Live di pojok kanan bawah, seperti di gambar ini:

Lokasi tombol untuk menyalakan ekstensi Live Server
Lokasi tombol untuk menyalakan ekstensi Live Server

Sekarang kamu bisa akses hasil kodingan HTML kamu di http://127.0.0.1:5500/.

Memahami Struktur Tag HTML

Pada saat menulis kode HTML, kita membuat banyak sekali tag HTML untuk membuat struktur konten. Kita perlu memahami struktur dari tag itu sendiri agar dapat memanfaatkan fungsi-fungsi yang ditawarkan oleh masing-masing tag tersebut dalam pembuatan halaman web.

Tag adalah sebuah kode untuk menandai sebuah elemen dalam dokumen HTML. Kode ini memberitahu browser tentang apa aja yang harus ditampilkan di halaman web. Tag adalah penanda, sedangkan elemen adalah sebuah tag yang menjadi induk dari konten atau tag lainnya. Seperti tag <html> yang menanungi tag-tag yang mendefiniskan sebuah dokumen HTML.

Mengenali apa itu Elemen dan Tag di HTML
Mengenali apa itu Elemen dan Tag di HTML

Penulisan kode tag dilakukan menggunakan tag pembuka dan tag penutup. Struktur kode tag pembuka adalah <tag> lalu untuk penutupnya adalah </tag> – ditambah garis miring / setelah pembuka kurung sudut < yang menandakan bahwa ini adalah tag penutupnya.

Contoh penggunaan tag dengan lengkap menggunakan tag paragraf: <p>Damnthelion</p>.

Tag juga memiliki konfigurasi melalui atribut, yang di mana kita bisa mengatur perilaku, identitas, tampilan, lokasi dan data lain yang tidak akan terlihat di halaman web.

Atribut ini memberikan informasi tambahan tentang elemen, seperti identitas, gaya, lokasi, atau data lain yang tidak terlihat secara langsung pada konten yang ditampilkan. Penulisan kode atribut diletakkan di dalam tag pembuka (setelah nama tag) yang terdiri dari nama atribut dan nilai atribut.

Contoh penggunaan tag paragraf menggunakan atribut:

Kode HTML

<p style="text-align: center">Damnthelion</p>

Kode HTML di atas merupakan tag <p> dengan atribut style="text-align: center" dan memiliki konten berupa teks, yaitu Damnthelion.

Belajar HTML: Membuat halaman web profilmu sendiri menggunakan HTML

Mari kita mulai untuk menulis kode HTML pada dokumen index.html yang telah kita buat sebelumnya.

Mengisi Informasi dokumen HTML

Pertama, kita isi dahulu informasi tentang dokumen HTML ini di dalam tag <head></head>.

Kode HTML

<head>
    <title>Profile Damnthelion</title>
</head>

Menambahkan gambar

Karena kita ingin membuat halaman profil, maka kita perlu menambahkan sebuah gambar. Memasukkan gambar di HTML dilakukan dengan tag <img> dengan atribut:

  1. src="logo-damnthelion.com.svg" – wajib ada. Atribut untuk menentukan sumber gambar, pada atribut ini kamu bisa memasukkan URL ataupun lokasi relatif gambar di folder project.
    • Sumber gambar menggunakan URL (dari internet):
      src="https://storage.damnthelion.com/files/logo/logo-damnthelion.com.svg"
    • Sumber gambar menggunakan lokasi relatif gambar di folder project:
      src="logo-damnthelion.com.svg"
  2. alt="logo damnthelion.com" – wajib ada. Atribut untuk memberikan informasi gambar tertulis yang akan muncul jika gambar gagal dimuat.
  3. width="200" – opsional. Atribut untuk menentukan nilai ukuran lebar fix gambar pada saat gambar disajikan.
  4. height="200" – opsional. Atribut untuk menentukan nilai ukuran tinggi fix gambar pada saat gambar disajikan.

Pada tutorial ini, saya menggunakan logo damnthelion.com sebagai foto profil. Kamu bisa mengganti dengan gambar lainnya dengan mengubah atribut src dengan alamat URL gambar ataupun dengan alamat lokasi relatifnya.

Hasil HTML

logo damnthelion.com

Kode HTML

<img src="https://storage.damnthelion.com/files/logo/logo-damnthelion.com.svg" alt="logo damnthelion.com" width="200" height="200">

Lokasi relatif merujuk pada alamat file yang ditentukan relatif terhadap lokasi file HTML saat ini. Misalkan kamu menaruh gambar.jpg di folder yang sama dengan file index.html, maka kamu dapat mengaksesnya dengan memasukkan nama file nya lengkap dengan ekstensinya di atribut src.

Contoh penggunaan lokasi relatif pada atribut src

<img src="gambar.jpg" alt="penjelasan gambar">

Berikut ini kodingan lengkap untuk section ini:

Kode HTML

<img src="https://storage.damnthelion.com/files/logo/logo-damnthelion.com.svg" alt="logo damnthelion.com" width="200" height="200">

Memberikan judul dan paragraf

Menentukan judul konten pada dokumen HTML bisa kamu lakukan dengan menggunakan tag heading atau judul. Tag heading ini terdiri dari 6 level yang digunakan untuk memberikan judul dan sub-judul untuk pembahasan konten yang semakin spesifik.

Tag heading tersedia dari heading tingkat tertinggi <h1> hingga heading tingkat terendah <h6>.

Hasil HTML

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Kode HTML

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Lalu untuk menampilkan konten teks pada pembahasan setiap heading, kita perlu menggunakan tag paragraf <p>. Jangan sampai kamu tidak menggunakan tag paragraf ini ketika menulis konten teks karena meskipun teks akan tetap ditampilkan pada halaman web, hal ini akan berpengaruh pada hasil SEO (Search Engine Optimization).

Hasil HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Kode HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

Sekarang kita tulis kode HTML dengan tag <h1> dengan isi konten Damnthelion, yang berarti bahwa halaman ini membahas tentang Damnthelion.

Terus kita tulis lagi lagi kode HTML dengan tag <p> untuk memperjelas pembahasan tentang halaman Damnthelion. Di sini saya menggunakan deskripsi situs ini sebagai isi konten dari tag <p>. Kamu bisa isi tag ini dengan biografi singkatmu.

Berikut ini kodingan lengkap untuk section ini:

Kode HTML

<body>
    <!-- Baris kode HTML sebelumnya: <img> -->
    <h1>Damnthelion</h1>
    <p><em>Platform untuk menerjemahkan ide anda menjadi sesuatu yang dapat digunakan. Tempat seru untuk problem-solver dan inquisitive-person.</em></p>
</body>

Pada tag paragraf tersebut kita juga menggunakan tag <em> yang berfungsi untuk membuat teks yang kita masukkan menjadi miring atau dalam bahasa inggris italic dengan tujuan agar lebih e s t e t i k.


Memberikan sub-judul, list, dan link

Pada halaman ini saya juga ingin membahas tentang informasi lainnya yang berkaitan dengan Damnthelion. Halaman ini akan berbagi tentang informasi terkait dengan profil Damnthelion seperti hobi, kontak, dan portfolio.

Sub-judul

Membuat sub-judul Informasi menggunakan tag <h2> yang menandakan pembahasan konten menjadi semakin spesifik.

Kode HTML

<body>
    <!-- Baris kode HTML sebelumnya -->
    <h2>Informasi</h2>
</body>

Ordered List (List terurut)

Kemudian kita akan membuat pembahasan menjadi lebih spesifik lagi menggunakan tag <h3> dengan sub-judul Hobi.

Hasil HTML

Hobi

Kode HTML

<h3>Hobi</h3>

Lalu untuk menjelaskan hobi apa saja yang disukai oleh Damnthelion, kita memerlukan sebuah list atau daftar. Karena hobi sifatnya dapat dihitung dan diurut, maka kita memerlukan list yang terurut.

Menampilkan daftar hobi terurut dapat dilakukan menggunakan tag <ol> (ordered list). Setiap item yang kita masukkan dalam tag ini akan diberikan nomor urut.

Hasil HTML

  1. Menulis
  2. Coding

Kode HTML

<ol>
    <li>Menulis</li>
    <li><strong>Coding</strong></li>
</ol>

Berbeda dengan tag lainnya, membuat daftar di HTML memerlukan 2 tag, yaitu <ol> dan <li> yang di mana <ol> sebagai penanda bahwa ini sebuah list, sedangkan <li> menandakan bahwa ini adalah item dari sebuah list.

Di sini kita akan memasukkan dua item ke dalam list. Hobi dari Damnthelion adalah Menulis dan Coding. Pada bagian Coding, kita menambahkan tag <strong> untuk membuat tulisan menjadi tebal.

Berikut ini kodingan lengkap untuk section ini:

Kode HTML

<!-- Baris kode HTML sebelumnya -->
<h3>Hobi</h3>
<ol>
    <li>Menulis</li>
    <li><strong>Coding</strong></li>
</ol>

Unordered List (List tidak teratur) dan Link menuju URL

Lanjut, kita akan mengganti fokus pembahasan Informasi lainnya yang berfokus pada Kontak dengan menggunakan tag heading level 3 <h3>.

Hasil HTML

Kontak

Kode HTML

<h3>Kontak</h3>

Karena informasi kontak bisa sangat banyak dan berurutan, kita akan menggunakan list tidak terurut untuk mengurai kontak-kontak yang kita miliki.

Kode list tidak berurut ditulis menggunakan tag <ul> dan <li> yang dimana <ul> sebagai penanda bahwa ini adalah sebuah list, sedangkan <li> menandakan bahwa ini adalah item dari sebuah list.

Hasil HTML

Kode HTML

<ul>
    <li>Email: [email protected]</li>
    <li>Website: damnthelion.com</li>
</ul>

Damnthelion mempunyai dua informasi kontak yaitu Email: [email protected] dan Website: damnthelion.com. Dua kontak tersebut kita masukkan kedalam tag <li>.

Jika kita lihat pada contoh di atas, link pada item Website: damnthelion.com masih tidak dapat diklik. Pada item Website, kita akan memberikan link pada damnthelion.com agar bisa diklik oleh pengunjung halaman web kita.

Kode HTML

<a href="https://damnthelion.com">teks yang dikehendaki</a>

Untuk menambahkan link, kita perlu menambahkan tag Anchor <a>. Tag ini memiliki atribut wajib bernama href yang memiliki nilai link tujuan yang dikehendaki. Lalu, untuk menentukan apa teks yang bisa diklik pengguna di taruh di dalam tag <a>.

Berikut ini kodingan lengkap untuk section ini:

Kode HTML

<!-- Baris kode HTML sebelumnya -->
<h3>Kontak</h3>
<ul>
    <li>Email: [email protected]</li>
    <li>Website: <a href="https://damnthelion.com/">https://damnthelion.com/</a></li>
</ul>

Tambahkan Link menuju dokumen HTML lain

Selain menambahkan link menuju URL lain, kita juga bisa membuat link menuju dokumen HTML lainnya yang berada di dalam satu folder project.

Pertama-tama mari kita buat dulu file baru bernama portfolio.html dengan kode berikut:

Kode HTML: portfolio.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portfolio Damnthelion</title>
</head>
<body>
    <h1>Portfolio Damnthelion</h1>
    <p>Ini adalah portfolio aplikasi yang pernah dibuat oleh Damnthelion.</p>
    <ol>
        <li>Aplikasi kasir</li>
        <li>Aplikasi chat</li>
    </ol>
    <p>Kembali ke <a href="index.html">home</a>.</p>
</body>
</html>

Struktur dalam dokumen HTML ini akan di buat menggunakan tag-tag yang telah kita pelajari sebelumnya.

Sekarang kita mempunyai 3 file dalam folder project html:

html
--index.html
--portfolio.html
--logo-damnthelion.com.svg

Tiga file tersebut berada di dalam folder project yang sama (html), artinya kita dapat mengakses file tersebut menggunakan lokasi relatif dari file. Contoh lokasi relatif yang digunakan pada file portfolio.html adalah bagian kode ini <p>Kembali ke <a href="index.html">home</a>.</p>.

Kembali ke file index.html, kita akan menambahkan link menuju portfolio.html menggunakan tag <a> dengan nilai atribut href adalah alamat relatif menuju portfolio.html yaitu portfolio.html.

Berikut ini kodingan yang perlu ditambahkan di index.html:

Kode HTML: index.html

<body>
    <!-- Baris kode HTML sebelumnya -->
    <p><a href="portfolio.html">Klik disini</a> untuk melihat portfolio Damnthelion</p>
</body>

Melihat hasil kodingan yang dibuat

Kamu udah berhasil membuat folder project, mempelajari tag HTML dasar dan menuliskan kode HTML pertamamu. Karena kamu menggunakan code editor Visual Studi Code dan meng-install ekstensi Live Server maka kamu bisa akses hasil kodinganmu di http://127.0.0.1:5500/.

Belajar HTML: Hosting halaman web profile di Internet gratis

Menaruh halaman HTML di Internet secara baik dan benar merupakan hal yang cukup kompleks untuk dilakukan, masih banyak ilmu-ilmu yang perlu dipelajari. Istilah umumnya adalah Hosting.

Tetapi dengan berkembangnya Internet, kini kita bisa menaruh file HTML kita di Internet dengan mudah. Layanan ini disediakan oleh tiiny.host secara gratis! Berikut ini langkah-langkah mudahnya!

Mempersiapkan file HTML menjadi arsip .ZIP

Oh iya, kalian harus sudah instal aplikasi WinRar ya untuk ikutin tutorial persiapan file ini. Mengapa perlu Winrar? WinRar merupakan aplikasi untuk mengarsipkan dokumen. Kita akan mengubah 3 file tersebut menjadi 1 file menggunakan aplikasi ini.

  1. Masuk ke folder project, pilih semua file, lalu klik kanan.
    Mempersiapkan file HTML untuk di upload
  2. Masukkan nama file yang diinginkan, pilih opsi ZIP, lalu tekan OK.
    Membuat arsip file ZIP
  3. File arsip bernama html.zip sudah siap digunakan.

Mengunggah halaman HTML-mu ke Internet

Situs tiiny.host untuk hosting file HTML gratis
Situs tiiny.host untuk hosting file HTML gratis

Layanan hosting gratis HTML ini disediakan oleh tiiny.host, mari kita buka situs tiiny.host untuk memulai.

  1. Masukkan alamat yang di inginkan, lalu pilih tab ZIP, dan klik Upload file.
    Proses mengunggah file ke tiiny.host
  2. Cek kotak masuk dari email yang kamu masukkan untuk memverifikasi. Klik tombol Verify di email tersebut.
    Buka email untuk verifikasi akun tiiny.host
  3. Kamu akan diminta mengisi survey tiiny.host, isi sesuai kebutuhan, jika sudah selesai tekan tombol Complete.
  4. Jika tampil seperti ini, maka kamu sudah bisa akses halaman web-mu di alamat yang sudah kamu tentukan. Pada tutorial ini, alamatnya adalah https://damnthelion.tiiny.site/.
  5. Selamat, sekarang halaman profil HTML mu bisa diakses oleh siapa saja di Internet!

Validasi HTML

Validasi HTML adalah proses memeriksa apakah kode HTML yang kita buat sesuai dengan standar yang telah ditetapkan oleh World Wide Web Consortium (W3C) atau tidak.

Mengapa Validasi HTML itu Penting?

Ada beberapa alasan mengapa validasi HTML penting:

  1. Mengikuti Standar: Validasi HTML memastikan bahwa halaman web yang kita buat mematuhi standar HTML yang telah ditetapkan oleh W3C. Standar ini penting untuk memastikan kode HTML yang kita buat akan ditampilkan sebagaimana mestinya di setiap aplikasi browser.
  2. Konsistensi Tampilan: Validasi membantu memastikan tampilan halaman web ktia buat konsisten di berbagai aplikasi browser. Ketika kode HTML tidak valid, berbagai browser dapat menampilkan hal yang berbeda.
  3. Meningkatkan Aksesibilitas: Validasi HTML memastikan bahwa halaman web yang kita buat dapat diakses dengan baik oleh semua pengguna, termasuk mereka yang memiliki disabilitas atau menggunakan perangkat bantu aksesibilitas.
  4. Pengembangan Lebih Mudah: Kode HTML yang valid lebih mudah untuk dikelola dan diperbaiki. Ketika kita memiliki kode HTML yang valid, kita akan lebih mudah untuk menemukan dan memperbaiki masalah ketika mengembangkan atau memelihara halaman web yang dibuat.
  5. SEO (Search Engine Optimization): Mesin pencari seperti Google cenderung lebih menyukai halaman web yang memiliki kode HTML yang valid. Hal ini dapat membantu meningkatkan peringkat pencarian dan membuat situs ktia lebih mudah ditemukan oleh pengguna.
  6. Pengurangan Risiko Keamanan: Kode HTML yang tidak valid dapat memungkinkan serangan keamanan seperti Cross-Site Scripting (XSS) atau serangan terhadap situs web kita. Validasi dapat membantu mengurangi risiko ini dengan memastikan bahwa kode yang kita buat tidak memiliki celah yang mungkin dieksploitasi oleh penyerang.
  7. Pemeliharaan yang Lebih Mudah: Dengan kode HTML yang valid, pemeliharaan situs web akan menjadi lebih mudah karena kita akan lebih mudah memahami struktur dan hubungan antara elemen-elemen pada halaman web.

Dimana bisa Validasi HTML?

Kamu bisa memvalidasi kode HTML yang kamu buat di https://validator.w3.org/ .

Dalam rangka untuk memastikan bahwa halaman web Anda memenuhi standar dan mencapai tujuan-tujuan di atas, sangat disarankan untuk secara rutin melakukan validasi HTML menggunakan alat-alat validasi HTML yang tersedia secara online atau dengan menggunakan editor HTML yang mendukung validasi. Ini akan membantu Anda membangun dan memelihara situs web yang lebih baik secara keseluruhan.

Tips dan Sumber Belajar Tambahan

A. Sumber-sumber belajar HTML online
B. Praktek lebih lanjut dan proyek sederhana


Comments

Jika anda menemukan hal yang membingungkan, jangan malu untuk bertanya melalui kolom komentar, penulis sangat menyukai feedback apalagi jika feedback tersebut dapat memperbaiki penulisan agar mudah dipahami oleh pembaca lainnya di masa depan.

Leave a Reply

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