Hari - TML/CSS - Projek ILUGC(halaman web)

HTML:

• HTML adalah singkatan dari Hyper Text Markup Language
• HTML ialah bahasa penanda standard untuk mencipta halaman Web
• HTML menerangkan struktur halaman Web
• HTML terdiri daripada satu siri elemen
• Elemen HTML memberitahu penyemak imbas cara memaparkan kandungan
• Elemen HTML melabelkan cebisan kandungan seperti "ini adalah tajuk", "ini perenggan", "ini pautan", dll.

Rujuk- https://www.w3schools.com/Html/html_intro.asp

CSS:

• Cascading Style Sheets (CSS) ialah bahasa stylesheet yang digunakan untuk menerangkan pembentangan dokumen yang ditulis dalam HTML.
• CSS menerangkan cara elemen perlu dipaparkan pada skrin, di atas kertas, dalam pertuturan atau pada media lain.

Rujuk- https://developer.mozilla.org/en-US/docs/Web/CSS

Perbezaan antara HTML/CSS dan Javascript.

-->HTML/CSS - Halaman statik - Kandungan kekal sama setiap kali ia dimuatkan melainkan dikemas kini secara manual.
-->Javascript - Halaman dinamik - Halaman boleh bertindak balas kepada tindakan pengguna, seperti mengklik butang, menyerahkan borang atau menggerakkan tetikus.

Sintaks HTML:

<title>Page Title</title>


   <h1 id="My-First-Heading">My First Heading</h1>
   <p>My first paragraph.</p>

-->Simpan fail dengan sambungan (.html) dan klik dua kali untuk menjalankan program.

Elemen HTML:
Dalam HTML, elemen biasanya disertakan menggunakan teg pembuka dan teg penutup untuk menentukan permulaan dan penamatnya.
--> Tag Pembukaan : Menandakan permulaan elemen HTML.
--> Teg Penutup : Menandai penghujung elemen HTML dengan garis miring ke hadapan sebelum nama elemen.
Cth:

Helo, Dunia!

Teg kendiri: Teg kendiri (juga dikenali sebagai teg penutup sendiri) dalam HTML ialah elemen yang tidak memerlukan teg penutup kerana ia tidak mempunyai sebarang kandungan antara pembukaan dan penutup tag.
Ex-
- break:digunakan untuk memasukkan pemisah baris

Projek:

Menyediakan susun atur halaman web ILUGC:(https://ilugc.in/)

<kepala>
    <title>ILUGC</title>
<gaya>
.bekas{
    sempadan:1px pepejal;
    ketinggian:200%;
    lebar: 85%;
    margin:auto;
}
.header h4{
    text-transform: huruf besar;
    warna:#e22d30;
    atas sempadan:1px hijau pepejal;
    lebar: muat-kandungan;
    padding-top:10px;
}
.header{

    jidar:25px;
}


<badan>
   <div>



<p>Output:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173594590044719.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="Day - TML/CSS - Project ILUGC(web page)"></p>
<p><strong>Penjelasan:</strong></p>

<ol>
<li>
: Elemen akar dokumen HTML.</li>
<li>
: Mengandungi metadata dan sumber untuk dokumen.</li>
<li>
<tajuk>: Menetapkan tajuk halaman web yang dipaparkan pada tab penyemak imbas.</tajuk>
</li>
<li>
<gaya>: Membenamkan CSS untuk menggayakan dokumen HTML.</gaya>
</li>
</ol>

<ul>
<li><p>.bekas: Menggayakan div bekas:<br>
a) jidar: pepejal 1px;: Menambah jidar pepejal 1 piksel.<br>
b) ketinggian: 200%;: Tetapkan ketinggian kepada dua kali ganda ketinggian port pandangan.<br>
c) lebar: 85%;: Tetapkan lebar kepada 85% daripada lebar port pandangan.<br>
d) margin: auto;: Memusatkan bekas secara mendatar.</p></li>
<li>
<p>.header h4: Menggayakan </p>
<h4> elemen di dalam kelas .header:<br>
a) text-transform: huruf besar;: Menukar teks kepada huruf besar.<br>
b) warna: #e22d30;: Menetapkan warna teks kepada warna merah tertentu.<br>
c) sempadan atas: 1px hijau pepejal;: Menambah sempadan atas hijau.<br>
d) lebar: muat-kandungan;: Mengecilkan lebar elemen agar sesuai dengan kandungannya.<br>
e) padding-top: 10px;: Menambahkan 10 piksel padding di atas teks.</h4>
</li>
<li><p>.header: Menggayakan div pengepala:<br>
a) jidar: 25px;: Menambah jidar 25 piksel di sekeliling pengepala.</p></li>
</ul>

<ol>
<li>
: Mengandungi semua kandungan halaman web yang boleh dilihat.</li>
<li>
<div>: Unsur bekas untuk mengumpulkan dan menggayakan kandungan.
<li>
<h1 id="Mewakili-tajuk-utama-halaman-web">: Mewakili tajuk utama halaman web.</h1>
</li>
<li>
<h4>: Mewakili subtajuk yang kurang penting daripada <h1 id="">.</h1>
</h4>
</li>


<p><strong>Atribut:</strong><br>
Atribut memberikan maklumat tambahan tentang elemen HTML, biasanya dalam bentuk pasangan nilai nama.<br>
Cth: `</p>
<div>

<p><strong>Padding:</strong><br>
Padding ialah ruang antara kandungan elemen dan sempadannya. Ia mewujudkan jidar dalaman di sekeliling kandungan, menolak kandungan dari tepi elemen.</p>

<p><strong>Margin:</strong><br>
Margin ialah ruang di luar sempadan unsur yang memisahkannya daripada unsur lain. Ia mentakrifkan ruang luaran antara elemen, mewujudkan jarak di sekelilingnya.</p>

<p><strong>pemilih kelas dan pemilih elemen:</strong></p>

<ul>
<li>Pemilih kelas menyasarkan elemen HTML yang mempunyai atribut kelas tertentu, menggunakan noktah (.) diikuti dengan nama kelas.</li>
<li>Pemilih elemen menyasarkan elemen HTML secara langsung dengan nama tegnya</li>
</ul>


          </div>

            
        </div>
</li>
</ol>
</div></badan></gaya></kepala>

Atas ialah kandungan terperinci Hari - TML/CSS - Projek ILUGC(halaman web). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!