5 Alətlərlə HTML5 və CSS3 ilə İnteraktiv Veb Səhifə Yaradın

Mar 23, 2026 OP

Mövzunu Açan #0

HTML5 və CSS3 ilə İnteraktiv Veb Səhifə Yaradılması

Təchizat və Alətlər
- Mətn Redaktoru: Visual Studio Code, Sublime Text və ya digər kod redaktorları.
- Browser: Google Chrome, Mozilla Firefox və ya Microsoft Edge.
- İnternet: İnternet bağlantısı.
HTML5 Nədir?
HTML5, HyperText Markup Language 5-in qısa adıdır və veb səhifələrin strukturunu yaratmaq üçün istifadə olunan bir markap dilidir. HTML5, daha yaxşı semantiq, daha yaxşı qrafiklər və daha yaxşı dəstəyi ilə əvvəlki versiyalardan fərqlənir.
CSS3 Nədir?
CSS3, Cascading Style Sheets 3-in qısa adıdır və veb səhifələrin vizual təsvirini yaratmaq üçün istifadə olunan bir stil şeydir. CSS3, daha yaxşı animasiyalar, daha yaxşı qrafiklər və daha yaxşı dəstəyi ilə əvvəlki versiyalardan fərqlənir.

İnteraktiv Veb Səhifə Yaradılması
İnteraktiv veb səhifə yaratmaq üçün aşağıdakı addımları izləyin:

HTML5 Skeleton Yaradın:

CODE

12345678910111213
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interaktiv Veb Səhifə</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

CSS3 Yaradın:

CODE

12345678910111213141516171819202122232425262728293031
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: #fff;
    padding: 1rem;
    text-align: center;
}

nav {
    background-color: #444;
    color: #fff;
    padding: 0.5rem;
    text-align: center;
}

main {
    padding: 1rem;
}

footer {
    background-color: #333;
    color: #fff;
    padding: 1rem;
    text-align: center;
}

İnteraktiv Elementlər Yaradın:

CODE

1234567891011121314151617181920212223242526
<header>
    <h1>İnteraktiv Veb Səhifə</h1>
</header>

<nav>
    <ul>
        <li><a href="#">Ana Səhifə</a></li>
        <li><a href="#">Haqqımızda</a></li>
        <li><a href="#">Xidmətlər</a></li>
        <li><a href="#">Əlaqə</a></li>
    </ul>
</nav>

<main>
    <h2>Xoş Gəlmisiniz!</h2>
    <p>Bu bir interaktiv veb səhifədir.</p>
    <button id="myButton">Mənə Basın</button>
    <p id="myParagraph"></p>
</main>

<footer>
    <p>&copy; 2023 İnteraktiv Veb Səhifə</p>
</footer>

<script src="script.js"></script>

JavaScript Yaradın:

CODE

1234
document.getElementById("myButton").addEventListener("click", function() {
    document.getElementById("myParagraph").innerHTML = "Salam, Dünya!";
});

Faylları Bağlayın:

CODE

1234567891011121314151617181920212223242526272829303132333435363738
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interaktiv Veb Səhifə</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<header>
    <h1>İnteraktiv Veb Səhifə</h1>
</header>

<nav>
    <ul>
        <li><a href="#">Ana Səhifə</a></li>
        <li><a href="#">Haqqımızda</a></li>
        <li><a href="#">Xidmətlər</a></li>
        <li><a href="#">Əlaqə</a></li>
    </ul>
</nav>

<main>
    <h2>Xoş Gəlmisiniz!</h2>
    <p>Bu bir interaktiv veb səhifədir.</p>
    <button id="myButton">Mənə Basın</button>
    <p id="myParagraph"></p>
</main>

<footer>
    <p>&copy; 2023 İnteraktiv Veb Səhifə</p>
</footer>

<script src="script.js"></script>
</body>
</html>

Xülasə
HTML5 və CSS3 ilə interaktiv veb səhifə yaratmaq üçün yuxarıdakı addımları izləyin. Bu, veb səhifələrinizə daha yaxşı semantiq, daha yaxşı qrafiklər və daha yaxşı dəstəyi əlavə edəcəkdir.

5 Alətlərlə HTML5 və CSS3 ilə İnteraktiv Veb Səhifə Yaradın

Oxşar mövzular

Məzmunu şikayət et

5 Alətlərlə HTML5 və CSS3 ilə İnteraktiv Veb Səhifə Yaradın

Qiymət ver: 5 Alətlərlə HTML5 və CSS3 ilə İnteraktiv Veb Səhifə Yaradın

Qiymətləndirənlər: 5 Alətlərlə HTML5 və CSS3 ilə İnteraktiv Veb Səhifə Yaradın

Oxşar mövzular

Məzmunu şikayət et