دروس كمبيوتر وصيانة دروس حاسب دروس مجلة  درس نيوك phpnuke الدروس دروس مسنجر MSN - yahoo - Gmail دروس منتديات vBulletin دروس الجوالات والهواتف دروس السي بنل cpanel دروس اكسس access دروس بيونت شوب برو - point shop pro دروس برمجة php - mysql دروس برامج منوعة software دروس ثري دي ماكس 3D max دروس جافا سكريبت JavaScript دروس دريم ويفر DreamWeaver دروس شبكات Networks دروس سويش - swish دروس فلاش - flash دروس فيجوال بيسك Visual Basic دروس فرونت بيج - frontpage دروس فوتوشوب photoshop دروس هكر hacker crack virus
توبيكات رمضان | رسايل رمضان | ثيمات رمضان | طبخات رمضانية | توبيكات رمضانية | صور عن رمضان | دعاء رمضان
احصائيات سريعة
اقسام على الموقع
دروس في أنظمة التشغيل | ماي سكيول - MySQL | لفيجوال بيسك - Visual Basic | المات لاب Matlab | اللينكس و اليونكس | الاسمبلي - ASSEMBLY | الاوتلوك - Outlook | البرمجة تحت اللنكس -Linux Programming | البرمجة تحت وندوز بواسطة دوال ال win API | البرمجة في بيئة الدوت نت .Net | التصمبم والرسوم | الدلفي - Delphi | الجافا - Java | السي - C | الصوت و الصورة | الوورد - Word | القسم العام للأوفيس | الكوبول - COBOL | control panel-ftp | اوراكل - Oracle | اكسل - Excel | تحميل الملفات | برامج متنوعة | برامج التصفح | برامج الحماية | برامج إنترنت | تعرّف على الويب | بوربوينت - Power Point | images | دروس : كمبيوتر وصيانة | دروس مجلة نيوك phpnuke | دروس مسنجر MSN - yahoo - Gmail | دروس منتديات vBulletin | دروس الجوالات والهواتف | دروس السي بنل cpanel | دروس اكسس access | دروس بيونت شوب برو - point shop pro | دروس برمجة php - mysql | دروس برامج منوعة software | دروس ثري دي ماكس 3D max | دروس تطوير المواقع والمنتديات | دروس جافا سكريبت JavaScript | دروس دريم ويفر DreamWeaver | دروس شبكات Networks | دروس سويش - swish | دروس فلاش - flash | دروس فلاش mx | دروس فى نظام الوندوز WINDOWS | دروس فىالباسكال - Pascal | دروس فيجوال بيسك Visual Basic | دروس فرونت بيج - frontpage | دروس فوتوشوب photoshop | دروس هكر hacker crack virus | سي ++ | سي شارب - #C | فيجوال سي ++ - ++ Visual C | قسم البرمجة العام | دروس فى لغة HTML
البحث في المواد

اكثر المحتويات زيارة
الدوال في الاكسل (6,311 مشاهده)
ربط قاعدة بيانات أكسس (MS Access) مع برنامج الفيجوال بيسك بطريقة(ODBC) (4,094 مشاهده)
الدرس الثالث : بعض تطبيقات الدوال في اكسل (3,063 مشاهده)
تعريف الاستعلام وطريقة عرضه في آكسس، أنواع الاستعلامات، نافذة تحديد الاستعلام! (2,377 مشاهده)
الدرس الثاني: بعض الحيل لتسهيل برنامج اكسل (2,277 مشاهده)
شرح طريقة استعمال الأوتلوك مع بريد الهوتميل (2,138 مشاهده)
تغيير لغة واجهة التطبيق من عربي الى انجليزي وبالعكس لـ Windows-based applications (2,112 مشاهده)
أنواع العلاقات وطريقة الربط بين الجداول. (1,901 مشاهده)
مقدمة عامة حول الاكسل وحيل خاصة بالاكسل (1,735 مشاهده)
أنشئ قاعدة بياناتك التي ستستند إليها في تعلم طريقة ربط الجداول والاستعلامات. (1,703 مشاهده)
الدرس الأول : عمل شريحة في البوربوينت (1,554 مشاهده)
دروس في الأوفيس الأكسس - Access0- (1,472 مشاهده)
دورة الأكسس: الدرس السادس : منوعات في أكسيس . (1,464 مشاهده)
كيفية حل مشاكل الانترنت اكسبلور Internet Explorer (1,441 مشاهده)
اضافه صوت ونص لخلفيه في باور بوينت (1,338 مشاهده)
شرح طريقة التجميع Grouping في برنامج الاكسل (1,301 مشاهده)
التعرف على مكونات الكمبيوتر (1,266 مشاهده)
برنامج Windows Movie Maker لتكوين أفلام (1,244 مشاهده)
درس تعريب المجلة (1,240 مشاهده)
دورة الأكسس: الدرس السادس : منوعات في أكسيس .0--- (1,229 مشاهده)
مقدمة في ربط قواعد البيانات داخل بيئة الـ .NET باستخدام الـ VB.NET (1,218 مشاهده)
كيف تجعل برنامجك أكثر تألقا وجمالا باستخدام أداة Active Skin (1,189 مشاهده)
ما هو المات لاب MATLAB؟ (1,157 مشاهده)
مقدمة عن لغة البيسك (1,120 مشاهده)
الفيجوال بيسك - مقدمة (1,080 مشاهده)
جديد مواد مع عشوائي
التحويل التلقائي للحروف ل- ل- ه إلى اسم الجلالة0---- (783 مشاهده)
النسبة المئوية لا تظهر بالخط العربي & الشدة وألف المد في لفظ الجلالة0---النسبة المئوية لا تظهر بالخط العربي & الشدة وألف المد في لفظ الجلالة0--- (483 مشاهده)
ضبط خيارات اللغة فى الـ Microsoft Word0--- (533 مشاهده)
استخدام لوحة المفاتيح في الـ Word0---- (698 مشاهده)
إضافة كلمة سر إلي ملفات الورد دون استخدام برامج0--- (780 مشاهده)
دمج المراسلات0-- (434 مشاهده)
وضع صورة كخلفية للنص0-- (558 مشاهده)
السماح للمستخدمين بتعديل أجزاء من ملف وورد محمي (Word2003)0--- (381 مشاهده)
كتابة الأرقام الكسرية ورموز المعادلات0-- (620 مشاهده)
درس كامل عن الدمج السهل من لوحة المفاتيح ف0-ي برنامج الـ Word (389 مشاهده)
دورة الأكسس: الدرس السادس : منوعات في أكسيس .0--- (1,229 مشاهده)
دورة الأكسيس : الدرس الرابع : العلاقات0---- (655 مشاهده)
أساسيات في Access0--0 (447 مشاهده)
تصميم تقرير لطباعة البيانات0---- (486 مشاهده)
تصميم نموذج استعراض البيانات‏0--تصميم نموذج استعراض البيانات‏0-- (470 مشاهده)
تصميم نموذج إدخال‎ ‎البيانات0--- (556 مشاهده)
إنشاء قوائم خاصة باستخدام الماكرو(1)0-- (434 مشاهده)
خطوات إنشاء الماكرو في تذييل النموذج (2)0-- (369 مشاهده)
خطوات إنشاء الماكرو في تذييل النموذج (1)0- (324 مشاهده)
استعلامات SQL في Access - تعديل الجداول وإضافة الحقول0- (460 مشاهده)
استعلامات SQL في Access - تحديث البيانات الجدولية0-- (413 مشاهده)
الاستعلامات الإجرائية -4 (استعلام الحذف)0--- (214 مشاهده)
الاستعلامات الإجرائية -2 (استعلام الإلحاق)0--- (292 مشاهده)
تصميم تقرير لطباعة الإجمالي0--- (321 مشاهده)
استعلامات التحديد Select Query مع أمثله (1)0--- (425 مشاهده)
اعلانات في الموقع على جميع الصفحات

الدرس الرابع: إنشاء موقعك الأول

مع كل ما تعلمته في الدروس السابقة أصبحت الآن على بعد دقائق من إنشاء أول موقع لك.


كيف؟


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


أيضاً عليك أن تفتح برنامج المفكرة "Notepad" والذي ستجده في قائمة إبدأ ثم برامج ثم أدوات:


كيف تفتح برنامج المفكرة


أنت جاهز الآن!


ماذا أفعل؟


لنبدأ بشيء بسيط، سنقوم بإنشاء صفحة تقول "مرحى! هذا هو موقعي الأول." أكمل القراءة وستعرف كم هو بسيط فعل ذلك.


لغة HTML بسيطة ومنطقية، المتصفح يقرأ HTML كما تقرأ أنت اللغة الإنجليزية: من الأعلى إلى الأسفل ومن اليسار إلى اليمين، لذلك صفحة HTML بسيطة تبدأ بما يجب أن تبدأ به أي صفحة HTML وتنتهي بما يجب أن يأتي في نهاية الصفحة.


أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم <html> لا توجد أي مفاجئة هنا، لذلك قبل أن تبدأ أي شيء أكتب "<html>" في أول سطر في برنامج المفكرة.


كما تتذكر من الدروس الماضية، <html> هو وسم البداية ويحتاج إلى وسم إغلاق لذلك لا تنسى كتابة وسم الإغلاق بعد سطرين فارغين، وبقية الوثيقة ستكتبها بين <html> و</html>.


الشيء التالي الذي تحتاجه صفحتك هو أمر رأس الصفحة "head" والذي يقدم معلومات حول الصفحة للمتصفح، وكذلك تحتاج إلى أمر "body" والذي سيحوي المحتويات التي تريد ان تضعها في الصفحة، أمر head أو رأس الصفحة (<head> و</head>) يوضع فوق أمر body أو "متن الصفحة" (<body> و</body>).


صفحتك يجب أن تكون بهذا الشكل:




<html>

<head>
</head>

<body>
</body>

</html>


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


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


جميل, لكن كيف أضيف المحتويات للموقع؟


كما تعلمت سابقاً، صفحة HTML تحوي جزئياً، رأس الصفحة ومتن الصفحة، في رأس الصفحة تكتب معلومات عن الصفحة نفسها، أما المتن فيضم المحتويات التي تشكل الصفحة..


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




<title>موقعي الأول</title>


لاحظ أن العنوان لن يظهر في الصفحة نفسها، أي شيء تريده أن يظهر في الصفحة يجب أن يضاف بين وسمي متن الصفحة


كما قلنا سابقاً، نريد للصفحة أن تقول "مرحى! هذا هو موقعي الأول"، هذا النص الذي نريد وضعه في الصفحة، لذلك علينا أن نكتب في متن الصفحة ما يلي::




<p>مرحى! هذا هو موقعي الأول.</p>


الحرف p في <p> هو اختصار "paragraph" أو فقرة، وهو أمر بسيط لإنشاء فقرات نصية.


صفحة HTML يجب أن تكون لديك بالشكل التالي:




<html>

<head>
<title>موقعي الأول</title>
</head>

<body>
<p>مرحى! هذا هو موقعي الأول.</p>
</body>

</html>


انتهينا! لديك الآن أول موقع حقيقي!


كل ما عليك فعله الآن هو حفظ الصفحة على القرص الصلب ثم عليك أن تستعرضها في متصفحك:



  • في برنامج المفكرة اختر "Save as..." من قائمة "File" في القائمة العلوية.
  • اختر "All Files" في نافذة "Save as type". هذا مهم جداً، لأنك إن لم تفعل ذلك ستقوم بحفظه كملف نصي وليس كملف HTML.
  • احفظ الصفحة باسم "page1.htm" الأحرف الثلاثة الأخيرة .htm تشير إلى أن الملف هو من نوع HTML، بإمكانك أن تحفظ تضع بدلاً منها ".html" وستكون النتيجة متماثلة، شخصياً أستخدم ".htm" دائماً، لكن بإمكانك أن تختار بينهما ما تشاء، فلا فرق بينهما، ولا يهم أين تحفظ الملف في القرص الصلب، ما دمت تتذكر أين حفظته لكي تستطيع إيجاده مرة أخرى.

حفظ الصفحة


الآن إذهب إلى متصفحك:



  • في القائمة العلوية اختر "Open" من قائمة "File".
  • إضغط على "Browse" في النافذة التي ستظهر لك.
  • إبحث عن الملف الذي قمت بإنشاءه واضغط على "Open".

استعراض الصفحة


الآن يجب أن تحوي الصفحة جملة "مرحى! هذا هو موقعي الأول." تهانينا!


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

درس الدرس الرابع: إنشاء موقعك الأول

أضف هذه المادة في موقعك:
مواد مشابهة:
الدرس التاسع: الصور الدرس التاسع: الصور
الدرس التاسع: الصور
(مرات المشاهدة: 63 مرات)
الدرس الرابع عشر: المعايير القياسية الدرس الرابع عشر: المعايير القياسية
الدرس الرابع عشر: المعايير القياسية
(مرات المشاهدة: 74 مرات)
إضافة الصور1 إضافة الصور1
إضافة الصور1
(مرات المشاهدة: 31 مرات)
الجداول |[( مقدمة )]| الجداول |[( مقدمة )]|
الجداول |[( مقدمة )]|
(مرات المشاهدة: 42 مرات)
 الدرس العاشر الدرس العاشر
الدرس العاشر
(مرات المشاهدة: 84 مرات)
الدرس الأول: لنبدأ الدرس الأول: لنبدأ
الدرس الأول: لنبدأ
(مرات المشاهدة: 78 مرات)
الدرس الثاني عشر: التصميم (CSS) الدرس الثاني عشر: التصميم (CSS)
الدرس الثاني عشر: التصميم (CSS)
(مرات المشاهدة: 113 مرات)
الدرس الثاني الألوان1 الدرس الثاني الألوان1
الدرس الثاني الألوان1
(مرات المشاهدة: 179 مرات)
الخطــوط وكيفية تنسيقها1 الخطــوط وكيفية تنسيقها1
الخطــوط وكيفية تنسيقها1
(مرات المشاهدة: 29 مرات)
bالدرس الحادي عشر bالدرس الحادي عشر
الدرس الحادي عشر
(مرات المشاهدة: 60 مرات)
fot
جميع الحقوق محفوظة :Copyright © All rights reserved