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

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

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

تعلم واحترف  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...