[ دورة الــ html ] الــــدرس الثاني : الاجزاء الاساسيه في صفحات الــ html

10:09 نشر في : ,


[ دورة الــ html ] الــــدرس الثاني : الاجزاء الاساسيه في صفحات الــ html

يا اخوان اليوم سنبدأ التعمق في هذه اللغة أكثر فيجب أن تتابعوا معي أكثر من السابق ..
نبدأ  الآن بعد باسم الله الرحمان الرحيم .. 

أولاً : الاجزاء الاساسيه للشفرات لغة الترميز المتشعب 
لاحظ فــ هذي الشفره .. 

كود:
<html> 
<head> 
<title> my second web page</title>
</head> 
<body> 
Houssame Gorani <br> 4 ever 
</body> 
</html>
بعد فتح الشفره السابقه بالمتصفح ستكون هكذا :

[ دورة الــ html ] الــــدرس الثاني : الاجزاء الاساسيه في صفحات الــ html

لا تتعب نفسك في محاولة فهم الشفره أنا سأوضحها لك بالكامل .. 
هذا الامر يعني مضمون الصفحة

كود:
<body>
معلومات التعريف بالصفحه 
كود:
<head>
العنوان 

كود:
<title>

ملاحظة : 
 يجب أن تكون هذه العناصر موجوده في جميع شفرات الــ html للصفحات الكامله ...لكن ممكن لبعض الاكواد أن لا موجود فيها ! لأنها إضافات تضيفها للصفحة وليست صفحة كاملة انما هذي العناصر للصفحات الكاملة أي تصميم الصفحه الكاملة فقط ...

حاله شاذه : 
الآن الذكي منكم لاحظ وجود الامر

كود:
<br>

بين كلمتي Gorani و 4 ever و و الذي لم يلاحظ فليتابع معي الآن .. 
افتح المفكره و انسخ الكود الموجود فوق .. 
و احفظه بصيغة html ستلاحظ أنهما في سطرين ليس واحد مثل شفرة الدرس الاول 
الامر

كود:
<br>

أنا تعمدت أن أضع هذا الامر لكي أخبركم عن حاجة شاذه اذا صح التعبير .. 
الامر هذا يسمى أمر مفرد ، ماذا يعني مفرد ؟؟ يعني أمر لا يحتاج أن تكتب له علامة النهايه .. علامة نهايته يمكن أن تكون علامة نهاية الفقره أو العنوان الذي ستاخذها في الدرس الثالث إن شاء الله .. 

و لكن : معظم الاوامر تأتي كامله و ليست مفرده .. 
الحين أنظروا إلى هته الشفره .. 

كود:
 
<html>
<head> 
<title> my second web page </title>
</head> 
<body> 
<h1> Houssame </h1>
here i tech u <br> html <b> its so easy and nice </b><br> <u> oh i like it very much </u> <br> <i>good by </i>
<a href ="http://offender-net.blogspot.com"> visit us in  Offender Net </a> 
</body>
</html>
طبعا بعدما تضعونه على الإمتداد html  سيكون الناتج عند فتحه بالمتصفح هذا : 

[ دورة الــ html ] الــــدرس الثاني : الاجزاء الاساسيه في صفحات الــ html


لاحظوا وجود الامر
كود:
<h1>
و هذا الامر شرحه سيكون موجود في الدرس الثالث ان شاء الله .. 
فقط نقطه ثانية .. 
بعض الاوامر مثل أوامر الالوان تكون فيها مثل التكملة .. لكن نحن نسميها خواص ..
إن شفرات هذه اللغه تحدد كل صغيره و كبيره في الصفحتك .. و أي خطأ فيها قد يسبب كارثة أي ممكن يخرب عملك بالكامل .. فكن حذرا عندما تكتب أي شفرة {كود} .. 

سؤال نهاية الدرس ..
جرب أن تختصر أحد هذه العناصر و لاحظ النتيجة ؟؟

فمن أجاب عن سؤال الحلقة فليضع جوابه بالتعليقات .
تحياتي : حسام الدين الكوراني ..

أكمل القراءة ←

[ دورة الــ html ] الــــدرس الاول : أساسيات اللــــغة

08:52 نشر في : ,


