تلخص هذه المقالة 30 دليلًا لكتابة رمز HTML. طالما أنك تضعهم في الاعتبار واستخدامها بمرونة في عملية كتابة رمز HTML ، فستكتب بالتأكيد رموزًا جميلة وتدخل صفوف المطورين المحترفين في أقرب وقت ممكن.
في رمز مصدر الصفحة السابقة ، رأيت في كثير من الأحيان مثل هذه العبارات:
<li>some text here.<li>some new text here.<li>you get the idea.ربما في الماضي ، يمكننا أن نتسامح مع علامات HTML غير المعلنة هذه ، ولكن في معايير اليوم ، هذا غير مرغوب فيه للغاية ويجب تجنبه بنسبة 100 ٪. تأكد من الانتباه إلى إغلاق علامة HTML الخاصة بك ، وإلا فلن يمرر التحقق وقد يتسبب في بعض المشاكل غير المتوقعة.
من الأفضل استخدام هذا النموذج:
<ul><li>some text here. </li><li>some new text here. </li><li>you get the idea. </li></ul>انضم المؤلف إلى العديد من منتديات CSS في وقت سابق ، حيث إذا واجه المستخدم مشاكل ، فإننا نقترح أن يفعل شيئين أولاً:
عادة ما يكون هناك أربعة أنواع مستندات للاختيار من بينها :يخبر تعريف Doctype المتصفح ما إذا كانت الصفحة تحتوي على HTML أو XHTML أو خليط من الاثنين ، بحيث يمكن للمتصفح تحليل العلامة بشكل صحيح.
1. <!doctype html public -//w3c//dtd html 4.01//en http://www.w3.org/tr/html4/strict.dtd>2. <!doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/loose.dtd>3. <!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>4. <!doctype html public -//w3c//dtd xhtml 1.0 strict//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>كانت هناك دائمًا آراء مختلفة حول نوع إعلان نوع المستند الذي يجب استخدامه. يُعتقد عمومًا أن أكثر بيانات صارمة هي الخيار الأفضل ، لكن الأبحاث تظهر أن معظم المتصفحات ستحلو هذا البيان بطريقة طبيعية ، لذا يختار الكثير من الناس استخدام معيار HTML4.01. إن الحد الأدنى من اختيار البيان هو أنه ليس مناسبًا لك حقًا ، لذلك عليك أن تفكر بشكل شامل في اختيار بيان يناسب مشروعك.
عندما تكون مشغولاً في كتابة رمز ، يمكنك في كثير من الأحيان إضافة رمز CSS مضمن قليلاً أو كسول ، تمامًا مثل هذا:
<p style=color: red;>网页设计</p>هذا يبدو مريحًا وليس لديه مشكلة ، لكنه سيؤدي إلى مشاكل في الكود الخاص بك.
عند بدء كتابة رمز ، من الأفضل البدء في إضافة رمز النمط بعد اكتمال بنية المحتوى.
طريقة الترميز هذه مثل محاربة حرب العصابات ، والتي هي نهج تقليدي للغاية. -Chris Coyier
طريقة أفضل هي تحديد نمط هذا p في ملف ورقة الأنماط:
someelement > p {color: red;}من الناحية النظرية ، يمكنك تقديم أوراق أنماط CSS في أي مكان ، لكن مواصفات HTML توصي بتقديمها في علامة رئيس صفحة الويب ، والتي يمكن أن تسرع عرض الصفحة.
أثناء عملية تطوير Yahoo ، وجدنا أن إدخال أوراق الأنماط في علامة الرأس سيؤدي إلى تسريع تحميل صفحات الويب.
لأن هذا يسمح للصفحة بإعداد خطوة بخطوة. - فريق Yslow
<head><title>my favorites kinds of corn</title><link rel=stylesheet type=text/css media=screen href=path/to/file.css /><link rel=stylesheet type=text/css media=screen href=path/to/anotherfile.css /></head>أحد مبدأ التذكر هو جعل الصفحة موجودة أمام المستخدمين في أسرع وقت ممكن. عند تحميل البرنامج النصي ، تتوقف الصفحة إلى التحميل حتى يتم تحميل البرنامج النصي بالكامل. لذلك سوف يضيع المزيد من الوقت للمستخدمين.
إذا كان ملف JS الخاص بك يريد فقط تطبيق وظائف معينة ، مثل حدث Click Button ، فيمكنك تقديمه بأمان في أسفل الجسم ، وهو بالتأكيد أفضل طريقة للقيام بذلك.
على سبيل المثال : <p>and now you know my favorite kinds of corn. </p><script type=text/javascript src=path/to/file.js></script><script type=text/javascript src=path/to/anotherfile.js></script></body></html>منذ عدة سنوات ، كانت هناك طريقة لإضافة رمز JS مباشرة إلى علامة HTML. شائع للغاية في ألبومات الصور البسيطة. في الأساس ، يتم إرفاق حدث onclick بعلامة ، وتأثيره يعادل بعض كود JS. ليست هناك حاجة لمناقشة الكثير ، ولا ينبغي استخدام هذه الطريقة ، ويجب نقل الكود إلى ملف JS خارجي ، ثم addeventListener / includevent مستمع الوقت. أو استخدم إطار عمل مثل jQuery ، وطريقة الساعة مطلوبة.
$('a#morecorninfolink').click(function() {alert('want to learn more about corn?');});كثير من الناس لا يفهمون حقًا أهمية التحقق القياسي وقيمة. قام المؤلف بتحليل هذه المشكلة بالتفصيل في المدونة. في كلمة واحدة ، التحقق القياسي بالنسبة لك ، وليس لك أن تسبب المتاعب.
إذا كنت قد بدأت للتو في الانخراط في إنتاج صفحات الويب ، فمن المستحسن بشدة تنزيل شريط أدوات تطوير صفحة الويب هذا واستخدام التحقق من HTML القياسي والتحقق القياسي CSS في أي وقت أثناء عملية الترميز. إذا كنت تعتقد أن CSS هي لغة سهلة التعلم ، فسوف تجعلك تموت. سوف يجعل الرمز المعقد صفحتك مليئة بالثغرات والمشاكل باستمرار. هناك طريقة جيدة هي التحقق والتحقق والتحقق.
Firebug هو أفضل مكون إضافي يستحقه لتطوير الويب. لا يقتصر الأمر على تصحيح JavaScript ، ولكنه يتيح لك أيضًا فهم خصائص ومواقع علامات الصفحة بشكل حدسي. وغني عن القول ، قم بتنزيله!
وفقًا لملاحظة المؤلف ، فإن معظم المستخدمين يستخدمون 20 ٪ فقط من وظيفة Firebug ، والتي هي بالفعل مضيعة. قد تقضي بضع ساعات أيضًا في تعلم هذه الأداة في النظام ، وأعتقد أنها ستمنحك ضعف النتيجة مع نصف الجهد.
تعليمي Firebug :من الناحية النظرية ، يمكنك كتابة علامات مثل هذا:
<div><p>here's an interesting fact about corn. </p></div>من الأفضل عدم الكتابة بهذه الطريقة. من غير المجدي وضع المزيد من الحروف وسيجعل الكود قبيحًا ، وهو أمر جيد:
<div><p>here's an interesting fact about corn. </p></div>يوصي المؤلف باستخدام جميع هذه العلامات الستة على صفحات الويب الخاصة بك. على الرغم من أن معظم الأشخاص سيستخدمون فقط الأربعة الأولى ، إلا أن H الأكثر استخدامًا سيكون له العديد من الفوائد ، مثل الجهاز الصديقة ، وملائمة للمحرك ، وما إلى ذلك ، يمكنك أيضًا استبدال علامة P الخاصة بك بـ H6.
اليوم ، بدأ المؤلف مناقشة على Twitter: إذا تم تعريف H1 على الشعار أو على عنوان المقال ، اختار 80 ٪ من الأشخاص الأخير.
بالطبع ، تعتمد كيفية استخدامها على احتياجاتك ، لكنني أقترح أنه عند إعداد مدونة ، يجب عليك تعيين عنوان المقالة على أنها H1 ، وهو مفيد للغاية لتحسين محرك البحث (SEO).
على مدار السنوات القليلة الماضية ، قام فريق Yahoo بالكثير من العمل الرائع في التطوير الأمامي. منذ وقت ليس ببعيد ، أصدروا امتداد Firebug يسمى Yslow ، والذي سيحلل <صفحة الويب الخاصة بك وإرجاع نسخة ، والتي تحلل بعناية جميع جوانب صفحة الويب هذه ويقترح المجالات التي تحتاج إلى تحسين. على الرغم من أنها قاسية بعض الشيء ، إلا أنها ستساعدك بالتأكيد. ينصح بشدة - yslow!
عادةً ما يحتوي موقع الويب على قائمة تنقل ، يمكنك تحديدها بهذه الطريقة:
<div id=nav><a href=#>home </a><a href=#>about </a><a href=#>contact </a></div>إذا كنت ترغب في كتابة رمز جميل ، فمن الأفضل عدم استخدام هذه الطريقة.
لماذا تستخدم UL لتخطيط قوائم الملاحة؟
-ولدت UL للتحضير لقائمة التعريف
من الأفضل تعريفه على هذا النحو:
<ul id=nav><li><a href=#>home</a></li><li><a href=#>about</a></li><li><a href=#>contact</a></li></ul>لقد كان IE دائمًا كابوسًا للمطورين في الواجهة الأمامية!
إذا تم الانتهاء من ورقة أنماط CSS الخاصة بك ، فيمكنك إنشاء ورقة أنماط لـ IE ، وبعد ذلك سيصبح هذا ساري المفعول فقط لـ IE:
<!--[if lt ie 7]><link rel=stylesheet type=text/css media=screen href=path/to/ie.css /><![endif]-->معنى هذه الرموز هو: إذا كان متصفح المستخدم هو IE6 أو أدناه ، فسيصبح هذا الرمز مفعولًا. إذا كنت ترغب في تضمين IE7 ، فقم بتغيير [إذا كان lt ie 7] إلى [إذا كان lte ie 7].
سواء كنت مستخدم Windows أو Mac ، فهناك العديد من المحررين الممتازين للاختيار من بينها:
إذا نظرنا إلى الوراء في الصفحة الأولى التي يكتبها معظمنا ، سنجد بالتأكيد عادات Div خطيرة. عادةً ما تكون غريزة المبتدئين هي لف فقرة مع div ، ثم وضع المزيد من divs من أجل التحكم في المواقع. - في الواقع ، هذا نهج غير فعال وضار.
بعد كتابة صفحة الويب ، يجب عليك التحقق من ذلك عدة مرات لتقليل عدد العناصر.
إذا كان بإمكانك استخدام قوائم UL لتخطيط ، فلا تستخدم divs لتخطيطها.
مثلما هو مفتاح كتابة مقال ما هو تقليل وتقليل وتقليل صفحة ما يجب أن يتبع هذا المعيار.
تعتبر فوائد إضافة سمة ALT إلى الصور بديهيًا - وهذا يتيح للمستخدمين الذين يعطون الصور أو يستخدمون أجهزة خاصة للوصول إلى معلومات الأمير الخاصة بك ، كما أنها ودية لمحركات البحث عن الصور.
لا تدعم Firefox عرض سمة ALT Image ، يمكنك إضافة سمة العنوان:
<img src=cornimage.jpg alt=网页设计title=网页设计/>غالبًا ما أدرس وأعمل حتى الصباح الباكر دون معرفة ذلك ، وأعتقد أن هذا وضع جيد.
لي ~ ها! الوقت (لحظات آه ، في إشارة إلى لحظات عندما يحدث ضوء الصفصاف أو لحظات التنوير) عادة في وقت متأخر من الليل. على سبيل المثال ، أفهم تمامًا مفهوم الإغلاق في JavaScript ، في هذه الحالة. إذا لم تكن قد واجهت هذه اللحظة الرائعة ، جربها الآن!
لا شيء يمكن أن يساعدك على تعلم HTML بشكل أسرع من تقليد المعبود الخاص بك. في البداية ، كان علينا جميعًا أن نكون على استعداد لصنع النسخ ثم تطوير أسلوبنا ببطء. ابحث في رمز صفحة موقع الويب المفضل لديك وشاهد كيف ينفذونها. هذه هي الطريقة الوحيدة للخبراء ، يجب أن تجربها. ملاحظة: فقط تعلم وتقليد نمط الترميز الخاص بهم ، وليس نسخ ونسخ!
انتبه إلى مختلف تأثيرات جافا سكريبت على الإنترنت. إذا يبدو أنك تستخدم مكونًا إضافيًا ، فيمكنك العثور على اسم المكون الإضافي استنادًا إلى اسم الملف في علامة الرأس في التعليمات البرمجية المصدر الخاصة به ، ثم يمكنك تعلم استخدامه للاستخدام الخاص بك.
هذا ضروري بشكل خاص عند إنشاء مواقع الويب للشركات الأخرى. ألا تستخدم علامة blockquote بنفسك؟ ثم قد يستخدمه المستخدم ، ألا تستخدم نفسك؟ يمكن للمستخدمين أيضًا. خذ وقتًا لإنشاء صفحة تعرض أنماط العناصر مثل UL و OL و P و H1-H6 و blockquotes وما إلى ذلك ، وتحقق مما إذا كانت هناك أي إغفال.
ملاحظة المترجم: العنوان الإنجليزي الأصلي هو استخدام Twitter
هناك العديد من واجهات برمجة التطبيقات التي يمكن إضافتها إلى صفحات الويب مجانًا الآن ، وهذه الأدوات قوية للغاية. يمكن أن يساعدك في تنفيذ العديد من الوظائف الذكية ، والأهم من ذلك ، أنه يمكن أن يساعدك على الترويج للموقع.
Photoshop هو أداة مهمة للمهندسين الأماميين. إذا كنت بارعًا في HTML و CSS ، فقد تتعلم أيضًا المزيد عن Photoshop.
على الرغم من أن بعض علامات HTML نادراً ما يتم استخدامها ، إلا أنه لا يزال يتعين عليك فهمها. على سبيل المثال ، ABBR ، استشهد ، وما إلى ذلك ، يجب أن تتعلمها في حالة الطوارئ.
هناك العديد من الموارد الممتازة على الإنترنت ، وهناك العديد من الخبراء المختبئون في المجتمع. هنا يمكنك أن تتعلم بنفسك وتسأل المطورين ذوي الخبرة.
يتم إعادة تعيين CSS أيضًا CSS ، مما يعني إعادة تعيين بعض أنماط علامات HTML ، أو الأنماط الافتراضية.
هناك أيضًا نقاش شرسة حول ما إذا كان سيتم إعادة تعيين CSS على الإنترنت ، ويوصي المؤلف بذلك. يمكنك أولاً اختيار بعض إعادة ضبط CSS الناضجة ، ثم تتطور ببطء إلى شيء يناسبك.
ببساطة ، يجب عليك محاذاة عناصر الويب الخاصة بك قدر الإمكان. يمكنك مراقبة مواقع الويب التي تحبها ، وشعاراتها وعناوينها ومخططاتها والفقرات هي بالتأكيد صحيحة للغاية. وإلا فإنه سيظهر فوضوي وغير مهني.
الآن بعد أن أتقنت معرفة HTML و CSS و Photoshop ، تحتاج أيضًا إلى معرفة كيفية تحويل PSD إلى صور وخلفيات على صفحة الويب. فيما يلي دروسان جيدتان:
هناك العديد من الأطر الممتازة لـ JavaScript و CSS ، ولكن إذا كنت مبتدئًا ، فلا تستعجل في استخدامها. إذا لم تكن قادرًا على إتقان CSS بمهارة ، فإن استخدام الأطر سوف يخلط بين نظام المعرفة الخاص بك.
تم تصميم إطار CSS للمطورين الماهرين ، مما سيوفر لهم الكثير من الوقت.