for learn successfull and Healthy Live

Persib selangkah menuju Juara

Kemenangan penting dipetik Persib Bandung atas Madura United di leg I final Championship Series Liga 1 2023-2024, pada Minggu (26/5/2024) malam WIB.

Anime

Dragonball Ultra instinct Goku vs Jiren

Juknis Dana BOS 2024 PDF dan Cek Pencairannya

Cara cek penyaluran dana BOS (Bantuan Operasional Sekolah) tahap 1 tahun 2024 bisa dilakukan via laman Kemdikbud. Sedangkan juknis dana BOS tercantum dalam Permendikbud Nomor 63 tahun 2023.

8 Manfaat Biji Pepaya untuk Kesehatan dan Cara Konsumsinya

Manfaat Biji Pepaya Ada beberapa manfaat dari mengkonsumsi biji pepaya untuk kesehatan tubuh, di antaranya adalah sebagai berikut. 1. Menurunkan Risiko Penyakit Kanker

Resep Kue Tradisional

Langkah pembuatan kue cucur: 1. Masak air dengan gula pasir dan gula merah sambil diaduk rata, lalu dinginkan. 2. Campur tepung terigu, tepung beras, dan bubuk kayu manis.

Rabu, 18 September 2024

Kisi-kisi Mid

 

1.     Dalam menyusun suatu program,langkah pertama yang harus di lakkukan adalah :

   a. Membuat program

   b. Membuat Algoritma

   c. Membeli komputer

   d. Proses

   e. Mempelajari program 

 

2.     Sebuah prosedur langkah demi langkah yang pasti untuk menyelesaikan sebuah masalah di sebut :

   a. Proses

   b. Program

   c. Algoritma

   d. Step

   e. Diagram

 

3.     Pseudocode yang di gunakan pada penulisan algoritma berupa :

   a. Bahassa Inggris

   b. Bahasa Puitis

   c. Bahasa pemograman

   d. Sembarang bahasa asal terstruktur

   e. Bahasa Mesin

 

4.     Algoritma seharusnya dapat dijangkau oleh akal pikiran kita. dengan pertimbangan tersebut berarti algoritma memiliki sifat...

a. Logis

b. Cepat

c. Akurat

d. Trending

e. Realistis

 

5.     Pada pembuatan program komputer, algoritma dibuat :

   a. Sebelum pembuatan program

   b. Pada saat program dibuat

   c. Sesudah pembuatan program

   d. Pada saat verifikasi program

   e. Pada saat di jalankan

 

6.     Tahapan dalam menyelesaikan suatu masalah adalah :

   a. Masalah-Pseudocode-Flowchart-Program-Eksekusi-Hasil

   b. Masalah-Algoritma-Flowchart-Program-Eksekusi-Hasil

   c. Masalah-Model-Algoritma-Eksekusi-Hasil

   d. Masalah-Model-Algoritma-Program-Eksekusi-hasil 

   e. Algoritma-Program-Model-Eksekusi-Hasil

 

7.     Flowchart memiliki nama lain...

a.      Tree

b.     Alur

c.      Diagram

d.     Algoritma

e.      Bagan alir

 

8.     Diberikan algoritma : Apabila warna merah maka jadi hijau. Apabila warna hijau maka jadi putih, selain warna merah dan hijau maka jadi ungu. Jika kondisi input warna adalah hitam, maka warna jadi :

   a. Merah

   b. Ungu

   c. Hijau 

   d. Putih

   e. Abu-abu

 

9.     Asal mula kata algoritma adalah...

a.    Algorith

b.   Algorism

c.    Aritmatika

d.   Algometrika

e.    Algorismatika

 

10.  Urutan langkah logis untuk menyelesaikan masalah yang disusun secara sistematis disebut dengan...

a.    Array

b.   Tipe data

c.    Variabel

d.   Algoritma

e.    Konstanta

 

11.  Dalam membuat algoritma harus memiliki konsep, salah satu konsep algoritma adalah...

a.    Peubah

b.   Pertukaran

c.    Algoritma

d.   Urutan

e.    Peubah dan pertukaran

 

12.  Struktur pertama dalam pascal adalah . .

a. Char;

b. String

c. End.

d. Writeln

e. Uses crt;

 

