DeveloperBreeze

Html Programming Tutorials, Guides & Best Practices

Explore 5+ expertly crafted html tutorials, components, and code examples. Stay productive and build faster with proven implementation strategies and design patterns from 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