Panduan Lengkap Belajar Coding HTML untuk Pemula

Belajar HTML (HyperText Markup Language) adalah langkah pertama yang sangat penting bagi siapa saja yang ingin terjun ke dunia web development. HTML adalah bahasa dasar yang digunakan untuk membuat dan mengatur konten di halaman web. Artikel ini akan memberikan panduan lengkap untuk belajar coding HTML dari dasar hingga dapat membuat halaman web sederhana.

Artikel ini merangkum materi dari kelas Belajar Dasar Pemrograman Web. Kamu bisa pelajari cara membuat website melalui penjelasan yang lebih detail dengan mengikuti kelas tersebut.

Pengenalan HTML

HTML (HyperText Markup Language) adalah bahasa standar yang digunakan untuk membuat dan merancang halaman web. Dalam dunia web development, HTML berfungsi sebagai kerangka dasar yang mendefinisikan struktur dan isi dari sebuah halaman web.

💻 Mulai Belajar Pemrograman

Belajar pemrograman di Dicoding Academy dan mulai perjalanan Anda sebagai developer profesional.

Daftar Sekarang

Dengan memahami dasar-dasar coding HTML, Anda dapat membuat konten web yang terorganisir dengan baik dan mudah diakses. Pada bagian ini, kita akan menjelajahi pengertian HTML, sejarah singkatnya, dan alasan untuk mempelajarinya sebagai langkah pertama dalam membangun situs web.

Apa Itu HTML?

HTML adalah bahasa markup yang digunakan untuk membuat dan menyusun struktur halaman web. HTML menggunakan elemen dan tag untuk menentukan cara konten diatur dan ditampilkan pada browser.

Sering kali, orang menganggap HTML sebagai bahasa pemrograman. Ini adalah salah kaprah. HTML adalah bahasa markup, bukan bahasa pemrograman. Bahasa pemrograman, seperti Python, JavaScript, atau C++ digunakan untuk menulis logika serta membuat program yang bisa melakukan perhitungan, pengambilan keputusan, dan manipulasi data.

Sebaliknya, HTML hanya digunakan untuk menentukan struktur dan tata letak konten di halaman web. HTML tidak memiliki kemampuan untuk membuat keputusan logis atau melakukan operasi aritmetika. Ia hanya menyediakan kerangka untuk konten yang akan ditampilkan di browser.

Sejarah Singkat HTML

HTML pertama kali diperkenalkan oleh Tim Berners-Lee pada tahun 1991. Versi pertama HTML (HTML 1.0) sangat sederhana. Seiring waktu, HTML berkembang menjadi HTML5 yang kita gunakan saat ini dengan banyak fitur baru dan peningkatan.

Mengapa HTML Penting dalam Pengembangan Web?

HTML adalah fondasi dari semua halaman web. Tanpa HTML, tidak ada struktur yang bisa diatur untuk menampilkan konten pada web. HTML memungkinkan kita untuk membuat teks, gambar, video, form, tabel, dan banyak elemen lainnya yang diperlukan untuk membangun website berfungsi penuh.

Struktur Dasar HTML

Struktur dasar HTML membentuk fondasi dari setiap halaman web. Dengan memahami elemen-elemen inti dan cara menyusunnya, kamu akan dapat membuat halaman web yang terorganisir dan fungsional.

HTML menggunakan berbagai tag untuk membuat elemen, seperti judul, paragraf, gambar, dan tautan. Setiap dokumen HTML dimulai dengan deklarasi doctype dan diikuti oleh elemen-elemen penting, seperti <html>, <head>, dan <body>.

Pada bagian ini, kita akan mempelajari struktur dasar dalam coding HTML lebih lanjut, yang mencakup tag-tag tersebut dan fungsinya untuk membentuk sebuah halaman web.

Elemen HTML dan Tag

HTML menggunakan tag untuk membuat elemen. Setiap tag memiliki fungsi khusus. Dalam coding HTML, tag biasanya terdiri dari tag pembuka <tag> dan tag penutup </tag>.

Struktur Dasar Dokumen HTML

Setiap dokumen HTML memiliki struktur dasar yang perlu diikuti. Berikut adalah contoh struktur dasar dari dokumen HTML.

<!DOCTYPE html>

<html>

<head>

<title>Judul Halaman</title>

</head>

<body>

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

<p>Ini adalah paragraf pertama saya.</p>

</body>

</html>

Berikut adalah penjelasan dari struktur dasar dokumen HTML tersebut.