13.  Untuk melihat hasil dari program yang di kerjakan tekan tombol ...

a. CRTL+F5

b. CRTL+F9

c. CRTL+F2

d. CRTL+F12

e. CRTL+F4

 

14.  Berapa kode yang digunakan untuk membuat tulisan berwarna “CYAN”…

a. 4

b. 2

c. 128

d. 7

e. 3

 

15.  Perintah dasar sederhana dalam program passcal adalah...

a. Readln

b. End

c. Write

d. Wtiteln

e. Uses crt;

 

16.  Tipe data bahasa pascal untuk TRUE FALSE adalah...

a. String

b. Char

c. Boolean

d. Byte

e. Real

 

17.  Siapkah penemu program pascal…

a. Greyson change

b. Prof.niklaus wirth

c. Kondrazuse

d. Prof.niklaus smirth

e. Dr.harcules

 

18.  Struktur bahasa pemograman pascal paling pertama adalah...

a. Var;

b. Begin

c. End;

d. Uses crt;

e. Writeln;

 

19.  Tipe data pascal untuk karakter adalah...

a. Char

b. Boolean

c. Integer

d. Real

e. Byte

 

20.  Kapan terbentuknya pascal...

a. 1981

b. 1971

c. 1961

d. 1991

e. 1987

 

21.  Apa kepanjangan ari USES…

a. Unit secure

b. Uni t syntax

c. Unit sytem

d. Up software

e. Unit semiconductor

 

22.  Berikut ini adalah penulisan identifier yang benar dalam pemogramn pascal adalah...

a. 9 program satu

b. Program_1

c. Program satu

d. Begin

e. Array

 

23.  Tipe bilangan bulat dalam bahasa pascal dikenal sebagi ...

a. Byte

b. Integer

c. Char

d. String

e. Boolean

 

24.  Istilah” perulangan “ dalam pemograman pascal dikenal dengan ...

a. Repeating

b. Again

c. Funtion

d. Replay

e. Looping

 

25.  Perintah untuk menutup program dalam pascal adalah...

a. End.

b. Program

c. Uses crt;

d. Finish

e. End;

 

26.  Menggambarkan program secara logika merupakan fungsi dari...

a. Flowchart

b. Dxdiag

c. Begin

d. SI

e. Sistem oprasi

 

27.  Sebuah algoritma yang dinyatakan dalam diagram dengan bentuk-bentuk tertentu merupakan deskripsi dari...

a.  Array

b. Terminator

c.  Konstanta

d. Flowchart

e. Pseudocode

 

28.  Di bawah ini termasuk dalam deklarasi dalam pascal ,kecuali...

a. Deklarasi perubah

b. Deklarasi proses

c. Deklarasi konstanta

d. Deklarasi tipe

e. Deklarasi prosedut

 

29.  Bagan alir formulir (form flowchart) merupakan istilah lain dari...

a. Sistem flowchart

b. Program flowchart

c. Schematic flowchart

d. Documen flowchart

e. Process flowchart

 

30.  Prosedur yang digunakan untuk membersihkan layar saat program dijalankan adalah...

a. Writeln

b. Readln

c. Begin

d. Write

e. Clrscr

31.      Berikut ini adalah pernyataan yang benar mengenai algoritma, kecuali ....

a. Algoritma merupakan prosedur pemecahan masalah

b. Algoritma berisi rangkaian langkah-langkah kerja

c. Algoritma tidak harus menghasilkan output

d. Algoritma pasti memberikan hasil yang sama untuk inputan yang sama

e. Algoritma harus terbatas langkahnya

 

32.  Dalam sebuah algoritma, langkah-langkah tidak boleh ambigu. Manakah di antara Langkah Langkah dalam sebuah algoritma berikut yang ambigu?

a. “Masukkan satu gelas air putih”

b. “Tuangkan adonan puding ke dalam cetakan”

c. “Jika kue sudah matang, keluarkan kue dari oven”

d. “Kukus adonan selama 20 menit”

e. “Sajikan selagi panas”

 

33.   Bagian persiapan dari sebuah algoritma disebut dengan bagian ....

a. Deskripsi

b. Deklarasi

c. Header

d. Preparation

e. Prosedur

 

34.  Istilah-istilah yang biasanya muncul pada bagian deskripsi algoritma yang berkenaan installasi software adalah sebagai berikut, kecuali .........

