Cara menggunakan buat berita dengan html

Penulis Teknis SEO di Niagahoster. Seorang gadis aquarius yang menyukai musik, menonton film dan tentunya menulis

Beranda » Pengembangan & Desain Web » Cara Membuat Situs Web dengan HTML dan CSS?

Table of Contents Show

Cara Membuat Website dengan HTML dan CSS
1. Membuat Struktur Proyek Web
2. Menambahkan Kode ke File index. html
3. Menambahkan Kode ke gaya File. css
4. Mengakses Situs Web di Browser Web
Berlangganan sekarang
Langkah pertama dalam membuat HTML?
Bagaimana Cara Membuat Blog Berita?
Apa yang bisa dilakukan dengan HTML?

Bagaimana Cara Membuat Website dengan HTML dan CSS?

8 Agustus 2022 13 mnt dibaca

Anda ingin belajar cara membuat website, tapi bingung mulai dari mana? . Karena bagi seorang web developer, HTML dan CSS merupakan pondasi yang harus dipelajari untuk mengembangkan sebuah website

Oleh karena itu, artikel ini akan membahas tentang cara membuat website dengan HTML dan CSS. Yuk langsung saja baca panduan lengkapnya

Daftar Isi

Cara Membuat Website dengan HTML dan CSS

Sebelum masuk ke cara membuat website dengan HTML dan CSS, sebaiknya siapkan Text Editor dan Web Browser terlebih dahulu. Editor teks digunakan sebagai alat untuk menulis kode, sedangkan browser web digunakan untuk mengakses situs web

Dalam tutorial ini, kita akan menggunakan Visual Studio Code (VS Code) sebagai text editor dan Google Chrome sebagai browser. Anda bebas menggunakan alat favorit Anda

Website yang akan Anda buat kali ini adalah website portofolio sederhana dengan hanya menggunakan HTML dan CSS. Nanti websitenya akan seperti ini

Menariknya, untuk membuat websitenya, Anda hanya perlu mengikuti 4 langkah saja, yaitu

Membuat Struktur Proyek Web
Menambahkan Kode ke File index. html
Menambahkan Kode ke gaya File. css
Mengakses Situs Web di Browser Web

Tertarik untuk mencobanya?

1. Membuat Struktur Proyek Web

Pertama-tama, buat folder penyimpanan untuk proyek situs web portofolio Anda dan buka folder tersebut di VS Code. Dalam contoh ini, kami menggunakan nama "Portofolio Web"

Kemudian, buat folder baru dengan nama gambar. Folder ini merupakan tempat menyimpan gambar/aset yang akan digunakan pada website

Selanjutnya, buat dua file baru bernama index. html dan gaya. portofolio web css.

Indeks. html adalah inti dari halaman situs web yang dibuat, Anda dapat menambahkan konten situs web ke file ini.

Sedangkan gaya file. css adalah file HTML pelengkap yang digunakan untuk mengubah dan mempercantik tampilan sebuah website

2. Menambahkan Kode ke File index. html

File HTML berisi kode utama untuk membangun struktur situs web Anda. Ibarat sebuah mobil, HTML pada website sama seperti rangka mobil yang membentuk dan menopang bodi mobil tersebut. Oleh karena itu, file ini harus dibuat terlebih dahulu

Pada dasarnya struktur setiap halaman HTML terdiri dari 4 bagian utama yaitu.

Tag DTD/Doctype. Deklarasi Jenis Dokumen (DTD) harus ditulis di awal dokumen. Tag ini berfungsi untuk mendeklarasikan jenis dokumen dan versi HTML yang digunakan untuk diproses di web browser
tag HTML. Merupakan wadah dari semua elemen html
Tandai Kepala. Berisi informasi website yang tidak muncul di halaman web browser. Misalnya, source css, source js, title, meta charset
Badan Tag. Berisi semua elemen yang muncul di halaman web browser. Ini adalah bagian di mana semua konten ditulis

Baca Juga. Pelajari HTML Lengkap untuk Pemula

Bagaimana ada gambar?