<!DOCTYPE html>: Ini memberi tahu browser bahwa dokumen ini menggunakan HTML5.
<html>: Elemen root dari dokumen HTML.
<head>: Bagian yang berisi informasi meta tentang dokumen, seperti judul dokumen.
<title>: Ini adalah judul halaman yang ditampilkan pada tab browser.
<body>: Bagian berisi konten yang akan ditampilkan di halaman web.

Elemen Teks

Elemen teks dalam HTML digunakan untuk menyusun dan menampilkan konten teks di halaman web. Elemen-elemen ini memungkinkan kamu untuk mengatur teks dengan berbagai cara, yakni menambahkan judul, paragraf, daftar, kutipan, dan banyak lagi.

Dalam coding HTML, kamu akan menggunakan berbagai tag teks, seperti <h1> hingga <h6> untuk judul, <p> untuk paragraf, <ul> dan <ol> untuk list. Dengan memahami cara kerja elemen teks, kamu dapat membuat konten web yang lebih terstruktur dan mudah dibaca. Pada bagian ini, kita akan menjelajahi berbagai elemen teks yang tersedia dalam HTML dan cara menggunakannya secara efektif.

Tag Heading

Tag heading digunakan untuk membuat judul. Ada enam tingkat heading, mulai dari <h1> (yang terbesar) hingga <h6> (yang terkecil).

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Ketika dijalankan pada browser, kode di atas akan menghasilkan output sebagai berikut.

Tag Paragraf

Tag <p> digunakan untuk membuat paragraf. Sebuah paragraf selalu dimulai pada baris baru dan browser secara otomatis menambahkan ruang kosong (margin) di sekelilingnya. Jarak ini menciptakan pemisahan visual antara paragraf serta membuat teks lebih mudah dibaca dan terlihat lebih rapi di halaman web.

1	<p>Ini adalah sebuah paragraf.</p>

Tag untuk Teks Tebal (<strong>) dan Miring (<em>)

<strong>: Menampilkan teks dengan gaya tebal.
<em>: Menampilkan teks dengan gaya miring.

1 2	<p><strong>Teks ini tebal.</strong></p> <p><em>Teks ini miring.</em></p>

Tag untuk Membuat Baris Baru (<br>) dan Garis Horizontal (<hr>)

<br>: Membuat baris baru.
<hr>: Membuat garis horizontal.

<p>Ini adalah baris pertama.<br>Ini adalah baris kedua.</p>

<hr>

<p>Ini adalah paragraf setelah garis horizontal.</p>

Hyperlink dan Navigasi

Hyperlink dan navigasi adalah elemen penting dalam HTML yang memungkinkan pengguna untuk berpindah antar halaman web serta menjelajahi konten dengan mudah.

Hyperlink, yang dibuat dengan tag <a>, digunakan untuk menghubungkan satu halaman web ke halaman lainnya atau sumber eksternal. Navigasi yang efektif membantu pengguna menemukan informasi dengan cepat dan meningkatkan pengalaman pengguna secara keseluruhan.

Tag <a> dan Atribut href

Tag <a> digunakan untuk membuat tautan. Atribut href menentukan tujuan tautan.

1	<a href="https://www.dicoding.com">Kunjungi Website</a>

Membuat Tautan ke Halaman Lain

Kamu dapat membuat tautan ke halaman lain pada website yang sama.

1	<a href="halaman-lain.html">Halaman Lain</a>

Membuat Tautan ke Bagian Tertentu dalam Halaman yang Sama (Anchor Links)

Gunakan atribut id untuk menetapkan sebuah ID ke elemen dan tautkan dengan menggunakan #ID.

1 2	<h2 id="section1">Bagian 1</h2> <p><a href="#section1">Pergi ke Bagian 1</a></p>

Gambar dan Multimedia

Gambar dan elemen multimedia adalah komponen kunci yang dapat memperkaya konten halaman web, membuatnya lebih menarik dan interaktif. Dalam coding HTML, kamu dapat menggunakan tag <img> untuk menyisipkan gambar, serta elemen-elemen, seperti <audio> dan <video>, untuk menambahkan file audio dan video ke halaman web.

Menyertakan gambar dan multimedia tidak hanya membuat situs web lebih menarik secara visual, tetapi juga membantu dalam menyampaikan informasi dengan lebih efektif.

Tag <img> dan Atribut src serta alt

Tag <img> digunakan untuk menampilkan gambar. Atribut src menentukan sumber gambar, sedangkan alt memberikan deskripsi alternatif pada gambar.

