المحتوى

• خطوات
• الطريقة 1 من 1: كتابة صفحة HTML
• نصائح
• تحذيرات
• ماذا تحتاج

HTML (لغة ترميز النص التشعبي) هي لغة البرمجة الأساسية لتطوير صفحات الويب. تم إنشاؤها كلغة برمجة بسيطة ومريحة. تم تطوير معظم الصفحات على الإنترنت باستخدام أحد أشكال هذه اللغة (ColdFusion و XML و XSLT). بعد قراءة هذه المقالة ، يمكنك متابعة تدريبك باستخدام موارد أخرى على الإنترنت. حاول البحث في الإنترنت عن مقالات أخرى متعلقة بهذا الموضوع.

خطوات

الطريقة 1 من 1: كتابة صفحة HTML

1. 1 قبل أن تبدأ في التعرف على إحدى الخطوات المعروضة هنا ، راجع قسم "ما سوف تحتاجه".
2. 2 ما يجب أن تعرفه قبل أن تبدأ في فهم هذه المشكلة:
3. 3 أساسيات. هل سمعت من قبل عن العلامة؟ العلامة محاطة بأقواس زاوية ، مع وجود الكلمة في الداخل. تتم كتابة علامة النهاية بنفس الشكل ، ولكن مع إضافة شرطة مائلة بعد قوس الزاوية الأول. السمة هي كلمة اختيارية في العلامة تُستخدم لإضافة تفاصيل إلى العلامة.
4. 4 بداية الوثيقة. في أي محرر نصوص تستخدمه ، الصق ما يلي:
   html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
   يجب إغلاق العلامة بنفس العلامة ، ولكن بشرطة مائلة بعد قوس الزاوية الأول. هناك استثناءات مثل العلامات ميتا أو DOCTYPE.
5. 5 DOCTYPE
   • عادة ، يتم تعيين معظم صفحات الويب DOCTYPE ". يساعد هذا في تحديد الترميز وكذلك كيف ستدركه متصفحات الويب. ستعمل معظم الصفحات بدونها ، "ولكن هذا ضروري إذا كنت تريد المطابقة (فهي تنظم أنواع الترميزات على الإنترنت وكيفية استخدامها)... DOCTYPE لـ HTML 4.01 معروض أدناه:! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> هذا واحد من الأكثر شيوعًا يتم استخدام DOCTYPE على الصفحات في جميع أنحاء الإنترنت.أولاً ، يشير إلى نوع الصفحة التي تصف "html" ، ثم تسلط الضوء على نوع الترميز ، وأخيراً ، موقع DOCTYPE ، والذي نتيجة لذلك ، يصف الصفحة لمتصفح الويب.
   • هناك أنواع مختلفة من HTML (إصدارات مختلفة تم تطويرها على مر السنين) ، على سبيل المثال باستخدام علامات جديدة أو علامات محددة. تم إهمال بعض العلامات (يتم استخدام علامات أخرى أكثر فائدة بدلاً من ذلك).
   • ب> و أنا> - هذا هو ما يتم فرضه حاليًا على العلامات ، لأنها تُستخدم لتحويل النص ، ولكن ليس المواصفات ، ونتيجة لذلك ، تأتي العلامات الأخرى لتحل محلها. بطاقة شعار قوي> هو بديل ل ب>، و م>، بديل عن أنا>.
   • من المهم أن يتم استبدال العلامات السابقة بعلامات أكثر من مجرد تنسيق. إذا تمت ترجمة النص ، فلن يظل التنسيق فحسب ، بل أيضًا معناه كما هو. هذا صحيح من الناحية المعنوية.
   • في XHTML الإصدار 2.0 ، فإن b> و أنا> غير مستخدم ، تمامًا كما هو الحال في إصدار HTML 3+.
6. 6 HTML "قاعدة التغليف".
   • دعنا نلقي نظرة على العلامات الأكثر أهمية المستخدمة حاليًا. أثناء إنشاء الصفحة ، يتم استخدام بنية بسيطة. إذا تم فتح علامة ، ونتيجة لذلك ، يجب إغلاقه... هذا ينطبق على الهيكل بأكمله. فيما يلي مثال صالح لهيكل تخطيط XHTML:
   • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   • html xmlns = "http://www.w3.org/1999/xhtml">
   • رئيس>
   • meta http-equiv = "نوع المحتوى" content = "text / html؛ charset = utf-8" />
   • العنوان> أهلاً بالعالم! / العنوان>
   • / رئيس>
   • الجسم>
   • h1> أهلاً بالعالم! / h1>
   • / الجسم>
   • / html>
   • عينة رمز يصدر رسالة مرحبا بالعالم... هذا يسمى اختبار مرحبا بالعالم.
7. 7 عنوان
   • عنوان صفحة الويب هو المحتوى الموجود بين العلامة رئيس>... لا يمكن للمستخدم عرض هذا المحتوى (فقط العنوان الذي يظهر في عنوان الصفحة). المعلومات بين العلامات رئيس>، يمكنه إرفاق علامات أخرى ، مثل:
     
     
     • تُستخدم علامة META للحصول على معلومات مفيدة لمحركات البحث والأدوات المساعدة الأخرى.
     • علامة LINK التي تنشئ ارتباطًا بين المستندات ، على سبيل المثال للأنماط (CSS).
     • علامة SCRIPT ، وهذا يشمل تقريبًا أي ترميز ويب ، مع إمكانية الوصول عن بُعد (من مستند آخر).
     • علامة STYLE ، وهي في الأساس نمط يمكن تطبيقه على الصفحة.
     • علامة TITLE هي العنوان الذي يظهر كعنوان صفحة في متصفح الويب الخاص بك.
   • دعنا نرى عرضًا توضيحيًا لبعض هذه في مثال رأس مأخوذ من موقع الويب هذا (تم اختصاره):
     • رئيس>
     • العنوان> ... / title>
     • meta name = "description" content = "..." />
     • link rel = "stylesheet" type = "text / css" href = "..." />
     • meta http-equiv = "content-type" content = "text / html؛ charset = UTF-8" />
     • style type = "text / css" media = "all"> ... / style>
     • نوع البرنامج النصي = "text / javascript" src = "..."> / script>
     • / رئيس>
       
       في حالة عدم ملاحظتك ، تم تمييز العلامات الفردية ، مع إزالة المعلومات الفعلية. المثال قصير نوعًا ما ، حيث يعرض تقريبًا كل علامة يمكن العثور عليها في رئيس>باستثناء تعليق HTML (سنتحدث عن هذا بعلامات بسيطة).
8. 8 علامات بسيطة في كل مكان
   • دعنا ننتقل ونرى العلامات الأخرى. كن حذرًا في وضع العلامات وتذكر القاعدة الأساسية ، "التغليف".
     
     
     • قوي> يؤكد النص المهم.
     • صغير> يجعل النص أصغر. يتم قياس حجم الخط بوحدات قياسية من 1 إلى 7 ، و 3 هو حجم النص الافتراضي. ...
     • قبل> يحدد كتلة نص منسق. كما هو صحيح ، يتم كتابة هذا النص بخط بنفس الحجم وبجميع المسافات بين الكلمات.
     • em> يعرض النص على هيئة عبارة.
     • del> يشطب النص.
     • ins> يحدد النص الذي تم إدراجه في المستند.
     • h1> إحدى علامات العناوين العديدة. تبدأ العلامات من هذا النوع بحرف "h" ، مع اختلاف في العدد. تأكد من إغلاق العلامة بنفس الرقم.
     • p> يعرف فقرة.
     • ! --- ... ---> بخلاف العلامات الأخرى ، يجب أن يكون التعليق داخل العلامة نفسها. هذه المعلومات مرئية فقط عند عرض الرمز.
     • blockquote> يعرض اقتباسًا ، ويمكن استخدامه مع علامة الاستشهاد>.
     • الأمثلة القليلة المذكورة أعلاه ليست قائمة كاملة بالعلامات الموجودة. لمعرفة المزيد عن الآخرين ، قم بزيارة.
9. 9 خلق هيكل واضح
   • تم تصميم الصفحات للاحتفاظ بالبيانات في مجموعات بسيطة من العلامات حتى نتمكن من تحليل المعلومات في فقرات. يتعرف الكمبيوتر على البيانات ؛ ولا يعرف السياق أو الاتصال المفاهيمي. علينا إنشاء صفحات HTML صديقة للكمبيوتر. يتم تحقيق ذلك باستخدام علامة div. يساعد في إنشاء عدد كبير من الصفحات. يمكن تصميمه باستخدام CSS وهو أسهل من إنشاء جداول تعليمات برمجية كبيرة للتخطيط.
     • div> هذه العلامة خاصة لأنه يمكن تصميمها واستخدام مجموعات منفصلة من المعلومات التي يمكن لكل من المستخدم والكمبيوتر فهمها.
   • دعنا نلقي نظرة على تخطيط HTML بسيط يستخدم علامة div.
     • ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
     • html xmlns = "http://www.w3.org/1999/xhtml">
     • رئيس>
     • meta http-equiv = "نوع المحتوى" content = "text / html؛ charset = utf-8" />
     • العنوان> أهلاً بالعالم! / العنوان>
     • / رئيس>
     • الجسم>
     • h1> أهلاً بالعالم! / h1>
     • معرف div = "contentOne">
     • p> هذا نص في div # contentOne. / p>
     • div>
     • p> فقرة في قسم فرعي من div # contentOne / p>
     • / div>
     • / div>
     • / الجسم>
     • / html>
   • يساعد استخدام علامات div> في البحث عن الأنماط وتعديلها أثناء العمل باستخدام CSS و Javascript. سيستخدم HTML ترميزًا مختلفًا للعمل مع أنماط CSS وجافا سكريبت لإنشاء تجربة مستخدم أفضل وأكثر استجابة.

نصائح

• بعد قراءة هذا المقال ، لا تتوقف وتعتقد أنك تعلمت كل ما تحتاج إلى معرفته. هناك دائمًا شيء ما لنتعلمه ، خاصة في هذه التكنولوجيا.
• تعلم وفهم واكتب التعليمات البرمجية.
• لاحظ أن بعض العلامات تستخدم فقط>. Para و br بعض الأمثلة. تم فتح العلامات الأخرى بـ> بحاجة إلى مزيد من الإغلاق. على سبيل المثال ، "div> / div>".
• يتوقع الناس اكتشافات جديدة ، لذا أعد اختراع أو تصميم أو كود.
• بمجرد أن تتعلم الكثير ، حاول تعلم برمجة الخادم.
• تعلم كيفية العمل مع CSS بالإضافة إلى Javascript.

تحذيرات

• تذكر أن HTML هو كل شيء عن تحرير المحتوى. هذا يعني أن HTML يُستخدم فقط لتخزين المحتوى بتنسيق معروف. يجب إجراء تغييرات أخرى باستخدام تقنيات أخرى ، مثل CSS. وهذا يعني أيضًا القيام بعبارة "الصحيح الدلاليحتى لو لم يعترف الآخرون بذلك. تساعد لغات البرمجة الأخرى في بناء صفحات الويب (CSS و Javascript و XML). HTML هو منشئ المحتوى.

ماذا تحتاج

• محرر نصي يدعم ترميز ANSI
• متصفح ويب مثل Internet Explorer أو Mozilla Firefox
• (اختياري) محرر wysiwyg أو wykiwyg HTML مثل Adobe Dreamweaver أو Aptana Studio أو Microsoft Expression Web