HTML usage
It's the standard markup language for creating Web pages
Describes the structure of a Web page
Consists of a series of elements
tells the browser how to display the content
HTML
الفقرات مفهوم الفقرات الفقرات المخصصة لعرض النص بالشكل المناسب النزول على سطر جديد في الفقرة عرض أكثر من مسافة بين الكلمات في الفقرة الفقرات المخصصة لعرض النص كما هو طريقة عرض كود HTML في الصفحة طريقة عرض خط أفقي مفهوم الفقرات الفقرة ( Paragraph ) عبارة عن مساحة يتم تخصيصها لعرض النص الذي نضعه فيها على سطر جديد. أنواع الفقرات هناك نوعين من الفقرات التي يمكن إضافتها في الصفحة: فقرات مخصصة لعرض النص بالشكل المناسب. فقرات مخصصة لعرض النص كما هو. الفرق بين النوعين هو أن الفقرة المخصصة لعرض النص بالشكل المناسب يتم عرض النص الموضوع فيها بشكل مناسب لحجم الشاشة حتى يتمكن المستخدم من رؤية كل النص الموضوع فيها بشكل سهل بالإضافة إلى أنها تقوم بإزالة أي مسافات فارغة تجد أنه لا داعي لها. الفقرات المخصصة لعرض النص بالشكل المناسب لعرض نص عادي في الصفحة نضع النص بداخل
. معلومة: p إختصار لكلمة Paragraph التي تعني فقرة. عند عرض النص بواسطة هذا الوسم يقوم المتصفح بإزالة أي مسافات فارغة يجد أنه لا داعي لها ( Extra White Spaces ) على النحو التالي: إذا وجد أكثر من مسافة بين الكلمات يبقي مسافة واحدة فقط. إذا وجد أسطر فارغة, سيقوم بإزلتها عند عرض المحتوى في الصفحة. إذا وجد النص موضوع على أكثر من سطر عمداً, سيقوم بعرض كل المحتوى على نفس السطر و ينزل على السطر عند الحاجة فقط. في المثال التالي قمنا بعرض فقرتين في الصفحة. عند تجربة الكود لاحظ كيف أنه سيتم عرض الفقرتين تحت بعضهما في الصفحة. المثال الأول
This is a paragraph.
This is another paragraph.
جرب الكود في المثال التالي تعمدنا وضع مسافات فارغة بين الكلمات. عند تجربة الكود لاحظ كيف سيقوم المتصفح بإزالة جميع المسافات التي يجد أنه لا داعي لها و كيف سيعرض النص بشكل جميل. المثال الثاني
This paragraph contains extra spaces.
جرب الكود في المثال التالي تعمدنا كتابة النص على أكثر من سطر. عند تجربة الكود لاحظ كيف سيقوم المتصفح بعرض النص كله على سطر واحد متجاهلاً أن النص مكتوب على أكثر من سطر. المثال الثالث
Hello guys, my name is Mhamad. I start learning programming at 19. One year later I create harmash.com
جرب الكود النزول على سطر جديد في الفقرة لإعلام المتصفح أنك تريد النزول على سطر جديد بداخل الفقرة, يجب وضع
في نهاية السطر. معلومة: br إختصار لكلمة Break التي يقصد بها في حالتنا إيقاف العرض على نفس السطر. في المثال التالي قمنا بإعلام المتصفح أنه من بعد كلمة paragraph. يجب عرض النص المتبقي على سطر جديد. مثال
Here we break the paragraph.
This will apear on a new line.
جرب الكود عرض أكثر من مسافة بين الكلمات في الفقرة لإعلام المتصفح أنك تريد وضع أكثر من مسافة فارغة وراء بعض في النص, فالحل هو استخدام الرمز الذي يعني مسافة فارغة بالنسبة للمتصفح. كل رمز تضعه يفهمه المتصفح على أنه مسافة فارغة يجب عدم إزالتها. في المثال التالي قمنا بإضافة 4 مسافات فارغة في بداية النص.
Phase5 مُحرر معروف على نطاق واسع منذ أن تم تحديثه في عام 1998. يدعم Phase5 بجانب HTML العديد من لغات البرمجة مثل PHP وجافا سكريبت Java Script وجافا Java وغيرها، كما يمكّنك من العمل على مختلف المشاريع والتعديل في مستندات مختلفة في وقتٍ واحد.
Notepad++ من برامج التحرير الكلاسيكية والمعروفة على نطاقٍ واسع نظرًا لارتباطها دائمًا بنظام التشغيل ويندوز. يدعم Notepad++ بجانب HTML وCSS لغات برمجة عديدة مثل جافا Java وجافا سكريبت Java Scipt وبايثون Python وروبي Ruby وماتلاب Matlab وغيرها من لغات البرمجة العديدة.
هناك أيضًا العديد من البرامج التي تُستخدم كمحرر لكتابة أكواد ووسوم HTML مثل Programmer’s Notepad وSynWrite وPlainEdit.NET وSublime Text 2.
مُتصفّح للإنترنت
بما أنّك تقرأ هذا المقال، فبالطبع تستخدم مُتصفّحًا للإنترنت. العديد من برامج التصفّح تفي بالغرض، ويُعد أفضلها وأكثرها استخدامًا Google Chrome وMozilla Firefox وOpera وSafari.
وبهذا فقد حصلت على كل ما تحتاجه لتبدأ طريق تعلّم واحتراف HTML، بقي لنا أن نستعرض أفضل المصادر التي تتعلم منها.
ما هي أفضل طريقة لتعلّم HTML؟
أجمع الخبراء والمتدربون أن أفضل طريقة للتعلّم هي التدرّب والتطبيق على كتابة الأكواد والوسوم بنفسك. كما استعرضنا من قبل، بإمكانك مشاهدة الدروس المُختلفة والتطبيق عليها باستخدام المُحرر وكذلك استعراض النتائج في المُتصفّح الخاص بك.
وهناك أيضًا بعض المواقع التي تُتيح لك التطبيق أولًا بأول من خلال الموقع نفسه ويعرض لك النتائج من خلال الشاشة نفسها، سنستعرضهم بالتفصيل.
أفضل المواقع لتعلّم HTML
أكاديمية حسوب
تعليقات
إرسال تعليق