أغلب برامج تحرير النصوص مثل : Notepad أو Microsoft Word في الويندوز، أو TextEdit بالنسبة لأجهزة الماك، يمكن استخدامها في كتابة ملفات HTML. قم بفتح ملف جديد واستخدم قائمة "ملف File" ثم  Save As في أعلى القائمة من أجل حفظ الملف على هيئة صفحة ويب، أو من أجل تغيير امتداد الملف إلى ".html" أو ".htm" بدلًا من امتداد ملفات النصوص العادية مثل: ".doc" أو ".rtf"   قد تظهر لك رسالة تحذير تخبرك بأن الملف سيتغير إلى " نص عادي plain text " بدلًا من " نص غني rich text " أو أن بعض التنسيقات والصور لن يتم حفظها بطريقة سليمة. لا بأس من ذلك، فلملفات HTML لا تستخدم هذه الاختيارات على أي حال. لا يوجد فرق بين الإمتدادين .html و .htm . فكلا الامتدادين سيؤديان نفس الغرض قم بحفظ الملف الفارغ، ثم اذهب إلى مكان حفظه على جهاز الكمبيوتر واضغط عليه مرتين لفتحه. من المفترض أن يظهر لك صفحة ويب فارغة تمامًا. إذا لم يعمل بهذه الطريقة قم بسحب الملف إلى شريط العنوان URL في متصفحك. الصفحة خالية لأننا لم نكتب أي أكواد بعد، ومن خلال ما سنتعلمه في النقاط التالية، يمكنك في كل مرة أن تقوم بفتح الملف بواسطة المتصفح لمشاهدة التغييرات في كل مرة.  لاحظ أن ذلك لا يصنع موقعًا إلكترونيًا على الإنترنت. لن يقدر الآخرون بعد على زيارة صفحة الويب الخاصة بك، كما أنك لا تحتاج إلى إتصال بالانترنت من أجل اختبار أو مشاهدة الصفحات المبرمجة. كل ما تحتاجه هو المتصفح من أجل قراءة ملف HTML كأنه موقع إلكتروني عادي. لا تظهر تلك الوسوم في صفحة الويب مثل النصوص العادية. ولكن دورها الرئيسي هو القيام بإخبار متصفح الانترنت بكيفية إظهار صفحة الويب ومحتواها. "الوسم الإفتتاحي start tag" يحتوى على التعليمات. على سبيل المثال، قد يخبر متصفح الانترنت بإظهار النصوص بلون أو حجم معين. تحتاج أيضًا " الوسم الختامي end tag " لإخبار المتصفح بالحد الذي ينتهى عنده تطبيق الأمر. في المثال التالي، النص بين الوسم الافتتاحي والختامي سيكون عريضًا Bold. يتم كتابة كلا الوسمين في أقواس زاوية < > لكن يتم إضافة شرطة مائلة slash بعد القوس الأول في الوسم الختامي < />.   قم بكتابة الوسم الإفتتاحي بين قوسي زاوية: <يُكتب وسم البداية هنا>  قم بكتابة الوسم الختامي في قوسي زاوية، مع إضافة شرطة مائلة بعد القوس الأول: </يكتب وسم النهاية هنا >  واصل القراءة من أجل تعلم كيفية كتابة وسم وصفي توظيفي Functional Markup Tag. في الخطوة التالية كل ما تحتاج معرفته هو تذكر أن الشكل الأساسي يكون مكتوب : < >  و </ > في بعض المواد التعليمية للغة HTML يتم الإشارة إلى الوسوم بوصفها " عناصر " والنص بين الوسم/ العنصر الافتتاحي والوسم/العنصر الختامي يتم وصفه بـ " محتوى العنصر". يبدًا أي ملف HTML بوسم <html> وينتهى بوسم </html>. ويكون الهدف من هذا إخبار المتصفح بأن كل المذكور بين الوسمين مكتوب بلغة HTML. لذلك قم بإضافة هذين الوسمين إلى ملفك.   اكتب  <html> في بداية الملف. قم بالضغط على enter أو return عدة مرات لإضافة مساحة كبيرة لإستخدامها في كتابة بقية الأوامر. ثم اكتب </html>. تذكر دائمًا أن تكتب بقية الأكواد والأوامر المذكورة في الشرح التالي، في المساحة بين وسم html الابتدائي، ووسم html الختامي. في المسافة بين <html> و </html> قم بكتابة  <head> ابتدائي، و </head> ختامي. اترك لنفسك مساحة أيضًا للكتابة بينهما. كل المكتوب بينهما لن يظهر على صفحة الويب نفسها. جرب ما يلي، ولاحظ مكان ظهورها في المقابل:  في المسافة بين  <head>  و </head>؛ قم بكتابة  <title> و </title>  في المسافة بين  <title> و </title>، قم بكتابة " كيفية تعلم لغة HTML ". قم بحفظ الملف ثم فتحه بواسطة متصفح الانترنت ( أو قم بحفظه ثم اضغط refresh على صفحة المتصفح إذا كانت مازالت مفتوحة.) هل تلاحظ المكتوب في شريط المتصفح العلوي فوق شريط العنوان؟. بقية ما يلى من نقاط في هذا الملف التجريبي للمبتدئين سيتم كتابته في قسم body، أو جسد الصفحة، التي تظهر كل محتوياته بشكل طبيعي على صفحة الويب. بعد الوسم الختامي </head>، وقبل وسم  </html>  قم بكتابة  <body> و </body>. الآن من المفترض أن يكون لديك ملف مكتوب كما يلى (ومثل الصورة ) تمامًا. (تجنب نقاط الترقيم)   <html> <head> <title>How to Learn HTML - wikiHow</title> </head> <body> </body> </html> الآن حان وقت كتابة شيء تقدر على رؤيته في المتصفح مباشرة. كل ما ستقوم بكتابته في قسم body بين الوسم الإفتتاحي والوسم الختامي له سوف يظهر بمجرد حفظك لملف HTML وإعادة تحميل الصفحة بواسطة المتصفح. لا تكتب أي شيء بين أقواس الزاوية < أو >. حيث سيفهمها المتصفح بوصفها تعليمات وأوامر ضمن لغة HTML وليست نصوص تلقائية من المفترض ظهورها في صفحة الويب. جرب كتابة Hello world! أو أي شيء آخر ، وأضف حوله الأكواد والأوامر التالية، وراقب ما يحدث:    <em>Hello world!</em> سيظهره كنص مائل مؤكد  Hello world!   <strong>Hello world!</strong>سيظهر النص بحجم عريض Hello world!   <s>Hello world!</s> سيظهر النص مشطوبًا Hello world!   <sup>Hello world!</sup> سيظهر النص كحرف فوقي Hello world!   <sub>Hello world!</sub> سيظهر النص كحرف سفلي Hello world!  جرب مزيج من تلك الأوامر: <em><strong>Hello world!</strong></em> ماذا يظهر لك ؟ إذا كنت ترغب في كتابة خطوط متعددة في ملف HTML الخاص بك، فستلاحظ أن فواصل الأسطر لا تظهر في المتصفح. لذلك عليك كتابة أوامرها بنفسك:   <p> الوسم أو الأمر التالي يفصل بين السطور </p>  الوسم التالي يتم كتابته بعد الجملة المطلوب إضافة سطر فاصل بعدها <br>أو قبل الجملة في حالة الرغبة في إضافة سطر فاصل قبلهاالأمر التالي هو أول كود تستخدمه لا يحتاج إلى وسم ختامي . وتسمى هذه الوسوم بالأوسام الفارغة "empty tags." إضافة عناوين لعرض أسماء الأقسام:<h1>عنوان 1</h1>: العنوان من المستوى الأول <h2>عنوان 2</h2> (المستوى الثاني)<h3>عنوان 3</h3> (المستوى الثالث)<h4>عنوان 4</h4> (المستوى الرابع)<h5>عنوان 5 </h5> (العنوان الأصغر) هناك العديد من الطرق المختلفة لكتابة قائمة في صفحة الويب الخاصة بك. جرب الأكواد التالية لتحديد ما يناسبك منهم. لاحظ أن زوج واحد من الوسوم / العلامات يتم كتابته حول القائمة كلها ( مثل <ul> و  </ul> الخاص بصناعة القوائم الغير مرقمة ) بينما العناصر الفردية في القائمة تكون محاطة بزوج من الوسوم مثل <li> و </li>   استخدم الكود التالي لصناعة قائمة نقطية : <ul><li>العنصر الأول </li><li>العنصر الثاني </li><li>العنصر الثالث </li></ul>  أو هذا الكود للقائمة المرقمة : <ol><li>العنصر الأول </li><li>العنصر الثاني </li><li>العنصر الثالث </li></ol>  أو هذا الكود لصناعة قائمة تعريفات :<dl><dt>القهوة </dt><dd>-مشروب ساخن </dd><dt>الحليب </dt><dd>- مشروب بارد</dd></dl> الآن حان وقت تجربة إضافة بعض العناصر الآخرى جنبًا إلى جنب مع النصوص. جرب الأكواد التالية للقيام بذلك. سوف تحتاج استخدام خدمة استضافة إلكترونية للصور حتى تمتلك URL تقدر على ربطه بأمر إضافة الصورة.   لإضافة خط بلغة HTML استخدم : <br> أو <hr>  لإضافة صورة، استخدم  <img src="الرابط الخاص بالصورة"> يمكنك أن تستخدم ذلك الأمر أيضًا في ربط الصفحة بصفحات أخرى على الموقع، أو بمواقع أخرى تمامًا، لكن بما أنك لا تملك موقع إلكتروني كامل بعد، سوف نركز على " المرسي anchor " وهو ما يطلق على الانتقال بواسطة رابط تشعبي إلى مكان آخر في نفس الصفحة.   قم بصناعة المرسي بإستخدام الوسم <a> في المكان من الصفحة الذي ترغب في الإنتقال إليه . وقم بتسميته بإسم توصيفي يسهل عليك تذكره .:<a name="تعليمات ">هذا هو النص الذي سنبحر بالمرسي إليه </a>  استخدم الأمر  <href> للربط مع هذا المرسي أو الانتقال إلى صفحة أخرى أو موقع إلكتروني آخر :<a href="أدرج هنا رابط الصفحة الآخرى أو اسم - المرسي - الموجود في نفس الصفحة و المراد الإنتقال إليه بواسطة هذا الرابط ">واكتب هنا النص أو الصورة التي ستعمل على هيئة رابط الإنتقال</a>  لإضافة رابط مع مرسي موجود على صفحة ويب أخرى، قم بإضافة علامة # بعد الرابط، متبوعًا باسم المرسى. على سبيل المثال http://www.wikihow.com/Learn-HTML#Tips ينقلك مباشرة إلى قسم التعليمات والنصائح في صفحة تعلم HTML على موقع Wikihow.
Open an HTML document. View your document with an internet browser. Understand markup tags. Write your first <html> tag. Fill out the <head> portion of your document. Create a <body> section. Add text in various styles. Divide your text into paragraphs. Learn how to make lists. Spruce up your page with line breaks, horizontal lines, and images. Link to other places on the page.