منتدى المعالي
 
عدد الضغطات : 1,273
ينتهي : 24-10-2012
Ma3ali Tube Towards Happiness الجـوال الغرفة الصوتية البطاقات الصـوتيـات مركز التحميل مجلة أجيال
Ma3ali Tube Be Happy الجـوال Ma3ali flickr الغرفة الصوتية البطاقات الصـوتيـات مركز التحميل مجلة أجيال



عدد الضغطات : 15,785عدد الضغطات : 5,499
ينتهي : 20-06-2012
عدد الضغطات : 10,014
ينتهي : 25-12-2012عدد الضغطات : 1,892

العودة   منتدى المعالي > العالم الرقمي > منتدى الحاسب الآلي و ورشة الصيانة والاستفسارات > فريق التعلم الذاتي لبناء المواقع > مسار الواعدين

مسار الواعدين هنا نُرحّب بالمبتدئين . .

موضوع مغلق
 
LinkBack أدوات الموضوع انواع عرض الموضوع
قديم 25-08-2007, 02:58 PM   #1
 
الصورة الرمزية عطر الكلام





عطر الكلام is on a distinguished road



افتراضي نظرة مبسطة للغة HTML قبل البدء في الدروس



.

.




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

وهذا ما سنقوم به في هذا الفريق
سندرج لغة الـ Html في نظام التشغيل في ادمغتنا



ماهي لغة الـ html ?

التسمية أخذت من إختصار لـ Hyper Text Markup Language
لغة تستخدم لإنشاء المواقع فقط.. أي انها ليست لغة برمجة لوحدها..
لذا فهي لغة بسيطة لا تحتاج لبرنامج مترجم خاص بها ولا ترتبط بنظام تشغيل معين
ولا تحتاج لخوضها إلا القليل من التفكير المنطقي وترتيب الأفكار.

قارئ اللغة..

القارئ لها هو متصفح الانترنت غالبا بغض النظر عن النظام المستخدم
اي ان الوندوز والماكنتوش وغيرها .. ستقرأ اللغة في كلاهما بنفس الطريقة


كتابة اللغة:

لا تحتاج هذه اللغة لأي برامج خاصة لكتاباها .. بل نحتاج فقط لأي برناج نصوص بسيط
كالمفكرة الموجود في الوندوز ..
ولكن هناك العديد من البرامج التي تستخدم لإنشاء صفحات Html حتى لو كنت تجهل اساسيات اللغة
وطريقة عملها يقوم المستخدم من خلالها بكتابة الصفحات وتصميمها بما تحويه من نصوص ورسومات
وجداول ثم يقوم البرنامج بتخليق الوسوم المناسبة وتحويل هذه الصفحات من وراء الكواليس تلقائياً
وحفظها بتنسيق html. أي أن دور المستخدم ينحصر في الكتابة والتصميم فقط، دون معرفته للشيفرة
التي استخدمت. وبالتالي عدم قدرته على التحكم بأي وسم أو تعديل الشيفرة حسب الحاجة، إلا من خلال
إعادته للتصميم الأساسي ثم إعادة التحويل والحفظ من قبل البرنامج.

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


اساسيات في الـ Html

الأساس في لغة الـ Html هو ما يدعى بـ الوسم (TAG)
حيث تتكون مفردات لغة Html من الوسوم TAGS .
وهي تستخدم بشكل أزواج وتكتب بالصيغة التالية (من اليسار إلى اليمين):



فعلى سبيل المثال الوسم <b> يستخدم لكتابة الكلمات بخط أسود عريض Bold وذلك بالشكل التالي:

كود:
<b> Text <‎/b>

فكما نلاحظ.. يبدأ الوسم بكونه بين قوسين.. وينتهي بنفس الشكل مع وجود علامة / الشرطة المائلة
دليل ختام الوسم..


ملف الـ Html

غالبا ملف الـ Html له تركيب بسيط وسهل.. من المفترض عند البدء بمشروع
التركيز على هذا التركيب..
الصورة التالية تشرح التركيب لملف الـ Html ببساطة



