Anda berada di tempat yang tepat. Dalam panduan ini, kami menunjukkan kepada Anda semua langkah untuk mendapatkan dari layar kosong ke situs web yang berfungsi yang dioptimalkan dan cukup tampan pada saat yang bersamaan.

Tapi pertama-tama, apa itu HTML dan CSS?

Ya, Anda bisa saja mencari kedua istilah tersebut di Wikipedia, tetapi definisi tersebut tidak ramah pembaca. Mari kita sederhanakan sedikit

• HTML [Hypertext Markup Language] mendefinisikan struktur dan konten halaman web – kemana perginya, bagaimana tata letaknya, dan apa yang ada di halaman
• CSS [Cascading Style Sheets] mendefinisikan gaya/presentasi halaman web dan elemen di dalamnya

Anda tidak dapat benar-benar memiliki satu tanpa yang lain – keduanya bekerja sama untuk membentuk halaman web akhir, desainnya, dan konten yang ada di dalamnya

Catatan; . Padahal, “situs web” adalah hal yang lengkap – seluruh situs Anda dengan semua halaman web individualnya

Daftar Isi

1. dasar-dasar HTML
2. Struktur dokumen HTML
3. pemilih CSS
4. lembar gaya CSS bersama-sama
5. Bootstrap
6. sebuah desain
7. situs web Anda dengan HTML dan CSS
8. konten dan gambar
9. dan font
10. halaman tambahan

Jika menurut Anda ini terlalu rumit, sebaiknya buat situs web menggunakan WordPress atau pilih salah satu pembuat situs web

Sebelum Anda Mulai, Kumpulkan Sumber Daya Anda

Jadi, hal pertama yang Anda perlukan sebelum membuat website dengan HTML dan CSS adalah web server [hosting]. Namun, jangan khawatir; . Banyak perusahaan web hosting akan menjual Anda layanan hosting sederhana di mesin mereka. Hanya google untuk "hosting web" dan pilih sesuatu yang tidak terlalu mahal atau periksa ulasan hosting web kami

Dengan server diurutkan, hal berikutnya yang Anda butuhkan adalah nama domain. Nama domain adalah apa situs web diidentifikasi di web. Misalnya, nama domain situs ini adalah

p {
    font-size: 18px;
}

1

Ketika Anda memiliki nama domain dan server, Anda dapat menghubungkan keduanya

Untuk menyelesaikan masalah ini tanpa rasa sakit di pihak Anda, kami sarankan untuk mendaftar dengan perusahaan seperti Bluehost

Mereka akan menangani semua pengaturan untuk Anda. Artinya mereka akan. [a] menyiapkan akun hosting untuk Anda, [b] mendaftarkan nama domain atas nama Anda, [c] mengonfigurasi semuanya untuk bekerja sama, dan [d] memberi Anda akses ke dasbor yang mudah digunakan

Silakan mendaftar dengan salah satu layanan hosting web, kami akan menunggu. Saat Anda kembali dan mengkonfigurasi server web Anda dan siap untuk pergi, gulir ke langkah berikutnya

P. S. Jika Anda hanya ingin bereksperimen dengan situs web HTML di komputer Anda, dan tidak bermaksud untuk mempublikasikannya, gunakan perangkat lunak server web lokal. Yang kami rekomendasikan dan suka gunakan disebut XAMPP. Ini memiliki versi untuk Mac dan PC, dan mudah digunakan. Berikut panduan cara menginstalnya di komputer Anda

1. Pelajari Dasar-dasar HTML

Elemen utama dari struktur HTML adalah tag HTML

Tag, misalnya, terlihat seperti ini

SOMETHING

_

Di sini, kita berurusan dengan tag

p {
    font-size: 18px;
}

2. Yang ini akan menebalkan sepotong teks yang berada di antara tag pembuka [

p {
    font-size: 18px;
}

2] dan tag penutup [

p {
    font-size: 18px;
}

4]. Dalam hal ini, teks tersebut adalah

