الخطوات الأولى في تصميم صفحة الويب، بنية صفحة الويب

هذا درس موجه للمبتدئين في تصميم المواقع أو من يرغب في الدخول في هذا المجال.

ما سنتعلمه في هذا الدرس هو بناء أولى صفحاتك على الإنترنت، و أرجو أن تتذكروني عندما تصلون إلى أعلى المراتب، بالتوفيق و لنبدأ.

التطبيق: بناء صفحة ويب مفردة نكتب فيها نصاً أو سيرةً ذاتيةً عنا ببنية شجرية بسيطة للتعريف ببنية صفحة الويب.
الأدوات المطلوبة: محرر نص html أو محرر نص عادي مثل المفكرة (Notepad).
إستضافة مجانية أو إستضافة مدفوعة

لنبدأ:
عندما تحجز إستضافة مجانية أو مدفوعة فإنك إما تحصل على دومين فرعي أي name.domain.com أو أنك تحصل على دومين من مرتبة عالية مثل domain.com و بالتالي يعتبر هذا الدومين بمثابة المجلد الذي تضع فيه ملفاتك التي تشكل الموقع الإلكتروني و عندما يكتب المتصفح إسم الدومين فإنه سيتم توجيهه لفتح هذا المجلد بطريقة ستشرح لاحقاً، و أول ما يعرضه متصفح الإنترنت هو ملف الإندكس أي الأرشيف و على هذا فإن عدم وجود هذا الملف سيجعل المتصفح يفتح المجلد و يعرض الملفات التي تحتويه كقائمة دون تنسيق، و على هذا فإن أول ملف يجب أن نقوم بإنشائه بحيث يكون الصفحة الرئيسية للموقع إسمه index.htm أو index.html

نضع على سطح المكتب أو في مجلد ننشئه للدروس التعليمية ملف نص جديد و نسميه index.html و نوافق على تغيير اللاحقة و نعدله باستخدام المفكرة بحيث يكون فارغاً ثم نضيف إليه الكود التالي:

[sourcecode language=”html”]
<!DOCTYPE html>
<head>
<meta http-equiv=’Content-Language’ content=’ar-sy’>
<meta http-equiv=’Content-type’ content=’text/html; charset=utf-8′>
<title>صفحتي الأولى</title>
</head>
<body>
<div id=”header”>
<h1>أقسام صفحتي الأولى</h1>
<ul>
<li>القسم الأول</li>
<li>القسم الثاني</li>
<li>القسم الثالث</li>
</ul>
<p>يسرني أن أعرض صفحتي عليكم و أن أقدم فيها نفسي بكلمات أو بأحرف معبرة، تغمرني السعادة لإنشاء صفحتي الأولى.</p>
</div>
</body></html>
[/sourcecode]

ننسخ الكود السابق من الضغط على زر النسخ الذي سيظهر عند وضع مؤشر الفأرة فوق مربع الكود في الزاوية اليمنى من الأعلى و نضعه بصفحة نص كما ذكرت سابقاً و نحفظ الصفحة بإسم أو Save As و من الترميز أو Encoding نختار ترميز utf-8 و نحفظ الصفحة و نستبل الموجودة إذ طلب منا ذلك.

بهذا نكون قد أنشأنا صفحتنا الأولى، نفتحها عن طريق أي مستعرض إنترنت لدينا فنجد أن صفحتنا تعمل و هي عبارة عن نص مكتوب دون ستايل أو شكل، و لكن ببساطة قد أنشأنا صفحتنا الأولى بما سأسميه بالبنية الشجرية و هذا هو درسنا لليوم، وفي الدرس القادم سأشرج لكم كيفية التحكم في العناصر الموجودة في الصفحة عن طريق إضافة ملف أوامر التحكم بالشكل بعد شرح هذه العناصر، و أنا أفضل التعليم بهذا الأسلوب و أسلوبي يختلف عن أسلوب الكثيرين في تعليم تصميم المواقع إذ أني سأعطيكم البنية الصحيحة للموقع، و اول مثال عن الإختلاف وجود تعريف نوع المستند Doctype و اعتماد utf-8 كترميز و اعتماد div كأقسام بدلاً من الجداول و في الدرس القادم إعتماد css في الستايلات و نتطور بعدها إن شاء الله.

هل تريد نشر مواضيع في الموقع؟إضغط هنا

الحقوق محفوظة لموقع طارق دوت نت، يسمح النقل مع ذكر المصدر: موقع طارق دوت نت

تابعوا صفحة طارق على الفيسبوك
نجمة واحدةنجمتانثلاث نجماتأربع نجماتخمس نجمات (الأفضل) (التقييم: 4.00 من 5 - المقيمون: 2)
Loading...

Leave a Reply

كن أوّل من يعلّق

نبّهني عن
avatar
‫wpDiscuz
More in تعليم برمجة و تصميم المواقع
وظيفة php لعرض السنة أوتوماتيكياً في أسفل الموقع

السلام عليكم، سأعرض هنا لكم حلاً لمشكلة سنوية تتكرر كل عام عند تغير السنة، إذ كلنا نعاني من مشكلة تاريخ...

Close