إذن..
ملف Html يبدأ دائماً بالوسم <html> وينتهي بالوسم <‎/html>. لا تنسوا ذلك!

أما الوسم <head> فيحدد بداية المقطع الذي يحتوي على المعلومات الخاصة بتعريف الصفحة
وهي غالباً لا تكون في نفس مضمون الصفحة الظاهر للزائر.. ولكنها مخفية تقريبا
كالعنوان الظاهر على شريط عنوان المتصفح. وهذا العنوان بدوره يحتاج لأن يوضع بين الوسمين:
كود:
<title> … <‎/title>
وبالطبع يجب كتابة الوسم <‎/head> لكي ننهي هذا المقطع.

نأتي إلى الوسم <body> والذي يتم كتابة نصوص صفحة الويب ضمنه،
بالإضافة إلى إدراج الصور والجداول وباقي محتويات الصفحة.
وهو أيضاً يحتاج إلى وسم الإنهاء <‎/body>

هذا مثال لصفحة ويب بسيطة جداً

كود:
<html>
<head>
<title>
فريق التعلم الذاتي
<‎/title>
<‎/head>
 
<body>
شبكة المعالي الإسلامية
<‎/body>
<‎/html>
قم بفتح المحرر الخاص بك والذي ذكرناه في المتطلبات.. او افتح مثلا برنامج المفكرة
والصق الوسوم السابقة فيه.. واحفظه باي اسم .. ولاتنس ان ملفات الـ HTML
تنتهي بالصيغة: htm و html
اي لو كنت ستسمي ملفك باسم test مثلا
ستحفظه بالاسم test.htm
أو test.html
وكلامهما صحيح.. وبعد الحفظ افتحه بمتصفح الانترنت وسترى النتيجة

مبروك هذه اول صفحة لك اذا قمت بالتجربة السابقة معنا


هذا مدخل سريع للغة المدروسة.. وباذن الله سيكون القادم ابسط وايسر

وفقنا الله واياكم





مقتبسات . . من مشاركات متميزة


المشاركة الأصلية كتبت بواسطة LaLLaKy مشاهدة المشاركة
--------------------------------------------------------------
سوف أشرح لـكـم وحـده وحـده طريـقة حفظ صفحة الـ HTML باذن الله
باستخدام المفكرة العاديـة :







----------------------------------------

بعد الحفظ اذهبوا على ايقونة الملف ستجدوها كصفحة انترنت
أفتحوها عادي وراح تفتح باذن الله


المشاركة الأصلية كتبت بواسطة twinkle مشاهدة المشاركة
درس اليوم كان عبارة عن كتابة التاجات التالية:

html وتكتب بدايتها <html> ونهايتها </html>
و head وتكتب بدايتها <head> ونهايتها </head>
و title وتكتب بدايتها <title> ونهايتها </title>
و body وتكتب بدايتها <body> ونهايتها </body>


حيث أن أول الكود يبدأ بـ <html> وآخره يختتم بـ </html> ويتخلله باقي الأكواد

بعدها تقسم الصفحة إلى قسمين: رأس و جسد

الرأس يكتب فيه عدة أكواد ومنها كود العنوان وهو ما يظهر أعلى الصفحة (على شريط العنوان)

الجسد يكتب فيه أغلب الأكواد وهو ما يظهر على الصفحة البيضاء أمام المتصفح


رأس الصفحة يكتب مابين <head> و </head>

وجسد الصفحة (النص) يكتب ما بين <body> و </body>



والعنوان يعتبر جزء من رأس الصفحة وهو الكلام الذي يكتب على شريط العنوان
يكتب العنوان محصورا بين <title> و </title>
وبما أن العنوان جزء من رأس الصفحة إذا يكتب العنوان داخل كود رأس الصفحة.... أي:

<head>
<title>
هنا يكتب العنوان
</title>
</head>


ثم يكتب تحته النص الذي سيظهر على الصفحة البيضاء (جسد الصفحة)
<body>
هنا نكتب النص
</body>



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

