Desain Web HTML dan CSS
Cara Membuat Website dengan HTML dan CSS
Sebelum masuk ke cara membuat website dengan HTML dan CSS, Anda harus menyiapkan Text Editor dan Web Browser terlebih dahulu. Text editor digunakan sebagai tools untuk menulis kode, sedangkan web browser digunakan untuk mengakses website.
Pada tutorial ini, kami akan menggunakan Visual Studio Code (VS Code) sebagai teks editornya dan Google Chrome sebagai browsernya.
untuk membuat website tersebut, kalia hanya perlu mengikuti 4 langkah saja, yaitu :
1-Membuat Struktur Projects Web
2-Menambahkan Kode pada File indeks.html.
3-Menambahkan Kode pada file style.CSS
4-Mengakses Website di Web browser
Membuat struktur project Web
Index.html merupakan inti dari halaman website yang dibuat, Anda dapat menambahkan konten website pada file ini.
Sedangkan file style.css merupakan file pelengkap HTML yang digunakan untuk mengubah dan mempercantik tampilan website.
Menambahkan Kode pada File Index.HTML
File HTML berisi kode utama untuk membangun struktur website Anda. Ibarat mobil, HTML di website sama seperti rangka mobil yang membentuk dan menopang body mobil. Oleh karena itu, file ini harus dibuat terlebih dahulu.
Pada dasarnya, struktur setiap halaman HTML tersusun atas 4 bagian utama, yaitu :
*Tag DTD/Doctype : Document Type Declaration (DTD) harus ditulis pada awal dokumen. Tag ini berfungsi untuk mendeklarasikan tipe dokumen dan versi HTML yang digunakan untuk diproses pada web browser.
*Tag HTML : Merupakan wadah dari semua elemen html.
*Tag Head : Berisi informasi website yang tidak tampil di halaman web browser. Misalnya, source css, source js, title, meta charset.
*Tag Body : Berisi semua elemen yang tampil di halaman web browser.
cara membuat website sederhana dengan HTML bisa dimulai dengan menambahkan kode berikut ini pada file index.html Anda :
*Pertama, di bagian tag head ini, Anda perlu mendeklarasikan informasi mengenai meta tag charset, title website, serta link atau path dari external sources (misal : CSS dan JavaScript) yang digunakan pada website.
yang perlu Anda perhatikan pada bagian head ini adalah lokasi tempat menyimpan file CSS. Pastikan file CSS berada pada folder yang sama dengan file HTML.
Jika berbeda folder, pastikan Anda memasukkan path yang sesuai pada bagian href.
*Kedua, masuk ke tag body. Bagian pertama pada body website portfolio ini adalah tampilan awal/welcome home yang terdiri dari navigation bar, text container, dan gambar.
Navigation bar atau biasa disebut navbar merupakan komponen utama navigasi website yang berupa menu, biasanya terletak pada bagian header website.
Sedangkan tag class text container pada kode di bawah ini merupakan bagian dimana Anda dapat menambahkan tulisan untuk tampilan awal website ketika diakses.
*Ketiga, karena ini website portfolio, Anda dapat menambahkan bagian services atau layanan. Pada bagian ini, Anda dapat menunjukkan layanan yang dapat Anda kerjakan dan skill apa saja yang Anda miliki. Layanan tersebut dapat Anda tuliskan pada tag
.
*Keempat, jika Anda sudah pernah mengerjakan atau memiliki proyek, Anda dapat menambahkan testimoni pada website portfolio. Bagian ini dapat Anda isi dengan review dan rating dari klien atas hasil kerja Anda.
Jangan lupa kalin untuk menambahkan link script fontawesome pada bagian head. Karena jika tidak, ikon bintang yang akan digunakan untuk menunjukkan rating kepuasan klien tidak akan muncul di halaman web Anda.
Kelima, bagian footer. Sebagai penutup, kami menambahkan sosial media sebagai kontak yang bisa dihubungi. Kode HTML untuk logo sosial media dapat Anda cari pada website
menambahkan Kode pada File Style.CSS
Struktur penulisan CSS terdiri dari 3 bagian :
*Selektor : Merupakan kata kunci yang menghubungkan style di file CSS dengan file HTML. Selektor dapat berupa tag, class, id, maupun atribut yang terdapat pada file HTML.
*Blok Deklarasi : Merupakan wadah atau tempat menulis style CSS, ditandai dengan kurung kurawal {}.
*Properti dan Nilai : Merupakan sekumpulan aturan yang diberikan pada selektor yang dipilih.
kalian dapat coba menggunakan kode di bawah ini terlebih dulu sebelum mengubahnya menggunakan style Anda sendiri :
@charset "utf-8";
/* CSS Document*/body{
background-color:#ffffff;
margin:0px;
padding:0px;
}
ul{
list-style:none;
}
a{
text-decoration:none;
}
section{
width:100%;
height:95vh;
position: relative;
}
nav{
display: flex;
justify-content: space-between;
align-items:center;
height:60px;
background-color:#FFFFFF;
box-shadow:2px 2px 12px rgba(0,0,0,0.2);
padding:0px 5%;
}
nav ul{
display: flex;
}
nav ul li a{
margin:30px;
font-family:myriad pro regular;
color:#505050;
font-size: 15px;
font-weight:700;
}
.logo{
font-family:RoadTest;
color:#000000;
font-size: 22px;
font-weight: bold;
}
.active{
color:#2d2a2a;
font-weight:bold;
}
.text-container p:nth-child(1){
font-family: calibri;
font-weight: bold;
color: #6d6d6d;
font-size: 22px;
}
.text-container p:nth-child(2){
font-family: calibri;
font-weight: bold;
letter-spacing: 2px;
color: #1a1a1a;
font-size: 60px;
}
.text-container p:nth-child(3){
font-family: myriad pro regular;
color: #403e3e;
font-size: 30px;
line-height: 30px;
}
.text-container p:nth-child(4){
font-family: calibri;
color: #403e3e;
font-size: 17px;
margin-top: 10px;
line-height: 30px;
}
.text-container p{
line-height: 0px;
margin: 55px 0px 25px;
}
.text-container{
position: absolute;
left: 13%;
top: 42%;
transform: translate(-13%, -42%);
}
.text-container button{
width: 130px;
height: 42px;
border-radius: 10px;
font-family: calibri;
font-weight: bold;
font-size: 14px;
outline: none;
margin: 0px 10px;
}
.hire-btn{
border: 2px solid #373636;
color: #373636;
}
.down-cv{
background-color: #0b0b0b;
color: #ffffff;
border: none;
}
button:active{
transform: scale(1.1);
}
.model{
height: 560px;
position: absolute;
bottom: 60px;
left: 80%;
transform: translateX(-70%);
}
.services{
height:600px;
background-color:#f6f5f5;
padding: 2% 10% 0px 10%;
}
.services-text p:nth-child(1){
font-family: calibri;
font-weight:bold;
color:#1d1c1c;
font-size:30px;
line-height:0px;
text-align: center;
margin-bottom: 40px;
}
.services-text p:nth-child(2){
font-family:calibri;
color:#7e7d7d;
}
.services-text{
margin:50px 0px;
}
.box-container{
display:flex;
justify-content:space-between;
}
.box-1,.box-2,.box-3{
width: 300px;
height:320px;
background-repeat: no-repeat;
background-size: cover;
box-shadow:2px 2px 18px rgba(0,0,0,0.3);
align-items: center;
justify-content: center;
display: flex;
flex-direction: column;
margin: 0px 4px;
.box-1{
background-image:url("images/services-1.png");
}
.box-2{
background-image:url("images/services-2.png");
}
.box-3{
background-image: url("images/servies-3.png");
}
.box-1 span,
.box-2 span,
.box-3 span{
width:40px;
height:40px;
border-radius:50%;
background-color:#ffffff;
display: flex;
justify-content: center;
align-items:center;
font-family: calibri;
font-weight: bold;
}
.box-1 p:nth-child(2),
.box-2 p:nth-child(2),
.box-3 p:nth-child(2){
color:#FFFFFF;
font-family: calibri;
font-size: 23px;
line-height:0px;
}
.box-1 p:nth-child(3),
.box-2 p:nth-child(3),
.box-3 p:nth-child(3){
font-family: calibri;
color:#8F8F8F;
text-align:center;
width: 230px;
margin:0px 0px 20px 0px;
}
.box-1 button,
.box-2 button,
.box-3 button{
width:100px;
height:30px;
background-color:#FFFFFF;
border:none;
outline: none;
border-radius:5px;
}
.testimoni{
height:500px;
background-color:#FFFFFF;
padding: 2% 10% 0px 10%;
text-align: center;
margin: auto;
}
.testimoni-text p:nth-child(1){
font-family: calibri;
font-weight:bold;
color:#1d1c1c;
font-size:30px;
line-height:0px;
}
.testimoni-text{
margin:70px 0px;
}
.testimoni-col{
display:flex;
justify-content:space-between;
}
.testimoni-1,.testimoni-2{
flex-basis: 44%;
border-radius: 10px;
margin-bottom: 5%;
text-align: left;
background: #f4f2f4;
padding: 25px;
cursor: pointer;
display: flex;
width: 500px;
box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
}
.testimoni-col img{
height: 60px;
margin-left: 5px;
margin-right: 30px;
margin-top: 20px;
border-radius: 50%;
}
.testimoni-col p{
padding: 0;
}
.testimoni-col h3{
margin-top: 15px;
text-align: left;
}
.testimoni-col .fas, .testimoni-col .far{
color: #f44336;
}
footer p{
font-family: calibri;
}
footer p:nth-child(1){
font-size: 30px;
font-weight:bold;
color:#FFFFFF;
line-height:10px;
}
footer p:nth-child(2){
font-size: 16px;
color:#7e7d7d;
width:600px;
text-align: center;
}
footer{
height:300px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
background-color: #191919;
}
.social-icons a{
width:40px;
height:40px;
display: flex;
justify-content: center;
align-items: center;
background-color:#e6e3e3;
margin:20px 10px;
border-radius:50%;
}
.social-icons{
display: flex;
}
.social-icons a:hover{
background-color:#000000;
box-shadow:2px 2px 12px rgba(0,0,0,0.2);
transition:all ease 0.5s;
}
.social-icons a:hover i,
.social a:hover i{
color:#FFFFFF;
transition:all ease 0.5s;
}
.copyright{
color:#565555;
font-size: 15px;
position: absolute;
left:50%;
bottom:10px;
transform: translateX(-50%);
}
.social{
position: fixed;
top:50%;
right:0px;
transform:translateY(-50%);
}
.social a{
display: flex;
justify-content: center;
align-items: center;
width:50px;
height:50px;
margin:0px;
padding: 0px;
line-height:0px;
background-color:#FFFFFF;
border:1px solid #CBCBCB;
box-shadow:2px 2px 12px rgba(0,0,0,0.2);
}
.social a:hover{
background-color:#000000;
transition:all ease 0.5s;
}
.social i{
font-size:20px;
color:#2B2B2B;
}
Jadi, dari kode tersebut, manakah yang dimaksud dengan selektor, blok deklarasi, properti dan nilai?
Agar lebih jelas, mari perhatikan contoh berikut :
.logo{
font-family:RoadTest;
color:#000000;
font-size: 22px;
font-weight: bold;
}
body{
background-color:#ffffff;
margin:0px;
padding:0px;
}
logo adalah selektor yang berupa class dan harus diawali dengan tanda titik, sedangkan body adalah selektor yang berupa tag dan tidak menggunakan tanda titik pada awal penulisannya.
Blok deklarasi diawali dengan tanda kurung { dan diakhiri dengan tanda kurung }.
Kode background-color:#ffffff; merupakan contoh properti dan nilai. Kode background-color pada kode yang diberikan adalah properti yang artinya mengatur warna background dari selektor tag body.
4.Mengakses Website di Web Browser
Cara membuat website dengan HTML dan CSS yang efektif adalah dengan membuka teks editor dan browser bersamaan.
Dengan membukanya secara bersamaan, setiap perubahan yang Anda lakukan pada file HTML maupun CSS dapat langsung terlihat pada browser. Sehingga proses pengembangan website akan berlangsung lebih cepat dan mudah dimodifikasi.
hanya perlu membuka file index.html pada browser kesayangan Anda. Jika Anda melakukan perubahan pada kode, jangan lupa refresh halaman web untuk melihat perubahan.
Komentar
Posting Komentar