a. Tunggu hingga proses installasi selesai

b. Tekan Tombol Next

c. Masukkan Serial Number

d. Klik ganda ikon

e. Matikan komputer

 

35.  Berikut ini alasan mengapa langkah-langkah algoritma tidak boleh ambigu?

1. Agar algoritma memberikan output yang sama untuk input yang sama

2. Agar algoritma dapat dimengerti oleh pengguna

3. Agar langkah-langkah algoritma menjadi terbatas atau mempunyai titik henti

Manakah di antara pernyataan dia tas yang benar?

a. 1 saja

b. 1 dan 2 saja

c. Semua benar

d. 1 dan 3 saja

e. Tidak ada yang benar

Share:

Selasa, 20 Agustus 2024

Cara Membuat Blog untuk Pemula sederhana

 Apa itu blog?

blog adalah

Blog adalah sebuah jenis website yang memuat konten tulisan berbagai topik. Mulai dari berbagi informasi, mencurahkan pikiran, atau bahkan website bisnis. Tidak hanya memuat konten tulisan tetapi juga bisa dibumbui konten visual seperti foto, video, infografis, dan lain-lain.

Blog juga mempunyai potensi sebagai platform untuk sumber traffic, tempat berbagi, atau bahkan bisa menghasilkan uang. Dengan mempelajari cara membuat blog, kamu bisa membangun website portofolio pribadi yang juga berguna untuk kebutuhan karirmu, Sob!

Perbedaan blog dan website

Sebelum mengetahui cara membuat blog kamu harus tau perbedaan antara blog dan website, salah satunya adalah adanya kolom komentar. Blog di sini mempunyai kolom komentar yang bisa dimanfaatkan untuk komunikasi dua arah antara audiens dan blogger tersebut, sedangkan website tidak memiliki kolom komentar.

Kedua, blog bersifat dinamis karena kontennya mengalami pembaruan, sedangkan website bersifat statis karena halaman-halamannya jarang sekali diperbarui. Ketiga, elemen pada blog yaitu nama penulis, tanggal postingan, dan kategori terlihat jelas di bagian atas postingan, sedangkan di website tidak ada 3 elemen tersebut.

Platform untuk membuat blog

Terdapat banyak platform untuk membuat blog yang bisa kamu gunakan. Ada yang gratis dan ada yang berbayar. Berikut adalah beberapa platform sebagai referensimu.

1. Blogger

blogger

Cara membuat blog di blogger.com hampir mirip dengan wordpress.com. Tersedia blog builder yang mempunyai tampilan mudah dan simpel. Selain itu blog builder ini juga tanpa biaya. Selain itu kamu bisa mendapatkan nama domain dengan namamu sendiri.

2. Weebly

weebly

Weebly tersedia gratis dan berbayar. Dengan weebly free, kamu bisa membuat website gratis tetapi nama domain kamu akan berakhiran weebly.com. Cara membuat blog yang memiliki nama domain sendiri dengan berakhiran .com atau .id adalah kamu perlu menambah paket menjadi Weebly Connect dan membayar biaya $5 per bulan.

3. WordPress.org

WordPress.org adalah platform website yang paling sering dipakai para blogger. Selain karena gratis, kamu bisa menulis artikel dan mendesain blog sesuka hati, atau bahkan menginstall plugin. Tetapi untuk membuat website WordPress harus memiliki domain dan hosting terlebih dahulu ya, Sob.


4.WordPress.com

Berikutnya cara membuat blog di WordPress. WordPress.com adalah blog builder gratis yang menyediakan hosting gratis dan domain gratis, tetapi domain yang kamu terima adalah subdomain wordpress.com.

5. Medium

buat blog di medium

Medium biasanya dijadikan sebagai tempat berbagi pengalaman dan cerita menarik. Medium memiliki format yang hampir mirip dengan blog, akan tetapi kamu menumpang di platformnya.

6. Tumblr

Tumblr adalah platform blog gratis yang mempunyai kelebihan lebih mudah dan simpel, tidak perlu banyak mengatur tampilan, serta kamu hanya tinggal menulis isi dari blog yang kamu buat. Sangat simpel, bukan?

Cara membuat blog di HP

