الدرس التاسع من دروس HTML

السلام عليكم
الدرس التاسع من دروس html
<div> tag
وقبل لما اتكلم على استخدامات تاج div هنتكلم على مقدمة بسيطة توضح استخداماتة .

فى الحقيقة واحنا بنصمم صفحتنا باستخدام html نجد ان  الصفحة تحتوى على اغلب عناصر html التى تم شرحها من
 links , imagess , heading , pragraphs ....
طيب هذة العناصر احنا مش بنكتبها كدا مباشرة عنصر يلية عنصر اخر  .
لا احنا فى الغالب بنحتاج اننا نقسم صفحتنا الى مجموعة من الاقسام او section وكل قسم يحتوى على مجموعة عناصر html الخاصة به .

والسؤال ماهو العنصر الا نقدر نستخدمة فى تقسيم صفحتنا ؟
الحل هنا بيكون باستخدام تاج div
تاج <div> هو اختصار division بمعنى قسم او جزء او مقطع.
كما ان تاج div يستخدم كمحتوى لمجموعة من عناصر html .
وهو من تاجات block element وبالتالى فهو يظهر فى المتصفح على شكل صندوق او box وبداخلة يظهر محتوياته من عناصر html .

انا عرضت مثال بسيط بيوضح تصميم او layout لصفحة مكونة فقط من ثلاثة اقسام .
وكيفية استخدام تاج div فى تقسيم التصميم .

html - html5 - html editor - html color codes - html table - html tags - html colors - html button - html color picker - html code - html tutorial - html comment
تعلم لغة البرمجة c++ - لغة البرمجة - تحميل برنامج لغة البرمجة - تعريف لغة البرمجة - بحث عن لغة البرمجة - شرح لغة باسكال - تعلم لغة البرمجة للمبتدئين - شرح لغة البرمجة c++ - تعليم لغة البرمجة - تعلم لغة البرمجة -
html - html and css - html and css design and build - websites - html5 - html for dummies 2019 - html css and javascript - html cheat sheet - html to display port - html for babies

الدرس الثامن من دروس تعلم HTML

السلام عليكم
الدرس الثامن دروس HTML
احنا ان شاء الله مكملين فى الشرح  حتى نهاية كورس HTML .
وكما وعدكم لما اشرح جزء لازم اطبق علية بمثال .

نبداء باسم الله .
الهدف من هذا الدرس هو تكملة الدرس السابع وهو النماذج forms

اتكلمنا فى الدرس السابق عن النماذج وعرفنا ان التاج المستخدم لعمل النماذج هو تاج :-
<form action=" " method=" ">

 </form>

وبين تاج الفتح وتاج الاغلاق يتم اضافة العناصر الى هذا النموذج
 من خلال كتابة تاج <input > كالتالى :
<form>
<input type=" " value=" " name=" " >
 </form>
ويتم تحديد نوع هذا العنصر من خلال كتابة اسم العنصر بداخل الاقواس الخاصة  بالسمة
type =" "
وتم شرح العناصر التالية :

label - text - password - submit
النهاردة ان شاء الله هنتكلم عن
textarea - radio - checkbox - select - button - reset

- textarea
اتكلمنا عن text وعرفنا ان هذا العنصر يظهر فى شكل اطار لادخال بيانات بداخلة الا ان هذا text يستخدم فقط لادخال نص من سطر واحد .
لكن textarea  يستخدم لادخال نص مكون من اكثر من سطر .
تاج textarea  هو تاج وليس سمة ويكتب  بداخل تاج form كالتالى :
<textarea  cols=" " rows=" " > </textarea>
ويتم التحكم فى مساحة textarea من خلال كلا من السمة cols and rows . كما يمكن اضافة نص معين بين تاج الفتح وتاج الاغلاق يظهر كقيمة افتراضية لتوضيح المطلوب كتابة بداخل هذا العنصر .

-radio
يستخدم لاختيار عنصر واحد فقط من بين عدة عناصر من النوع radio .
<input type="radio" name=" ">
هنا يتم كتابة مجموعة من عناصر الاختيار radio ويتم استخدام السمة name وتحديد قيمة لها متساوية مع جميع هذة العناصر .

