KNIVK @knivk - Tumblr Blog

الإطارات HTML Iframes

في HTML يوجد وسم iframe وهو لعرض صفحة الويب داخل إيطار في صفحة الويب .

مثال

http://www.knivk.com/

طريق اضافة ايطار Iframe

يتم تعريف الإيطار في HTML بستخدام وسم :

خاصية src وهي لتحديد عنوان الويب اللذي سوف يتم تضمينه داخل الإيطار .

يتم استبدال URL بعنوان الويب اللذي سوف يتم تضمينه داخل الإيطار .

الطول و العرض – iframe

يتم استخدام height للطول و heightللعرض لتحديد حجم…

View On WordPress

#HTML #html tutorial #HTML5 #Iframes #دروس HTML #دورة HTML #شرح HTML

خاصية HTML class

خاصية class في HTML تسمح لك بعمل تصميم مشابه لعدة وسوم .

في المثال التالي لدينا ثلاث وسوم وكله نفس الوسم وهو سوف نقوم بعمل تصميم بستخدام class لجميع الوسوم :

مثال

div.cities { background-color: black; color: white; margin: 20px 0 20px 0; padding: 20px; } المسجد الأقصى

المسجد الأقصى أحد أكبر مساجد العالم ومن أكثرها قدسيةً للمسلمين، أولَى القبلتين في…

View On WordPress

#class #div #HTML #html tutorial #HTML5 #inline #دروس HTML #دورة HTML #شرح HTML

display العرض HTML

كل وسم في HTML يحتوي على قيمة display العرض الافتراضي اعتمادا على نوع الوسم , قيمة العرض الافتراضي لمعظم الوسوم هي block و inline .

خاصية Block

يوجد العديد من الوسوم له تاثير Block وهي دائما تبدا على سطر جديد ويستخدم العرض الكامل المتاح ( يمتد الى اليمين و اليسار بقدر ما يمكن ).

وسم وله تاثير Block

امثلة لوسوم له تاثير block :

-

خاصية inline

خاصية Inlineلا يستخدم…

View On WordPress

#block #display #HTML #html tutorial #HTML5 #inline #دروس HTML #دورة HTML #شرح HTML

القوائم HTML

القوائم HTML مثال على القوائم المرتبة و القوائم الغير مرتبة قائمة غير مرتبة:

المادة

قائمة مرتبة:

المادة الاولى

المادة الثانية

المادة الثالثة

القوائم الغير مرقمة

يتم بناء قائمة غير مرتبة بستخدام وسم <ul> ويتم وضع البيانات داخل وسم <li>

سوف يتم وضع علامات قبل بيانات القائمة (دوائر صغيرة سوداء):

مثال

تطبيق

قهوة

ش…

View On WordPress

#CSS #HTML #html tutorial #Lists #دروس HTML #دورة HTML #شرح HTML

الجداول HTML

تستخدام الجداول HTML لعمل ترتيب للبيانات مثل النصوص و الصور و الروابط الى مصفوفات واعمدة من الخلايا.

لإستخدام جداول HTML يتم استخدام وسم <table> اللذي يستخدم وسم <tr> لإنشاء صفوف للجدول و وسم <td> لإنشاء خلايا .

مثال

محمد طبيب 30 عبدالله مهندس 50 صالح مدرس 39

View On WordPress

#HTML #html tutorial #table #الجداول #دروس HTML #دورة HTML #شرح HTML

الصور HTML

يوجد الكثير من انواع الصور امثلة:

JPG GIF PNG

يمكن اسخدام الصور في HTML بستخدام وسم <img>.

وسم <img> فارغ ,فإنه يحتوي على الخصائص فقط ولا يستخدم وسم الاغلاق.

استخدم خاصية src لتحديد عنوان الرابط للصورة.

مثال كود HTML :

خاصية alt

خاصية altتقوم هذه الخاصية باظهر نص بديل…

View On WordPress

#GIF #height #HTML #HTML5 #images #img #JPG #Knivk #Knivk.com #planetmap #png #programming #src #style #width #الصور

الروابط HTML

يوجد هناك روابط في كافة صفحات الويب تقريبا , روابط تسمح للمستخدمين الانتقال من صفحة الى صفحة اخر.