Selanjutnya kita akan membahas cara membuat blog di HP. Yup, dengan kecanggihannya, sekarang membuat blog pun bisa kamu lakukan melalui smartphone. Penasaran gimana caranya, Sob? Simak tips di bawah ini!

1. Unduh aplikasi blogspot

Pertama, cara membuat blog di HP adalah kamu harus mengunduh aplikasi blogspot terlebih dahulu. Aplikasinya untuk blogspot adalah Blogger.com dan unduh melalui Google Play Store ataupun melalui App store.

2. Buat akun

Selanjutnya buatlah akun dengan klik Sign UP. Masukan alamat email dan password yang sudah didaftarkan.

3. Edit profil

Cara membuat blog di HP setelah masuk ke aplikasi, kamu bisa memulai edit dan mengisi profil sesuai dengan keinginan dan arahan pada kolom edit profil.

4. Buat alamat dan judul blog

Setelah menampilkan halaman buat blog baru, cara membuat blog di HP selanjutnya ialah membuat alamat blog dan judul blog. Di sini tuliskan nama alamat yang belum pernah dipakai oleh pengguna lainnya.

5. Pilih template desain

Jika sudah, cara membuat blog di HP yang terakhir adalah memilih desain template sesuai dengan keinginan. Dan cara membuat blog di HP pun selesai! Selanjutnya kamu bisa mengisi dan melakukan update pada blog semaumu.

Cara membuat blog yang menghasilkan uang

Setelah mengetahui cara membuat blog di HP, ada juga beberapa cara membuat blog gratis dan menghasilkan uang. Yup, benar Sob, kita bisa menjadikan blog sebagai sumber penghasilan sampingan. Berikut adalah beberapa cara untuk membuat blog yang menghasilkan uang:

1. Promosikan blog

Cara membuat blog gratis dan menghasilkan uang yang pertama adalah lakukan promosi. Jadi ketika menulis artikel, maksimalkan kualitas konten dan lakukan kegiatan pemasaran alias promosi website serta pertukaran backlink.

2. Pelajari SEO

Cara membuat blog gratis dan menghasilkan uang selanjutnya ialah kamu harus mempelajari tentang SEO. Seakan SEO tidak bisa dipisahkan terhadap kegiatan blogger.

Selain membuat konten yang berkualitas, keyword yang relevan dan memperhatikan kiat-kiat menulis artikel juga harus kamu pahami supaya bisa menduduki peringkat teratas hasil pencarian Google. Bacalah artikel tentang SEO untuk pemula dan mulai terapkan.

Baca juga: SEO WordPress : Panduan Buat Websitemu Mudah Ditemukan di Google

3. Buat website user friendly

Selain itu, cara membuat blog yang menghasilkan uang bisa kamu lakukan dengan menggunakan template custom agar tetap relevan di tengah perkembangan zaman. Selain itu bisa mendukung slot iklan Google Adsense lebih banyak, website user friendly, dan kecepatan loading yang lebih cepat.

Selain itu kamu bisa mengoptimalkan gambar pada postingan. Gunakan perbandingan foto dan teks secara seimbang agar pembaca tidak mudah merasa bosan dengan konten yang kamu tulis. Widget juga dapat melengkapi tampilan blog dan membuat website kamu user friendly.

4. Lakukan endorse

Lakukan endorsement jika diperlukan. Ini merupakan salah satu cara membuat blog yang menghasilkan uang. Dengan endorsement, kamu akan mendapatkan uang tunai atau bahkan produk gratis!

5. Jadi publisher iklan

Cara membuat blog gratis dan menghasilkan uang selanjutnya adalah menjadi publisher iklan, yaitu memasang iklan di laman web milik kamu. Setiap klik yang diperoleh akan diakumulasi menjadi uang dan nantinya bisa dicairkan, Son. Tapi kamu juga harus memastikan iklan yang ada itu relevan dengan isi konten blog, ya.

6. Gabung program afiliasi

Cara membuat blog gratis dan menghasilkan uang yang terakhir adalah kamu bisa bergabung dengan program afiliasi. Program afiliasi adalah program yang memberikan komisi jika kita berhasil membuat orang lain menggunakan produk mereka.