Untuk itu, cara membuat website sederhana dengan HTML bisa dimulai dengan menambahkan kode berikut pada file index. html Anda

Pertama, pada bagian head tag ini, Anda perlu mendeklarasikan informasi tentang charset meta tag, judul website, serta link atau path dari sumber eksternal (misal. CSS dan JavaScript) yang digunakan di situs web.

Nah, yang perlu diperhatikan pada bagian head ini adalah lokasi penyimpanan file CSS. Pastikan file CSS berada di folder yang sama dengan file HTML. Jika foldernya berbeda, pastikan Anda memasukkan jalur yang sesuai di bagian href

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Personal Website</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>	
</head>

Kedua, masukkan tag tubuh. Bagian pertama body website portofolio ini adalah tampilan awal/welcome home yang terdiri dari navigation bar, text container, dan gambar.

Navigation bar atau biasa disebut navbar adalah komponen utama navigasi website yang berupa menu, biasanya terletak di bagian header website.

Sedangkan tag class text container pada kode di bawah ini adalah bagian dimana Anda bisa menambahkan teks untuk tampilan awal website saat diakses

<body>
    <section>
        <!--- navigation --->
        <nav>
            <!--- logo --->
            <a href="#" class="logo">Portfolio Tutorial</a>
            <!--- menu --->
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <!--- text --->
		<div class="text-container">
			<p>Hello,</p>
		    <p>I&#8217;M NIDA</p>
			<p>SEO Technical Writer & Developer</p>
            <p>An aquarius girl who loves music, watching movies and
            <br>of course writing.</p>
			<button class="hire-btn">Hire me</button>
			<button class="down-cv">Download CV</button>
		</div>
        <!-- model -->
        <img alt="model" class="model" src="images/ilustrasi.jpg">  
    </section>

Ketiga, karena ini adalah situs web portofolio, Anda dapat menambahkan bagian layanan. Di bagian ini, Anda dapat menunjukkan layanan yang dapat Anda lakukan dan keterampilan apa pun yang Anda miliki. Anda dapat menulis layanan pada tag <div class="box-container">

<div class="box-container">.

<!-- services/layanan -->
    <div class="services">
        <!--text-->
        <div class="services-text ">
            <p>Services</p>
            <p>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.</p>
        </div>
        
        <div class="box-container">
        <!--- 1 --->
            <div class="box-1">
                <span>1</span>
                <p class="heading">Technical Writing</p>
                <p class="details">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.</p>
                <button>Read More</button>
            </div>
        <!--- 2 --->
            <div class="box-2">
                <span>2</span>
                <p class="heading">Web Design</p>
                <p class="details">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.</p>
                <button>Read More</button>
            </div>
        <!--- 3 --->
            <div class="box-3">
                <span>3</span>
                <p class="heading">Web Development</p>
                <p class="details">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.</p>
                <button>Read More</button>
            </div>
        </div>
    </div>

Keempat, jika Anda sudah mengerjakan atau memiliki proyek, Anda dapat menambahkan testimonial ke situs web portofolio. Bagian ini bisa Anda isi dengan ulasan dan penilaian dari klien atas hasil pekerjaan Anda.

Jangan lupa untuk menambahkan link script fontawesome di bagian head. Karena jika tidak, icon bintang yang akan digunakan untuk menunjukkan rating kepuasan klien tidak akan muncul di halaman web Anda

<!--testimonials-->
    <div class="testimoni">
        <!--text-->
		<div class="testimoni-text ">
            <p>What Our Client Says..</p>
        </div>        

        <div class="testimoni-col">
            <div class="testimoni-1">
                <img src="images/ava1.png">
                <div>
                    <p>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.</p>
                    <h3>Client Pertama</h3>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
            </div>

            <div class="testimoni-2">
                <img src="images/ava2.png">
                <div>
                    <p>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.</p>
                    <h3>Client Kedua</h3>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
            </div>
        </div>
    </div>