تكوين الروابط يتم عن طريق النصوص او الصور بمجرد الضغط عليه يتم الانتقال الى صفحة اخر.

تكوين الرابط

يمكن تكوين الروابط في HTML بستخدام وسم <a> .

مثال كود HTML :

<a href="url">نص الرابط</a>

<a href="http://www.knivk.com">استكشاف خدمة Knivk للدروس</a>

تطبيق : استكشاف خدمة Knivk للدروس

خ…

View On WordPress

CSS التصميم HTML

لا يقف التصميم على استخدام الوسوم في الصفحات فقط.

يمكن عمل تصميم على الصفحة بستخدام 3 طرق:

اضافة خاصية style الى وسم HTML.

دخل الصفحة – استخدم وسم <style> داخل وسم <head> في HTML.

خارج الصفحة – استخدم ملف او اكثر من ملفات css الخارجية.

التصميم الخارجي هو الاكثر شيوعا للاتحفاظ بالتصميم الموجود داخل ملف css منفصل

ولكن في هذا الدورة سوف نقوم بستخدام التصميم الداخلي لسهولة…

View On WordPress

#background-color #blue #body #border #class #color #CSS #DOCTYPE #font-family #font-size #h1 #head #href #HTML #HTML5 #id #link #margin #p #padding #style #styles.css #التصميم #وسم

التعليقات HTML

التعليقات

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

استخدم <-- التعليق --!> لاضافة التعليقات في HTML.

علامات التعليق

باستطاعتك اضافة تعليقاتك الى ملف HTML باستخدام اضافة الجملة التالية:

تستخدم علامة ! في علامة الفتح ولكن لا تستخدم في علامة الإغلاق.

لا يتم عرض التعليقات في المتصفح .

اضافة التعليقات يمكن ان تساعدك على…

View On WordPress

#border #endif #HTML #HTML5 #if IE 8 #Internet Explorer #Knivk #p #إكسبلورر #الاكواد #البرمجية #التعليقات #المتصفح #متصفح #ملاحظاتك

الاكواد البرمجية HTML

تنسيق الاكواد البرمجية

عادتا ما تستخدم لغة HTML محتوى متغاير للحجم و التباعد عن الاحرف.

سوف نقوم بستخدم وسوم عرض الاكواد البرمجية بشكل منسق.

هناك وسوم تقوم بعمل التنسيق بشكل جيد مثال <kbd> و <samp> و <code> .

تنسيق لوحة المفاتيح

وسم <kbd> يقوم هذا الوسم باضافة تلميحات للوحة المفاتيح.

مثال كود HTML :

تطبيق :

لفتح…

View On WordPress

#code #HTML #HTML5 #kbd #pre #samp #var #الاكواد #البرمجية #كود #لوحة المفاتيح #وسوم

اقتباس النصوص HTML

اقتباس النصوص HTML اقتباس :

النص التالي تم اقتباسه من موقع aitnews:

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

الاقتباس القصير

يقوم وسم <q> بوضع علامتي اقتباس .

عادتا ما يقوم المتصفح بوضع علامات الاقتباس حول وسم <q> .

مثال كود HTML :

حدثت جوجل محرك بحثها الخاص بسطح المكتب لتضيف ميزة مهمة، حيث تعرض نتائج…

View On WordPress

تنسيق النصوص HTML

في الدرس السابق تعرفنا على خاصية التصميم.

في هذا الدرس سوف نتعلم وسوم لتنسيق النصوص.

هناك وسوم HTML لتنسيق تم تصميمه للوسوم مسبقنا مثال <b> و <i> وتسخدم هذه الوسوم للنص الغامق و المائل.

امثلة لخصائص الوسوم :

نص غامق.

نص مهم

تؤكد النص

نص واضح

نص صغير

النص المحذوف

نص منخفض

نص مرتفع

النص الغامق

وسم <b> وظيفة هذا الوسم هو التاثير على النص جعل النص غامق فقط دون تاثيرة اضافية.

مث…

View On WordPress

#b #del #em #HTML #HTML5 #i #ins #mark #p #strong #sub #sup #التصميم #النصوص #الوسوم #تنسيق النصوص #كود #وسوم