- checkbox
يستخدم لاختيار اكثر من عنصر من بين عدة عناصر من النوع checkbox .
بعكس العنصر radio الذى يتيح اختيار عنصر واحد فقط .
<input type="checkbox" >
هنا يتم كتابة مجموعة من عناصر الاختيار checkbox واختيار عنصر او اكثر من هذة العناصر .

-select
يستخدم لاظهار قائمة منسدلة لاختيار عنصر او اكثر من هذة القائمة .
<select >
  <option> </option>
  <option> </option>
</select>
ويتم اضافة العناصر لهذة القائمة من خلال كتابتها بين تاج الفتح وتاج الاغلاق للتاج option .

- button
هو شكل من اشكال الازرار
الا انه يختلف على النوع السابق وهو submit فى انه يمكن اضافة بعض الامكانيات البرمجية له .كاظهار رسالة للمستخدم او اداء وظيفة معينة بمجرد الضغط علية .
<input type="button" >

-reset
هو شكل اخر من اشكال الازرار
وهو يستخدم لافراغ او مسح  محتويات النموذج من البيانات فى حالة الرغبة فى اعادة ادخال البيانات مرة اخرى نتيجة الخطا .
<input type="reset" >
انا كدا خلصت الشرح .
وحبيت اعمل تمرين بسيط عبارة عن عمل نموذج  لتسجيل بيانات المستخدمين فقط باستخدام HTML .

html

html5

html editor

html color codes

html table

html tags

html colors

html button

html color picker

html code

html tutorial

html comment

html

html table

html color picker

html color codes

html editor

html5

html button

html color

html tags

html comment

تعلم لغه البرمجه c++

لغه البرمجه

تحميل برنامج لغه البرمجه

بحث عن لغه البرمجه

تعريف لغه البرمجه

شرح لغه البرمجه باسكال

تعلم لغه البرمجه للمبتدئين

شرح لغه البرمجه c++

تعليم لغه البرمجه

تعلم لغه البرمجه

html and css

html

html and css design and build websites

html cable for tv

html5

html for dummies 2019

html css and javascript

html cheat sheet

html to display port

html for babies

تحياتى للجميع .
Eng : Fawzy Syam



بالتوفيق للجميع
Eng : Fawzy Syam

الدرس السابع من دروس تعلم HTML

السلام عليكم
الدرس السابع من دروس HTML
احنا ان شاء الله مكملين فى الشرح  حتى نهاية كورس HTML .
وكما وعدكم لما اشرح جزء لازم اطبق علية بمثال .

نبداء باسم الله .
الهدف من هذا الدرس هو معرفة  :
Forms او النماذج

ويتم التعبير عنها باستخدام تاج
<form action=" " method=" ">
 </form>
تاج form من التاجات التى تغلق او تنتهى بتاج الاغلاق
وكما ذكرنا سابقا بان هناك بعض التاجات قد تحتوى على مجموعة من الصفات او السمات attributes .
نجد ان تاج form يحتوى ايضا على العديد من السمات ومن اهم هذة السمات  :
action = " "
بداخل هذة الاقواس يتم كتابة اسم  الصفحة التى سيتم ارسال بيانات هذا النموذج اليها بمجرد الضغط على زر معين فى النموذج

method=" "
بداخل هذة الاقواس يتم تحديد الطريقة التى يتم من خلالها ارسال هذة البيانات وهى اما post او get .

بمجرد كتابة تاج form بالصورة التالية :
<form action=" " method=" " >
</form>
قد تم فعلا بناء هذا النموذج الا ان هذا النموذج لايحتوى على اى عنصر من عناصر الادخال بداخلة.
وبالتالى فنحن بحاجة الى اضافة هذا العناصر الى هذا النموذج
ويتم اضافة هذة العناصر بين تاج الفتح وتاج الاغلاق الخاص بالنموذج .
 من خلال كتابة تاج <input > كالتالى :
<form>
<input type=" " value=" " name=" " >
 </form>
هنا سوف يظهر اول عنصر بداخل هذا النموذج
الا ان هناك العديد والعديد من عناصر الادخال التى يتم تحديدها من خلال السمة type .
اما السمة value فهى تحدد قيمة افتراضية تظهر بداخل العنصر والسمة name هى تقوم باعطاء اسم برمجى لهذا العنصر .

