بدء العمل على موقعك يمكن أن يكون مهمة شاقة. هذا صحيح بشكل خاص إذا كانت لديك خبرة محدودة في بناء المواقع. لمساعدتك على البدء، Dynadot توفر استضافة صفحة واحدة مجانية مع كل شراء نطاق. استضافتنا ذات الصفحة الواحدة تتميز بـ "wizard" لمساعدة الأشخاص الذين لا يعرفون HTML في بناء مواقعهم. ومع ذلك، معالجنا لا يسمح لك بالقيام بنفس القدر لموقعك كما يفعل HTML، لذا إليك بعض الأساسيات لتبدأ*:

<b>غامق</b>
<i>مائل</i>
<u>تحته خط</u>

حجم الخط
أسهل طريقة لتغيير حجم الخط هي استخدام هذه العلامات:

<big>يزيد حجم الخط بمقدار حجم واحد</big>
<small>يقلل حجم الخط بمقدار حجم واحد</small>

إذا كنت بحاجة إلى تكبير أو تصغير خطك أكثر، يمكنك استخدام هذه العلامات الأكثر تحديدًا:

<font size="+2">يزيد حجم الخط بالرقم الموجود بين علامات الاقتباس</font>
<font size="-2">يقلل حجم الخط بالرقم الموجود بين علامات الاقتباس</font>

يمكنك أيضًا أن تكون أكثر تحديدًا مع حجم الخط عن طريق تحديد رقم من 1 إلى 7 كحجم للخط، حيث 1 هو أصغر حجم و7 هو الأكبر:

<font size="1">أصغر خط 8 نقطة</font>
<font size="7">أكبر خط 36 نقطة</font>

خيار آخر مع حجم الخط هو استخدام علامات العنوان من 1 إلى 6، والتي تضيف أيضًا تباعدًا حول النص:

 

 

<h1>أكبر عنوان</h1>

 

 

<h6>أصغر عنوان</h6>

لون الخط
بالإضافة إلى تغيير حجم خطك، يمكنك أيضًا ضبط اللون.

<font color="blue">أزرق</font>
<font color="red">أحمر</font>

إذا كنت تريد استخدام درجة مختلفة من الأحمر أو الأزرق، يمكنك إدخال رقم سداسي عشري مكون من ستة أرقام بدلاً من الكلمة "red" أو "blue." جميع الألوان تتكون من الأحمر والأزرق والأخضر ولكل لون "code." الخاص به. الرقمان الأولان (أو الأحرف أحيانًا) من الرمز يمثلان الأحمر، ثم الرقمان التاليان يمثلان الأخضر، والرقمان الأخيران يمثلان الأزرق. يمكنك تنزيل نسخ اللون للكمبيوتر الشخصي أو مقياس الألوان الرقمي لـ Mac واستخدم هذه المنتجات للتمرير فوق أي لون على شاشتك وسيعطيك الرمز الذي تحتاجه. على سبيل المثال، إذا كنت ستستخدم الرمز للأزرق الذي تراه أعلاه، فسيبدو هكذا:

<font color="#0000FF">نفس الأزرق</font>
<font color="#3DC6EA">وإليك مثال على درجة أخرى من اللون الأزرق يمكنك اختيارها باستخدام الكود</font>

نوع الخط
أخيرًا، يمكنك تغيير نوع خطك. يمكنك استخدام Microsoft Word إذا كنت بحاجة إلى أفكار.

<font face="arial">خط أريال</font>
<font face="comic sans ms">خط كوميك سانس إم إس</font>
<font face="lucida handwriting">خط لوسيدا هاند رايتينغ</font>

الآن ستحتاج إلى جمع كل شيء معًا. بالنسبة لأي شيء يحتوي على الكلمة "font" يمكنك ببساطة وضع جميع المعلومات في علامة واحدة. إذا كنت تريد استخدام علامات الرأس أو إضافة غامق أو مائل أو تسطير، يمكنك إضافتها في علامة خاصة بها.

<font size="4" color="376E1E" face="calibri">يمكنك جمع كل شيء معًا</font>

<b><font size="4" color="376E1E" face="calibri">يمكنك جعل كل شيء عريضًا</font></b>

<font size="4" color="376E1E" face="calibri">أو يمكنك جعل النص عريض <b>جزء</b> منه</font>

تباعد
الآن بعد أن أصبح بإمكانك ضبط خطك، سترغب في إنشاء فقرات وفواصل أسطر، وفي بعض الحالات قد تحتاج إلى إضافة مسافات يدويًا:

<p>استخدام علامات الفقرة يضع نصك في فقرته الخاصة...</p>

<p>...وعلى السطر التالي</p>

استخدام فواصل الأسطر يشبه...<br>
...الضغط على Enter للانتقال إلى السطر التالي وعلى عكس كل شيء آخر في هذه الصفحة، لا يحتاج إلى علامة إغلاق (هذه علامة إغلاق </p>). يمكنك فقط إدخالها مرة أخرى...<br>
...للانتقال إلى السطر التالي مرة أخرى.

