تاريخ إنشاء وتطوير HTML. أساسيات لغة HTML ما هي لغة HTML؟

في هذه المقالة سنلقي نظرة على مسألة ماهية HTML ونلقي نظرة على تاريخ تطورها. دعونا نتحدث عن كيفية إنشاء موقع ويب وما إذا كان الأمر صعبًا على الإطلاق. لذلك، دعونا نبدأ

HTML (لغة ترميز النص التشعبي) هي لغة ترميزية خاصة تُستخدم لإنشاء مواقع الويب على الإنترنت.

تفهم المتصفحات لغة HTML بشكل مثالي ويمكنها تفسيرها بطريقة مفهومة. بشكل عام، أي صفحة من الموقع هي عبارة عن كود html يترجمه المتصفح إلى نموذج سهل الاستخدام. بالمناسبة، رمز أي صفحة متاح للجميع. لعرضه، انقر بزر الماوس الأيمن وحدد عرض التعليمات البرمجية المصدر أو اضغط على CTRL+U على لوحة المفاتيح:

اكتسبت لغة ترميز HTML شعبية واسعة. في الوقت الحالي، هذه هي اللغة الوحيدة التي يتم من خلالها إنشاء ترميز الموقع. أريد التأكيد على حقيقة أنه ترميز. يتم إنشاء ما يسمى "المحرك" بلغة برمجة أخرى (في أغلب الأحيان PHP)، مما يسمح لك بإنشاء صفحات تفاعلية (HTML لا يسمح بذلك).

سيلاحظ القارئ اليقظ أنه ليست كل الصفحات الموجودة على الإنترنت تحتوي على امتداد .html في النهاية. على سبيل المثال، هناك صفحات /catalog/list (بدون أي امتداد على الإطلاق). هذا غير صحيح، ولكن المتصفح سيكون قادرًا على فهم أن هذا مستند ويب وعرضه بشكل صحيح.

فيما يلي مثال على بنية صفحة html نموذجية. يرجى ملاحظة أن كود HTML مقسم إلى منطقتين: رأس الصفحة ونصها.

يمكن تحرير هذا الرمز في أي محرر نصوص. في أغلب الأحيان، يتم استخدام برنامج notepad++ لتطوير موقع ويب بتنسيق html (محرر متقدم يسلط الضوء على العلامات ويعرض الأخطاء). ولكن من الأفضل استخدام محررات أكثر تقدمًا للعمل مع علامات HTML.

يتكون الترميز من علامات html (تُكتب أحيانًا "علامة").

تعد علامة HTML أحد عناصر تخطيط HTML اللازمة للهيكل. العلامات لديها علامة الافتتاح< и закрывающий > .

على سبيل المثال، . يتم إقران كل علامة تقريبًا وتتطلب علامة إغلاق. إذا نسي مشرف الموقع وضع علامة الإغلاق أو قام بذلك بشكل غير صحيح، فلن يكون التخطيط صالحًا (راجع التحقق من صحة الموقع). إذا كانت هذه العلامة تحمل "إطار" الموقع، فقد "يطفو" الموقع (سيتحرك العمود الجانبي للأسفل، وما إلى ذلك).

يمنع إغلاق العلامات خارج الترتيب الذي تم فتحها به. على سبيل المثال

اقرأ المقال لمزيد من التفاصيل حول إنشاء صفحة HTML.

ربما سأبدأ من البداية..

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

الآن عن الأوامر - يطلق عليهم واصفات، ولكن في كثير من الأحيان - العلامات.

لنعود إلى صفحتنا الأولى... فكتبنا:

صفحتي الأولى


مرحبا بالعالم!!!

إذن هذا هو ما هو مكتوب بينهما - يطلق عليهم العلامات، فهي غير مرئية للقارئ الذي ينظر إلى صفحتك، ولكنها مرئية بوضوح للمتصفح، الذي، بعد أن عثر على علامة، يفهمها كإشارة إلى أنه سيكون هناك تكون وثيقة تحتاج إلى قراءتها وعرضها على الشاشة بالشكل المطلوب.. لكن العلامة تقول أن الوثيقة انتهت ولم يعد مطلوبا منها أي شيء آخر، أي المتصفح، ويمكنها أن ترتاح بضمير مرتاح .

فماذا كتبنا؟ وكيف يقرأها المتصفح؟