1	<img src="gambar.jpg" alt="Deskripsi Gambar">

Menambahkan Video dan Audio dengan Tag <video> dan <audio>

<video>: Menambahkan video.
<audio>: Menambahkan audio.

1 2	<video src="video.mp4" controls></video> <audio src="audio.mp3" controls></audio>

List

List atau daftar adalah cara efektif untuk menyusun informasi dalam format yang mudah dibaca dan dipahami. Dalam coding HTML, kamu memiliki beberapa pilihan untuk membuat daftar, mulai dari daftar berurutan (ordered list) menggunakan tag <ol>, daftar tidak berurutan (unordered list) menggunakan tag <ul>, hingga daftar istilah (description list) menggunakan tag <dl>.

Setiap jenis daftar memiliki kegunaan tersendiri, misalnya untuk menampilkan langkah-langkah dalam suatu proses, mencantumkan item yang tidak memiliki urutan tertentu, atau memberikan definisi.

Unordered List

Tag <ul> digunakan untuk membuat daftar tidak berurutan (unordered list) dan setiap item dalam daftar menggunakan tag <li>.

<ul>

<li>Item Pertama</li>

<li>Item Kedua</li>

<li>Item Ketiga</li>

</ul>

Ordered List

Kamu dapat menggunakan tag <ol> untuk membuat sebuah daftar berurutan (dengan nomor urut, baik berupa angka maupun huruf).

<ol>

<li>Item Pertama</li>

<li>Item Kedua</li>

<li>Item Ketiga</li>

</ol>

Description Lists

Description lists adalah sebuah daftar istilah (term), yang di dalamnya setiap istilah (term) disertai dengan deskripsinya (description). Description lists digunakan untuk memberikan penjelasan atau definisi yang jelas dan terstruktur bagi setiap istilah terdaftar.

Format ini membantu pembaca memahami konteks dan makna dari setiap istilah secara lebih mendalam. Tag <dl> digunakan untuk membuat description lists, <dt> untuk istilah, dan <dd> untuk deskripsi.

<dl>

<dd>HyperText Markup Language</dd>

<dd>Cascading Style Sheets</dd>

</dl>

Tabel

Tabel adalah elemen yang berguna untuk menyusun data dalam format baris dan kolom terstruktur. Ini memudahkan pembaca untuk melihat dan menganalisis informasi. Dalam coding HTML, tabel dibuat menggunakan tag <table>, dengan elemen-elemen tertentu, seperti <tr> untuk baris, <td> untuk sel data, dan <th> untuk header tabel.

Tabel dapat digunakan untuk berbagai tujuan, mulai dari menampilkan jadwal, daftar harga, hingga data statistik. Selain itu, tabel juga dapat dipercantik menggunakan CSS untuk meningkatkan tampilan dan keterbacaannya.

Dasar Pembuatan Tabel

Untuk membuat sebuah tabel, kita dapat menggunakan tag <table>. Setiap baris tabel menggunakan tag <tr> dan setiap sel menggunakan tag <td> (untuk data) atau <th> (untuk header).

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

Menggabungkan Kolom (Colspan) dan Baris (Rowspan)

Atribut colspan dan rowspan digunakan untuk menggabungkan beberapa kolom dan baris pada sebuah tabel.

<table>

<tr>

<th colspan="2">Header Tabel</th>

</tr>

<tr>

</tr>

<tr>

<td rowspan="2">Data Gabungan</td>

</tr>

<tr>

</tr>

</table>

Kode di atas akan menghasilkan stuktur tabel seperti berikut.

Header Tabel
Data 1	Data 2
Data Gabungan	Data 3
	Data 4

Form

Sebuah form digunakan untuk mendapatkan input pengguna. Input dari pengguna ini biasanya dikirim ke server untuk diproses. Form memiliki sebuah atribut dengan nama action untuk mendefinisikan tindakan yang akan dilakukan ketika form dikirim. Biasanya, data form dikirim ke file di server ketika pengguna mengklik tombol submit.

Dasar Pembuatan Form

Untuk membuat sebuah form, kita dapat menggunakan tag <form> dan elemen-elemen input menggunakan tag, seperti <input>, <textarea>, dan <button>.

<label for="email">Email:</label>

<label for="pesan">Pesan:</label>

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

</form>

Elemen Input

Sebuah form dapat berisi satu atau lebih elemen input yang umum digunakan sebagai berikut.

