Dasar-dasar Perancangan Web (HTML dan CSS)

Saya sedang belajar HTML dan CSS dan saya akan segera mendapatkan sertifikasi di dalamnya, dan saya pikir itu akan menjadi ide yang bagus untuk memberikan tutorial tentang bagaimana memulai merancang situs web Anda sendiri menggunakan HTML dan sedikit CSS. ..

HTML adalah singkatan dari Hyper Text Markup Language .

CSS adalah singkatan dari Cascading Style Sheets .

HTML sebenarnya digunakan untuk membuat halaman web dan konten yang dimilikinya, seperti gambar dan tulisan.

CSS digunakan untuk mendesain halaman web dan memberi tahu tulisan dan gambar berada di tempat tertentu, seperti gambar di bagian atas halaman, yang lain di tengah dll ...

"Apa pun di internet dapat dimodifikasi, dihapus atau ditambahkan hanya dengan menggunakan HTML dan CSS! Bahkan di instructables.com!"

Yang terbaik adalah ...

Yang Anda butuhkan hanyalah komputer!

Jadi mari kita mulai perjalanan kita ke mendesain web ...

Langkah 1: Apa Itu Situs Web?

Jika Anda menjelajahi web dan menemukan situs web apa pun yang menarik dan keren, dan ingin mencari tahu apa dan bagaimana pembuatannya, atau untuk mencari tahu kode HTML apa yang mereka gunakan, maka yang perlu Anda lakukan adalah,

  • Klik kanan pada area kosong di halaman web.

  • Klik lihat sumber halaman

  • Ini akan membuka jendela atau tab baru sesuai dengan pengaturan Anda yang menunjukkan kode HTML yang dijalankan situs web.


CATATAN: Beberapa situs web seperti instrabel, google, youtube dll menggunakan banyak Javascript dalam pengkodeannya, jadi jangan takut ... setelah membaca petunjuk ini, Anda akan dapat dengan mudah memahami apa itu HTML dan CSS dan tag dasar .

Langkah 2: HTML, Apa Artinya?

HTML seperti yang saya katakan sebelumnya adalah

Hyper Text Markup Language...


Segala sesuatu dalam HTML berfungsi dengan menggunakan 'Tag', Tag adalah elemen dalam dokumen HTML yang memberikan perintah pada tulisan atau gambar atau file audio atau video apa yang harus dilakukan, di mana harus ditempatkan dll di situs web ...

Dalam HTML, tag selalu memiliki "<" sebelum dan ">" setelah tag ...
ex- (Tag ini membuat teks tebal)

Semua dokumen HTML dimulai dan diakhiri dengan




Tag ini memberi tahu browser bahwa file ini adalah halaman web dan bukan hanya file teks biasa ...

Langkah 3: Apa yang Anda Butuhkan?

Untuk mulai membuat halaman web, yang Anda butuhkan adalah:

Editor kata. ..seperti notepad.

Banyak orang yang membuat situs web di luar sana menggunakan program seperti 'Dreanweaver' dan 'Microsoft Frontpage' karena mereka membuatnya lebih mudah untuk membuat situs web dan membantu dalam pengkodean.

Tetapi cara terbaik untuk mempelajari HTML adalah dengan menggunakan dasar-dasar ... Notepad dan kemudian setelah Anda mempelajari dasar-dasarnya, maka Anda dapat beralih ke program pengeditan ...


Langkah 4: Struktur Dasar dari Dokumen HTML

Semua dokumen HTML memiliki tag "Head" dan "Body" ...

Jadi semua dokumen HTML memiliki struktur yang mirip dengan ini ...

(Memulai dokumen html)
(Memulai tag kepala)
(Mengakhiri tag kepala)
(Memulai tag tubuh)
(Mengakhiri tag tubuh)
(Mengakhiri dokumen html)

CATATAN: Tag HTML tidak peka huruf besar-kecil, ini artinya tidak masalah jika Anda menulisnya dengan huruf besar atau kecil ...

Setiap tag HTML, memiliki tag pembuka dan penutup, dan konten apa pun di antara tag-tag itu, memberikan konten tersebut perintah tag ... ex: ... (Ini untuk dicetak tebal teks)
Beberapa tag HTML memiliki tag pembuka dan penutup dalam tag yang sama ... mis:
(Ini untuk memecah baris)

