Cara Membuat Kode Situs Web

Cara Membuat Kode Situs WebIngin mempelajari cara membuat situs web dengan HTML dan CSS?


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 cantik pada saat yang sama.

Tapi pertama-tama, apa itu HTML dan CSS?

Ya, Anda bisa melihat kedua istilah itu di Wikipedia, tetapi definisi itu tidak ramah pembaca. Mari sederhanakan:

  • HTML (Hypertext Markup Language) mendefinisikan struktur dan konten halaman web – dimana semuanya berjalan, bagaimana mereka ditata, dan apa itu di halaman
  • CSS (Cascading Style Sheets) mendefinisikan gaya / presentasi dari halaman web dan elemen-elemen di dalamnya

Anda tidak dapat benar-benar memilikinya tanpa yang lain – keduanya bekerja sama untuk membentuk halaman web terakhir, desainnya, dan konten yang ada di dalamnya.

Catatan; ketika kami mengatakan “halaman web,” yang kami maksud adalah satu dokumen HTML – satu halaman yang merupakan bagian dari situs web Anda. Padahal, “situs web” adalah hal yang lengkap – seluruh situs Anda dengan semua halaman web individualnya.

Cara membuat situs web menggunakan HTML dan CSS (daftar isi):

  1. Pelajari dasar-dasar HTML
  2. Memahami struktur dokumen HTML
  3. Kenali pemilih CSS
  4. Letakkan lembar gaya CSS bersama-sama
  5. Dapatkan Bootstrap
  6. Pilih desain
  7. Kustomisasi situs web Anda dengan HTML dan CSS
  8. Tambahkan konten dan gambar
  9. Warna dan font yang disempurnakan
  10. Buat halaman tambahan

Total waktu untuk membuat situs web: 4-5 jam
Tingkat keahlian: Menengah

Jika menurut Anda ini terlalu rumit, sebaiknya buat situs web menggunakan WordPress atau pilih salah satu pembuat situs web. Anda juga dapat melihat daftar IDE terbaik yang dipilih untuk pengembangan web. 

Contents

Sebelum Anda Mulai, Kumpulkan Sumber Daya Anda:

Jadi, hal pertama yang Anda butuhkan bahkan sebelum membuat situs web dengan HTML dan CSS adalah server web (hosting). Namun, jangan khawatir; Anda tidak perlu membeli mesin Anda sendiri. Banyak perusahaan web hosting akan menjual layanan hosting sederhana kepada Anda di mesin mereka. Cukup google untuk “web hosting” dan pilih sesuatu yang tidak terlalu mahal.

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

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

Pengungkapan penuh: Kami mendapat komisi jika Anda akhirnya membeli Bluehost melalui tautan rujukan kami di panduan ini. Ini membantu kami untuk menjaga WebsiteSetup dan berjalan dan terbaru. Terima kasih atas dukunganmu.

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

Mereka akan menangani semua pengaturan untuk Anda. Artinya mereka akan: (Sebuah) mengatur akun hosting untuk Anda, (b) daftarkan nama domain atas nama Anda, (c) konfigurasikan semuanya untuk bekerja bersama, dan (d) memberi Anda akses ke dasbor yang mudah digunakan.

Silakan dan mendaftar Bluehost, kami akan menunggu. Saat Anda kembali dan memiliki server web yang dikonfigurasi dan siap digunakan, gulir ke langkah berikutnya.

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

1. Pelajari Dasar-dasar HTML

Elemen utama dari struktur HTML adalah HTML menandai.

Tag, misalnya, terlihat seperti ini:

SESUATU

Di sini, kami sedang berurusan dengan a menandai. Yang ini akan mencolok selembar teks yang berada di antara tag pembuka () dan tag penutup (). Dalam hal ini, potongan teks itu adalah SESUATU.

Tetapi ada tag lain, hanya untuk beberapa nama:

  • ... akan memiringkan teks di antara tag pembuka dan penutup
  • ... akan menggarisbawahi itu
  • ...

    adalah paragraf teks


  • ...

    adalah tajuk utama pada halaman