لن تحتاج إلى استخدام رمز للمسافات بين النص (مثل من شريط المسافة) إلا إذا كنت تريد إضافة مسافات إضافية لأن HTML سيتعرف على واحدة فقط حتى لو وضعت أكثر من واحدة باستخدام شريط المسافة الخاص بك. لإعطائك مسافة بين النص يمكنك استخدام الرمز: &nbsp;

روابط
شيء واحد ربما ترغب في إضافته إلى موقعك هو روابط لصفحات أخرى على موقعك أو حتى مواقع أخرى. الروابط سهلة الإضافة باستخدام هذا الكود:

<a href="http://www.dynadot.com">هذا الرابط يشير إلى الصفحة الرئيسية لـ Dynadot</a>

قد تلاحظ أنه إذا نقرت على الرابط أعلاه، فإنه يفتح إما في علامة تبويب منفصلة أو نافذة في متصفحك اعتمادًا على إعدادات المتصفح. هذا شيء سهل إضافته ويوصى به إذا كنت تربط بعيدًا عن موقعك الإلكتروني أو لا تريد أن تفقد الأشخاص في صفحة معينة (مثل مدونة) لأنه يحافظ على تلك الصفحة مفتوحة لعملائك للعودة إليها دون الحاجة إلى النقر على زر الرجوع في متصفحهم. كل ما عليك فعله هو إضافة target="_blank" بعد رابطك:

<a href="http://www.dynadot.com" target="_blank">هذا الرابط يشير إلى الصفحة الرئيسية لـ Dynadot</a>

صور
أخيرًا، قد ترغب في إضافة صور إلى موقعك. لإضافة صورة باستخدام HTML، ستحتاج إلى استضافتها في مكان ما. إذا لم يكن لديك مكان لاستضافة الصورة بنفسك، يمكنك استخدام خدمة مثل Tiny Pic.com التي تتيح لك تحميل صورك مجانًا وتولد علامة HTML لك. إذا كنت لا تريد إنشاء حساب، يمكنك فقط حفظ HTML الذي يولده (فقط لا تحفظه في Microsoft Word لأن Word يضيف أحيانًا أشياء تجعل الرمز لا يعمل بعد الآن). ضع في اعتبارك أن بعض الصور كبيرة جدًا وقد ترغب في تحسينها بحيث تشغل مساحة أقل. هناك بعض محسنات الصور المجانية التي يمكنك استخدامها لتقليل حجم ملف صورك مثل Image Optimizer.net. هنا مثال على علامة صورة أساسية:
<img src="https://i45.tinypic.com/9bkglk.jpg"> الذي يبدو هكذا:

يمكنك أيضًا إضافة حدود إلى صورتك، وتغيير حجمها، وإضافة تباعد حولها:

<img src="https://i45.tinypic.com/9bkglk.jpg" border="2" width="100" height="30" vspace="10" hspace="20" align="left">

كما ترى، الصورة لها إطار، وهي أوسع وأقصر، وتم توزيع المساحة حولها من الأعلى والأسفل واليمين واليسار. وهي أيضًا محاذاة لليسار، لذا يظهر النص الآن بجانب الصورة.

يمكنك أيضًا إضافة رابط إلى صورتك. كل ما عليك فعله هو وضع علامات الرابط حول علامة الصورة هكذا:

<a href="http://www.dynadot.com" target="_blank"><img src="https://i45.tinypic.com/9bkglk.jpg" border="0"></a>
الآن يمكنك النقر على هذه الصورة وسوف تأخذك إلى صفحتنا الرئيسية:

سيضيف هذا أحيانًا إطارًا حول الصورة باللون الأزرق الذي تراه على روابط النص. لإزالته، ما عليك سوى إضافة border="0" إلى علامة الصورة الخاصة بك. قد تلاحظ أيضًا أن HTML الذي يولده Tiny Pic.com يحتوي على alt="Image and video hosting by Tiny Pic" داخل علامة الصورة. يمكنك استخدام هذا لوضع نص مع صورتك في حال لم تظهر بشكل صحيح في متصفح شخص ما. إضافة نص بديل يمكن أن يساعد أيضًا في تحسين محركات البحث (SEO).

الآن ونأمل أن تشعر بثقة أكبر تجاه HTML، يمكنك اختبار مهاراتك على موقعك. ولكن قبل أن تضغط على حفظ مع HTML غير مثالي محتمل، نقترح اختبار HTML الخاص بك باستخدام خدمة مجانية مثل onlinehtmleditor.net. حتى أنه يحتوي على بعض أزرار HTML سهلة في الأعلى لمساعدتك. الآن تحتاج فقط إلى الحصول على مجالك إذا لم يكن لديك واحد بالفعل، ابدأ بموقعك اليوم!

*يرجى ملاحظة أن علامة الخط قديمة وقد لا تظهر بشكل صحيح في جميع المتصفحات. من الأفضل تحديد نمط الخط في CSS، وهو ما سنتناوله في منشور مدونة لاحق.

نشر بواسطة Robyn Norgan