طبعا مش هنقدر نشرح كل انواع عناصر الادخال فى مرة واحدة
النهاردة ان شاء الله سيتم فقط شرح كلا من :
label - text - password - submit
بمجرد كتابة احد هذة الكلمات السابقة بداخل الاقواس الخاصة بالسمة
type=" "
سوف تتغير طبيعة هذا العنصر .
-label
وهو المسئول عن عمل عنوان يظهر بجوار عنصر الادخال .
- text
يظهر هذا العنصر فى شكل اطار لادخال بيانات بداخلة .
- password
يظهر ايضا هذا العنصر فى شكل اطار لادخال بيانات بداخلة الا ان هذة البيانات تظهر فى شكل نجوم .
وذلك للحفاظ على سرية بيانات النظام .
- submit
هو شكل من اشكال الازرار
وهو العنصر المسئول عن نقل بيانات هذا النموذج الى الصفحة التى يتم تحديدها فى خاصية action بمجرد الضغط علية .
عند استخدام خاصة value مع النوع submit سوف يتم فقط تغيير العبارة التى تظهر على هذا الزر .

انا كدا خلصت الشرح .
وحبيت اعمل تمرين بسيط عبارة عن عمل نموذج لشاشة الدخول للموقع فقط باستخدام HTML .
طبعا انا هنسقة  باستخدمت CSS فى الفيديو القادم

html

html5

html editor

html color codes

html table

html tags

html colors

html button

html color picker

html code

html tutorial

html comment

html

html table

html color picker

html color codes

html editor

html5

html button

html color

html tags

html comment

تعلم لغه البرمجه c++

لغه البرمجه

تحميل برنامج لغه البرمجه

بحث عن لغه البرمجه

تعريف لغه البرمجه

شرح لغه البرمجه باسكال

تعلم لغه البرمجه للمبتدئين

شرح لغه البرمجه c++

تعليم لغه البرمجه

تعلم لغه البرمجه

html and css

html

html and css design and build websites

html cable for tv

html5

html for dummies 2019

html css and javascript

html cheat sheet

html to display port

html for babies

تحياتى للجميع .
Eng : Fawzy Syam



بالتوفيق للجميع
Eng : Fawzy Syam

الدرس السادس من دروس تعلم HTML

الدرس السادس من دروس HTML
احنا ان شاء الله مكملين فى الشرح  حتى نهاية كورس HTML .
وكما وعدكم لما اشرح جزء لازم اطبق علية بمثال .

نبداء باسم الله .
الهدف من هذا الدرس هو معرفة كلا من :
List - Link
اولا : List او القوائم
هي عبارة عن مجموعة من العناصر المرتبطة .لذا يتم تجمعيها فى صورة قائمة .

وتنقسم القوائم الى عدة انواع بينما الاكثر استخداما هما نوعين :
1- القوائم المرتبة ordered list   
2-القوائم غير المرتبة unordered list

اولا: القوائم المرتبة ordered list
ويتم التعبير عنها باستخدام تاج
<ol> </ol>
وبين تاج الفتح وتاج الاغلاق يتم كتابة هذة العناصر بين تاج
<li> the element</li>
ثانيا: القوائم غير المرتبة unordered list
ويتم التعبير عنها باستخدام تاج
<ul > </ul>
وبين تاج الفتح وتاج الاغلاق يتم كتابة هذة العناصر بين تاج
<li>the element </li>
نلاحظ الاتى :
-تاج List من التاجات التى يتم اغلاقها .
- يحتوى تاج List على بعض الصفات او السمات من اهمها :
type=" "
تستخدم هذة السمة  للتحكم فى نمط الترقيم .
فمثلا ممكن ان نكتب "A" للقوائم المرتبة  او نكتب "circle" للقوائم غير المرتبة .
start=" "
تستخدم هذة السمة للتحكم فى بداية الترقيم
فمثلا ممكن ان نكتب "5" فيبداء الترقيم من 5 بدلا من 1 .
مثال : لو اردنا عمل قائمة مرتبة تحتوى على العناصر التالية
home - about - contact
<ol>
       <li>home</li>
       <li>about</li>
       <li>contact</li>
