ابحث فى المدونة

جارٍ التحميل...

المواضيع الاكثر مشاهده

أحدث المواضيع

تعلم واحترف  HTML  فى 14 يوم 

اليوم الاول
لابد وان تعلم ان ال HTML او الهتمل هى اللغة المستخدمة فى الانترنت و هى وسيلتك لاحتراف عالم تصميم المواقع فهى نافذتك لتعلم الكثير عن  انشاء و تصميم وتطوير المواقع .
ما هى HTML ؟
 HTML اختصارل(Hyper Text Markup Language)
وهى ليست لغة برمجة بالمعنى المعروف ك C++ , JAVA وغيرهم فهى لغة سهلة و بسيطة يسهل لاى كان تعلمها و اتقانها و لا تحتوى على شفرات كثيرة و لا تحتاج الى مترجم compiler و لا تحتاج الى نظام تشغيل معين لانه يتم تفسيرها و تنفيذها مباشرة من قبل متصفح الانترنت و لا تحتاج لمعرفة مسبقة باى لغة برمجة لكن تحتاج الى القليل من المنطق و ترتيب الافكار و تطبيق عملى لما سوف ندرسه باذن الله .
كيف نبدأ؟ 
لايتطلب الHTML اى برامج خاصة بل تحتاج الى محرر نصوص بسيط و برنامج المفكرة Notepad الموجود فى Windows يفى بالغرض و كذلك الى احد متصفحات الانترنت مثل Netscape او Internet Explorer لمعاينة الصفحات التى تقوم بانشائها  كل ما عليك فعله هو فتح  صفحة Notepad ثم حفظها باى اسم و كتابة الامتداد HTML. او HTM.

اولا : الاساسيات 

تكتب لغة HTML برموز تسمى الوسوم اوTAGS و تكتب بالضيغة التالية : 
<TAG/> النص يكتب بين الوسمين<TAG>
لكل وسم من وسوم اللغة وسم بداية و وسم نهاية كما موضح فى المثال التالى :
 <B>Text </B>
 و هناك بعض الوسوم المنفردة مثل<BR>  وهذا الوسم لاضافة سطر جديد.
سنقوم الان بمعرفة الوسوم الاساسية لصفحة الويب و مناقشتها واحدا تلو الاخر 
 اذا فملف ال HTML  لابد و ان يبدا ب <HTML > و ينتهى ب <HTML/>  لا تنسى هذا ابدا .
اما الوسم <HEAD>  فيحدد بداية المقطع الذى يحوى المعلومات الخاصة بالصفحة كالعنوان الظاهر على شريط عنوان المتصفح و حقوق النشر و غيرها من الامور التى سنتطرق اليها لاحقا .
عنوان الصفحة يكتب بين الوسمين <TITLE> و <TITLE/>
 ثم نغلق وسم head ب <head/> 
ثم ناتى للوسم الاكثر اهمية و هو وسم body حيث يكتب فيه محتوى صفحة الويب و ما يظهر للمستخدم user ويغلق فى النهاية ب <body/> .
 ما رايك اذا طبقنا ما قرأنا الى الان ؟ ..قم بفتح صفحة فى المفكرة Notepad واكتب بها الاتى :
<html>
<head>
 <title> My first web page </title>
</head>
<body>
I'm writing my first web page 
</body>
</html>
الان قم بحفظ ما كتبت باى اسم تختاره و لا تنسى الامتداد html.
لكى تشاهد ما كتبت ادخل على متصفحك فاذا كان Internet explorer فاختار open من قائمة file و اذا كان Netscape فاختار open file وكذلك فى Mozilla Firefox ثم حدد المسار الذى يوجد به الملف .
ستجد النتيجة كالاتى:

هل حصلت على نفس النتيجة ؟ اذن مبروووووووووك فقد قمت بانشاء اول صفحة لك على الويب .
و الان بعض الملاحظات الهامة التى قد تفيدك عند كتابة اللغة
  • لا يوجد فرق عند كتابة الوسوم بالحروف الكبيرة Uppercase او بالحروف الصغيرة Lowercase .
  • المتصفحات لا تاخذ بعين الاعتبار المسافات او اشارات نهاية الفقرات (اى عند الضغط على Enter لن ينتقل لسطر جديد) ولذلك يمكن كتابة البرنامج السابق كله على سطر واحد و ستكون النتيجة كما هى (جرب بنفسك.)


<html><head><title> My first web page </title></head><body>I'm writing my first web page </body></html> 
او باى شكل تريد و ستكون النتيجة واحدة .
هذه تعتبر مشكلة المتصفح لا يفهم اشارات السطر الجديد فماذا افعل؟ ... الامر سهل باستخدام الوسم <BR> كما اشارنا مسبقا هذا الوسم منفرد لتحديد نهاية السطر فاذا اضفنا هذا الوسم الى البرنامج السابق لنرى على ماذا سنحصل؟
<html>
<head>
 <title> My first web page </title>
</head>
<body>
I'm writing <br>my first <br>web page 
</body>
</html>
 وهناك ايضا الوسم <p> ويقوم تقريبا بنفس عمل الوسم السابق 
<html>
<head>
 <title> My first web page </title>
</head>
<body>
I'm writing <p>my first </p>web page 
</body>
</html>

 اما بالنسبة للفراغات فلها رمز خاص و هو; nbsp&  وهى اختصار لNon Breakable SPace  و على حسب عددها تكون عدد الفراغات و تكتب فى المكان المراد احداث فراغ فيه مثل :
<html>
<head>
 <title> My first web page </title>
</head>
<body>
I'm writing &nbsp; &nbsp;&nbsp my first&nbsp; &nbsp;&nbsp web page 
</body>
</html>
 و بذلك نكون انتهينا من الدرس الاول وفى الدرس القادم باذن الله سنتعلم كيفية اضافة حيوية  لصفحة الويب باستخدام الالوان . 

0 comments:

data: commentLabel/
Related Posts Plugin for WordPress, Blogger...