Cara membuat web dengan html

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

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

<b>SOMETHING</b>

Di sini, kita berurusan dengan tag

p {
    font-size: 18px;
}

p {
    font-size: 18px;
}

p {
    font-size: 18px;
}

p {
    font-size: 18px;
}

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

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

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

Ini adalah tautan ke beranda kami

… Anda dapat melakukannya dengan potongan kode ini

<a href="https://websitesetup.org/">This is a link to my homepage</a>

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
  </body>
</html>

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

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

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

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

  6 – menandai awal dari bagian tubuh;

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

  7 – header utama pada halaman

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

  8 – paragraf teks sederhana

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

  9 – tag penutup dari seluruh dokumen HTML

Catatan penting di sini. Mengerjakan file HTML dalam aplikasi teks dasar atau pemroses teks kompleks seperti MS Word bukanlah pengalaman yang baik. Untuk memudahkan Anda, instal editor HTML bernama Sublime Text. Ini memiliki versi untuk Mac dan PC, dan gratis

Mengapa lebih baik? . Artinya, secara visual akan membedakan tag HTML Anda dari konten teks, parameter tag, dan nilai lainnya. Pada dasarnya, semuanya akan dapat dibaca. Inilah tampilan struktur HTML sederhana kami di Sublime Text

Oke, kembali ke topik. Anda dapat mengambil file

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

Oke, jadi halamannya jelek, bagaimana cara membuatnya tidak begitu?

3. Kenali Pemilih CSS

Sama seperti HTML yang memiliki tag, CSS memiliki pemilih

Penyeleksi menjelaskan bagaimana elemen tertentu harus berperilaku berdasarkan penampilan. Berikut adalah contoh pemilih CSS

p {
    font-size: 18px;
}

Pemilih ini menunjukkan bahwa semua tag HTML

<p class="normal-text">This text is going to be 18px.</p>

Namun, cara yang lebih praktis menggunakan pemilih CSS adalah tidak membatasi semua tag dari jenis yang diberikan ke gaya tertentu, melainkan membuat "kelas" yang berbeda dan menetapkannya ke tag satu per satu.

Misalnya, pemilih kelas di CSS terlihat seperti ini

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

