Baris tag 

,

---

dan kode  Get Started! juga kita hapus karena tidak dibutuhkan, jadi kode akan berubah menjadi seperti ini:

Langkah 4: Simpan perubahan dan cek dengan menggunakan browser chrome, jika hasilnya seperti di bawah ini maka proses modifikasi telah berhasil.

Langkah 5: Kita buat warnanya berubah menjadi warna putih, caranya hapus bagian kode bg-primary di dalam 

tag utama.

Semula kodenya seperti ini:

Isi teks disini

Setelah bagian bg-primary (ditandai dengan bold) dihapus, kodenya akan menjadi seperti di bawah ini:

Isi teks disini

Langkah 6: Sekarang kita akan menambahkan beberapa paragraf, karena halaman website yang kita buat ini untuk halaman personal jadi kita tambahkan paragraf yang sesuai dengan profile personal yang ingin diperkenalkan melalui halaman ini.

Ganti Isi teks disini dengan teks versi Anda sendiri!

Panjang teks yang bisa Anda tambahkan sesuai dengan kebutuhan Anda, teks diatas hanya contoh saja dalam demo ini.

Langkah 7: Setelah menambahkan teks, langkah selanjutnya adalah menambahkan gambar. Karena website yang kita buat bertujuan untuk memperkenalkan profil, maka perlu ditambahkan gambar foto profil.

Caranya dengan menambahkan kode di bawah ini:

Setelah ditambahkan, berikut tampilan kode secara lengkapnya.

Catatan: Nama file image, sesuaikan dengan file image yang Anda gunakan.

Langkah 8: Selanjutnya kita akan memodifikasi bagian portfolio, Karena website yang kita buat untuk seorang freelancer SEO Content Writer Tech, kita akan menambahkan link yang bisa di klik. Kode untuk bagian Portfolio adalah sebagai berikut:

Category bisa diganti menjadi nama kliennya.

Project Name bisa diganti dengan nama project yang pernah dikerjakan. Contohnya adalah sebagai berikut:

Dan hasilnya nanti adalah sebagai berikut:

Bagian gambar juga bisa Anda sesuaikan dengan project yang Anda kerjakan. Mengganti gambar sangat mudah, Anda hanya tinggal memasukkan gambar ke direktori template assets/img/portfolio/fullsize dan untuk gambar thumbnail ke direktori assets/img/portfolio/thumbnails.

Selanjutnya di bagian kode html ganti nama image sebelumnya dengan nama file image yang baru, perhatikan gambar di bawah ini:

Sekarang kita lanjutkan ke langkah 9 untuk memodifikasi bagian contact.

Langkah 9: Masih di file index.html, kita akan memodifikasi bagian contact yaitu menghapus bagian form contactnya. Kami menginginkan pengunjung menghubungi pemilik website secara langsung melalui nomor telepon atau email yang dicantumkan disana.

Di bagian contact yang ditandai dengan  hapus semuanya dan ganti dengan kode di bawah ini:

Get In Touch!

---

Siap untuk memulai proyek Anda berikutnya bersama kami? Hubungi kami dan kami akan menghubungi Anda sesegera mungkin!

+62 (nomor telepon yang dapat dihubungi)

Hasilnya akan seperti di bawah ini:

Langkah 10: Kami belum mengubah bagian Masthead, bagian ini adalah headline dari sebuah website. Oke kita lanjutkan langkah terakhir mengubah bagian Masthead ya, pertama ganti tulisan “Your Favorite Place for Free Bootstrap Themes” menjadi headline yang Anda inginkan.

Dalam demo ini kami mengganti tulisan “Your Favorite Place for Free Bootstrap Themes”  menjadi “I Ready Write Epic Tech Content SEO”. Sedangkan untuk bagian sub contentnya berisikan deskripsi singkat tentang jasa content writer teknologi.

Misalnya kami mengubahnya menjadi seperti di bawah ini:

Bagian terakhir mengubah title dan navbar brand, cara mengubahnya Anda bisa perhatikan gambar di bawah ini:

Selesai, sekarang Anda sudah berhasil membuat halaman website sederhana menggunakan template dari Bootstrap.

Itulah cara membuat website dengan html dan css yang bisa Anda coba untuk membuat website impian Anda. Hanya dengan menggunakan template gratisan dari Bootstrap, Anda sudah bisa membuat website yang responsif.

