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!
    
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

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

_0 baru milik Anda, menyalinnya ke direktori utama server web Anda, dan kemudian melihat halaman itu dengan menavigasi ke sana melalui browser web. Namun, jangan terlalu bersemangat;

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

This text is going to be 18px.

1 dalam dokumen akan memiliki ukuran font 18px

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 (

This text is going to be 18px.

_2) sebelum nama kelas (

This text is going to be 18px.

3). Dengan kelas "teks normal" yang ditentukan, kita sekarang dapat menetapkan kelas itu ke tag HTML spesifik yang ingin kita buat berukuran 18px

Sebagai contoh

This text is going to be 18px.

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

• This text is going to be 18px.
  

  _4 – definisi kelas;

• This text is going to be 18px.
  

  _6 – contoh properti CSS

• This text is going to be 18px.
  

  _7 – nilai yang diberikan ke properti

Ada banyak sekali properti CSS selain

This text is going to be 18px.

6 di atas. Berikut daftar lengkapnya jika Anda penasaran

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

0 dari situs Bootstrap Anda di Sublime Text, Anda akan melihat bagian kepala seperti ini (kami menghapus semua hal yang tidak penting dari kode ini untuk kejelasan *)

* 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
  _0 adalah komentar HTML. Itu tidak muncul di halaman terakhir

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

• 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

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

0. Anda akan melihat baris berikut tepat sebelum tag body penutup

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

Item 1
Item 2
Item 3

_0

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

0 Anda dan temukan bagian ini

Item 1
Item 2
Item 3

_1

Seluruh blok kode ini mengontrol apa yang ada di bagian pahlawan

Ada beberapa tag baru di sini

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

• 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

Item 1
Item 2
Item 3

_2

Kelas yang ditugaskan ke tag

_9 di sini adalah

0

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

1 utama yang ada di subdirektori

2 tema Creative

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

0 kita adalah

4. Ketika Anda melompat ke file

_1 dan ctrl+f mencari nama kelas itu, Anda akan melihat bahwa itu hanya menyetel parameter

6 seperti itu

Item 1
Item 2
Item 3

_3

Memodifikasi teks default di file

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

0 sangat sederhana. Temukan saja tag yang ingin Anda edit dan ubah apa yang ada di antara tag pembuka dan penutup

Misalnya, untuk mengubah judul utama, ubah saja ini

Item 1
Item 2
Item 3

_4

Untuk sesuatu seperti berikut ini

Item 1
Item 2
Item 3

_5

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;

Item 1
Item 2
Item 3

_6

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

8, tidak ada tag yang mengindikasikan menyertakan gambar ke halaman dengan cara apa pun. Ini semua dilakukan melalui CSS

Saat Anda melihat lagi seluruh blok kode yang menangani bagian

8, Anda akan melihat bahwa itu ditugaskan ke kelas yang disebut

0. Baris kode ini menangani tugas kelas

Item 1
Item 2
Item 3

_7

Kelas

_0 adalah kelas yang menempatkan gambar di latar belakang seluruh blok

Mari buka file

_1 lagi dan cari kelas "masthead"

Item 1
Item 2
Item 3

_8

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

3. Ini adalah garis yang menunjukkan di mana menemukan gambar latar belakang. Ini akan berada di subdirektori

4

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

4 lalu salin dan tempel namanya sebagai pengganti file

6 asli. Singkatnya, ubah ini.

3 untuk ini.

8

3. Sesuaikan Blok Lain di Halaman

Saat Anda membuka file

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

_0, Anda akan melihat bahwa sudah ada banyak bagian berbeda di halaman. Kami memiliki bagian untuk navigasi, dan tentang blok, beberapa layanan, portofolio, ajakan bertindak, blok kontak, dan footer

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

6). Memang, Anda harus melakukannya dengan tangan (dengan memotong lalu menempelkan elemen ke tempatnya), masih mudah dilakukan

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

Item 1
Item 2
Item 3

_9

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

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

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

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)

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

_0 dan beri nama

Item 1
Item 2
Item 3

04

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

Item 1
Item 2
Item 3

04 baru dan ubah apa yang ada di tag

Item 1
Item 2
Item 3

06. Misalnya,

Item 1
Item 2
Item 3

_07

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

• Menu navigasi (di bawah

  
  Item 1
  Item 2
  Item 3
  
  

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

  
  Item 1
  Item 2
  Item 3
  
  

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

  
  Item 1
  Item 2
  Item 3
  
  

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

  
  Item 1
  Item 2
  Item 3
  
  

  11 dan

  
  Item 1
  Item 2
  Item 3
  
  

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

  
  Item 1
  Item 2
  Item 3
  
  

  12). Ini harus kita pertahankan

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

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!
    
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!
    
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

6. Dengan kata lain, buatlah tag menjadi ini

  
    
    
  
  
    
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!
    
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

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!
    
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!
    
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!
    
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!
    
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!
    
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!
    
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?