Contoh Script HTML Website Keren

• menit membaca

Daftar Isi

Memiliki website merupakan kebutuhan bagi banyak orang. Website dapat digunakan untuk berbagai macam keperluan, seperti untuk mempromosikan bisnis, portofolio, blog, atau bahkan hanya untuk bersenang-senang.

Namun, membuat website yang keren dan menarik tidaklah mudah. Diperlukan pengetahuan dan keterampilan dalam bahasa pemrograman, seperti HTML. Bagi pemula, mempelajari HTML mungkin terasa sulit dan membingungkan.

Oleh karena itu, disini saya akan membahas tentang contoh script HTML website keren yang dapat digunakan oleh pemula untuk membuat website yang menarik dan mudah digunakan.

Pengenalan HTML

Apa itu HTML?

HTML (HyperText Markup Language) adalah bahasa pemrograman dasar untuk membuat halaman web.

HTML digunakan untuk mendefinisikan struktur dan konten halaman web, seperti heading, paragraf, gambar, dan tautan.

Bagaimana Cara Kerja HTML?

HTML terdiri dari tag-tag yang diletakkan di dalam kurung sudut (< >). Tag-tag ini digunakan untuk mendefinisikan elemen-elemen pada halaman web.

Contohnya, tag <p> digunakan untuk membuat paragraf, tag <h1> digunakan untuk membuat heading level 1, dan tag <img> digunakan untuk menyisipkan gambar.

Struktur Dasar Dokumen HTML

Dokumen HTML memiliki struktur dasar sebagai berikut:

<!DOCTYPE html>
<html>
<head>
<title>Judul Halaman</title>
</head>
<body>
</body>
</html>

Tag-Tag HTML yang Umum Digunakan

Berikut adalah beberapa tag HTML yang umum digunakan:

<p>: untuk membuat paragraf
<h1>, <h2>, <h3>, ..., <h6>: untuk membuat heading
<img>: untuk menyisipkan gambar
<a>: untuk membuat tautan
<ul>: untuk membuat daftar tidak berurutan
<ol>: untuk membuat daftar berurutan
<table>: untuk membuat tabel

Contoh Script HTML Website Keren

Berikut adalah beberapa contoh script HTML website keren yang dapat digunakan oleh pemula:

1. Script HTML Website Portofolio

Berikut adalah contoh skrip HTML untuk website portofolio yang modern dan keren. Saya juga akan menyediakan hasil dari skrip ini sehingga Anda bisa melihat bagaimana tampilan akhirnya.

Skrip ini akan menggunakan beberapa elemen HTML dan CSS untuk menciptakan tampilan yang menarik.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Portfolio</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
color: #333;
}
header {
background-color: #f8f9fa;
padding: 1rem;
text-align: center;
border-bottom: 1px solid #ddd;
}
header h1 {
margin: 0;
}
nav {
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1rem;
}
nav a {
text-decoration: none;
color: #007bff;
}
.container {
max-width: 1000px;
margin: 2rem auto;
padding: 1rem;
}
.about,
.projects,
.contact {
margin-bottom: 2rem;
}
.about h2,
.projects h2,
.contact h2 {
border-bottom: 2px solid #007bff;
padding-bottom: .5rem;
}
.projects {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.project {
border: 1px solid #ddd;
border-radius: 5px;
padding: 1rem;
width: calc(33% - 2rem);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.project img {
max-width: 100%;
border-radius: 5px;
}
footer {
background-color: #f8f9fa;
text-align: center;
padding: 1rem;
border-top: 1px solid #ddd;
}
</style>
</head>
<body>
<header>
<h1>My Portfolio</h1>
<nav>
<a href="#about">About</a>
<a href="#projects">Projects</a>
<a href="#contact">Contact</a>
</nav>
</header>
<div class="container">
<section id="about" class="about">
<h2>About Me</h2>
<p>Hello! I'm [Your Name], a passionate web developer with experience in creating dynamic and responsive websites. I enjoy turning complex problems into simple, beautiful, and intuitive designs.</p>
</section>
<section id="projects" class="projects">
<h2>Projects</h2>
<div class="project">
<img src="https://via.placeholder.com/300" alt="Project 1">
<h3>Project 1</h3>
<p>A brief description of the project. It's a web application built with HTML, CSS, and JavaScript.</p>
</div>
<div class="project">
<img src="https://via.placeholder.com/300" alt="Project 2">
<h3>Project 2</h3>
<p>A brief description of the project. It's a mobile app designed for both iOS and Android platforms.</p>
</div>
<div class="project">
<img src="https://via.placeholder.com/300" alt="Project 3">
<h3>Project 3</h3>
<p>A brief description of the project. It's an e-commerce website with a focus on user experience.</p>
</div>
</section>
<section id="contact" class="contact">
<h2>Contact Me</h2>
<p>If you'd like to get in touch, feel free to reach out via email at [your.email@example.com] or connect with me on LinkedIn.</p>
</section>
</div>
<footer>
<p>© 2024 My Portfolio. All rights reserved.</p>
</footer>
</body>
</html>

Hasil

Header: Menampilkan nama portofolio Anda dengan tautan navigasi ke bagian "About", "Projects", dan "Contact".
About Me: Bagian ini menjelaskan secara singkat tentang diri Anda dan latar belakang profesional Anda.
Projects: Menampilkan tiga proyek dengan gambar, judul, dan deskripsi singkat. Setiap proyek diatur dalam layout grid yang responsif.
Contact Me: Memberikan informasi kontak seperti email dan tautan ke profil LinkedIn Anda.
Footer: Menampilkan informasi hak cipta.

Anda dapat menyesuaikan teks, gambar, dan tautan sesuai kebutuhan Anda. Untuk melihat hasilnya, salin skrip di atas ke dalam file HTML dan buka file tersebut di browser Anda.

2. Script HTML Website Keren dengan Formulir dan Tabel

<!DOCTYPE html>
<html>
<head>
<title>Website dengan Formulir dan Tabel</title>
</head>
<body>
<form action="action.php" method="post">
<label for="nama">Nama:</label>
<input type="text" id="nama" name="nama">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

<input type="submit" value="Kirim">
</form>

<table>
<tr>
<th>Nama</th>
<th>Email</th>
</tr>
<tr>
<td>Nama 1</td>
<td>email1@example.com</td>
</tr>
<tr>
<td>Nama 2</td>
<td>email2@example.com</td>
</tr>
</table>
</body>
</html>

Penutup

HTML adalah bahasa pemrograman dasar yang penting untuk dipelajari jika Anda ingin membuat website.

Dengan sedikit usaha dan dedikasi, Anda dapat membuat website yang keren dan menarik menggunakan HTML.

Mulailah dengan contoh script HTML yang disediakan dalam artikel ini dan teruslah berlatih untuk meningkatkan kemampuan Anda.