Selain dari tag sederhana itu, ada juga tag yang lebih kompleks. Misalnya, jika Anda ingin membuat daftar seperti berikut:

  • Barang 1
  • Butir 2
  • Butir 3

… Anda dapat melakukannya dengan kode HTML berikut:

  • Barang 1
  • Butir 2
  • Butir 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:

Ini adalah tautan ke beranda saya

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

2. Memahami Struktur Dokumen HTML

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

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

Inilah struktur dokumen HTML paling sederhana:





Halo Dunia!


Halo Dunia!

Halaman web pertamaku.

Anda dapat mengambil kode di atas, menyalin dan menempelnya ke file baru, simpan dokumen sebagai index.html, dan itu akan menjadi halaman HTML yang benar-benar valid.

Mari kita jelaskan masing-masing bagian dari kode ini:

  • – deklarasi awal dokumen
  • – deklarasi lain; mengatakan bahwa apa yang akan terjadi selanjutnya adalah dokumen HTML yang ditulis dalam bahasa Inggris
  • – menandai dimulainya kepala bagian; itu kepala bagian adalah tempat semua parameter dasar halaman pergi; kebanyakan dari mereka tidak akan ditampilkan di layar; mereka hanya menentukan apa yang terjadi di bawah tenda
  • – mendefinisikan karakter apa yang digunakan untuk menulis dokumen; tidak perlu menghabiskan terlalu banyak waktu untuk hal ini; cukup gunakan deklarasi ini sebagaimana adanya
  • Halo Dunia! – judul halaman; inilah yang akan dilihat orang di bilah judul browser mereka, mis .:

judul di browser web saat membuat situs web dengan HTML dan CSS

  • – menandai dimulainya tubuh bagian; ini adalah tempat semua konten halaman berjalan; itu adalah bagian utama dari dokumen HTML; mari kita tekankan ini, bagian ini adalah di mana Anda akan memasukkan semua konten yang dimaksudkan untuk muncul di halaman

  • Halo Dunia!

    – header utama pada halaman

  • Halaman web pertamaku.

    – paragraf teks sederhana

  • – tag penutup seluruh dokumen HTML

Catatan penting di sini. Bekerja pada file HTML di aplikasi teks dasar atau prosesor teks yang kompleks seperti MS Word bukanlah pengalaman yang baik. Untuk mempermudah Anda, instal alat yang disebut Teks Sublim. Ini memiliki versi untuk Mac dan PC, dan gratis.

Mengapa ini lebih baik? Antara lain, itu akan mewarnai sintaksis file HTML. Artinya, secara visual akan membedakan tag HTML Anda dari konten teks, parameter tag, dan nilai lainnya. Pada dasarnya, semuanya menjadi mudah dibaca. Seperti inilah struktur HTML sederhana kami di Sublime Text:

Sintaks sublim sangat bagus ketika membuat situs web dengan HTML dan CSS

Oke, kembali ke topik. Anda dapat mengambil yang baru index.html file Anda, salin ke tempat direktori utama server web Anda, dan kemudian lihat halaman itu dengan menavigasi ke sana melalui browser web. Namun, jangan terlalu bersemangat; halaman ini akan agak jelek (lihat di bawah).

halaman ini jelek

Oke, jadi halamannya jelek, bagaimana membuatnya tidak?

3. Kenali Selektor CSS

Sama seperti HTML memiliki tag-nya, CSS juga penyeleksi.

Selektor menggambarkan bagaimana elemen yang diberikan harus berperilaku bijaksana. Berikut ini contoh pemilih CSS:

p {
ukuran font: 18px;
}

Pemilih ini menunjukkan bahwa semua HTML

tag di dalam dokumen akan memiliki ukuran font 18px.

Namun, cara yang lebih praktis untuk menggunakan penyeleksi CSS adalah tidak membatasi semua tag dari jenis yang diberikan untuk gaya tertentu, melainkan membuat “kelas” yang berbeda dan menetapkannya untuk menandai satu per satu.

Sebagai contoh, pemilih kelas di CSS terlihat seperti ini:

.teks normal {
ukuran font: 18px;
}