Kelima, bagian footer. Sebagai penutup, kami menambahkan media sosial sebagai kontak yang dapat dihubungi. Kode HTML untuk logo media sosial dapat ditemukan di situs web fontawesome.

<!-- footer -->
    <footer>
        <p>Interested In Using Our Services?</p>
            
        <!--paragraph-->
        <p>I try to work on your project as quickly as possible. Guarantee for revision until you are satisfied with my work.</p>
        <!--social-->
        <div class="social-icons">
            <a href="#"><i class="fab fa-whatsapp"></i></a>
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-youtube"></i></a>
        </div>
        
        <!--copyright-->
        <p class="copyright">Copyright by Niagahoster Tutorial</p>
    </footer>

    <!--social-attach-bar-->
    <div class="social">
        <a href="#"><i class="fab fa-whatsapp"></i></a>
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-youtube"></i></a>
    </div>
</body>

</html>

Jika anda masih bingung, anda bisa langsung melihat hasilnya dengan mengcopy seluruh kode berikut ini pada text editor yang anda gunakan

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Personal Website</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
    <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script>	
</head>

<body>
    <section>
        <!--- navigation --->
        <nav>
            <!--- logo --->
            <a href="#" class="logo">Portfolio Tutorial</a>
            <!--- menu --->
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <!--- text --->
		<div class="text-container">
			<p>Hello,</p>
		    <p>I&#8217;M NIDA</p>
			<p>SEO Technical Writer & Developer</p>
            <p>An aquarius girl who loves music, watching movies and
            <br>of course writing.</p>
			<button class="hire-btn">Hire me</button>
			<button class="down-cv">Download CV</button>
		</div>
        <!-- model -->
        <img alt="model" class="model" src="images/ilustrasi.jpg">  
    </section>

    <!-- services -->
    <div class="services">
        <!--text-->
        <div class="services-text ">
            <p>Services</p>
            <p>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.</p>
        </div>
        
        <div class="box-container">
        <!--- 1 --->
            <div class="box-1">
                <span>1</span>
                <p class="heading">Technical Writing</p>
                <p class="details">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.</p>
                <button>Read More</button>
            </div>
        <!--- 2 --->
            <div class="box-2">
                <span>2</span>
                <p class="heading">Web Design</p>
                <p class="details">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.</p>
                <button>Read More</button>
            </div>
        <!--- 3 --->
            <div class="box-3">
                <span>3</span>
                <p class="heading">Web Development</p>
                <p class="details">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.</p>
                <button>Read More</button>
            </div>
        </div>
    </div>
    
    <!--testimonials-->
    <div class="testimoni">
        <!--text-->
		<div class="testimoni-text ">
            <p>What Our Client Says..</p>
        </div>        

        <div class="testimoni-col">
            <div class="testimoni-1">
                <img src="images/ava1.png">
                <div>
                    <p>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.</p>
                    <h3>Client Pertama</h3>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="far fa-star"></i>
                </div>
            </div>

            <div class="testimoni-2">
                <img src="images/ava2.png">
                <div>
                    <p>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.</p>
                    <h3>Client Kedua</h3>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- footer -->
    <footer>
        <p>Interested In Using Our Services?</p>
            
        <!--paragraph-->
        <p>I try to work on your project as quickly as possible. Guarantee for revision until you are satisfied with my work.</p>
        <!--social-->
        <div class="social-icons">
            <a href="#"><i class="fab fa-whatsapp"></i></a>
            <a href="#"><i class="fab fa-facebook-f"></i></a>
            <a href="#"><i class="fab fa-twitter"></i></a>
            <a href="#"><i class="fab fa-instagram"></i></a>
            <a href="#"><i class="fab fa-youtube"></i></a>
        </div>
        
        <!--copyright-->
        <p class="copyright">Copyright by Niagahoster Tutorial</p>
    </footer>

    <!--social-attach-bar-->
    <div class="social">
        <a href="#"><i class="fab fa-whatsapp"></i></a>
        <a href="#"><i class="fab fa-facebook-f"></i></a>
        <a href="#"><i class="fab fa-twitter"></i></a>
        <a href="#"><i class="fab fa-instagram"></i></a>
        <a href="#"><i class="fab fa-youtube"></i></a>
    </div>