</ol>
سوف تظهر بالشكل التالى
1-home
2-about
3-contact
نلاحظ ان الترقيم يظهر فى صورة ارقام لاتها هى  القيمة الافتراصية للقوائم المرتبة .
طبعا ذكرنا اننا نقدر نتحكم فى نمط هذا الترقيم من خلال استخدام سمة type وكذلك يمكن التحكم فى بداية الترقيم من خلال سمة start .ذكرنا ذلك من قبل .
اما لو اردنا عمل قائمة غير مرتبة فقط تستبدل تاج <ol>
بتاح <ul>
فتظهر بالشكل التالى
• home
•about
•contact

ثانيا: Link او الروابط
تستخدم للانتقال بين صفحات الموقع او الانتقال من الموقع الى موقع اخر .
ويتم التعبير عنها باستخدام تاج
<a href=" " > </a>
نلاحظ الاتى :
- تاج Link من التاجات التى يتم اغلاقها .
وبين تاج الفتح وتاج الاغلاق يتم كتابة نص او وضع صورة لهذا الارتباط .
- تاج Link يحتوى على مجموعة من الصفات او السمات attributes من اهمها :
href=" "
بداخل هذة السمة يتم كتابة اسم الصفحة او الموقع التى يرتبط بها هذا الرابط .
يمكن استخدام الرمز # للتعبير ان هذا الرابط هو فقط مرتبط بتفس هذة الصفحة .

target=" "
بداخل هذة السمة يتم كتابة اما
_self           
     وهو فتح هذا الرابط فى نفس هذة الصفحة
_blank             
      وهو فتح هذا الرابط فى صفحة اخرى

انا كدا خلصت الشرح .
وحبيت اعمل تمرين يجمع بين كلا من Link and List
من خلال عمل menu بسيطة .
طبعا انا استخدمت CSS فقط لتنسيق هذة menu .
الا حابب يطبق معايا فقط يكتب كود CSS وبعدين ان شاء الله راح نشرح هذة الاكواد .

html

html5

html editor

html color codes

html table

html tags

html colors

html button

html color picker

html code

html tutorial

html comment

html

html table

html color picker

html color codes

html editor

html5

html button

html color

html tags

html comment

تعلم لغه البرمجه c++

لغه البرمجه

تحميل برنامج لغه البرمجه

بحث عن لغه البرمجه

تعريف لغه البرمجه

شرح لغه البرمجه باسكال

تعلم لغه البرمجه للمبتدئين

شرح لغه البرمجه c++

تعليم لغه البرمجه

تعلم لغه البرمجه

html and css

html

html and css design and build websites

html cable for tv

html5

html for dummies 2019

html css and javascript

html cheat sheet

html to display port

html for babies

تحياتى للجميع .
Eng : Fawzy Syam



بالتوفيق للجميع
Eng 

الدرس الخامس من دروس تعلم HTML

السلام عليكم
الدرس الخامس من دروس HTML
درسنا فى الدروس السابقة الهيكل الخاص بصفحة HTML .
وعرفنا ان صفحة HTML بتتكون من جزئين
الجزء الاول وهو head وهو الجزء الذى لايظهر بصفحة الويب ولكن يتم به وضع مجموعة من الوسوم الخاصة مثل تنسيق الصفحة وعنوان الصفحة وترميز صفحة HTML وهكذا .
اليوم ان شاء الله هنبداء فى الجزء الثانى وهو الجزء الذي يظهر بداخل صفحة HTML وهو جزء body
طبعا هناك العديد والعديد من الوسوم التى يتم وضعها داخل هذا التاج وكل وسم مسئول عن عمل شيء معين داخل صفحة HTML

انا كنت عرضت عليكم اننا نعمل مشروع وهو عبارة عن one page وكنت هشرح هذة الوسوم اثناء عمل المشروع .
لكن الغالبية طلبوا اننا نكمل الدروس وبعد الانتهاء من الدروس يتم عمل المشروع .
بس انا فكرت فى شيء .
انى اعرض  الدروس وفى نفس الوقت هنعمل مثال بسيط لمقطع من احد المواقع .

نبداء بسم الله
الهدف من هذا الدرس هو معرفة كلا من
heading - paragraph - image

