Cara Membuat Kod Laman Web

Cara Membuat Kod Laman WebIngin belajar bagaimana membuat laman web dengan HTML dan CSS?


Anda berada di tempat yang betul. Dalam panduan ini, kami menunjukkan kepada anda semua langkah untuk pergi dari skrin kosong ke laman web berfungsi yang dioptimumkan dan cukup cantik pada masa yang sama.

Tetapi pertama, apa itu HTML dan CSS?

Anda boleh melihat kedua-dua istilah tersebut di Wikipedia, tetapi definisi tersebut tidak begitu mesra pembaca. Mari kita permudahkan sedikit:

  • HTML (Hypertext Markup Language) mentakrifkan struktur dan kandungan halaman web – di mana barang pergi, bagaimana mereka dibentangkan, dan apa di halaman
  • CSS (Cascading Style Sheets) mentakrifkan gaya / persembahan laman web dan unsur-unsur di dalamnya

Anda benar-benar tidak dapat memilikinya tanpa yang lain – keduanya bekerjasama untuk membuat halaman web akhir, reka bentuknya, dan kandungan yang ada di dalamnya.

Nota; apabila kita mengatakan “laman web”, yang kita maksudkan adalah satu dokumen HTML – satu halaman yang merupakan sebahagian daripada laman web anda. Manakala, “laman web” adalah perkara yang lengkap – keseluruhan laman web anda dengan semua laman webnya yang tersendiri.

Cara membuat laman web menggunakan HTML dan CSS (jadual kandungan):

  1. Ketahui asas HTML
  2. Memahami struktur dokumen HTML
  3. Kenali pemilih CSS
  4. Gabungkan lembaran gaya CSS
  5. Dapatkan Bootstrap
  6. Pilih reka bentuk
  7. Sesuaikan laman web anda dengan HTML dan CSS
  8. Tambahkan kandungan dan gambar
  9. Warna dan fon yang sesuai
  10. Buat halaman tambahan

Jumlah masa untuk membuat laman web: 4-5 jam
Tahap kemahiran: Pertengahan

Sekiranya anda menganggap ini terlalu rumit, kami mengesyorkan membuat laman web menggunakan WordPress atau memilih salah satu pembangun laman web. Anda juga boleh melihat senarai IDE terbaik terpilih untuk pembangunan web. 

Contents

Sebelum Anda Mula, Kumpulkan Sumber Anda:

Jadi, perkara pertama yang anda perlukan sebelum membuat laman web dengan HTML dan CSS adalah pelayan web (hosting). Jangan bimbang, anda tidak perlu membeli mesin anda sendiri. Banyak syarikat hosting web akan menjual kepada anda perkhidmatan hosting sederhana di mesin mereka. Cukup google untuk “web hosting” dan pilih sesuatu yang tidak terlalu mahal.

Dengan pelayan disusun, perkara seterusnya yang anda perlukan adalah nama domain. Nama domain adalah laman web yang dikenal pasti di web. Contohnya, nama domain laman web ini adalah laman webetup.org.

Apabila anda mempunyai nama domain dan pelayan, anda boleh menghubungkan keduanya bersama-sama.

Pendedahan penuh: Kami mendapat komisen sekiranya anda akhirnya membeli Bluehost melalui pautan rujukan kami dalam panduan ini. Ini membantu kami untuk memastikan Penyediaan Laman Web sentiasa berjalan dan terkini. Terima kasih atas sokongan anda.

Untuk menyelesaikannya tanpa rasa sakit, kami mengesyorkan mendaftar dengan syarikat seperti Bluehost.

Mereka akan mengendalikan semua persediaan untuk anda. Bermaksud bahawa mereka akan: (a) sediakan akaun hosting untuk anda, (b) daftarkan nama domain bagi pihak anda, (c) konfigurasikan semuanya untuk bekerjasama, dan (d) memberi anda akses ke papan pemuka yang mudah digunakan.

Teruskan dan mendaftar Bluehost, kita akan tunggu. Apabila anda kembali dan pelayan web anda dikonfigurasi dan siap untuk digunakan, tatal ke langkah seterusnya.

P.S. Sekiranya anda hanya ingin bereksperimen dengan laman web HTML di komputer anda, dan tidak bermaksud untuk menjadikannya umum, gunakan perisian pelayan web tempatan. Yang kami cadangkan dan suka digunakan dipanggil XAMPP. Ia mempunyai versi untuk Mac dan PC, dan mudah digunakan. Inilah panduan mengenai cara memasangnya di komputer anda.

1. Pelajari Asas HTML

Elemen utama struktur HTML adalah HTML teg.

Contohnya, teg seperti ini:

SESUATU

Di sini, kita berurusan dengan teg. Yang ini akan berani sekeping teks yang berada di antara tag pembuka () dan tanda penutup (). Dalam kes ini, sekeping teks itu SESUATU.

Tetapi ada tag lain, hanya untuk beberapa nama:

  • ... akan mencetak teks antara tanda pembuka dan penutup
  • ... akan menggariskannya
  • ...

    adalah perenggan teks


  • ...

    adalah tajuk utama di halaman

Selain daripada tag ringkas tersebut, terdapat juga tag yang lebih kompleks. Contohnya, jika anda ingin membina senarai seperti berikut:

  • Perkara 1
  • Perkara 2
  • Perkara 3

… anda boleh melakukannya dengan kod HTML berikut:

  • Perkara 1
  • Perkara 2
  • Perkara 3

Atau, jika anda ingin menambahkan pautan ke halaman lain, seperti ini:

Ini adalah pautan ke laman utama kami

… anda boleh melakukannya dengan sekeping kod ini:

Ini adalah pautan ke laman utama saya

Baca ini untuk mendapatkan senarai penuh tag HTML. Ini akan menjadi berguna semasa anda membuat laman web dengan HTML dan CSS.

2. Memahami Struktur Dokumen HTML

Fikirkan halaman HTML anda seolah-olah ia dibina dari Legos. Anda meletakkan batu bata yang berbeza satu sama lain untuk berakhir dengan struktur yang lebih besar.

Tetapi bukannya batu bata Lego, anda mendapat tag HTML…

Inilah struktur dokumen HTML yang paling mudah:





Hai dunia!


Hai dunia!

Laman web pertama saya.

Anda boleh mengambil kod di atas, menyalin dan menampalnya ke fail baru, menyimpan dokumen sebagai indeks.html, dan ini akan menjadi halaman HTML yang sah.

Mari jelaskan setiap bahagian kod ini:

  • – pengisytiharan awal dokumen
  • – pengisytiharan lain; mengatakan bahawa apa yang akan datang adalah dokumen HTML yang ditulis dalam bahasa Inggeris
  • – menandakan permulaan kepala bahagian; yang kepala bahagian adalah di mana semua parameter asas halaman pergi; kebanyakannya tidak akan ditunjukkan di skrin; mereka hanya menentukan apa yang berlaku di bawah tudung
  • – menentukan set watak yang digunakan untuk menulis dokumen; tidak perlu menghabiskan terlalu banyak masa untuk perkara ini; gunakan perisytiharan ini sebagaimana adanya
  • Hai dunia! – tajuk halaman; inilah yang akan dilihat oleh orang di bar tajuk penyemak imbas mereka, contohnya:

tajuk dalam penyemak imbas web semasa membuat laman web dengan HTML dan CSS

  • – menandakan permulaan badan bahagian; di sinilah semua kandungan halaman masuk; itu adalah bahagian utama dari dokumen HTML; mari kita tekankan ini, bahagian ini adalah tempat anda akan memasukkan semua kandungan yang dimaksudkan untuk muncul di halaman

  • Hai dunia!

    – tajuk utama di halaman

  • Laman web pertama saya.

    – perenggan teks yang mudah

  • – tanda penutup keseluruhan dokumen HTML

Catatan penting di sini. Mengusahakan fail HTML dalam aplikasi teks asas atau pemproses teks yang kompleks seperti MS Word bukanlah pengalaman yang baik. Untuk mempermudah anda, pasang alat yang dipanggil Teks Luhur. Ia mempunyai versi untuk Mac dan PC, dan percuma.

Mengapa lebih baik? Antara lain, ia akan mewarnai sintaks fail HTML. Artinya, ia akan membezakan secara visual tag HTML anda dari kandungan teks, parameter tag, dan nilai lain. Pada dasarnya, semuanya akan dapat dibaca. Inilah rupa struktur HTML ringkas kami dalam Teks Sublime:

sintaks luhur sangat bagus ketika membuat laman web dengan HTML dan CSS

Baiklah, kembali topik. Anda boleh mengambil yang baru indeks.html fail milik anda, salin ke tempat direktori utama pelayan web anda, dan kemudian lihat halaman tersebut dengan menavigasi ke sana melalui penyemak imbas web. Jangan terlalu bersemangat; halaman ini akan agak jelek (lihat di bawah).

halaman ini hodoh

Baiklah, jadi halamannya jelek, bagaimana membuatnya tidak begitu?

3. Kenali Pemilih CSS

Sama seperti HTML yang mempunyai tag, CSS juga mempunyai tag pemilih.

Pemilih menerangkan bagaimana elemen tertentu harus bersikap penampilan. Berikut adalah contoh pemilih CSS:

p {
saiz fon: 18px;
}

Pemilih ini menunjukkan bahawa semua HTML

tag dalam dokumen akan mempunyai saiz fon 18px.

Namun, cara yang lebih praktikal menggunakan pemilih CSS adalah dengan tidak membatasi semua tag dari jenis tertentu pada gaya tertentu, melainkan membuat “kelas” yang berbeza dan menetapkannya pada tag satu persatu.

Sebagai contoh, pemilih kelas dalam CSS kelihatan seperti ini:

.teks biasa {
saiz fon: 18px;
}

Perhatikan titik (.) sebelum nama kelas (teks biasa). Dengan kelas “teks biasa” yang ditentukan, kita sekarang dapat menetapkan kelas tersebut kepada tag HTML tertentu yang ingin kita buat berukuran 18px.

Sebagai contoh:

Teks ini akan menjadi 18 piksel.

Mari luangkan satu minit lagi untuk menerangkan semua elemen kod CSS di atas:

  • .teks biasa – definisi kelas; semuanya selepas nama kelas dan antara tanda kurung pembuka dan penutup {} mentakrifkan bagaimana elemen yang diberikan kepada kelas ini akan kelihatan
  • Saiz huruf – contoh harta CSS
  • 18 piksel – nilai yang diberikan kepada harta tanah

Terdapat banyak sifat CSS selain di atas Saiz huruf. Ini dia senarai lengkap jika anda ingin tahu.

4. Gabungkan Lembaran Gaya CSS

Dokumen HTML sangat struktur – setiap elemen mempunyai tempatnya, dan susunan elemen sangat penting untuk pembinaan akhir dan penampilan laman web yang dimaksudkan. Dokumen CSS lebih kurang.

Dokumen CSS sering disebut sebagai lembaran gaya. Pada asasnya, lembaran gaya CSS adalah senarai semua definisi kelas yang digunakan dalam dokumen HTML yang sesuai. Urutan definisi kelas tidak begitu penting sepanjang masa (sekurang-kurangnya untuk reka bentuk sederhana).

Cara anda mengumpulkan lembaran gaya CSS adalah dengan menentukan setiap kelas satu demi satu, dan kemudian menguji apakah hasil dalam reka bentuk halaman anda adalah yang anda mahukan.

Ini terdengar seperti kerja yang membosankan, dan memang begitu.

Tetapi kami akan mempermudah anda, dan tidak memaksa anda mempelajari reka bentuk HTML dan CSS dengan tangan. Daripada mengajar anda semua dari awal, kita akan mengambil organisma hidup dan membedah unsur-unsurnya.

Di sinilah perkara yang disebut Bootstrap dimainkan.

5. Muat turun / Pasang Bootstrap

Bootstrap adalah toolkit sumber terbuka untuk membuat laman web dengan HTML dan CSS.

Dalam bahasa Inggeris biasa, Bootstrap mengurus struktur asas dokumen HTML dan lembaran gaya CSS untuk anda. Ini menyediakan kerangka kerja yang memastikan bahawa perancah utama laman web anda siap dan dioptimumkan untuk pengembangan selanjutnya.

Pada dasarnya, Bootstrap membolehkan anda tidak bermula dari awal, dan sebaliknya terus masuk ke bahagian yang menyeronokkan. Dengan itu, anda tidak perlu bekerja pada peringkat awal yang sering membosankan dalam membuat laman web dengan HTML dan CSS.

Terdapat dua jalan yang boleh anda lalui:

  • Pilihan (a): pelajari Bootstrap – pergi ke halaman utama Bootstrap, muat turun pakej Bootstrap utama dan mulailah membina di atasnya.
  • Pilihan (b): ambil jalan pintas – dapatkan pek permulaan untuk Bootstrap dengan reka bentuk yang menarik dan laman web demo yang sudah dibina.

Pilihan (a) mungkin mempunyai sedikit keluk pembelajaran pada awalnya, tetapi bukan cara yang lebih buruk lagi untuk membuat laman web dengan HTML dan CSS. Sebaik sahaja anda menguasai struktur Bootstrap teras, mungkin lebih mudah bagi anda untuk membina halaman baru dan menjadikannya kelihatan seperti yang anda mahukan. The Dokumentasi tali but adalah tempat yang bagus untuk memulakan jalan ini.

Kami akan menggunakan Option (b) untuk panduan ini. Kami melakukan ini kerana beberapa sebab, ketua mereka:

Bermula dengan struktur siap dapat menjimatkan banyak kesulitan ketika berusaha mengetahui keperluan asas dokumen HTML. Ini membolehkan anda menumpukan perhatian pada perkara menarik – seperti menyusun kandungan dan membuatnya kelihatan baik.

Ringkasnya, belajar perkara dengan cara ini akan memberi anda hasil yang lebih baik dengan lebih cepat, yang kami rasa adalah apa yang anda mahukan.

6. Pilih Reka Bentuk

Semasa anda membuat laman web dengan HTML dan CSS, anda bebas menggunakan templat Bootstrap yang anda suka. Mereka semua mesti bekerja sama.

Namun, untuk panduan ini, kami akan menggunakan salah satu templat sebelum Mulakan Bootstrap. Mereka mempunyai pilihan templat percuma yang baik yang dioptimumkan, bebas masalah, dan juga dirancang dengan sangat baik.

Tema yang akan kita gunakan dipanggil Kreatif. Kesan akhir yang kita mahukan akan kelihatan seperti ini:

laman utama terakhir setelah membuat laman web dengan HTML dan CSS

Sebagai permulaan, templat Kreatif, klik pada Muat turun percuma butang di sebelah kanan (dihidupkan muka surat ini) dan simpan pakej zip ke desktop anda.

Buka zip pakej dan pindahkan kandungannya ke direktori utama pelayan web tempatan atau akaun hosting web anda.

Sekarang buka lokasi itu melalui penyemak imbas web anda. Anda akan melihat versi stok templat:

mulakan templat bootstrap

Ia sudah cukup cantik, tetapi sekarang tiba masanya untuk belajar bagaimana menggunakan HTML dan CSS untuk menjadikannya tepat seperti yang anda mahukan.

7. Sesuaikan Laman Web Anda Dengan HTML dan CSS

Mari kita mulakan di laman utama reka bentuk terlebih dahulu. Ini akan menunjukkan kepada kita cara mengganti grafik, teks, dan menyesuaikan semuanya secara umum.

Kami telah membincangkan bahagian utama dokumen HTML secara ringkas di atas. Mari kita perhatikan lebih mendalam di sini.

Apabila anda membuka indeks.html fail laman Bootstrap anda dalam Teks Sublime, anda akan melihat bahagian utama seperti ini (kami membuang semua perkara yang tidak penting dari kod ini untuk kejelasan *):






Kreatif - Mulakan Tema Bootstrap





* Selain dari perkara di atas, terdapat juga kod untuk memuat Google Font, ikon Font Awesome dan modul lightbox untuk gambar yang dipaparkan di halaman.

Sebilangan besar pernyataan di sini sudah kita ketahui, tetapi ada beberapa yang baru:

  • Pertama, semua antara kurungan adalah komen HTML. Itu tidak muncul di halaman akhir.
  • – ini adalah salah satu tag deklarasi Bootstrap sendiri. Ini menentukan ukuran paparan laman web.
  • – baris ini memuatkan lembaran gaya CSS templat Kreatif dan juga memuatkan lembaran gaya lalai Bootstrap.

Mari kita ubah deklarasi terakhir – garis memuat CSS – untuk memudahkan kerja di kemudian hari.

Tukar garis itu kepada:


Ini hanya perbezaan kecil – ia akan memuatkan versi yang tidak dipendekkan dari helaian CSS yang sama. Versi ini lebih mudah diubah suai.

Sekarang tatal ke bawah ke bahagian bawah indeks.html fail. Anda akan melihat baris berikut tepat sebelum penutupan badan teg:

        

Mereka bertanggungjawab untuk memuatkan fail JavaScript yang menangani beberapa interaksi visual yang lebih reka bentuk. Contohnya, apabila anda mengklik Mengenai pautan di menu atas, anda akan dibawa dengan lancar ke blok kira-kira di halaman yang sama – ini, antara lain, dilakukan melalui JavaScript. Kami tidak perlu menyusahkan diri untuk memahami kod ini sekarang. Mari biarkan ini untuk masa yang lain.

Sebagai gantinya, mari berusaha menambahkan kandungan kita sendiri ke halaman:

8. Tambah Kandungan dan Gambar

Perkara pertama yang anda ingin lakukan ialah menukar tajuk halaman.

1. Tukar Tajuk

Cari tajuk tandakan di bahagian kepala dan ganti teks di antara tag dengan sesuatu yang anda sendiri:

Laman HTML Saya

2. Sesuaikan Bahagian Wira

Bahagian wira adalah apa yang kita panggil blok ini:

bahagian wira

Sangat menyenangkan jika kandungan kita sendiri berada di dalamnya. Untuk mengubah blok ini, kembali ke blok anda indeks.html fail dan cari bahagian ini:

...


...

Ketahui lebih lanjut

Seluruh kod ini mengawal apa yang ada di bahagian wira.

Terdapat beberapa teg baru di sini:


  • – ini adalah tag yang menentukan bahawa keseluruhan bahagian ini adalah tajuk halaman; tag ini mempunyai sepasang saudara dan saudari dalam bentuk
    teg dan
    teg
  • – adalah tag CSS umum yang menunjukkan bahawa yang berikut adalah bahagian yang terpisah (aka pembahagian) dalam dokumen HTML; menggunakannya menjadikannya lebih mudah untuk membezakan bahagian individu di halaman secara visual

Anda juga akan menyedari bahawa beberapa teg lain (yang sudah kita ketahui) kelihatan agak rumit, dengan beberapa kelas CSS diberikan kepadanya. Sebagai contoh:

...

Kelas yang ditugaskan untuk

tag di sini adalah teks-huruf besar-putih-font-berat-tebal.

Kelas-kelas ini telah dibuat oleh Bootstrap dan oleh pembangun tema Creative. Berita baiknya ialah anda juga dapat menggunakannya dengan bebas ketika membuat laman web dengan HTML dan CSS.

Terus terang, anda boleh menyesuaikan sebarang teg yang anda tambahkan pada struktur halaman anda dengan memberikan sebilangan kelas kepadanya.

Sekiranya anda ingin melihat senarai lengkap kelas yang ada, anda boleh membuka yang utama kreatif.css fail yang ada di css subdirektori tema Kreatif.

Memahami semua kelas ini pada mulanya kelihatan menakutkan, tetapi sebenarnya lebih mudah daripada yang kelihatan.

Sebagai contoh, salah satu kelas yang ditugaskan untuk beberapa perenggan di kami indeks.html fail adalah fon-berat-ringan. Apabila anda melompat ke kreatif.css fail dan ctrl + f mencari nama kelas itu, anda akan melihat bahawa ia hanya menetapkan berat fon parameter seperti:

.fon-berat-ringan {
berat huruf: 300;
}

Mengubah teks lalai di indeks.html fail sangat mudah. Cari tag yang anda mahu edit dan ubah antara tag pembuka dan penutup.

Contohnya, untuk menukar tajuk utama, ubah ini:

Kegemaran anda ...

Untuk perkara seperti berikut:

Kagumi laman web HTML saya!

Anda boleh melakukan perkara yang sama untuk semua perenggan dan tag lain di halaman.

Yang penting ialah anda juga dapat menambahkan perenggan baru dengan bebas. Sebagai contoh, kita dapat mengambil perenggan yang sudah ada di halaman, membuat salinannya dan menampalnya tepat di bawah perenggan asal; seperti itu:

Mulakan Bootstrap boleh ...

Perenggan 2

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

Ini sedikit lebih rumit untuk dilakukan kerana ia memerlukan kita masuk ke dalam fail gaya CSS dan melakukan pengubahsuaian di sana. Seperti yang anda lihat dalam kod HTML Kepala Muka bahagian, tidak ada tanda yang akan menunjukkan termasuk gambar ke halaman dengan cara apa pun. Ini semua dilakukan melalui CSS.

Apabila anda melihat kembali keseluruhan blok kod yang mengendalikan Kepala Muka bahagian, anda akan melihat bahawa itu ditugaskan ke kelas yang dipanggil kepala lembu. Garis kod ini mengendalikan tugas kelas:

The kepala lembu kelas adalah yang meletakkan gambar di latar belakang keseluruhan blok.

Mari buka kreatif.css fail sekali lagi dan cari kelas “masthead”:

header.masthead {
padding-top: 10rem;
padding-bottom: calc (10rem - 72px);
latar belakang: kecerunan linear (ke bawah, rgba (92, 77, 66, 0.8) 0%, rgba (92, 77, 66, 0.8) 100%), url ("../ img / bg-masthead.jpg" );
latar belakang-kedudukan: tengah;
latar-ulangan: tidak-ulangan;
latar belakang-lampiran: tatal;
latar belakang: penutup;
}

Kod ini melakukan semua jenis perkara yang menarik pada gambar kita (seperti menambahkan hamparan, bayangan, dan lain-lain), tetapi yang penting ialah: url ("../ img / bg-masthead.jpg"). Ini adalah garis yang menunjukkan di mana untuk mencari gambar latar. Ia akan berada di img subdirektori.

Untuk menukar gambar latar ini, ambil gambar anda sendiri, salin ke img subdirektori dan kemudian salin dan tampal namanya di tempat asal bg-masthead.jpg fail. Ringkasnya, ubah ini: url ("../ img / bg-masthead.jpg") untuk ini: url ("../ img / YOURFILE.jpg").

3. Sesuaikan Blok Lain di Halaman

Semasa anda melalui indeks.html fail, anda akan melihat bahawa terdapat banyak bahagian yang berbeza di halaman ini. Kami mempunyai bahagian untuk pelayaran, dan mengenai sebilangan, sebilangan perkhidmatan, a portfolio, a ajakan bertindak, a kenalan blok, dan a tapak kaki.

Walaupun terdapat kandungan yang berbeza di semua bahagian ini, bahagian itu sendiri serupa strukturnya. Mereka semua mempunyai set tag HTML yang hampir sama – hanya kelas CSS berbeza yang diberikan kepadanya.

Cara terbaik untuk mengubah halaman agar sesuai dengan keperluan anda adalah melalui blok satu persatu dan bereksperimen dengan mengubah keadaan.

Selain mengubah teks, anda juga boleh memindahkan seluruh bahagian (bahagian-bahagian di antara

tag). Memang, anda perlu melakukannya dengan tangan (dengan memotong dan kemudian menampal elemen ke tempatnya), masih mudah dilakukan.

Dengan itu, terdapat dua pengubahsuaian asas yang belum kita bicarakan. Mari kita bahas berikut:

9. Warna dan Fon Fine-Tune

Menukar warna atau fon sangat mudah dilakukan dalam HTML dan CSS. Perkara paling mudah yang boleh anda lakukan adalah menetapkan beberapa gaya sebaris pada tag HTML. Sebagai contoh:

Teks merah

Dalam HTML, warna diwakili oleh nilai heksinya; “# FF0000” berwarna merah. Berikut adalah jadual yang lain warna standard.

Kaedah yang lebih baik untuk menetapkan warna adalah melakukannya melalui helaian gaya CSS. Sebagai contoh, untuk mendapatkan kesan yang sama seperti kod di atas, kami boleh memasukkannya ke dalam helaian gaya CSS kami:

p.kedudukan {
warna: # FF0000;
}

Kemudian gunakan kod HTML berikut dalam dokumen utama:

Teks merah

Kaedah kedua pada dasarnya adalah bagaimana sesuatu dilakukan di Bootstrap.

Untuk menukar warna teks apa pun di halaman, cari dahulu tag yang bertanggungjawab untuk menggayakan teks itu, dan kemudian masuk ke lembaran gaya dan ubah kelas yang sesuai, atau buat kelas baru.

Inilah contohnya; katakan anda mahu menukar warna tajuk yang mengatakan “Di Perkhidmatan Anda.” Pada masa ini, berwarna hitam, dan inilah kod yang mengendalikannya:

Berkhidmat untuk anda

Untuk menukar warnanya, kaedah terbaik adalah dengan membuat kelas baru yang disebut, katakanlah, .teks-jingga dan tetapkan nilai warna di sana, seperti:

.teks-oren {
warna: # f4623a! penting;
}

* The !penting akan memastikan bahawa tetapan warna ini akan menimpa tetapan warna lain yang ada sebelumnya.

Sekarang, kita boleh kembali ke tajuk kita, dan mengubah kodnya menjadi:

Berkhidmat untuk anda

Dengan perubahan ini, tajuk sekarang akan berwarna jingga:

oren h2

Untuk menukar fon dan saiznya, anda boleh melakukan sesuatu yang serupa. Tetapi pertama, contoh bagaimana blok definisi fon seperti dalam CSS:

.SOMECLASS {
font-family: "Merriweather", Roboto, sans-serif;
saiz fon: 18px;
}
  • memuatkan fon Merriweather, Roboto, dan lalai sistem sans-serif fon (baca ini untuk mengetahui fon selamat web)
  • tetapkan saiz fon kepada 18 piksel

Definisi semacam ini boleh diletakkan di kelas CSS mana pun, sama seperti definisi warna. Sebenarnya, definisi fon dan warna sering dijumpai dalam deklarasi kelas yang sama.

Kembali ke contoh sebelumnya, untuk mengubah ukuran fon untuk tajuk yang bertuliskan “Di Perkhidmatan Anda”, kami dapat membuat kelas seperti ini:

.teks-xxl {
saiz fon: 50 piksel;
}

Dan kemudian tetapkan kelas ini kepada pengepala:

Berkhidmat untuk anda

�� Semasa menukar warna atau fon dalam templat Bootstrap anda, lihat dahulu lembaran gaya CSS untuk kelas yang mungkin sudah memberi anda ukuran atau warna alternatif. Gunakan yang ada.

10. Buat Halaman Tambahan

Sekarang setelah halaman utama anda disesuaikan, sudah tiba masanya untuk mula mengerjakan beberapa halaman tambahan dan kemudian memautkannya ke halaman utama.

Semasa membuat laman web dengan HTML dan CSS, anda boleh membina sebilangan sub-halaman dan kemudian menghubungkannya bersama-sama.

Berikut adalah beberapa halaman biasa yang diperlukan oleh kebanyakan laman web:

  • mengenai halaman
  • kenalan
  • portfolio
  • produk / perkhidmatan
  • pasukan
  • dasar (dasar privasi, syarat, dll.)

1. Mulakan Dengan Tata Letak

Semasa membina laman web baru, keputusan pertama yang harus anda buat adalah apa yang anda mahukan susun aturnya.

Semasa membuat laman web dengan HTML dan CSS, tidak ada yang menghalang anda daripada membuat apa-apa sahajalah susun atur yang anda mahukan. Satu-satunya kesukaran sebenarnya adalah menyatukannya.

HTML dan CSS mungkin sulit ditangani ketika mulai dari layar kosong, jadi kami juga akan menggunakan Bootstrap di sini. Pertama, kami akan menunjukkan kepada anda beberapa prinsip pembuatan susun atur dan kemudian menunjukkan cara melakukannya dengan Bootstrap.

Cara anda memikirkan susun atur halaman web anda adalah menganggapnya sebagai urutan blok individu – satu di atas yang lain. Sesuatu seperti ini (perhatikan empat blok yang berbeza):

susun atur semasa membuat laman web dengan HTML dan CSS

Perkara yang hebat mengenai Bootstrap ialah ia menguruskan prinsip susun atur asas dan perincian penampilan untuk anda supaya anda hanya dapat fokus meletakkan blok tersebut di tempat yang betul.

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

Untuk memulakan, kami hanya akan membuat projek susun atur yang sangat asas. Sesuatu seperti di atas.

  • ada menu navigasi di bahagian atas,
  • blok tajuk lebar penuh di bawah menu,
  • bahagian kandungan utama di tengah, kotak di tengah skrin (tidak lebar penuh),
  • dan footer.

Sekarang mari kita susun atur ini dalam HTML.

2. Bina Halaman Baru

Cara termudah untuk mula mengerjakan halaman baru adalah menggandakan halaman yang ada dan menggunakannya sebagai templat. Itulah yang akan kami lakukan.

Buat salinan indeks.html fail dan namakan semula kira-kira.html.

Hanya untuk menjadikan halaman lebih mudah dibezakan pada peringkat awal ini, edit yang baru kira-kira.html fail dan ubah apa yang ada di </code> teg. Sebagai contoh, <code><title>Tentang saya.

Sekarang mari kita selidiki file demi baris dan tentukan apa yang akan kita tinggalkan dan apa yang akan kita hapus:

  • The pelayaran menu (di bawah ). Anda mungkin mahu menjaga bahagian ini utuh, hanya untuk menjadikan pengalaman navigasi seragam di semua halaman.
  • The wira utama bahagian (di bawah ). Yang ini tidak akan kami perlukan mengikut projek susun atur kami. Anda boleh teruskan dan hapus keseluruhan bahagian.
  • The mengenai bahagian (di bawah ). Kami akan menggunakan semula bahagian ini sebagai blok utama kami.
  • The perkhidmatan bahagian, portfolio bahagian, ajakan bertindak bahagian, dan kenalan bahagian (semua antara dan ). Kami tidak memerlukan bahagian ini sama sekali. Anda boleh teruskan dan menghapusnya.
  • The tapak kaki bahagian dan semua yang ada di bawahnya (di bawah ). Ini perlu kita jaga.

Ini menjadikan kod semasa kami agak mudah. Pada dasarnya hanya ini:



























Perkara yang kita hilang di sini adalah kandungan utama bahagian. Untuk membinanya, kita akan menggunakan semula bahagian berkenaan.

Teruskan dan buat salinan bahagian berkenaan. Yang ini:

...


...

Sekarang ubah dua baris pertama kepada ini:

Oleh kerana kita tidak memerlukannya

pengepala di sana dan

elemen, mari kita hapus. Satu-satunya perkara yang tersisa di dalam blok ini adalah perenggan teks. Seperti:

Perenggan teks.

Apabila anda menyimpan fail dan menavigasi ke sana melalui penyemak imbas anda, anda akan melihat bahawa pada dasarnya anda mempunyai dua blok yang sangat serupa satu di bawah yang lain, dengan latar belakang warna yang sama:

mengenai kepala halaman

Lebih baik mempunyai latar belakang putih di bahagian kandungan utama. Untuk mengubahnya, satu-satunya perkara yang perlu kita lakukan ialah membuangnya bg-primer kelas dari utama

teg. Dengan kata lain, buat tanda ini:

Itu lebih baik:

mengenai kepala halaman 2

Mari tambahkan beberapa perenggan palsu ke halaman untuk mengisinya lagi, dan mungkin sub-kepala:

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

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

Subhead

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

Begini rupa halaman ini:

mengenai ver 1

Sekiranya anda tidak mahu teks berada di tengah, hapus sahaja pusat teks kelas dari salah satu

tanda nama.

kira-kira ver 2

Sekiranya anda ingin meletakkan lebih banyak bakat pada blok teks ini, anda boleh membuat kelas CSS baru (seperti sebelumnya) dan menetapkannya pada perenggan di blok tersebut. Atau, anda boleh melihat lembaran gaya semasa dan melihat kelas apa yang sudah ada untuk tujuan ini. Inilah yang kami berikan kepada

dan

teg:

Lorem ipsum dolor duduk amet...

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

Subhead

Inilah kesannya:

kira-kira ver 3

Satu perkara lagi yang akan kita lakukan di sini ialah menambahkan gambar di suatu tempat di halaman.

Inilah rupa tag gambar contoh dalam HTML:


Cukup sederhana, bukan? Satu-satunya parameter adalah jalan ke fail gambar. Untuk memastikan keadaan teratur dengan baik, anda boleh meletakkan gambar anda di img direktori lagi (seperti yang anda lakukan dengan latar belakang itu suatu ketika dahulu). Dalam kes sedemikian, tag gambar akan menjadi:


Yang dikatakan, tag gambar dalam konfigurasi ini agak terhad. Untuk menjadikannya lebih halus, mari kita berikan beberapa kelas Bootstrap kepadanya. Terutama:


Kedua-dua kelas ini akan memberikan sudut bulat gambar anda dan juga memastikan bahawa ukuran gambar tidak melebihi ukuran blok tempat ia berada.

Anda kini boleh menambahkan teg seperti ini di suatu tempat di bahagian kandungan utama halaman perihal anda. Contohnya, di sini:

Lorem ipsum dolor duduk amet...

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

Subhead

Dan inilah kesan terakhir pada halaman:

kira-kira ver 4

Inilah halaman mengenai kami dengan penuh kemuliaan:

mengenai halaman lengkap

3. Pautkan ke Halaman Baru

Dengan halaman baru selesai, mari kita pautkan dari halaman utama ( indeks.html fail). Secara semula jadi, tempat terbaik untuk menambahkan pautan ini adalah di menu navigasi (di bawah ).

Khususnya, cari baris ini:

Mengenai

Kami akan mengubahnya menjadi ini:

Mengenai

Ini adalah perkara yang belum kita bincangkan, tetapi tag adalah tag pautan dalam HTML. Dengan menggunakannya, anda dapat membuat pautan ke halaman web mana pun dengan memberikan alamat halaman tersebut di href parameter. Teks pautan – bahagian pautan yang dapat diklik – akan menjadi teks antara pembukaan dan penutup tanda nama.

Apabila anda memuat semula halaman utama sekarang, anda akan melihat pautan baru anda menunjuk ke halaman berkenaan.

Bacaan lanjut:

Pada peringkat ini, anda pada dasarnya telah membina laman web ringkas yang terdiri daripada dua halaman – a laman utama dan sebuah mengenai halaman.

Apa yang harus anda lakukan sekarang ialah bilas dan ulangi dengan membuat halaman baru, menyesuaikannya, menambahkan kandungan kepadanya, dan kemudian menghubungkan semuanya dari menu navigasi.

Perkara lain yang perlu dilakukan semasa anda mengikuti langkah-langkah ini ialah mempelajari lebih lanjut prinsip HTML dan CSS, melalui senarai semak, dan juga mempelajari Bootstrap serta struktur dan kelasnya. Beberapa sumber untuk itu:

  • Lembaran menipu HTML5
  • Lembaran cheat CSS
  • Helaian cheat Javascript
  • Tutorial HTML
  • Tutorial tali but
  • Lembaran cheat bootstrap

Menguasai Bootstrap, kemungkinan jalan terbaik yang ada pada masa ini untuk membina laman web yang dioptimumkan dan cantik dengan HTML dan CSS.

Sekiranya anda mempunyai pertanyaan tentang membuat laman web dengan HTML dan CSS, jangan ragu untuk menghantarnya ke dalam komen.

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

    Like this post? Please share to your friends:
    Adblock
    detector
    map