Perhatikan titik (.) di depan nama kelas (teks biasa). Dengan kelas “teks normal” ditentukan, kita sekarang dapat menetapkan kelas itu untuk tag HTML spesifik yang ingin kita buat ukurannya 18px.

Sebagai contoh:

Teks ini akan menjadi 18px.

Mari kita luangkan satu menit lagi untuk menjelaskan semua elemen dari kode CSS di atas:

  • .teks biasa – definisi kelas; semuanya berdasarkan nama kelas dan antara tanda kurung buka dan tutup {} mendefinisikan seperti apa elemen yang ditugaskan untuk kelas ini akan terlihat
  • ukuran huruf – contoh properti CSS
  • 18px – nilai yang diberikan ke properti

Ada satu ton properti CSS selain dari yang di atas ukuran huruf. Ini dia daftar lengkap jika kamu penasaran.

4. Kumpulkan Lembar Gaya CSS

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

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

Cara Anda menyatukan stylesheet CSS adalah dengan mendefinisikan setiap kelas satu per satu, dan kemudian menguji apakah hasil dalam desain halaman Anda adalah apa yang Anda inginkan.

Ini terdengar seperti pekerjaan yang membosankan, dan memang begitu.

Tapi kami akan mempermudah Anda, dan tidak memaksa Anda untuk belajar desain HTML dan CSS secara langsung. Alih-alih mengajarkan Anda semuanya dari awal, kami akan mengambil organisme hidup dan membedah elemen-elemennya.

Di sinilah hal yang disebut Bootstrap berperan.

5. Unduh / Instal Bootstrap

Bootstrap adalah toolkit open-source 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 bahwa perancah utama halaman web Anda siap dan dioptimalkan untuk pengembangan lebih lanjut.

Pada dasarnya, Bootstrap memungkinkan Anda untuk tidak memulai dari awal, dan sebaliknya langsung ke bagian yang menyenangkan. Dengan itu, Anda tidak perlu bekerja pada tahap awal yang sering membosankan dalam membuat situs web dengan HTML dan CSS.

Ada dua jalur yang bisa Anda ambil:

  • Pilihan (Sebuah): pelajari Bootstrap – buka beranda Bootstrap, unduh paket Bootstrap utama dan mulailah membangun di atasnya.
  • Pilihan (b): ambil jalan pintas – dapatkan paket pemula untuk Bootstrap dengan desain yang cantik dan halaman web demo yang sudah dibangun.

Pilihan (Sebuah) mungkin memiliki beberapa kurva pembelajaran di awal, tetapi itu sama sekali bukan cara yang lebih buruk untuk membuat situs web dengan HTML dan CSS. Setelah Anda menguasai struktur Bootstrap inti, mungkin lebih mudah bagi Anda untuk membuat halaman baru dan membuatnya terlihat persis seperti yang Anda inginkan. Itu Dokumentasi bootstrap adalah tempat yang bagus untuk memulai dengan jalan ini.

Kami akan pergi dengan Opsi (b) untuk panduan ini. Kami melakukan ini karena beberapa alasan, kepala mereka:

Memulai dengan struktur yang sudah jadi menghemat banyak rasa sakit dalam mencoba mencari kebutuhan dasar dokumen HTML. Ini memungkinkan Anda fokus pada hal-hal menarik – seperti meletakkan konten dan membuatnya terlihat bagus.

Singkatnya, mempelajari berbagai hal dengan cara ini akan memberi Anda hasil yang lebih baik dengan penampilan yang lebih cepat, yang kami duga 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 templat oleh Mulai Bootstrap. Mereka memiliki banyak pilihan template gratis yang dioptimalkan, bekerja tanpa masalah, dan juga dirancang dengan sangat baik.

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

beranda akhir setelah membuat situs web dengan HTML dan CSS