Itulah beberapa cara membuat blog yang bisa kamu ikuti sesuai kebutuhan. Bagaimana, sudah siap mengelola blog buatan sendiri? Nah, dari ulasan di atas, tentu kamu sudah tahu jika blog juga bisa menjadi sumber cuan.

Oleh karena itu, optimalkan blog dengan layanan hosting murah hanya dari Jagoan Hosting, kamu bisa mendapatkan domain gratis dan SSL serta masih banyak lagi gratis menarik buat kamu.


Share:

Cara Membuat Website dengan HTML dan CSS

Bagian ini akan menjelaskan semua langkah yang perlu Anda ikuti dalam cara membuat website dengan HTML. Sebelum melanjutkan, silakan lihat cheat sheet HTML kami apabila Anda belum familiar dengan bahasa markup ini.

1. Pilih Editor Kode HTML

Editor kode adalah software yang digunakan untuk menulis coding website. Meskipun bisa menggunakan editor teks default seperti Notepad untuk membuat halaman HTML, aplikasi tersebut tidak memiliki fitur penting untuk menyederhanakan proses development, seperti:

  • Penandaan syntax – fitur ini menandai tag HTML dengan berbagai warna berdasarkan kategorinya. Berkat fitur ini, struktur kode menjadi lebih mudah dibaca dan dipahami.
  • Penyelesaian otomatis – menyarankan atribut, tag, dan elemen HTML secara otomatis berdasarkan value sebelumnya untuk mempercepat proses penulisan kode.
  • Deteksi error – menyoroti kesalahan syntax, memungkinkan web developer mendeteksi error dan memperbaikinya dengan cepat.
  • Integrasi – beberapa editor kode terintegrasi dengan plugin, Git, dan klien FTP untuk meningkatkan efisiensi proses peluncuran (deployment).
  • Preview langsung – tidak perlu membuka file HTML secara manual di browser, Anda bisa menginstal plugin untuk melihat preview langsung website.
fitur live preview di visual studio code

Karena ada banyak pilihan, kami sudah menyiapkan rekomendasi editor kode HTML terbaik untuk membantu Anda menemukan opsi yang paling sesuai kebutuhan:

  • Notepad++ – editor teks gratis yang ringan dengan fitur tambahan untuk pemrograman dan dukungan plugin.
  • Atom – editor HTML open-source dengan fitur live preview website serta kompatibilitas bahasa scripting dan markup yang sangat baik.
  • Visual Studio Code (VSCode) – tool populer untuk web development dengan library ekstensi lengkap untuk menambah fungsionalitasnya.

2. Rencanakan Tata Letak Website

Selanjutnya, Anda perlu membuat rencana tata letak (layout) yang matang dalam cara membuat website dengan HTML dan CSS. Sebab, hal ini akan memungkinkan Anda memvisualkan tampilan website dengan lebih baik.

Anda juga bisa menggunakannya sebagai checklist untuk melacak elemen-elemen apa saja yang harus disertakan dalam website Anda.

Selain itu, rencana tata letak membantu Anda menentukan kegunaan dan navigasi website, yang nantinya memengaruhi pengalaman pengguna. Beberapa elemen yang perlu dipertimbangkan dalam proses ini mencakup header, footer, dan navigasi website.

rencana layout website kasar dalam cara membuat website dengan html

Anda bisa menggunakan pena dan kertas atau software desain web seperti Figma untuk merancang tata letak website. Konsep layout Anda tidak perlu terlalu mendetail, asalkan tetap mencerminkan tampilan dan nuansa website.

3. Mulai Tulis Kode HTML

Setelah rencana layout dan tool siap, Anda bisa mulai menulis kode untuk memulai cara membuat website dengan HTML. Langkah-langkahnya mungkin bervariasi tergantung pada editor kode yang Anda gunakan, tapi proses dasarnya tetap sama.

Dalam tutorial ini, kami akan menunjukkan cara membuat website dengan HTML menggunakan VSCode:

  1. Buat folder baru di komputer Anda. Folder ini akan menjadi direktori untuk semua file website.
  2. Buka VSCode → File → Open Folder.
  3. Temukan folder baru tersebut lalu klik Select Folder.
  4. Pilih New File. Beri nama file tersebut dengan index.html dan tekan enter.
  5. Klik Create File untuk mengonfirmasi.
  6. Ketika diminta untuk membuka tab editor index.html, masukkan struktur dasar dokumen HTML berikut:
<!DOCTYPE html>
<html>
   <head>
      <title> </title>
   </head>
   <body>
   </body>
</html>

Untuk membantu Anda memahami kode tersebut, berikut penjelasan untuk setiap tag:

  • <!DOCTYPE html> – memberi tahu web browser bahwa website ini adalah halaman HTML.
  • </html> – tag pembuka dokumen HTML yang menandakan dimulainya kode.
  • <head> – tag yang berisi metadata website.
  • <title> – mendefinisikan teks yang ditampilkan pada tab browser saat mengunjungi halaman web.
  • <body> – berisi semua konten yang terlihat pada halaman web.

3. Buat Elemen dalam Tata Letak

Tambahkan kode HTML ke dalam file index.html untuk membuat elemen-elemen dari rencana layout Anda. Tergantung pada desain website Anda, mungkin akan diperlukan beberapa elemen semantik HTML yang berbeda.

Elemen-elemen ini akan memisahkan website menjadi beberapa bagian dan menjadi tempat penampung untuk kontennya. Berikut adalah tag yang akan kita gunakan:

  • <header> – tempat penampung untuk konten pengantar atau navigasi.
  • <main> – menunjukkan konten utama suatu halaman web.
  • <div> – mendefinisikan suatu bagian dalam dokumen HTML.
  • <footer> – berisi konten yang ditampilkan di bagian bawah website Anda.

Letakkan elemen-elemen ini di antara tag <body></body> dalam kode file index.html. Pastikan untuk menutup setiap elemen dengan tag penutup, atau kode Anda tidak akan berfungsi.

Ini dia contoh kode lengkapnya:

<!DOCTYPE html>
<html>
   <head>
      <title>Personal Blog</title>
   </head> 
   <body>
      <header>   

      </header>
      <main>
         <div class=”row">
            <div class=”post-text-box”>

            </div>
            <div class=”profile”>

            </div>  
         </div>        
      </main>
      <footer>
            
      </footer>
    </body>
</html>

5. Tambahkan Konten HTML

Apabila layout sudah siap, mulailah mengisinya dengan konten website, seperti teks, gambar, link, atau video. Kalau konten Anda belum siap, gunakan sampel konten apa pun sebagai placeholder, kemudian Anda bisa menggantinya nanti.

Berikut adalah beberapa tag yang akan digunakan untuk menambahkan konten website:

  • <h1> dan <p> – berisi teks judul dan paragraf. Gunakan tag <br> untuk menambahkan spasi atau jeda per baris apabila teksnya terlalu panjang.
  • <nav> dan <a> – menentukan navigation bar dan elemen terkaitnya (anchor element). Gunakan atribut href untuk menentukan URL yang tertaut dengan anchor.
  • <img> – tempat penampung untuk elemen gambar. Tempat ini berisi atribut img src yang menentukan link atau nama file gambar.

Tips Berguna

Tag tersebut juga memiliki atribut alt opsional, yang akan mendeskripsikan gambar apabila file tidak bisa dimuat.

Kodenya akan menjadi seperti ini:

<!DOCTYPE html>
<html>
   <head>
      <title>Personal Blog</title>
      </head> 
   <body>
      <header>   
      <h1>Your Personal Blog</h1>
      <nav>
         <a href=”domain.tld/home”>Home</a>
         <a href=”domain.tld/blog”>Blog</a>
         <a href=”domain.tld/about”>About</a>
      </nav>
      </header>
      <main>
         <div class=”row">
            <div class=”post-text-box”>
               <h1>Newest Post</h1>
               <section>
                  <h1>First Post</h1>
                  <p>The first post’s content</p>
               </section>
            </div>
            <div class=”profile”>
               <h1>About Me</h1>
               <img src=”profile-picture.png”>
               <p>About the author</p>
            </div>  
         </div>        
      </main>
      <footer>
         <a href=”twitter.com/author”>Twitter</a>
         <a href=”facebook.com/author”>Facebook</a>
         <a href=”instagram.com/author”>Instagram</a>
      </footer>
    </body>
</html>

Setelah menambahkan kode di atas, versi pertama website dengan HTML Anda pun sudah siap. Kira-kira tampilannya akan seperti ini:

hasil pertama membuat website dengan html