Input teks: <input type=”text”>
Input password: <input type=”password”>
Radio button: <input type=”radio”>
Checkbox: <input type=”checkbox”>
Dropdown select: <select><option></option></select>

<form>

<label for="gender">Gender:</label>

<input type="radio" id="male" name="gender" value="male"> Male

<input type="radio" id="female" name="gender" value="female"> Female

<br>

<label for="hobbies">Hobbies:</label>

<input type="checkbox" id="sports" name="hobbies" value="sports"> Sports

<input type="checkbox" id="music" name="hobbies" value="music"> Music

<br>

<label for="country">Country:</label>

<option value="indonesia">Indonesia</option>

</select>

</form>

Ketika dijalankan, kode di atas akan menghasilkan output sebagai berikut pada browser.

Atribut/Properti

Setiap elemen HTML dapat memiliki banyak atribut, yaitu informasi tambahan terkait elemen HTML tersebut. Atribut hanya dapat didefinisikan pada tag pembuka dan biasanya memiliki format name/value. Ada beberapa atribut yang umum digunakan sebagai berikut.

id: Memberikan identitas unik pada elemen.
class: Mengelompokkan elemen untuk tujuan styling.
style: Menambahkan CSS inline.
title: Menampilkan teks tooltip saat elemen di-hover.

1	<p id="paragraf1" class="teks-besar" style="color: red;" title="Ini adalah paragraf">Contoh Paragraf</p>

Kode di atas akan menampilkan hasil sebagai berikut pada browser.

Penggunaan Atribut Data (data-*)

Atribut data-* digunakan untuk menyimpan data kustom pada elemen.

1	<div data-info="informasi tambahan">Contoh Data</div>

Semantik HTML

Semantik HTML merujuk pada penggunaan elemen HTML yang jelas menggambarkan tujuan dan makna dari konten yang dikandungnya. Elemen semantik, seperti <header>, <nav>, <article>, <section>, dan <footer>, diperkenalkan dalam HTML5 untuk meningkatkan struktur dan keterbacaan dokumen web.

Dengan menggunakan elemen-elemen semantik, tidak hanya membantu browser memahami struktur halaman secara lebih baik, tetapi juga meningkatkan aksesibilitas dan SEO.

Elemen Semantik pada HTML5

HTML5 memperkenalkan elemen-elemen semantik yang dirancang untuk meningkatkan keterbacaan dan struktur dokumen web dalam coding HTML. Elemen semantik memberikan konteks yang jelas kepada browser dan mesin pencari mengenai jenis konten yang dikandungnya, yang pada gilirannya meningkatkan aksesibilitas dan SEO.

Berikut adalah beberapa elemen semantik yang penting pada HTML5.

Tag <header>: Bagian pembuka atau pengantar dari sebuah halaman atau bagian dokumen. Biasanya digunakan untuk menampung judul, logo, atau navigasi utama.
Tag <nav>: Bagian yang berisi tautan navigasi utama. Dapat digunakan untuk menyusun menu navigasi utama atau sekunder.
Tag <main>: Bagian utama dari konten halaman. Hanya ada satu elemen <main> dalam satu halaman, yang berisi konten utama.
Tag <article>: Bagian yang mandiri dan terpisah dari konten lainnya, seperti artikel berita atau posting blog. Cocok untuk konten yang bisa berdiri sendiri dan dibagikan secara terpisah.
Tag <section>: Bagian dari dokumen yang mengelompokkan konten terkait. Ini digunakan untuk mengelompokkan konten dengan tema yang sama.
Tag <aside>: Bagian yang berisi informasi tambahan atau catatan samping. Ini biasanya digunakan untuk sidebar, iklan, atau informasi terkait yang tidak termasuk bagian utama dari konten.
Tag <footer>: Bagian penutup dari dokumen atau bagian dokumen. Biasanya berisi informasi kontak, hak cipta, atau tautan ke halaman penting.

Manfaat Penggunaan Elemen Semantik

Beberapa manfaat dengan menggunakan elemen semantik pada HTML5 sebagai berikut.

SEO yang lebih baik. Mesin pencari seperti Google dapat memahami konten halaman dengan lebih baik sehingga meningkatkan peringkat pencarian.
Aksesibilitas yang meningkat. Penggunaan elemen semantik membuat konten lebih mudah diakses oleh pembaca layar dan alat bantu lainnya serta membantu pengguna dengan kebutuhan khusus.
Keterbacaan kode yang lebih baik. Kode HTML yang menggunakan elemen semantik lebih mudah dibaca serta dipahami oleh developer sehingga mempermudah pemeliharaan dan pengembangan lebih lanjut.
Struktur dokumen yang jelas. Dengan elemen semantik, struktur dokumen menjadi lebih jelas, membuat halaman lebih terorganisir dan konsisten.

