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!

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.

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.

Baca Juga : Pengertian HTML Lengkap

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.

Baca Juga : Cara Menghubungkan HTML dan CSS

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

Pengenalan HTML, CSS, dan JavaScript

HTML, CSS, dan JavaScript adalah tiga teknologi utama yang digunakan dalam pembuatan website. HTML (HyperText Markup Language) digunakan untuk membuat struktur dan konten dasar dari sebuah halaman web. CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan tata letak elemen-elemen dalam halaman web. Sedangkan JavaScript digunakan untuk memberikan interaksi dan fungsionalitas dinamis pada halaman web.

Dengan menguasai ketiga teknologi ini, Anda dapat membuat website yang menarik dan interaktif. Berikut adalah langkah-langkah untuk memulai:

Apa manfaat HTML dan CSS

Dengan menguasai HTML dan CSS, kamu akan bisa membuat berbagai macam layout website sesuai kebutuhan pekerjaan atau klien kamu.

Istilah "slicing" adalah mengubah desain yang kamu atau tim designer buat dan menjadikannya kode (HTML dan CSS) sehingga ia bukan lagi sekedar desain, tapi sebuah website yang bisa digunakan oleh banyak orang.

Kamu juga akan membuka pintu pekerjaan yang bernama "front end developer". Sebelum nanti lanjut mempelajari Javascript.

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.

Baca Juga : Cara Menghubungkan HTML dan CSS

Sekolah SMAN

Selamat datang di Sekolah SMAN!

Website kami menyediakan informasi tentang program studi yang ditawarkan oleh Sekolah SMAN. Silakan jelajahi halaman kami untuk mengetahui lebih lanjut.

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.

Update pada kelas (Changelog)