Apa pun yang ada di tag tubuh, langsung ditampilkan di halaman web, dan apa pun yang ada di tag kepala, mereka menentukan dan memberikan informasi tentang halaman web yang tidak terlihat ketika Anda melihat halaman di browser web.

Langkah 5: Tag Judul HTML

Di HTML ada 6 set tag yang digunakan untuk pos ...
Semua tag ini masuk dalam tag tubuh ...

Ini tajuk terbesar






Ini adalah heading terkecil


CATATAN: Sebagian besar orang membuat kesalahan dalam menggunakan tag ini untuk membuat teks lebih besar atau lebih kecil, dan itu tidak boleh dilakukan, karena mesin pencari menentukan halaman dengan pos ini untuk mencari tahu bagian halaman mana yang merupakan ... dan hanya menggunakannya untuk ukuran font tidak akan memberikan definisi yang baik untuk halaman oleh mesin pencari ...

Langkah 6: Elemen Teks (Tag) dalam HTML

Dalam HTML, ada sekitar 5 tag yang menentukan teks di halaman web.
Tag ini masuk ke bagian tubuh dokumen HTML.

Semua yang ada di sini akan ditetapkan sebagai paragraf baru



Ini menambahkan jeda baris (Seperti menekan "Enter" pada keyboard saat mengetik)

Ini menambahkan baris di mana pun ditempatkan dalam dokumen (Aturan Horisontal)
 Semua yang ada di sini akan ditampilkan seperti saat diketik ... semua spasi dan "Masuk" saat kita mengetik akan ditampilkan di laman web 


Tag yang paling umum dari ini adalah dan
tag karena digunakan di hampir semua halaman web ...
Tag pra sangat bagus jika Anda malas dan hanya ingin spasi dan masuk menjadi seperti yang Anda inginkan daripada menambahkan elemen teks lainnya, tetapi kemudian akan sulit lagi bagi browser dan mesin pencari untuk menganalisis halaman Anda ...

Langkah 7: Gaya Logis untuk Teks dalam HTML

Elemen-elemen ini masuk dalam tag body lagi saat mereka mendefinisikan teks yang ditampilkan pada halaman web ...
Ada 3 gaya logis 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 menjadi miring, tetapi sedikit lebih bengkok daripada font miring biasa ...
Tag yang kuat membuat teks tebal, tetapi juga membuatnya sedikit lebih dekat, karena jarak huruf berkurang.
Tag kode mendefinisikan kode komputer yang diperlukan untuk ditampilkan pada halaman web, ia memiliki font yang berbeda dan jarak dan ukuran font kecil ...

Langkah 8: Gaya Fisik untuk Teks dalam HTML

Hanya ada 2 gaya fisik umum yang digunakan untuk teks hari ini dalam HTML ....
Tag ini juga dimasukkan ke bagian tubuh dokumen.

This text is bold

Teks ini dicetak miring

Tag ini sangat sangat umum karena semua orang menggunakannya bahkan dalam program pengeditan teks seperti kata microsoft ...
Tag tebal membuat teks lebih tebal dan lebih luas dan sedikit lebih lama ...
Tag italic membuat teks sedikit bengkok ke kanan.

Langkah 9: Menambahkan Gambar dalam HTML

Ini adalah salah satu hal paling sederhana untuk dilakukan dalam HTML ...
Tag ini juga dimasukkan di bagian tubuh dokumen ...



Tag di atas menambahkan gambar ke halaman Anda ... dan jika Anda ingin menyelaraskannya maka yang perlu Anda lakukan adalah menambahkan:

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


Tambahkan salah satu dari mereka tepat setelah Anda menutup tanda kutip dan sebelum tanda lebih besar dari

Catatan: Gambar yang Anda tambahkan harus berada di folder yang sama dengan dokumen HTML Anda, atau Anda perlu menentukan path file ke gambar ...

Langkah 10: Daftar dalam HTML

Di HTML, ada 2 jenis daftar:
1) Bulleted atau unordered
2) Bernomor atau dipesan

Ini lagi masuk bagian tubuh dokumen.

