Asalammualaikum warahmatuallahhi wabarokatuh.
MARI KITA BELAJAR BARENG
BERSAMA SAYA SYAMIL
CARA MEMBUAT WEBSITE SEDERHANA MENGGUNAKAN "HTML DAN CSS"
Pertama tama kalian siapkan aplikasi editor nya ,Saya menggunakan aplikasi editor yang bernama "Visual Studio Code", Terus kalian siapkan juga folder nya.Kalo saya berinama foldernya latihan
.Contohnya seperti gambar di bawah.
.
 |
| kitabuat foldernya duli |
kalo kalian sudah membuat folder kita lanjut ke pembuat tan website nya (coding).
kalian pilih folder yang kalian buat tadi, terus kalian buat didalam aplikasi editornya sebuah file yang bernama "index.html" Seperti ini gambar nya.
Oke marikita lanjut ke kodingan nya.
Nah ini tampilan codingan nya . Saya juga akan perlihat kan tulisan codingan saya di bawah ,marikita liat
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewprt" content="width=device-width, initial-scale=1">
6 <title>M.SYAMIL</title>
7 <link rel="stylesheet" type="text/css" href="css/style.css">
8 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/
ajax/libs/font-awesome/5.13.0/css/all.min.css">
9 <script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
10 </head>
11 <body>
12 <!-- loader -->
13 <div class="bg-loader">
14 <div class="loader"></div>
15 </div>
1617 <!--header-->
18 <div class="medsos">
19 <div class="container">
20 <ul>
21 <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
22 <li><a href="#"><i class="fab fa-youtube"></i></a></li>
23 <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
24 </ul>
25 </div>
26 </div>
27 <header>
28 <div class="container">
29 <h1><a href="index.html">M.SYAMIL</a></h1>
30 <ul>
31 <li class="active"><a href="index.html">HOME</a></li>
32 <li><a href="about.html">ABOUT</a></li>
33 <li><a href="service.html">SERVICE</a></li>
34 <li><a href="contact.html">CONTACT</a></li>
35 </ul>
36 </div>
37 </header>
3839 <!-- banner -->
40 <section class="banner">
41 <h2>WELCOME TO MY WEBSITE</h2>
42 </section>
4344 <!--about-->
45 <section class="about">
46 <div class="container">
47 <h3>ABOUT</h3>
48 <p>Lorem ipsum dolor sit amet,<strong>onsectetur adipisicing elit,
sed do eiusmodtempor incididunt ut labore et dolore magna aliqua.
</strong> Ut enim ad minim veniam,</p>
49 </div>
50 </section>
5152 <!--service-->
53 <section class="service">
54 <div class="container">
55 <h3>SERVICE</h3>
56 <div class="box">
57 <div class="col-4">
58 <div class="icon"><i class="fas fa-mobile"></i></div>
59 <h4>MOBILE APP</h4>
60 </div>
61 <div class="col-4">
62 <div class="icon"><i class="fas fa-globe"></i></div>
63 <h4>WEB DEVELOPMENT</h4>
64 </div>
65 <div class="col-4">
66 <div class="icon"><i class="fas fa-edit"></i></div>
67 <h4>DESIGN</h4>
68 </div>
69 <div class="col-4">
70 <div class="icon"><i class="fas fa-chart-bar"></i></div>
71 <h4>DIGITAL MARKETING</h4>
72 </div>
73 </div>
74 </div>
75 </section>
7677 <!-- footer -->
78 <footer>
79 <div class="container">
80 <small>Copyright © 2022 - Syamil ce. All Rights reserved.</small>
81 </div>
82 </footer>
8384 <script type="text/javascript">
nah itudia hasil nya codingan index.html, mari kita lanjut ke kodingan berikut nya,
Ok disini ada perbedaan index.html sama about.html yaituh "class="active"" nya yang
Masukan fotokalain seperti ini terus samakan nama fotonya sama codingan yan ada di
seperti yang di gambar,(<li class="active"><a href="contact.html">CONTACT</a></li>),
79
contohnya seperti gambar di atas.
INI TAMPILAN HOME.
INI TAMPILAN ABOUT.
85 $(document).ready(function(){
86 $(".bg-loader").hide();
87 })
88 </script>
89</body>
90</html>
Ok temen-temen codingan buat index.htmlnya udag selesai ,yok kita liat hasil nya di
brawser.
nah itudia hasil nya codingan index.html, mari kita lanjut ke kodingan berikut nya,
yang bernama "abaot"ayo kita liat gambar nya dulu.
Kita buat lagi kaya tadi seperti index.html.
Ok disini ada perbedaan index.html sama about.html yaituh "class="active"" nya yang
pindah ke "about.html" ,yang asal nya tadi di index.html sekarang ke about.
nah secara penulisan coding ihdex.html sama about.html ,tulisan <!DOCTYPEhtml> sampai
</header>
akhir sama seperti index.html,sedangkan <!--label-->sampai bawah tidak sama. nah mari
kita liahat codingan about.html.
.ABOUT.HTML;
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewprt" content="width=device-width, initial-scale=1">
6 <title>M.SYAMIL</title>
7 <link rel="stylesheet" type="text/css" href="css/style.css">
8 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/
ajax/libs/font-awesome/5.13.0/css/all.min.css">
9 <script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
10 </head>
11 <body>
12 <!-- loader -->
13 <div class="bg-loader">
14 <div class="loader"></div>
15 </div>
1617 <!--header-->
18 <div class="medsos">
19 <div class="container">
20 <ul>
21 <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
22 <li><a href="#"><i class="fab fa-youtube"></i></a></li>
23 <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
24 </ul>
25 </div>
26 </div>
27 <header>
28 <div class="container">
29 <h1><a href="index.html">M.SYAMIL</a></h1>
30 <ul>
31 <li><a href="index.html">HOME</a></li>
32 <li class="active"><a href="about.html">ABOUT</a></li>
33 <li><a href="service.html">SERVICE</a></li>
34 <li><a href="contact.html">CONTACT</a></li>
35 </ul>
36 </div>
37 </header>
3839 <!-- label -->
40 <section class="label">
41 <div class="container">
42 <p>Home / About</p>
43 </div>
44 </section>
4546 <!--about-->
47 <section class="about">
48 <div class="container">
49 <img src="lan.jpg" width="100%">
50 <h3>ABOUT</h3>
51 <p>Lorem ipsum dolor sit amet,<strong>onsectetur adipisicing
elit, sed do eiusmodtempor incididunt ut labore et dolore
magna aliqua.</strong> Ut enim ad minim veniam,</p>
52 <p>Lorem ipsum dolor sit amet,<strong>onsectetur adipisicing
elit, sed do eiusmodtempor incididunt ut labore et dolore
magna aliqua.</strong> Ut enim ad minim veniam,</p>
53 <h3>VISI</h3>
54 <p>Lorem ipsum dolor sit amet,<strong>onsectetur adipisicing
elit, sed do eiusmodtempor incididunt ut labore et dolore
magna aliqua.</strong> </p>
55 <h3>MISI</h3>
56 <p>Lorem ipsum dolor sit amet,<strong>onsectetur adipisicing elit,
</strong> Ut enim ad minim veniam,</p>
57 </div>
58 </section>
5960 <!-- footer -->
61 <footer>
62 <div class="container">
63 <small>Copyright © 2022 - Syamil cel. All Rights reserved.</small>
34 </div>
65 </footer>
6667 <script type="text/javascript">
68 $(document).ready(function(){
69 $(".bg-loader").hide();
70 })
71 </script>
72 </body>
73 </html>
Ok temen-temen codingan buat about.htmlnya udag selesai ,yok kita liat hasil nya di
brawser.
Oke temen-temen kenapa saya ada potonya kalo kalian mau ada fotonya kalian bisa masukan
foto kalian ke dalam folder latihan kalian seperti ini caranya.
Masukan fotokalain seperti ini terus samakan nama fotonya sama codingan yan ada di
"<img src="lan.jpg"width="100%">" kalian masukin nama fotonya harus sama seperti yang
di contoh kan saya.
Nah ini dia contoh nya ok, sampai disini codingan about mari kita lanjut ke codingan
"service.html"
Sama seperti tadi kita buat dulu halaman service.html nya.
ini juga sama codingan seperti index.html dan about.html codingan utamanya di
<!DOCTYPE html> sampai </section> akhir . Nah yangbaru ituh ini dia gambar nya.
Nah mari kita lanjut ke penulisan cidingan service.html nya.
.SERVICE.HTML
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewprt" content="width=device-width, initial-scale=1">
6 <title>M.SYAMIL</title>
7 <link rel="stylesheet" type="text/css" href="css/style.css">
8 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/
ajax/libs/font-awesome/5.13.0/css/all.min.css">
9 <script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
10 </head>
11 <body>
12 <!-- loader -->
13 <div class="bg-loader">
14 <div class="loader"></div>
15 </div>
1617 <!--header-->
18 <div class="medsos">
19 <div class="container">
20 <ul>
21 <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
22 <li><a href="#"><i class="fab fa-youtube"></i></a></li>
23 <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
24 </ul>
25 </div>
26 </div>
27 <header>
28 <div class="container">
29 <h1><a href="index.html">M.SYAMIL</a></h1>
30 <ul>
31 <li><a href="index.html">HOME</a></li>
32 <li><a href="about.html">ABOUT</a></li>
33 <li class="active"><a href="service.html">SERVICE</a></li>
34 <li><a href="contact.html">CONTACT</a></li>
35 </ul>
36 </div>
37 </header>
3839 <!-- label -->
40 <section class="label">
41 <div class="container">
42 <p>Home / service</p>
43 </div>
44 </section>
4546 <!--service-->
47 <section class="service">
48 <div class="container">
49 <h3>SERVICE</h3>
50 <div class="box">
51 <div class="col-4">
52 <div class="icon"><i class="fas fa-mobile"></i></div>
53 <h4>MOBILE APP</h4>
54 </div>
55 <div class="col-4">
56 <div class="icon"><i class="fas fa-globe"></i></div>
57 <h4>WEB DEVELOPMENT</h4>
58 </div>
59 <div class="col-4">
60 <div class="icon"><i class="fas fa-edit"></i></div>
61 <h4>DESIGN</h4>
62 </div>
63 <div class="col-4">
64 <div class="icon"><i class="fas fa-chart-bar"></i></div>
65 <h4>DIGITAL MARKETING</h4>
66 </div>
67 </div>
68 </div>
69 </section>
7071 <!-- footer -->
72 <footer>
73 <div class="container">
74 <small>Copyright © 2022 - Syamil ce. All Rights reserved.</small>
75 </div>
76 </footer>
7778 <script type="text/javascript">
79 $(document).ready(function(){
80 $(".bg-loader").hide();
81 })
82 </script>
83 </body>
84 </html>
Ok temen-temen di service.html juga ade perbeaan nya yaiyuh.
"<li class="active"><a href="service.html">SERVICE</a></li>"
active nya pndah ke service.html,Nah kenapa active nya pindah-pindah,nanti
saya akan jelaskan sesudah codingan style.css.
Nah sekarang kita lihat hasil codingan service nya di browser.
NAH INI HASIL NYA.
Sekarang kita lanjut ke codingan contact.html .cara pembuatan nya sama seperti tadi yang di atas.
seperti yang di gambar,(<li class="active"><a href="contact.html">CONTACT</a></li>),
active Dipndahkan ke contact.
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewprt" content="width=device-width, initial-scale=1">
6 <title>M.SYAMIL</title>
7 <link rel="stylesheet" type="text/css" href="css/style.css">
8 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.
com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
9 <script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
crossorigin="anonymous"></script>
10 </head>
11 <body>
12 <!-- loader -->
13 <div class="bg-loader">
14 <div class="loader"></div>
15 </div>
1617 <!--header-->
18 <div class="medsos">
19 <div class="container">
20 <ul>
21 <li><a href="#"><i class="fab fa-facebook-square"></i></a></li>
22 <li><a href="#"><i class="fab fa-youtube"></i></a></li>
23 <li><a href="#"><i class="fab fa-twitter-square"></i></a></li>
24 </ul>
25 </div>
26 </div>
27 <header>
28 <div class="container">
29 <h1><a href="index.html">M.SYAMIL</a></h1>
30 <ul>
31 <li><a href="index.html">HOME</a></li>
32 <li><a href="about.html">ABOUT</a></li>
33 <li><a href="service.html">SERVICE</a></li>
34 <li class="active"><a href="contact.html">CONTACT</a></li>
35 </ul>
36 </div>
37 </header>
3839 <!-- label -->
40 <section class="label">
41 <div class="container">
42 <p>Home / contact</p>
43 </div>
44 </section>
4546 <!--service-->
47 <section class="service">
48 <div class="container">
49 <h3>CONTACT INFO</h3>
50 <div class="box">
51 <div class="col-4">
52 <h4>Address</h4>
53 <p>Jl.pelabuhanratu ,kab.sukabumi,kec.warungkiara</p>
54 </div>
55 <div class="col-4">
56 <h4>Email</h4>
57 <p>syamilkess@gmail.com.</p>
58 </div>
59 <div class="col-4">
60 <h4>Telp</h4>
61 <p>(012) 123456</p>
62 </div>
63 <div class="col-4">
64 <h4>Hp</h4>
65 <p>085311047174</p>
66 </div>
67 </div>
68 <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3960.776268831282!2d106.91164951434739!3d-6.917330169624188!
2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!
1s0x2e68482a16b796bb%3A0xa5d2345bb7ad63d0!2sJl.
%20Halimun%2C%20Gunungpuyuh%2C%20Kec.%20Gunungpuyuh%2C%
20Kota%20Sukabumi%2C%20Jawa%20Barat%2043123!5e0!3m2!
1sid!2sid!4v1643280614616!5m2!1sid!2sid" width="100%"
height="450" style="border:0;" allowfullscreen=""
loading="lazy"></iframe>
69 </div>
70 </section>
7172 <!-- footer -->
73 <footer>
74 <div class="container">
75 <small>Copyright © 2022 - Syamil ce. All Rights reserved.</small>
76 </div>
77 </footer>
7879
80 <script type="text/javascript">
81 $(document).ready(function(){
82 $(".bg-loader").hide();
83 })
84 </script>
85 </body>
86 </html>
Sekarang kita liahat hasil codingan nya.
KITA LANJUT KE CODINGAN style.css,kita liahat conto pembuatan file syle.css nya.
contohnya seperti gambar di atas.
Kita lanjut ke codingan nya.
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
a {
color: inherit;
text-decoration: none;
}
.medsos {
padding: 5px 0;
background-color: #060707;
}
.medsos ul li {
display: inline-block;
color: #fff;
margin-right: 10px;
}
.container {
width: 80%;
margin: 0 auto;
}
.container:after {
content:'';
display: block;
clear: both;
}
header h1 {
float: left;
padding: 15px 0;
color: #000000;
}
header ul {
float: right;
}
header ul li {
display: inline-block;
}
header ul li a{
padding: 25px 20px;
display: inline-block;
}
header ul li a:hover {
background-color: #050505;
color: #fff;
}
.active {
background-color: #080808;
color: #fff;
}
.banner {
height: 90vh;
background-image: url('../img/lan.jpg');
background-size: cover;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.banner:after {
content:'';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
}
.banner h2 {
color: #fff;
z-index: 1;
padding: 20px 25px;
border: 3px solid #fff;
}
section {
padding: 50px 0;
}
section h3 {
text-align: center;
padding: 20px 0;
color: #000000;
margin-bottom: 25px;
}
.about,
.service {
padding-bottom: 100px;
}
.about p {
color: rgb(0, 0, 0);
word-spacing: 2px;
line-height: 25px;
margin-bottom: 20px;
text-align: center;
}
.service {
background-color: #f9f9f9;
}
.box {
color: #060808;;
}
.box:after {
content: '';
display: block;
clear: both;
}
.box .col-4 {
width: 25%;
padding: 20px;
box-sizing: border-box;
text-align: center;
float: left;
}
.icon {
width: 70px;
height: 70px;
border: 1px solid;
border-radius: 50%;
text-align: center;
line-height: 70px;
font-size: 20px;
margin: 0 auto;
}
.box .col-4 {
margin: 20px 0;
}
footer {
padding: 30px 0;
background-color: rgb(3, 3, 3);
color: #fff;
text-align: center;
}
.bg-loader {
background-color: #eee;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.bg-loader .loader{
width: 100px;
height: 100px;
border: 3px solid #fff;
border-radius: 50%;
border-top-color: #040505;
border-right-color: #060707;
border-bottom-color: #000000;
animation: puterin .8s linear infinite;
}
.label {
background-color: #000000;
color: #fff;
}
@keyframes puterin {
100% {
transform: rotate(360deg);
}
}
@media screen and (max-width: 768px){
.container {
width: 90%;
}
header h1 {
text-align: center;
float: none;
}
header ul {
text-align: center;
float: none;
}
.box .col-4 {
width: 100%;
float: none;
margin-bottom: 20px;
}
}
Nah ini codingan terakhir yaituh style.css.
Sekarang kita liat di browser ,apakah sekarang sudah menjadi website.
INI TAMPILAN HOME.
INI TAMPILAN ABOUT.
INI TAMPILAN SERVICE.
INI BAGIAN CONTACT.
NAH KALIAN HARUS FILE STYLE.CSS NYA HARUS DI DALAM FOLDER
TERUS BUAT POLDER IMG NYA JUGA ,SERPERTI CONTOH DI ATAS.
Tidak ada komentar:
Posting Komentar