Pengantar CSS

Dengan CSS, kamu dapat mengontrol tata letak, warna, font, dan berbagai aspek visual lainnya dari elemen-elemen HTML. Dalam coding HTML, CSS memungkinkan untuk memisahkan konten dari presentasi sehingga memudahkan pengelolaan dan pemeliharaan situs web. CSS juga memungkinkan penerapan desain yang konsisten di seluruh halaman situs web melalui penggunaan selector, class, dan ID.

Pengertian CSS dan Hubungannya dengan HTML

CSS (Cascading Style Sheets) adalah bahasa yang digunakan untuk mengatur tampilan dan layout halaman web. CSS bekerja bersama HTML untuk mengatur cara elemen-elemen HTML ditampilkan.

Untuk memahami perbedaan antara HTML dan CSS, mari kita gunakan perumpamaan sebuah bangunan rumah. Anggaplah HTML sebagai kerangka dan struktur dasar sebuah rumah. HTML adalah fondasi, dinding, dan atap rumah tersebut. Elemen-elemen HTML seperti bata, semen, dan rangka kayu yang menyusun struktur rumah.

CSS adalah sesuatu yang memberi gaya pada rumah tersebut. CSS adalah cat, dekorasi, dan segala sesuatu yang membuat rumah terlihat indah dan nyaman. CSS mengatur cara elemen HTML ditampilkan di halaman web, termasuk warna, ukuran, posisi, dan gaya teks.

Cara Penggunaan CSS

Untuk menambahkan CSS ke dalam sebuah dokumen HTML, kita dapat melakukannya melalui tiga cara berikut.

Inline CSS: Menggunakan atribut style langsung pada elemen HTML.

1	<p style="color: red;">Teks merah</p>

Internal CSS: Menggunakan elemen <style> dalam tag <head>.

<head>

<style>

p { color: blue; }

</style>

</head>

Eksternal CSS: Menggunakan file CSS terpisah.

<head>

</head>

CSS Selector

CSS selector digunakan untuk memilih elemen HTML yang ingin kamu beri gaya tertentu. Dengan menggunakan selector, kamu dapat dengan mudah mengatur tampilan dan layout elemen-elemen di halaman web. CSS selector ini terbagi menjadi lima kategori utama sebagai berikut.

Simple selectors (memilih elemen berdasarkan name, id, dan class).
Combinator selectors (memilih elemen berdasarkan hubungan tertentu yang dimiliki antar elemen).
Pseudo-class selectors (memilih elemen berdasarkan status yang dimiliki elemen, misal ketika elemen di-hover).
Pseudo-elements selectors (memilih dan memberikan gaya pada bagian suatu elemen, misal memberi warna merah untuk baris pertama dari paragraf).
Attribute selectors (memilih elemen berdasarkan atribut atau nilai atribut yang dimiliki).

Properti CSS Umum

Dalam mengembangkan suatu halaman web, kamu akan sering menggunakan beberapa properti CSS umum berikut.

color: mendefinisikan warna teks.
font-family: mendefinisikan jenis font.
font-size: mendefinisikan ukuran font.
border: mendefinisikan border di sekitar elemen HTML.
padding: mendefinisikan padding (jarak) antara teks dengan border.
margin: mendefinisikan margin (jarak) antara border satu elemen dengan elemen lainnya.

Latihan Membuat Halaman Web Sederhana

Dalam proyek ini, kamu akan belajar cara membangun halaman profil yang menarik serta fungsional dengan menggunakan elemen-elemen dasar dalam coding HTML dan CSS. Pada proyek ini, kita juga akan menambahkan formulir kontak yang memungkinkan pengunjung untuk mengirimkan pesan langsung.

Dengan mengikuti langkah-langkah dalam tutorial ini, kamu akan memahami cara struktur HTML dan styling CSS bekerja bersama-sama untuk menciptakan halaman web yang profesional. Mari kita mulai!

Struktur File dan Folder

Langkah awal yang perlu dipersiapkan adalah membuat file dan folder yang dibutuhkan. Silakan buat file dan folder dengan nama struktur sebagai berikut.

Coding HTML pada File index.html

