Cara membuat website dengan html, css dan javascript

Hello,

I’M NIDA

SEO Technical Writer & Developer

An aquarius girl who loves music, watching movies and
of course writing.

.


    

        
        

            
Services
            
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        
        
        

        
            

                1
                
Technical Writing
                
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                Read More
            
        
            

                2
                
Web Design
                
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                Read More
            
        
            

                3
                
Web Development
                
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                Read More
            
        
    

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 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.

    

        
		

            
What Our Client Says..
        
        

        

            

                
                

                    
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                    
Client Pertama
                    
                    
                    
                    
                    
                
            

            

                
                

                    
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.

                    
Client Kedua
                    
                    
                    
                    
                    
                
            
        
    

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 fontawesome. 

    
        
Interested In Using Our Services?
            
        
        
I try to work on your project as quickly as possible. Guarantee for revision until you are satisfied with my work.
        
        

            
            
            
            
            
        
        
        
        
Copyright by Niagahoster Tutorial
    

    
    

        
        
        
        
        
    

Jika Anda masih bingung, Anda dapat langsung melihat hasilnya dengan menyalin keseluruhan kode berikut ini pada text editor yang Anda gunakan :

    
    Personal Website
    
    	



    

        
        
            
            Portfolio Tutorial
            
            

                
Home
                
Services
                
Testimonials
                
Contact
            
        

        
		

			
Hello,
		    
I’M NIDA
			
SEO Technical Writer & Developer
            
An aquarius girl who loves music, watching movies and
            
of course writing.
			Hire me
			Download CV
		
        
          
    

    
    

        
        

            
Services
            
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
        
        
        

        
            

                1
                
Technical Writing
                
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                Read More
            
        
            

                2
                
Web Design
                
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                Read More
            
        
            

                3
                
Web Development
                
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                Read More
            
        
    
    
    
    

        
		

            
What Our Client Says..

        
        

        

            

                
                

                    
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                    
Client Pertama
                    
                    
                    
                    
                    
                
            

            

                
                

                    
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
                    
Client Kedua
                    
                    
                    
                    
                    
                
            
        
    

    
    
        
Interested In Using Our Services?
            
        
        
I try to work on your project as quickly as possible. Guarantee for revision until you are satisfied with my work.
        
        

            
            
            
            
            
        
        
        
        
Copyright by Niagahoster Tutorial
    

    
    

        
        
        
        
        
    

Nah, sekarang website portfolio sederhana Anda sudah jadi. Namun, karena belum menggunakan CSS, tampilannya masih seperti ini :

Hmm masih agak membingungkan dan kurang menarik ya, langsung saja tambahkan CSS-nya, yuk!

Baca Juga : Membuat Aplikasi Web dengan Flutter

3. Menambahkan Kode pada File style.css

Sekarang, saatnya cara membuat website dengan CSS agar tampilannya lebih rapi dan menarik. Seperti yang sudah dibahas sebelumnya, tanpa CSS, tampilan website hanya sebatas text saja.

Jika kembali pada analogi mobil sebelumnya, CSS di website seperti cat mobil yang dapat diganti dan disesuaikan untuk membuat tampilan mobil terlihat lebih keren. Meskipun rangka atau strukturnya sama, Anda dapat mengubah style tampilan sesuai selera Anda.

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. 

Anda 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 i,.social i{
	color:#000000;
}

.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;
}

Pada kode di atas, .logo dan body merupakan selektor. Jika Anda perhatikan, mungkin akan muncul pertanyaan kenapa ada selektor yang memakai tanda titik di awal dan ada yang tidak. 

Selektor .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. Sedangkan kode #ffffff merupakan nilai yang berupa warna putih untuk background pada tag body.

Baca Juga : Daftar Kode Warna pada HTML dan CSS

Untuk memahami kode CSS lebih dalam, Anda dapat mencoba untuk mengubah kode di atas dan lihat bagaimana pengaruhnya terhadap tampilan website portfolio Anda.

4. Mengakses Website di Web Browser

Cara membuat website dengan HTML dan CSS yang efektif adalah dengan membuka teks editor dan browser bersamaan.

Kenapa begitu?

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.

Untuk menjalankan website, Anda hanya perlu membuka file index.html pada browser kesayangan Anda. Jika Anda melakukan perubahan pada kode, jangan lupa refresh halaman web untuk melihat perubahan.

Nah, sekarang mari coba jalankan website portfolio yang sudah Anda buat sebelumnya!

Inilah contoh tampilan awal website dengan kode di atas. Wajar jika tampilan website Anda  agak berbeda, karena gambar/assets yang Anda gunakan juga mungkin berbeda. Jadi sesuaikan saja, ya? 

Oh ya, jangan lupa cek kalau ada gambar yang tidak muncul. Pastikan path tempat menyimpan gambar dan tipe file image yang digunakan sudah benar.

Baca Juga : 10+ Website Penyedia Gambar Gratis

Kesimpulan

Itulah cara membuat website dengan HTML dan CSS yang bisa Anda coba. Sangat mudah, kan? Hanya dengan menggunakan file  HTML dan CSS saja, Anda sekarang bisa membuat website portfolio Anda sendiri. 

Sayangnya, website tersebut hanya bisa diakses offline sebab semua asetnya tersimpan di komputer Anda saja. Agar bisa dilihat banyak orang, Anda perlu mengonline-kan dulu, ya! 

Caranya, Anda memerlukan layanan web hosting untuk menyimpan aset Anda agar bisa diakses online. Namun, jangan sembarang memilih layanan hosting web, ya!

Layanan Unlimited Web Hosting Niagahoster bisa jadi pilihan yang tepat.  Sebab, Niagahoster memberikan jaminan keamanan untuk website Anda dengan berbagai fitur keamanan seperti Imunify360 yang mencegah serangan malware. 

Selain itu dengan uptime hingga 99,999%, website Anda bisa selalu online selama 24 jam penuh. Dengan begitu, Anda bisa mengonlinekan website tanpa rasa khawatir dengan downtime.

Menariknya, dengan harga mulai dari Rp27rb/bulan saja, Anda bisa mendapatkan domain gratis! Tidak hanya itu, Niagahoster juga menawarkan jasa pembuatan website dengan berbagai template menarik.

Yuk, langsung saja pilih layanan hosting Niagahoster untuk website Anda!

Demikianlah panduan cara membuat website dengan HTML dan CSS, semoga artikel ini bermanfaat bagi Anda ya 🙂