6. Sertakan CSS Tata Letak

Karena HTML hanya memungkinkan Anda membuat struktur website dan menambahkan konten dasar, gunakan CSS untuk mengubah tata letaknya. CSS adalah bahasa yang menentukan gaya dokumen HTML.

Untuk melakukannya, buat file style.css dan hubungkan stylesheet tersebut ke dokumen HTML dengan menambahkan kode berikut di antara tag pembuka dan penutup <head> pada index.html:

<link rel="stylesheet" href="style.css">

Untuk membuat layout website dua kolom, kami akan menggunakan properti flex. Properti ini berfungsi untuk mengatur elemen HTML menggunakan tempat penampung yang fleksibel sehingga bisa menyesuaikan ukuran layar pengguna.

Berikut kodenya:

/*header style*/
header {
   text-align: center; 
   padding: 20px;
}
/*navigation menu style*/
nav {
   text-align: center;
   word-spacing: 30px;
   Padding: 10px;
}
/*creating the two-column layout*/
*{
   box-sizing: border-box;
}
.row {
   display: flex;
   flex-wrap: wrap;
}
.post-text-box {
   flex: 70%;
   padding: 20px;
}
.profile {
   flex: 70%;
   padding: 20px;
}
/*profile image and heading style*/
.profile img {
   width: 120px;
   display: block;
   margin-left: 0;
   margin-right: 0;
}
.profile h1 {
   text-align: center;
}

Setelah menambahkan snippet kode ke file CSS, berikut tampilan website yang sudah Anda buat dengan HTML dan CSS:

website dengan html dan css

7. Sesuaikan Tampilan Website HTML

Selain mengubah tata letak, gunakan CSS untuk menyesuaikan aspek visual lain website Anda. Misalnya, Anda bisa mengganti jenis font dan gambar latar belakang website.

Untuk mengubah tampilan website, tambahkan properti CSS dalam elemen yang ingin Anda sesuaikan. Sebagai contoh, berikut adalah kode untuk mengganti warna latar belakang dan elemen teks pada menu navigasi:

/*navigation bar style*/
nav {
   text-align: center;
   word-spacing: 30px;
   padding: 10px;
   background-color: #f5f5dc
   font-family: Helvetica;
   
}
/*navigation bar button style*/
nav a {
   color: #000000;
   text-decoration: none;
   font-size: larger;
}

Setelah menambahkan styling CSS untuk setiap elemen, tampilan website Anda akan menjadi seperti berikut:

membuat website html dengan layout dan styling css

Apabila ingin menggunakan warna lain, ganti kode warna HTML dalam kode di atas dengan opsi yang lebih sesuai dengan keinginan Anda.

Setelah Membuat Website dengan HTML dan CSS, Apa Lagi?

Bagian ini akan menjelaskan langkah-langkah yang perlu dilakukan setelah Anda menyelesaikan cara membuat website dengan HTML dan CSS. Setelahnya, website Anda pun bisa diakses dengan lebih mudah dan berfungsi lebih baik.

Hosting Website di Platform yang Tepat

Agar website Anda bisa diakses melalui internet, gunakan layanan web hosting. Sebagian besar provider hosting memiliki banyak paket yang memenuhi berbagai kebutuhan pengguna.

Karena halaman web HTML termasuk ringan dan hanya perlu sedikit resource untuk loading, paket shared hosting biasa pada dasarnya sudah memadai.

Atau, Anda bisa menggunakan platform hosting gratis seperti GitHub Pages untuk membuat website statis.

Namun, hindari platform hosting statis gratis kalau berencana menambah kode atau membuat website dinamis. Selain kemungkinan timbul masalah kompatibilitas, resource server yang terbatas bisa memperlambat website.

Tambahkan Menu Dropdown untuk Navigasi yang Lebih Baik

Website kompleks dengan banyak halaman memiliki banyak tombol navigasi, link, dan teks. Anda bisa membuat menu dropdown CSS sederhana untuk mengelompokkan elemen-elemen ini.

membuat menu pada website html dan css

User bisa memperluas navigation bar untuk mengakses elemen-elemen tersebut. Hal ini pun membantu memperbaiki tampilan dan meningkatkan kegunaan website, terutama bagi user yang menggunakan layar berukuran kecil.

Share: