Asas Merekabentuk Web (HTML dan CSS)

Saya belajar HTML dan CSS dan tidak lama lagi akan mendapat disertifikasi di dalamnya juga, dan saya fikir ia adalah idea yang baik untuk memberikan tutorial tentang bagaimana untuk memulakan mereka bentuk laman web anda sendiri menggunakan HTML dan sedikit CSS. ..

HTML adalah singkatan untuk Bahasa Markup Teks Hyper .

CSS adalah singkatan untuk Cascading Style Sheets .

HTML sebenarnya digunakan untuk membuat halaman web dan kandungan yang ada, seperti imej dan tulisan.

CSS digunakan untuk merekabentuk laman web dan memberitahu penulisan dan imej untuk berada di tempat tertentu, seperti imej di bahagian atas halaman, yang lain di pusat dan lain-lain ...

"Apa-apa sahaja di internet boleh diubah suai, dipadam atau ditambah hanya menggunakan HTML dan CSS! Malah di instructables.com!"

Perkara terbaik ialah ...

Apa yang anda perlukan adalah sebuah komputer!

Jadi, mari mulakan perjalanan kami ke laman web ...

Langkah 1: Apa itu Laman Web yang Dibuat?

Jika anda melayari laman web dan mencari mana-mana laman web yang menarik dan sejuk, dan ingin mengetahui apa dan bagaimana ia dibuat, atau untuk mengetahui pengekodan HTML yang mereka gunakan, maka yang perlu anda lakukan adalah,

  • Klik kanan pada mana-mana kawasan kosong di halaman web.

  • Klik lihat sumber halaman

  • Ini akan membuka tetingkap atau tab baharu mengikut tetapan anda yang menunjukkan kod HTML yang dijalankan oleh tapak web.


NOTA: Sesetengah laman web seperti instructables, google, youtube etc menggunakan banyak Javascript dalam pengekodan mereka, jadi jangan takut ... selepas membaca ini boleh dibimbing, anda akan dapat dengan mudah memahami apa HTML dan CSS dan tag asas .

Langkah 2: HTML, Apa itu?

HTML seperti yang saya katakan sebelum ini

Bahasa Markup Teks Hyper ...


Segala-galanya dalam HTML berfungsi dengan menggunakan 'Tag', Tag adalah elemen dalam dokumen HTML yang memberi perintah kepada penulisan atau imej atau audio atau video file apa yang perlu dilakukan, di mana untuk diletakkan dll di laman web ...

Dalam HTML, tag sentiasa mempunyai "<" sebelum dan ">" selepas tag ...
ex- (Teg ini menjadikan teks berani)

Semua dokumen HTML bermula dan berakhir dengan




Tag ini memberitahu pelayar bahawa fail ini adalah halaman web dan bukan hanya fail teks biasa ...

Langkah 3: Apa yang Anda Perlu?

Untuk mula membuat laman web, semua yang anda perlukan adalah:

Penyunting perkataan. notepad seperti ..

Ramai orang yang membuat laman web di luar sana menggunakan program seperti 'Dreanweaver' dan 'Microsoft Frontpage' kerana mereka memudahkan untuk membuat laman web dan membantu pengekodan.

Tetapi cara terbaik untuk mempelajari HTML adalah dengan menggunakan asas-asas ... Notepad dan kemudian setelah anda mempelajari asas-asas, maka anda boleh beralih ke program pengeditan ...


Langkah 4: Struktur Asas Dokumen HTML

Semua dokumen HTML mempunyai "Kepala" dan "Badan" tag ...

Jadi semua dokumen HTML mempunyai struktur yang serupa dengan ...

(Memulakan dokumen html)
(Memulakan tag kepala)
(Menamatkan tag kepala)
(Memulakan tag badan)
(Menamatkan tag badan)
(Menamatkan dokumen html)

NOTA: Teg HTML tidak sensitif kepada kes, ini bermakna tidak penting jika anda menulisnya dengan huruf besar atau huruf kecil ...

Setiap tag HTML, mempunyai pembuka dan tag tutup, dan apa-apa kandungan di antara tag tersebut, memberi kandungan itu kepada pemilik teg arahan ... ex: ... (Ini adalah untuk menebalkan teks)
Beberapa tag HTML mempunyai tag pembuka dan penutup dalam tag yang sama ... ex:
(Ini adalah untuk memecah garisan)

Apa sahaja yang ada dalam tag tubuh, dipaparkan secara langsung di laman web, dan apa sahaja yang ada di tag kepala, mereka menentukan dan memberi maklumat mengenai laman web yang tidak dilihat apabila anda melihat halaman pada penyemak imbas web.

Langkah 5: Tag HTML Tajuk

Dalam HTML terdapat 6 set tag yang digunakan untuk tajuk ...
Tag ini semua masuk dalam tag tubuh ...

Ini adalah tajuk terbesar






Ini adalah tajuk terkecil


NOTA: Kebanyakan orang membuat kesilapan menggunakan tag ini untuk membuat teks lebih besar atau lebih kecil, dan itu tidak sepatutnya dilakukan, seperti enjin carian menentukan halaman dengan tajuk ini untuk mencari bahagian mana halaman itu ... dan hanya menggunakannya untuk saiz fon tidak akan memberikan definisi yang baik untuk halaman oleh enjin carian ...

Langkah 6: Elemen Teks (Teg) dalam HTML

Dalam HTML, terdapat kira-kira 5 tag yang menentukan teks dalam laman web.
Tanda ini masuk ke bahagian badan dokumen HTML.

Segala-galanya di sini akan ditetapkan sebagai paragraf baru



Ini menambah rehat barisan (Ini seperti menekan "Enter" pada papan kekunci semasa menaip)

Ini menambahkan garisan di mana-mana diletakkan di dalam dokumen (Peraturan mendatar)
 Segala-galanya di sini akan ditunjukkan seperti yang ditaip ... semua ruang dan "Masuk" apabila kami menaip akan dipaparkan pada halaman web 


Tag yang paling biasa daripada ini adalah dan
tag kerana ia digunakan dalam hampir mana-mana dan setiap halaman ...
Tag pra ini bagus jika anda malas dan hanya mahu ruang dan masuk sebagai anda bukannya menambah elemen teks yang lain, tetapi kemudian akan menjadi keras lagi untuk penyemak imbas dan enjin carian untuk menganalisis halaman anda ...

Langkah 7: Gaya Logik untuk Teks dalam HTML

Unsur-unsur ini masuk ke dalam tag tubuh lagi kerana mereka menentukan teks yang ditunjukkan di laman web ...
Terdapat 3 gaya logik utama untuk teks dalam HTML ....

Text in here is emphasized
Text in here is strong
Computer code is put in here


Tag penekanan hanya membuat teks miring, tetapi sedikit lebih bengkok daripada fon italik biasa ...
Teg kuat membuat teks berani, tetapi juga menjadikannya lebih dekat, kerana jarak surat dikurangkan.
Tag kod menentukan kod komputer yang diperlukan untuk dipaparkan pada halaman web, ia mempunyai font yang berbeza dan jarak dan saiz font kecil ...

Langkah 8: Gaya Fizikal untuk Teks dalam HTML

Terdapat hanya 2 gaya fizikal biasa yang digunakan untuk teks hari ini dalam HTML ....
Tag ini juga dimasukkan ke dalam bahagian tubuh dokumen.

This text is bold

Teks ini adalah miring

Tag ini sangat biasa kerana semua orang menggunakannya walaupun dalam program pengeditan teks seperti perkataan microsoft ...
Tag yang berani menjadikan teks lebih tebal dan lebih luas dan sedikit lagi ...
Tag italik membolehkan teks membungkuk sedikit ke kanan.

Langkah 9: Menambah Imej dalam HTML

Ini adalah salah satu perkara paling mudah dilakukan dalam HTML ...
Tag ini dimasukkan ke dalam bahagian badan dokumen itu juga ...



Tag di atas menambah imej ke halaman anda ... dan jika anda mahu menyelaraskannya maka semua yang perlu anda lakukan ialah menambah:

align="right"
align="letf"
align="center" /


Tambah salah satu daripada mereka selepas anda menutup petikan dan sebelum tanda lebih besar

Nota: Imej yang anda tambahkan hendaklah berada dalam folder yang sama bahawa dokumen HTML anda disimpan dalam, atau jika anda perlu menentukan laluan fail ke imej ...

Langkah 10: Senarai dalam HTML

Dalam HTML, terdapat 2 jenis senarai:
1) Digelar atau tidak teratur
2) Nombor atau diperintahkan

Ini sekali lagi pergi ke bahagian tubuh dokumen.

Setiap item dalam senarai ditentukan dengan

  • Senarai Item
  • tag.


      First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    1. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    2. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    3. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    4. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    5. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    6. First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    First list item
    Second list item
    Third list item



    First list item
    Second list item
    Third list item

      First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    • First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    • First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    • First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    • First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    • First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item

    • First list item
      Second list item
      Third list item



      First list item
      Second list item
      Third list item


    Yang pertama ialah senarai yang diperintahkan yang menunjukkan senarai dengan nombor dari 1, 2, 3 dan seterusnya ...
    Yang kedua ialah senarai tidak teratur yang menunjukkan senarai dengan mata peluru ...

    Langkah 11: Pautan dalam HTML

    Dalam HTML, terdapat 3 jenis pautan utama,
    1) Pautan biasa, untuk memaut ke laman web dalam talian yang lain atau untuk memaut ke halaman web lain di komputer anda.
    2) Pautan imej, untuk menggunakan imej itu sendiri sebagai pautan yang boleh diklik.
    3) Mailto link, untuk membuat link yang membuka klien e-mel.

    Tanda-tanda ini juga masuk ke tag body of the document

    Pautan biasa:
    Jump to Google

    Pautan imej:



    A link MU:
    Send email

    mentakrifkan jangkar, ia digunakan dalam semua pautan dan pautan inline kerana ia membuat sauh di mana pun ia dimasukkan dalam kod.
    Harta "href" / dalam tag memberitahu jangkar untuk memaut ke laman web atau penanda lain itu sendiri dalam beberapa kes ...

    Langkah 12: Anchor Menghubungkan dalam HTML

    Pernahkah anda melihat laman web yang sejuk yang mempunyai indeks yang menghubungkan ke bahagian yang berbeza dari halaman mereka? seperti Wikipedia?

    //en.wikipedia.org/wiki/HTML (Lihat bahagian kandungan)

    Untuk membuatnya, kami menggunakan teg anchor dan menghubungkan 2 tag anchor bersama-sama,
    Tag ini juga digunakan di bahagian badan dokumen ...

    Step 5
    Jump to step 5


    Tag pertama memberitahu bahawa teks Langkah 5 adalah berlabuh pada dokumen dengan nama "Langkah 5"
    Tag kedua ialah tag pautan yang menjadikan teks "Lompat ke langkah 5" pautan yang menghubungkan ke Langkah 5 jangkar yang kami buat sebelum ...

    Menggunakan tag ini adalah mutlak diperlukan untuk laman web yang menyatakan banyak maklumat seperti Wikipedia :)

    Langkah 13: Jadual dalam HTML

    Jadual adalah bahagian utama jika tapak web anda didasarkan pada statistik dan butiran .... jadual seperti kelihatan seperti jadual Microsoft Excel tetapi anda boleh menjadikannya kelihatan lebih menarik dengan mengeditnya dalam CSS yang akan kami lipitkan kemudian ...

    Jadual terdiri daripada 3 perkara ... atau lebih seperti 3 tag ...



    Semua tag ini masuk ke bahagian badan dokumen itu juga ...

    Tag jadual memberitahu dokumen di mana jadual bermula dan berakhir
    Tag tr menambah baris ke jadual (Jadual Baris)
    Label td menambah sel ke atas meja (Jadual Keterangan)

    Lihatlah imej-imej untuk mendapatkan pemahaman yang lebih baik pada bagaimana jadual bekerja ... sebagai jadual adalah salah satu bahagian yang paling sukar dalam HTML ...

    Langkah 14: Bingkai dan IFrames dalam HTML

    Bingkai dan IFrames adalah perkara yang sama, kerana ia digunakan untuk menunjukkan halaman web dalam kotak seperti perkara di dalam halaman web lain ....

    IFrame digunakan apabila anda hanya mempunyai satu halaman web yang anda mahu tunjukkan pada halaman web anda dalam kotak kecil ...


    Ini akan menunjukkan www.google.com dalam bingkai kecil di laman web anda ...












    Bingkai sentiasa berada di dalam dan tag sebagai kumpulan ini menyusun bingkai ... melakukan perkara yang sama seperti tetapi ia digunakan apabila anda mempunyai lebih daripada 1 bingkai (halaman web) yang anda mahu tunjukkan dan dikelompokkan oleh tag ... Berapa banyak bingkai yang anda masukkan, itu ditunjukkan dalam tetingkap penyemak imbas yang sama dan mereka dipecah ...

    Apabila menggunakan bingkai, anda tidak boleh menggunakan tag supaya semua yang anda boleh lakukan adalah memaparkan lebih daripada 1 halaman web dalam tetingkap penyemak imbas ... Menambah teg akan menghentikan teg dari berfungsi

    Cara mudah untuk mengingat yang mana, iframe adalah untuk bingkai tunggal sebagai "I Frame" berbunyi seperti "Frame Bebas" /
    Tag ini tidak begitu biasa di kebanyakan laman web .. tetapi beberapa laman web masih menggunakan tag ini ...

    Langkah 15: Entiti Biasa HTML

    Dalam HTML, jika anda ingin memasukkan teks seperti © dll maka anda sering menggunakan entiti HTML untuk menunjukkan simbol-simbol supaya mereka tidak bercampur dengan tag dalam dokumen.

    Semua entiti bermula dengan & tanda ...

    < = <(Kurang daripada simbol)
    > => (Lebih besar daripada simbol)
    © = © (simbol hak cipta)
    = (Ruangan yang tidak dapat dibantah) (HTML memadamkan ruang tambahan yang anda masukkan dalam tulisan anda, jadi dalam a

    tanda jika anda mempunyai 10 ruang, hanya 1 ruang yang akan dilihat sebagai selebihnya yang dihapuskan ... jika anda mahu semua itu dilihat maka anda menambah entiti itu kepada anda

    tag dan itu akan menambah 1 ruang kekal kepada anda

    tag ...

    Terdapat 2 cara anda boleh menulis entiti, satu dengan kod aksara seperti 2 contoh pertama, dan cara lain dengan kod nombor, seperti contoh ketiga ... (Entiti nombor mempunyai "#" sebelum mereka)

    Entiti-entiti ini adalah penting jika anda mahu dokumen HTML anda memaparkan semua yang anda mahu dan tidak bercampur dsb dengan tag ...

    Langkah 16: Quote dan Blockquote Tags

    Kedua-dua tag ini digunakan untuk menunjukkan petikan ...

    The Quotation tag digunakan untuk menunjukkan petikan pendek.
    Tag sebutharga digunakan untuk menunjukkan petikan panjang

    Tag menambah petikan sebelum dan selepas kandungannya ("Kandungan")
    The Quotation tag memisahkan teks dari sekelilingnya dengan membuatnya menjadi blok dan indentinya sedikit, seperti yang kita lakukan dalam esei untuk menghalang sebut harga panjang dalam perenggan yang berbeza

    TEXT INI TELAH DIPERLUKAN BLOK-QUOTED (Ini adalah kutipan blok)
    Teg ini agak berguna kerana ia mengindentifikasikan kandungan, tetapi tag itu tidak berguna kerana kami hanya dapat menambahkan sebut harga diri tetapi ia menjadikan teks lebih teratur ...

    Langkah 17: Tajuk Laman Web dalam HTML

    Untuk perubahan, teg ini ditambahkan di bahagian dokumen, teg ini menceritakan tajuk dokumen anda, itulah yang akan muncul pada tab atau tajuk halaman halaman web anda .... lihat pada imej untuk mendapatkan pemahaman yang lebih baik.


    THIS IS THE TITLE OF THE PAGE!


    Ini bukan elemen pilihan laman web, setiap halaman web tunggal harus mempunyai tajuk atau nama fail akan ditunjukkan sebagai jubin ...

    Langkah 18: Tag Meta dalam HTML

    Ini adalah elemen kepala ...
    Ia memberikan penerangan mengenai laman web anda ke internet.




    Tag pertama adalah tag meta perihalan dan kandungan menggambarkan laman web anda ...
    Tag kedua ialah tag meta kata kunci dan kandungan memberikan kata kunci mengenai tapak web anda ...

    Terdapat tag meta lain di luar sana digunakan untuk perkara yang berbeza seperti "pengarang meta" dll tetapi ini adalah yang paling biasa ...

    NOTA: Enjin carian dan perisian peringkat laman web mencari tag meta untuk memahami apa yang laman web itu dan apa yang dikatakan oleh kateogary itu ...

    Langkah 19: CSS, Apa Itu?

    CSS seperti yang saya katakan sebelum ini bermaksud Lembaran Gaya Cascading
    Gaya-gaya ini yang kita gunakan menentukan bagaimana untuk menunjukkan dan meletakkan elemen HTML.

    Terdapat 3 cara kami boleh menggunakan gaya untuk dokumen HTML kami:
    1) helaian gaya luaran
    2) Helaian gaya dalaman
    3) gaya inline

    CSS diperkenalkan kerana HTML dibuat hanya untuk mencatat maklumat dengan tag seperti


    dan lain-lain...
    CSS sepatutnya memberikan HTML semua gaya yang diperlukan ...

    Perintah dalam CSS dipanggil "peraturan" seperti "tanda" dalam dokumen HTML ...

    Langkah 20: Sintaks dalam CSS

    Setiap peraturan CSS mempunyai 2 bahagian di dalamnya,

    1) Pemilih (Setiap peraturan hanya boleh mempunyai 1 pemilih)
    2) Perisytiharan (Setiap peraturan boleh mempunyai lebih daripada 1 deklarasi)

    Pemilih ialah tag HTML sebenar yang anda ingin gaya dan edit, jadi jika anda mahu mengubah rupa a

    tag, kemudian

    Pemilih = h1
    Perisytiharan = warna: ungu font-weight: bold
    (Pengisytiharan ini digunakan jika anda ingin membuat apa-apa yang terkandung di dalam

    tag untuk berada dalam warna ungu dan dilihat dengan berani)

    Dalam perisytiharan, bahagian pertama adalah harta, "sifat CSS" (warna, font-weight) dan bahagian kedua adalah "nilai" (ungu, tebal)

    Langkah 21: Menambah komen dalam CSS

    Sekiranya fail CSS anda mengandungi banyak peraturan, maka untuk membuat peraturan itu untuk apa yang lebih jelas, anda boleh menggunakan komen untuk menulis dalam apa sahaja yang anda mahukan dan ia tidak akan ditunjukkan atau mengganggu peraturan CSS ...

    / * komen * /

    Ini adalah bagaimana komen ditambah dalam CSS, lebih mudah daripada HTML ( )

    Anda boleh menaip apa yang dilakukan oleh beberapa peraturan jika anda tidak pasti, maka anda boleh melihatnya secara dalam talian, dan kemudian menambah komen yang mengatakan peraturan tertentu itu ...

    Langkah 22: Kaedah CSS ID dan Klausa

    Katakanlah anda ingin membuat kotak di sebelah kanan halaman anda di mana anda boleh memasukkan teks ... maka anda perlu membuat tag sendiri dan tentukannya melalui CSS agar dapat melakukannya ....

    Kami menggunakan pemilih ID dan KELAS untuk mendapatkan pekerjaan yang dilakukan untuk kami ...

    Kami menggunakannya seperti ini:

    Fail HTML


    This content goes into the box on the right hand side of the page


    This content goes into the box on the right hand side of the page




    Fail CSS

    # MYFIRSTDIVID
    {
    float:right;
    height:100px;
    width:100px;
    border: 2px solid black;
    }
    MYFIRSTDIVID
    {
    float:right;
    height:100px;
    width:100px;
    border: 2px solid black;
    }


    Untuk memasukkan id div yang anda buat, anda menggunakan tanda "#" dalam fail CSS ...
    Untuk kelas div gaya yang anda buat, anda menggunakan "." (tempoh) dalam fail CSS

    ID digunakan apabila anda membuatnya seperti keseluruhan tag yang berbeza seperti dalam contoh di atas, tetapi CLASSES digunakan apabila anda mahu perkara gaya di dalam tag lain, seperti

    Fail HTML

    This text is styled by div class...

    This text is styled by div class...



    Fail CSS

    .MYFIRSTDIVCLASS
    {
    font-style:italic;
    font-weight:bold;
    font-color:yellow;
    }


    Jadi kelas digunakan apabila anda mempunyai kelas div tertentu di dalam tag HTML lain (Tidak termasuk tag HTML, Tubuh dan Kepala)
    Unsur-unsur yang telah ditetapkan seperti (h2, p, h1, br, em, i, b dan sebagainya ...) disunting menggunakan fungsi kelas div kerana ia diulangi banyak kali dalam dokumen, dan oleh itu ia perlu kelas div ...
    ID Div digunakan apabila anda akan menggunakan elemen gaya hanya sekali dalam dokumen HTML ...

    Langkah 23: 3 Jenis Helaian Gaya ...

    Sekiranya anda menggunakan helaian gaya luaran untuk CSS, maka anda perlu memaut helaian gaya ke dokumen HTML menggunakan tag kepala







    Atribut "href" sepatutnya mempunyai nama fail fail CSS anda .... dan semua fail CSS luaran mesti berakhir dengan filetype ".css"
    Fail CSS tidak boleh mengandungi sebarang tag HTML seperti

    dan lain-lain...

    Jika anda menggunakan lembaran gaya dalaman, maka anda menuliskan berikut dalam tag kepala:



    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx



    The xxxxxxxx sepatutnya mempunyai segala-galanya yang lembaran gaya luar anda ada di dalamnya ... jadi ia harus mempunyai semua peraturan di dalamnya ...

    Jika anda menggunakan gaya inline maka anda perlu melakukan perkara berikut:

    Sekiranya anda ingin gaya

    tag dengan gaya sebaris,
    Kemudian anda perlu menambah "gaya" atribut dan semua peraturan anda masuk ke sana ...

    Ini adalah tajuk.



    NOTA: Gaya inline harus digunakan sekurang-kurangnya mungkin kerana CSS dicipta supaya tidak ada gaya dalam dokumen HTML, jadi jika terdapat gaya sebaris di mana-mana dalam dokumen anda, maka ia menjadi sisa sebagai dokumen HTML anda telah menggayakannya. ..

    Langkah 24: Gaya Teks CSS

    Terdapat beberapa gaya teks yang boleh anda peruntukkan untuk teks dalam sebarang tag ...

    Warna teks:

    bekas:
    p {color:black;)
    p {color:#000000;)


    Contoh di atas akan membuat semua teks dalam tag perenggan muncul dalam warna hitam.

    Hiasan teks:

    bekas:
    p {text-decoration:none;}
    p {text-decoration:underline;)


    Contoh pertama akan menghilangkan garis bawah, lebih-garis dan lain-lain dan membuat teks kelihatan seperti biasa ... ini berguna jika anda tidak mahu pautan mempunyai garis bawah ...
    Contoh kedua menambah garis bawah kepada sebarang teks di dalam

    Teks ini digariskan

    tag.

    Lekapan teks:

    bekas:
    p {text-indent:30px;)

    Ini akan memajukan barisan pertama

    tag oleh 30 px ...

    Transformasi Teks:

    bekas:
    p {text-transform:uppercase;)

    Ini akan menjadikan semua teks masuk

    Teks ini dalam huruf besar

    tanda huruf besar.

    Langkah 25: Gaya Font dalam CSS

    Sekiranya anda ingin mengubah font teks dalam tag, maka anda menggunakan pemilih font-family ...

    bekas:

    p {font-family:Arial;}
    p {font-family:Verdana;}


    Dalam contoh pertama, semua teks dalam tag akan berada di Arial ...
    Dalam contoh kedua, semua teks di dalam tag akan berada di Verdana ...

    Gaya fon:

    bekas:

    p {font-style:italic;}
    p {font-style:oblique;}


    Dalam contoh pertama, teks dalam tag akan berada di huruf miring ...
    Dalam contoh kedua, teks dalam tag akan menjadi serong (fon serong sangat mirip dengan fon italik)

    Saiz huruf :

    bekas:

    p {font-size:16px;}
    p {font-size:1em;}


    Dalam contoh pertama dan kedua, saiz font di dalam tanda ialah 16px ...

    1em = 16px
    "em" diperkenalkan kerana masalah semula saiz dengan Internet Explorer.

    Langkah 26: Styling Background CSS

    Latar belakang anda boleh mempunyai imej atau hanya warna sebagai latar belakang ...

    Berikan latar belakang anda warna:

    bekas:

    body {background-color:#000000;}
    body {background-color:black;}


    Kedua-dua contoh memberikan latar belakang warna hitam

    Tetapkan imej sebagai latar belakang:

    bekas:

    body {background-image:url( animals.jpg );}

    Contoh di atas akan menetapkan imej "haiwan.jpg" sebagai latar belakang dan mengulanginya sebanyak yang diperlukan untuk menyesuaikan latar belakang ...

    Langkah 27: Kajian, Ringkasan dan Kemasan

    Saya akan melampirkan 2 fail notepad yang mempunyai ringkasan CSS dan HTML, saya mencari dan mengumpulkan semua maklumat dan menyuntingnya untuk membuat ringkasan yang baik ...

    Di dalam pengajaran ini, saya membahas topik HTML 4.01 dan bukan HTML 5.0 kerana ia masih dalam pembangunan dan banyak tag masih berubah, dihapuskan dan sebagainya ... jadi saya memutuskan untuk mengajar anda HTML yang lebih stabil 4.01
    Saya meliputi CSS 3.0 kerana ia adalah versi terkini dan agak stabil ...

    Sekiranya anda mempunyai sebarang pertanyaan, kemudian siarkannya dalam komen, saya dengan senang hati akan menjelaskan keraguan anda ...
    Jika anda benar-benar akan membuat laman web, maka sebaik sahaja anda membuatnya, siarkan komen dengan kod itu :) Saya ingin melihat jenis laman web yang sejuk yang anda buat!

    Saya belajar HTML dari beberapa laman web dan di sekolah ...

    //htmldog.com/
    //www.littlewebhut.com/
    //www.w3.org/
    //www.htmlgoodies.com/

    W3C adalah Consortium World Wide Web, mereka menetapkan semua piawaian web untuk HTML dan semua tag dan nilai mereka
    w3.org adalah laman web mereka seperti yang dinyatakan di atas

    Apa selepas ini?

    • Sekarang anda tahu asas-asas HTML dan CSS, anda boleh menyelidik dalam talian untuk tutorial yang lebih maju (YouTube mempunyai beberapa tutorial yang sangat baik). Apabila anda berfikir anda telah menguasai bahasa-bahasa ini, anda boleh meneruskan dan memohon sijil ... dan maka sebaik sahaja anda disahkan, anda boleh membuat laman web anda sendiri dan menjadikan diri anda hidup ... jika anda menjadi pereka laman web .... mari memanggilnya "webmaster" ...
    • Mulakan belajar Javascript atau bahasa skrip lain untuk menjadikan laman web anda lebih interaktif
    • Mula belajar AJAX, PHP dan lain-lain ... untuk mula mengumpul maklumat dari pengguna, seperti login dan lain-lain ...
    • Pergi ke C, C ++, Java atau bahasa pengaturcaraan yang lebih keras dan maju untuk menjadi program desginer dan bukan hanya seorang pereka web.


    Lampiran

    • Rujukan Properties CSS.rtf Muat turun
    • Muat turun HTML 4.01 Summary.rtf

    Artikel Berkaitan