أفكار المتصفح:

هذه هي الطريقة تقريبًا التي تعمل بها قراءة صفحتنا.. كما ترون، المتصفح من النوع المتقلب إلى حد ما، لذا فهو يحتاج إلى إعطاء أوامر واضحة ودقيقة، وإلا فإنه سيقسم.. وبصوت عالٍ.. ولذلك دعونا نتذكر ما يلي أشياء:

1) من الضروري أن نتذكر مرة واحدة وإلى الأبد أنه إذا كان هناك علامة افتتاحية، فيجب أن يكون هناك علامة إغلاق أيضًا

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

2) يجب أن تحتوي جميع المستندات على قالب الكود التالي:

هذه العلامات مطلوبة! يجب أن تكون مكتوبة دائمًا لكل صفحة جديدة، وبهذا الترتيب فقط! لا تحاول أن تقلب كل شيء رأساً على عقب..

3) حول الطلب:

علامة الفتح والإغلاق هي نوع من الحاوية، وهي عبارة عن صندوق يمكن تخزين العلامات الأخرى فيه - صناديق أصغر... لذلك، وفقًا للمنطق، يجب أن يبدو المستند كما يلي:

فلو كتبت مثلا هكذا:

محتوى

سوف يتحول إلى قمامة لا تتناسب مع رأسك ، فالقمامة "الكبيرة" مغلقة بالفعل ، والأخرى "الصغيرة" "تخرج" منها ، وهي مغلقة في "الوسط" ، و " "لقد انتشر المحتوى" في كل مكان.. من الصعب حتى على أي شخص أن يتخيل ما يتحدث عنه المتصفح.. قم ببناء كود صفحتك بوضوح، وإلا فلن يعمل شيء..

حسنًا، لقد تعلمنا كيفية كتابة نص بسيط، لقد بدأنا! وفي الفصل التالي سأتحدث عما يمكنك فعله به..

عند كتابة موقع ويب، قم بإنشاء مجلد في أي مكان مناسب على محرك الأقراص الثابتة لديك، وأطلق عليه ما تريد، طالما أنه واضح... احفظ صفحاتك في هذا المجلد، مع منحها أسماء ذات معنى... خيارات مثل aaa. html, 123.html ستؤدي إلى الحيرة والارتباك... في هذه المرحلة لن تبدو هذه النصيحة عملية، لكنها في المستقبل ستسهل عملك بشكل كبير. تخيل، على سبيل المثال، ما لا يقل عن 20 إلى 30 ملفًا من هذه الملفات التي يجب أن تضع أسمائها في الاعتبار من أجل الرجوع إليها. اطلب أولاً!

عند كتابة التعليمات البرمجية، أنصحك بالالتزام بـ "أسلوب الكتابة الجيد"، أي كتابة العلامات بطريقة "السلم" حيث يتم دمج علامة واحدة داخل علامة أخرى. مع مرور الوقت، سوف تفهم أن قراءة التعليمات البرمجية مكتوبة على هذا النحو:



صفحتي الأولى


مرحبا بالعالم!!!

اسمي كارلسون، وهذه هي صفحتي الأولى!



أسهل من هذا بكثير:



صفحتي الأولى


مرحبا بالعالم!!!

اسمي كارلسون، وهذه هي صفحتي الأولى!



بل وأكثر من هذا:

صفحتي الأولى مرحباً بالعالم !!!
اسمي كارلسون، وهذه هي صفحتي الأولى!

على الرغم من أن هذه مسألة عادة... إلا أنه لا يزال من الأفضل الاعتياد على الكتابة "بشكل مقروء".

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

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

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

كانت الإصدارات الأولى من HTML مجزأة ولم يكن لها وحدة معينة. ونتيجة لذلك، كان من الضروري تطوير معيار موحد معين. تم ذلك في عام 1995، وتم إضفاء الطابع الرسمي على المعيار باعتباره الإصدار الرسمي لـ HTML 2.0. وبعد عامين (في عام 1997) تمت إضافة بعض الميزات إليه. كان التنسيق الجديد يسمى HTML 3.0، وتم اقتراحه بواسطة W3C ( اتحاد شبكة ويب العالمية). من الناحية النظرية، كان يتضمن جميع ميزات الإصدار 2.0، ولكن في تلك الأيام كانت قدرات المتصفح محدودة للغاية، لذلك لم يكن التوافق الكامل ممكنًا. بحلول نهاية عام 1997، بعد اختبار الإصدار 3.2 من اللغة، تم اعتماد معيار جديد 4.0. لقد أزالت الأوصاف القديمة وقدمت أخرى جديدة، لا سيما استخدام أوراق الأنماط المتتالية (CSS).