</body>

</html>

Nah, sekarang website portofolio sederhana Anda sudah siap. Namun karena CSS belum digunakan, tampilannya tetap seperti ini

Hmm masih agak bingung dan kurang menarik, tinggal nambah css nya aja

Baca Juga. Membuat Aplikasi Web dengan Flutter

3. Menambahkan Kode ke gaya File. css

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

Jika kita kembali ke analogi mobil sebelumnya, CSS pada website ini seperti cat mobil yang bisa diubah dan disesuaikan agar tampilan mobil terlihat lebih keren. Meskipun bingkai atau strukturnya sama, Anda dapat mengubah gaya tampilan sesuai selera

Struktur penulisan CSS terdiri dari 3 bagian

Pemilih. Merupakan keyword yang menghubungkan style pada file CSS dengan file HTML. Selector dapat berupa tag, class, id, dan atribut yang terdapat pada file HTML.
Blok Deklarasi. Merupakan container atau tempat untuk menulis style CSS, ditandai dengan kurung kurawal {}
Properti dan Nilai. Adalah seperangkat aturan yang diberikan kepada pemilih yang dipilih.

Anda dapat mencoba menggunakan kode di bawah ini terlebih dahulu sebelum mengubahnya menggunakan gaya 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;
}

Nah, dari kodenya, apa yang dimaksud dengan pemilih, blok deklarasi, properti, dan nilai?

Agar lebih jelas, mari kita lihat 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,

<body>
    <section>
        <!--- navigation --->
        <nav>
            <!--- logo --->
            <a href="#" class="logo">Portfolio Tutorial</a>
            <!--- menu --->
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <!--- text --->
		<div class="text-container">
			<p>Hello,</p>
		    <p>I&#8217;M NIDA</p>
			<p>SEO Technical Writer & Developer</p>
            <p>An aquarius girl who loves music, watching movies and
            <br>of course writing.</p>
			<button class="hire-btn">Hire me</button>
			<button class="down-cv">Download CV</button>
		</div>
        <!-- model -->
        <img alt="model" class="model" src="images/ilustrasi.jpg">  
    </section>

0 dan

<body>
    <section>
        <!--- navigation --->
        <nav>
            <!--- logo --->
            <a href="#" class="logo">Portfolio Tutorial</a>
            <!--- menu --->
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <!--- text --->
		<div class="text-container">
			<p>Hello,</p>
		    <p>I&#8217;M NIDA</p>
			<p>SEO Technical Writer & Developer</p>
            <p>An aquarius girl who loves music, watching movies and
            <br>of course writing.</p>
			<button class="hire-btn">Hire me</button>
			<button class="down-cv">Download CV</button>
		</div>
        <!-- model -->
        <img alt="model" class="model" src="images/ilustrasi.jpg">  
    </section>

1 adalah pemilih. Jika Anda memperhatikan, mungkin timbul pertanyaan mengapa beberapa penyeleksi menggunakan titik di awal dan beberapa tidak.

Selector

<body>
    <section>
        <!--- navigation --->
        <nav>
            <!--- logo --->
            <a href="#" class="logo">Portfolio Tutorial</a>
            <!--- menu --->
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <!--- text --->
		<div class="text-container">
			<p>Hello,</p>
		    <p>I&#8217;M NIDA</p>
			<p>SEO Technical Writer & Developer</p>
            <p>An aquarius girl who loves music, watching movies and
            <br>of course writing.</p>
			<button class="hire-btn">Hire me</button>
			<button class="down-cv">Download CV</button>
		</div>
        <!-- model -->
        <img alt="model" class="model" src="images/ilustrasi.jpg">  
    </section>

_0 merupakan selector berupa class dan harus diawali dengan titik, sedangkan