Namun jika Anda tidak memiliki waktu untuk mempraktekkan cara membuat website ini, Anda bisa menggunakan jasa pembuatan website profesional atau membuat website menggunakan WordPress, cek artikel tentang cara membuat website dengan WordPress.

Oh iya website yang Anda buat di demo ini masih bersifat statis karena hanya terdiri dari html dan css saja, tidak ada database dan lainnya. Ditambah lagi website tersebut hanya bisa Anda akses secara offline, karena semua asetnya disimpan di komputer.

Lantas, bagaimana caranya agar bisa dilihat banyak orang? Tentu saja Anda perlu meng online kan terlebih dahulu websitenya. Caranya Anda memerlukan layanan hosting untuk menyimpan aset website Anda.

Akan tetapi, Anda tidak bisa sembarangan membeli hosting web, karena nantinya akan mempengaruhi kinerja website. Sebagai salah satu pertimbangan, Anda bisa menggunakan salah satu layanan web hosting dari Exabytes Indonesia yang telah dilengkapi fitur keamanan mumpuni.

Sudah siap ya untuk membangun website Anda sendiri, yuk langsung saja pilih layanan hosting Anda dan miliki website impian Anda.

Selamat mencoba, good luck!

Langkah 3: Menyimpan dan Membuka Halaman Web

Setelah kamu menambahkan sejumlah konten, simpan file dan buka dengan browser web. Kamu sekarang harus melihat konten yang kamu buat tadi.

Download Template HTML dan CSS Bootstrap

Dalam panduan cara membuat website dengan html ini kita akan menggunakan salah satu template dari Start Bootstrap. Tenang, template yang digunakan gratis dan mudah untuk dioptimalkan serta dirancang dengan sangat baik.

Yuk kita download terlebih dahulu templatenya.

Langkah 1: Buka website startbootstrap.com untuk mendapatkan template html dan css Start Bootstrap secara gratis dan bebas digunakan.

Langkah 2: Klik Browse Template & Themes.

Langkah 3: Pilih salah satu template sesuai kebutuhan Anda, dalam demo ini kami memilih template Creative karena gratis dan cukup simple jika dilihat dari tampilan yang ada.

Langkah 4: Kemudian klik Free Download dan simpan filenya di lokasi yang mudah ditemukan.

Langkah 5: Setelah selesai di download, buka file tersebut dan pindahkan isinya ke direktori utama akun hosting website Anda. Sebagai permulaan, Anda bisa menggunakan web hosting murah untuk percobaan menerapkan cara membuat website dengan html ini.

Langkah 6: Setelah selesai dipindahkan, buka file tersebut. Caranya klik dua kali di file Index.html dan nantinya akan terbuka di browser chrome yang Anda gunakan.

Selanjutnya kita lanjutkan ke pembahasan selanjutnya.

Cara Membuat Website dengan HTML

Setelah mengetahui pengertian dan fungsi dari bahasa HTML dan juga CSS, sekarang Anda dapat mulai mencoba membuat website. Lakukan tahapan-tahapan di bawah ini:

Tahap pertama Anda perlu menginstal aplikasi Text Editor. Selain Notepad yang memang jadi bawaan Windows, ada banyak pilihan tools untuk Text Editor.

Seperti Visual Studio Code atau VSCode, Sublime Text, Vim, Komodo edit, dan Notepad ++.

Ketika memilih Text Editor pastikan dulu spesifikasi komputer Anda. Misalnya berapa besaran RAM komputer Anda. Hal ini dikarenakan bahwa untuk beberapa aplikasi Text Editor bisa dijalankan dengan baik pada komputer dengan spesifikasi tertentu. Serta pilih aplikasi yang tidak berbayar.

Karena Anda sedang belajar membuat website, sebagai pemula Anda dapat memilih Notepad ++. Aplikasi ini berbeda dengan Notepad sebelumnya karena menyediakan berbagai fitur pendukung.

Notepad ++ juga termasuk Text Editor gratis yang bisa dipakai untuk komputer dengan spesifikasi ram 2GB.

Selain Notepad ++ ada juga Text editor lain yang masih buatan Microsoft, yaitu VSCode. Meski begitu tools ini juga tersedia untuk sistem operasi Mac Os dan Linux.