تقوم معظم برامج تخطيط الصفحة الحديثة، مثل Dreamweaver وMicrosoft SharePoint Designer، تلقائيًا بإنشاء البنية الأساسية للمستندات، ولكن من أجل قراءتها وإنشائها بشكل صحيح بنفسك، يجب أن تتعرف على القواعد البسيطة.

يتم ترميز المستند باستخدام العلامات، عادةً في أزواج (الفتح والإغلاق). يتم وضع العلامات بين قوسين زاوية ولا تظهر للمستخدم، ولكنها تلتزم بشكل صارم بتخطيط الصفحة.

يبدأ مستند HTML وينتهي بعلامات تنسيق المستند.

هنا هو رمز الصفحة

يمكن أن يسبق علامة المستند المعيار الذي سيتم من خلاله عرض المحتوى (علامة DOCTYPE).

في المستند، يوجد عنوان يقرأه المتصفح ولكن لا يتم عرضه في النافذة، ونص الصفحة الذي يراه المستخدم بالفعل.

يتم تعريف الرأس بواسطة العلامات، ويحتوي على بيانات مخصصة لتنسيق المستند. يحتوي الرأس أيضًا على البرامج النصية المحملة المطلوبة لعرض البيانات. في العلامات< title>ويتم كتابة عنوان الصفحة الذي يتم عرضه في عنوان النافذة أو علامة التبويب.

يتم تمثيل الرمز الرئيسي للصفحة باستخدام العلامات. سيتم عرض كل ما هو مكتوب بينهما على الشاشة، باستثناء العناصر التي تم تحديد قيم خاصة لها، والعلامات نفسها لتنسيق المستند.

يمكن تمثيل بنية مستند HTML على النحو التالي.

< title>عنوان الصفحة (ينعكس في النافذة!)

عنوان الوثيقة. لا يظهر على الشاشة

نص الوثيقة. معروضة على الشاشة

أساسيات HTML للمبتدئين، ما يجب أن يعرفه الآن كل مشرف موقع أو مدون مبتدئ. إذا كنت ترغب في تعلم كيفية إنشاء مواقع ويب أساسية، وفهم الكود نفسه، ومعرفة ما وراء ماذا وماذا يجب أن يكون، فمن المستحيل القيام بذلك دون معرفة أساسيات لغة HTML. سيكون لدي في مدونتي سلسلة كاملة من المقالات التي سأخصصها لهذا الموضوع من الألف إلى الياء، وسأصف كل علامة موجودة في المستند، وماذا تعني وكيفية استخدامها بشكل صحيح.

إذا كنت لا تعرف أبسط الأشياء، فإن طريقك مغلق. أعتقد أن كل شخص يقرر تطوير وإنشاء مواقع الويب يجب أن يعرف ويفهم الأساسيات ومم يتكون الموقع نفسه وكيف يعمل وما يحدث في الكود نفسه.

بالطبع، هناك عدد لا بأس به من لغات البرمجة، وكلها معقدة بطريقتها الخاصة، ولكن هناك بعضها الذي تحتاج إلى معرفته تمامًا. إذا كنت ترغب في تصميم خطاب بشكل جميل ليتم إرساله عبر البريد، فلديك مجموعة VKontakte الخاصة بك، وهي مجموعة على شبكات التواصل الاجتماعي الأخرى، ونفس قناة YouTube، فأنت بحاجة إلى العبث بالرمز الموجود على أي من محركات الموقع، ما عليك سوى للتعرف على المفاهيم الأساسية.

لقد قدمت بعض الأمثلة فقط، في الواقع، يتم الآن استخدام هذه المعرفة بشكل متزايد على الإنترنت. أنا ممارس أكثر من مجرد منظر، لذلك في مقالاتي في هذا القسم سأعرض لك أمثلتي حول كيف وماذا فعلت، خطوة بخطوة. سأقوم بنشر كل من الصفحات النموذجية والمواقع بأكملها.