فالنص العريض يكتب ما بين <b> و </b>
والنص الذي تحته خط يكتب ما بين <u> و </u>
والنص الذي يتوسطه خط يكتب ما بين <s> و </s>
والنص المائل يكتب ما بين <i> و </i>
وإذا كتبنا النص من دون تنسيقات يكتب نصا عاديا


مثلا:
<body>
<b> نص عريض </b>
<u> نص تحته خط </u>
<s> نص يتوسطه خط </s>
<i> نص مائل </i>
</body>


وهذا هو درس اليوم

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

<html>

<head>
<title>
هنا يكتب العنوان
</title>
</head>


<body>
نص عادي
<b> نص عريض </b>
<u> نص تحته خط </u>
<s> نص يتوسطه خط </s>
<i> نص مائل </i>
</body>

</html>




ملاحظات:
1) يفضل وبشدة كتابة الوسم tag بالحروف الصغيرة

2) يفضل وبشدة عند كتابة كل وسم أن يكتب بداية الوسم ثم نهايته ... مثلا حينما نكتب <html> نكتب تحتها مباشرة </html> ثم نكتب بينهما باقي الأكواد... لأننا إذا لم نحرص على كتابة إقفال الوسم قد ننسى إحدى الوسوم مفتوحة مما تتسبب لنا بالمشكلة

3) هناك طريقتين لكتابة اللغة.. إما في المحرر الخاص بها (مثل http://htmledit.squarefree.com/ ومثل HTML Pad)
أو تكتب في مفكرة.. ثم تحفظ... ثم يغير امتدادها إلى html (نغير اسم المفكرة، فنمسح txt ونكتب html ) ، فستظهر رسالة تقول هل تريد تغيير الملف ؟ نقول نعم... ثم يتحول الملف إلى صفحة انترنت اكسبلورر (أو المتصفح الافتراضي على الجهاز)
نفتح الملف (أو المتصفح) لنجد ما كتبناه كعنوان أو كنص وبنفس التنسيقات المكتوبة

4) يمكننا رؤية كود الـHTML لأي صفحة انترنت من: عرض --> مصدر View --> source


وبالتوفيق ^_^



المشاركة الأصلية كتبت بواسطة راحة بال مشاهدة المشاركة
الصراحة دروس سهلة

طبعاً كالعادة بحثاً عن التقدم

تقدمت عليكم بخطوة لأني اريد أتعلم بقدر المستطاع وبأقصر تحسباً لأي ظرف

وهذا التبيطق



وهذا الكود

كود:
 <HTML>

<Head>

     <title> راحة بال
     </title>

   </Head>

 
 <Body>
    <p><b> راحة بال فريق التعلم الذاتي لبناء المواقع </b></p>
   <img src="C:\11111.gif">

  </Body>


</HTML>
أعجز عن وصف سعادتي لما نجحت في اظهار الصورة طبعا ً استعنت بشرح في احد المنتديات وكان سهلة مرة

وكانت الاستفادة الكبرى من هنا

أعجز عن شكركم

المشاركة الأصلية كتبت بواسطة twinkle مشاهدة المشاركة
نصيحتي

أي وسم tag يكتب على طوووووول اكتبوا النهاية حقته

يعني أول شيء اكتبوا

<html>
ثم تحتها على طول
</html>

ثم اكتبوا بينها اللي تبونه

المهم أي tag اكتبوا بدايته ونهايته.... لأن مع طول الكود راح ننسى تاجات ما نسكرها... وراح تطلع لنا مشاكل

فمن الآن نبدأ بداية صحيحة ^_^


وهذا تطبيقي:

كود:
<html>

<head>

<title>
الدرس الأول
</title>

</head>


<body>
الحمد لله الذي بنعمته تتم الصاحات

<b>
الحمد لله
</b>

<U>
الذي بنعمته
</U>

<I>
تتم
</I>

<s>
الصالحات
</s>

</body>

</html>
واستخدمت U و I و S مثل ما استخدمنا B

B للخط العريض
U تحته خط
I مائل
S يتوسطه خط

^_^

المشاركة الأصلية كتبت بواسطة twinkle مشاهدة المشاركة
زهرة البيلسان

العنوان يوضع بين <title> و </title> وليس بين الـhead مباشرة

بل يكتب العنوان داخل الـtitle اللي هو داخل head >>>>>>>>>>>>>>> بس تحوووووس *_*

يعني الـhead جواته الـtitle ، وجوات الـtitle يكتب العنوان




.

.
.


التعديل الأخير تم بواسطة twinkle ; 28-10-2008 الساعة 12:41 PM. سبب آخر: تعديل العنوان
عطر الكلام غير متواجد حالياً
 
   
إظهار / إخفاء الإعلانات 
منتديات مسلمة النسائية مساحة إعلانيه
قديم 25-08-2007, 08:31 PM   #2
 
الصورة الرمزية محمد جبلي

افتراضي

شــرح وافــي ماشــاء الله

بارك الله فيــكــم

ســوف نقوم بإضافـة بعـض المعـلومات بعد الصلاة بإذن الله ...

---------------------- معلومات من المصـــدر --------------

مـــا هــو مـلـــف الـ HTML ؟

* الـ HTML إخـتـصـار لـ Hyper Text Markup Language
بـمعـنى : لغـة ترميز النص التشعبي || أو || لغـة ترميز النصوص التشعبيـة

* ملف الـ HTML هـو ملف نصي يحتوي على وسوم ( TAGS )

* هـذه الوسوم تخـبـر المتصفـح كيـف يـعرض الصفحـة

* ملـف الـ HTML يجب أن يحفظ بإمتداد .html أو .htm

* ملف الـ HTML ينشىء باستخدام محرر نصوص بسيط

------------------------------------------------------


التعديل الأخير تم بواسطة محمد جبلي ; 25-08-2007 الساعة 09:02 PM.
محمد جبلي غير متواجد حالياً
مشاركة مميزة 1
 
   
قديم 25-08-2007, 08:47 PM   #3
 
الصورة الرمزية |ريمـ|





|ريمـ| is on a distinguished road



افتراضي

معلومات حلوه


جزاك الله خير ..

|ريمـ| غير متواجد حالياً
 
   
قديم 25-08-2007, 09:08 PM   #4
 
الصورة الرمزية راحة بال





راحة بال will become famous soon enoughراحة بال will become famous soon enoughراحة بال will become famous soon enough



افتراضي

ماشاء الله عالشرح الرائع والطريقة السهلة

بوركت الايادي وبورك الجهد

وفقكم الله

وان شاء الله نمشي على نفس النسق

أرق تحية

راحة بال غير متواجد حالياً
 
   
قديم 25-08-2007, 09:11 PM   #5
 
الصورة الرمزية خربشات طفلة





خربشات طفلة is on a distinguished road



افتراضي

درس رائع وجميل
وقد جربته مرة واستانست لما فتحت الصفحة وكان فيها اسمي

سؤالي هل مطلوب تطبيق ولا لا
يعني لما أطبق أجيب شغلي تشوفونه

خربشات طفلة غير متواجد حالياً
 
   
قديم 25-08-2007, 09:13 PM   #6
 
الصورة الرمزية محمد جبلي

افتراضي

------------------ معلومات من المصــدر -------------------

الـفـائـدة من وسـم <html> هــي :

إخبــار المتصــفــح أن هــذه بدايـة ملف HTML

الفـائدة من أغلاق الوسم .. </html> :

إخــبار المتصفح أن هنــا نهـايـة ملف الـ HTML

.......

النصـوص الموجود بيـن وسم <head> هـو :
عبـارة عن معلومات ولاتظهـر في الصفحـة

......

النص الموجود بين وسمـ <title> هـو :
عــنــوان الصفحــة

......

النص الموجود بين وسم <body> هو :
مــا سوف يظهــر في المتصفــح

.......

النص الموجود بين وسم <b> :
سوف يظهر بشكل ثخيـن

----------------------------------------------------------------------

محمد جبلي غير متواجد حالياً
 
   
قديم 25-08-2007, 09:15 PM   #7
 
الصورة الرمزية محمد جبلي

افتراضي

نـــعـــم نتمنى من الجميــع وضــع الـتطبيق حقــه في مشاركــته

ويتم وضعـــه كـ كود

سعدت بمتعتكم بالدرس

وأي اضافـة لديكـم أتمنى اضافتهــا


محمد جبلي غير متواجد حالياً
 
   
قديم 25-08-2007, 09:18 PM   #8
 
الصورة الرمزية aroma





aroma is a splendid one to behold
aroma is a splendid one to beholdaroma is a splendid one to beholdaroma is a splendid one to behold



افتراضي

درس جميل و سهل

لكن أشكلت علي هذه النقطة

الحفظ افتحه بمتصفح الانترنت وسترى النتيجة
كيف أفتحه بمتصفح الانترنت ؟

حاولت من ملف ..ثم فتح و ادخلت اسم الملف لكن لم يفتح ..؟؟؟

aroma غير متواجد حالياً
 
   
قديم 25-08-2007, 09:20 PM   #9
 
الصورة الرمزية ريفــــــــــــــــان





ريفــــــــــــــــان is on a distinguished road



افتراضي

. . .

أروما
اختاريه من استعراض

.
. .

ريفــــــــــــــــان غير متواجد حالياً
 
   
قديم 25-08-2007, 09:21 PM   #10
 
الصورة الرمزية ريفــــــــــــــــان





ريفــــــــــــــــان is on a distinguished road



افتراضي

. . .

نتمنى
من الجميع بناء صفحة أساسية

مثل
السابقة . . لكن باختلاف النص المكتوب فيها

ووضعها
هنا ككود

.
. .

كود:
<html>
<head>
<title>
البداية
<‎/title>
<‎/head>
 
<body>
بسم الله الرحمن الرحيم
اللهم لك الحمد . . والشكر 
<‎/body>
<‎/html>


التعديل الأخير تم بواسطة ريفــــــــــــــــان ; 25-09-2007 الساعة 01:25 AM.
ريفــــــــــــــــان غير متواجد حالياً
 
   
قديم 25-08-2007, 09:21 PM   #11
 
الصورة الرمزية محمد جبلي

افتراضي

------------------ معلومـــات من المصــدر ------------

سـؤال هــل نستخـدم امتداد .html أو .htm ؟؟ ومالفرق ؟؟

كــان في الماضــي لا يمكن أن يكون امتداد الملف أكثـر من 3 حروف لذلـك كان يستخدم .htm
وكما يذكـر المصدـر فـهـي عادة سيئـة مازالت الى الآن !!

طبعاً الآن امتداد الملف يسمح بعدد كبير من الحروف لذلك جعل الامتداد .html

ويذكر المصدر أن استخدام امتداد .html أفضـل و أأمن !!

-------------------------------------

محمد جبلي غير متواجد حالياً
 
   
قديم 25-08-2007, 09:23 PM   #12
 
الصورة الرمزية محمد جبلي

افتراضي

أروما الملف التي حفظتيـه بإمتداد .html قومي بالضغط عليه مرتين وسوف يفتح

أصلا سوف يكون شكل أيقونته كـ صفحة انترنت

------------------

محمد جبلي غير متواجد حالياً
 
   
قديم 25-08-2007, 09:29 PM   #13
 
الصورة الرمزية aroma





aroma is a splendid one to behold
aroma is a splendid one to beholdaroma is a splendid one to beholdaroma is a splendid one to behold



افتراضي

حفظت الملف و فتحته

لكن الصفحة بيضاء ما فيها شيء مع العلم أني واضعه فيها الكود ؟؟؟

معليش ..من البداية أسألتي كثيرة ..

aroma غير متواجد حالياً
 
   
قديم 25-08-2007, 09:29 PM   #14
 
الصورة الرمزية محمد جبلي

افتراضي

-------------- نصــيــحــة ------------

يفضــل عمــل ملــف خــاص في المستندات أو في أي مكان تريدونه في جهازكم

توضع فيه الصفحـات التي يتم عملـها في الفريـق والتطبيقات

