Cara Membuat Web Sederhana dengan HTML CSS – Kali ini admin akan berbagi tutorial membuat web sederhana dengan menggunakan bahasa HTML css bertema informasi kecantikan (beauty), untuk script ini saya dapatkan di codepen.io/neyla-nuril-fauziyah (terima kasih sudah mempublikasikan karyanya diweb tersebut). Semoga scriptnya bermanfaat untuk teman-teman pelajar yang sedang mencari referensi hal ini.
Yuk kita simak !
Tutorial Membuat Web Sederhana dengan HTML CSS
Adapun tutorial membuat situs versi koran-indonesia.com, sebagai berikut.
Langkah 1: Buat File Index.html
Hal pertama yang anda lakukan adalah membuat file “index.html”. Kemudian silahkan copy dan paste script dibawah ini.
<html>
<head>
<title>Web Sederhana</title>
<link rel="stylesheet" href="style.css">
<title></title>
</head>
<body>
<div class="container">
<div class="header">
<h1 class="judul">Beauty Today</h1>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">article</a></li>
<li><a href="#">produtcs</a></li>
<li><a href="#">contact</a></li>
</ul>
</div>
<div class="hero"></div>
<div class="content cf">
<div class="main">
<h2>Skincare Wajib Remaja</h2>
<p class="penulis">Ditulis oleh <a href=https://www.instagram.com/nisarhmdt target="_blank">Khairunnisa' R</a>, Senin 9 November 2020</p>
<p>Skincare merupakan produk mengandung bahan alami
dan kimia yang diproses dengan teknologi modern
dan dikemas secara praktis yang mudah digunakan
untuk merawat kulit. Sebagai kaum hawa yang beranjak
dewasa, banyak remaja mulai memperhatikan penampilan
dengan menggunakan skincare untuk mendapatkan kulit
yang glowing dan sehat. Biasanya remaja mulai
mencoba-coba hampir semua jenis produk skincare
untuk mendapatkan kulit ideal tersebut.</p>
<p>Padahal remaja seperti Stylovers sudah cukup
menggunakan 5 step skincare berikut ini untuk
mendapatkan kulit glowing dan sehat.
Nah, kali ini Stylo akan memberikan info 5 step skincare remaja yang wajib kamu pakai untuk mendapatkan kulit sehat dan glowing.
</p>
<h3>1. Micellar Water</h3>
<img src="https://images.unsplash.com/photo-1597106776019-b4ecc878c202?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="">
<p>Micellar water merupakan produk
first step cleansing dalam teknik double cleansing
saat membersihkan wajah yang bertujuan agar wajah
bersih maksimal dari debu, polusi, minyak dan sisa
makeup setelah beraktivitas padat di sekolah.
Rangkaian Garnier Micellar Water yang terdiri dari
3 varian yang dapat dipilih sesuai kebutuhan jenis
kulitmu. Produk ini mampu menghapus sisa makeup ringan
dan waterproof secara maksimal dalam sekali usapan tanpa
membuat kulit menjadi kering.</p>
<h3>2. Facial Wash</h3>
<img src="https://images.unsplash.com/photo-1556228578-f9707385e031?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="">
<p>Skincare remaja yang wajib kamu miliki selanjutnya
adalah facial wash atau pencuci muka. Facial wash
sangat penting dan wajib dimiliki remaja saat mulai
mengenakan skincare untuk mendapatkan kulit yang
dan sehat. Facial wash berfungsi untuk membersihkan
kulit dari debu, polusi, kotoran, minyak serta sisa
makeup ketika menggunakan riasan ke sekolah secara
maksimal. Selain membersihkan, facial wash juga berfungsi
untuk mencegah kerusakan kulit dan membantu
mengurangi masalah kulit wajah seperti jerawat,
noda hitam, kulit dehidrasi, kulit berminyak hingga
penuaan dini.</p>
<h3>3. Toner</h3>
<img src="https://images.unsplash.com/photo-1532086853747-99450c17fa2e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="">
<p>Toner merupakan produk skincare remaja selanjutnya
yang wajib dimiliki untuk mendapatkan kulit yang
glowing dan sehat. Toner berfungsi untuk
mengembalikan kelembapan yang hilang setelah mencuci
muka menggunakan facial foam, menyeimbangkan pH
kulit dan melembapkan kulit secara ringan serta
mempersiapkan kulit untuk menyerap produk skincare
berikutnya dengan baik.</p>
<h3>4. Pelembab</h3>
<img src="https://images.unsplash.com/photo-1585832622886-272fb3a927e0?ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80" alt="">
<p>Pelembap merupakan produk skincare remaja yang
paling utama dan wajib Stylovers miliki. Pelembap
berfungsi untuk melembapkan, melindungi kulit dari
debu, polusi, sinar matahari serta mencegah
kerusakan kulit dan penuaan dini. Seringkali
banyak remaja yang beranggapan menggunakan pelembap
akan membuat kulit semakin berminyak padahal
pelembap juga berfungsi untuk menyeimbangkan kadar
minyak dan air pada kulit.</p>
<h3>5. Masker</h3>
<img src="https://images.unsplash.com/photo-1570172619644-dfd03ed5d881?ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80" alt="">
<p>Untuk perawatan mingguan, Stylovers dapat
menggunakan masker yang berfungsi menutrisi
dan merawat kulit secara intensif. Bisa menggunakan
sheetmask, organic mask, mud mask, dan lain-lain
Jangan terlalu lama jika mengaplikasikan masker,
cukup 15-20 menit saja kemudian bisa dibilas jika
menggunakan organic mask, mud mask, peel off. Tetapi
jika menggunakan sheetmask tidak perlu dibilas.</p>
<p>source: <a href="https://stylo.grid.id/read/142054643/5-produk-skincare-remaja-yang-wajib-dipakai-agar-kulit-glowing-dan-sehat?page=all">stylo.grid.id</a></p>
</div>
<div class="sidebar">
<h3>Tentang Penulis</h3>
<img src="https://images.unsplash.com/photo-1593104547489-5cfb3839a3b5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=736&q=80" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div class="footer">
<p class="copy">© Copyright 2020. Neyla Nuril fauziyah</p>
</div>
</div>
</body>
</html>
Langkah 2: Buat File style.css
Hal kedua yang anda lakukan adalah membuat file “style.css”. Kemudian silahkan copy dan paste script dibawah ini.
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*CSS NYA NISA */
body {
font: 16px/28px poppins, sans-serif;
background-color: #FAEBD7;
}
.container{
width: 960px;
margin: auto;
background-color: #fff;
}
.header{
padding: 20px;
}
.header .judul{
font-size: 40px;
font-weight: bold;
color: lightcoral;
}
.header ul li{
display: inline-block;
margin-top: 20px;
margin-right: 15px;
}
.header a{
text-decoration: none;
color: #BC8F8F;
}
.header a:hover{
font-size: 20px;
color: #B22222;
}
.hero{
height: 350px;
background-image: url(https://images.unsplash.com/photo-1589125614605-3797752eb0e0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80);
background-position: 0 -200px;
background-size: cover;
border-top: 5px solid #B22222;
border-bottom: 5px solid #B22222;
margin-top: -5px;
}
.main{
width: 600px;
padding: 20px;
box-sizing: border-box;
float: left;
}
.main h2{
font-size: 25px;
font-weight: bold;
}
.main .penulis{
font-size: 12px;
margin-top: -5px;
}
.main a{
text-decoration: none;
color: #BC8F8F;
}
.main a:hover{
font-size: 14px;
color: #B22222;
}
.main p{
font-size: 14px;
margin-bottom: 10px;
}
.main h3{
font-size: 16px;
font-weight: bold;
}
.main img{
width: 200px;
}
.sidebar{
width: 300px;
float: right;
padding: 20px;
}
.sidebar h3{
font-weight: bold;
color: #B22222;
}
.sidebar img{
width: 100px;
float: left;
margin-right: 10px;
}
.sidebar p{
font-size: 12px;
line-height: 15px;
}
.footer{
background-color: #B22222;
padding: 5px;
}
.footer .copy{
color: #FAEBD7;
font-size: 12px;
text-align: center;
}
/*MICRO CLEARFIX*/
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}Penutup
Demikian artikel Cara Membuat Web Sederhana dengan HTML CSS by Neyla Nuril fauziyah. Semoga artikel ini bermanfaat.
Jika ada kritik maupun saran, anda bisa berkomentar dibawah ini.
Selamat membaca dan ngoding 😀