Perhatikan titik (

<p class="normal-text">This text is going to be 18px.</p>

<p class="normal-text">This text is going to be 18px.</p>

Sebagai contoh

<p class="normal-text">This text is going to be 18px.</p>

Mari luangkan waktu satu menit lagi untuk menjelaskan semua elemen dari potongan kode CSS di atas

• <p class="normal-text">This text is going to be 18px.</p>
  

  _4 – definisi kelas;

• <p class="normal-text">This text is going to be 18px.</p>
  

  _6 – contoh properti CSS

• <p class="normal-text">This text is going to be 18px.</p>
  

  _7 – nilai yang diberikan ke properti

Ada banyak sekali properti CSS selain

<p class="normal-text">This text is going to be 18px.</p>

4. Kumpulkan Lembar Gaya CSS

Dokumen HTML sangat struktural – setiap elemen memiliki tempatnya masing-masing, dan urutan elemen sangat penting untuk konstruksi akhir dan tampilan halaman web yang bersangkutan. Dokumen CSS jauh lebih sedikit

Dokumen CSS sering disebut sebagai stylesheet. Pada dasarnya, lembar gaya CSS adalah daftar semua definisi kelas yang digunakan dalam dokumen HTML terkait. Urutan definisi kelas tidak begitu penting di sebagian besar waktu (setidaknya untuk desain sederhana)

Cara Anda menyatukan lembar gaya CSS adalah dengan mendefinisikan setiap kelas satu per satu, lalu menguji apakah hasil dalam desain halaman Anda sesuai dengan yang Anda inginkan

Ini terdengar seperti pekerjaan yang membosankan, dan memang begitu

Namun kami akan mempermudah Anda, dan tidak memaksa Anda mempelajari desain HTML dan CSS secara manual. Alih-alih mengajari Anda segalanya dari awal, kami akan mengambil organisme hidup dan membedah elemen-elemennya

Di sinilah hal yang disebut Bootstrap berperan

5. Unduh / Pasang Bootstrap

Bootstrap adalah perangkat sumber terbuka untuk membuat situs web dengan HTML dan CSS

Dalam bahasa Inggris biasa, Bootstrap menangani struktur dasar dokumen HTML dan stylesheet CSS untuk Anda. Ini memberikan kerangka kerja yang memastikan perancah utama halaman web Anda siap dan dioptimalkan untuk pengembangan lebih lanjut

Pada dasarnya, Bootstrap memungkinkan Anda tidak memulai dari awal, dan malah langsung masuk ke bagian yang menyenangkan. Dengannya, Anda tidak perlu bekerja pada tahap awal pembuatan situs web dengan HTML dan CSS yang seringkali membosankan

Ada dua jalur yang bisa Anda ambil

• Opsi (a). belajar Bootstrap – buka beranda Bootstrap, unduh paket Bootstrap utama dan mulailah membangun di atasnya
• Opsi (b). ambil jalan pintas – dapatkan paket perdana untuk Bootstrap dengan desain yang menarik dan halaman web demo yang sudah dibuat

Opsi (a) mungkin memiliki beberapa kurva belajar di awal, tetapi itu bukan cara yang lebih buruk untuk membuat situs web dengan HTML dan CSS. Setelah Anda menguasai struktur Bootstrap inti, mungkin akan lebih mudah bagi Anda untuk membuat halaman baru dan membuatnya terlihat persis seperti yang Anda inginkan. Dokumentasi Bootstrap adalah tempat yang bagus untuk memulai jalur ini

Kami akan menggunakan Opsi (b) untuk panduan ini. Kami melakukan ini karena beberapa alasan, terutama

Dimulai dengan struktur siap pakai menghemat banyak kesulitan dalam mencoba mencari tahu kebutuhan dasar dokumen HTML. Ini memungkinkan Anda berfokus pada hal-hal yang menarik – seperti menata konten dan membuatnya terlihat bagus

Singkatnya, mempelajari hal-hal dengan cara ini akan memberi Anda hasil yang terlihat lebih baik lebih cepat, yang menurut kami adalah yang Anda inginkan

6. Pilih Desain

Saat Anda membuat situs web dengan HTML dan CSS, Anda bebas menggunakan template Bootstrap apa pun yang Anda suka. Mereka semua harus bekerja dengan cara yang sama

Namun, untuk panduan ini, kami akan menggunakan salah satu template dari Start Bootstrap. Mereka memiliki pilihan template gratis yang dioptimalkan, bekerja bebas masalah, dan juga dirancang dengan sangat baik

Tema yang akan kita gunakan disebut Creative. Efek akhir yang kita tuju akan terlihat seperti ini

Untuk memulai, template Kreatif, klik tombol Unduh Gratis di sebelah kanan (di halaman ini) dan simpan paket zip ke desktop Anda

Buka zip paket dan pindahkan isinya ke direktori utama server web lokal Anda atau akun hosting web Anda

Sekarang buka lokasi itu melalui browser web Anda. Anda akan melihat versi stok template

Tampilannya sudah cukup bagus, tetapi sekarang saatnya mempelajari cara menggunakan HTML dan CSS untuk membuatnya persis seperti yang Anda inginkan.

7. Kustomisasi Situs Web Anda Dengan HTML dan CSS

Mari kita kerjakan di beranda desain terlebih dahulu. Ini akan menunjukkan kepada kita bagaimana mengganti grafik, teks, dan menyetel semuanya secara umum

Kami telah berbicara tentang bagian kepala dari dokumen HTML secara singkat di atas. Mari kita lihat lebih dalam di sini

Ketika Anda membuka file

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

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Creative - Start Bootstrap Theme</title>

  <! – Theme CSS - Includes Bootstrap – >
  <link href="css/creative.min.css" rel="stylesheet">

</head>

* Selain di atas, ada juga kode untuk memuat Google Fonts, ikon Font Awesome dan modul lightbox untuk gambar yang ditampilkan di halaman

Sebagian besar deklarasi di sini sudah kita ketahui, tetapi ada beberapa yang baru

• Pertama, semua yang ada di antara tanda kurung

  <head>
  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
    <title>Creative - Start Bootstrap Theme</title>
  
    <! – Theme CSS - Includes Bootstrap – >
    <link href="css/creative.min.css" rel="stylesheet">
  
  </head>
  

  _0 adalah komentar HTML. Itu tidak muncul di halaman terakhir

• <head>
  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
    <title>Creative - Start Bootstrap Theme</title>
  
    <! – Theme CSS - Includes Bootstrap – >
    <link href="css/creative.min.css" rel="stylesheet">
  
  </head>
  

  1 – ini adalah salah satu tag deklarasi Bootstrap sendiri. Ini menentukan ukuran area pandang situs web

• <head>
  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
    <title>Creative - Start Bootstrap Theme</title>
  
    <! – Theme CSS - Includes Bootstrap – >
    <link href="css/creative.min.css" rel="stylesheet">
  
  </head>
  

  2 – baris ini memuat stylesheet CSS dari template Creative dan juga menampung stylesheet default Bootstrap

Mari ubah deklarasi terakhir itu – baris yang memuat CSS – agar lebih mudah digunakan nanti

Ubah baris itu menjadi

<link href="css/creative.css" rel="stylesheet">

Ini hanya perbedaan kecil – itu akan memuat versi non-singkat dari lembar CSS yang sama. Versi ini lebih mudah untuk dimodifikasi

Sekarang gulir ke bawah ke bagian paling bawah dari file

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

<! – Bootstrap core JavaScript – >
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<! – Plugin JavaScript – >
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<! – Custom scripts for this template – >
<script src="js/creative.min.js"></script>

Mereka bertanggung jawab untuk memuat file JavaScript yang menangani beberapa interaksi desain yang lebih visual. Misalnya, saat Anda mengeklik tautan Tentang di menu atas, Anda akan dibawa dengan mulus ke blok tentang di halaman yang sama – ini, antara lain, dilakukan melalui JavaScript. Kami tidak perlu repot memahami kode ini sekarang. Mari kita tinggalkan ini untuk lain waktu

Sebagai gantinya, mari bekerja untuk menambahkan konten kita sendiri ke halaman

8. Tambahkan Konten dan Gambar

Hal pertama yang ingin Anda lakukan adalah mengubah judul halaman

1. Ubah Judul

Temukan tag judul di bagian kepala dan ganti teks di antara tag dengan milik Anda sendiri

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

2. Sesuaikan Bagian Pahlawan

Bagian pahlawan inilah yang kami sebut blok ini

Alangkah baiknya memiliki konten kita sendiri di dalamnya. Untuk memodifikasi blok ini, kembali ke file

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

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Seluruh blok kode ini mengontrol apa yang ada di bagian pahlawan

Ada beberapa tag baru di sini

• <head>
  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
    <title>Creative - Start Bootstrap Theme</title>
  
    <! – Theme CSS - Includes Bootstrap – >
    <link href="css/creative.min.css" rel="stylesheet">
  
  </head>
  

  5 – ini adalah tag yang mendefinisikan bahwa seluruh bagian ini adalah tajuk halaman;

• <head>
  
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  
    <title>Creative - Start Bootstrap Theme</title>
  
    <! – Theme CSS - Includes Bootstrap – >
    <link href="css/creative.min.css" rel="stylesheet">
  
  </head>
  

  8 – adalah tag CSS umum yang menunjukkan bahwa yang berikut adalah bagian terpisah (alias pembagian) dalam dokumen HTML;

Anda juga akan melihat bahwa beberapa tag lain (yang sudah kita ketahui) terlihat sedikit lebih kompleks, dengan beberapa kelas CSS yang ditetapkan untuknya. Sebagai contoh

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Kelas yang ditugaskan ke tag

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Creative - Start Bootstrap Theme</title>

  <! – Theme CSS - Includes Bootstrap – >
  <link href="css/creative.min.css" rel="stylesheet">

</head>

<link href="css/creative.css" rel="stylesheet">

Kelas-kelas ini telah dibuat oleh Bootstrap dan oleh pengembang tema Creative. Kabar baiknya adalah Anda juga dapat menggunakannya secara bebas saat membuat situs web dengan HTML dan CSS

Terus terang, Anda dapat menyesuaikan tag apa pun yang Anda tambahkan ke struktur halaman Anda dengan menetapkan sejumlah kelas ke dalamnya

Jika Anda ingin melihat daftar lengkap kelas yang tersedia, Anda dapat membuka file

<link href="css/creative.css" rel="stylesheet">

<link href="css/creative.css" rel="stylesheet">

Memahami semua kelas ini mungkin tampak menakutkan pada awalnya, tetapi sebenarnya jauh lebih mudah daripada yang terlihat

Misalnya, salah satu kelas yang ditetapkan untuk beberapa paragraf dalam file

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

<link href="css/creative.css" rel="stylesheet">

<link href="css/creative.css" rel="stylesheet">

<link href="css/creative.css" rel="stylesheet">

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Memodifikasi teks default di file

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

Misalnya, untuk mengubah judul utama, ubah saja ini

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Untuk sesuatu seperti berikut ini

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Anda dapat melakukan hal yang sama untuk semua paragraf dan tag lain di halaman

Yang penting Anda juga bisa menambahkan paragraf baru dengan bebas. Misalnya, kita dapat mengambil paragraf yang sudah ada di halaman, membuat salinannya, dan menempelkannya tepat di bawah paragraf aslinya;

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Sekarang, dengan teks yang diurus, mari ganti gambar yang ada di latar belakang

Ini sedikit lebih rumit untuk dilakukan karena mengharuskan kita masuk ke file stylesheet CSS dan melakukan modifikasi di sana. Seperti yang Anda lihat di kode HTML bagian

<link href="css/creative.css" rel="stylesheet">

Saat Anda melihat lagi seluruh blok kode yang menangani bagian

<link href="css/creative.css" rel="stylesheet">

<! – Bootstrap core JavaScript – >
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<! – Plugin JavaScript – >
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<! – Custom scripts for this template – >
<script src="js/creative.min.js"></script>

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Kelas

<! – Bootstrap core JavaScript – >
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<! – Plugin JavaScript – >
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<! – Custom scripts for this template – >
<script src="js/creative.min.js"></script>

Mari buka file

<link href="css/creative.css" rel="stylesheet">

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Kode ini melakukan segala macam hal mewah pada gambar kita (seperti menambahkan overlay, shading, dll. ), tetapi bagian yang penting adalah ini.

<! – Bootstrap core JavaScript – >
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<! – Plugin JavaScript – >
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<! – Custom scripts for this template – >
<script src="js/creative.min.js"></script>

<! – Bootstrap core JavaScript – >
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<! – Plugin JavaScript – >
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<! – Custom scripts for this template – >
<script src="js/creative.min.js"></script>

Untuk mengubah gambar latar belakang ini, ambil gambar Anda sendiri, salin ke subdirektori

<! – Bootstrap core JavaScript – >
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<! – Plugin JavaScript – >
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<! – Custom scripts for this template – >
<script src="js/creative.min.js"></script>

<! – Bootstrap core JavaScript – >
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<! – Plugin JavaScript – >
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<! – Custom scripts for this template – >
<script src="js/creative.min.js"></script>

<! – Bootstrap core JavaScript – >
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<! – Plugin JavaScript – >
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<! – Custom scripts for this template – >
<script src="js/creative.min.js"></script>

<! – Bootstrap core JavaScript – >
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<! – Plugin JavaScript – >
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<! – Custom scripts for this template – >
<script src="js/creative.min.js"></script>

3. Sesuaikan Blok Lain di Halaman

Saat Anda membuka file

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

Meskipun ada konten yang berbeda di semua bagian ini, bagian itu sendiri memiliki struktur yang serupa. Mereka semua memiliki rangkaian tag HTML yang kira-kira sama – hanya kelas CSS yang berbeda yang ditetapkan untuknya

Cara terbaik untuk memodifikasi halaman agar sesuai dengan kebutuhan Anda adalah melalui blok satu per satu dan bereksperimen dengan mengubah berbagai hal

Selain memodifikasi teks, Anda juga dapat memindahkan seluruh bagian (bagian antara tag

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Creative - Start Bootstrap Theme</title>

  <! – Theme CSS - Includes Bootstrap – >
  <link href="css/creative.min.css" rel="stylesheet">

</head>

Dengan demikian, ada dua modifikasi yang cukup mendasar yang belum kita bicarakan. Mari kita bahas ini selanjutnya

9. Sempurnakan Warna dan Font

Mengubah warna atau font sangat mudah dilakukan di HTML dan CSS. Hal paling sederhana yang dapat Anda lakukan adalah menetapkan gaya in-line ke tag HTML. Sebagai contoh

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Dalam HTML, warna diwakili oleh nilai hexnya; . Ini tabel semua warna standar lainnya

Cara yang lebih baik untuk menetapkan warna adalah melakukannya melalui stylesheet CSS. Misalnya, untuk mendapatkan efek yang sama seperti kode di atas, kita bisa meletakkannya di stylesheet CSS kita

<a href="https://websitesetup.org/">This is a link to my homepage</a>

Dan kemudian gunakan potongan kode HTML berikut di dokumen utama

<a href="https://websitesetup.org/">This is a link to my homepage</a>

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

<a href="https://websitesetup.org/">This is a link to my homepage</a>

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

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<a href="https://websitesetup.org/">This is a link to my homepage</a>

*

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

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

<a href="https://websitesetup.org/">This is a link to my homepage</a>

Dengan perubahan ini, header sekarang akan berwarna oranye

Untuk mengubah font dan ukurannya, Anda dapat melakukan sesuatu yang sangat mirip. Tapi pertama-tama, contoh tampilan blok definisi font di CSS

<a href="https://websitesetup.org/">This is a link to my homepage</a>

• 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

<a href="https://websitesetup.org/">This is a link to my homepage</a>

Dan kemudian tetapkan kelas ini ke header

<a href="https://websitesetup.org/">This is a link to my homepage</a>

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)

Hal hebat tentang Bootstrap adalah ia menangani prinsip-prinsip dasar tata letak dan detail tampilan untuk Anda sehingga Anda dapat fokus menempatkan blok-blok itu di tempat yang tepat.

Di bagian panduan ini, kita akan membuat halaman "tentang" baru

Untuk memulai, kita akan membuat proyek tata letak yang sangat mendasar. Sesuatu seperti di atas

• ada menu navigasi di bagian atas,
• blok judul lebar penuh di bawah menu,
• bagian konten utama di tengah, kotak di tengah layar (bukan lebar penuh),
• dan catatan kaki

Sekarang mari buat tata letak ini dalam HTML

2. Bangun Halaman Baru

Cara termudah untuk mulai mengerjakan halaman baru adalah menduplikasi halaman yang sudah ada dan menggunakannya sebagai templat. Itulah yang akan kita lakukan

Buat salinan file

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

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Hanya untuk membuat halaman lebih mudah dibedakan pada tahap awal ini, edit file

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Sekarang mari telusuri file baris demi baris dan putuskan apa yang akan kita tinggalkan dan apa yang akan kita hapus

• Menu navigasi (di bawah

  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  </ul>
  

  _08). Anda mungkin ingin mempertahankan bagian ini tetap utuh, hanya untuk membuat pengalaman navigasi seragam di semua halaman
• Bagian pahlawan utama (di bawah

  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  </ul>
  

  09). Yang ini tidak kita perlukan menurut proyek tata letak kita. Anda dapat melanjutkan dan menghapus seluruh bagian
• Bagian tentang (di bawah

  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  </ul>
  

  _10). Kami akan menggunakan kembali bagian ini sebagai blok judul utama kami
• Bagian layanan, bagian portofolio, bagian ajakan bertindak, dan bagian kontak (semuanya antara

  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  </ul>
  

  11 dan

  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  </ul>
  

  12). Kami tidak membutuhkan bagian ini sama sekali. Anda dapat melanjutkan dan menghapusnya
• Bagian footer dan semua yang ada di bawahnya (di bawah

  <ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  </ul>
  

  12). Ini harus kita pertahankan

Ini membuat kode kita saat ini cukup sederhana. Ini pada dasarnya hanya ini

<a href="https://websitesetup.org/">This is a link to my homepage</a>

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

<a href="https://websitesetup.org/">This is a link to my homepage</a>

Sekarang ubah dua baris pertama menjadi ini

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
  </body>
</html>

Karena kita tidak memerlukan header

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
  </body>
</html>

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

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Creative - Start Bootstrap Theme</title>

  <! – Theme CSS - Includes Bootstrap – >
  <link href="css/creative.min.css" rel="stylesheet">

</head>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
  </body>
</html>

Itu lebih baik

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
  </body>
</html>

Inilah tampilannya di halaman

Jika Anda tidak suka teks dipusatkan maka hapus saja

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <title>Creative - Start Bootstrap Theme</title>

  <! – Theme CSS - Includes Bootstrap – >
  <link href="css/creative.min.css" rel="stylesheet">

</head>

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

<p class="normal-text">This text is going to be 18px.</p>

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
  </body>
</html>

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
  </body>
</html>

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

<! – Bootstrap core JavaScript – >
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<! – Plugin JavaScript – >
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>

<! – Custom scripts for this template – >
<script src="js/creative.min.js"></script>

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
  </body>
</html>

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
  </body>
</html>

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

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
  </body>
</html>

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

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Secara khusus, cari baris ini

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>My first web page.</p>
  </body>
</html>

Kami akan mengubahnya menjadi ini

p {
    font-size: 18px;
}

Ini adalah sesuatu yang belum kita bicarakan, tetapi tag

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

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

Bisakah Anda membuat situs web hanya dengan HTML?

Bagaimana cara membuat website dengan HTML gratis?

Bagaimana cara membuat situs web menggunakan HTML dan CSS?

Apakah membuat situs web HTML gratis?