1-لغة تصميم المواقع ال (HTML):
كلمة HTML تعد اختصارًا للحروف الأولى باللغة الانجليزية لجملة
"Hyper Text Markup Language"
وتعنى اللغة القادرة على توصيف النص بحيوية، أو لغة التوصيف الحيوي للنص. وهي عبارة عن كود أو لغة تستخدم في صناعة المواقع الإلكترونية. قد يبدو أنه أمر شاق إذا لم تجرب كتابة الأكواد (البرمجة) من قبل، لكن كل ما تحتاجه للتجربة هو برنامج تحرير نصوص عادي، ومتصفح انترنت. ويمكنك البرمجة علي هاتفك الجوال ايضا باستخدام محررات اكواد للجوال،
الاكواد او الوسوم </> <>
لا تظهر تلك الوسوم في صفحة الويب مثل النصوص العادية. ولكن دورها الرئيسي هو القيام بإخبار متصفح الانترنت بكيفية إظهار صفحة الويب ومحتواها. "الوسم الإفتتاحي start tag" يحتوى على التعليمات. على سبيل المثال، قد يخبر متصفح الانترنت بإظهار النصوص بلون أو حجم معين. تحتاج أيضًا " الوسم الختامي end tag " لإخبار المتصفح بالحد الذي ينتهى عنده تطبيق الأمر. في المثال التالي، النص بين الوسم الافتتاحي والختامي سيكون عريضًا Bold. يتم كتابة كلا الوسمين في أقواس زاوية < > لكن يتم إضافة شرطة مائلة slash بعد القوس الأول في الوسم الختامي < />.
قم بكتابة الوسم الإفتتاحي بين قوسي زاوية: <يُكتب وسم البداية هنا>
قم بكتابة الوسم الختامي في قوسي زاوية، مع إضافة شرطة مائلة بعد القوس الأول: </يكتب وسم النهاية هنا >
واصل القراءة من أجل تعلم كيفية كتابة وسم وصفي توظيفي Functional Markup Tag. في الخطوة التالية كل ما تحتاج معرفته هو تذكر أن الشكل الأساسي يكون مكتوب : < > و </ >
في بعض المواد التعليمية للغة HTML يتم الإشارة إلى الوسوم بوصفها " عناصر " والنص بين الوسم/ العنصر الافتتاحي والوسم/العنصر الختامي يتم وصفه بـ " محتوى العنصر".
</غلق الكود> محتوي الكود <فتح الكود>
نموذج لصفحة html :
<!DOCTYPE html> نوع اللغةوتعريف الصفحة
<html> كود بداية اللغة
<head> الراس
<meta charset="UTF-8"> معرف اللغه
المحتوي في عمليه البحث
<"meta name="viewport" content="hello>
رابط صفحات اللغات
<"link rel="stylecheet" herf="style.css or java.js>
<title></title> عنوان الصفحة
<style></style> css كود لغة ال
<script></script> java كود لغة ال
</head>
<body> الجسد
<div> حاوية كبير
<marquee direction=""></marquee>
شيريط الاخبار يكتب بداخله النص
-اكواد النصوص:
<h1 ></h1> عنوان
<p></p> برجراف
تنسيقات للنصوص..
;#128512& (12850 الي 1900) ايموشن
<ins></ins> خط تحت الكلام
<del></del> شطب الكلام
<sup></sup> وضع اس
<i></i> كلام مائل
<mark></mark> علامة
<b></b> خط عريض
<q></q> علامات تنصيص
< ""=abbr title > عنوان للكلام
<hr> خط تحت الفقرات
<br> فواصل
القوائم:
<ul > قوائم منقطة
<li></li>
</ul>
<ol> قوائم مرقمة
<li></li>
</ol>
<dl>قوائم بدون خصائص
<dt>
<dd></dd>
</dt>
</dl>
<table> الجدول
<tr>
<td colspan="4"></td>
<th rowspan="2"></th>
</tr>
</table>
<div/>
<div>
اكواد الوسائط:
<""=img src> صورة
vedio src="" > </vedio>
( controls ="controls or"autoplay) فيديو
<audio src="" ></audio>(preload) صوت
<a href=""></a> رابط
<iframe><\iframe> رالط لوضع موقع بالصفحة
</div>
<form>
<fieldset> ملف
<legend></legend> عنوان ملف
<label></label> عنوان مدخلات
اكواد مدخلات:
<""=input type="text" placeholder> مدخل نص
<"input type="button>زر
<"input type="checkbox>اختيار
<"input type="color > اختيار لون
<input type="date> التاريخ
<"input type="datetime-local>التاريخ والوقت المحلي
<"input type="email>ايميل
<"input type="file> ملف
<"input type="hidden>
<"input type="image>صور
<"input type="month> تقويم شهري
<"input type="number> مدخل ارقام
<"input type="password> باسورذ
<"input type="radio> اختيار متعدد
<"input type="range> ذياده ونقص
<"input type="reset> اعادة ضبط
<"input type="search> بحث
<"input type="submit> ارسال
<"input type="tel>
<"input type="text> نص
<"input type="time> الساعه
<"input type="url> رابط
<"input type="week> تقويم اسبوع
<textatea ></textatea>مدخل رساله
<select> اختيار
<option></option>
</select>
<button></button>زر
</fieldset>
</form>
<section> حاوية مجموعه
<template></template>قالب
<" "import from> استيراد
<export default > تصدير
</section>
(copyright ©:..®:..) حقوق النشر
<script></script> javaكود ال
<center> وضع المحتوي بالمنتصف</center>
</body>
</html>
____
-خصائص تكتب بجانب الكود:
استخدم في التسمية
" "=class
" "=id
مثل ال class
" "=type
تحديد نوع الكود
اعطاء،اسم في مساحة الندخل" "=placeholder
" "= value
قيمة للكود
" " =name
تسميه
" "=src
استدعاء روابط
________________________
تخطيط الصفحة:
<header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<details>hello</details>
<footer></footer>
</header>
___________________
كود او وسم html :
يبدًا أي ملف HTML بوسم <html> وينتهى بوسم </html>. ويكون الهدف من هذا إخبار المتصفح بأن كل المذكور بين الوسمين مكتوب بلغة HTML. لذلك قم بإضافة هذين الوسمين إلى ملفك.
تعبئة قسم <head> الخاص بالملف. في المسافة بين <html> و </html> قم بكتابة <head> ابتدائي، و </head> ختامي. اترك لنفسك مساحة أيضًا للكتابة بينهما. كل المكتوب بينهما لن يظهر على صفحة الويب نفسها. بل يعمل علي خصائص الصفحة.
في المسافة بين <head> و </head>؛ قم بكتابة <title> و </title>
في المسافة بين <title> و </title>، قم بكتابة عنوان للصفحة ويظهر هذا العنوان في المتصفح (لا يظهر العنون في محررات الاكواد للجوال) "
صنع قسم <body>. بقية ما يلى من نقاط في هذا الملف التجريبي للمبتدئين سيتم كتابته في قسم body، أو جسد الصفحة، التي تظهر كل محتوياته بشكل طبيعي على صفحة الويب. بعد الوسم الختامي </head>، وقبل وسم </html> قم بكتابة <body> و </body>. الآن من المفترض أن يكون لديك ملف مكتوب كما يلى (ومثل الصورة ) تمامًا. (تجنب نقاط الترقيم)
<html>
<head>
<title>How to Learn HTML - wikiHow</title>
</head>
<body>
</body>
</html>
__________________
اكواد النصوص:
إضافة النصوص بأنماط مختلفة. الآن حان وقت كتابة شيء تقدر على رؤيته في المتصفح مباشرة. كل ما ستقوم بكتابته في قسم body بين الوسم الإفتتاحي والوسم الختامي له سوف يظهر بمجرد حفظك لملف HTML وإعادة تحميل الصفحة بواسطة المتصفح. لا تكتب أي شيء بين أقواس الزاوية < أو >. حيث سيفهمها المتصفح بوصفها تعليمات وأوامر ضمن لغة HTML وليست نصوص تلقائية من المفترض ظهورها في صفحة الويب. جرب كتابة Hello world! أو أي شيء آخر ، وأضف حوله الأكواد والأوامر التالية، وراقب ما يحدث:
قم بتقسيم النص الخاص بك إلى فقرات. إذا كنت ترغب في كتابة خطوط متعددة في ملف HTML الخاص بك، فستلاحظ أن فواصل الأسطر لا تظهر في المتصفح. لذلك عليك كتابة أوامرها بنفسك:
<p> الوسم أو الأمر التالي يفصل بين السطور </p>
الوسم التالي يتم كتابته بعد الجملة المطلوب إضافة سطر فاصل بعدها <br>أو قبل الجملة في حالة الرغبة في إضافة سطر فاصل قبلها
الأمر التالي هو أول كود تستخدمه لا يحتاج إلى وسم ختامي . وتسمى هذه الوسوم بالأوسام الفارغة "empty tags." اقرا اكواد النصوص السابقة...
كيفية صنع قائمة في HTML. هناك العديد من الطرق المختلفة لكتابة قائمة في صفحة الويب الخاصة بك. جرب الأكواد التالية لتحديد ما يناسبك منهم. لاحظ أن زوج واحد من الوسوم / العلامات يتم كتابته حول القائمة كلها ( مثل <ul> و </ul> الخاص بصناعة القوائم الغير مرقمة ) بينما العناصر الفردية في القائمة تكون محاطة بزوج من الوسوم مثل <li> و </li>
استخدم الكود التالي لصناعة قائمة نقطية :
<ul><li>العنصر الأول </li><li>العنصر الثاني </li><li>العنصر الثالث </li></ul>
أو هذا الكود للقائمة المرقمة :
<ol><li>العنصر الأول </li><li>العنصر الثاني </li><li>العنصر الثالث </li></ol>
أو هذا الكود لصناعة قائمة تعريفات :
<dl><dt>القهوة </dt><dd>-مشروب ساخن </dd><dt>الحليب </dt><dd>- مشروب بارد</dd></dl>
تجميل الصفحة عن طريق إضافة " فواصل أسطر " و " خطوط أفقية " و " بعض الصور ". الآن حان وقت تجربة إضافة بعض العناصر الآخرى جنبًا إلى جنب مع النصوص. جرب الأكواد التالية للقيام بذلك. سوف تحتاج استخدام خدمة استضافة إلكترونية للصور حتى تمتلك URL تقدر على ربطه بأمر إضافة الصورة.
لإضافة خط بلغة HTML استخدم : <br> أو <hr>
شاهد التطبيق العملي.....
شاهد التطبيق العملي.....
___________________
اكواد المدخلات:
وتسختدم فس تنسيق صفحات تسجيل الدخول والارسال ..
راجع اكواد الادهال السابقة....
شاهد التطبيق العملي.....
________________
اكواد الوسائط:
لإضافة صورة، استخدم <img src="الرابط الخاص بالصورة">
نضع رابط الصورة مثل
https://images.wallpaperscraft.com.jpg
او نضع مسار الصورة المحمل بالجهاز مثل D\image\car.jpg
ويمكنك اضافة فيديو ار ملف صوتي ،
راجع اكواد الوسائط السابقة....
شاهد التطبيق العملي.....
_____________
شاهد التطبيق العملي.....
الحاويات:
تستخدم لوضع محموعه من الاكواد لتميزهم عن باقي الاكواد لكي نتمكن من التعديل في خصائصهم باستخدام لغة ال CSS.
____________________
تابعونا علي قناتناا:
كم من الوقت احتاج للتعلم هاذهي الغله
ردحذفماهو اسم التطبيق الذي يستخدم على الجوال وهل هو صالح لكل اجهزة الجوال وهل ممكن انه تعطينا طريقة التنزيل والاستخدام
ردحذفطريقة التحميل موجوده بالدرس الاول ..
ردحذفوهذا التطبيق يصلح لجميع الهواتف