يعد مستند Html أبسط مستند نصي، وهو لغة وضع العلامات التي تصادفها كل يوم على الإنترنت. تصف العلامات بنية المستند. يتم تنسيق العلامات على أنها زاويّة< >بين قوسين، يُكتب بداخلها اسم العلامة. ينظر المتصفح إلى بنية المستند، ويبنيه ويعرضه وفقًا لتعليماته على شاشتك، إذا كنت بالطبع قد فعلت كل شيء بشكل صحيح.

تبدأ هذه العملية برمتها حتى قبل أن ترى الصورة النهائية. تقوم المتصفحات بمعالجة المستند بشكل تسلسلي، من البداية إلى النهاية. بما في ذلك كل ما يجب أن يكون على الصفحة. الجداول والصور والبرامج النصية وما إلى ذلك، باستثناء أن هذا يشمل أنماط CSS.

ما هو html - إذا نظرت إلى ما تكتبه ويكيبيديا - (لغة ترميز النص التشعبي) لغة ترميز النص التشعبي للمستندات. تحتوي معظم الصفحات الموجودة على الإنترنت على علامات الصفحة بهذه اللغة. يتم تفسير هذه اللغة بواسطة المتصفحات، ويتم عرض النص المنسق الناتج على شاشة الكمبيوتر أو الجهاز المحمول الخاص بك.

هذه اللغة بطبيعتها سهلة للغاية ويمكن تعلمها. يمكن لأي شخص أن يتعلم ويفهم أساسياته. لاستخدام مثل هذه اللغة، تحتاج إلى معرفة واستخدام الواصفات، والتي تسمى أيضًا العلامات. بمساعدة العلامات يتم إنشاء المستند.

مما يجب أن يتكون هيكل المستند، وما هي العلامات التي يجب أن تكون موجودة. دعونا ننظر إلى كل شيء بمثال واحد صغير. لقد كتبت بعض النصوص في MS Office وأظهرتها في لقطة الشاشة هذه.

لعرض هذا النص في المتصفح بنفس الطريقة التي تمت كتابته بها في المستند، تحتاج إلى إضافة علامة الصفحة إليه، والتي تتضمن بعض العلامات. أولا أنظر إليهم، ثم سأصف كل واحد مسؤول عن ماذا.

مرحبًا بك في مدونتي، أنت الآن تتلقى درسًا حول أساسيات HTML. إذا أعجبتك هذه المقالة، يمكنك الاشتراك في هذه المدونة لتلقي المقالات الجديدة في صندوق بريدك الإلكتروني.

ما هي العلامات التي يتكون منها أي مستند HTML، وما الذي يتضمنه، وأين يجب تدوينه بالكامل؟

يتكون أي رمز من الأحرف التي يتم وضعها بين قوسين زاوية. كل هذه تسمى عناصر. تتكون جميع العناصر عادةً من علامتين، الفتح والإغلاق. أنصحك بالنظر بعناية في العلامات في البداية، إذا فاتتك إحداها ولم تغلقها، فستحتاج إلى مراجعة أجزاء كبيرة من الكود للعثور على الخطأ.

كانت هناك حالات استغرق فيها الأمر أكثر من يوم واحد، حيث يتصل الشخص ويطلب المساعدة، ولم يتمكن من العثور على خطأ في موقعه، لذلك انظر دائمًا بعناية شديدة إلى ما تكتبه وأين تكتبه. لنستخدم الآن هذا المثال لننظر إلى كل عنصر من عناصر الكود وما هو مكتوب فيه وماذا يعني وماذا يحدث في النهاية.

يتم إقران معظم العلامات، والتي تتضمن علامة فتح وعلامة إغلاق. بالإضافة إلى هذه العلامات، هناك أيضًا علامات مفردة. يمكن أن تتوافق العلامات مع بعضها البعض، وبالتالي تتداخل مع بعضها البعض. على سبيل المثال، قم بعرض النص بالخط العريض والمائل في الوقت نفسه.

نص

اسمحوا لي أن أذكرك مرة أخرى أنك بحاجة إلى اتباع القواعد الموجودة في المستند. هذه هي الطريقة التي يفهم بها المتصفح ما هو موجود في الصفحة وتسلسله ومحتواه وما إلى ذلك.

العلامة هي مكون يخبر متصفح الويب بتنفيذ مهمة معينة. على سبيل المثال وجود فقرة أو جدول أو نموذج أو صورة.

السمة - تعديل العلامة. على سبيل المثال، يمكنك محاذاة فقرة إلى المنتصف أو محاذاة إلى اليمين، وكذلك تعيين موقع الصورة على الصفحة، وما إلى ذلك.

قم دائمًا بإغلاق العلامات، إذا قمت بفتحها، فتأكد من إغلاقها. وإلا، سيحدث خطأ ولن يتم عرض المستند بشكل صحيح على الصفحة. هناك أيضًا استثناءات لا ينبغي نسيانها.

من الواضح أنه من الضروري أن نفهم أن هناك عنوان الوثيقة ونصها. العنوان هو كل ما هو موجود في العلامة. نص الوثيقة ()، يحتوي نص الوثيقة على كافة محتويات الصفحة. إذا كانت هناك حاجة لترك قسم من التعليمات البرمجية لنفسك، وبالتالي تضمين هذه العلامات في التعليقات، فسيتم استخدام العلامة لهذا الغرض. كل ما هو موجود داخل هذه العلامة هو بمثابة تعليق ولا تراه المتصفحات.

لنبدأ بالأول. في بداية المستند قمت بفتح علامة وفي النهاية أغلقتها. هذا الرمز موجود في كل مستند على الإطلاق، فهو يخبر المتصفح أن كل ما يتم وضعه بين هذه العلامات هو رمز HTML. إنه جذر المستند نفسه؛ كل ما هو موجود لاحقًا خلف هذه العلامة لم يعد مدرجًا في المستند ولا تراه المتصفحات. في بداية المستند، يتم فتح العلامة وفي النهاية يجب إغلاقها.

يحتوي القسم الكامل من هذه العلامة على جميع المعلومات الفنية للمستند. مثل العلامة السابقة، يجب أيضًا فتح الرأس وإغلاقه في النهاية. تتضمن هذه المعلومات عنوان الصفحة والوصف والكلمات الرئيسية لمحرك البحث والتشفير. حول الترميز أدناه قليلا.

محتوى

يتم تضمين هذه العلامة في الرأس ويجب كتابتها داخل علامة الرأس. علامة العنوان هذه إلزامية ويجب أن تكون موجودة في كل مستند HTML. بالإضافة إلى ذلك، يظهر كعنوان لنافذة المتصفح. يجب ألا يتجاوز طول هذا الرأس 60 حرفًا. يجب أن يحتوي نص هذا الرأس على المعلومات الأكثر اكتمالا التي تميز محتوى الصفحة.

إذا كتبت "Hello World" في رأس الصفحة، فهذه هي المعلومات التي يجب أن تظهر على الصفحة وليس غيرها. لا ينبغي أن تخدع الأشخاص ومحركات البحث، فهم لا يحبون ذلك، وبالتالي تجعل الأمور أسوأ بالنسبة لك. يجب أن تكون المعلومات الواردة في هذه العلامة ذات صلة بمحتوى صفحتك.

بعد علامة العنوان الإلزامية، توجد علامة وصفية اختيارية ولكنها بنفس القدر من الأهمية. هذه العلامة مفردة. باستخدام هذه العلامة، يمكنك تعيين وصف للصفحة (الوصف) وكلماتها الرئيسية (الكلمات الرئيسية).

بالإضافة إلى ذلك، قد تحتوي العلامة الوصفية على بيانات حول مؤلف الصفحة وخصائص بيانات التعريف الأخرى. يمكنك منع فهرسة الصفحة بأكملها بواسطة محركات البحث. قم بتعيين الصفحة ليتم تحديثها تلقائيًا بعد 20 ثانية أو بعد 5 ثوانٍ، متبوعة بالانتقال إلى صفحة أخرى.

يمكن أن يكون هناك العديد من هذه العناصر التعريفية، لأنها يمكن أن تحمل معلومات مختلفة تمامًا. المستخدمون الآخرون، عندما يفتحون الصفحة في المتصفح، لا يرون كل الأوصاف الخاصة بك؛ كل هذا يبقى مخفيًا عن الأنظار.

يمكن أيضًا استخدام علامة النمط لتعيين الأنماط على الصفحة. إذا كنت تستخدم العديد من أنماط CSS المختلفة، فمن المستحسن تعيينها في ملف منفصل. إذا كنت بحاجة إلى تحديد العديد منها، فيمكن تحديد كل هذا مباشرة في مستند HTML.

.base ( العرض: 100 بكسل; لون الخلفية: #000; الارتفاع: 150 بكسل; اللون: #fff; )

أو قم بإضافة أنماط محددة إلى علامة واحدة للقيام بذلك، تحتاج إلى إضافة عنصر نمط داخل العلامة نفسها. يجب استخدام هذه العلامة داخل حاوية تحدد أنماط الصفحة. يمكنك استخدام العديد من هذه العلامات، ولن يكون هذا خطأ.

تشبه علامة الارتباط إلى حد ما العلامة السابقة، حيث تسمح لك بتعيين أنماط للمستند الموجود في ملف آخر. بمعنى آخر، يمكنك إرفاق ورقة أنماط CSS كاملة، والتي تتكون من العديد من الخصائص، بمستند موجود. وبالتالي، يمكنك تقليل حجم المستند، والذي سيتم تحميله وفتحه في النهاية بشكل أسرع على جهاز كمبيوتر أو جهاز محمول بسرعات إنترنت منخفضة.

يمكنك ربط أكثر من ملف، لا يوجد أي قيود. ليست هناك حاجة لإغلاق مثل هذه العلامة. إذا تم كل شيء بشكل صحيح، فسيتم تحميل أنماط محددة من ملف منفصل إلى المستند الخاص بك. يمكن إضافة هذه العلامة إلى أساسيات html وعدم نسيان وجودها. والنتيجة هي صورة مثل هذه:

باستخدام علامة البرنامج النصي، يمكنك توصيل سيناريوهات (برامج نصية) مختلفة بالمستند. مطلوب وجود علامة الإغلاق. يمكن وضع البرنامج النصي نفسه في بداية المستند، أو داخله أو في نهايته.

يخبر المتصفح أن أي شيء يوضع بين هذه العلامات يجب أن يظهر في نافذة المتصفح. فيما يلي العلامات الرئيسية التي يمكن أن تكون موجودة في كل مستند على الإطلاق. تعمل علامة الجسم بمثابة النص الرئيسي للصفحة، والتي تتضمن جميع محتوياتها. يُنصح بفتح هذه العلامة وتذكر إغلاقها في نهاية المستند.

لنذهب أبعد من ذلك، نرى علامة تفتح وتغلق بنفس الطريقة. تشير هذه العلامة إلى العنوان الرئيسي للنص، وفي معظم الحالات، يوجد عنوان الصفحة أسفل عنوان H1. في الواقع، هناك ستة عناوين بيانات فقط. . يتم استخدامها أيضًا في تحسين محركات البحث (SEO)، لكن هذا موضوع مختلف قليلاً. سأقوم بالتأكيد بتسليط الضوء على مقال واحد لهذا الأمر وتقديم وصف تفصيلي لها، والاشتراك في تحديثات المدونة حتى لا يفوتك أي شيء.

إن وجود مثل هذه العناوين في المقالة سيلعب دورًا مهمًا في الترويج للصفحة. بالإضافة إلى ذلك، يمنحك استخدامها بنية واضحة للصفحة، وعنوانها، وعناوينها الفرعية، وإبرازاتها، وفقراتها الفرعية، وما إلى ذلك. استخدمها دائمًا وضعها موضع التنفيذ. في العديد من أنظمة إدارة المحتوى (CMS)، مثل WordPress، عند كتابة نص، يمكنك رؤية "العنوان 1" و"العنوان 2" و"العنوان 3" وما إلى ذلك. وهم المسؤولون عن h1 وh2 وh3.

إذا كتبت نصًا أساسيًا من فقرة جديدة، فإنك تكتب علامة

في البداية وأغلقه في النهاية

وثيقة HTML

سيكون هذا النص غامقًا، وهذا أيضًا مكتوب بخط مائل

يحتوي كل مستند على عنصر الرأس والعنوان. العلامة الأولى، والتي تأتي مباشرة بعد العلامة الأولى. تحتوي هذه العلامة على كافة المعلومات المتعلقة بالصفحة، كما أنها تحتوي على العنصر. العنوان – معلومات حول عنوان الصفحة، بمعنى آخر عنوان الصفحة، اسمها. في العنوان تشير إلى الاسم الصحيح للصفحة التي سيبحث عنك المستخدم من خلالها عبر محرك البحث، وهي نقطة مهمة جدًا. يجب أن يكون كلا العنصرين مفتوحين ومغلقين أيضًا. يتم إغلاق كل عنصر بعلامة "/". والنتيجة هي صورة مثل هذه.

العنوان ومحتويات الصفحة

كما ترون، لا يوجد شيء معقد. فيما يلي العلامات الأساسية التي يجب أن تكون موجودة في كل مستند HTML. لا تنس إغلاق كل منها، وإلا فلن يتمكن المتصفح من رؤية الصورة الكاملة للكود. عليك أن تعرف هذا وتتذكره دائمًا. ثم تبدأ في إدراج النصوص والصور ومقاطع الفيديو وما إلى ذلك. ولكن هذا سيكون بالفعل في مقالات أخرى.

للعمل مع التعليمات البرمجية، استخدم برنامج Notepad++. إنه مجاني، وليس من الصعب العثور عليه على الإنترنت. مناسب جدًا لفهم أي كود، كما أنه يعرض بسهولة علامات الفتح والإغلاق. نحن ندعم بناء جملة أكثر من 40 لغة برمجة. فقط ما تحتاجه لتعلم أساسيات HTML.

المفكرة متفوقة في كل شيء على المفكرة العادية. للحصول على أقصى قدر من الراحة والبساطة والتعلم، يجب تثبيت هذا المحرر في البداية على جهاز الكمبيوتر الخاص بك. الميزة الأكثر أهمية وسهولة الاستخدام هي أن محرر Notepad++ يعرض تلميحات عند كتابة التعليمات البرمجية، مما يجعل عملك أسرع بكثير وأفضل جودة.

يجب أن يحتوي كل مستند أيضًا على عنصر نوع المستند التالي. لماذا هو مطلوب وماذا يجب أن يكون فيه. عادة لا يكون الناس مهتمين جدًا بهذه السطور، فهم ينسخونها في وثائقهم ويعملون بهدوء. تخبر هذه العناصر المتصفح بإصدار HTML المستخدم في المستند، وما هو وصف الصفحة، وما هو التشفير المستخدم، وما هي الكلمات الأساسية المضمنة، ومن هو المؤلف، وما اسم الصفحة.

يتم وضعها عادة في البداية. هناك العديد من الخيارات وكلها تختلف عن بعضها البعض، وسأكتب مثالا واحدا يستخدم في أغلب الأحيان. يمكن استخدام هذا الفراغ كقالب جاهز. بعد ذلك، سيكون هناك وصف واضح لكل سطر، ولا ينبغي أن تكون هناك مشاكل في هذا.

بإيجاز بلغة واضحة حول أساسيات html: يخبر هذا السطر المتصفح أن هذا المستند هو XHTML الإصدار 1.0، وأن اللغة الإنجليزية مستخدمة وأن هذه الفوضى بأكملها موجودة في هذا العنوان. بعد ذلك، في العلامة الوصفية نشير إلى الترميز المستخدم. الأكثر استخدامًا هو Windows 1251.

الوصف - تم التطرق إلى موضوع تحسين محركات البحث (SEO)، حيث تشير إحدى العلامات الرئيسية الثلاث التي يجب أن تكون موجودة في كل مستند على الإطلاق؛ ما هو مكتوب في هذه الصفحة، وصف قصير، لا يزيد عن جملتين. تغطي علامة الكلمات الرئيسية أيضًا موضوع تحسين محركات البحث، وهذه العلامة مطلوبة. يحتوي على كلمات رئيسية سيستخدمها مستخدمو الإنترنت للعثور عليك من خلال محركات البحث.

تحتوي علامة العنوان على اسم المستند نفسه وعنوانه الذي نراه في المتصفح. ربما تكون العلامة الأكثر أهمية في المستند بأكمله، والتي لها التأثير الأكبر على الترويج للصفحة. تصف المقالة الخاصة بالإضافة والتصميم هذه العلامة بمزيد من التفاصيل.

ما تحتاج إلى تذكره من هذا الدرس حول أساسيات html:

يجب دائمًا تسمية كافة الصفحات الرئيسية باسم Index. هكذا يتم قبوله وقد اعتاد عليه الجميع، بغض النظر عن امتداد الملف، فقد يكون html أو php. ويسمى دائما بهذه الطريقة.

شاهد مقطع فيديو حول أساسيات HTML من Webformyself.

لغة ترميز النص التشعبي والعناصر الأساسية والبنية. سأحاول وصف كل هذا وأكثر من ذلك بكثير على مدونتي. بادئ ذي بدء، سيتم كتابة معلومات مفيدة للمبتدئين، وسيتم توفير مثال التعليمات البرمجية، وسيتم توفير الفرصة لتنزيل المثال نفسه مع الصفحة النهائية.

HTML (لغة ترميز النص التشعبي) هي لغة ترميز خاصة للمستندات. من المهم ملاحظة أننا نتحدث عن المستندات الإلكترونية وليست المطبوعة.

يحتوي المستند المطبوع على أحجام صفحات وهوامش محددة بدقة. فهو يحدد بدقة معلمات الخط. المستندات الإلكترونية وصفحات الويب ليست مخصصة للطباعة على الطابعة، بل للعرض على الشاشة. ليس من المعروف مسبقًا أي جهاز كمبيوتر سيتم عرض المستند عليه. حجم نافذة المتصفح غير معروف ولا يُعرف ما هي الخطوط المتوفرة.

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

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

تسمح لك علامات HTML بمحاذاة أسطر المستند، والتحكم في الخلفية ولون الخط، وإدراج الرسوم التوضيحية ولف النص حولها، وتضمين كائنات الوسائط المتعددة في مستندك، وغير ذلك الكثير. والنتيجة هي مستندات ويب ذات معنى ومصممة بشكل مثير للإعجاب.

من بين العديد من علامات HTML، هناك مجموعة خاصة من العلامات المصممة لإنشاء روابط النص التشعبي. رابط النص التشعبي هو جزء محدد من النص أو الرسم التوضيحي المرتبط بعنوان مستند آخر. عادةً ما يتم تمييز روابط النص التشعبي بوضع خط تحته أو بلون مختلف. إذا قمت بتمرير مؤشر الماوس فوق رابط النص التشعبي، فسوف يتغير شكله. إذا نقرت بزر الماوس الأيسر على رابط النص التشعبي، فسوف يأخذك إلى صفحة ويب أخرى، ربما تكون موجودة على خادم مختلف، وربما حتى في قارة مختلفة.

يتم حفظ المستندات التي تم إنشاؤها بتنسيق HTML في ملفات ذات ملحق html أو htm.

تسمى بنيات التحكم في HTML بالعلامات. العلامات عبارة عن مجموعات من الأحرف المستخدمة لترميز النص. تتم كتابة كافة العلامات بين قوسين زاوية، والتي تتكون من رموز أقل من (). بعد قوس الفتح توجد كلمة أساسية تحدد العلامة.

حالة الحروف في أسماء العلامات لا يهم. ومع ذلك، فمن الشائع كتابة العلامات بأحرف كبيرة لتمييزها عن النص الرئيسي.

يمكن إقران العلامات أو عدم إقرانها. للتأثير على جزء من المستند (على سبيل المثال، فقرة)، يتم استخدام العلامات المقترنة: الفتح والإغلاق. تقوم علامة الفتح بإنشاء التأثير، بينما تقوم علامة الإغلاق بإيقافه. تبدأ علامات الإغلاق بشرطة مائلة للأمام (/).

تؤثر العلامات غير المقترنة على المستند بأكمله أو يكون لها تأثير لمرة واحدة حيث تظهر. في هذه الحالة، لا يتم استخدام علامة الإغلاق.

إذا كانت العلامة تحتوي عن طريق الخطأ على كلمة رئيسية ليست باللغة، فسيتم تجاهل العلامة تمامًا.

عند عرض مستند في مستعرض، لا يتم عرض العلامات نفسها، ولكنها تؤثر على كيفية عرض المستند.

يمكن أن يتأثر التأثير الذي تم إنشاؤه بواسطة العلامة بالسمات. السمات هي كلمات وظيفية مفصولة عن الكلمة الأساسية للعلامة وعن بعضها البعض بمسافات. إذا كنت بحاجة إلى تحديد قيمة السمة، فسيتم كتابتها بعد علامة المساواة ومحاطة بعلامات اقتباس. في العلامات المقترنة، تتم إضافة السمات فقط إلى علامة الفتح. لا تحتوي العلامات الختامية أبدًا على .

تتيح لك لغة HTML الدخول إلى مستند