- heading
هو عبارة عن عنوان لفقرة او مقطع معين ويتم تطبيق هذا العنوان من خلال استخدام تاج <h>
طيب فى بعض الملاحظات الا لازم نعرفها قبل استخدام هذا التاج
 1- تاج heading من التاجات التى تغلق اي تنتهى close tag
وتكتب هكذا
<h1..6>heading</h1...6>
وببن تاج الفتح وتاج الاغلاق يتم كتابة هذا العنوان .
2-تاج heading هو block element وذكرنا من قبل الفرق بين block element and inline element .
3-عند كتابة تاج heading يكتب بجوارة احد الارقام من 1:6
هكذا <h1> وهو يمثل اكبر هذة العناوين يلية <h2>
وهكذا حتى <h6> وهو اقل العناوين .

-paragraph
هو عبارة عن الفقرة او النص ويتم تطبيق هذا النص من خلال استخدام تاج <p>
طيب فى بعض الملاحظات الا لازم نعرفها قبل استخدام هذا التاج
1- تاج paragraph من التاجات التى تغلق اي تنتهى close tag
وتكتب هكذا
<p> paragraph </p>
وبين تاج الفتح وتاج الاغلاق يتم كتابة محتويات هذة الفقرة .
2-تاج paragraph هو block element .
3-وضع اى مسافة داخل هذا النص لا ياخذ فى الاعتبار عند قيام المستعرض بتشغيل الصفحة .

-image
حتى نتمكن من اظهار الصور داخل صفحات HTML
يتم ذلك من خلال استخدام التاج المسئول على عرض الصور هو تاج img
ويكتب كالتالى :
<img  src=" " alt=" ">
وهذا التاج يحتوى على مجموعة من الخصائص او السمات attributes من اهمها
src=" "
بداخل هذة الاقواس يتم كتابة المسار الخاص بالصورة
alt=" "
بداخل هذة الاقواس يتم كتابة نص بديل يظهر مكان الصورة فقط فى حالة وجود خطا فى تحميل الصورة  ككتابة المسار الخاص بالصورة بصورة خطائة .
بعض الملاحظات على تاج image
- تاج image لا يوجد له close tag
- تاج image هو inline element .

كدا اعتقد انى وضحت كيفية استخدام هذة التاجات .
وتقدر نطبق على التاجات الثلاثة السابق ذكرها
انا طبقت بعمل مقطع بسيط استخدمت فية هذة التاجات .
وعاوز الكل يطبق معايا .

html

html5

html editor

html color codes

html table

html tags

html colors

html button

html color picker

html code

html tutorial

html comment

html

html table

html color picker

html color codes

html editor

html5

html button

html color

html tags

html comment

تعلم لغه البرمجه c++

لغه البرمجه

تحميل برنامج لغه البرمجه

بحث عن لغه البرمجه

تعريف لغه البرمجه

شرح لغه البرمجه باسكال

تعلم لغه البرمجه للمبتدئين

شرح لغه البرمجه c++

تعليم لغه البرمجه

تعلم لغه البرمجه

html and css

html

html and css design and build websites

html cable for tv

html5

html for dummies 2019

html css and javascript

html cheat sheet

html to display port

html for babies

تحياتى للجميع .
Eng : Fawzy Syam

بالتوفيق للجميع .
Eng : Fawzy Syam 

الدرس الرابع من دروس تعلم HTML

الدرس الرابع من دروس html
النهاردة هنتكلم على مجموعة من النقاط قبل الدخول فى تعلم التاجات التى تكتب بداخل تاج body .

اولا: التعليقات comment
هى طريقة لكتابة بعض البيانات التوضحية التى تشرح جزء معين من الكود وهذة التعليقات لا تظهر فى صفحة الويب ولا يقوم المستعرض  بترجمتعها .
والتعليقات فى html تكتب كالتالى :
<! -- comment  -->

ثانيا : block  & inline elements
هناك مجموعة من التنسيقات الافتراضية لعناصر html
وبعض هذة التنسيقات تتمثل فى وضع او طريقة عرض العنصر .
block element
ابسط تعريف له انه  يبداء بسطر جديد ويعرض block element  واى عنصر يلية يعرض فى السطر التالى .
ومن امثلة block element
<p>
<h>
<div>