<body>
    <section>
        <!--- navigation --->
        <nav>
            <!--- logo --->
            <a href="#" class="logo">Portfolio Tutorial</a>
            <!--- menu --->
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <!--- text --->
		<div class="text-container">
			<p>Hello,</p>
		    <p>I&#8217;M NIDA</p>
			<p>SEO Technical Writer & Developer</p>
            <p>An aquarius girl who loves music, watching movies and
            <br>of course writing.</p>
			<button class="hire-btn">Hire me</button>
			<button class="down-cv">Download CV</button>
		</div>
        <!-- model -->
        <img alt="model" class="model" src="images/ilustrasi.jpg">  
    </section>

1 merupakan selector berupa tag dan tidak menggunakan titik pada awal penulisannya

Blok deklarasi dimulai dengan tanda kurung { dan diakhiri dengan tanda kurung }

Kode

<body>
    <section>
        <!--- navigation --->
        <nav>
            <!--- logo --->
            <a href="#" class="logo">Portfolio Tutorial</a>
            <!--- menu --->
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <!--- text --->
		<div class="text-container">
			<p>Hello,</p>
		    <p>I&#8217;M NIDA</p>
			<p>SEO Technical Writer & Developer</p>
            <p>An aquarius girl who loves music, watching movies and
            <br>of course writing.</p>
			<button class="hire-btn">Hire me</button>
			<button class="down-cv">Download CV</button>
		</div>
        <!-- model -->
        <img alt="model" class="model" src="images/ilustrasi.jpg">  
    </section>

_4 adalah contoh properti dan nilai. Kode

<body>
    <section>
        <!--- navigation --->
        <nav>
            <!--- logo --->
            <a href="#" class="logo">Portfolio Tutorial</a>
            <!--- menu --->
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <!--- text --->
		<div class="text-container">
			<p>Hello,</p>
		    <p>I&#8217;M NIDA</p>
			<p>SEO Technical Writer & Developer</p>
            <p>An aquarius girl who loves music, watching movies and
            <br>of course writing.</p>
			<button class="hire-btn">Hire me</button>
			<button class="down-cv">Download CV</button>
		</div>
        <!-- model -->
        <img alt="model" class="model" src="images/ilustrasi.jpg">  
    </section>

_5 pada kode yang diberikan adalah properti yang berarti mengatur warna latar belakang dari pemilih tag

<body>
    <section>
        <!--- navigation --->
        <nav>
            <!--- logo --->
            <a href="#" class="logo">Portfolio Tutorial</a>
            <!--- menu --->
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <!--- text --->
		<div class="text-container">
			<p>Hello,</p>
		    <p>I&#8217;M NIDA</p>
			<p>SEO Technical Writer & Developer</p>
            <p>An aquarius girl who loves music, watching movies and
            <br>of course writing.</p>
			<button class="hire-btn">Hire me</button>
			<button class="down-cv">Download CV</button>
		</div>
        <!-- model -->
        <img alt="model" class="model" src="images/ilustrasi.jpg">  
    </section>

1. Sedangkan kode

<body>
    <section>
        <!--- navigation --->
        <nav>
            <!--- logo --->
            <a href="#" class="logo">Portfolio Tutorial</a>
            <!--- menu --->
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <!--- text --->
		<div class="text-container">
			<p>Hello,</p>
		    <p>I&#8217;M NIDA</p>
			<p>SEO Technical Writer & Developer</p>
            <p>An aquarius girl who loves music, watching movies and
            <br>of course writing.</p>
			<button class="hire-btn">Hire me</button>
			<button class="down-cv">Download CV</button>
		</div>
        <!-- model -->
        <img alt="model" class="model" src="images/ilustrasi.jpg">  
    </section>

_7 adalah nilai berupa warna putih untuk background pada tag

<body>
    <section>
        <!--- navigation --->
        <nav>
            <!--- logo --->
            <a href="#" class="logo">Portfolio Tutorial</a>
            <!--- menu --->
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Testimonials</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>

        <!--- text --->
		<div class="text-container">
			<p>Hello,</p>
		    <p>I&#8217;M NIDA</p>
			<p>SEO Technical Writer & Developer</p>
            <p>An aquarius girl who loves music, watching movies and
            <br>of course writing.</p>
			<button class="hire-btn">Hire me</button>
			<button class="down-cv">Download CV</button>
		</div>
        <!-- model -->
        <img alt="model" class="model" src="images/ilustrasi.jpg">  
    </section>

