Cara Membuat Web HTML Keren dengan Notepad [Web Portofolio]
![Cara Membuat Web HTML Keren dengan Notepad [Web Portofolio]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjggP10PCjedQvWf6EQS5rsv7fgmKrg-F9uWhW3DA-2oyV539lJar72ZqN0XCme3Xkur0p-u4WeXXcvgrVoko6gnV1gpYnxpuIU4NtkSCK-bKUHIm2o9A7tgVkvaxBHg5lBk1TnwsivScM/s640-rw/Cara+Membuat+Web+HTML+Keren+dengan+Notepad1.JPG "Cara Membuat Web HTML Keren dengan Notepad [Web Portofolio]")
Untuk demo cek: DisiniLangsung saja kita membuat website sederhana ini, sebelum membuatnya silahkan simak informasi ini terlebih dahulu.
Apa itu Website Statis?
Website Statis adalah website dimana kita tidak bisa mengupdate konten secara langsung... (Selengkapnya baca disini).
Sebelum membuat website sederhana ini, silahkan anda mempersiapkan:
- Komputer/PC/Android. kalau belum punya silahkan pergi ke WARNET.
- Aplikasi Text Editor. pakai notepad biada juga bisa.
- Browser. rekomendasi pakai chrome.
- Koneksi Internet. jika tidak ada tidak apa-apa
- Niat yang tulus. biar berkah belajarnya.
Sebenarnya kita bisa membuat website online sendiri yang bagus dan mudah. Yang diperlukan hanyalah nama domain, hosting, dan wordpress. Silahkan ikuti langkah untuk bikin web sendiri disini untuk lebih jelasnya. Dengan menggunakan wordpress kita akan mendapatkan website yang SEO friendly, dan bisa menggunakan plugin & theme gratisan yang bisa membuat situs kita jauh lebih keren dan profesional.
Cara Membuat WEB Sederhana dengan HTML dan CSS
Berikut beberapa langkah untuk membuat website portofolio/biodata sederhana menggunakan html dan css.
Langkah 1: Buka Aplikasi Text Editor
Dilangkah pertama ini anda perlu membuka aplikasi text editor yang sudah anda persiapkan sebelumnya. Jika tidak punya text editor dikomputer pakai Smartphone juga bisa, unduh saja aplikasinya diplaystore.
Langkah 2: Buat File "index.html"
Lalu buat sebuah file dan beri nama "index.html" dan silahkan copy kode script dibawah ini.
<html>
<head>
<title>Cara Membuat Web HTML Keren dengan Notepad - ansoriweb.com</title>
<link href="style.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<!-- begin page -->
<div class="page">
<!-- begin header -->
<div class="header">
<nav class="navbar navbar-default navbar-static-top">
<!-- begin container-fluid -->
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- begin navbar-collapse -->
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">About </a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<!-- end navbar-collapse -->
</div>
<!-- end container-fluid -->
</nav>
</div>
<!-- end header -->
<!-- begin section-hero -->
<div class="section-hero">
<!-- begin container-fluid -->
<div class="container-fluid">
<!-- begin row -->
<div class="row">
<!-- begin col-sm-12 -->
<div class="col-sm-12">
<!-- begin hero -->
<div class="hero">
<p>Vasiliy Pokotylo</p>
<h1 class="hero-title">Front-end Developer</h1>
<p>Hello and welcome to my personal portfolio website!</p>
</div>
<!-- end hero -->
<a class="hero-button" href="#portfolio">VIEW PORTFOLIO</a>
</div>
<!-- end col-sm-12 -->
</div>
<!-- end row -->
</div>
<!-- end container-fluid -->
</div>
<!-- end section-hero -->
<!-- begin section-portfolio -->
<div class="section-portfolio">
<!-- begin container -->
<div class="container">
<!-- begin row -->
<div class="row">
<h3 class="title" id="portfolio">PORTFOLIO</h3>
</div>
<!-- end row -->
<!-- begin row -->
<div class="row">
<!-- begin col-md-4 col-sm-6 -->
<div class="col-md-4 col-sm-6">
<!-- begin col-content -->
<div class="col-content">
<a class="" href="https://asyntrail.github.io/transport/" target="_blank"><img class="img-responsive img-xs-center transform-animation" src="http://placehold.it/350x200" alt="Blog page template"></a>
<h3 class="text-uppercase">Transport service</h3>
<a class="portfolio-link" href="https://asyntrail.github.io/transport/" target="_blank">https://asyntrail.github.io/transport</a>
<p class="portfolo-description">Page template without any framework, has responsive design and responsive sidebar menu.
<br>Technologies: HTML5, CSS3, JS.</p>
</div>
<!-- end col-content -->
</div>
<!-- end col-md-4 col-sm-6 -->
<!-- begin col-md-4 col-sm-6 -->
<div class="col-md-4 col-sm-6">
<!-- begin col-content -->
<div class="col-content">
<a class="" href="http://lark.zzz.com.ua/" target="_blank"><img class="img-responsive img-xs-center transform-animation" src="http://placehold.it/350x200" alt="Blog page template"></a>
<h3 class="text-uppercase">Display</h3>
<a class="portfolio-link" href="http://lark.zzz.com.ua/" target="_blank">http://lark.zzz.com.ua</a>
<p class="portfolo-description">Minisite template converted to WordPress theme. Has responsive design and a slider Slick.
<br>Technologies: HTML5, CSS3, JS, PHP.</p>
</div>
<!-- end col-content -->
</div>
<!-- end col-md-4 col-sm-6 -->
<!-- begin col-md-4 col-sm-6 -->
<div class="col-md-4 col-sm-6">
<!-- begin col-content -->
<div class="col-content">
<a href="https://asyntrail.github.io/restaurant" target="_blank"><img class="img-responsive img-xs-center transform-animation" src="http://placehold.it/350x200" alt="Restaurant page template"></a>
<h3 class="text-uppercase">Restaurant service</h3>
<a class="portfolio-link" href="https://asyntrail.github.io/restaurant" target="_blank">https://asyntrail.github.io/restaurant</a>
<p class="portfolo-description">Restaurant page template, has responsive design and java scripts.
<br>Technologies: HTML5, Bootstrap3, CSS3, JS.</p>
</div>
<!-- end col-content -->
</div>
<!-- end col-md-4 col-sm-6 -->
<!-- begin col-md-4 col-sm-6 -->
<div class="col-md-4 col-sm-6">
<!-- begin col-content -->
<div class="col-content">
<a class="" href="https://asyntrail.github.io/blog" target="_blank"><img class="img-responsive img-xs-center transform-animation" src="http://placehold.it/350x200" alt="Blog page template"></a>
<h3 class="text-uppercase">Blog</h3>
<a class="portfolio-link" href="https://asyntrail.github.io/blog" target="-blank">https://asyntrail.github.io/blog</a>
<p class="portfolo-description">Blog page template, without any framework and java scripts, has responsive design.
<br>Technologies: HTML5, CSS3.</p>
</div>
<!-- end col-content -->
</div>
<!-- end col-md-4 col-sm-6 -->
<!-- begin col-md-4 col-sm-6 -->
<div class="col-md-4 col-sm-6">
<!-- begin col-content -->
<div class="col-content">
<a href="https://asyntrail.github.io/clinic" target="_blank"><img class="img-responsive img-xs-center transform-animation " src="http://placehold.it/350x200" alt="Online clinic page template"></a>
<h3 class="text-uppercase">Online clinic</h3>
<a class="portfolio-link" href="https://asyntrail.github.io/clinic" target="_blank">https://asyntrail.github.io/clinic</a>
<p class="portfolo-description">Online clinic page template, has responsive design and java scripts.
<br>Technologies: HTML5, Bootstrap3, CSS3, JS.</p>
</div>
<!-- end col-content -->
</div>
<!-- end col-md-4 col-sm-6 -->
<!-- begin col-md-4 col-sm-6 -->
<div class="col-md-4 col-sm-6">
<!-- begin col-content -->
<div class="col-content">
<a href="http://lampshm.kl.com.ua/" target="_blank"><img class="img-responsive img-xs-center transform-animation" src="http://placehold.it/350x200" alt="Page"></a>
<h3 class="text-uppercase">LAMPS HANDMADE</h3>
<a class="portfolio-link" href="http://lampshm.kl.com.ua/" target="_blank">http://lampshm.kl.com.ua</a>
<p class="portfolo-description">Blog with custom settings for the standard WordPress theme Twenty-seventeen.
<br>Technologies: CMS WordPress.</p>
</div>
<!-- end col-content -->
</div>
<!-- end col-md-4 col-sm-6 -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end section-portfolio -->
<!-- begin section-about -->
<div class="section-about" id="about">
<!-- begin container -->
<div class="container">
<!-- begin row -->
<div class="row">
<h3 class="title text-center">ABOUT</h3>
</div>
<!-- end row -->
<!-- begin row -->
<div class="row">
<!-- begin col-sm-12 -->
<div class="col-sm-12">
<p class="about-description">Hello, my name is Vasiliy and I'm a beginner Front-End web developer. I study Web Development with Udacity (online coursces) and FreeCodeCamp. I design with CSS3 and HTML5, but i have interest in java script programming. I love building websites, constantly learning and expanding my skills.
<br> I use: HTML,CSS, JavaScript, jQuery.
<br> I am also proficient: Bootstrap, Git, WordPress, Gulp.js, Flexbox.</p>
</div>
<!-- end col-sm-12 -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end section-about -->
<!-- begin section-contact -->
<div class="section-contact" id="contact">
<!-- begin container -->
<div class="container">
<!-- begin row -->
<div class="row">
<h3 class="title text-center">CONTACT</h3>
</div>
<!-- end row -->
<!-- begin row -->
<div class="row">
<!-- begin col-sm-6 -->
<div class="col-sm-6">
<!-- begin contact-col -->
<div class="contact-col">
<a class="btn btn-lg btn-warning btn-block" href="mailto:asyntrail@gmail.com" role="button"><span class=" glyphicon glyphicon-envelope" aria-hidden="true"></span> Send Email</a>
<a class="btn btn-lg btn-primary btn-block" href="https://www.facebook.com/asyntrail" target="_blank" role="button">Facebook</a>
<a class="btn btn-lg btn-success btn-block" href="https://github.com/asyntrail" target="_blank" role="button">Github</a>
</div>
<!-- end contact-col -->
</div>
<!-- end col-sm-6 -->
<!-- begin col-sm-6 -->
<div class="col-sm-6">
<div class="contact-col">
<p class="contact-description"> If you have any questions, please send me an e-mail at asyntrail@gmail.com.</p>
</div>
</div>
<!-- end col-sm-6 -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end section-contact -->
<!-- begin footer -->
<div class="footer">
<!-- begin container -->
<div class="container">
<!-- begin row -->
<div class="row">
<!-- begin col-md-12 -->
<div class="col-md-12">
<!-- begin footer-col -->
<div class="footer-col">
<span> Vasiliy Pokotylo © 2018, All rights reserved.</span>
</div>
<!-- end footer-col -->
</div>
<!-- end col-md-12 -->
</div>
<!-- end row -->
</div>
<!-- end container -->
</div>
<!-- end footer -->
</div>
<!-- end page -->
</body>
</html>Langkah 2: Buat File "style.css"
Kemudian silahkan buat file "style.css" dan silahkan copy script kode dibawah ini.
html {
scroll-behavior: smooth;
}
body {
background: white;
color: #5a90ba;
}
.header {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 20;
}
.navbar {
background-color: #2098D1;
margin: 0px;
border: 0px;
border-radius: 0px;
}
.navbar-default .navbar-nav {
padding-right: 20px;
}
.navbar-default .navbar-nav li a {
text-align: right;
color: #fff;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
}
.navbar-default .navbar-nav>li>a:hover {
color: #c6e9ef;
}
.section-hero {
min-height: 600px;
color: #fff;
background: #2098D1;
text-align: center;
padding-top: 200px;
}
.hero {
padding-bottom: 80px;
font-size: 25px;
text-align: center;
}
.hero-title {
font-family: impact;
margin-top: 10px;
}
.hero-title::after {
content: "";
display: block;
margin: 5px auto 0;
background-color: #c6e9ef;
width: 150px;
height: 3px;
}
.hero-button {
background: #045f8c;
font-weight: bold;
color: white;
text-decoration: none;
font-size: 14px;
padding: 12px 16px 12px 16px;
display: inline-block;
border-style: none;
}
.hero-button:hover {
text-decoration: none;
color: #045f8c;
background: #c6e9ef;
}
.section-portfolio {
background: #c6e9ef;
padding-bottom: 60px;
text-align: center;
}
.title {
margin-top: 30px;
margin-bottom: 40px;
padding-top: 20px;
text-align: center;
color: #5a90ba;
}
.col-content {
height: 424px;
margin-bottom: 30px
}
.img-responsive {
display: inline;
}
.portfolio-link {
color: #46a850;
}
.portfolo-description {
margin: 10px 20px 10px 20px;
font-size: 16px;
font-family: verdana;
}
.section-about {
min-height: 500px;
background: #f8f8f8;
}
.about-description {
text-align: center;
font-family: roboto;
font-size: 27px;
padding: 40px 0px;
}
.section-contact {
min-height: 500px;
background: #c6e9ef;
}
.contact-col {
padding-top: 60px;
}
.btn-block {
margin: 10px 0px 10px 0px;
}
.contact-description {
font-size: 22px;
padding-top: 60px;
}
.footer {
min-height: 40px;
background: #2098D1;
color: white;
text-align: center;
}
.footer-col {
padding: 20px 0px 20px 0px;
text-align: right;
}
.navbar-default .navbar-toggle .icon-bar {
background: white;
}
@media (max-width:767px) {
.img-xs-center {
margin: 0 auto;
}
.navbar-default .navbar-collapse {
background: #045f8c;
}
.contact-description,
.contact-col {
padding-top: 30px;
}
}
@media (max-width:450px) {
.hero-title {
font-size: 28px;
}
.about-description {
font-size: 20px;
padding: 0px 0px 40px 0px;
}
.contact-description {
font-size: 18px;
}
.portfolio-link {
font-size: 12px;
}
}
.transform-animation {
transition: .2s;
}
.transform-animation:hover {
transform: scale(1.1);
color: #000;
outline-color: #b0b0b0;
}
.transform-animation:after {
display: inline-block;
padding: 10px;
content: attr(class);
}Langkah 3: Simpan Files dan View
Setelah anda selesai silahkan klik save dan tarik file "index.html" kebrowser yang sudah anda siapkan tadi. Ingat! harus pakai koneksi internet agar gambarnya dan tampilannya bisa terlihat (muncul).
Baca Juga: Cara Membuat Form Login dengan PHP MySQLi
Penutup
Itulah tadi Cara Membuat Web HTML Keren dengan Notepad, apabila ada masih bingung dan kurang paham (terjadi error) anda bisa berkomentar dibawah ini.
Jangan sungkan-sungkan untuk bertanya, pepatah mengatakan "malu bertanya sesat dijalan". Selebihnya mohon maaf jika ada kekeliruan, sekian dari saya selamat belajar dan terima kasih.
Itu mksdnya SC index dan CSS di jadikan 1
file index.html dan style.css dijadikan di satu folder gan :D
Assalamukum gan minta cara buatan undangan gan ..trimakasih
oke gan, kapan" ane buat :)
Gan, apakah web yg lu buat bisa gua akses Di hp gua?
bisa gan, dicoba aja
keren dan menarik kak sangat membantu sekali bagi saya yang pemula perkenalkan saya deva delilah dari ISB Atma Luhur
baik kak, sama-sama :D
cara gabungin html sama css nya gmn ?
tinggal buat style dibawah head gan.
mas, kalau buat link nya gimana ya?
caranya tinggal tambahkan kode a href=
ka maaf untuk gambar nya itu masuk ke link yah ka?
Yups 😀
kak kan saya pemula setelah di save itu gmn ya? saya masih bingung jika melihat langkah2 nya
terimakasih
setelah disimpan buka pakai browser