دورة html شرح الروابط links

دورة html شرح الروابط links

دورة html شرح الروابط links

دورة html شرح الروابط links

دورة html  شرح الروابط links

كلمنا النهاردة عن شئ لا يخلو منه اى موقع وهى الروابط أو الارتباط التشعبى

وبيتكتب وسم الرابط بالشكل دا

            <a href="https://www.artscss.com" target="_blank">artscss</a>
            

دورة html شرح الروابط links

وهو وسم له وسم فتح وغلق

وله بعض الخصائص منها

            href="https://www.artscss.com"
            

href وهو الرابط المراد الذهاب الية عند الضغط على النص

وله ثلاث حالات اولها ان يكون صفحة داخل الموقع فيكون الرابط كالتالى

            <a href="artscss.html">artscss</a>
            

والحالة الثانية ان يكون الرابط بداخل الصفحة وحينها لابد ان يكون العنصر المراد ربطة له id وعند ربطة بالنص يكون الربط بالشكل التالى

            <a href="#artscss">artscss</a>
            

والحالة الثالثة وهى رابط خارجة من اى موقع على شبكة الانترنت ويكون بالشكل التالى

            <a href="https://www.artscss.com">artscss</a>
            

ثانى خاصية يتم اعطائها لوسم الروابط هى خاصية target

            target="_blank"
            

وهى طريقة فتح الرابط سواء فى نفس الصفحة وهو الاعداد الافتراضى او اختيار _blank لفتح الرابط فى صفحة جديدة

دورة html مقدمة introduction
html links

دورة html شرح الصور images

دورة html شرح الصور images

دورة html شرح الصور images

دورة html شرح الصور images

دورة html شرح الصور images

كلمنا النهاردة عن وسم مهم جدا لا يخلو منه اى موقع او مجلة او موقع اخبارى او مدونة وهو وسم الصور images

ازاى استدعى صورة , ازاى اضيف صورة للتصميم , اية هى الخواص الخاصة بالصورة attributes

لإستدعاء أو اضافة صورة للتصميم او للصفحة نستخدم هذا الوسم

    <img src="" alt="" />

والان لشرح خصائص هذا الوسم نبدا بشرح أول سمة وهى

    src="https://www.artscss.com/logo.png"

وداخلها نقوم بكتابة رابط الصورة سؤاء على الجهاز أو موقع على شبكة الأنترنت

اذا كانت الصورة فى نفس مستوى ملف الرئيسية تكتب اسم الصورة مباشرة

اذا كانت الصورة فى مجلد يكتب اسم المجلد متبوع باسم الصورة

اذا كانت الصورة فى مستوى مجلد اعلى نستخدم .. للرجوع خطوة للخلف

ثانى سمة هى

    alt="وصف الصورة الذى يظهر  ويساهم فى الارشفة"

وهى جزء مهم جدا جدا جدا جدا فى ارشفة الصورة وصداقة محركات البحث seo

دورة html شرح الصور images

ولابد من الاهتمام بهذة السمة وعدم إهمالها لاهميتها فى الارشفة الخاصة بالصور داخل الموضوع

دورة html شرح الصور images

من الامور الهامة فى موضوع استخدام الصور بالموقع والتصميم لابد من تصغير حجم الصورة لسرعة الموقع و هو عنصر هام فى الارشفة

image optimizer and compress

الى اللقاء فى الدرس القادم وهو الحديث عن الروابط داخل الصفحة واهم السمات او الخصائص الخاصة به

دورة html مقدمة introduction
html images

دورة html شرح الفقرات paragraphs

دورة html شرح الفقرات paragraphs

دورة html شرح الفقرات paragraphs

دورة html شرح الفقرات paragraphs

دورة html شرح الفقرات paragraphs

كلمنا النهاردة عن عنصر البراجراف أو الفقرات او paragraph واتكلمنا علية فى الدروس اللى قبل كدة والنهاردة هانتعرف أكتر على شرح الوسم دا

وبيتكتب وسم الفقرة بالشكل دا

    <p>paragraphs</p>
    

افتح التاج بوسم الفتح

    <p>
    

ونكتب الفقرة بداخل الوسم وبعدين فى نهاية الفقرة نقفل الوسم بتاج القفل دا

    </p>
    

وهو جزء نصى ممكن يكون جزء من محتوى تحت العنوان الرئيسى headings أو العناوين الفرعية والثانوية

دورة html شرح الفقرات paragraphs

مهم جدا جدا جدا بعد ما نكتب النص نقفل بوسم الاغلاق عشان الكود يكون صحيح وموافق للمعايير القياسية وصداقة محركات البحث seo ولعدم مواجهة اى مشاكل

لما بتكب الفقرة داخل الوسم مهما عملت مسافات او نزلت أسطر المتصفح مش هايعترف بيها ولا هتأثر على النص عند الظهور

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>دورة html شرح الفقرات paragraphs</title>
        </head>
        <body>
            <p>
                my
                website
                name
                is
                www.artscss.com
            </p>
        </body>
    </html>
    

سيتم احتساب المسافات التى بين الكلمات فقط

ولتقسيم الفقرة على عدة اسطر نستخدم الوسم

    <br />
    

واذا نظرنا للمثال التالى سنجد ان هذا الوسم يقوم بتقسيم الفقرة الى سطرين

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>دورة html شرح الفقرات paragraphs</title>
        </head>
        <body>
            <p>
                my
                website
                name
                is
                <br />
                www.artscss.com
            </p>
        </body>
    </html>
    

اما المسافات بين الفقرات بعضها البعض سيتم شرحها فى دورة css

دورة html شرح الفقرات paragraphs

دورة html مقدمة introduction
html paragraphs

دورة html شرح العناوين headings

دورة html شرح العناوين headings

دورة html شرح العناوين headings

دورة html شرح العناوين headings

دورة html شرح العناوين headings

العناوين headings هو درسنا الرابع وهى من الوسوم المهمة جدا جدا

وهى سلاح ذو حدين لو اسئ استخدامها وتشبة الى حد كبير العناوين headings فى برنامج الورد

فعند كتابة مقالة او قصة لابد من وجود عنوان لهذا المقال او القصة ودائما ما يكون عنوان رئيسى h1 وهو اكبرها حجما وأكثرها أهمية

وهو مهم بالنسبة لمحركات البحث للتعرف على اجزاء المقال أو القصة و مجال seo وهو صدافة محركات البحث

Search Engline Optimization

محركات البحث تستعمل هذة العناوين من اجل فرسة محتويات الصفحة وبالتالى تحسين ظهور نتيجة البحث عن موقعك وتصدرها نتائج محركات البحث

وتنتهى ب h6 و يكون عنوان المقال دائما بعنوان h1 أما باقى العناوين الفرعية والثانوية يمكن استخدام من h2 وحتى h6

دورة html شرح العناوين headings

فلا نستخدمة عن تكبير كلمة فى المقال او القصة لانة عنصر من عناصر html display block

    <h1>headings h1</h1>
    <h2>headings h2</h2>
    <h3>headings h3</h3>
    <h4>headings h4</h4>
    <h5>headings h5</h5>
    <h6>headings h6</h6>
    

headings h1

headings h2

headings h3

headings h4

headings h5

headings h6

    <h1>عنوان رئيسى</h1>
    <p>فقرة</p>
    <hr>
    <h2>عنوان فرعى 1</h2>
    <p>فقرة أخرى</p>
    <hr>
    <h3>عنوان فرعى 2</h3>
    <p>فقرة أخرى</p>
    <hr>
    <h4>عنوان فرعى 3</h4>
    <p>فقرة أخرى</p>
    <hr>
    <h5>عنوان فرعى 4</h5>
    <p>فقرة أخرى</p>
    <hr>
    <h6>عنوان فرعى 5</h6>
    <p>فقرة أخرى</p>
    <hr>
    

دورة html شرح العناوين headings

دورة html مقدمة introduction
html Elements

دورة html شرح السمات attributes

دورة html شرح السمات attributes

دورة html شرح السمات attributes

فى البداية لابد من التعرف على بنية الكود داخل لغة اتش تى ام ال html syntax

دورة html شرح السمات attributes

دورة html شرح السمات attributes

تتكون الصفحة من عدة وسوم tags لكل منها عمل محدد ولها نوعان نوع لة وسم فتح و غلق مثل

    <h1>heading</h1>
    

ونوع ذاتى الغلق مثل وسم سطر جديد

    <hr />
    

وتنقسم الصفحة الى قسميين رئيسيين الأول منطقة راس الصفحة head والثانية جسم الصفحة body

دورة html شرح السمات attributes

        
    <html>
    <head>
        <title>html</title>
    </head>
    <body>
        <h1>heading</h1>
        <p>paragraph</p>
        <a href=”https://www.artscss.com” target=”_blank”>artscss</a>
    </body>
    </html>
    

القسم الاول head يحتوى على وسوم ترميز اللغة و عنوان الصفحة و ملفات css ويختص بمحركات البحث ولا يظهر محتواه للمستخدم

القسم الثانى body و يظهر ما به للمستخدم العادى وبة يكون المحتوى

ولكل وسم tage بعض الخصائص او السمات أو attributes وتختلف من وسم لاخر ولكل منها قيم و وظائف محددة

السمات دائما تكون فى وسم الفتح وتتكون من اسم السمة يتبعها = ثم القيمة ما بين دبل كوتيشن

ولو اخذنا وسم الروابط كمثال

    <a href=”https://www.artscss.com” target=”_blank”>artscss</a>
    

نجد ان به عدد 2 خاصية أو سمة

الأولى href وهى مسئولة عن تحديد رابط الموقع الذى سيتم فتحة عن الضغط على الرابط

الثانية target وهى طريقة فتح الرابط فى نفس الصفحة أو فى صفحة جديدة

دورة html شرح السمات attributes

والأن بعد أن تحدثنا عن المتطلبات البدء فى دورة html من مهارات و ادوات و برامج إن شاء الله فى الدرس القادم سنتحدث تصميم أول صفحة و الحديث عن الصفات أو السمات attributes

دورة html متطلبات الدورة البرامج والادوات والمهارات
Learn web development