inline element

عناصر inline يتم عرضها بجوار بعض .
ومن امثلة inline element
<a >
<img  >

ثالثا: element without end tag
ذكرنا ان تاجات html تبداء < name of tag >
start tag
وغالبا تنتهى <name of tag/>
end tag
وبين بداية التاج ونهايتة يكتب محتويات التاج
لكن بعض التاجات ليس لها محتويات لذلك مصممى اللغة لم يقوموا بعمل end tag لهذة العناصر .
ومن امثلة هذة التاجات
<br>.                              وهو تاج اضافة سطر فارغ
<hr>                                         وهو تاج اضافة خط
<img >.                                 وهو تاج اضافة الصور

html

html5

html editor

html color codes

html table

html tags

html colors

html button

html color picker

html code

html tutorial

html comment

html

html table

html color picker

html color codes

html editor

html5

html button

html color

html tags

html comment

تعلم لغه البرمجه c++

لغه البرمجه

تحميل برنامج لغه البرمجه

بحث عن لغه البرمجه

تعريف لغه البرمجه

شرح لغه البرمجه باسكال

تعلم لغه البرمجه للمبتدئين

شرح لغه البرمجه c++

تعليم لغه البرمجه

تعلم لغه البرمجه

html and css

html

html and css design and build websites

html cable for tv

html5

html for dummies 2019

html css and javascript

html cheat sheet

html to display port

html for babies

تحياتى للجميع .
Eng : Fawzy Syam



تحياتى للجميع
Eng : Fawzy Syam

الدرس الثالث من دروس تعلم HTML

الدرس الثالث من دروس تعلم HTML
                                    Html head tag
اتكلمنا فى الدرس الاول عن مقدمة على لغة html .
ووضحنا  ان اكواد html هى عبارة عن مجموعة من  التاجات tags
وهذة التاجات تكتب بداخل رمز الاكبر من ورمز الاصغر من< >
كما ان هذة التاجات لها بداية  < > start tag  .
وكذلك فى الاغلب لها نهاية <  />end tag .

وعرفنا ان الهيكل العام لاي صفحة html كالتالى :
<html>

     <head>
 يتم بها وضع التاجات الخاصة بضبط  الصفحة مثل عنوان الصفحة وتنسيق الصفحة .
     </head >

     <body>
وهى تحتوى على العناصر  التى تظهر على صفحة الويب مثل النصوص والصور وهكذا .
    </body>

</html>
دى كانت مقدمة بسيطة رجعنا فيها بعض النقاط الهامة .

ومن خلال متابعتى لاغلب دروس شرح كورسات html وكذلك CSS حاسس بجد ان مفيش ترتيب جيد للدروس .
ودا فعلا شوفته فى اغلب الكورسات الموجودة على اليوتيوب .
لكن انا من وجهة نظرى ان فى ترتيب افضل للدروس .
انا من وجهة نظرى اننا نبداء بتاج head كاول تاج رئيسي  فى صفحة html بعدها هنعرض تاج body وهنشرح تاجات body بالكامل بترتيب بسيط ومنسق .
تاج head
<head>
<
بداخل تاج head يتم به وضع التاجات الخاصة بضبط الصفحة مثل أعدادات الصفحة وعنوان الصفحة وتنسيق الصفحة ...
>
</head>
واول تاجات head هو تاج meta وهناك العديد من تاجات meta
من اهمها .
<!--meta-->
<meta charset="utf-8">
هذا التاج هو المسئول عن تحديد نوع الترميز الخاص بالصفحة وهو مايجعل الموقع يدعم كلا من اللغة العربية والانجليزية .

<meta name"description" content=" وصف الصفحة ">
هذا التاج يتم به وضع وصف للصفحة .
وهذا الوصف يستخدم  لتسهيل عمليات البحث كما ان هذا الوصف يظهر اسف عنوان الصفحة فى المستعرض .

<title> عنوان الصفحة </title>
هذا التاج يتم به وضع عنوان للصفحة .وهو يظهر كعنوان للصفحة فى المستعرض وكذلك يظهر فى الشريط الخاص بالمستعرض .

