HTML: أساسيات للمبتدئين. دروس HTML الحديثة للمبتدئين تعلم لغة html

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

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

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

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

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

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

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

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

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

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

يعد العمل مع الصور عند الإنشاء من موقع ويب إحدى النقاط الأساسية، سواء عند إنشاء تصميم أو عند تخطيط أو كتابة أي مواد لموقع الويب الخاص بك.

تعمل CSS على توسيع إمكانيات العمل مع أي كائنات html بشكل كبير، وفي هذا الدرس أود أن أخبرك بالتفصيل عن المعلمات التي يمكن تطبيقها على الصور.

أو قم بدراسة دروس HTML بنفسك ومجانًا

هل تريد إنشاء موقع خاص بك على الإنترنت؟ - جيد جدًا! ستساعدك دروس HTML في ذلك.

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

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

دروس HTML جديدة وحديثة مصممة خصيصًا للمبتدئين.

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

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

احرص! قد تصبح مدمنًا على نشاط جديد.

دروس HTML جديدة | مثال كود HTML

ولننظر إلى عناصره:

العلامات التي تحدد بداية ونهاية المستند.

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

العلامات التي تحدد العنوان الرئيسي للمستند.

يحتوي هذا القسم على الجزء المرئي بالكامل من صفحة الويب.

في المتصفح سنرى Hello World! :

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

ستقدم الدروس في هذه الدورة تضمين HTML 5 وXHTML وCSS. يعد هذا المزيج مثاليًا للتعلم ويسمح لك بتسريع إتقانك للمادة بشكل كبير.

حاليًا، مواصفات HTML 5 متاحة بالفعل على الموقع الرسمي لاتحاد W3C. بدأ تطوير الإصدار الخامس في عام 2007؛ وهو يعتمد على XML وهو في الأساس XHTML، مكمل بعناصر وسمات جديدة. يوفر الإصدار الخامس من HTML وظائف أكبر ويبسط عملية إنشاء المواقع التفاعلية وتطبيقات الويب. بالإضافة إلى ذلك، يحتوي HTML 5 على عناصر إضافية توفر محتوى الوسائط المتعددة داخل صفحة الويب.

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

Post Scriptum: يتكون الإنترنت من عدد لا نهائي من الصفحات المترابطة عن طريق الارتباطات التشعبية باستخدام بروتوكول نقل النص التشعبي، أو HTTP للاختصار - بروتوكول لنقل البيانات في شكل مستندات نص تشعبي. ما هو HTML؟ HTML - لغة ترميز النص التشعبي أو لغة ترميز النص التشعبي للمستندات.

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

هيا بنا نبدأ! أولا، دعونا معرفة ذلك
HTML - (من الإنجليزية. لغة ترميز النصوص التشعبية) هي لغة ترميز النص التشعبي. تم تطويره لأول مرة من قبل العالم البريطاني تيم بيرنرز لي في 1991-1992. كان المقصود من HTML فقط ترميز النصوص والصور والجداول على صفحات الويب. الآن يمكن أيضًا إدراج لغات البرمجة مثل JavaScript وVBScript في مستند HTML.

HTML ليست لغة برمجة، فهي مخصصة فقط لترميز المستندات النصية.

لتعلم HTML، كل ما تحتاجه هو أن يكون لديك متصفح ومفكرة قياسية أو .
لفتح Standard Notepad، قم بما يلي على جهاز الكمبيوتر الخاص بك: "ابدأ" => "البرامج" => "البرامج الملحقة" => "المفكرة" .

إذا كنت قد سمعت عن البرامج التي تبسط عمل كتابة كود HTML (Microsoft FrontPage، Adobe Dreamweaver)، فأنا لا أوصي باستخدامها في هذه المرحلة من التدريب. مارس مهاراتك في المفكرة القياسية أو في محرر النصوص Notepad++، وعند إكمال هذه الدورة، ستتمكن من استخدام البرامج لتسريع الأمور. اشترك في تحديثات مدونتي واقرأ كيفية استخدام Microsoft FrontPage وAdobe Dreamweaver.

لفهم أفضل، قمت بإعداد مثال. انظر بعناية إلى الصورة:

توضيح.

1). يبدأ أي مستند HTML بهذا السطر:

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

2). وهو بداية ونهاية الوثيقة.

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

4). و - عنوان الوثيقة.
سيتم عرض هذا الرأس في المتصفح:

في البحث أنا فهرس أو في جوجل.

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

ملحوظة:

غالبًا ما تقرأ وتسمع كلمة "علامة".
العلامة هي كل ما بين القوسين< >. على سبيل المثال: , , , ,
,

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

هناك العديد من العلامات ولها أغراض مختلفة.

هناك علامات يجب إغلاقها. على سبيل المثال،
افتح العلامة

وتأكد من إغلاق العلامة

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

العلامة هي نوع من الحاويات التي يمكن أن تحتوي على نصوص وصور وعلامات أخرى...

○ انتبه إلى التسلسل الصحيح لعلامات الفتح والإغلاق:

...

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

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

...

الخطأ كان في و.
كن حذرا عند كتابة التعليمات البرمجية.

رمز جاهز.
هذا هو الشكل الذي يبدو عليه كود HTML الإلزامي القياسي النهائي لصفحة الويب.

عنوان الصفحة نص الصفحة والجداول والصور والموسيقى والفيديو.

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

تابع إلى الدرس التالي

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

ما هو هيكل وثيقة HTML؟

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

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

— علامة مسؤولة عن الانتقال إلى سطر جديد في المكان الذي تم تثبيت هذه العلامة فيه. دعونا نلقي نظرة على الكود الذي يستخدم هذه العلامة.

موقعي الأول مرحبا بالجميع!
وهذا هو موقعي الأول.

يمكن الاطلاع على النتيجة.

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

• محاذاة - تحديد محاذاة الخط. يمكن أن تأخذ القيمة إلى اليسار، الوسط، اليمين.
• اللون - يضبط لون الخط.
• noshade - يرسم خطًا بدون تأثيرات ثلاثية الأبعاد.
• الحجم - يضبط سمك الخط.
• العرض - يضبط عرض الخط.

الكود باستخدام العلامة:

موقعي الأول مرحباً بالجميع، هذا موقعي الأول.

يمكن العثور على مثال مرئي هنا.

علامة "مفردة" أخرى هي . تُستخدم هذه العلامة لتخزين المعلومات المخصصة للمتصفحات ومحركات البحث. تبحث محركات البحث عن العلامات الوصفية للحصول على أوصاف الموقع والكلمات الرئيسية والبيانات الأخرى. يُسمح لك باستخدام عدد غير محدود من العلامات الوصفية، ويجب أن تكون جميعها بين و . تكون معلمات أي علامة وصفية على شكل "name=value"، والتي يتم تحديدها بواسطة الكلمات الرئيسية content أو name أو http-equiv. لأن العلامات الوصفية مخصصة للأجهزة، وهي لا تقوم بأي تغييرات مرئية، لذا سأقدم فقط الكود المصدري:

يشير هذا السطر إلى أن منشئ الصفحة يعتقد أن الصفحة تستخدم ترميز UTF-8. في HTML5، أصبح كل شيء أكثر بساطة؛ لتحديد التشفير، كل ما تحتاجه هو السطر التالي:

هناك علامات فردية أخرى (،،،
, , , , , , , , , , , , , ) ولكنني سأعرفك عليهم بعد قليل.

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

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

موقعي الأول مرحبا بالجميع! وهذا هو موقعي الأول.
أهلاً بكم! وهذا هو موقعي الأول.

كما ترون، لا يوجد شيء معقد، الآن يمكنك إنشاء عدة صفحات مرتبطة ببعضها البعض.

علامات لتسليط الضوء على النص

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

- يضبط الخط على غامق.

- يحدد نمط الخط المائل.

- إضافة تسطير إلى النص.

- يهدف إلى التأكيد على النص. تعرض المتصفحات هذا النص بخط مائل.

- يشطب النص. تمت إزالة هذه العلامة من HTML5، ويوصى باستخدامها بدلاً من ذلك

- يعرض النص كنص أحادي المسافة. تمت إزالته من HTML5.

