ماذا تحتاج لتعلم HTML من الصفر حتى الاحتراف

مرحبا بك مرة أخرى, اليوم سوف أبدأ سلسلة تعلم HTML من الصفر حتى الاحتراف مع التفاعل معكم عبر التعليقات في كل جزء.

بدون تعلم HTML لن تصبح مصمم مواقع ناجح لأن HTML هي حجر الاساس للمواقع الالكترونية وبدون الفهم العميق لها لن تكون قادر على التحكم بشكل كامل بشكل موقعك, الان يتبادر الى ذهنك سؤال لماذا أتعلم HTML في حين ان هناك برامج تكتب بدلاً مني كود HTML وتختصر علي الوقت وتسهل التصميم .

نعم أخي هي برامج مفيدة جداً وتسرع من وتيرة العمل والانتاج لكنك كمصمم لابد لك من إتقان HTML بشكل كامل وإحترافي حتى تستطيع التعديل على الاكواد وتظهر موقعك بشكل جذاب جداً, إذا فبرامج التصميم مثل دريم ويفر ( dreamweaver ) أو فرونت بيج ( FrontPage ) تختصر عليك كتابة بعض أكواد HTML بشكل يدوي وتقتصر الزمن لكنها لا تغني عن تعلمك HTML واتقانها.

إذا عزيزي القارئ سوف نتعلم آخر اصدار وهو HTML5 الذي أصبحت معظم المتصفحات الحديثة تعتمده وتدعمه في أنظمتها كما أن لها العديد والعديد من المميزات التي تختصر عليك أكواد JavaScript و سوف اشرحها لك بالتفصيل في التدوينات القادمة واحدة تلو الاخرى وكلما حدث جديد سوف اضيفه في تدوينة و يمكنك الرجوع إليها مرة أخرى.

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

البداية

عندما تنشيء صفحة ويب فإن إمتداد ها يكون (.html ) وإلا فإن المتصفح لمن يظهرها لك بالشكل المطلوب, فدائما عندما تنشيء صفحة موقع او صفحة ويب اكتب اسمها و اجعل الامتداد صحيح, مثال example.html.

ثانياً, كل صفحة ويب لا بد ان تحتوي على هذه الوسوم:

doctype
html
head
body

أما باقي الوسوم فإنها على حسب المحتوى المطلوب.

ثالثا, كل وسم من وسوم HTML يكون له التنسيق التالي <html> </html>, هذا للوسوم العادية أما الفردية فتكون كالتالي <br/> <input type=”text” /> أي في النهاية توجد هذه العلامة ( /> ) سأطرح لك العديد من الامثلة حتى توضح لك الفكرة بالأمثلة:

<h1> مرحبا بك عزيزي </h1>

<p> هذه المدونة تخص المصممين ومن يود تعلم التصميم </p>

<address> عنواني هو … </address>

لاحظ أنه عندما تفتح وسم يكون بين هذه العلامتين ( < > ) وعندما تغلقه يكون بين هذه العلامتين ( </ > ), وبين وسم الافتتاح و الاغلاق تكتب المعلومات التي تريدها أن تظهر و هكذا أكمل في باقي الوسوم.

ما الذي يظهر في الصفحة وما معنى هذه الوسوم؟

صورة لصفحة بسيطة

بالاعلى مثال بسيط لناتج كود HTML بسيط هذا هو

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

حيث:

<!DOCTYPE html> تخبر المتصفح عن نوع HTML المستخدمة في المستند أو الصفحة.
<html> توصف صفحة HTML.
<head> توصف معلومات الصفحة .
<title> تعطي عنوان للصفحة.
<body> ما يوجد بين هذا الوسم يكون ظاهرا للمستخدم.

وباقي الوسوم سوف نذكرها في المقالة القادمة بشكل مفصل اكثر لكل واحد منها الشكل التالي يوضح الهيكل العام لصفحة HTML

صمم أول صفحة HTML خاصة بك

كما ذكرت في تدوينة ما تحتاج من أدوات حتى تصبح مصمم ويب, هنا سوف أطلب منك فتح أحد محررات النصوص التي اخترتها للبدء في تحرير أكواد HTML و إذا لم تثبت احداها فاستخدم محرر النصوص المرفق مع نظامك وليكن Notepad المعروف, وابدأ بكتابة هذا الكود بداخله كما في الصورة.

<!DOCTYPE html>

<html>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>

</html>

محرر نصوص

بعد ذلك احفظ الملف بامتداد .html حتى تكون صفحة انترنت صحيحة و هي عن طريق النقر على ملف > حفظ كـ

أو File > Save As كما احفظ المستند بترميز utf-8 لانه يدعم معظم اللغات منها العربية لاحظ للصورة بالاسفل.

صفحة الحفظ

الان بعد حفظ الملف , افتحه وسوف يظهر في المتصفح بالشكل التالي.