اما بالنسبة لتاجات CSS
فهناك طريقتين
الطريقة الاولى وهى كتابة اكواد CSS مباشرة بداخل صفحة html بداخل تاج style كالتالى :
<style>
P{color:red;}
</style>
تاج style يتم بداخلة كتابة اكواد CSS كما هو موضح سابقا .
وهو مايعرف internal style .

الطريقة الثانية وهى كتابة اكواد CSS فى ملف خارجى بعدها يتم ربط صفحة CSS بصفحة html كالتالى :
<link rel="stylesheet" href="اسم صفحة CSS ">
تاج link وهو مايعرف external style
ويتم وضعة فى حالة الرغبة فى ربط صفحة html باحد صفحات CSS الخارجية .

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

<script >
alert("hello JavaScript");
</script>

الطريقة الثانية وهى فى حالة وضع اكواد الجافا سكربت فى ملف خارجى والرغبة فى ربط هذة الصفحة بصفحة html
<script src ="اسم صفحة الجافا سكربت ">
</script>

كدا الحمد لله تعرفنا على اغلب التاجات التى تكتب بداخل تاج head
وان شاء الله هنبداء من الدرس القادم شرح التاجات التى تكتب داخل تاج body .

html

html5

html editor

html color codes

html table

html tags

html colors

html button

html color picker

html code

html tutorial

html comment

html

html table

html color picker

html color codes

html editor

html5

html button

html color

html tags

html comment

تعلم لغه البرمجه c++

لغه البرمجه

تحميل برنامج لغه البرمجه

بحث عن لغه البرمجه

تعريف لغه البرمجه

شرح لغه البرمجه باسكال

تعلم لغه البرمجه للمبتدئين

شرح لغه البرمجه c++

تعليم لغه البرمجه

تعلم لغه البرمجه

html and css

html

html and css design and build websites

html cable for tv

html5

html for dummies 2019

html css and javascript

html cheat sheet

html to display port

html for babies

تحياتى للجميع .
Eng : Fawzy Syam



تحياتى للجميع .

Eng : Fawzy Syam

الدرس الثاني من دروس تعلم HTML

الدرس الثانى من دروس تعلم HTML
اتكلمنا فى الدرس الاول  عن مقدمة عن HTML

وعرفنا ان اكواد html هى عبارة عن مجموعة من  التاجات tags
وكل تاج له وظيفة محددة .
وهذة التاجات تكتب بداخل رمز الاصغر من ورمز الاكبر من كالتالى :  < name of tag>
كما ان هذة التاجات لها بداية  <name Of Tag >
start tag
وكذلك فى الاغلب لها نهاية < name Of Tag/>
end tag
وفيها يتم وضع / قبل كتابة اسم التاج .

وعرفنا ان الهيكل العام او الاساسي  لاي صفحة html هو كالتالى :
<html>
تبداء بكتابة تاج html لاخبار المستعرض ان هذة الصفحة هى صفحة html .
     <head>
 يتم بها وضع التاجات الخاصة بضبط  الصفحة مثل عنوان الصفحة وتنسيق الصفحة وهكذا .
     </head >

     <body>
وهى تحتوى على العناصر  التى تظهر على صفحة الويب مثل النصوص والصور وهكذا .
    </body>

</html>

واخر شيء ان امتداد صفحات html هو
.html
النهاردة هوضع كلا من :-
- العناصر Element
- العناصر المتداخلة nested Element .
- الصفات او السمات Attributes

اولا : العناصر Element :-
عرفنا ان تاجات html  لها بداية وتكتب هكذا <name of tag > وفى الاغلب لها نهاية وتكتب هكذا <name of tag />
وبين تاج البداية او الفتح وتاج النهاية او الاغلاق قد يحتوى على بعض العناصر تختلف من تاج لاخر .
من بداية التاج ومحتوياتة حتى نهاية التاج يطلق عليها Element

مثال للتوضيح : تاج <p> هو التاج المسئول عن عمل فقرة او نص فى html .لو اردنا كتابة عبارة welcome to html .

<p>welcome to html </p> .......Element
من بداية تاج p ومايحتوية وكذلك نهاية التاج يسمى عنصر .