Langkah selanjutnya adalah menambahkan coding HTML dalam file index.html. File ini akan menjadi entry point dari halaman web yang kita buat. Buka file menggunakan text editor yang kamu sukai, seperti Visual Studio Code misalnya. Kemudian ketikkan kode berikut.

<!DOCTYPE html>

<head>

<title>Profile Page</title>

</head>

<body>

<h1>Nanang Sutisna</h1>

<p class="title">Web Developer</p>

</header>

<main>

<h2>About Me</h2>

<p>Hello! I'm Nanang, a passionate web developer with over 5 years of experience in creating dynamic and responsive websites. I love coding and learning new technologies.</p>

</section>

<h2>Contact Information</h2>

<ul>

<li>Email: nanang@dicoding.com</li>

<li>Phone: +62-8888-8888</li>

<li>Location: Cilegon, Banten</li>

</ul>

</section>

<h2>Follow Me</h2>

<a href="https://www.linkedin.com/in/nanang-sutisna-3191885b/" target="_blank">LinkedIn</a>

<a href="https://github.com/emresutisna" target="_blank">GitHub</a>

</section>

<h2>Contact Me</h2>

<label for="email">Email:</label>

<label for="message">Message:</label>

<button type="submit">Send Message</button>

</form>

</section>

</main>

</footer>

</div>

</body>

</html>

Menambahkan Kode pada File styles.css

Jika kamu perhatikan isi kode pada file index.html, kita akan menggunakan sebuah file CSS eksternal dengan nama styles.css dalam mengatur gaya dan layout halaman web. Untuk itu, silakan buka file styles.css yang telah dibuat sebelumnya menggunakan text editor dan lengkapi dengan kode berikut.

100

101

102

103

104

105

/* Reset some default styles */

body, h1, h2, p, ul, form, label, input, textarea, button {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: Arial, sans-serif;

line-height: 1.6;

background-color: #f4f4f4;

}

.container {

width: 80%;

margin: auto;

overflow: hidden;

}

header {

text-align: center;

padding: 20px;

background-color: #333;

color: #fff;

}

.profile-img {

width: 150px;

height: 150px;

border-radius: 50%;

margin-bottom: 10px;

}

.title {

font-size: 1.2em;

margin-top: 5px;

color: #ccc;

}

main {

padding: 20px;

background: #fff;

margin-top: 20px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

}

.bio, .contact, .social-media, .contact-form {

margin-bottom: 20px;

}

h2 {

color: #333;

margin-bottom: 10px;

}

.contact ul {

list-style: none;

}

.social-media a {

display: inline-block;

margin-right: 10px;

color: #333;

text-decoration: none;

font-weight: bold;

}

.social-media a:hover {

text-decoration: underline;

}

.contact-form label {

display: block;

margin-top: 10px;

margin-bottom: 5px;

}

.contact-form input, .contact-form textarea {

width: 100%;

padding: 10px;

margin-bottom: 10px;

border: 1px solid #ccc;

border-radius: 4px;

}

.contact-form button {

padding: 10px 20px;

background-color: #333;

color: #fff;

border: none;

border-radius: 4px;

cursor: pointer;

}

.contact-form button:hover {

background-color: #555;

}

footer {

text-align: center;

padding: 10px;

background: #333;

color: #fff;

margin-top: 20px;

}

Cara Menjalankan Proyek

Untuk menjalankan proyek yang telah dibuat, kamu bisa mengikuti langkah berikut.

Jangan lupa simpan gambar profil kamu sebagai profile.jpeg dalam folder profile-page. Ukuran gambar yang disarankan adalah 150×150 piksel.
Buka file index.html pada browser untuk melihat halaman profil yang sudah dibuat.
Untuk menangani pengiriman form, kamu bisa membuat file submit_form.php dalam server, atau jika tidak ada server PHP, form ini hanya akan mengarahkan ke halaman yang tidak ditemukan.

Setelah mengikuti langkah di atas, browser kamu kurang lebih akan menampilkan sebuah halaman web seperti ini.

Kesimpulan dan Langkah Selanjutnya

Kamu telah mempelajari dasar-dasar coding HTML, mulai dari struktur dokumen, elemen teks, gambar, tautan, daftar, tabel, form, atribut, elemen semantik, hingga pengantar CSS.

Dengan memahami dan mempraktikkan materi dalam artikel ini, kamu akan memiliki dasar yang kuat untuk melanjutkan belajar web development dan membangun halaman web yang lebih kompleks. Selamat belajar!