ملون

تهانينا! لقد وصلت إلى الدرس الأخير أنا أعلم كل شيء الآن؟ تعلمت الكثير الآن وأنت قادر على إنشاء موقعك الشخصي! لكن ما تعلمته في هذا الدرس هو الأساسيات وهناك المزيد يمكنك تعلمه وإتقانه، وأنت تملك الأساس الذي يمكن أن تبني عليه. في الدرس الأخير ستحصل على بعض النصائح: أولاً، من الأفضل أن تعتني بنظام وهيكلية صفحاتك، بكتابة صفحات مرتبة فأنت لا تعرض للآخرين احترافك في HTML بل أيضاً تبسط عملية إدارة الصفحات على نفسك. التزام بالمعايير القياسية وقم بتصحيح الأخطاء في صفحاتك، لا يمكننا التأكيد بشكل كافي على هذه النقطة، دائماً أكتب صفحات نظيفة باستخدام XHTML استخدم تعريف الصفحة DTD وقم بتصحيح الأخطاء من خلال خدمة validator.w3c.org . ضع محتويات في صفحات موقعك، تذكر أن HTML هي مجرد أداة تسمح لك بعرض المعلومات على الإنترنت، لذلك كن حريصاً على أن تحوي الصفحات محتويات مفيدة، الصفحات الجميلة قد تظهر بشكل جيد، لكن معظم الناس يستخدمون الإنترنت بحثاً عن المعلومات.ئ تجنب المبالغة في وضع محتويات كثيرة في صفحات موقعك مثل الصور الثقيلة وأشياء أخرى تجدها على الشبكة، هذا يبطأ ظهور الصفحة وقد تكون الصفحة...

في هذا الدرس سندرس المزيد من الجانب النظري من HTML. ما الذي يمكن معرفته أيضاً عن HTML؟ يمكنها أن تكتب بطرق مختلفة، والمتصفحات يمكنها أن تقرأ HTML بطرق مختلفة، يمكن أن تقول بأن HTML لها عدة لهجات ، هذا هو سبب ظهور بعض المواقع بشكل مختلف في متصفحات مختلفة. هناك محاولات عديدة لإنشاء معيار قياسي موحد للغة HTML من خلال منظمة World Wide Web Consortium (W3C) التي أنشأها تيم برنرز لي - نعم! الرجل الرائع الذي اخترع HTML - لكن هذا يحتاج إلى وقت طويل صعب. في الماضي - عندما كانت المتصفحات برامج تدفع بعض المال لشراءها - كان نيتسكيب هو المتصفح المسيطر، في ذلك الوقت كانت نسخة HTML المدعومة هي 2.0 والتي أعطيت لاحقاً رقم 3.2، لكن نيتسكيب والتي تملك أكثر من 90% من حصة سوق المتصفحات لم تهتم كثيراً بدعم المعايير، بل على العكس قامت بإنشاء عناصر خاصة لا تدعمها المتصفحات الأخرى. لسنوات عدة مايكروسوفت تجاهلت الإنترنت تماماً، لكن بعد ذلك دخلوا في المنافسة مع نيتسكيب وأعلنوا عن متصفحهم الخاص، النسخة الأولى من متصفح مايكروسوفت وهو إنترنت إكسبلورر لم يكن يقدم دعماً أفضل لمعايير HTML من نيتسكيب، لكن مايكرو...

