<!
DOCTYPE html>
<html>
<head>
<title>Landing Page [Link]</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<div class="navbar">
<div class="left">
<div class="icon">
Makinrajin
</div>
<div class="menu">
Home | Our Services | About | Contact Us
</div>
</div>
<div class="button">
<a href="" class="order">Order Now!</a>
</div>
</div>
<div class="background">
<div class="backdrop"></div>
</div>
<div class="jumbotron">
<h2>This is A Simple Landing Page!</h2>
<p>Let's Explore My Website. Find something new on search bar below!</p>
<form action="" method="post">
<input type="text" class="search">
<button type="submit">Search</button>
</form>
</div>
</body>
</html>
CSS
body {
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
.navbar {
color: white;
display: flex;
justify-content: space-between;
background-color: rgb(0, 174, 255);
margin: -10px;
padding: 20px 150px;
}
.left {
width: 500px;
display: flex;
justify-content: space-between;
.background{
position: absolute;
z-index: -1;
margin-left: -10px;
background-image: url([Link]
auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
width: 100%;
height: 100%;
.backdrop{
position: absolute;
margin-left: -10px;
width: 100%;
height: 100%;
background-color:rgba(0, 0, 0, 0.8);
}
.jumbotron {
color: white;
text-align: center;
.jumbotron h2{
margin-top: 200px;
font-size: 60px;
form input{
width: 500px;
height: 30px;
form button{
border: none;
width: 100px;
height: 36px;
margin-left: -5px;
font-size: 16px;
background-color: rgb(0, 174, 255);
color: white;
font-weight: bold;
}
[Link] {
border: solid 1px;
text-decoration: none;
padding: 5px;
transition: 0.5s;
[Link]:hover{
border-radius: 100px;
background-color: white;
color: rgb(0, 174, 255);
transition: 0.5s;
padding: 5px 20px;
HTML
Logo Gamelab
BERITA PROGRAMMING Membuat Website Menggunakan HTML dan CSS
Membuat Website Menggunakan HTML dan CSS
Oleh LINTANG CAHYA MAHARANI | Minggu, 25 April 2021
Membuat Website Menggunakan HTML dan CSS
Website adalah salah satu media masa yang cukup digemari di masa sekarang, terlebih lagi website
dengan jenis blog dan juga website jualan. Lalu, bagaimana sih cara untuk membuat website itu?
Daftar Isi Artikel
Apa itu website?
Membuat Website Menggunakan HTML dan CSS
Membuat wireframe / kerangka website
Menginstal text editor
Membuat folder baru
Membuat file index
Membuat file style
6. Hubungkan file css dengan file html
Apa itu website?
Website, adalah situs dalam internet yang dapat diakses secara luas dan berisi beberapa halaman yang
menghubungkan seseorang dalam wilayah atau daerah yang berbeda. Website, juga sering kali dijadikan
tempat untuk mempromosikan barang atau jasa yang tidak perlu langsung mendatangkan orang kesuatu
wilayah atau daerah tersebut. Selain itu, website juga memiliki beberapa jenis yang memiliki fungsi yang
berbeda-beda.
Website pribadi atau Blog,
Website toko online,
Website perusahaan, dll.
Jenis-jenis website sangatlah beragam, tergantung fungsi dari website yang kita buat itu digunakan
untuk apa. Namun, banyaknya jenis website yang ada yang sering kita temui adalah tiga jenis yang
sudah disebutkan di atas. Membuat website ternyata ada beberapa cara yaitu dengan menggunakan
coding dan juga ada yang menggunakan cara instant tanpa menggunakan coding. Nah, di masa sekarang
ini cara yang sering dilakukan adalah membuat website dengan cara instant yang tanpa menggunakan
coding, tetapi yang akan kita pelajari sekarang adalah cara membuat website menggunakan HTML dan
CSS. Bagaimana ya caranya? Yuk kita simak sama-sama.
Baca Juga : Sering Dengar Kata Cache? Ini Definisi dan Manfaatnya
Membuat Website Menggunakan HTML dan CSS
Membuat wireframe / kerangka website
Langkah yang pertama ini adalah membuat wireframe. Apa gunanya? Membuat wireframe sebelum
membuat website dapat memudahkan kita dalam pemubuatan website agar tidak bingung akan dibuat
desain seperti apa website kita nantinya. Membuat wireframe tidak perlu bagus, asalkan dapat
mencakup semua isi dari website kalian nantinya dan tentunya dapat dijadikan patokan nantinya saat
membuat.
Menginstal text editor
Langkah kedua inilah yang paling penting. Kalian harus menginstal terlebih dahulu aplikasi coding yang
ingin digunakan, jika aplikasinya saja tidak punya gimana mau membuat website?
Membuat folder baru
Membuat folder ini dapat memudahkan kita untuk menyimpan hasil codingan kita nantinya agar tidak
tercampur dengan file lainnya. Di folder inilah kalian dalam menyimpan semua hasil codingan yang telah
dibuat dan juga file gambar yang akan digunakan untuk membuat website.
Membuat file index
Buatlah sebuah file dengan nama [Link] pada text editor yang kalian sukai atau yang telah diinstal.
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<header> </header>
<nav> </nav>
<article> </article>
<footer> </footer>
</body>
</html>
CSS
Logo Gamelab
BERITA PROGRAMMING Membuat Website Menggunakan HTML dan CSS
Membuat Website Menggunakan HTML dan CSS
Oleh LINTANG CAHYA MAHARANI | Minggu, 25 April 2021
Membuat Website Menggunakan HTML dan CSS
Website adalah salah satu media masa yang cukup digemari di masa sekarang, terlebih lagi website
dengan jenis blog dan juga website jualan. Lalu, bagaimana sih cara untuk membuat website itu?
Daftar Isi Artikel
Apa itu website?
Membuat Website Menggunakan HTML dan CSS
Membuat wireframe / kerangka website
Menginstal text editor
Membuat folder baru
Membuat file index
Membuat file style
6. Hubungkan file css dengan file html
Apa itu website?
Website, adalah situs dalam internet yang dapat diakses secara luas dan berisi beberapa halaman yang
menghubungkan seseorang dalam wilayah atau daerah yang berbeda. Website, juga sering kali dijadikan
tempat untuk mempromosikan barang atau jasa yang tidak perlu langsung mendatangkan orang kesuatu
wilayah atau daerah tersebut. Selain itu, website juga memiliki beberapa jenis yang memiliki fungsi yang
berbeda-beda.
Website pribadi atau Blog,
Website toko online,
Website perusahaan, dll.
Jenis-jenis website sangatlah beragam, tergantung fungsi dari website yang kita buat itu digunakan
untuk apa. Namun, banyaknya jenis website yang ada yang sering kita temui adalah tiga jenis yang
sudah disebutkan di atas. Membuat website ternyata ada beberapa cara yaitu dengan menggunakan
coding dan juga ada yang menggunakan cara instant tanpa menggunakan coding. Nah, di masa sekarang
ini cara yang sering dilakukan adalah membuat website dengan cara instant yang tanpa menggunakan
coding, tetapi yang akan kita pelajari sekarang adalah cara membuat website menggunakan HTML dan
CSS. Bagaimana ya caranya? Yuk kita simak sama-sama.
Baca Juga : Sering Dengar Kata Cache? Ini Definisi dan Manfaatnya
Membuat Website Menggunakan HTML dan CSS
Membuat wireframe / kerangka website
Langkah yang pertama ini adalah membuat wireframe. Apa gunanya? Membuat wireframe sebelum
membuat website dapat memudahkan kita dalam pemubuatan website agar tidak bingung akan dibuat
desain seperti apa website kita nantinya. Membuat wireframe tidak perlu bagus, asalkan dapat
mencakup semua isi dari website kalian nantinya dan tentunya dapat dijadikan patokan nantinya saat
membuat.
Menginstal text editor
Langkah kedua inilah yang paling penting. Kalian harus menginstal terlebih dahulu aplikasi coding yang
ingin digunakan, jika aplikasinya saja tidak punya gimana mau membuat website?
Membuat folder baru
Membuat folder ini dapat memudahkan kita untuk menyimpan hasil codingan kita nantinya agar tidak
tercampur dengan file lainnya. Di folder inilah kalian dalam menyimpan semua hasil codingan yang telah
dibuat dan juga file gambar yang akan digunakan untuk membuat website.
Membuat file index
Buatlah sebuah file dengan nama [Link] pada text editor yang kalian sukai atau yang telah diinstal.
<!DOCTYPE html>
<html>
<head>
<title> </title>
</head>
<body>
<header> </header>
<nav> </nav>
<article> </article>
<footer> </footer>
</body>
</html>
Title: isikan judul untuk nama file tersebut
Header: untuk membuat header atau judul awal website
Nav: untuk membuat navbar/ navigasi bar pada website
Article: membuat konten isi dari website yang akan dibuat
Footer: membuat footer duntuk di bagian bawah website
Membuat file style
Setelah membuat file [Link] selanjutkan kalian dapat membuat file dengan nama [Link] pada text
editor yang sama dan tentunya juga pada folder yang sama pula. Dalam file [Link] ini kita isikan
dengan deskripsi dari file [Link] yang berisikan spesifikasinya dari header, navbar, konten, dan juga
footer.
body {
font-family: bold italic;
background: #A3CC7A;
padding: 0;
margin:0;
.container {
width: 100%;
height: auto;
background: white;
margin:auto;
margin-top: 15px;
padding-bottom: 5px;
.logo {
font-size: 350px;
padding: 30px 0 30px 10px;
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #8DBC5D;
border: 1px solid gainsboro;
nav li {
float: left;
nav li a {
display: inline-block;
color:#ffffff;
text-align: center;
padding: 14px 15px;
text-decoration: none;
nav li a:hover {
opacity:0.9;
background-color: #3385ff;
article {
width: 98.8%;
height: auto;
border-radius: 3px;
margin: 5px 5px 5px 5px;
border: 1px solid gainsboro;
clear: both;
article p {
padding: 5px 6px 5px 5px;
line-height: 1.5;
article
.konten {
width: 23.5%;
height: auto;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border: 1px solid gainsboro;
float: left;
article .isi {
width: 98.5%;
height: auto;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border: 1px solid gainsboro;
float: left;
article .isi .judul {
font-size: 300px;
margin-bottom: 10px;
margin-left: 10px;
margin-top: 10px;
article .isi p {
margin-top: 0;
article .isi img {
float: left;
margin: 5px 5px 5px 5px;
}
article .konten img {
width: 95.8%;
height: 150px;
margin: 5px 5px 5px 5px;
article .konten:hover {
opacity:0.9;
article .konten .judul a {
margin-left: 5px;
text-decoration: none;
font-size: 250px;
color:#020101;
}
article .konten a:hover {
opacity:0.9;
footer {
clear: both;
width: 98.8%;
height: auto;
text-align: center;
margin: 5px 5px 5px 5px;
border-radius: 3px;
border-bottom: 1px solid gainsboro;
padding-top: 15px;
padding-bottom: 15px;
<link rel="stylesheet" href="[Link]"
