istek-widuri/web-basic
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First commit

Browse Source
This commit is contained in:
Dita Aji Pratama 2025-02-28 10:37:41 +07:00
commit d79d28719a
5 changed files with 261 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
about.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html> <!-- html5 -->
<html>
<head>
<title>Website personal saya yang sangat bermakna</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Meaningful heading</h1>
</header>
<nav>
<div class="kolom-samping">
<a class="menu-item" href="index.html">Home</a>
</div>
<div class="kolom-samping">
<a class="menu-item" href="about.html">About</a>
</div>
<div class="kolom-samping">
<a class="menu-item" href="product.html">Product</a>
</div>
<div class="kolom-samping">
<a class="menu-item" href="contact.html">Contact</a>
</div>
</nav>
<h1>Halaman About</h1>
</body>
</html>

45
contact.html Normal file
View File

@ -0,0 +1,45 @@
<!DOCTYPE html> <!-- html5 -->
<html>
<head>
<title>Website personal saya yang sangat bermakna</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Meaningful heading</h1>
</header>
<nav>
<div class="kolom-samping">
<a class="menu-item" href="index.html">Home</a>
</div>
<div class="kolom-samping">
<a class="menu-item" href="about.html">About</a>
</div>
<div class="kolom-samping">
<a class="menu-item" href="product.html">Product</a>
</div>
<div class="kolom-samping">
<a class="menu-item" href="contact.html">Contact</a>
</div>
</nav>
<address>
<h1>Kontak saya:</h1>
Jalan kebon jeruk baru, No 11 Rt 3 Rw 5, Jakarta Selatan
+62 80989999
aji@usaha.com
</address>
</body>
</html>

105
index.html Normal file
View File

@ -0,0 +1,105 @@
<!DOCTYPE html> <!-- html5 -->
<html>
<head>
<title>Website personal saya yang sangat bermakna</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Meaningful heading</h1>
</header>
<nav>
<div class="kolom-samping">
<a class="menu-item" href="index.html">Home</a>
</div>
<div class="kolom-samping">
<a class="menu-item" href="about.html">About</a>
</div>
<div class="kolom-samping">
<a class="menu-item" href="product.html">Product</a>
</div>
<div class="kolom-samping">
<a class="menu-item" href="contact.html">Contact</a>
</div>
</nav>
<!--
<div></div>
Alternative div:
<header></header> buat header diatas
<nav></nav> buat menu navigasi
<article></article> buat artikel
<section></section> Buat section, contoh: Call-to-Action, Testimonial, Our Clients, etc
<main></main> Buat container / bagian utamanya
<footer></footer> Buat footer bagian bawah
-->
<hr>
<button class="custom-button">Click here</button>
<button class="custom-button">Click here</button>
<hr>
<hr>
<h1>Macam-macam Tipografi HTML</h1>
<hr>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Paragraph</p>
<span>Text</span>,
<b>Bold</b>,
<strong>Strong</strong>,
<i>Italic</i>,
<em>Emphatized</em>,
<small>Small</small>,
<mark>Mark</mark>,
<del>Delete</del> and <ins>Insert</ins>,
<u>Underline</u>
<hr>
<table style="width: 100%;">
<tr>
<td style="border: solid black 2px;">
<h1>1</h1>
</td>
<td style="border: solid black 2px;">
<h1>2</h1>
</td>
</tr>
<tr>
<td style="border: solid black 2px;">
<h1>3</h1>
</td>
<td style="border: solid black 2px;">
<h1>4</h1>
</td>
</tr>
</table>
</body>
</html>

40
product.html Normal file
View File

@ -0,0 +1,40 @@
<!DOCTYPE html> <!-- html5 -->
<html>
<head>
<title>Website personal saya yang sangat bermakna</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- meta = Informasi yang diperuntukkan untuk keperluan Search Engine dalam mencari website kita -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<header>
<h1>Meaningful heading</h1>
</header>
<nav>
<div class="kolom-samping">
<a class="menu-item" href="index.html">Home</a>
</div>
<div class="kolom-samping">
<a class="menu-item" href="about.html">About</a>
</div>
<div class="kolom-samping">
<a class="menu-item" href="product.html">Product</a>
</div>
<div class="kolom-samping">
<a class="menu-item" href="contact.html">Contact</a>
</div>
</nav>
<h1>Halaman Product</h1>
</body>
</html>

31
style.css Normal file
View File

@ -0,0 +1,31 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
.custom-button {
margin: 0 ; /* Ngejarakin pada sisi luar */
padding: 10px ; /* Ngejarakin pada sisi dalam */
}
header {
background-color: #2E3440; /* Warna background */
color:#E5E9F0; /* Warna teks */
padding-top: 20px; /* Jarak atas */
padding-bottom: 30px; /* Jarak bawah */
text-align: center;
font-family: "Open Sans", serif;
}
nav {
padding-top: 20px; /* Jarak atas */
height: 50px; /* Tinggi */
background-color: #4C566A; /* Warna background */
}
.kolom-samping {
float: left;
width: 25%;
text-align: center;
}
.menu-item {
color:#E5E9F0;
}