تصميم المواقع على شبكة الويب باستخدام لغة html
تعتبر لغة html من اقدم لغات البرمجه واسهلها ان صح التعبير وتسمى لغة النص الفائق hyper text markup حيث انها لغة تستخدم فى تصميم وانشاء الصفحات التى تكون فى النهاية صفحات الويب ومواقع الانترنت وتعتبر هى اللغة الاكثر والاوسع انتشارا بين باقى اللغات كما ذكرنا لسهولتها ومرونتها فى التعامل
لغة html هى بالاساس تعطى هيكلا لصفحات الويب وتعطى وصفا لمتصفح الانترنت حتى يتمكن من عرض محتوياته
فهى من تعطى الاوامر للمتصفح بان هذا هو العنوان الرئيسى وتلك هى الفقرة وما الى ذلك
وطريقة الكتابة بها تكون عن طريق الوسوم tags لاصدار الاوامر والتعليمات للمتصفح وتكون الوسوم التى توضع بين علامتى اكبر من > واصغر من < والى هنا انتهت المقدمة وبسم الله نبدأ الدروس
الدرس الاول : العناصر elements التى تتكون منها صفحة الويب
اذا نظرنا للعناصر الموجوده فى هذه الصورة المدرجه كمثال نجد ان تكوين هذه الصفحه عبارة عن مجموعه من العناصر تبدأ بوسم للفتح وتنهى بوسم للاغلاق فى كل فقره
حيث ان الوسم هى اللاعب الاساسى هنا من اجل اعطاء المعلومات عما بداخل الوسم
وهنا نتكلم عن العتاصر الموجوده بهذه الصفه والمكونه لها
- تبدأ بوسم الفتح <html> ثم الامر الذى بالداخل وينتهى بالوسم </html> وسم الاغلاق ونطلق هنا على الامر الموجود بالداخل كود html
- الوسم <body> ووسم الاغلاق له </body> وما بينهما هو جسم او محتوى الصفحه والذى يظهر فى المتصفح
- الوسم <h1> و </h1> وما بداخلهم هو العنوان الاساسى او الرئيسى للصفحه
- الوسم <h2> و </h2> وما بينهما هو العنوان الثانوى
- وسم اغلاق جسم او محتوى الصفحه </body> والذى ذكرناه فى النقطه الثانية وهو يشير الى نهاية ما يتوجب على المتصفح اظهارة لقارىء الصفحه
- وسم </html> وهو نهاية ما ذكرناه فى النقطه الاولى وهو كود html
والان مع الشرح التفصيلى للعناصر ( الوسوم ) html tags
وسم الفتح opening tag
هنا يكون فى بداية الوسم ( اصغر من ) من الجهة اليسرى - تدل P هنا على فقرة paragraph ( ثم فى النهاية رمز الانهاء ( اكبر من ) .
وسم الغلق Closing Tag
يبدأ برمز أصغر من يليه سلاش ثم الحرف ثم رمز أكبر من.
الفرق هنا بين وسم الفتح ووسم الغلق هو السلاش الذى يضاف لوسم الغلق
الخصائص attributes وهى التى تشير لموجود معلومات عن العناصر
وهنا نعرفكم بان الخصائص هى المسئولة عن تقديم المعلومات الاضافية عن العناصر الوسوم وهيى تكون عبارة عن عنصرين
الإسم Name
القيمة Value
مثال:
هنا قمنا باضافة ميزة اللغه العربية للفقرة P . وتسمى هذه الخاصية lang اى اللغة وقيمتها Ar-ar
أهم الوسوم المستعملة في صفحة html
Body
تقوم بوضع جميع العناصر التي يظهرها المتصفح مثل الصور، النصوص...
Title
عنوان صفحة الويب والذي يظهر في الشريط الأفقي للمتصفح
Head
يحتوي على مجموعة من الروابط والمعلومات الخاصة بالصفحة مثل اللغة (عربية، انجليزية).
كود لمثال صفحة ويب وعناصرها:
<div class="codeview"> <html>
</div>
<head>
<title></title>
</head>
<body>
</body>
</html>
إنشاء صفحة ويب html وتجربتها
إنشاء صفحة ويب يمر عبر الخظوات التالية:
- فتح أداة تعديل النصوص، في حالتي أنا استعمل برنامج نوتباد++ Notepa
- كتابة نص html
- حفظ بصيغة html
- فتح الملف مع متصفح لمشاهدته
كيف تعرف اللغة المستعملة في بناء أية صفحة ويب
بفتح الصفحة التي أنشأناها، يكفي النقر على يمين فأرة الحاسوب ثم إظهار الكود
يمكنكم معرفة كود تصميم موقع جوجل بنفس الطريقة:
`
الكود
كلمات بحثية : html , لغة , برمجة , تصميم , انشاء , الانترنت , صفحات , موقع , الكترونى , متصفح , الوامر , الوسوم , tags , elements , العناصر , الخصائص , head , title , body , كود , code , ويب 2018
الى اللقاء فى الدرس الثانى باذن الله قريبا ....
مواضيع ذات صله
للمبتدئين : دليلك للتعرف على لغة بايثون python
مواضيع ذات صله
للمبتدئين : دليلك للتعرف على لغة بايثون python
طريقة التحكم في الصور بلغة css
