مواقع عديدة على شبكة الإنترنت ، نجدها مخططة مثل صفحات الجرائد على شكل أعمدة ، نحن يمكننا عمل ذلك بالـ HTML.
تخطيط الـ HTML باستخدام الجداول
تم استخدام الجداول في لغة الـ HTML لتقسيم أجزاء هذه الصفحة إلى عمودين.
تم التحايل على ذلك باستخدام الجدول بدون حدود ، و ربما يتم إضافة حشو للخلية. بغض النظر عن حجم النص المضاف في الصفحة ، ذلك النص سيظل داخل حدود العمود المحدد. |
كل شخص لديه خبرة عادية في لغة الـ HTML ، يقوم باستخدام الجداول لتخطيط و تهيئة صفحات الـ HTML.
ذلك الجزء من الصفحة تم تهيئته على شكل عمودين مثل أعمدة صفحات الجرائد. حيث يمكنك رؤية تلك الصفحة على شكل عمود إلى اليسار و عمود إلى اليمين ، النص الذي تقرأه الآن هو في العمود الأيمن للصفحة. |
إضافة لون خلفية للتخطيط
تم استخدام الجداول في لغة الـ HTML لتقسيم أجزاء هذه الصفحة إلى عمودين.
تم التحايل على ذلك باستخدام الجدول بدون حدود ، و ربما يتم إضافة حشو للخلية. بغض النظر عن حجم النص المضاف في الصفحة ، ذلك النص سيظل داخل حدود العمود المحدد. |
كل شخص لديه خبرة عادية في لغة الـ HTML ، يقوم باستخدام الجداول لتخطيط و تهيئة صفحات الـ HTML.
ذلك الجزء من الصفحة تم تهيئته على شكل عمودين مثل أعمدة صفحات الجرائد. حيث يمكنك رؤية تلك الصفحة على شكل عمود إلى اليسار و عمود إلى اليمين ، النص الذي تقرأه الآن هو في العمود الأيمن للصفحة. |
الخطوط في HTML
الوسم <font> هي أحد وسوم الـ HTML ، و التي من المتوقع أن يتم استبعادها من قائمة الوسوم القياسية في HTML مستقبلاً .
و بالرغم من أن هناك العديد من الناس يستخدمون ذلك الوسم في صفحاتهم حتى الآن ، إلا إننا ننصحك بمحاولة استبعاد ذلك الوسم و تجربة استخدام طريقة الأنماط الانسيابية CSS لا شك إنها أفضل كثيراً.
الوسم <font>
من خلال الوسم يمكنك التحكم في مقاس ونوع ولون الخط كما يتضح من المثال التالي :
<p>
<font size="2" face="Tahoma"> ما رأيكم في هذا الخط ؟ </font> </p> <p> <font size="3" face="Times" color="red"> ما رأيكم في تغيير لون الخط ؟ </font> </p> |
سمات الخط
Attribute
|
Example
|
Purpose
|
size="number"
|
size="2"
|
Defines the font size
|
size="+number"
|
size="+1"
|
Increases the font size
|
size="-number"
|
size="-1"
|
Decreases the font size
|
face="face-name"
|
face="Times"
|
Defines the font-name
|
color="color-value"
|
color="#eeff00"
|
Defines the font color
|
color="color-name"
|
color="red"
|
Defines the font color
|
الوسم <font> غير ملزم الاستخدام.
لقد تم استبعاد الوسم <font> من الإصدارات الأخيرة لـ HTML .
منظمة W3C " World Wide Web Consortium " سوف تستبعد الخاصية <font> من توصيتها بالنسبة للإصدارات المستقبلية من الـ HTML ، حيث سوف يتم استخدام طريقةالأنماط الانسيابية " CSS " لتحديد التخطيط العام و طريقة عرض الخصائص بالنسبة لعناصر الـ HTML.
أنماط HTML
مع " HTML 4.0 " أصبح بإمكانك فصل جميع تصميمات صفحاتك عن ملفات الـ HTML و وضعها في ملف css مستقل.
كيف تستخدم النمط " Style "
عندما يقوم المتصفح بقراءة النمط " style " سوف يقوم بتنسيق الملف وفقاً للنمط. و هناك ثلاث طرق لإدراج الأنماط الإنسيابية نذكرها فيما يلي.
External Style Sheet
تعد طريقة الملف الخارجي هي الأفضل عند تطبيقها على عدد كبير من الملفات ، حيث يمكنك إجراء تعديلات على طريقة عرض جميع الصفحات من خلال التعديل في ملف واحد فقط
في هذه الطريقة يتم إدراج جميع أوامر CSS في ملف نصي يتم استدعاءه من خلال جميع صفحات الـ HTML عن طريق الأمر " link " و يجب أن يتم إدراج هذا الأمر في منطقة رأس الصفحة " head " ، كما بالمثال التالي:
<head>
<link rel="stylesheet" type="text/css" href="/ss/tibanet/style.css" /> </head> |
Internal Style Sheet
أو embedded style sheets و هي تعني التضمين " الإدراج " داخل رأس الصفحة ، و يجب عليك استخدام النمط الداخلي في حالة تطبيقه على مستند وحيد ، حيث تقوم بتحديد النمط في رأس الصفحة " head " عن طريق استخدام الوسم <style< كما يلي :
<head>
<style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/tiba.gif")} </style> </head> |
Inline Styles
في هذه الطريقة يتم إدراج أوامر CSS داخل أكواد HTML مباشرة ، فعلى سبيل المثال يمكنك أن تختار فقرة ما أو سطر ما داخل صفحة HTML لتطبق عليها التنسيق ، و تستخدم هذه الطريقة لإدراج تنسيق خاص لا يتكرر كثيراً أو لتغيير التنسيق المدرج في صفحة الأنماط الخارجية ، و سوف يتم استخدام كلمة style كمنتقى يرسل المتغير و القيمة مع الوسم المراد تنسيقه.
<p style="color: red; margin-left: 20px">
This is a paragraph</p> |
في المثال السابق قمنا بإنشاء فقرة عن طريق الأمر p داخل ملف HTML ، و تم إدراج خاصية style و تم تحديد المتغير color و الذي يحدد اللون ، ثم تم اختيار القيمة red و هي تعني الأحمر، و بذلك تظهر تلك الفقرة ملونة باللون الأحمر
To learn more about styles, visit our CSS tutorial
وسوم الأنماط
Tag
|
Description
|
<style>
| تحديد النمط المحدد |
<link>
| تحديد المصدر المرجعي للنمط. |
<div>
| تحديد قسم في المستند. |
<span>
| تحديد قسم في المستند. |
<font>
| تم استبعاده استخدم الـ style بدلاً منه. |
<basefont>
| تم استبعاده استخدم الـ style بدلاً منه. |
<center>
| تم استبعاده استخدم الـ style بدلاً منه. |
رأس الملف في HTML
عنصر الرأس " Head Element "
عنصر الرأس يحتوى على معلومات عامة حول ملف الـ HTML .
كما أنها تسمى معلومات الـ meta حيث أن الـ Meta تعني معلومات حول ، أو يمكنك القول أن الـ meta-data تعني معلومات حول البيانات ، و المقصود بالـ meta-information هو معلومات حول المعلومات .
إذن تعريف عناصر الـ meta الموجودة داخل عنصر الـ Head ، بأنها عبارة عن معلومات مختلفة حول ملف الـ HTML .
المعلومات داخل عنصر الرأس.
العناصر الموجودة داخل عنصر الـ Head لا تظهر عبر المتصفح.
وفقاً للمعايير القياسية للغة الـ HTML هناك فقط وسوم مقننة الإستخدادم داخل قسم الرأس ، تلك الوسوم هي:
<base> ، <link> ، <meta> ، <title> ، <style> ، <script>.
الكود التالي يعد غير قانوني أو غير قياسي بالنسبة للـ HTML.
<head>
<p< موقع طيبة نت</p> </head> |
في هذه الحالة فإن المتصفح لديه خياران :
إما عرض النص لأنه موجود بين وسمي عنصر الفقرة.
أو عدم عرض النصر باعتبار أنه موجود داخل عنصر الرأس.
إذا قمت بوضع عناصر الـ HTML مثل <p> أو <h1> داخل عنصر الرأس كما بالمثال السابق فإن أغلب المتصفحات سوف تقوم بعرض تلك العناصر بالرغم من كونها لا تتفق مع المعايير القياسية للـ HTML.
هل تتخطى المتصفحات أخطاء مثل هذه ؟ لا نعتقد ذلك قد يكون ذلك ممكنا مع الأخرين.
Head Tags
Tag
|
Description
|
<head>
| Defines information about the document |
<title>
| Defines the document title |
<base>
| Defines a base URL for all the links on a page |
<link>
| Defines a resource reference |
<meta>
| Defines meta information |
Tag
|
Description
|
<!DOCTYPE>
| Defines the document type. This tag goes before the <html> start tag. |
HTML Meta
كما أوضحنا في الفصل السابق ، أن عنصر الرأس " head " يحتوى على معلومات عامة (meta-information) حول ملف الـ HTML.
فإن الـ HTML أيضاً تتضمن عناصر meta و التي تعمل داخل عنصر الرأس " head element " الغرض من عناصر meta هو تزويدنا بمعلومات هامة حول ملف الـ HTML.
غالباً ما تستخدم عناصر meta لتزويدنا بمعلومات حول المتصفح المناسب ، أو معلومات تهم محركات البحث مثل وصف لمحتويات ملف الـ HTML .
لاحظ أن:
تقرر جمعية w3c أن بعض وكلاء المستخدمين يدعمون استخدام Meta لتحديث الصفحة الحالية بعد مرور عدد معين من الثواني باستخدام خيار استبدالها بـ URI أخر ... لا يجب أن يستخدم المؤلفون هذه التقنية لتوجيه المستخدمون إلى صفحات أخرى ، نظراً لأنه يؤدي إلى عدم قدرة بعض المستخدمين على الوصول إلى الصفحة ... و يجب استخدام تقنية التوجيه التلقائي إلى الصفحة عن طريق استخدام عملية إعادة التوجيه من قبل الخادم على الموقع:
http://www.w3.org/TR/html4/struct/global.html#adef-http-equiv
كلمات مفتاحية لمحركات البحث
بعض محركات البحث على شبكة سوف تستخدم خاصية الاسم و المحتويات لوسم الـ meta لفهرسة صفحات موقعك.
عنصر الـ meta يحدد وصف لصفحتك :
<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML">
|
عنصر الـ meta يحدد كلمات مفتاحية لصفحتك:
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript">
|
سمات الـ Meta غير المعروفة
أحياناً سوف تري خصائص meta غير معروفة " مجهولة " مثل الخاصية التالية:
<meta name="security" content="low">
|
ما عليك إلا قبول أن هذا أمراً استثنائياً و فريداً بالموقع أو المؤلف ، و انه ليس له علاقة بك.
يمكنك أن تشاهد قائمة كاملة لخصائص عناصر الـ meta من خلال المواقع
HTML Uniform Resource Locators
روابط الـ HTML
عندما تقوم بالنقر على رابط ما في صفحة HTML مثل ذلك الرابط تعلم HTML، يفهم ضمنياً أن الوسم يقصد موقع ما ( عنوان ) على شبكة الويب من خلال قيمة السمة href كما يتضح من المثال التالي:
<a href="/ss/tibanet/../html.php"> تعلم HTML </a>
|
نلاحظ أن الرابط تعلم HTML في المثال السابق هو رابط نسبي للموقع الذي تقوم بتصفحه الآن، و أن متصفحك عند طلب استدعاء تلك الصفحة سوف يقوم بإنشاء عنوان كامل للوصول إلى الصفحة المطلوبة كما يلي:
http://tibanews.com/ss/tibanet/index.php/html
أو كما بالمثال التالي:
<a href="http://www.tibanet.org/index.php?option=com_content&task=category§ionid=9&id=32&Itemid=31"> تعلم HTML </a>
|
Uniform Resource Locators
هناك شيء ما يسمي " URL " و هو إختصار لمجموعة كلمات Uniform Resource Locator يستخدم لعنونة الملفات أو البيانات على شبكة الإنترنت، العنوان الكامل يشبه المثال التالي:
http://www.tibanet.org/ta3lem/html/html.php
و هو يتبع القاعدة التالي للتركيبة البنائية للكود:
scheme://host.domain:port/path/filename
|
الـ scheme تحدد نوع خدمة الإنترنت المطلوب تنفيذها، النوع الأكثر شيوعاً هو http.
الـ host تحدد نطاق الاستضافة، في حالة عدم كتابتها أو حذفها تتحول تلقائياً إلى www.
الـ domain يحدد أسم النطاق مثل tibanet.org.
الـ port يحدد رقم المنفذ المستخدم للمستضيف، غالبا ما يتم عدم كتابة رقم المنفذ، رقم المنفذ القياسي للـ http هو 80.
لاحظ أن: المتصفح يقوم بإضافة رقم المنفذ تلقائياً إلى عنوان الصفحة، حتى في حالة عدم كتابته.
الـ path هو يحدد المجلدات الفرعية على الخادم، في حالة عدم كتابة المسار للملف المطلوب، سوف يقوم متصفحك بعرض الصفحة الرئيسية الموجودة بالمجلد الأصلي للموقع المطلوب.
الـ failname يحدد أسم الملف المطلوب عرضه ، الاسم القياسي للملف هو index.*** أو أي أسم أخر ... ذلك يعتمد على اعدادات المستضيف... لا حظ أن النجوم هنا تعني امتداد الملف و قد يكون htm، أو html، أو php، أو أي امتداد أخر تستخدمه لملفاتك.
URL Schemes
فيما يلي بعض الأمثلة على الـ schemes الأكثر شيوعاً.
Schemes
|
Access
|
file
| ملف على جهازك الشخصي. |
ftp
| ملف على خادم الـ FTP. |
http
| ملف على شبكة الإنترنت. |
gopher
| ملف على خادم الـ Gopher. |
news
| شبكة مستخدمي المجموعات الإخبارية. |
telnet
| اتصال الـ Telnet. |
WAIS
| ملف على خادم الـ WAIS. |
Accessing a Newsgroup
لعمل رابط لمجموعة إخبارية استخدم الكود التالي:
<a href="news:alt.html">HTML Newsgroup</a>
|
و سوف يظهر عبر المتصفح بالشكل التالي:HTML Newsgroup
Downloading with FTP
لعمل رابط لتنزيل الملفات استخدم الكود التالي:
<a href="ftp://www.tibanet.org/download/salon.zip">
Download Salon1.0</a> |
و سوف يظهر عبر المتصفح بالشكل التالي:Download Salon1.0
Link to your Mail system
لعمل رابط للبريد الإلكتروني استخدم الكود التالي:
<a href="mailto: alzouky@tibanet.org"> alzouky@tibanet.org</a>
|
و سوف يظهر عبر المتصفح بالشكل التالي: alzouky@tibanet.org
سكريبتات الـ HTML
إضافة السكريبتات إلى صفحات الـ HTML ، لجعلها أكثر حيوية و تفاعلية.
إدراج السكريبت إلى صفحات الـ HTML
يتم إضافة السكريبت في ملفات الـ HTML من خلال الوسم <script> ، و يجب ملاحظة أنه يجب استخدام خاصية النوع " type attribute " لبيان لغة السكريبت.
كما يتضح من المثال التالي:
<html>
<head> </head> <body> <script type="text/javascript"> document.write("السلام عليكم و رحمة الله و بركاته") </script> </body> </html> |
المثال السابق سوف ينتج المخرجات التالية :
السلام عليكم و رحمة الله و بركاته.
How to Handle Older Browsers
المتصفح الذي لا يستطيع أن يتعرف على وسم السكريبت ، سوف يقوم بعرض محتويات وسم السكريبت كنص داخل الصفحة.
و لمنع المتصفح من فعل ذلك يجب علينا أن نقوم بإخفاء السكريبت داخل وسم التعليق " الملاحظات ".
فالمتصفحات القديمة " التي لا تتعرف على وسم السكريبت " سوف تتجاهل التعليق و بالتالي لن يتم عرض نص السكريبت داخل محتويات الصفحة.
في حين أن المتصفحات الجديدة سوف تفهم أنه يجب تنفيذ السكريبت حتى لو تم وضعه داخل وسم التعليق.
مثال:
JavaScript:
<script type="text/javascript"> <!-- document.write("Hello World!") //--> </script> VBScript: <script type="text/vbscript"> <!-- document.write("Hello World!") '--> </script> |
وسم <noscript>
بالإضافة إلى إخفاء السكريبت داخل وسم التعليق ، يمكن إضافة وسم <noscript>.
وسم <noscript> يستخدم لتحديد نص بديل يتم عرضه في حالة عدم تنفيذ السكريبت.
هذا الوسم يستخدم للمتصفحات التي تتعرف على السكريبت و لكنها لا تدعم السكريبتات داخل الصفحة. لذلك فإن هذه المتصفحات سوف تعرض النص الموجود داخل وسم <noscript> عوضاً عن تنفيذ السكريبت.
و لكن إذا كان المتصفح يدعم السكربت داخل الصفحة فإن وسم السكريبت سوف يتجاهل وسم <noscript>.
مثال:
JavaScript:
<script type="text/javascript"> <!-- document.write("Hello World!") //--> </script> <noscript>Your browser does not support JavaScript!</noscript> VBScript: <script type="text/vbscript"> <!-- document.write("Hello World!") '--> </script> <noscript>Your browser does not support VBScript!</noscript> |
وسوم السكريبتات
Tag
|
Description
|
<script>
| تحديد السكريبت. |
<noscript>
| تحديد نص بديل إذا لم يتم تنفيذ السكريبت. |
<object>
| تحديد كائن مُضمن. |
<param>
| تحديد إعداد وقت التشغيل ( parameters ) لهذا الكائن. |
<applet>
| تم استبعاده استخدم <object> بدلاً منه. |
نشر موقعك على الإنترنت
أولاً : الخادم الشخصي " A Personal Web Server "
* إذا أرت أن تجعل الآخرون يشاهدون صفحاتك... يجب عليك نشرها.
* الخطوة الأولى هي نشر موقعك ... حيث يمكنك وضع نسخة على خادم الويب.
* جهازك الشخصي يمكن أن يكون خادم ويب في حالة توافر اتصال مباشر مع الإنترنت.
* إذا كنت تستخدم Windows 98 يمكنك استخدام PWS و هو إختصار لمجموعة كلمات Personal Web Server و هي تعني خادم الويب الشخصي.
* PWS موجود في مجلد مخفي على اسطوانة الـ Windows.
خادم الويب الشخصي PWS
خادم الويب الشخصي " PWS " يحول جهازك إلى خادم ويب. خادم الويب الشخصي يعد الحل المثالي لتطوير و اختبار تطبيقات الويب كما أنه سهل الإعداد.
يعد خادم الويب الشخصي منصة إطلاق جيدة و يوفر كافة متطلبات خادم الويب، كما يمكن من خلاله تشغيل صفحات الويب التفاعلية ( asp ).
كيفية إعداد خادم الويب الشخصي:
* استعرض تثبيت الـ Windows حتى تعرف إذا كان يمكنك تثبيت " PWS ".
* إذا لم تجده على جهازك يمكنك تثبيته من مجلد " PWS " على اسطوانة الـ Windows الخاصة بك.
* اتبع التعليمات الموضحة أمامك أثناء التثبيت، بعدها ستحصل على خادم ويب على جهازك.
لاحظ أن:
Windows XP الإصدارة المنزلية.... تأتي بدون ميزة تحويل جهازك إلى خادم ويب.
Internet Information Server " IIS ".
Windows 2000's يأتي مشتملاً على خادم الويب IIS ، و هذا يجعل الأمر أسهل بالنسبة لتطبيقات الويب الكبيرة، و سواء استخدمت PWS أو IIS فكلاهما يدعم ASP ، و هذا و هو ما يقوم بتشغيل التطبيقات القياسية من جانب الخادم الأمر الذي يساعدك على بناء تطبيقات ويب تفاعلية و ديناميكية.
أيضاً الإصدارة Windows NT تشتمل على IIS.
يمكنك معرفة المزيد حول هذا الموضوع، من خلال الرابط التالي:
ثانياً : خادم الويب المحترف " A Professional Web Server "
إذا كنت لا تريد استخدام PWS أو IIS، يجب عليك رفع ملفاتك إلى خادم عام.
أغلب مزودي خدمات الإنترنت (ISP's) يقدمون خدمة الاستضافة لصفحاتك.
إذا كنت جاد فعلاً في هذا الأمر، يجب عليك أن تقوم بحجز أسم نطاق و مساحة استضافة لهذا الغرض.
قبل أن تبدأ في اختيار مذود تلك الخدمة، و تدفع نقودك يجب عليك أن تقرأ السطور التالية جيداً.
هناك العديد من العوامل التي تؤثر في اختيار المستضيف للموقع على الانترنت، و من أهم تلك العوامل حجم الموقع ( space ) ، معدل النقل transfer المتوقع ( bandwidth or traffic ) ، التقنية المستخدمة أو اللغة التي سيتم بها إنشاء الموقع.
1 ـ حجم الموقع ( space ):
يتوقف حجم الموقع على عدة مؤثرات أهمها التقنية المستخدمة في تصميم تلك الملفات و نوعية تلك الملفات الموجودة على الموقع فمن المعروف أن الملفات النصية تعد الملفات الأصغر حجماً تليها ملفات الصور و الفلاش و تعد ملفات الصوت و الفيديو هي الملفات الأكبر نسبياً و يتوقف حجم الموقع على نوعية الملفات المستخدمة و عددها.
و يجب أن تأخذ في الاعتبار عن تحديد المساحة المطلوب حجزها الزيادة المتوقعة في حجم الموقع في الفترة المقبلة.
2 ـ معدل النقل transfer المتوقع ( bandwidth or traffic ):
يتوقف معدل النقل على عدد الزوار أو المشاهدين للموقع و عدد الصفحات أو الملفات المتوقع مشاهدتها أو تحميلها من الموقع و هنا يجب أن يؤخذ في الاعتبار الحجم النسبي للملفات لتحديد الـ bandwidth المطلوب.
فعلى سبيل المثال نجد إذا افترضنا أن الموقع يحتوى على 15 ملف نصي و حجم الملف في المتوسط 10 كيلو بايت و على افتراض أن كل زائر سيقوم بمشاهدة جميع صفحات الموقع فيمكن حساب حجم النقل لكل زائر بسهولة و هو 150 كيلو بايت فلو افترضنا أن عدد الزوار المتوقع خلال الشهر هو 1000 زائر يكون معدل النقل المتوقع هو 150 ميجا بايت.
و هنا نحن نفترض عدم وجود ملفات كبيرة الحجم ضمن تلك الملفات فإذا افترضنا وجود ملف صوت مساحته 500 كيلو يجب تحديد معدل الفتح أو التنزيل المتوقع له من الموقع حتى يتم تحديد معدل النقل المطلوب.
3 ـ التقنية المستخدمة أو اللغة التي سيتم بها إنشاء الموقع.
إن اللغة المستخدمة في إنشاء الموقع سوف تؤثر على اختيار نوع المستضيف بعض مواقع الاستضافة تدعم لغات معينة و لا تدعم لغات أخرى فاللغة التي سنستخدمها سوف تؤثر في اختيار المستضيف.
كما أن التقنية المستخدمة في تصميم الملفات سوف تؤثر على حجم الملفات، و سواء كنت تستخدم طريقة الأنماط الانسيابية CSS أو لا تستخدمها، فيجب أن تعلم أن ملفات المصممة بلغة الـ HTML تكون مساحتها أكبر من الملفات المكتوبة بلغة الـ PHP و ذلك يرجع إلى طبيعة اللغتين فلغة الـ HTML لغة ثابتة تفتقر إلى الديناميكية و المرونة و على مصمم الصفحات مراعاة ذلك حيث يجب أن يحتوي الملف على كافة البيانات المطلوب ظهورها في الصفحة و لذلك فهي تناسب المواقع التي يتم تحديثها على فترات متباعدة.
بينما نجد العكس في لغة الـ PHP فهذه اللغة تمتاز بالديناميكية و المرونة و ذلك لأنها تستدعى محتويات الصفحة من مجموعة من الملفات الأخرى و قاعدة البيانات و لذلك فهي تناسب المواقع التي يتم تحديثها باستمرار أو المواقع التي تتيح لزوارها التعليق على الموضوعات أو تحرير موضوعات.
تعليقات: 0
إرسال تعليق