Contoh Coding Website Sekolah HTML dan CSS

Halo semuanya kali ini kita akan membahas bagaimana cara membuat coding website sekolah html dan css, bagi temen-temen disini yang sedang mencari website dengan tema sekolah. Website yang akan kita buat, Kita tambahkan CSS. Dengan CSS website kita akan lebih menarik dan terkesan profesional ya.

Table of Contents

Pengertian HTML

Pengertian HTML secara umum, HTML singkatan dari HyperText Markup Language, merupakan bahasa markup yang digunakan untuk membangun dan menyusun struktur halaman web. HTML bukanlah termasuk ke dalam bahasa pemrograman, melainkan sebuah bahasa markup (tag) yang terdiri dari elemen-elemen untuk memberikan instruksi kepada browser tentang bagaimana konten harus ditampilkan.

HTML sendiri tidak memiliki kemampuan untuk melakukan logika atau pemrosesan data seperti yang dilakukan dalam bahasa pemrograman. Maka untuk membuat halaman web yang interaktif dan dinamis, HTML sering digabungkan dengan bahasa pemrograman seperti JavaScript, PHP, dan lainnya.

Pengertian CSS

pengertain css dan contohnya — Logo CSS (source: vectorlogozone.com)

Menurut Wikipedia Cascading Style Sheet (CSS) merupakan aturan untuk mengatur beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. CSS bukan merupakan bahasa pemrograman.

Kegunaan pada CSS ini, CSS memungkinkan Anda mengontrol tampilan dan gaya elemen-elemen HTML. Dengan menggunakan CSS, Anda dapat mengubah ukuran, warna, font, layout, dan banyak aspek lainnya dari elemen-elemen tersebut dalam artian CSS sangat penting sekali bagi seorang web desainer untuk menguasai CSS.

Persiapan Tools

coding website sekolah html css — freepik

Tools

Disini kita akan menggunakan tools yang kita butuhkan dalam membuat website sekolah, sebagai berikut ini:

Teks Editor: VS Code atau Teks Editor Lain
Web Browser: Chrome

Contoh Kode atau Coding HTML Website Sekolah

Buka Text Editor kamu, Setelah dibuka kita membuat folder. Kamu dapat menyimpan folder di Documents atau ditempat lain. Kita akan membuat dua buah file. Yaitu index.html dan style.css.

File : Index.html

<!DOCTYPE html>
<html>
<head>
<title>Website Sekolah</title>

</head>
<body>
<header>
<h1>Sekolah SMAN</h1>
</header>

<nav>
<ul>
<li><a href=”#”>Beranda</a></li>
<li><a href=”#”>Tentang</a></li>
<li><a href=”#”>Program Studi</a></li>
<li><a href=”#”>Kontak</a></li>
</ul>
</nav>

<main>
<h2>Selamat datang di Sekolah SMAN!</h2>
<p>Website kami menyediakan informasi tentang program studi yang ditawarkan oleh Sekolah SMAN. Silakan jelajahi halaman kami untuk mengetahui lebih lanjut.</p>
</main>

<footer>
<p>Hak Cipta © 2023 Sekolah SMAN. All rights reserved.</p>
</footer>
</body>
</html>

File : style.css

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}

header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}

nav {
background-color: #555;
color: #fff;
padding: 10px;
}

nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}

nav ul li {
display: inline;
margin-right: 10px;
}

nav ul li a {
color: #fff;
text-decoration: none;
}

main {
padding: 20px;
}

footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}

Luar Biasa! ini adalah hasilnya. Disini temen-temen bisa mengembangkan website nya agar lebih menawan lagi. Demikian tutorial Contoh Coding Website Sekolah HTML dan CSS.

Lihat artikel HTML dan CSS dari alafgani.web.id yang akan dapat menambah ilmu tentang HTM.

Daftar Materi Belajar HTML:

Lihat Semua materi belajar html diatas, untuk menguasai HTML dengan Cepat!

alafganidev

Menyukai Kucing, Terkadang ngopi dikala Hujan, Menyukai Blog dan Website. Sekarang berfokus kepada SEO.