![]() | ![]() | ![]() | ![]() | ![]() | | | ![]() | | |
| | | | |||||||
![]() |
| | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | ![]() | |
| Ma3ali Tube | Be Happy | الجـوال | Ma3ali flickr | الغرفة الصوتية | البطاقات | الصـوتيـات | مركز التحميل | مجلة أجيال |
![]() ![]() |
![]() ![]() |
| |||||||
| مسار الواعدين هنا نُرحّب بالمبتدئين . . |
![]() |
| | LinkBack | أدوات الموضوع | انواع عرض الموضوع |
| | #1 | |
![]() | . . . بسم الله الرحمن الرحيم . . تحدثنا عن مكونات صفحة الـ HTML ونكتبها بهذه الطريقة ( اقتباساً من مشاركة عطر الكلام ) ويعجبني اذا اردت ان تقوم بتطبيق الدرس .. ألا تنسخ اي شي يكتب هنا لكن افتح المحرر الذي تستخدمه ( مفكرة أو الموقع او اي نوع آخر ) ثم ابدأ بالتالي: 1- اخبر المتصفح انه ملف Html بوضع الوسم <html> في البداية واقفله بالنهاية </html> ( مع اضافة الخواص والقيم المرادة) 2- قم بكتابة وسم الرأس <head> واقفله </head> وذلك بعد وسم البداية مباشرة 3- قم بكتابة وسم الجسم <body> واقفله </body> وذلك اسفل وسم الرأس 4- قم بادراج اوسمة الرأس كالعنوان مثلا <title> واقفله </title> 5- قم بادراج اوسمة الجسم باشكالها ![]() ________________________ يفضل أن تكتبها بهدوء كل مافتحت وسم تأكد من إغلاقه بحيث يضاف إليه الرمز / يظهر لنا الشكل النهائي للصفحة بهذه الصورة ![]() _________ :::: في غاية الأهمية :::: معرفة المصطلحات الانجليزية . . هذه مصطلحات تساعدكم في الفهم والتحضير وسنستخدمها . . بإذن الله كثيراً وسم Tag خاصية attribute قيمة Value عنصر Element ونعني بالعنصر أي الوسم من بدايته إلى نهايته ومايحتوي عليه كل هذا نسميه عنصر ___________________ نبدأ في درسنا اليوم : : Basic HTML Tags : : وسوم الـ HTML الأساسية هذه صفحته http://www.w3schools.com/html/html_primary.asp يتبع كل درس في الموقع تطبيق على المحرر . . بحيث يمكن التعديل عليه ثم النقر . . على الزر في أعلاه لمشاهدة التغيرات . . مثال موجود في المحرر يمكن التعديل عليه http://www.w3schools.com/html/tryit....=tryhtml_basic المثال السابق بسيط جداً عبارة عن استخدام الوسوم الأساسية لما تحتويه صفحة ويب يمكن مسح العبارة الموجودة وكتابة عبارة أخرى للتجربة _______________ الوسم الأول HTML <h1> to <h6> tags صفحته http://www.w3schools.com/tags/tag_hn.asp التعريف والاستخدام يرمز لها بالرمز <h> لأنها تخص العنوان heading وهذه المجموعة من الأوسمة توضح مستوى حجم العنوان بمعنى أن الوسم <h1> هو أعلى مستوى بحيث يأخذ العنوان أكبر حجم والوسم <h6> هو أصغر حجم للعنوان أو أصغر مستوى صيغته وأمثلة عليه : مثال1: كود: <h1>This is header 1</h1> This is header 1 مثال2: كود: <h4>This is header 4</h4> سيظهر بمستوى متوسط بهذا الشكل This is header 4 مثال3: كود: <h6>This is header 6</h6> سيظهر العنوان بهذا الشكل This is header 6 عند وضع الوسم يتم بشكل تلقائي النزول الى سطر جديد وعند اغلاق الوسم مايأتي بعده سوف يكون في سطر جديد بدون استخدام وسم السطر الجديد صورة تجمع المستويات الستة مع ناتج لكل وسم ![]() هنا للتجربة على المحرر http://www.w3schools.com/tags/tryit....ryhtml_headers _______________ للتحكم . . بالمحاذاة لدينا الخاصية align وتعني المحاذاة وتأخذ القيم center == توسيط == ![]() left == يسار == ![]() right == يمين == ![]() justify == متساوي أو ضبط == ![]() ولا ينصح بإستخدامهـا .. وينصـح باستخدام لغـة الـ CSS في تحديد الاتجاه فـي هـذه المرحـلة مـن طريـق فـريـق الـتعلم سوف نستخدمهـا ولكـن اذا أخذنـا لـغـة الـCSS فـسـوف نتركهـا !! مثال للتوسيط : كود: <h1 align="center ">This is heading 1</h1> http://www.w3schools.com/tags/tryit...._header_center --------------- الخواص القياسية لهذا الوسم Standard Attributes
ووظيفتها البدء من اليسار إلى اليمين أو العكس وتأخذ القيم rtl و ltr ________________________ الوسم الثاني HTML <p> tag رابطه http://www.w3schools.com/tags/tag_p.asp يشير إلى Paragraphs ( الفقرات ) التعريف والاستخدام يستخدم هذا الوسم لإخبار المتصفح أن ما سيأتي هو فقرة نصية إذا كتبنا فقرتين بدون هذا الوسم فإنها ستكون متلاصقة وكأنها فقرة واحدة أما إذا وضعناه بداية كل فقرة ونهايتها فإنها ستأخذ شكل فقرتين منفصلتين مثال لصياغته كود: <p>This is some text in a very short paragraph</p> This is some text in a very short paragraph من خواصه . . الخاصية align وتعني المحاذاة وتأخذ القيم left يسار right يمين center توسيط justify ضبط للتجربة على المحرر فقرات بأسطر مفردة http://www.w3schools.com/tags/tryit....ml_paragraphs1 فقرتين http://www.w3schools.com/tags/tryit....ml_paragraphs2 ______________ الوسم الثالث HTML <br> tag http://www.w3schools.com/tags/tag_br.asp التعريف والاستخدام يشير إلى يشير إلى Line Breaks ( خط فاصل ) ينهي أو يقطع السطر الحالي وينقل النص إلى سطر جديد تلميحات: 1- هذا الوسم لا يحتوي على قفل للوسم أي أنه لا يحتوي علامة نهاية 2- هذا الوسم لا يستخدم لتجزئة فقرة وإنما لفتح سطر جديد مثال: كود: This text contains<br>a line break النتيجة This text contains a line break للتجربة على المحرر http://www.w3schools.com/tags/tryit....ame=tryhtml_br _____________ الوسم الرابع وسـم الـ <hr> رابط الشرح .. http://www.w3schools.com/tags/tag_hr.asp والشكر . . لـ LaLLaKy لشرح هذا الوسم التعريف والاستخدام يقوم هذا الوسم بوضع خط أفقي في الصفحـة مثال .. كود: بسم الله الرحمن الرحيم <hr> مرحبـا بكم في فريق التعلم الذاتي لبناء المواقع الخصائص الإختياريـة : أولا : الخاصية align ولها ثلاث قيـم : center left right ولقد تم شرحها في وسم سابق ثانياً : الخاصية noshade وهي خاصية بدون قيمة، وعند وضعها تجعل الخط يبدو مصمتا وليس منحوتا كما في الحالة القياسية مثأل .. كود: بسم الله الرحمن الرحيم <hr noshade="noshade"> مرحبـا بكم في فريق التعلم الذاتي لبناء المواقع ثالثاً : الخاصية size تحدد سمك الخط الأفقــي رابعـاً: الخاصية width يحدد عرض الخط الأفقي كيف نعطي الخاصية width قيمة؟ طريقة اسناد قيمـة لـ size و width : هنــاك طريقتيــن : الطريقة الأولى : كتابة المقاس كرقم مباشرة والرقم سوف يكون بالبكسل ( pixels ) مثال .. كود: <hr width="50" size="14"> مثـال .. كود: <hr width="50%" size="14%"> لللتجربة على المحرر http://www.w3schools.com/tags/tryit....ame=tryhtml_hr ... جميع الخصائص الإختياريه لا ينصح باستعمالها وإستعمـال لغة الـCSS بدلا عنهـا ... ولكـن الآن سوف نستعملهـا وعند الوصول الـى لغـة الـCSS سنتركهـا !! _______________ الوسم الخامس HTML <!--...--> tag http://www.w3schools.com/tags/tag_comment.asp يستخدم عند إدراج تعليق توضيحي في الكود لن يظهر في الصفحة ولن يؤثر فيها وإنما يستفيد منه المبرمج . . عندما يرجع للكود يتذكر. . وظيفة هذا الكود أو لما ذا . . كتبه . . . مثال على طريقة كتابته في الكود كود: <!--This text is a comment--> <p>This is a regular paragraph</p> This is a regular paragraph فقط . . ولن يظهر التعليق المكتوب . . _______________________ انتهى الدرس . . ولله الحمد نصيحة طبقوا الوسوم الخمسة . . للفهم _______________________ ::: الواجب ::: يتم حله في رد واحد . . للتنظيم - كم عنصر Elements في هذه الصورة ؟ http://ia341231.us.archive.org/0/items/mawake/saew.jpg -أنشيء صفحة بحيث يكون الشكل النهائي لها . . كما في الصورة http://ia341210.us.archive.org/1/ite...aaaaaaaaaa.jpg حاول أن تكتشف مالوسوم المستخدمة وما الخصائص والقيم حتى لو وجدتم فيه صعوبة نحاول معكم لأنه يدربكم على القادم . . لا تتهاونوا فيه ______________ وجزاكم الله خير على المتابعة ____________ | |
| التعديل الأخير تم بواسطة ريفــــــــــــــــان ; 25-07-2009 الساعة 03:41 PM. | ||
| |
| |||
| منتديات مسلمة النسائية | مساحة إعلانيه | ||
| | #2 |
![]() ![]() ![]() |
بارك الله فيك ونفع بك قمة الروووعة والوضوح والسهولة التطبيق في الطريق |
| |
| | #3 |
| .. حسبي الله وكفى .. |
ما شاء الله عليكم متابعه بصمت ): لكن في الموضوع السابق طبقت أختي العين الناقدة ولكن لم تردوا عليها نريد ان نعرف هل التطبيق صحيح بوركتم |
| |
| | #4 |
![]() | . . . أسيرة حزن تم . . التعليق على تطبيق العين الناقدة في الموضوع السابق في آخر رد . . . |
| |
| | #5 |
![]() ![]() ![]() ![]() | سؤال بسيط : هل يجتمع كود HTML <h1> to <h6> tags و <p>?? كيف تكتب ؟؟ يعني كيف تكون فقرة وبنفس الوقت الخط يكون عريض ؟؟ ,, مشكورين ,, |
| |
| | #6 |
![]() | . . . أروما سؤال رائع . . لكن بما أنه تعليم ذاتي أفضل اكتشافه بأنفسكم . . عندكم محرر . . حاولوا . . لكن سأجيب . . وضعك لـ <h1> يكفي عن الـ <p> لأنه تلقائي سيضع مابعده في سطر آخر جربي هذا الكود كود: <html> <body> <h1> فريق التعلم الذاتي وأروما عضوة نشيطة فيه جزاها الله خير ووفقها </h1> </body> </html> |
| |
| | #7 |
![]() | . . . أيضاً هنا وضعتهما معاً . . لا حظي كود: <html dir="rtl"> <body> <h1> <p> فريق التعلم الذاتي </p> <p> وأروما عضوة نشيطة فيه </p> <p> جزاها الله خير ووفقها </p> </h1> </body> </html> . .. |
| التعديل الأخير تم بواسطة ريفــــــــــــــــان ; 26-08-2007 الساعة 09:57 PM. | |
| |
| | #8 |
![]() | . . . وهذا مثال آخر . . لا حظي المرونة بإمكانك أن تكتبيه في اكثر من شكل لهذا حاولي الابتكار . . كود: <html dir="rtl"> <body> <h1> <p> فريق التعلم الذاتي وأروما عضوة نشيطة فيه جزاها الله خير ووفقها </p> </h1> </body> </html> |
| التعديل الأخير تم بواسطة ريفــــــــــــــــان ; 26-08-2007 الساعة 09:58 PM. | |
| |
| | #9 | |
![]() ![]() ![]() ![]() | اهاا ..هذا ما كنت أقصد توقعت أن يكتب بهذه الطريقة جزيتِ خيرا ع التوضيح * أما نشيطة ..الله يرفع قدرك : ) | |
| |
| | #10 |
![]() | . . . أيضاً يمكنك العكس بحيث تضعي الـ <p> في البداية ثم الـ <h1> على أسطر محددة وفائدة هذه . . هي انه يمكنك التحكم بحجم كل كلمة لوحده مثلاً فقرة مقاس خطها h3 لكن فيها سطر مهم وتريدين أن تجعلي مقاس خطه h1 فهذه الطريقة تفيدك . . . |
| |
| | #11 | |
![]() ![]() ![]() ![]() | أخشى أن أبتكر و ينتج شيء غير مقبول بتاتاً أو مخالف للمعايير عموما جاري التجريب ,, بوركتم ,, | |
| |
| | #12 |
![]() ![]() ![]() ![]() | ابتكرت فكان هذا الكود كود: <html> <body> <h1><p> شكرا لجهودكم المبذولة </p></h1> </body> </html> |
| |
| | #13 |
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
اعضاء الفريــق ... أخي الصغـيـر معانا في الفريق وقام بالتطبيق على الدرس الماضي وصراحةً أخطأ خطأ في الكود عرفت ايش هوا وصححته بعد معانات في معرفة الخطأ ولكـن الى الأن لـم أقتنع بالخطأ شـاهدوا الكـود ( الخطأ) كود: <html dir="rtl"> <head> <title>منارة المعالي</title> </head> <body> تطبيق الدرس الأول </body> </html> كود: <html dir="rtl"> <head> <title>منارة المعالي</title> </head> <body> تطبيق الدرس الأول </body> </html> ![]() ترا السؤال موجه للكل والمشرفين والمشرفات كمان ( تحــدي )
|
| |
| | #14 |
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() |
أختي ريفان تأكديي من اقفال وسم الـ <p> تمام !! حتى الكود اللي قبله اكل الاقفالات خطأ |
| التعديل الأخير تم بواسطة ريفــــــــــــــــان ; 26-08-2007 الساعة 09:56 PM. سبب آخر: سأختار اقتباس اخترت تعديل | |
| |
| | #15 | |
![]() ![]() ![]() ![]() ![]() ![]() ![]() |
الخطأ في الوسم<title/> في الكود الأول حط مسافة بين / و > فما طلع لنا شي .. و الصح أننا ما نحط مسافة .. أتمنى أنه صح .. ![]() طبعاً ما عرفت الخطأ إلا بعد ما أخذت الكود و رحت طبقتهم الإثنين في المحرر .. | |
| |
| | #16 |
![]() | 88 8 أكيد إستخدم الـ ' مرتين وليس " ![]() . . |
| |
| | #17 |
![]() |
السلام عليكم : تطبيقي هو في هذا الكود : كود: <h2>بسم الله الرحمن الرحيم</h2> <hr noshade="noshade"> <p>دورة منتدى المعالي لبناء المواقع </p> <p>دورة مميزة ورائعة جدا </p> إنتهى تطبيقي والحمد لله أسأل الله أن يكون صحيحا<hr> عدد رموز Elements خمسة رموز |
| |
| | #18 |
![]() |
تنبيه مههههههههههم جداُ <h1 align="center">This is heading 1</h1> المسافة هذا غلط الرجاء عند الكتابة حذف المسافة <h1 align="center ">This is heading 1</h1>مكان الابتسامة --------- تــم تعديل المشاركـة من قبل LaLLaKy ----------أخــي الصغــير أكتشف خطأ في الشرح .. في المثال دا / كود: <h1 align="center ">This is heading 1</h1> وهذا خطأ ويقوم بإلغاء عمل الخاصيـة نهائيـاً لذلك جرى التنبيــة لتعديل ... --------------------------- |
| |
| | #19 | |
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() | لاتوجد مسـافة نهائياً لا في الكود الخطأ ولا في الكود الصح !!! | |
| |
| | #20 |
![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() | لالا لم يعمل كما قلتي !! تأكدي من الكوديـن |
| |
![]() |
| مواقع النشر (المفضلة) |
| الذين يشاهدون محتوى الموضوع الآن : 2 ( الأعضاء 0 والزوار 2) | |
الأعضاء الذين قرؤوا الموضوع منذ 30 يوم ( أيام ) : 0 .
| |
| الموضوع لم يُقرأ بعد |
| أدوات الموضوع | |
| انواع عرض الموضوع | |
| |