p {
    font-size: 18px;
}

5

Tapi ada tag lain, hanya untuk beberapa nama

• p {
      font-size: 18px;
  }
  

  6 akan membuat teks miring di antara tag pembuka dan penutup

• p {
      font-size: 18px;
  }
  

  7 akan menggarisbawahinya

• p {
      font-size: 18px;
  }
  

  8 adalah paragraf teks

• p {
      font-size: 18px;
  }
  

  _9 adalah header utama pada halaman

Selain tag sederhana tersebut, ada juga tag yang lebih kompleks. Misalnya, jika Anda ingin membuat daftar seperti berikut ini

• Barang 1
• Butir 2
• Butir 3

… Anda dapat melakukannya dengan kode HTML berikut

Item 1
Item 2
Item 3

Atau, jika Anda ingin menambahkan tautan ke halaman lain, seperti ini

Ini adalah tautan ke beranda kami

… Anda dapat melakukannya dengan potongan kode ini

This is a link to my homepage

Baca ini untuk mendapatkan daftar lengkap tag HTML. Ini akan berguna saat Anda membuat situs web dengan HTML dan CSS

2. Memahami Struktur Dokumen HTML

Pikirkan halaman HTML Anda seolah-olah dibuat dari Lego. Anda meletakkan batu bata yang berbeda di atas satu sama lain untuk mendapatkan struktur yang lebih besar

Tapi alih-alih batu bata Lego, Anda mendapatkan tag HTML…

Inilah struktur dokumen HTML paling sederhana

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

Anda dapat mengambil kode di atas, salin dan tempel ke file baru, simpan dokumen sebagai

.normal-text {
    font-size: 18px;
}

0, dan itu akan menjadi halaman HTML yang benar-benar valid

Mari kita jelaskan masing-masing bagian dari kode ini

• .normal-text {
      font-size: 18px;
  }
  

  1 – deklarasi awal dokumen

• .normal-text {
      font-size: 18px;
  }
  

  2 – pernyataan lain;

• .normal-text {
      font-size: 18px;
  }
  

  3 – menandai awal dari bagian kepala;

• .normal-text {
      font-size: 18px;
  }
  

  4 – menentukan set karakter apa yang digunakan untuk menulis dokumen;

• .normal-text {
      font-size: 18px;
  }
  

  5 – judul halaman; . g

This is a link to my homepage_0

Dan kemudian gunakan potongan kode HTML berikut di dokumen utama

This is a link to my homepage

_1

Metode kedua itu pada dasarnya adalah bagaimana hal-hal dilakukan di Bootstrap

Untuk mengubah warna teks apa pun pada halaman, pertama-tama temukan tag yang bertanggung jawab untuk menata gaya teks tersebut, lalu masuk ke lembar gaya dan ubah kelas yang sesuai, atau buat kelas baru

Ini contohnya; . ” Saat ini, warnanya hitam, dan ini adalah kode yang menanganinya

This is a link to my homepage

_2

Untuk mengubah warnanya, cara terbaik adalah membuat kelas baru bernama, katakanlah,

Item 1
Item 2
Item 3

01 dan atur nilai warnanya di sana, seperti itu

This is a link to my homepage

_3

*

Item 1
Item 2
Item 3

_02 akan memastikan bahwa setelan warna ini akan menimpa setelan warna lain yang ada sebelumnya

Sekarang, kita dapat kembali ke header kita, dan mengubah kodenya menjadi

This is a link to my homepage

_4

Dengan perubahan ini, header sekarang akan berwarna oranye

This is a link to my homepage_5

• memuat font Merriweather, Roboto, dan font sans-serif default sistem [baca ini untuk mempelajari tentang font yang aman untuk web]
• atur ukuran font menjadi 18px

Definisi semacam ini dapat ditempatkan ke dalam kelas CSS apa pun, seperti halnya definisi warna. Sebenarnya, definisi font dan warna sering ditemukan dalam deklarasi kelas yang sama

