![]() |
#1 | |||||||||||
![]() ![]()
|
![]() الدرس الأول فى لغة الـ HTML ... ![]() أهلا وسهلا بكم اعضاء و زوار منتديات عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] ,, *-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-* سوف نقوم فى هذا الدرس بسرد الوسوم الأساسية لصفحة الويب وتعريفها واحدة تلو الاخرى لنتوصل فى نهاية هذا الدرس المتواضع إلى انشاء صفحة ويب بسيطة تقوم انت كـ مبتدئ فى لغة الـ HTML بعملها بنفسك وبدون اى مشاق . ![]() الوسوم الأساسية فى اى صفحة ويب صنعت بـ لغة HTML . وسم البداية كود بلغة HTML:
<HTML>
كود بلغة HTML:
</HTML>
كود بلغة HTML:
<HEAD>
كود بلغة HTML:
</HEAD>
كود بلغة HTML:
<TITLE>
كود بلغة HTML:
</TITLE>
كود بلغة HTML:
<BODY>
كود بلغة HTML:
</BODY>
![]() وكما اتفقنا سابقا فى عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] ان لكل وسم بداية ونهاية ,, اقتباس:
![]() وفيما يلى منظر مبسط عن المظهر العام لصفحة الـ HTML . *-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-* كود بلغة HTML:
<HTML> <HEAD> <TITLE> </TITLE> <HEAD/> الى هنا يتم وضع عنوان الصفحة و معلومات خاصة عنها كالمحتويات والوصف .... الخ ------------------------------------------ <BODY> هنا توضع محتويات الصفحة كـ نصوص و جداول و صور و روابط تشعبية .... الخ ------------------------------------------ <BODY/> <HTML/> ![]() ماذا نستنتج من هذا النموذج المبسط ؟؟؟ 1- اى ملف HTML يجب ان يبدا بـ الوسم <HTML> كما يجب ايضا ان ينتهى بـ الوسم <HTML/> فتذكر ذلك دائما . 2- الوسم <HEAD> يحدد بداية المقطع الذى يحتوى على المعلومات الخاصة بالصفحة كالعنوان مثلا و الميتا تاج ( الكلمات الدلالية ) . 3- يوجد بين الوسمين <HEAD> و <HEAD/> الوسمين <TITLE> ___ </TITLE> وهذان الوسمان يوضع بينهما اسم الصفحة الذى يظهر فى شريط عنوان المتصفح امام المستخدم ,, كما يجب انهاء المهمة بالوسم <HEAD/> . 4- اما عن الوسم <BODY> فهو المكان المخصص لسرد محتويات صفحة الويب من روابط تشعبية وصور وجداول ...... الخ ,, كما يجب انهاء تلك الوسم ايضا بـ <BODY/> . ![]() والآن بعد ان تفهمنا الوسوم جيدا هيا بنا اعزائى أعضاء , زوار منتدى عفوا ,,, لايمكنك مشاهده الروابط لانك غير مسجل لدينا [ للتسجيل اضغط هنا ] نقوم بتطبيق مثال بسيط عن ما تعرفنا عليه .. ![]() قم بتطبيق ما فهمت فقط ولا تقم بنسخ الكود للتجربة ![]() *-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-* كود بلغة HTML:
<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> HTML Guide By 3ashek El7ozn & Silkroad4arab Forum </BODY> </HTML> بعد الانتهاء من تطبيق ما فهمت قم بحفظ الملف بـ أى اسم تختاره تحت صيغة html او htm ثم قم بفتح الملف لتجربة التطبيق هل نجح ام لا .. ![]() النتيجة الإيجابية ,, ![]() *-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-* اذا لم تحصل على تلك النتيجة ![]() ![]() ملحوظة بسيطة ... لا يوجد فارق بين الوسوم ذات الحروف الكبيرة و الصغيرة فكلاهما واحد حيث ~ >> <HTML> = <html> ![]() كما يجب عليك الاخذ بعين الاعتبار بان المتصفحات لا تتعامل مع الفراغات الزائدة بانها مسافات او فواصل او فقرات ودليل على ذلك ,, كود بلغة HTML:
<HTML><HEAD><TITLE>My First html Page</TITLE></HEAD><BODY>HTML Guide By 3ashek El7ozn & Silkroad4arab Fourm</BODY></HTML> ![]() كود بلغة HTML:
<HTML> <HEAD> <TITLE> My First HTML Page </TITLE> </HEAD> <BODY> HTML Guide By 3ashek El7ozn & Silkroad 4 arab Fourm </BODY> </HTML> ![]() كود بلغة HTML:
<HTML><HEAD><TITLE> My First HTML Page </TITLE></HEAD><BODY> HTML Guide By 3ashek El7ozn & Silkroad4arab Fourm </BODY></HTML> ![]() كود بلغة HTML:
<HTML> <HEAD> <TITLE> My First html Page </TITLE> </HEAD> <BODY> HTML Guide By 3ashek El7ozn & Silkroad4arab Fourm </BODY> </HTML> ستكون النتيجة كالسابق فقم بالتجربة ![]() ![]() والآن .. السؤال الذى يدور فى رأسك ! كيف اقوم بترك فراغ او تحديد نهاية سطر او البدء بفقرة جديدة ؟؟ الإجابة ,, هى الوسم <BR> . والآن نذهب الى المثال السابق .. ونقوم بإضافة الوسم <BR> . ![]() كود بلغة HTML:
<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> HTML Guide <BR>By 3ashek El7ozn <BR>&<BR> Silkroad4arab Forum </BODY> </HTML> النتيجة >> ![]() كما هناك الوسم <P> والذى يقوم بنفس عمل الوسم السابق <BR> ولكن باختلاف بسيط الا وهو ترك سطر فارغ بين كل فقرة واخرى .. *-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-* كود بلغة HTML:
<HTML> <HEAD> <TITLE>My First HTMLl Page</TITLE> </HEAD> <BODY> HTML Guide <P>By 3ashek El7ozn <P>&<P> Silkroad4arab Fourm </BODY> </HTML> النتيجة >> ![]() ![]() ناتى لنقطة اخرى وهى ترك فراغا بين الكلمات .. والفراغات يتم استخدام الوسم معها . و يعنى هذا الوسم Non Breakable Space ![]() واذا اردنا ادخال عدة فراغات بين نص و آخر نقوم باضافة هذا الوسم بمقدار الفراغات المطلوبة .. *-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-* دعونا نرى مثالا حيا ,, *-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-* كود بلغة HTML:
<HTML> <HEAD> <TITLE>My First HTML Page</TITLE> </HEAD> <BODY> HTML Guide By 3ashek El7ozn & Silkroad4arab Forum </BODY> </HTML> النتيجة >> ![]() ![]() بالمناسبة قمنا بالتحدث عن الرموز الخاصة مثل فهناك العديد من الرموز الخاصة وتكتب بصورة معينة سوف نتناول ذكرها فى درس لاحق ان شاء الله تعالى .. ![]() وفى النهاية *-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-* هذا عمل بشري ,, لا يخلوا من الأخطاء , فإن أصبت فمن الله .. وإن أخطأت فمني ومن الشيطان . *-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-* وعند النقل يرجى ذكر المصدر دمتم بود *-.-**-.-**-.-**-.-**-.-**-.-**-.-**-.-* ![]() |
|||||||||||
![]() |
![]() |
#2 | ||||||||||
![]() ![]()
|
ايوة بقى انزل بالتقيل |
||||||||||
![]() |
![]() |
#3 | ||||||||||
![]() ![]()
|
قشطة يا كبير |
||||||||||
![]() |
![]() |
#4 | ||||||||||||
![]() ![]()
|
اقتباس:
![]() اقتباس:
|
||||||||||||
![]() |
![]() |
#5 | ||||||||||
![]() ![]()
|
مجهـود جبـار منكـ ![]() راجل بـ معنى الكلمـة ![]() |
||||||||||
![]() |
![]() |
#6 | |||||||||||
![]() ![]()
|
اقتباس:
|
|||||||||||
![]() |
![]() |
#7 | ||||||||||
![]() ![]()
|
واللهِ درس جامد كنت محتاجو و محتاج باقى الدروس انا داخل على الدرس التانى حالا ![]() |
||||||||||
![]() |
![]() |
#8 | |||||||||||
![]() ![]()
|
اقتباس:
![]() |
|||||||||||
![]() |
![]() |
#9 | ||||||||||
![]() ![]()
|
شكراً |
||||||||||
![]() |
![]() |
#10 | ||||||||||
![]() ![]()
|
تمام ياكبير الله يعطيك العافيه شكرا والله ![]() |
||||||||||
![]() |
![]() |
#11 | ||||||||||||
![]() ![]()
|
اقتباس:
اقتباس:
![]() |
||||||||||||
![]() |
![]() |
#12 | ||||||||||
![]() ![]()
|
حضرتك النا الحمد للة فهمت كل حاجة في الدرس دة بس حضرتك بتقول جرب اجرب في اية يعني فيين اجرب انا مش فاهم الحتة دية معلش اصل انا جديد ![]() ![]() |
||||||||||
![]() |
![]() |
يتصفح الموضوع حالياً : 1 (0 عضو و 1 زائر) | |
|
|