في رمز مصدر الصفحة السابقة ، رأيت في كثير من الأحيان مثل هذه العبارات:
<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 ، يخبر المتصفح ما إذا كانت هذه الصفحة تحتوي على 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 Click) ، فيمكنك تقديمه بأمان في أسفل الجسم ، والتي هي بالتأكيد أفضل طريقة للقيام بذلك.
على سبيل المثال : <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 / anclesevent إلى مستمع الوقت. أو استخدم إطار عمل مثل 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 ، فقم بتغيير [if lt ie 7] إلى [if lte ie 7].
سواء كنت مستخدم Windows أو Mac ، فهناك العديد من المحررين الممتازين للاختيار من بينها:
إذا نظرنا إلى الوراء في الصفحة الأولى التي يكتبها معظمنا ، فسنجد بالتأكيد ثقوبًا خطيرة. عادةً ما تكون غريزة المبتدئين هي لف فقرة مع Div ثم وضع المزيد من divs من أجل السيطرة على المواقع. - في الواقع ، هذا نهج غير فعال وضار.
بعد كتابة صفحة الويب ، يجب عليك التحقق من ذلك عدة مرات لتقليل عدد العناصر.
إذا كنت تستطيع استخدام UL Layout ، فلا تستخدم Div لتخطيط القائمة.
مثلما هو مفتاح كتابة مقال ما هو تقليل وتقليل وتقليل صفحة ما يجب أن يتبع هذا المعيار.
تعتبر فوائد إضافة سمة ALT إلى الصور بديهية - وهذا يتيح للمستخدمين الذين يعطون الصور أو يستخدمون أجهزة خاصة للوصول إلى معلومات الأمير الخاصة بك ، كما أنها ودية لمحركات البحث عن الصور.
لا تدعم Firefox عرض سمة ALT Image ، يمكنك إضافة سمة العنوان:
<img src=cornImage.jpg alt=武林网title=武林网/>غالبًا ما أدرس وأعمل حتى الصباح الباكر دون معرفة ذلك ، وأعتقد أن هذا وضع جيد.
لي ~ ها! الوقت (لحظات آه ، في إشارة إلى لحظات عندما يحدث ضوء السماء أو التنوير المفاجئ) عادة في وقت متأخر من الليل. على سبيل المثال ، أفهم تمامًا مفهوم الإغلاق في JavaScript ، في هذه الحالة. إذا لم تكن قد واجهت هذه اللحظة الرائعة ، جربها الآن!
لا شيء يمكن أن يساعدك على تعلم HTML بشكل أسرع من تقليد المعبود الخاص بك. في البداية ، كان علينا جميعًا أن نكون على استعداد لصنع النسخ ثم تطوير أسلوبنا ببطء. ابحث في رمز صفحة موقع الويب المفضل لديك وشاهد كيف ينفذونها. هذه هي الطريقة الوحيدة للخبراء ، يجب أن تجربها. ملاحظة: فقط تعلم وتقليد نمط الترميز الخاص بهم ، وليس نسخ ونسخ!
انتبه إلى مختلف تأثيرات JavaScript الباردة على الإنترنت. إذا يبدو أنك تستخدم مكونًا إضافيًا ، فيمكنك العثور على اسم المكون الإضافي استنادًا إلى اسم الملف في علامة الرأس في التعليمات البرمجية المصدر الخاصة به ، ثم يمكنك تعلم استخدامه للاستخدام الخاص بك.
هذا ضروري بشكل خاص عند إنشاء مواقع الويب للشركات الأخرى. ألا تستخدم علامة 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 للمطورين المهرة ، مما سيوفر لهم الكثير من الوقت.