Kembali ke contoh kita sebelumnya, untuk mengubah ukuran font untuk header yang bertuliskan "Siap Melayani Anda", pertama-tama kita dapat membuat kelas seperti ini

This is a link to my homepage

_6

Dan kemudian tetapkan kelas ini ke header

This is a link to my homepage

_7

Saat mengubah warna atau font di template buatan Bootstrap Anda, pertama-tama lihat lembar gaya CSS untuk kelas yang mungkin sudah memberi Anda ukuran atau warna alternatif. Gunakan yang tersedia

10. Buat Halaman Tambahan

Sekarang setelah Anda menyesuaikan beranda, saatnya untuk mulai mengerjakan beberapa halaman tambahan dan kemudian menautkannya ke beranda

Saat membuat situs web dengan HTML dan CSS, Anda dapat membuat sejumlah sub-halaman dan kemudian menautkan semuanya

Berikut adalah beberapa halaman umum yang dibutuhkan sebagian besar situs web

• tentang halaman
• kontak
• portofolio
• Produk dan Layanan
• tim
• kebijakan [kebijakan privasi, persyaratan, dll. ]

1. Mulailah Dengan Tata Letak

Saat membuat halaman web baru, keputusan pertama yang harus Anda buat adalah tata letak yang Anda inginkan

Saat membuat situs web dengan HTML dan CSS, tidak ada yang menghentikan Anda untuk membuat tata letak apa pun yang Anda inginkan. Satu-satunya kesulitan sebenarnya adalah menyatukannya

HTML dan CSS bisa jadi sulit untuk ditangani saat memulai dari layar kosong, jadi kami juga akan menggunakan Bootstrap di sini. Pertama, kami akan menunjukkan kepada Anda beberapa prinsip menyusun tata letak dan kemudian mendemonstrasikan cara melakukannya dengan Bootstrap

Cara Anda memikirkan tata letak halaman web Anda adalah dengan menganggapnya sebagai urutan blok individual – satu di atas yang lain. Sesuatu seperti ini [perhatikan empat blok berbeda]

This is a link to my homepage_8

Hal yang kami lewatkan di sini adalah bagian konten utama. Untuk membuatnya, kami akan menggunakan kembali bagian tentang

Lanjutkan dan buat salinan bagian tentang. Yang ini

This is a link to my homepage

_9

Sekarang ubah dua baris pertama menjadi ini

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

0

Karena kita tidak memerlukan header

Item 1
Item 2
Item 3

_14 di sana dan elemen

Item 1
Item 2
Item 3

15, mari kita hapus saja. Satu-satunya yang tersisa di dalam seluruh blok ini adalah satu paragraf teks. Seperti itu

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

1

Ketika Anda menyimpan file dan menavigasi ke sana melalui browser Anda, Anda akan melihat bahwa pada dasarnya Anda memiliki dua blok yang sangat mirip satu di bawah yang lain, dengan latar belakang warna yang sama.

Akan lebih baik untuk memiliki latar belakang putih di bagian konten utama. Untuk mengubahnya, satu-satunya hal yang perlu kita lakukan adalah menghapus kelas

Item 1
Item 2
Item 3

16 dari tag utama

  
  

  Creative - Start Bootstrap Theme

  
  

6. Dengan kata lain, buatlah tag menjadi ini

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

2

Itu lebih baik

Mari tambahkan beberapa paragraf dummy ke halaman untuk mengisinya lagi, ditambah mungkin sub-judul

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

3

Inilah tampilannya di halaman

Jika Anda tidak suka teks dipusatkan maka hapus saja

Item 1
Item 2
Item 3

18 kelas dari salah satu tag

  
  

  Creative - Start Bootstrap Theme

  
  

8

Jika Anda ingin menambahkan lebih banyak bakat pada blok teks ini, Anda dapat membuat kelas CSS baru [seperti sebelumnya] dan menetapkannya ke paragraf di blok tersebut. Atau, Anda dapat mengintip stylesheet saat ini dan melihat kelas apa yang sudah ada untuk tujuan ini. Inilah yang kami tetapkan untuk tag

