HTML dan CSS adalah dasar dari web development. Mari pelajari cara membuat website dari nol.
HTML Basics
Struktur HTML
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Website Pertama Saya</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Heading dan Paragraf
<h1>Heading 1 (Terbesar)</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6 (Terkecil)</h6>
<p>Ini adalah paragraf pertama.</p>
<p>
Ini adalah paragraf kedua dengan <strong>teks tebal</strong> dan
<em>teks miring</em>.
</p>
Links dan Images
<!-- Links -->
<a href="https://example.com">Link External</a>
<a href="/about.html">Link Internal</a>
<a href="mailto:[email protected]">Email Link</a>
<a href="#section1">Anchor Link</a>
<!-- Images -->
<img src="gambar.jpg" alt="Deskripsi gambar" />
<img
src="https://example.com/image.png"
alt="Image dari URL"
width="300"
height="200"
/>
Lists
<!-- Unordered List -->
<ul>
<li>Item pertama</li>
<li>Item kedua</li>
<li>Item ketiga</li>
</ul>
<!-- Ordered List -->
<ol>
<li>Langkah pertama</li>
<li>Langkah kedua</li>
<li>Langkah ketiga</li>
</ol>
Semantic HTML
<header>
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
<a href="/contact">Contact</a>
</nav>
</header>
<main>
<article>
<h2>Judul Artikel</h2>
<p>Konten artikel...</p>
</article>
<aside>
<h3>Sidebar</h3>
<p>Konten sidebar...</p>
</aside>
</main>
<footer>
<p>© 2026 Website Saya</p>
</footer>
CSS Basics
CSS Selectors
/* Element selector */p {
color: blue;
}
/
Class selector /
.highlight {
background-color: yellow;
}
/
ID selector /
font-size: 24px;
}
/
Descendant selector /
nav a {
color: white;
}
/
Multiple selectors /
h1,
h2,
h3 {
font-family: Arial, sans-serif;
}
Colors dan Typography
/* Colors */.text {
color: #333333; /* Hex */ color: rgb(51, 51, 51); /* RGB */ color: rgba(51, 51, 51, 0.8); /* RGBA with opacity */ background-color: hsl(0, 0%, 90%); /* HSL */}
/
Typography /
body {
font-family: "Arial", sans-serif;
font-size: 16px;
font-weight: 400;
line-height: 1.6;
text-align: left;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
}
Box Model
.box {
/* Content */ width: 300px;
height: 200px;
/
Padding (inside) /
padding: 20px;
padding: 10px 20px; /
top-bottom left-right /
padding: 10px 20px 15px 25px; /
top right bottom left /
/
Border /
border: 1px solid #ccc;
border-radius: 8px;
/
Margin (outside) /
margin: 20px;
margin: 0 auto; /
Center horizontally /
/
Box sizing /
box-sizing: border-box;
}
Layout dengan Flexbox
Flexbox Basics
.container {
display: flex;
flex-direction: row; /* row, column, row-reverse, column-reverse */ justify-content: center; /* flex-start, flex-end, center, space-between, space-around */ align-items: center; /* flex-start, flex-end, center, stretch */ gap: 20px;
}
.item {
flex: 1; /
Grow equally /
flex-grow: 1;
flex-shrink: 0;
flex-basis: 200px;
}
Navigation dengan Flexbox
<nav class="navbar">
<div class="logo">Logo</div>
<ul class="nav-links">
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 2rem;
background-color: #333;
}
.logo {
color: white;
font-size: 1.5rem;
font-weight: bold;
}
.nav-links {
display: flex;
list-style: none;
gap: 2rem;
}
.nav-links a {
color: white;
text-decoration: none;
}
.nav-links a:hover {
color: #ffd700;
}
Layout dengan Grid
Grid Basics
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
gap: 20px;
}
.grid-item {
background: #f0f0f0;
padding: 20px;
}
/
Span multiple columns/rows /
.wide {
grid-column: span 2;
}
.tall {
grid-row: span 2;
}
Page Layout dengan Grid
.page-layout {
display: grid;
grid-template-columns: 250px 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
min-height: 100vh;
}
header {
grid-area: header;
}
aside {
grid-area: sidebar;
}
main {
grid-area: main;
}
footer {
grid-area: footer;
}
Responsive Design
Media Queries
/* Mobile first approach */.container {
width: 100%;
padding: 1rem;
}
/
Tablet /
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}
/
Desktop /
@media (min-width: 1024px) {
.container {
max-width: 960px;
}
}
/
Large Desktop /
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
Responsive Navigation
/* Mobile: Stack vertically */.nav-links {
display: none;
flex-direction: column;
}
.nav-links.active {
display: flex;
}
/
Desktop: Horizontal /
@media (min-width: 768px) {
.nav-links {
display: flex;
flex-direction: row;
}
}
Complete Example
HTML
<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Website Saya</title> <link rel="stylesheet" href="style.css" /> </head> <body> <header class="header"> <nav class="navbar"> <div class="logo">MySite</div> <ul class="nav-links"> <li><a href="/">Home</a></li> <li><a href="/about">About</a></li> <li><a href="/services">Services</a></li> <li><a href="/contact">Contact</a></li> </ul> </nav> </header><main> <section class="hero"> <h1>Selamat Datang</h1> <p>Website profesional untuk bisnis Anda</p> <a href="/contact" class="btn">Hubungi Kami</a> </section> <section class="services"> <h2>Layanan Kami</h2> <div class="service-grid"> <div class="service-card"> <h3>Web Design</h3> <p>Desain website modern dan responsif</p> </div> <div class="service-card"> <h3>Development</h3> <p>Pengembangan aplikasi web custom</p> </div> <div class="service-card"> <h3>SEO</h3> <p>Optimasi mesin pencari</p> </div> </div> </section> </main> <footer class="footer"> <p>&copy; 2026 MySite. All rights reserved.</p> </footer></body>
</html>CSS
* { margin: 0; padding: 0; box-sizing: border-box; }body { font-family: "Segoe UI", sans-serif; line-height: 1.6; color: #333; }
.header { background: #2c3e50; position: sticky; top: 0; }
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 1rem 2rem; max-width: 1200px; margin: 0 auto; }
.logo { color: white; font-size: 1.5rem; font-weight: bold; }
.nav-links { display: flex; list-style: none; gap: 2rem; }
.nav-links a { color: white; text-decoration: none; transition: color 0.3s; }
.nav-links a:hover { color: #3498db; }
.hero { background: linear-gradient(135deg, #3498db, #2c3e50); color: white; text-align: center; padding: 6rem 2rem; }
.hero h1 { font-size: 3rem; margin-bottom: 1rem; }
.btn { display: inline-block; background: #e74c3c; color: white; padding: 1rem 2rem; text-decoration: none; border-radius: 5px; margin-top: 1rem; transition: background 0.3s; }
.btn:hover { background: #c0392b; }
.services { padding: 4rem 2rem; max-width: 1200px; margin: 0 auto; }
.services h2 { text-align: center; margin-bottom: 2rem; }
.service-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.service-card { background: #f9f9f9; padding: 2rem; border-radius: 8px; text-align: center; }
.footer { background: #2c3e50; color: white; text-align: center; padding: 2rem; }
@media (max-width: 768px) { .nav-links { display: none; }
.hero h1 { font-size: 2rem; } }
Kesimpulan
HTML dan CSS adalah fondasi web development. Kuasai basics ini sebelum melanjutkan ke JavaScript dan framework seperti React atau Vue.
Ditulis oleh
Hendra Wijaya