Setiap item dalam daftar ditentukan dengan

  • Daftar barang
  • menandai.


      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 adalah daftar yang diurutkan yang menunjukkan daftar dengan angka dari 1, 2, 3 dan seterusnya ...
    Yang kedua adalah daftar tidak berurutan yang menunjukkan daftar dengan poin-poin ...

    Langkah 11: Tautan dalam HTML

    Di HTML, ada 3 jenis tautan utama,
    1) Tautan biasa, untuk menautkan ke situs web daring yang berbeda atau menautkan ke laman web lain di komputer Anda.
    2) Tautan gambar, untuk menggunakan gambar itu sendiri sebagai tautan yang dapat diklik.
    3) Tautan mailto, untuk membuat tautan yang membuka klien email.

    Tag ini juga masuk ke tag tubuh dokumen

    Tautan biasa:
    Jump to Google

    Tautan gambar:



    Tautan mailto:
    Send email

    mendefinisikan jangkar, digunakan di semua tautan dan tautan sebaris karena membuat jangkar di mana pun ia dimasukkan dalam kode.
    Properti "href" / dalam tag memberi tahu jangkar untuk menautkan ke situs web mana atau jangkar lain itu sendiri dalam beberapa kasus ...

    Langkah 12: Anchor Linking dalam HTML

    Pernahkah Anda melihat situs web keren yang memiliki indeks yang menghubungkan ke berbagai bagian halaman mereka? suka Wikipedia?

    //en.wikipedia.org/wiki/HTML (Lihat bagian konten)

    Untuk membuatnya, kami menggunakan tag jangkar dan menautkan 2 tag jangkar bersama,
    Tag ini juga digunakan di bagian tubuh dokumen ...

    Step 5
    Jump to step 5


    Tag pertama memberi tahu bahwa teks Langkah 5 berlabuh ke dokumen dengan nama "Langkah 5"
    Tag kedua adalah tag tautan yang membuat teks "Lompat ke langkah 5" tautan yang menautkan ke jangkar Langkah 5 yang kami buat sebelumnya ...

    Menggunakan tag ini mutlak diperlukan untuk situs web yang menyatakan banyak informasi seperti Wikipedia :)

    Langkah 13: Tabel dalam HTML

    Tabel adalah bagian utama jika situs web Anda didasarkan pada statistik dan perincian .... tabelnya terlihat seperti tabel Microsoft Excel tetapi Anda dapat membuatnya terlihat lebih menarik dengan mengeditnya dalam CSS yang akan kami bahas nanti dalam petunjuk ini ...

    Tabel terdiri dari 3 hal ... atau lebih seperti 3 tag ...



    Semua tag ini juga masuk ke bagian tubuh dokumen ...

    Tag tabel memberi tahu dokumen di mana tabel dimulai dan berakhir
    Tag tr menambahkan baris ke tabel (Table Row)
    Tag td menambahkan sel ke tabel (Deskripsi Tabel)

    Lihat gambar untuk mendapatkan pemahaman yang lebih baik tentang cara kerja tabel ... karena tabel adalah salah satu bagian tersulit dalam HTML ...

    Langkah 14: Bingkai dan Bingkai dalam HTML

    Frame dan IFrames adalah hal yang sama, karena mereka digunakan untuk menampilkan halaman web dalam kotak seperti hal di dalam halaman web lain ....

    IFrame digunakan ketika Anda hanya memiliki satu halaman web yang ingin Anda tampilkan di halaman web Anda dalam kotak kecil ...


    Ini akan menampilkan www.google.com dalam bingkai kecil di situs web Anda ...












    Frame selalu ada di dalam dan tag sebagai tag ini mengelompokkan frame ... melakukan hal yang sama persis tetapi mereka digunakan ketika Anda memiliki lebih dari 1 frame (halaman web) yang ingin Anda tampilkan dan dikelompokkan berdasarkan tag ... Berapa banyak frame yang Anda masukkan, yang ditampilkan di jendela browser yang sama dan mereka terbagi rata ...

    Saat menggunakan bingkai, Anda tidak dapat menggunakan tag sehingga yang dapat Anda lakukan adalah menampilkan lebih dari 1 halaman web di jendela browser ... Menambahkan tag akan menghentikan tag agar tidak berfungsi.

    Cara mudah untuk mengingat yang mana, iframe adalah untuk frame tunggal karena "I Frame" terdengar seperti "Independent Frame" /
    Tag ini tidak terlalu umum di sebagian besar situs web..tapi beberapa situs web masih menggunakan tag ini ...

    Langkah 15: Entitas Umum HTML

    Dalam HTML, jika Anda ingin menyisipkan teks seperti © dll, Anda sering menggunakan entitas HTML untuk menunjukkan simbol sehingga mereka tidak tercampur dengan tag dalam dokumen.

    Semua entitas dimulai dengan tanda & ...

    < = <(Kurang dari simbol)
    > => (Lebih besar dari simbol)
    © = © (Simbol hak cipta)
    = (Non-Breakable Space) (HTML menghapus semua spasi tambahan yang Anda tambahkan dalam tulisan Anda, jadi dalam a

    tag jika Anda memiliki 10 spasi, hanya 1 spasi yang akan dilihat ketika sisanya dihapus ... jika Anda ingin semua itu dilihat maka Anda menambahkan entitas ke

    tag dan itu akan menambah 1 ruang permanen untuk Anda

    menandai...

    Ada 2 cara Anda dapat menulis entitas, satu dengan kode karakter seperti 2 contoh pertama, dan cara lainnya adalah dengan kode angka, seperti contoh ketiga ... (Jumlah entitas memiliki "#" sebelum mereka)

    Entitas-entitas ini sangat penting jika Anda ingin dokumen HTML Anda menampilkan semuanya seperti yang Anda inginkan dan tidak mencampur dll dengan tag ...

    Langkah 16: Kutipan dan Blokir Tag

    Kedua tag ini digunakan untuk menampilkan kutipan ...

    Itu Quotation tag digunakan untuk menampilkan kutipan pendek.
    Tag Kutipan digunakan untuk menampilkan kutipan panjang

    Tag menambahkan tanda kutip sebelum dan sesudah isinya ("Konten")
    Itu Quotation tag memisahkan teks dari sekitarnya dengan membuatnya menjadi blok dan sedikit inden, seperti yang kita lakukan dalam esai untuk memblokir kutipan panjang dalam paragraf yang berbeda

    TEKS INI TELAH DICETAK (BLOK-QUOTED)
    Tag ini cukup berguna karena indentasi konten, tetapi tag itu tidak berguna karena kami hanya dapat menambahkan tanda kutip sendiri tetapi itu membuat teks lebih terorganisir ...

    Langkah 17: Beri Judul Halaman Web dalam HTML

    Untuk perubahan, tag ini ditambahkan di bagian dokumen, tag ini memberi tahu apa judul dokumen Anda, itulah yang akan muncul pada tab atau judul halaman halaman web Anda .... lihat gambar-gambarnya untuk mendapatkan pemahaman yang lebih baik.


    THIS IS THE TITLE OF THE PAGE!


    Ini bukan elemen opsional dari halaman web, setiap halaman web harus memiliki judul atau nama file akan ditampilkan sebagai ubin ...

    Langkah 18: Meta Tag dalam HTML

    Ini adalah elemen kepala lain ...
    Ini memberikan deskripsi tentang apa situs Anda ke internet.




    Tag pertama adalah tag meta deskripsi dan konten menggambarkan situs web Anda ...
    Tag kedua adalah tag meta kata kunci dan kontennya memberikan kata kunci tentang situs web Anda ...

    Ada meta tag lain di luar sana yang digunakan untuk hal-hal yang berbeda seperti "penulis meta" dll tetapi ini adalah yang paling umum ...

    CATATAN: Mesin pencari dan perangkat lunak peringkat situs web mencari tag meta untuk memahami apa yang dimaksud dengan situs web dan apa yang kateoger miliknya ...

    Langkah 19: CSS, Apa Artinya?

    CSS seperti yang saya katakan sebelumnya adalah singkatan dari Cascading Style Sheets
    Gaya-gaya ini yang kami terapkan memutuskan bagaimana menampilkan dan menempatkan elemen HTML.

    Ada 3 cara kami dapat menerapkan gaya ke dokumen HTML kami:
    1) Lembar gaya eksternal
    2) lembar gaya internal
    3) Gaya sebaris

    CSS diperkenalkan karena HTML dibuat hanya untuk mencatat informasi dengan tag seperti


    dll ...
    CSS seharusnya memberikan HTML semua gaya yang dibutuhkan ...

    Perintah dalam CSS disebut "aturan" seperti "tag" dalam dokumen HTML ...

    Langkah 20: Sintaks dalam CSS

    Setiap aturan CSS memiliki 2 bagian di dalamnya,

    1) Selector (Setiap aturan hanya dapat memiliki 1 selector)
    2) Deklarasi (Setiap aturan dapat memiliki lebih dari 1 deklarasi)

    Selector adalah tag HTML aktual yang ingin Anda gaya dan edit, jadi jika Anda ingin mengubah tampilan a

    tag, lalu

    Selector = h1
    Deklarasi = warna: ungu font-weight: bold
    (Pernyataan ini digunakan jika Anda ingin membuat apa pun yang terkandung dalam

    beri warna ungu dan terlihat tebal)

    Dalam deklarasi, bagian pertama adalah properti, "properti CSS" (warna, font-weight) dan bagian kedua adalah "nilai" (ungu, tebal)

    Langkah 21: Menambahkan Komentar dalam CSS

    Jika file CSS Anda berisi banyak aturan, maka untuk membuat aturan mana yang lebih jelas, Anda dapat menggunakan komentar untuk menulis apa pun yang Anda inginkan dan itu tidak akan ditampilkan atau mengganggu aturan CSS ...

    /*komentar*/

    Ini adalah bagaimana komentar ditambahkan dalam CSS, jauh lebih sederhana daripada HTML ( )

    Anda dapat mengetik apa yang dilakukan beberapa aturan jika Anda tidak yakin, maka Anda dapat mencarinya secara daring, lalu menambahkan komentar yang mengatakan apa yang dilakukan aturan tertentu ...

    Langkah 22: ID CSS dan Aturan CLASS

    Katakanlah Anda ingin membuat kotak di sebelah kanan halaman tempat Anda dapat menyisipkan teks ... maka Anda perlu membuat tag sendiri dan menetapkannya melalui CSS agar dapat melakukannya ....

    Kami menggunakan pemilih ID dan CLASS untuk menyelesaikan pekerjaan bagi kami ...

    Kami menggunakannya seperti ini:

    File 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




    File CSS

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


    Untuk gaya id id yang Anda buat, Anda menggunakan tanda "#" di file CSS ...
    Untuk gaya kelas div yang Anda buat, Anda menggunakan "." (titik) dalam file CSS

    ID digunakan ketika Anda membuatnya seperti tag yang sama sekali berbeda seperti pada contoh di atas, tetapi CLASSES digunakan ketika Anda ingin mendesain sesuatu di dalam tag lain, seperti

    File HTML

    This text is styled by div class...

    This text is styled by div class...



    File CSS

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


    Jadi kelas digunakan ketika Anda memiliki kelas div tertentu di dalam tag HTML lain (Tidak termasuk tag HTML, Tubuh dan Kepala)
    Elemen-elemen yang telah ditentukan sebelumnya seperti (h2, p, h1, br, em, i, b dll ...) diedit menggunakan fungsi kelas div karena mereka diulang berkali-kali dalam dokumen, dan oleh karena itu harus menjadi kelas div ...
    ID Div digunakan ketika Anda akan menggunakan elemen gaya hanya sekali dalam dokumen HTML ...

    Langkah 23: 3 Jenis Lembar Gaya ...

    Jika Anda menggunakan style sheet eksternal untuk CSS, maka Anda perlu menautkan style sheet ke dokumen HTML di tag kepala menggunakan







    Atribut "href" harus memiliki nama file file CSS Anda .... dan semua file CSS eksternal harus diakhiri dengan tipe file ".css"
    File CSS tidak boleh mengandung tag HTML apa pun

    dll ...

    Jika Anda menggunakan style sheet internal, maka Anda menulis yang berikut di tag kepala:



    xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx



    Xxxxxxxx harus memiliki semua yang ada di lembar gaya eksternal Anda ... jadi harus memiliki semua aturan di dalamnya ...

    Jika Anda menggunakan gaya sebaris maka Anda harus melakukan hal berikut:

    Jika Anda ingin gaya

    tag dengan gaya inline,
    Maka Anda perlu menambahkan atribut "style" dan semua aturan Anda masuk ke sana ...

    Ini tajuk.



    CATATAN: Gaya sebaris harus digunakan sesedikit mungkin karena CSS dibuat sehingga tidak ada gaya dalam dokumen HTML, jadi jika ada gaya sebaris di mana-mana dalam dokumen Anda, maka itu sia-sia karena gaya dokumen HTML Anda memiliki gaya di dalamnya. ..

    Langkah 24: Gaya Teks CSS

    Ada beberapa gaya teks yang dapat Anda alokasikan untuk teks dalam tag apa pun ...

    Warna teks:

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


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

    Dekorasi teks:

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


    Contoh pertama akan menghapus garis bawah, garis, dll, dan membuat teks muncul secara normal ... ini berguna jika Anda tidak ingin tautan memiliki garis bawah ...
    Contoh kedua menambahkan garis bawah ke teks apa pun di

    Teks ini digarisbawahi

    tag.

    Lekukan teks:

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

    Ini akan membuat indentasi baris pertama dari

    tag dengan 30 px ...

    Transformasi Teks:

    ex:
    p {text-transform:uppercase;)

    Ini akan membuat semua teks masuk

    Teks ini dalam huruf besar

    tag huruf besar.

    Langkah 25: Gaya Font di CSS

    Jika Anda ingin mengubah font teks dalam tag, maka Anda menggunakan pemilih font-family ...

    ex:

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


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

    Gaya font:

    ex:

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


    Pada contoh pertama, teks dalam tag akan dicetak miring ...
    Dalam contoh kedua, teks dalam tag akan miring (font miring sangat mirip dengan font miring)

    Ukuran huruf :

    ex:

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


    Dalam contoh pertama dan kedua, ukuran font di tag berukuran 16px ...

    1em = 16px
    "em" diperkenalkan karena masalah pengubahan ukuran dengan Internet Explorer.

    Langkah 26: Styling Latar Belakang CSS

    Latar belakang Anda dapat memiliki gambar atau hanya warna sebagai latar belakang ...

    Berikan warna pada latar belakang Anda:

    ex:

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


    Kedua contoh memberi warna hitam pada latar belakang Anda

    Tetapkan gambar sebagai latar belakang:

    ex:

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

    Contoh di atas akan menetapkan gambar "animals.jpg" sebagai latar belakang dan ulangi sebanyak yang diperlukan agar sesuai dengan latar belakang ...

    Langkah 27: Tinjau, Ringkasan, dan Menyelesaikan

    Saya akan melampirkan 2 file notepad yang memiliki ringkasan CSS dan HTML, saya mencari dan mengumpulkan semua informasi dan mengeditnya untuk membuat ringkasan yang baik ...

    Dalam instruksi ini, saya membahas topik HTML 4.01 dan bukan HTML 5.0 karena masih dalam pengembangan dan banyak tag yang masih diubah, dihapus dll ... jadi saya memutuskan untuk mengajarkan Anda tentang HTML 4.01 yang lebih stabil.
    Saya membahas CSS 3.0 karena ini adalah versi terbaru dan cukup stabil ...

    Jika Anda memiliki pertanyaan, kemudian mempostingnya di komentar, saya akan dengan senang hati menjelaskan keraguan Anda ...
    Jika Anda benar-benar akan membuat situs web, maka setelah Anda membuatnya, kirim komentar dengan kode :) Saya ingin melihat jenis situs web keren yang Anda buat!

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

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

    W3C adalah World Wide Web Consortium, mereka menetapkan semua standar web untuk HTML dan semua tag serta nilainya
    w3.org adalah situs web mereka sebagaimana disebutkan di atas

    Apa selanjutnya?

    • Sekarang setelah Anda mengetahui dasar-dasar HTML dan CSS, Anda dapat melakukan riset online untuk tutorial yang lebih maju (YouTube memiliki beberapa tutorial yang sangat bagus). Setelah Anda pikir Anda telah menguasai bahasa-bahasa ini, Anda dapat melanjutkan dan mendaftar untuk sertifikasi ... dan kemudian setelah Anda disertifikasi, Anda dapat membuat situs web sendiri dan mencari nafkah ... jika Anda menjadi perancang situs web .... sebut saja "webmaster" ...
    • Mulai belajar Javascript atau bahasa skrip lain untuk membuat situs web Anda lebih interaktif
    • Mulai belajar AJAX, PHP dll ... untuk mulai mengumpulkan informasi dari pengguna, seperti login dll ...
    • Gunakan C, C ++, Java atau bahasa pemrograman lain yang lebih sulit dan canggih untuk menjadi program desginer dan bukan hanya perancang web.


    Lampiran

    • CSS Properties Reference.rtf Unduh
    • Unduh HTML 4.01 Summary.rtf

    Artikel Terkait