مقدمة دورة HTML5 , كتابة أول صفحة ويب

عدد مشاهدات الموضوع:


السلام عليكم زوار مدونة sweup.com وزوار مدونة أبواياد اليوم سنبدأ في أول درس من دورة HTML5 وسيكون هذا الدرس بمثابة اعلان عن بدء الدورة والتي سنناقش فيها  لغة HTML5 بكل زواياها وبما اننا لا نستطيع التحدث مباشرة عن لغة HTML5 لذا سنناقش كل من HTML وXHTML أولاُوالبداية مع لغة HTML.

ما هي HTML ?

إن HTML هي اختصار abbreviation الحروف الأولى من الجملة Hyper Text Markup Language و التي تعني بترجمة غير حرفية (لغة وصف صفحات الويب), و هي ليست لغة برمجيَّة, بل هي لغة وصفيَّة Markup Language , لأن HTML تستخدم مجموعة من الوسوم Tags لوصف صفحة الويب.

أما الوسوم Tags فهي كلمات أوأحرف محددة مسبقاً Keywords تحمل معاني خاصَّة, و تكون محصورة بين قوسين من الشكل < > مثل <b> و <html> , تأتي الوسوم في الغالب على شكل أزواج مثل <b> و </b> , يدعى الوسم الأول <b> بوسم البداية Begin Tag أو وسم الفتح Opening Tag, ويدعى الوسم الثاني </b> بوسم النهاية End Tag أو وسم الإغلاقClosing Tag

يتم كتابة مستندات HTML باستخدام أي محرر نصي بسيط (مثل notepad) أو متقدِّم مثل (DreamWeaver أو Visual Studio), و يتم تخزينها في ملفات تحمل امتداداً extension من الامتدادين التاليين : html. أو htm. , و بالطبع لا يوجد أي فرق بينهما.

تتكون مستندات HTML بشكل أساسي من محتوى نصي عادي بالإضافة إلى مجموعة من وسوم HTML, و في الحقيقة فإن مستندات HTML تدعى بـ (صفحات الويب) Web Pages , و يتم استخدام برنامج خاص لقراءة هذه المستندات ويعرف هذا البرنامج باسم مستعرض الويب Web Browser و من أمثلته Internet Explorer و Firefox و Google chrome .. إلخ.

الهدف من مستعرض الويب هو قراءة مستندات HTML و عرضها بشكل صفحات ويب, بمعنى أن مستعرض الويب لا يعرض وسوم HTML كنصوص بشكل مباشر ولكنَّه يستخدمها لإنتاج صفحة ويب بالشكل و المحتوى الموصوفين في مستند HTML.

السؤال الأن.. كيف أبدأ في تعلم كتابة مستندات HTML ؟

كل ما تحتاجه لكي تبدأ في تعلم كتابة مستندات HTML هو محرر نصوص (مثل Notepad ) ومستعرض ويب (مثل Internet Explorer), بعد ذلك يمكنك قراءة الفقرات التالية و التعلم خطوة بخطوة و أؤكد لك أن أفضل طريقة للتعلم هي كتابة الأمثلة التي ستصادفك لاحقاً بشكل مباشر باستخدام محرر النصوص ومن ثَّم اختبارها باستخدام مستعرض الويب.

المثال الأوَّل في لغة HTML
سنقو الآن بكتابة أول صفحة HTML معاً باتباع الخطوات التالية:
نقوم أولاً بفتح أحد محررات النصوص وليكن المفكرة Notepad على سبيل المثال و نكتب الشيفرة التالية:

<html>
<head>
<title>My first HTML page</title>
</head>
<body>
</body>
<p> Welcome to my first HTML page!
</html>
</p>
ثَّم نقو بحفظ الملف باسم firstPage.html
حفظ الملف باسم firstPage.html


ملحوظة : لحفظ الملف بلاحقة مختلفة عن اللاحقة txt. هناك طريقتان,الأولى أن نختار الخيار جميع الملفات من القائمة المنسدلة حفظ ك Save as type الظاهرة في الصورة أسفل اسم الملف ثم نكتب اسم الملف ولاحقته بشكل عادي, أمَّا الثانية و التي أفضّلها شخصيَّاً فهي أن نضع اسم الملف مع لاحقته المكتوبة بين علامتي اقتباس مزدوجتين و نختار حفظ كما هو موضَّح في الصورة أعلاه.

الآن و بعد أن قمنا بحفظ الملف بالأسم firstPage.html نقوم باستعراضه باستخدام أحد مستعرضات الويب لنرى الناتج,لكني هنا سأستخدم موقع jsfiddle وهو محاكي للمتصفح ولكنه أفضل على المستوى التعليمي حيث يعرض الأكواد بشكل تفصيلي ,كذلك يمكنك التعديل على الأمثلة ومشاهدة النتائج مباشرة.
كما ترى فقد قمنا بكتابة صفحتنا الأولى باستخدا لغة HTML و هذه الصفحة تحتوي على نص ترحيب بسيط هو النص !Welcome to my first HTML page ,تم توليد هذا النص باستخدام الوسم الخاص p و بتصوّري فإن هذه الصفحة على بساطتها ستكون الباب الواسع للدخول إلى لغة HTML إن تابعت معي الدورة وطبقت الأمثلة المرفقة فيها , وإلى هنا أتركم في رعاية الله إلى حين نلقاكم في درس جديد ولمتابعة الدورة يمكنك الأنضمام لأعضاء المدونة كما يمكنك الأنضمام للقروب الخاص بنا حيث سيصلك كل جديد .
المصادر /www.w3schools.com  تعلَّمHTML5 & CSS3 (م.مختار صالح)

ليست هناك تعليقات:

إرسال تعليق

مدونة أبو إياد تصميم بلوجرام جميع الحقوق محفوظة 2016

اعلان مخفى فى الرئيسية