DeveloperBreeze

تصميم مواقع Development Tutorials, Guides & Insights

Unlock 1+ expert-curated تصميم مواقع tutorials, real-world code snippets, and modern dev strategies. From fundamentals to advanced topics, boost your تصميم مواقع skills on DeveloperBreeze.

دليل شامل لتطوير الويب: بناء موقع بسيط باستخدام HTML, CSS وJavaScript

Tutorial September 27, 2024
javascript css html

HTML هي لغة ترميز تساعدك في إنشاء الهيكل الأساسي لصفحة الويب. إليك الهيكل الأساسي لموقع ويب بسيط:

<!DOCTYPE html>
<html lang="ar">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>موقعي الشخصي</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>مرحباً بكم في موقعي</h1>
        <nav>
            <ul>
                <li><a href="#home">الرئيسية</a></li>
                <li><a href="#about">من أنا</a></li>
                <li><a href="#contact">تواصل معي</a></li>
            </ul>
        </nav>
    </header>

    <section id="home">
        <h2>مقدمة</h2>
        <p>هذا هو موقعي الشخصي حيث أشارك فيه أفكاري ومشاريعي.</p>
    </section>

    <section id="about">
        <h2>من أنا</h2>
        <p>أنا مطور ويب مهتم بتقنيات الويب الحديثة وتطوير التطبيقات.</p>
    </section>

    <section id="contact">
        <h2>تواصل معي</h2>
        <form id="contact-form">
            <label for="name">الاسم:</label>
            <input type="text" id="name" name="name" required>

            <label for="email">البريد الإلكتروني:</label>
            <input type="email" id="email" name="email" required>

            <label for="message">رسالتك:</label>
            <textarea id="message" name="message" required></textarea>

            <button type="submit">إرسال</button>
        </form>
    </section>

    <footer>
        <p>© 2024 جميع الحقوق محفوظة</p>
    </footer>

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

Read More