كــي لا تتبعثر في الجهاز و تضيع ولا يمكن الرجوع لـهـا

--------------------------------

محمد جبلي غير متواجد حالياً
 
   
قديم 25-08-2007, 09:30 PM   #15
 
الصورة الرمزية محمد جبلي

افتراضي

أرومـا حفظتي الملف بأي امتداد ؟؟

يجب أن يكون اما .html أو .htm والأول أفضـل

محمد جبلي غير متواجد حالياً
 
   
قديم 25-08-2007, 09:33 PM   #16
 
الصورة الرمزية ريفــــــــــــــــان





ريفــــــــــــــــان is on a distinguished road



افتراضي

. . .

أروما
. . أنا مثلك . . المهم افهمي كتابة الكود . .

إلى
أن نعرف السبب . .

.
. .

ريفــــــــــــــــان غير متواجد حالياً
 
   
قديم 25-08-2007, 09:40 PM   #17
 
الصورة الرمزية aroma





aroma is a splendid one to behold
aroma is a splendid one to beholdaroma is a splendid one to beholdaroma is a splendid one to behold



افتراضي

حفظته بصيغة html

ريفان ..عرفت كيف تكتب الاكواد و الحمد لله


مشكورين ,

aroma غير متواجد حالياً
 
   
قديم 25-08-2007, 09:45 PM   #18





twinkle is on a distinguished road



Talking


معلومات خفيفة ومفيدة

وبداية رائعة للدروس

جزيتم خيرا


فهمت ان بداية كل وسم (tag) هو نفس نهايته ، والفرق في وجود علامة / في نهاية الوسم

أي أن الوسم يحصر الكلام الذي يندرج تحته... فالعنوان يكتب بين علامة <title> وعلامة </title>


أي أن <title> يحصر العنوان.. و<body> يحصر نص الصفحة ... وهكذا ... والفرق بين أول وآخر الوسم هي علامة /


لدي سؤال: ماهي المعلومات التي ممكن كتابتها في جزء <head> غير العنوان؟؟

وهذا تطبيقي


كود:
<html>
<head>
<title>
العنوان: تحية الإسلام
</title>
</head>
<body>
السلام عليكم ورحمة الله وبركاته
</body>
</html>



أنا افتح مفكرة عادية

واكتب فيها الكود

بعدين أحفظها بامتداد html

بعدين افتحها وتطلع على شكل صفحة انترنت

أروما طبقي نفس اللي طبقته... وإن شاء الله تمشي معك

twinkle غير متواجد حالياً
 
   
قديم 25-08-2007, 09:47 PM   #19
 
الصورة الرمزية محمد جبلي

افتراضي



أتــمنـى ان تذكروا لـي اسم المحرر الذي استخدمتم ؟؟ هل هو HTML Pad ؟؟

مو معقول الكلام اللي تقولوه !!

محمد جبلي غير متواجد حالياً
 
   
قديم 25-08-2007, 09:47 PM   #20





twinkle is on a distinguished road



افتراضي

المشاركة الأصلية كتبت بواسطة aroma مشاهدة المشاركة
حفظته بصيغة html

ريفان ..عرفت كيف تكتب الاكواد و الحمد لله


مشكورين ,
الحمد لله


دووووم يا رب

twinkle غير متواجد حالياً
 
   
موضوع مغلق

مواقع النشر (المفضلة)


الذين يشاهدون محتوى الموضوع الآن : 2 ( الأعضاء 0 والزوار 2)
 
الأعضاء الذين قرؤوا الموضوع منذ 30 يوم ( أيام ) : 1 .
درر 1
أدوات الموضوع
انواع عرض الموضوع

تعليمات المشاركة
لا تستطيع إضافة مواضيع جديدة
لا تستطيع الرد على المواضيع
لا تستطيع إرفاق ملفات
لا تستطيع تعديل مشاركاتك

BB code is متاحة
كود [IMG] متاحة
كود HTML معطلة
Trackbacks are متاحة
Pingbacks are متاحة
Refbacks are متاحة



الساعة الآن 06:52 PM.