Download presentation
Presentation is loading. Please wait.
1
بسم الله الرحمن الرحيم برمجة الويب بلغة HTML 1
2
مقدمة هنالك أنواع متعددة من لغات البرمجة المستخدمة في تصميم صفحات الإنترنت ومن امثلة اللغات المستخدمة في برمجة صفحات الانترنت :
3
Java, PHP, Perl, ASP, CGI, Java Script Java Applet, JSP XML, DHTML, HTML, CSS لاحظ أن كل ما سبق يندرج تحت مسمى لغات برمجة صفحات الإنترنت مع تحفظ الكثير من المصممين على إطلاق لفظ لغة على بعضها
4
يمكن تصميم صفحات الإنترنت باستخدام البرامج الجاهزة مثل برنامج
فرونت بيج (FrontPage) نتسكيب نافيجيتر جولد Navigator Gold NetScape نت سكيب كمبوسر(NetScape Composer)
5
هي لغة ترميز النصوص التشعبية اختصار لـ Hypertext Markup Language .
لغة أتش تي أم أل HTML هي لغة ترميز النصوص التشعبية اختصار لـ Hypertext Markup Language . وهي أيضاً لغة الشبكة العالمية وهي تعمل علي اخبار المتصفح بكيفة عرض المعلومات في صفحة الويب. 5
6
الأهداف التعليمية: التعرف على فكرة البرمجة على الويب
التعرف على الأكواد والشفرات الخاصة بلغة Html التعرف على كيفية بناء الصفحات العنكبوتية على الويب التعرف على بناء الفقرات ووضع الألوان والصور
7
مزايا لغة HTML لغة مرنة سهولة الترميز والتشفير بهذه الطريقة لغة سهلة التعلم لغة مجانية تساعد في التعرف على البرمجة والتعديل في الأوامر الموضوعة بلغة جافا سكربت Java Script وجافا ابليت Java Applet يعتبر التعرف على لغة Html مقدمة للتعرف على اللغات البرمجية على الانترنت ك ASP و PhP سهولة إصلاح الخلل لا تحتاج ترخيص استخدام
8
احتياجات استخدام لغة HTML
ليست لغة برمجة بالمعني الكامل فهي لا تحتوي على متغيرات ولا جمل التحكم، لكن يمكن تضمين شيفرات من لغات اخرى عند الحاجة. و لا تحتاج لمترجم خاص. ولتصميم صفحة للنشر على الإنترنت باستخدام رموز إتش تي إم إل html نحتاج الي توفر الاتي : متصفح (Browser) وذلك حتى نتمكن من فتح ورؤية محتويات الصفحة التي نقوم بتصميمها. محرر نص (Text editor) و يفضل أن يكون بسيطا مثل المفكرة
9
قد نحتاج إلى برامج إضافية لعمل صفحات تحوي على صور وأصوات وصور متحركة، وهذه البرامج قد نحتاجها فيما بعد و هذه البرامج قد تكون بعض البرامج الجاهزة التي تحرك الصور مثل MS Gif Animator او برنامج فلاش
10
بعض المصطلحات المستخدمة
HTTP هي اختصار لكلمة ( (Hypertext Transfer Protocol وهي مجموعة من الرموز المسئولة عن إتمام عملية الاتصال بين الكمبيوتر الشخصي و المحتوي على متصفح (browser) وبين الخادم (server) وهو كمبيوتر الشركة المتصل بالإنترنت سواء كانت قريبة أم بعيدة. المتصل بالإنترنت سواء كانت قريبة أم بعيدة.
11
وهي اختصار للمصطلح URL (Uniform Resource Locator Uniform Resource Locator) عن العنوان الخاص بالصفحة الموجودة في الإنترنت حيث أن العناوين تكون على الشكل التالي ، حيث أن domain-name هو عنوان كمبيوتر الشركة أو موقعها path-name يشير إلى اسم الملف الذي نريد الوصول إليه.
12
HTML وهي اختصار للمصطلح (Hypertext Markup Language) وهي اللغة الأم والتي تكتب بها الصفحات الموجودة في الإنترنت Markup tag بطاقات الرموز وهي التي تبرمج بها الصفحات حسب الرغبة ومن خصائصها : توضع دائمًا بين قوسين على الشكل < >. يكون لكل بطاقة بداية ونهاية أي أن عمل كل رمز يبدأ من وجود بداية الرمز وينتهي بوجود رمز بإنهائه. عدم حساسية الرمز للحروف سواء كانت الحروف كبيرة او صغيرة أي ان <html> لا يختلف عن <HTML>
13
لتصميم صفحة أو صفحات على الإنترنت فإن المستخدم لا يحتاج أن يكون مشترك في الإنترنت أو متصل بها، بل كل ما يحتاج هو برنامج المفكرة Notepad)) و برنامج المتصفح فقط.
14
الرموز الأساسية للصفحة Main Tags
وهي الرموز التي تحدد خصائص الأجزاء الأساسية للصفحة مثل بداية الصفحة ونهايتها وعنوان الصفحة واتجاهها وكذلك بداية الجزء الخاص بمحتويات الصفحة ونهايته وغير ذلك من الاجزاء الأساسية للصفحة.
16
الشكل العام HTML <HTML> <HEAD> <title> </title> </HEAD> <BODY> </BODY> </HTML>
18
العنصر <html> تبدأ وتنتهي بها جميع صفحات الويب، له العديد من الخصائص اهمها: Dir والتي تحدد اتجاه الصفحة ولها القيم: rtl اليمين لليسار ltr اليسار لليمين lang والتي تحدد اللغة ولها القيم: ar اللغة العربية en اللغة الإنجليزية
19
العنصر <head> يحتوي الاضافات الخاصة بالمستند، مثل:
عنوان الصفحة title حقوق النشر اسم المحرر وغيرها
20
العنصر <title> يكتب هذا الوسم في قسم الرأس <HEAD> ويحدد عنوان الصفحة الظاهر في أعلى الشريط في المتصفح.
21
العنصر <body> يوجد فيه المحتوى الذي يراه المستخدم، ويحتوي على جميع العناصر في الصفحة مثل: العناوين Heading الفقرات Paragraphs الصور Pictures الجداول Tables وغيرها
22
خصائص الوسم <body>
توجد العديد من الخصائص ومن امثلتها : لون خلفية المحتوى: bgcolor=“color name” | rgb(###,###,###) وضع صورة خلفية للمحتوى: background=“URL of image” لون النص في المحتوى: text=“color name” | rgb(###,###,###)
23
تابع خصائص الوسم <body>
حجم النص في المحتوى: </font> حجم النص <font size=“5”> 5. محاذات النص في المحتوى: align= right | left | center
Similar presentations