حتى الآن أنت الوحيد الذي تستطيع أن ترى صفحاتك، حان الوقت لكي يرى بقية العالم ما قمت بإنجازه. هل العالم مستعد لهذا؟ العالم مستعد كما ستكون أنت مستعداً، لكي تضع صفحتك على الإنترنت فأنت بحاجة إلى مساحة في مزود موقع وبرنامج مجاني لنقل الملفات . إذا كنت تملك اتصالاً بالشبكة فربما تملك مساحة مجانية في مزود لموقعك، مزود الموقع سيكون عنوانه مثلاً http://home.provider.com/~usernumber، لكن ربما تحتاج إلى تفعيله أولاً، إقرأ حول هذا في صفحات موقع مقدم خدمة الإنترنت في بلدك. هناك خيار آخر هو أن تحصل على مزود يقدم مساحة مجانية على الإنترنت، بنفس الطريقة التي قمت فيها بالحصول على بريد إلكتروني مثل هوتميل، يمكنك أن تسجل لمساحة مجانية على الإنترنت ، هناك عدة شركات تقدم خدمات مثل هذه منهم 000webhost.com (إضغط على "Order" واختر العضوية المجانية) - التسجيل يتطلب فقط بضع دقائق. لكي تحصل على صلاحية الدخول للمزود، فأنت تحتاج إلى معرفة ما يسمى "Host Name" مثلاً: ftp.htmlnet.site50.net وأن تملك اسم مستخدم وكلمة سرية للمستخدم. هل هذا كل ما أحتاج؟ للدخول إلى مزود ورفع صفحاتك له فأنت ت...

أليس من الجميل أن تتمكن من إعطاء صفحتك التصميم الذي تستحق؟ بالتأكيد، لكن كيف؟ لكي تعطي صفحتك تصميماً يجب أن تستخدم تقنية (CSS) ، في هذا الدرس ستجد مقدمة قصيرة إلى CSS، لكن بعد ذلك يمكنك تعلم كل شيء حول CSS بتفاصيلها في درس CSS . لذلك اعتبر هذا الدرس مجرد فاتحة شهية. هي النصف الآخر للغة HTML، ففي كتابة الصفحات، كل واحدة لها وظيفة محددة: تهتم بالجوانب الصعبة "هيكلية الصفحة ومحتوياتها" بينما CSS تعطي لمسة أنيقة (التصميم) . كما رأيت الدرس السابع ، يمكن إضافة CSS من خلال خاصية ، فمثلاً يمكنك أن تضع نوع الخط وحجمه: مثال 1: <p style="font-size:20px;" >This is typed in size 20</p> <p style="font-family:courier;" >This is typed in Courier</p> <p style="font-size:20px; font-family:courier;" >This is typed in Courier size 20</p> سيظهر بهذا الشكل في متصفحك This is typed in size 20 This is typed in Courier This is typed in Courier size 20 في المثال أعلاه اسخدمنا خاصية style لتحديد نوع الخط الذي نريد استخدامه من خلال أ...

عنوان الدرس "المزيد حول الجداول" يبدو مملاً بعض الشيء، لكن أنظر للجانب الإيجابي، إذا تمكنت من إتقان إنشاء الجداول فلن يكون هناك أي شيء في HTML لن تستطيع معرفته واستخدامه. ماذا بقي إذاً؟ خاصيتان هما colspan و rowspan تستخدمان لإنشاء جداول رائعة ومتقنة. Colspan هي اختصار "column span"، Colspan تستخدم في الوسم <td> لتحدد عدد الأعمدة التي ستتمدد لها الخلية : مثال 1: <table border="1"> <tr> <td colspan="3">Cell 1</td> </tr> <tr> <td>خلية 2</td> <td>خلية 3</td> <td>خلية 4</td> </tr> </table> سيظهر بهذا الشكل في متصفحك خلية 1 خلية 2 خلية 3 خلية 4 بتحديد colspan بالقيمة "3" قامت الخلية في الصف الأول بالتمدد لثلاثة أعمدة، ولو قمنا بوضع "2" لقيمة colspan ستتمدد لعمودين اثنين، وسيتعين علينا إضافة خلية أخرى للصف الأول حتى تصبح الأعمدة متساوية مثال 2: <table border="1"> <tr...

الجداول تستخدم لعرض بيانات مجدولة مثل المعلومات التي تعرض بشكل منطقي من خلال أعمدة وصفوف. هل هي صعبة؟ إنشاء الجداول في HTML قد يكون في البداية معقداً، لكن إذا بقيت هادئاً وراقبت ما تقوم به جيداً سترى أن الجداول بسيطة ومنطقية، تماماً كما هو كل شيء في HTML. مثال 1: <table> <tr> <td>خلية 1</td> <td>خلية 2</td> </tr> <tr> <td>خلية 3</td> <td>خلية 4</td> </tr> </table> سيظهر بهذا الشكل في متصفحك خلية 1 خلية 2 خلية 3 خلية 4 ما الفرق بين <tr> و <td> ؟ كما ترى في المثال أعلاه، هذا هو أكثر أمثلة HTML تعقيداً قمنا بعرضه في هذا الدرس حتى الآن، لنقم بتفكيك المثال وشرح كل وسم: هناك ثلاث عناصر تستخدم لإنشاء أي جدول: وسم البداية <table> ووسم الإغلاق </table> يبدأ من بينهما الجدول وينتهي، منطقي. <tr> تعني " t able r ow" وهي العنصر الذي تبدأ من خلاله الصفوف وتنتهي، لا زال الأمر منطقياً. <td> هي اختصار " t able d ata...

ألن يكون رائعاً إذا تمكنت من وضع صورة لك في صفحتك؟ هذا يبدو كتحد... ربما، لكن في الحقيقة يمكن فعل ذلك بسهولة، كل ما تحتاجه هو عنصر واحد: مثال 1: <img src="image.jpg" alt="Atwa" /> ستظهر بهذا الشكل في متصفحك:   كل ما تحتاج أن تفعله هو إخبار المتصفح بأنك تريد وضع صورة، ( img ) وموقعها ( src , هو اختصار "source")، هل فهمت ذلك؟ لاحظ كيف أن عنصر img هو في نفسه وسم البداية والإغلاق، مثل <br /> لا يرتبط بنص معين. "image.jpg" هو اسم ملف الصورة الذي تريد وضعها في صفحتك، و".jpg" هو نوع ملف الصورة، تماماً مثل اللاحقة ".htm" تظهر أن الملف هو وثيقة HTML، ".jpg" تخبر المتصفح أن الملف هو صورة، هناك أنواع مختلفة من ملفات الصور التي يمكنك إضافتها لصفحتك: GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics) صور GIF تستخدم عادة للرسومات، أما JPEG فتستخدم للصور الفوتوغرافية ،هذا لسببين، الأول صور GIF يمكنها أن تحوي فقط 256 لوناً، بينما JPEG يمكنها أن تحوي م...

في هذا الدرس ستتعلم كيف تقوم بإنشاء رابط بين صفحتين. ما الذي أحتاجه لإنشاء رابط؟ لإنشاء رابط ستستخدم ما تستخدمه دائماً عندم كتابة HTML: عنصر، عنصر بسيط مع خاصية واحدة وستتمكن من إنشاء رابط لأي شيء وكل شيء ، إليك هذا المثال لرابط لموقع HTML.net وكيف سيكون شكله: مثال 1: <a href="http://www.html.net/">Here is a link to HTML.net</a> سيظهر في المتصفح بهذا الشكل: Here is a link to HTML.net العنصر a هو اختصار "anchor" والخاصية href هي اختصار "hypertext reference"، وهي التي تحدد إلى أين سيذهب الرابط، غالباً عنوان في الإنترنت أو اسم ملف ما. في المثال أعلاه الخاصية href تحوي القيمة "http://www.html.net"، وهي العنوان الكامل لموقع HTML.net ويسمى العنوان URL وهي اختصار "Uniform Resource Locator"، لاحظ أن "http://" يجب أن تضاف في أي عنوان، أما الجملة "Here is a link to HTML.net" فهي النص الذي سيظهر في المتصفح على شكل رابط، تذكر أن تقوم بإغلاق العنصر بوسم الإعلاق </a> . ماذا عن الروابط بين الصفحات في...

هناك خصائص يمكنك أن تستخدمها لمعظم العناصر ما هي الخاصية؟ أنت تتذكر أن العناصر تعطي هيكلية لصفحة HTML وتخبر المتصفح كيف تريد لموقعك أن يظهر، كمثال <br /> تخبر المتصفح أن يقوم بنقل ما بعدها من نص إلى سطر جديد، في بعض العناصر يمكنك أن تضيف المزيد من المعلومات، هذه المعلومات تسمى خصائص. مثال 1: <h2 style="background-color:#ff0000;">My friendship with HTML</h2> الخصائص تكتب دائماً بنفس الطريقة، فهي تبدأ باسم الخاصية ثم يتبعها علامة يساوي "=" ثم قيمة الخاصية، الفاصلة المنقوطة في المثال تستخدم فقط في خاصية "style" ووظيفتها الفصل بين أوامر مختلفة، سنتحدث عن ذلك في وقت لاحق. هناك خصائص كثيرة ومختلفة، سنتعلم أولاً واحدة منها وهي style، والتي يمكن استخدامها لإضافة تصميم لموقعك . فمثلاً يمكن إضافة لون خلفي للصفحة: مثال 2: <html> <head> </head> <body style="background-color:#ff0000;"> </body> </html> هذه الخاصية ستجعل لون الصفحة أحمرا، انظر بنفسك، سنشرح أكثر عن الألوان في وقت ل...

هل قمت بإنشا المزيد من الصفحات بنفسك؟ إن لم تفعل فإليك هذا المثال: <html> <head> <title>My website</title> </head> <body> <h1>A Heading</h1> <p>text, text text, text</p> <h2>Subhead</h2> <p>text, text text, text</p> </body> </html> ما التالي؟ حان الوقت الآن لتعلم سبعة عناصر جديدة. بنفس الطريقة التي تؤكد فيها على نص معين عندما تضعه بين وسم البداية <em> ووسم الإغلاق </em> , يمكنك أن تضيف تأكيداً أقوى باستخدام وسم البداية <strong> ووسم الإغلاق </strong> . مثال 1: <strong>This should be stronger emphasis.</strong> سيظهر بهذا الشكل في المتصفح: This should be stronger emphasis. بطريقة مماثلة يمكنك تصغير النص باستخدام العنصر small : مثال 2: <small>This should be in small.</small> سيظهر بهذا الشكل في متصفحك This should be in small. هل أستطيع استخدام عدة عناصر في نفس الوقت؟ بإمكانك استخدام عدة عناصرة بسهولة ...

إبدأ دائماً بالقالب الذي قمنا بإنشاءه في الدرس السابق: <html> <head> <title></title> </head> <body> </body> </html> في قسم رأس الصفحة اكتب دائماً العنوان: <title> عنوان صفحتك </title> . لاحظ كيف سيظهر العنوان في أعلى يسار نافذة المتصفح: العنوان بشكل خاص مهم لأنه يستخدم في محركات البحث - مثل غوغل - لأرشفة موقعك وإظهاره في نتائج البحث. في جسم الصفحة اكتب محتويات صفحتك، وأنت تعرف الآن بعض أهم العناصر: <p>Is used for paragraphs.</p> <em>Emphasis text.</b> <h1>Heading</h1> <h2>Subhead</h2> <h3>Sub-subhead</h3> تذكر أن الطريقة الوحيد لتعلم HTML هي بالتجربة والخطأ، لكن لا تقلق، لا يمكنك بأي طريقة أن تدمر حاسوبك أو الإنترنت! لذلك استمر في التجربة، هذه هي أفضل طريقة لاكتساب الخبرة. ماذا يعني هذا؟ لا أحد يتقن تطوير المواقع بتعلم الأمثلة فقط في هذا الدرس، فهذا الدرس هو مجرد بداية بسيطة لفهم مكونات المواقع، ولكي تقوم بإنشاء موقع جيد عليك أن تستخدم ال...

مع كل ما تعلمته في الدروس السابقة أصبحت الآن على بعد دقائق من إنشاء أول موقع لك. كيف؟ في الدرس الأول ألقينا نظرة على الأدوات التي نحتاجها لإنشاء موقع: متصفح وبرنامج المفكرة أو أي محرر نصي مماثل، وبما أنك تقرأ هذه الصفحة فأنت تستخدم الآن متصفحاً، ما تحتاجه الآن هو أن تفتح نافذة جديدة من المتصفح لكي تستطيع قراءة هذا الدرس بينما تستخدم النافذة الأخرى لترى فيها موقعك. أيضاً عليك أن تفتح برنامج المفكرة "Notepad" والذي ستجده في قائمة إبدأ ثم برامج ثم أدوات: أنت جاهز الآن! ماذا أفعل؟ لنبدأ بشيء بسيط، سنقوم بإنشاء صفحة تقول "مرحى! هذا هو موقعي الأول." أكمل القراءة وستعرف كم هو بسيط فعل ذلك. لغة HTML بسيطة ومنطقية، المتصفح يقرأ HTML كما تقرأ أنت اللغة الإنجليزية: من الأعلى إلى الأسفل ومن اليسار إلى اليمين ، لذلك صفحة HTML بسيطة تبدأ بما يجب أن تبدأ به أي صفحة HTML وتنتهي بما يجب أن يأتي في نهاية الصفحة. أول شيء عليك فعله هو أن تخبر المتصفح بأنك "ستتحدث" معه بلغة HTML، يمكنك فعل ذلك عن طريق وسم <html> لا توجد أي مفاجئة هنا، لذلك قبل أن تبدأ أي شيء أكتب ...

الآن أنت جاهز لتعلم جوهر لغة HTML وهي العناصر. العناصر تعطي لوثائق HTML هيكلية محددة وتخبر المتصفح عن كيفية عرض الصفحة، بشكل عام العناصر عبارة عن وسم "tag" للبداية ثم بعض المحتويات ثم وسم الإغلاق. "وسوم"؟ الوسوم هي توصيفات تستخدمها لكي تضعها في بداية العنصر وعند نهايته. كل الوسوم لها نفس نفس الشكل، تبدأ مع علامة أصغر من "<" وتنتهي مع علامة أكبر من ">" . بشكل عام هناك نوعان من الوسوم، وسم البداية: <html> ثم وسم الإغلاق </html> . الفرق بين الإثنين هي علامة "/"، توصيف المحتويات يكون بوضعها بين وسم البداية ووسم الإغلاق. لغة HTML تتكون من هذه العناصر، لكي تتعلم HTML عليك أن تتعلم وتستخدم وسوماً مختلفة. هل يمكنك أن تريني بعض الأمثلة؟ حسناً، العنصر em يشدد النص "يجعله مائلاً" وكل النصوص بين وسم البداية <em> ووسم الإغلاق </em> ستظهر بشكل مائل في المتصفح. ("em" هي اختصار "emphasis".) المثال 1: <em>نص مائل.</em> سيظهر بهذا الشكل في المتصفح: نص مائل. العناصر ...

هذا الدرس سيعطيك مقدمة قصيرة عن صديقك الجديد، HTML. ما هو HTML HTML هي اللغة الأم لمتصفحك. لكي نختصر القصة، HTML اخترعت في عام 1990م من قبل عالم يسمى تيم بيرنرز لي، الهدف من هذه اللغة هو تبسيط عملية وصول العلماء في جامعات مختلفة إلى البحوث التي ينشرونها، المشروع نجح بشكل لم يتصوره تيم بيرنرز لي، باختراعه HTML قام تيم بوضع أساس شبكة الويب كما نعرفها اليوم. HTML هي لغة تسمح بعرض المعلومات (مثال: البحوث العلمية) على شبكة إنترنت، ما تراه عند زيارتك لأي صفحة في الشبكة هو ترجمة المتصفح لأوامر HTML، لكي ترى HTML لأي صفحة تزورها عليك أن تضغط على قائمة عرض "View" ثم المصدر "Source". لمن لم يعتد على رؤية هذه الأوامر، HTML تبدو معقدة لكن هذا الدرس سيساعدك على أن تفهمها. ما فائدة HTML؟ إذا أردت إنشاء موقع فلا توجد طريقة أخرى غير استخدام لغة HTML، حتى لو استخدمت برنامجاً لإنشاء المواقع مثل دريمويفر، معرفتك للغة HTML ولو بشكل بسيط ستساعدك على إنشاء مواقع أفضل، الجميل أن هذه اللغة سهلة التعلم، في درسين فقط ستتعلم كيفية إنشاء موقعك الأول. HTML تستخدم لإنشاء المواقع، هذا ك...