دورة – فنون سى اس اس arts css

18/02/201818/02/2018

دورة 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

13/02/201813/02/2018

دورة 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

05/02/2018

دورة 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

02/02/201803/02/2018

دورة 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

01/02/201802/02/2018

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

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

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

دورة 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

30/01/201801/02/2018

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

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

للبدء فى دورة لغة الهيكلة html لابد من توافر بعض المهارات والادوات والبرامج المساعدة المهارات فى البداية لابد من تعلم كيفية التعامل مع نظام التشغيل سواء كان windows أو ubuntu ولابد من وجود إرادة ودافع قوى لتعلم هذة اللغة و البدء فى مشوار التكويد وبعض البرامج المساعدة للبدء فى التكويد ومعاينة العمل

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

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

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

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

Notepad++

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

brackets

برنامج اتوم

atom

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

فيجوال ستوديو كود

visualstudio

نيد بينز

netbeans

والأن من شرح برامج التحرير والتكويد المدفوعة وهى برامج ذات قدرات و إمكانيات هائلة ومتقدمة تقوم بعض الشركات بإنتاجها مقابل المال سواء كان الدفع مرة واحدة أو شهرى أو سنوى

من هذة البرامج التى تدعم اللغة العربية والإستكمال التلقائى للكود مثل

برنامج بى اتش بى ستورم

phpstorm

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

صب لاين تيكست

sublimetext

بالنسبة للمتصفحات لابد من إستخدام أحد هذة المتصفحات الحديثة والذكية مثل

جوجل كروم

chrome

فايرفوكس

firefox

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

فنون سى اس اس
Learn web development

30/01/201801/02/2018

دورة html مقدمة introduction

دورة html مقدمة introduction

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

دورة html مقدمة introduction

الدرس الاول – مسار دورة html مقدمة introduction

الدرس الثانى – البرامج والادوات والمهارات اللازمة للبدء بالكورس

الدرس الثالث – سنتحدث عن الـ attributes داخل وسوم لغة html و عمل أو فائدة كل واحد على حسب الوسم الموجود بداخلة

الدرس الرابع – سنتحدث عن العناوين headings من h1 وحتى h6 وما أهميتها

الدرس الخامس – سنتحدث عن الفقرات paragraphs

الدرس السادس – سنتحدث عن الصور images داخل الصفحة

الدرس السابع – سنتحدث عن الروابط داخل صفحة html

الدرس الثامن – التطبيق الأول على ما سبق من بداية الدورة وحتى الدرس الخامس

دورة html مقدمة introduction

الدرس التاسع – سنتحدث عن منطقة راس الصفحة head area وما تحتويها من وسوم هامة جدا

الدرس العاشر – التعليقات داخل الصفحة comment وما هى اهميتها

الدرس الحادى عشر – سنتحدث عن خاصية عرض العناصر سواء كانت block أو inline وما الفرق بينهم

الدرس الثانى عشر – سنتحدث عن القوائم سواء المرتبة أو غير المرتبة

الدرس الثالث عشر – سنتحدث عن تنسيق النصوص text formatting

الدرس الرابع عشر – سنتحدث عن الجداول tables

الدرس الخامس عشر – سنتحدث عن تمميز العناصر بـ class او id والفرق بينهم

الدرس السادس عشر – التطبيق الثانى على ما سبق من دروس بالدورة

الدرس السابع عشر – سنتحدث عن الجزء الاول من النماذج forms

الدرس الثامن عشر – سنتحدث عن الجزء الثانى من النماذج forms

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

الدرس العشرون – التطبيق الكامل على جميع ما سبق شرحة من دروس داخل الدورة

دورة html مقدمة introduction

أن شاء الله بنهاية هذة الدورة ستتمكن من تكويد الصفحة بشكلها الأساسى حتى نبدا فى المستوى الثانى من كورس html5 وبعدها كورس css المستوى الأول ثم المستوى الثانى ثم إيطار العمل بوتستراب

فنون سى اس اس
Learn web development