التصميم HTML

تحتوي وسوم HTML على التصميم الافتراضي ( لون الخلفية ابيض ولون النص الأسود ).

يمكن تغيير تصميم الوسوم HTML بستخدام خاصية style .

في المثال التالي سوف نقوم بتغيير لون الخلفية.

مثال كود HTML :

استكشاف خدمة Knivk للدروس دروس وأدوات لمساعدتك على تطوير برمجتك الخاصة والاستفادة منه تجاريًا.

View On WordPress

#background-color #body #color #CSS #DOCTYPE #font-size #h1 #HTML #HTML5 #style #text-align #التصميم

الفقرات HTML

تنقسم HTML الى فقرات.

يقوم وسم <p> بعمل فقرة.

مثال كود HTML :

يقوم المتصفح تلقائيا بإضافة سطر فارغ قبل وبعد الفقرة.

عرض المحتوى

لا يمكنك ان تكون متاكداََ كيف سيتم عرض المحتوى.

يتم إنشاء شاشات كبيرة او صغيرة والنوافذ تتغير حجمها نتائج مختلفة.

لا يمكنك تغيير النتاج عن طريق إضافة المسافات او اضافة الخطوط.

يقوم المتصفح بازالة المسافات الزائدة والخطوط…

View On WordPress

#br #HTML #HTML5 #p #pre #XHTML #الفقرات #القصائد #المتصفح #الوسم #فقرات #فقرة.#كود

العناوين HTML

تكوين عناوين في صفحات HTML هام وفي هذا الدرس سوف نشرح ما هي العناوين المهمة.

وسوم العناوين HTML

هناك وسوم العناوين التي يتم استخدامه لتوضيح للزار و لمحركات البحث وسم h1 وسم h2 الى الوسم h6.

يتم تعريف هذه الوسوم من h1 وهو الاهم الى الوسم h6 الاقل اهمية.

مثال كود HTML :

<h1>عنوان 1</h1> <h2>عنوان 2</h2> <h3>عنوان 3</h3> <h4>عنوان 4</h4> <h5>عنوان 5</h5> <h6>عنوان 6</h6>

تطبيق :…

View On WordPress

#body #charset #DOCTYPE #h1 #h2 #h3 #h4 #h5 #h6 #head #hr #HTML #HTML5 #Knivk #Knivk.com #meta #p #title #UTF-8 #البحث #العناوين #محركات #موقعك #وسوم

الخصائص HTML

الخصائص تقوم بتوفير معلومات اضافية والتاثير عليه لوسوم HTML .

خصائص HTML

الخصائص تقوم بتوفير معلومات اضافية و التاثير عليه.

الخصائص دائماََ يتم وضعه داخل وسم البداية.

الخصائص تأتي بصيغة الاسم/القيمة مثال الاسم=” القيمة “.

خاصية lang

تستخدم خاصية lang لتحديد لغة الصفحة اذا كانت عربية ام انجليزية او اي لغة اخرى ,ويتم وضعه داخل وسم <html>.

تعريف لغة الصفحة مهمه لمحركات البحث .

م…

View On WordPress

#alt #ar #body #DOCTYPE #h1 #head #height #href #HTML #HTML5 #img #Knivk #lang #p #png #src #title #width #الخصائص #خصائص #وسم #وسوم

امثلة HTML

في هذا الدرس سوف نتطرق الى بعض الوسوم الاخر.

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

ملف HTML

لابد ان يكون في كل ملف HTML وسم <DOCTYPE html!> في اعلا الصفحة.

لابد ان يكون في كل ملف HTML وسم <html> وينتهي <html/>.

الجزء اللذي سوف يظهر في المتصفح بين <body> و <body/>.

مثال كود HTML :

شعار جوجل بحلّة جديدة أطلقت شركة جوجل اليوم شعارها بحلّة جديدة بعدما…

View On WordPress

#a #alt #body #DOCTYPE #h1 #h2 #h3 #h4 #h5 #h6 #height #href #HTML #HTML5 #http #img #Knivk #p #src #width #الوسوم #درس #وسوم

Trending Blogs

Recently Viewed Blogs

KNIVK