This text is going to be 18px.

1 dan

Item 1
Item 2
Item 3

21

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

4

Dan inilah efeknya

Satu hal lagi yang akan kita lakukan di sini adalah menambahkan gambar di suatu tempat di halaman

Inilah contoh tag gambar dalam HTML

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

5

Cukup sederhana, bukan? . Agar semuanya tertata dengan baik, Anda dapat meletakkan gambar Anda di direktori

4 lagi [seperti yang Anda lakukan dengan latar belakang itu beberapa waktu lalu]. Dalam kasus seperti itu, tag gambar akan menjadi

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

6

Meskipun demikian, tag gambar dalam konfigurasi khusus ini cukup terbatas. Untuk membuatnya sedikit lebih halus, mari kita tetapkan beberapa kelas Bootstrap ke dalamnya. Khususnya

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

7

Kedua kelas ini akan memberikan sudut bulat pada gambar Anda dan juga akan memastikan bahwa ukuran gambar tidak melebihi ukuran blok tempatnya berada.

Anda sekarang dapat menambahkan tag seperti ini di suatu tempat di bagian konten utama halaman tentang Anda. Misalnya, di sini

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

8

Dan inilah efek akhir pada halaman

Inilah halaman tentang kami dengan segala kemegahannya

3. Tautan ke Halaman Baru

Dengan selesainya halaman baru, sekarang mari kita tautkan dari halaman beranda [file

.normal-text {
    font-size: 18px;
}

0]. Biasanya, tempat terbaik untuk menambahkan tautan ini ada di menu navigasi [di bawah

Item 1
Item 2
Item 3

08]

Secara khusus, cari baris ini

  
    
    Hello, world!
  
  
    
Hello, world!
    
My first web page.
  

_9

Kami akan mengubahnya menjadi ini

p {
    font-size: 18px;
}

0

Ini adalah sesuatu yang belum kita bicarakan, tetapi tag

Item 1
Item 2
Item 3

25 adalah tag tautan dalam HTML. Dengan menggunakannya, Anda dapat menautkan ke halaman web mana pun dengan memberikan alamat halaman itu di parameter

Item 1
Item 2
Item 3

26. Teks tautan – bagian tautan yang dapat diklik – akan menjadi teks di antara tag pembuka dan penutup

Item 1
Item 2
Item 3

27

Saat Anda me-refresh beranda sekarang, Anda akan melihat tautan baru Anda mengarah ke halaman tentang

Bacaan lebih lanjut

Pada tahap ini, pada dasarnya Anda telah membuat sendiri situs web sederhana yang terdiri dari dua halaman – halaman beranda dan halaman tentang

Yang harus Anda lakukan sekarang adalah bilas dan ulangi dengan membuat halaman baru, menyetelnya, menambahkan konten ke dalamnya, lalu menautkan semuanya dari menu navigasi

Hal lain yang layak dilakukan saat Anda melalui langkah-langkah ini adalah mempelajari lebih lanjut prinsip-prinsip HTML dan CSS, melalui daftar periksa, dan juga mempelajari Bootstrap serta struktur dan kelasnya. Beberapa sumber daya untuk itu

• Lembar contekan HTML5
• Lembar contekan CSS
• Lembar contekan Javascript
• Tutorial bootstrap
• Lembar contekan bootstrap

Menguasai Bootstrap, kemungkinan besar jalur terbaik yang tersedia saat ini untuk membangun situs web yang dioptimalkan dan indah dengan HTML dan CSS

Jika ada pertanyaan tentang cara membuat website dengan HTML dan CSS, jangan ragu untuk menyampaikannya di kolom komentar

Apa saja 10 langkah membuat website?

Bagaimana cara membuat halaman web langkah demi langkah?

Apa saja 5 langkah mudah membuat website?

Bagaimana Anda membuat kode situs web dasar menggunakan HTML?