- يعرض الخط كخط مرتفع. يظهر الخط أعلى الخط الأساسي للنص وبحجم أصغر.

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

- يهدف إلى التأكيد على النص. تعرض المتصفحات هذا النص بالخط العريض.

- يقلل حجم الخط بمقدار واحد مقارنة بالنص العادي. في HTML، يتم قياس حجم الخط بالوحدات التقليدية من 1 إلى 7، ومتوسط ​​حجم النص الافتراضي هو 3. تقلل العلامة النص بوحدة تقليدية واحدة. يُسمح بالعلامات المتداخلة، وسيكون حجم الخط أصغر بمقدار 1 مع كل مستوى متداخل، ولكن لا يمكن أن يكون أقل من 1.

- يزيد حجم الخط بمقدار واحد مقارنة بالنص العادي. في HTML، يتم قياس حجم الخط بوحدات من 1 إلى 7، ومتوسط ​​حجم النص الافتراضي هو 3. وبالتالي، فإن إضافة علامة يؤدي إلى زيادة النص بمقدار وحدة واحدة. يُسمح بالعلامات المتداخلة، وسيكون حجم الخط أكبر مع كل مستوى.

- يستخدم لتسليط الضوء على علامات الاقتباس في النص. يتم عرض محتويات الحاوية تلقائيًا في المتصفح بين علامات الاقتباس.

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

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

- يحدد فقرة نصية. بطاقة شعار

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

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

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

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

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

بشكل افتراضي، يتم تسطير النص الموجود في الحاوية بخط منقط.

فيما يلي الكود الذي استخدمت فيه كل هذه العلامات:

موقعي الأول

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

ما هو HTML؟

HTML هي اللغة المستخدمة لوصف بنية صفحات الويب. يوفر HTML للمؤلفين الوسائل اللازمة للقيام بما يلي:

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

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

ما هو CSS؟

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

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

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

عند كتابة هذا المقال، تم أخذ وصف بعض العلامات من هنا

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

أساسيات HTML

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

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

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

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

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

أساسيات للمبتدئين

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

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

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

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

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

مدونة يفغيني نيسميلوف! موقع أساسيات html وcss للمبتدئين

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

< html > < body > < h2 >< / h2 > < p >مرحبًا بك في مدونتي، خذ الآن البرنامج التعليمي حول أساسيات HTML. إذا أعجبتك هذه المقالة، يمكنك الاشتراك في هذه المدونة لتلقي المقالات الجديدة في صندوق بريدك الإلكتروني.< / p > < h2 >مدونة ايفجينيا نيسميلوف! نسميلوف. ru أساسيات HTML وCSS للمبتدئين< / h2 > < / body > < / html >

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

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

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

نص

< strong > < i >نص< / strong > < / i >

هيكل مستند HTML

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

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

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

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

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

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

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

محتوى

< head >محتوى< / head >

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

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

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

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

< meta name = "robots" content = "index, follow" > < meta http - equiv = "refresh" content = "20" > < meta http - equiv = "refresh" content = "5; url=http://сайт/" >

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

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

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

< style type = "text/css" > قاعدة( العرض: 100 بكسل؛ الخلفية - اللون : #000؛ الارتفاع: 150 بكسل؛ اللون : #ففف؛

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

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

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

< link href = "css/style-lg.css" rel = "stylesheet" > < link href = "css/style-md.css" rel = "stylesheet" > < link href = "css/style-sm.css" rel = "stylesheet" >

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

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

عناوين الصفحات h1 h2 h3

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

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

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

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

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

وثيقة HTML

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

< ! DOCTYPE html > < html > < head > < meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / > < title >وثيقة HTML< / title > < / head > < body > < p > < b > < / b > < / p > < / body > < / html >

العناصر الأساسية الرأس والعنوان

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

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

< / html >

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

محرر المفكرة ++

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

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

عنصر DOCTYPE

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

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

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

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

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

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

يتم فتح وإغلاق جميع العلامات تقريبًا؛

تبدأ الوثيقة بالعلامة ;

وجود العلامة؛

وجود العلامة؛

هيكل واضح لمستند HTML.

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

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

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