[ دورة الــ html ] الــــدرس الاول : أساسيات اللــــغة
  تعقيب .. 
  النقطة أنه لا يمكن أن تعدل في لغة الترميز المتعشب إلا عن طريق برنامج الفرونت بيج
  أولا هنالك عدد لا يحصى من البرامج التي تعدل على أكواد لغة الــ HTML
  و من أبسط و أفضل هذه البرامج هو برنامج المفكرة { NOTEPAD } الموجود بالوندوز
 الآن نبدأ

 أولاً ..أساسيات اللغه باختصار 

 علامات البداية و النهاية 
  تبدأ جميع أوامر هذه اللغه بـ علامة بداية و تنتهي بــ علامة نهاية طبعاً تبدل كلمة 
 <علامة البداية> 
 </علامة النهاية>
  للإشارة ، البداية في أي كود html يبتدئ بــ <html> و ينتهي بــ </html> 

  ثانياً : تطبيق عملي على  ما درسناه قبل قليل


  فلتكنب هدا الكود مع بعضنا 

  أولا افتح المفكره ثم اكتب فيها هذا الكود 

كود:
<html>
<head>
<TITLE>العنوان </TITLE>
</head>
<body>
<I> خط مائل </I>
<B>خط أسود عريض </B>
<U>خط تحته سطر </U> 
<B> خط عريض </B>
</body>
</html>

  طبعا سأوضح لكم حاجة الكلام أو الأوامر التي تكون بين بداية الأمر و نهايته ، هذا الكلام { خط مائل ، خط أسود عريض ... } هو         الذي ينطبق عليه التأثير الذي و ضعناه 

  و للعلم هذه اللغة هي التي تتضمن باقي اللغات يعني معظم اللغات { PHP ; PYTHON ; XML ... } تعتمد على هذه اللغة اعتمادا  كاملا 

  الآن أنسخ هذا النص للمفكره و احفظه بصيغة html 
  أنا متصفحي الخاص لا يقبل اللغة العربية لذلك سأغير ما هو عربي لانجليزي لنفادي أي مشكلة 
و سيكون كود الــ HTML خاصتي هكذا 


<html>

<head>
<TITLE> Offender NET </TITLE>
</head>
<body>
<I> Offender NET (1) </I>
<B> Offender NET (2) </B>
<U> Offender NET (3) </U> 
<B> Offender NET (4) </B>
</body>
</html>

  ستكون نتيجة الكلام الذي كتبناه قبل بالطريقه التالية .. طبعا بعد تحويله للامتداد html 



 الكل يسألني كيف سوف يسألني كيف سنغير الكلام الذي كتبناه في المفكره الي امتداد html ؟؟ 


 طريقة تغيير امتداد ملفات الـ مفكره الى امتداد html لتعمل على المتصفح ولنتمكن من ترجمة الشفرات التي كتبناها ..  
 تابعوا  معي
   انسخ الكود أو اكتبه بملف مستند نصي جديد ( المفكره )
   بعدما تنهي تعديلك عليه لا تضغط حفظ بل اضغط حفظ باسم و اكتب الإسم الذي يناسبك

 الآن لا تضغط حفظ انتظر قليلا .. فإذا فعلت ستحصل على مثل هذاالإمتداد ( txt. ) أي مستند نصي

 الآن جاء دورنا 
 عدل الــ txt و اكتب بدلها html هذا اذا كانت الـ txt موجوده أصلا بجانب الإسم الذي أعطيته للملف
 أما إذا لم  تكن موجودة فـاكتب بجانب الاسم كالتالي html. 
 و اضغط على حفظ 
 او باختصار : اذا اسم الملف عندك مثلاً xxxxxxxxx.txt طبعاً الــ txt هي الامتداد .. عندما ستغير الإمتداد سيصبح اسم الملف هكذا :  xxxxxx.html .. فهمتوا علي الحين .. 


  مميزات اللغه باختصار .. 
   - اللغه موجوده على جميع أجهزة الكمبيوتر ولا تحتاج لعملية تنصيب ولا تحتاج لبرامج مثلما أسبقت 
   - اللغه تعتمد على أوامر تفهم بمجرد قراءتها
   - توجد هناك عدة طرق لكتابة الامر نفسه 

  و يعتبر تعلم هذه اللغة الاساس في عملية تصميم المواقع فهي الطريق المؤدي الى باقي اللغات 

أتمنى أن ينال اعجابكم وأن يكون واضحا وأتمنى ألا تبخلوا علي ببعض التعليقات وشكرا
أكمل القراءة ←

الاشتراك في: الرسائل (Atom)