Anda dapat menggunakan VSCode untuk membuat website dengan HTML dan CSS.

Setelah memilih aplikasi Text Editor, langkah selanjutnya adalah membuat file HTML untuk mulai menyusun tag. Misalnya buatlah file index.html. Pada file ini Anda akan merangkai struktur halaman website.

Secara garis besar, dalam setiap halaman tersusun atas 4 bagian yaitu:

Sehingga rangkaian tag yang Anda buat pada Text Editor, dimulai dengan mencantumkan tag DTD lalu tag HTML.

Setelah itu Anda menyusun bagian tag head untuk mengisi informasi mengenai meta tag charset, title, dan link dari file CSS yang nantinya akan dibahas lebih lanjut. Contoh penulisannya seperti ini:

Baru kemudian lanjut ke tag body, untuk mengatur homepage website. Di mana biasanya berisi navigation bar, text container, paragraph, sampai bagian footer.

Selain itu jangan lupa menambahkan gambar yang sesuai. Sebelum itu pastikan Anda sudah mengumpulkan semua foto, gambar dan aset untuk membuat website dalam satu folder agar lebih mudah.

Berikut contoh penulisan pada bagian body untuk personal blog:

 

       

     

       

Hello,

       

I’M IndonesianWriter.com

       

A ONE STOP CONTENT MARKETING SOLUTION FOR YOUR BUSINESS’ GROWTH

       

Ready to get your content enhance with IndonesianWriter?

        CLICK HIRE      

 

Cara membuat website dengan HTML Selanjutnya adalah dengan membuat file CSS untuk memberikan tampilan website yang lebih menarik. Pada text editor buat file dengan extension CSS misalnya style.css.

Kemudian mulailah memasukkan kode untuk menambahkan elemen pada halaman web. CSS ini akan sangat membantu karena bahasa HTML sendiri terbatas dan fokusnya lebih ke struktur isi website.

CSS terdiri dari 3 jenis jika melihat dari penempatan kode. Yaitu CSS Inline, Internal, serta External. Untuk Inline, kode CSS dicantumkan di bagian body dalam file HTML. Kode ini hanya memberikan perubahan pada satu baris saja.

Sedangkan Internal kode-kodenya diletakkan di bagian header pada file HTML. Berfungsi menentukan tampilan satu halaman website.

Terakhir ada External yaitu, kode CSS yang ditaruh di luar file HTML dalam bentuk file.css. Fungsinya yaitu mengatur tampilan untuk semua halaman website.

Sehingga bisa digunakan untuk menata beberapa halaman web sekaligus apa saja yang bisa diatur oleh CSS? Ada banyak, diantaranya yaitu menentukan bagaimana format paragraph, font, dan warna tulisan.

Kemudian membuat kotak teks, tombol link, mengubah warna link dan juga mengatur warna yang bisa berubah ketika diarahkan oleh kursor. Semua detail desain tersebut bisa dilakukan dengan menggunakan bahasa CSS.

Contoh penulisan kode CSS kurang lebih akan seperti ini:

@charset “utf-8”; /* CSS Document*/ body{ background-color:#a11111; 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: #ffffff; font-size: 22px; }

.text-container p:nth-child(2){ font-family: calibri; font-weight: bold; letter-spacing: 2px; color: #ffffff; font-size: 60px; }

.text-container p:nth-child(3){ font-family: myriad pro regular; color: #ffffff; font-size: 30px; line-height: 30px; }

.text-container p:nth-child(4){ font-family: calibri; color: #ffffff; 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; }

button:active{ transform: scale(1.1); }

.model{ height: 560px; position: absolute; bottom: 60px; left: 80%; transform: translateX(-70%); }

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%); }

Setelah Anda membuat file HTML dan file CSS lengkap dengan tag dan kode yang sudah disusun, maka selanjutnya adalah menghubungkan kedua file tersebut.

Caranya cukup mudah. Anda tinggal memasukkan kode pada bagian head di file index.html. Dengan begitu kedua file akan langsung terintegrasi. Contohnya seperti ini:

Tahapan berikutnya Adalah membuka website Anda melalui web browser. Pada langkah ini bukan berarti halaman website sudah selesai.

Karena fungsi dari tahapan ini yaitu agar proses membuat website dengan HTML dan CSS bisa berjalan lebih efektif.

Buka kedua file bersamaan. Ketika Anda melakukan penambahan elemen baik pada file HTML dan juga CSS, perubahannya bisa langsung terlihat di web browser.

Namun sebelumnya Anda perlu memuat ulang halaman, setiap kali ada perubahan. Dengan begitu proses mengembangkan website jadi lebih mudah dan cepat.

Berikut ini merupakan hasil dari cara membuat website dengan HTML dan CSS secara sederhana.

Menyiapkan Struktur Dasar HTML

Sebelum mulai menulis kode, kamu perlu tahu apa saja yang harus ada di dalam sebuah website sekolah. Struktur dasar HTML yang perlu kamu buat pertama kali adalah sebagai berikut:

Selamat datang di Website Sekolah XYZ

Tentang Sekolah

Program Pendidikan

Kontak

Tentang Sekolah

Ini adalah bagian tentang sekolah kamu…

Program Pendidikan

Informasi mengenai program pendidikan yang disediakan…

Bagian ini berisi informasi kontak sekolah…

© 2024 Website Sekolah XYZ

Dengan struktur dasar ini, kamu sudah bisa membuat halaman website dengan bagian-bagian seperti header, nav, section, dan footer.

Cara Membuat Website dengan HTML dan CSS

Sebelum kita membahas teknikal cara membuat website dengan html dan css, ada beberapa tools yang perlu Anda persiapkan terlebih dahulu seperti web browser dan text editor. Dalam tutorial ini kami menggunakan text editor notepad++ dan web browser chrome.

Anda bisa menggunakan tools apapun selain notepad++ dan chrome, dalam tutorial kali ini kami hanya akan membuat website html dan css yang sederhana saja. Kurang lebih tampilan websitenya jika sudah jadi adalah sebagai berikut:Dalam proses pembuatan website dengan html dan css, kami akan menggunakan Bootstrap. Bootstrap adalah perangkat sumber terbuka berupa struktur dasar dokumen html dan css. Dengan Bootstrap Anda akan dengan mudah membuat struktur website yang siap untuk dioptimalkan lebih lanjut.

Intinya dengan bantuan Bootstrap, Anda tidak perlu menerapkan cara membuat website dengan html dari awal. Menarik bukan dan menghemat waktu? Yuk kita langsung mulai membuat website sederhana dengan html dan css.

Menambahkan Fitur Interaktif dengan JavaScript

Jika kamu ingin menambahkan fitur interaktif, seperti tombol yang berubah warna saat dihover, kamu bisa menggunakan JavaScript. Ini bisa membuat website semakin menarik dan fungsional.

document.querySelector(‘button’).addEventListener(‘click’, function() {

alert(‘Tombol diklik!’);

Fitur seperti ini akan memberikan pengalaman pengguna yang lebih menyenangkan dan interaktif.

Membuat website sekolah dengan HTML memang cukup sederhana jika kamu mengikuti langkah-langkah di atas. Dari mulai struktur dasar HTML, menambahkan konten penting, hingga memberikan sentuhan desain dengan CSS, semuanya bisa dilakukan dengan mudah. Jadi, jangan ragu untuk mencoba membuat website sekolah yang keren dan informatif!

Jika kamu tertarik dengan dunia teknologi, khususnya dalam bidang web development, mengapa tidak mempertimbangkan untuk kuliah di Universitas Maha Karya Asia? Di sana, kamu akan mendapatkan pendidikan yang berkualitas, terutama dalam bidang IT yang sangat relevan dengan dunia teknologi saat ini. Kunjungi website PMB Unmaha untuk mengetahui lebih lanjut tentang program yang ditawarkan. Jangan lewatkan kesempatan untuk belajar di kampus yang memiliki fasilitas lengkap dan pengajaran dari dosen berpengalaman!***

Editor: Mahfida Ustadhatul Umma

Membuat website dengan HTML dan hias dengan CSS. Miliki kedua kekuatan ini, kamu akan bisa membuat berbagai macam website!

HTML adalah teknologi yang digunakan untuk membuat struktur dasar website, seperti menampilkan text, gambar, video dan lainnya.

CSS adalah teknologi yang digunakan untuk menghias halaman HTML alias menghias website kamu.

Langkah 2: Menambahkan Konten

Di antara tag , kita bisa mulai menambahkan konten untuk website kita. Misalnya: