تعلم لغة html : تعلم لغة html من الصفر للإحتراف

تعلم لغة html

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

اليوم اخوتي فالله سنتعلم ونبدأ في أول دروس تعلم لغة html .

فيما يلي مثال ل كود html لتسهيل لاتعلم ويمكنك ان ترجع له حتي تفهم ما اقصد ف المقاله .

<!DOCTYPE html>

<html>

<head>

    <title>Mosa Teq Head Title</title>

</head>

<body>

    <h1>My First Heading</h1>

    <p>My first paragraph.</p>

    <a href="https://www.mosateq.com/">This is a link</a>

    <"img src="mosateq.jpg" alt="https://www.mosateq.com/" width="100" height="100>

    <button>Click me</button>

    <ul>

        <li>Coffee</li>

        <li>Tea</li>

        <li>Milk</li>

    </ul>

    <ol>

        <li>Coffee</li>

        <li>Tea</li>

        <li>Milk</li>

    </ol>

</body>

</html>

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

نبدأ في تعلم html :

أوسمة html :

لغة html عبارة عن وسوم ولكل وسم وظيفة ان تعلمت هذه الوسوم ووظيفتها يمكنك ان تقول انك تعلمت لغة html .ويكتب الوسم بين علامتي < اسم الوسم > ومعظم الاوسمه تعلم ب العلامات < اسم الوسم / >

الوسم <html> :

الوسم <html> هو ذلك الوسم الذي يوضع بداخله كل الوسوم الاخري وهو الذي يحدد بداية كود html ونهاية الكود و أي شئ خارجه يتم تجاهله من قبل المتصفح و يكتب كما نرى في الصورة في اول المقال .

الوسم <head> :

هي الوسم الثاني بعد الوسم <html> ويندرج بداخله كل الوسوم المختصه بإعدادات الصفحه مثل عنوان الصفحه ووصف الصفحه واكواد المتيا داتا والمثال الاتي سيوضح مثال على ماهو بداخل الوسم

اكواد ميتا (meta)

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


<"meta charset="utf-8>

<"meta name="viewport" content="width=device-width, initial-scale=1>

<'meta http-equiv="Content-Security-Policy" content="default-src" 'self>

<"meta name="description" content="A description>

اكواد <link> :

هي اكواد توصل الي ملفات CSS الخاصه بك حتي تستخدمها في صفحة الويب خاصتك

</"link rel="stylesheet" href="yoursite/styles.css>

اكواد <script> :

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

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

وهناك العديد من الوسوم الفرعية التي تندرج تحت الوسم <head> سنعود لها لاحقا لكن الان نركز على الاساسيات الخاصة ب لغة html .

الوسم <body>:

ياتي بعد الوسم <head> الوسم <body> وهو ذلك الوسم الذي يحتوي على كل ماتعرضه الصفحة من محتوى ويندرج تحته كل الوسوم التي تكون مرئية للمستخدم ويكتب ويغلق كالأتي :

<body>

</body>

والأن سنتعرف على الوسوم الفرعية التي تندرج تحت الوسم <body> .

الوسوم <h1> , <h2> , <h3> , <h4> , <h5> :

تكتب هكذا <h1> bla bla bla ... </h1>

يكتب بداخلها نص عادي والهدف منها هي تحديد حجم النص المكتوب فيها ف <h1> هو اكبر الاحجام و <h5> هو اصغر الأحجام وتستخدم أحيانا ك مقدم للعناوين الفرعية والثانويه و الرئيسية ولها خصائص عديدة وسنتعلم الخصائص الخاصه بالوسوم لاحقا

الوسم <p> :

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

الوسم <img> :

هذا الوسم من الوسوم المهمه جدا وكثيرة الإستعمال ويستعمل لعرض الصور ويحتوي ع الخصائص اللازمة لذك مثل الخاصيه src والتي تحدد مسار الصورة المراد عرضها ويمكنك ان ترى هذا في المثال الأتي :

    <"img src="mosateq.jpg" alt="https://www.mosateq.com/" width="100" height="100>

والخاصية alt والتي يمكنك منها ان تظهر نص ما اذا حدث خطأ ولم تظهر الصورة

الوسم <div> :

ذلك الوسم من اهم واكثر الوسوم إستعمالا ووظيفته انه يوضع بداخله مجموعه من الوسوم وما يطبق عليه من خصائص او style ينطبق على كل ما بداخله

وبذلك نكون قد تحدثنا عن معظم الوسوم الأساسية الموجودة داخل html والمقالة القادمة انشاء الله تكون قد المت بكل ما تبقا من لغة html