ثانيا: العناصر المتداخلة nested Element :-
قد يحتوى العنصر ايضا على عنصر اخر بداخلة فى هذة الحالة يطلق على هذا العنصر nested Element .
مثال للتوضيح : تاج <div > قد يحتوى هذا التاج على تاجات اخرى بداخلة .
<div > ........Element
<p>..............nested Element
Welcome to html
</p>
</div>

ثالثا : الصفات او السمات Attributes
بعض التاجات قد تحتوى على صفات او سمات .
مثال للتوضيح
عندما نريد عرض صورة فى صفحة الويب فان التاج المسؤال عن عرض الصور هو تاج img وهذا التاج يحتوى على بعض السمات مثل src وهو بيوضح مصدر ا ومكان الصورة هكذا .
<img src="1.jpg">  ....src is Attribute
نلاحظ انا الصفات او السمات تكتب فقط فى start tag
وهى تاخذ الصيغة التالية
Name of attribute = "value"
       

                               

html - html5 - html editor - html color codes - html table - html tags - html colors - html button - html color picker - html code - html tutorial - html comment
تعلم لغة البرمجة c++ - لغة البرمجة - تحميل برنامج لغة البرمجة - تعريف لغة البرمجة - بحث عن لغة البرمجة - شرح لغة باسكال - تعلم لغة البرمجة للمبتدئين - شرح لغة البرمجة c++ - تعليم لغة البرمجة - تعلم لغة البرمجة -
html - html and css - html and css design and build - websites - html5 - html for dummies 2019 - html css and javascript - html cheat sheet - html to display port - html for babies

Eng : Fawzy S

الدرس الاول من دروس تعلم HTML

الدرس الاول من دروس تعلم HTML
وهى عبارة عن مقدمة عن HTML

 اولا :ماهى html ؟
Html
هى احد اللغات المستخدمة فى تصميم صفحات الويب وهى اختصار
Hyper text markup language .

ثانيا: هل يجب تعلم اى لغة اخرى  قبل البدء فى لغة html ؟
لست بحاجة لتعلم اى لغة .
 بل البدء بتعلم html فانت قد اتخذت الطريق الصحيح فى بناء صفحات الويب .

ثالثا : ماهى الادوات المطلوبة لكتابة اكواد html
انت تحتاج فقط الى Browser
واحد البرامج او editor المستخدمة فى كتابة اكواد html
ومن اهمها Notepad++ - komodo - brackets

وقبل البدء فى كتابة الهيكل الاساسي فى بناء صفحة  html عاوز اوضح ان اكواد html هى عبارة عن مجموعة من  التاجات tags
وهذة التاجات تكتب بداخل < >
كما ان هذة التاجات لها بداية  < > start tag  .
وكذلك فى الاغلب لها نهاية <  /> end tag .

الهيكل العام لاي صفحة html
<html>

     <head>
 يتم بها وضع التاجات الخاصة بضبط  الصفحة مثل عنوان الصفحة وتنسيق الصفحة .
     </head >

     <body>
وهى تحتوى على العناصر  التى تظهر على صفحة الويب مثل النصوص والصور وهكذا .
    </body>

</html>
نلاحظ ان جميع التاجات الخاصة بهيكل صفحة html تبداء start tag مثل <html>
وتنتهى end tag   ب <html/>
بالمقدمة البسيطة دى قدرنا نعمل اول صفحة من صفحات html كما هو موضح بالصورة .
وكمان عرضنا بها عبارة welcome to html فى صفحتنا .
اخر ملحوظة لازم اقولها ان امتداد صفحات html هو
.html

html - html5 - html editor - html color codes - html table - html tags - html colors - html button - html color picker - html code - html tutorial - html comment
تعلم لغة البرمجة c++ - لغة البرمجة - تحميل برنامج لغة البرمجة - تعريف لغة البرمجة - بحث عن لغة البرمجة - شرح لغة باسكال - تعلم لغة البرمجة للمبتدئين - شرح لغة البرمجة c++ - تعليم لغة البرمجة - تعلم لغة البرمجة -
html - html and css - html and css design and build - websites - html5 - html for dummies 2019 - html css and javascript - html cheat sheet - html to display port - html for babies

تحياتى للجميع
Eng : Fawzy Syam