4. Mengakses Situs Web di Browser Web

Cara membuat website yang efektif dengan HTML dan CSS adalah dengan membuka text editor dan browser secara bersamaan

Mengapa demikian?

Dengan membukanya secara bersamaan, setiap perubahan yang Anda lakukan pada file HTML atau CSS dapat langsung terlihat di browser. Sehingga proses pengembangan website akan lebih cepat dan mudah untuk dimodifikasi

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

Nah, sekarang mari kita coba jalankan website portfolio yang sudah anda buat sebelumnya

Ini adalah contoh tampilan awal website dengan kode di atas. Wajar jika website Anda terlihat sedikit berbeda, karena gambar/aset yang Anda gunakan mungkin juga berbeda. Jadi sesuaikan saja, ya?

Oh ya, jangan lupa cek apakah ada gambar yang tidak muncul. Pastikan jalur penyimpanan gambar dan jenis file gambar yang digunakan sudah benar

Baca Juga. 10+ Situs Web Penyedia Gambar Gratis

Kesimpulan

Itulah cara membuat website dengan HTML dan CSS yang bisa Anda coba. Sangat mudah, bukan? .

Sayangnya, website tersebut hanya bisa diakses secara offline karena semua aset tersimpan di komputer saja. Supaya bisa dilihat banyak orang, kamu harus online dulu ya.

Caranya, Anda membutuhkan layanan web hosting untuk menyimpan aset Anda agar bisa diakses secara online. Namun, jangan sembarangan memilih layanan web hosting, ya

Layanan Unlimited Web Hosting Niagahoster bisa menjadi pilihan yang tepat. Pasalnya, 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 dapat selalu online selama 24 jam penuh. Dengan begitu, Anda bisa membuat website online tanpa khawatir downtime

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

Yuk, pilih saja layanan hosting Niagahoster untuk website Anda

Saya Ingin Memilih Web Hosting Murah Indonesia

Demikian panduan cara membuat website dengan HTML dan CSS, semoga artikel ini bermanfaat untuk anda 🙂

Membagikan

Nida Regita F Ikuti SEO Technical Writer di Niagahoster. Seorang gadis aquarius yang menyukai musik, menonton film dan tentunya menulis.

Berlangganan sekarang

Dapatkan berbagai artikel tutorial, insight dan tips menarik seputar dunia online langsung melalui email Anda. Berlangganan sekarang dan raih kesuksesan bersama kami

Langkah pertama dalam membuat HTML?

Cara Membuat Halaman Web Sederhana dengan HTML .

Buka editor teks. .

Setel jenis dokumen ke HTML. .

Tambahkan tab judul ke halaman web Anda. .

Ketuk di bawah tanda "Kepala" tertutup. .

Selanjutnya buat judul halaman. .

Tambahkan judul tambahan jika Anda mau. .

Buatlah sebuah paragraf. .

Mengubah warna teks

Bagaimana Cara Membuat Blog Berita?

Tentukan Topik Utama. Langkah pertama yang perlu Anda lakukan dalam membuat website berita adalah menentukan topik utama yang akan dibahas. .

Pilih Domain dan Hosting. .

Pilih tema. .

Instal Plugin Penting. .

Optimasi SEO. .

6. Optimasi Kecepatan. .

7. Buat Konten Berkualitas

Apa yang bisa dilakukan dengan HTML?

Biasanya, penggunaan HTML secara umum adalah untuk mengatur paragraf, tajuk, dan tautan pada halaman web. Namun, meskipun susunannya seperti coding, perlu diketahui bahwa HTML bukanlah bahasa pemrograman. HTML tidak dianggap sebagai bahasa pemrograman karena tidak dapat menyediakan fungsi yang bersifat dinamis.