Untuk memulainya, template Kreatif, klik pada Download Gratis tombol yang ada di sebelah kanan (aktif 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 dari templat:

mulai template bootstrap

Ini sudah cukup tampan, tetapi sekarang saatnya untuk belajar bagaimana menggunakan HTML dan CSS untuk menjadikannya tepat seperti yang Anda inginkan..

7. Kustomisasi Situs Web Anda Dengan HTML dan CSS

Mari kita bekerja di beranda desain terlebih dahulu. Ini akan menunjukkan kepada kita bagaimana cara mengganti gambar, teks, dan menyempurnakan semuanya secara umum.

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

Ketika Anda membuka index.html file situs Bootstrap Anda dalam Teks Sublime, Anda akan melihat bagian kepala seperti ini (kami menghapus semua hal yang tidak penting dari kode ini untuk kejelasan *):






Kreatif - Mulai Tema Bootstrap





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

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

  • Pertama, semuanya antara tanda kurung adalah komentar HTML. Itu tidak muncul di halaman terakhir.
  • – Ini adalah salah satu tag deklarasi Bootstrap sendiri. Ini menentukan ukuran viewport situs web.
  • – baris ini memuat CSS stylesheet dari template Creative dan juga menampung stylesheet default dari Bootstrap.

Mari kita modifikasi deklarasi terakhir itu – baris yang memuat CSS – untuk membuatnya lebih mudah untuk dikerjakan nanti.

Ubah baris itu menjadi:


Ini hanya perbedaan kecil – ini akan memuat versi non-short sheet CSS yang sama. Versi ini lebih mudah untuk dimodifikasi.

Sekarang gulir ke bawah ke bagian paling bawah index.html mengajukan. Anda akan melihat baris berikut tepat sebelum penutupan tubuh menandai:

        

Mereka bertanggung jawab untuk memuat file JavaScript yang menangani beberapa interaksi desain yang lebih visual. Misalnya, ketika Anda mengklik Tentang di menu atas, Anda akan dibawa dengan lancar ke blok about 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.

Sebaliknya, mari kita 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 judul beri tag di bagian kepala dan ganti teks di antara tag dengan sesuatu milik Anda:

Situs HTML saya

2. Kustomisasi Bagian Pahlawan

Bagian pahlawan adalah apa yang kita sebut blok ini:

bagian pahlawan

Akan menyenangkan memiliki konten kita sendiri di dalamnya. Untuk memodifikasi blok ini, kembali ke index.html file dan temukan bagian ini:

...


...

Temukan lebih banyak lagi

Seluruh blok kode ini mengontrol apa yang ada di bagian pahlawan.

Ada beberapa tag baru di sini:


  • – ini adalah tag yang mendefinisikan bahwa seluruh bagian ini adalah tajuk halaman; tag ini memiliki beberapa saudara lelaki dan perempuan dalam bentuk

    tag dan

    menandai
  • – adalah tag CSS umum yang menunjukkan bahwa yang mengikuti adalah bagian yang terpisah (alias divisi) dalam dokumen HTML; menggunakannya membuatnya lebih mudah untuk membedakan masing-masing bagian pada halaman secara visual

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

...

Kelas yang ditugaskan untuk

tag di sini text-uppercase text-white font-weight-bold.

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

Sejujurnya, Anda dapat menyesuaikan tag apa pun yang Anda tambahkan ke struktur halaman Anda dengan menetapkan sejumlah kelas untuknya.

Jika Anda ingin melihat daftar lengkap kelas yang tersedia, Anda dapat membuka utama creative.css file yang ada di css subdirektori dari tema Kreatif.

Mula-mula memahami semua kelas ini bisa terasa menakutkan, tetapi sebenarnya jauh lebih mudah daripada yang terlihat.

Misalnya, salah satu kelas yang ditugaskan untuk beberapa paragraf di kami index.html file font-berat-ringan. Ketika Anda melompat ke creative.css file dan ctrl + f mencari nama kelas itu, Anda akan melihat bahwa itu hanya mengatur font-berat parameter seperti itu:

.font-weight-light {
font-berat: 300;
}

Memodifikasi teks default di index.html file sangat sederhana. Temukan tag yang ingin Anda edit dan ubah antara tag pembuka dan penutup.

Misalnya, untuk mengubah informasi utama, ubah saja ini:

Kesukaanmu ...

Untuk sesuatu seperti berikut ini:

Kagumi situs web HTML saya!

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

Yang penting adalah Anda juga dapat menambahkan paragraf baru secara bebas. Misalnya, kita dapat mengambil paragraf yang sudah ada di halaman, membuat salinannya dan menempelkannya tepat di bawah paragraf asli; seperti itu:

Mulai Bootstrap bisa ...

Paragraf 2

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

Ini sedikit lebih rumit untuk dilakukan karena mengharuskan kita untuk masuk ke file stylesheet CSS dan melakukan modifikasi di sana. Seperti yang Anda lihat di kode HTML Kepala surat bagian, tidak ada tag akan menunjukkan termasuk gambar ke halaman dengan cara apa pun. Ini semua dilakukan melalui CSS.

Ketika Anda melihat lagi pada seluruh blok penanganan kode Kepala surat bagian, Anda akan melihat bahwa itu ditugaskan ke kelas yang disebut kepala surat. Baris kode ini menangani tugas kelas:

Itu kepala surat kelas adalah salah satu yang menempatkan gambar di latar belakang seluruh blok.

Mari kita buka creative.css file lagi dan cari kelas “masthead”:

header.masthead {
padding-top: 10rem;
padding-bottom: calc (10rem - 72px);
latar belakang: gradien linier (ke bawah, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead.jpg" );
posisi latar belakang: tengah;
background-repeat: no-repeat;
background-attachment: gulir;
ukuran latar belakang: penutup;
}

Kode ini melakukan segala macam hal mewah pada gambar kita (seperti menambahkan overlay, bayangan, dll.), Tetapi yang penting adalah ini: url ("../ img / bg-masthead.jpg"). Ini adalah garis yang menunjukkan di mana menemukan gambar latar belakang. Itu akan berada di img subdirektori.

Untuk mengubah gambar latar belakang ini, ambil gambar Anda sendiri, salin ke img subdirektori dan kemudian salin dan tempel namanya di tempat aslinya bg-masthead.jpg mengajukan. Singkatnya, ubah ini: url ("../ img / bg-masthead.jpg") untuk ini: url ("../ img / YOURFILE.jpg").

3. Kustomisasi Blok Lainnya pada Halaman

Saat Anda melewati index.html file, Anda akan melihat bahwa ada banyak bagian yang berbeda sudah ada di halaman. Kami memiliki bagian untuk navigasi, dan tentang sebuah blok, beberapa jasa, Sebuah portofolio, Sebuah panggilan untuk bertindak, Sebuah kontak blok, dan a footer.

Meskipun ada konten yang berbeda di semua bagian ini, bagian itu sendiri memiliki struktur yang serupa. Mereka semua memiliki kira-kira set tag HTML yang sama – hanya kelas CSS yang berbeda ditugaskan untuk mereka.

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

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

tag). Memang, Anda harus melakukannya dengan tangan (dengan memotong dan menempelkan elemen ke tempatnya), itu masih mudah dilakukan.

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

9. Warna dan Font Sempurnakan

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

Teks merah

Dalam HTML, warna diwakili oleh nilai hex mereka; “# FF0000” berwarna merah. Ini adalah tabel untuk yang lainnya warna standar.

Cara yang lebih baik untuk menetapkan warna adalah melakukannya melalui stylesheet CSS. Misalnya, untuk mendapatkan efek yang sama dengan kode di atas, kita bisa meletakkan ini di stylesheet CSS kami:

p.red {
warna: # FF0000;
}

Dan kemudian gunakan potongan kode HTML berikut dalam dokumen utama:

Teks merah

Metode kedua 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 itu, dan kemudian pergi ke stylesheet dan modifikasi kelas yang sesuai, atau buat kelas baru.

Ini sebuah contoh; katakanlah Anda ingin mengubah warna tajuk yang mengatakan “At Your Service.” Saat ini, hitam, dan ini adalah kode yang menanganinya:

Pada layanan Anda

Untuk mengubah warnanya, cara terbaik adalah membuat kelas baru yang disebut, katakanlah, .teks-oranye dan atur nilai warna di sana, seperti:

.text-orange {
warna: # f4623a! penting;
}

* !penting akan memastikan bahwa pengaturan warna ini akan menimpa pengaturan warna lain yang datang sebelumnya.

Sekarang, kita bisa kembali ke tajuk kita, dan mengubah kodenya menjadi:

Pada layanan Anda

Dengan perubahan ini, tajuk sekarang akan berwarna oranye:

oranye h2

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

.SOMECLASS {
font-family: "Merriweather", Roboto, sans-serif;
ukuran font: 18px;
}
  • memuat font Merriweather, Roboto, dan sistem-default Sans Serif font (baca ini untuk mempelajari tentang font yang aman untuk web)
  • atur ukuran font menjadi 18px

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

Kembali ke contoh sebelumnya, untuk mengubah ukuran font untuk header yang bertuliskan “At Your Service,” pertama-tama kita dapat membuat kelas seperti ini:

.text-xxl {
ukuran font: 50px;
}

Dan kemudian menetapkan kelas ini ke header:

Pada layanan Anda

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

10. Buat Halaman Tambahan

Sekarang, saat Anda memiliki beranda yang disesuaikan, sekarang saatnya untuk mulai mengerjakan beberapa halaman tambahan dan kemudian menautkannya ke beranda.

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

Berikut adalah beberapa halaman umum yang dibutuhkan sebagian besar situs web:

  • tentang halaman
  • kontak
  • portofolio
  • Produk dan Layanan
  • tim
  • kebijakan (kebijakan privasi, ketentuan, dll.)

1. Mulai Dengan Tata Letak

Saat membuat halaman web baru, keputusan pertama yang harus Anda ambil adalah apa yang Anda inginkan dari tata letak.

Saat membuat situs web dengan HTML dan CSS, tidak ada yang menghentikan Anda dari membuat kerajinan Masa bodo tata letak yang Anda inginkan. Satu-satunya kesulitan adalah menyatukannya.

HTML dan CSS mungkin sulit ditangani saat mulai dari layar kosong, jadi kami juga akan menggunakan Bootstrap di sini. Pertama, kami akan menunjukkan kepada Anda beberapa prinsip membuat tata letak dan kemudian menunjukkan cara melakukannya dengan Bootstrap.

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

tata letak saat membuat situs web dengan HTML dan CSS

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

Di bagian panduan ini, kami akan membuat halaman “tentang” baru.

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

  • ada menu navigasi di bagian atas,
  • blok judul lebar penuh di bawah menu,
  • bagian konten utama di tengah, kemas di tengah layar (tidak lebar penuh),
  • dan sebuah catatan kaki.

Sekarang mari kita bangun tata letak ini dalam HTML.

2. Bangun Halaman Baru

Cara termudah untuk mulai bekerja pada halaman baru adalah menduplikasi halaman yang ada dan menggunakannya sebagai templat. Itu yang akan kita lakukan.

Buat salinan index.html file dan ganti namanya about.html.

Hanya untuk membuat halaman lebih mudah dibedakan pada tahap awal ini, edit yang baru about.html file dan ubah apa yang ada di </code> menandai. Sebagai contoh, <code><title>Tentang saya.

Sekarang mari kita pergi melalui file baris demi baris dan memutuskan apa yang akan kita tinggalkan dan apa yang akan kita hapus:

  • Itu navigasi menu (di bawah ). Anda mungkin ingin menjaga bagian ini tetap utuh, hanya untuk membuat pengalaman navigasi seragam di semua halaman.
  • Itu pahlawan utama bagian (di bawah ). Yang ini tidak akan kami butuhkan sesuai dengan proyek tata letak kami. Anda dapat melanjutkan dan menghapus seluruh bagian.
  • Itu tentang bagian (di bawah ). Kami akan menggunakan kembali bagian ini sebagai blok tajuk utama kami.
  • Itu jasa bagian, portofolio bagian, panggilan untuk bertindak bagian, dan kontak bagian (semuanya antara dan ). Kami sama sekali tidak membutuhkan bagian ini. Anda dapat melanjutkan dan menghapusnya.
  • Itu footer bagian dan segala sesuatu di bawahnya (di bawah ). Ini yang harus kita pertahankan.

Ini membuat kode kami saat ini cukup sederhana. Pada dasarnya hanya ini:



























Hal yang kami lewatkan di sini adalah isi utama bagian. Untuk membangunnya, kami akan menggunakan kembali bagian about.

Silakan membuat salinan bagian about. Yang ini:

...


...

Sekarang ubah dua baris pertama menjadi ini:

Karena kita tidak membutuhkannya

sundulan di sana dan


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

Paragraf teks.

Saat 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:

tentang kepala halaman

Lebih baik memiliki latar belakang putih di bagian konten utama. Untuk mengubahnya, satu-satunya hal yang perlu kita lakukan adalah menghapus bg-primer kelas dari utama

menandai. Dengan kata lain, buat tag menjadi ini:

Itu lebih baik:

tentang kepala halaman 2

Mari kita tambahkan beberapa paragraf dummy ke halaman untuk mengisinya lagi, ditambah mungkin sub-kepala:

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Anak judul

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

Seperti apa ini pada halaman:

tentang ver 1

Jika Anda tidak ingin teks dipusatkan maka hapus saja pusat teks kelas dari salah satu

tag.

tentang ver 2

Jika Anda ingin memberi lebih banyak bakat pada blok teks ini, Anda dapat membuat kelas CSS baru (seperti sebelumnya) dan menetapkannya ke paragraf di blok tersebut. Atau, Anda bisa mengintip stylesheet saat ini dan melihat kelas apa yang sudah ada untuk tujuan ini. Berikut adalah yang kami tetapkan untuk

dan

tag:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Anak judul

Dan inilah efeknya:

tentang ver 3

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

Berikut ini contoh tag gambar dalam HTML:


Cukup sederhana, bukan? Satu-satunya parameter di sana adalah path ke file gambar. Agar semuanya tertata dengan baik, Anda dapat meletakkan gambar Anda di img direktori lagi (sama seperti yang Anda lakukan dengan latar belakang itu beberapa waktu lalu). Dalam kasus seperti itu, tag gambar akan menjadi:


Yang sedang berkata, tag gambar dalam konfigurasi khusus ini cukup terbatas. Untuk membuatnya sedikit lebih halus, mari kita tetapkan beberapa kelas Bootstrap untuknya. Terutama:


Dua kelas ini akan memberikan sudut gambar membulat Anda dan juga akan memastikan bahwa ukuran gambar tidak melebihi ukuran blok tempat gambar itu berada..

Anda sekarang dapat menambahkan tag seperti ini di suatu tempat di bagian konten utama dari halaman tentang Anda. Sebagai contoh, di sini:

Lorem ipsum dolor sit amet...

Proin fermentum, felis tempor pharetra lobortis, magna quam hendrerit dolor...

Anak judul

Dan inilah efek terakhir pada halaman:

tentang ver 4

Inilah halaman tentang kami dalam semua kemuliaan:

tentang halaman selesai

3. Tautan ke Halaman Baru

Setelah halaman baru selesai, mari sekarang tautkan dari beranda (halaman index.html mengajukan). Secara alami, tempat terbaik untuk menambahkan tautan ini ada di menu navigasi (di bawah ).

Secara khusus, cari baris ini:

Tentang

Kami akan mengubahnya ke ini:

Tentang

Ini adalah sesuatu yang belum kita bicarakan, tetapi tag adalah tag tautan dalam HTML. Menggunakannya, Anda dapat menautkan ke halaman web mana pun dengan memberikan alamat halaman itu di href parameter. Teks tautan – bagian tautan yang dapat diklik – akan menjadi teks antara pembukaan dan penutupan tag.

Saat menyegarkan laman beranda sekarang, Anda akan melihat tautan baru Anda mengarah ke laman tentang.

Bacaan lebih lanjut:

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

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

Hal-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 cheat HTML5
  • Lembar contekan CSS
  • Lembar cheat Javascript
  • Tutorial HTML
  • Tutorial bootstrap
  • Lembar cheat bootstrap

Menguasai Bootstrap, sangat mungkin jalur terbaik saat ini tersedia untuk membangun situs web yang dioptimalkan dan indah dengan HTML dan CSS.

Jika Anda memiliki pertanyaan tentang membuat situs web dengan HTML dan CSS, jangan ragu untuk mengirimkannya di komentar.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me