نكتب صفحة html. مثال على صفحة HTML والمبادئ الأساسية للإنشاء

9 أصوات

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

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

كيفية إنشاء صفحة

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

افتح مستندًا.

الصق هذا الرمز فيه.

<أتش تي أم أل> <رئيس> <العنوان>صفحتي الأولى</ العنوان> </ رئيس> <الجسم> <المركز>

</ h1> <ر />
<المركز> "https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg"> <ر />
<fontstyle = "color: red"></ الخط> <ر />
<ب></ ب> <ر />
لقد وصلنا إلى القاع<ر />
أنت الآن تعرف المزيد عن العلامات ويمكنك استخدامها. دعنا نحاول إدراج ارتباط لربط عدة صفحات معًا.<ر />
<hr>على سبيل المثال ، هذا رابط لمدونتي -<a href = "https: // site /">ابدأ الحظ</ أ>- يتحدث ببساطة عن "صعب".<ر />
<ر />
</ الجسم> </ html>

صفحتي الأولى

إنشاء صفحة أسهل مما تعتقد

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



رمز بسيط لجعل النص أحمر

ليس من الصعب الكتابة بالخط العريض

لقد وصلنا إلى القاع

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

حسنًا ، انتهى كل شيء الآن. صفحتك الأولى جاهزة

يجب تسمية الملف index.html. تنتهي ".لغة البرمجة"يشير إلى امتداد الملف. إذا قمت فقط بإدخال اسم فهرس ، فسيتم حفظ المستند باسم ملف نصيولن تفتح في المتصفح.

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

هذا ما تبدو عليه الصفحة التي أنشأتها للتو. لك لن يكون مختلفا. كل شيء هو نفسه تمامًا: مع الصور وخط الألوان.

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

احفظ المستند مرة أخرى ، هذه المرة يمكنك فقط استخدام اختصار لوحة المفاتيح Ctrl + S ، ثم تحديث الصفحة في المتصفح باستخدام الزر F5

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

انظر ، تحول العنوان إلى اللون الأحمر. بنفس الطريقة ، يمكنك إعطاء الظل المطلوب لأي جزء من النص.

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

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

العلامات

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

إنه ليس الوحيد ويمكنني أن أقدم لك المزيد إذا كان شخص ما مهتمًا بالبدائل. سوف ننتقل إلى الجزء النظري.

رئيسي

تبدأ الصفحة وتنتهي بالعلامات . تُظهر للمتصفح أن هذا مستند ويب تم إنشاؤه باستخدام html.

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

وهي العلامات هي المسؤولة عن بداية ونهاية المعلومات الرئيسية حول الصفحة.

بطاقة شعار

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

بالمناسبة ، العنوان و H1 لهما تأثيرهما عند تخصيص مكان لموقعك في نتائج البحث. تحتاج إلى معاملتهم باهتمام كبير ولا تكتب بالداخل إلا إذا كان ذلك فقط. هم مرتبطون. بالإضافة إلى h1 ، هناك أيضًا h2 و h3 و h4.

في نفس السطر يوجد افتتاح وإغلاق

. بفضل هذا العنصر ، يمكنك محاذاة النص في المنتصف. إذا تمت إزالة هذه العلامة ، فسيتم محاذاة النص إلى اليمين.


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

صورة

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

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

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

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

تنسيق النص

هو المسؤول عن إعطاء جزء من النص نمطًا خاصًا ، على سبيل المثال ، كما في حالتنا ، لون مختلف. النمط = "اللون: أحمر" يشير إلى أن اللون سيكون أحمر. إذا كنت تريد اللون الأصفر ، فاكتب الأصفر والأخضر والأخضر. يمكنك استخدام رموز الألوان من Photoshop.

يساعد في جعل النص عريضًا.


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

الروابط

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

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

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


أود أيضًا أن أوصيك بدورة فيديو توضح كيفية تكوين المواقع. يتم عرض العملية برمتها في أمثلة حقيقية ، وهو أمر جيد بشكل خاص. الدورة مخصصة للمبتدئين الذين لا يعرفون HTML حتى الآن ، ولأولئك الذين يعرفون بالفعل كل من HTML و CSS جيدًا ، ومع ذلك ، فهم لا يعرفون كيفية تخطيط المواقع جيدًا. يمكن الحصول على مزيد من المعلومات من خلال النقر على الرابط: www.srs.myrusakov.ru/makeup


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

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

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

أراك مرة أخرى ونتمنى لك التوفيق!

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

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

وصف عام

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

يبدأ ملف HTML برأس DOCTYPE يشير إلى أن نوع الملف هو HTML. يشار إلى جميع عناصر الصفحة (العلامات) بين قوسين زاوية. كل زوج ("<» и «>") يتضمن علامة HTML واحدة. عادةً ، يتم إقران علامات HTML ، أي لكل "علامة" يوجد "/ علامة". كلاهما محاط بأقواس زاوية. هناك علامات مفردة ، وأكثرها شيوعًا "br /" هو الانتقال إلى السطر التالي.

أكبر علامة في الملف هي HTML نفسها ، والتي تحتوي على علامتين فقط: HEAD و BODY. في الأول ، تم عمل أوصاف مختلفة ، والإشارة إلى روابط الملفات الأخرى التي تحتاجها الصفحة ، وقد تكون نصوص PHP و JavaScript موجودة. الثاني يسجل محتوى الصفحة. أيضا في شكل علامات ونصوص.

صفحة HTML بسيطة

ويرد مثال على إنشاء مثل هذه الصفحة أدناه في المقالة. دعونا ننظر في الأمر بعناية.

القسم الرئيسي

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

  • الكلمات الرئيسية ووصف الصفحة ؛
  • روابط لملفات أخرى (* .css و * .js).

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

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

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

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

قسم الجسم

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

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

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

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

يتم سرد مثال بسيط (فقط قسم الجسم) أدناه.

وفي متصفح الزائر يبدو كالتالي:

لم يحدد الكود كيف يجب أن تبدو العناصر التي يعرضها المتصفح. كل الأنماط المرئية موجودة في قواعد CSS. في هذه الحالة ، في ملف Mcss / scPhpWordRW.css المشار إليه (انظر المثال الأول لصفحة HTML).

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

يوضح هذا كيف يتم ببساطة وصف علامة scLogo_vDoc ، والوصف هو أن الوسم يعرض صورة vDoc-logo.png ، وعندما يكون الماوس فوقه يعرض صورة vDoc-logo-h.png.

هيكل أوصاف HTML

لا تعني اللغة أي بنية ومفهوم النحو نسبي للغاية هنا. لا توجد متغيرات هنا ، ولكن هناك الكثير من الاحتمالات. الأساس الأساسي للنص التشعبي هو وجود عنصر (علامة) يجب أن يكون له اسم.

يتكون الاسم ، في حالة العلامة المقترنة ، من الاسم الفعلي (اسم العلامة) وأقواس الزاوية ("<» + tagName +«>") ، إذا كانت حول بداية العلامة ، و""إذا تم تسجيل نهايته.

يوجد مثال لصفحة HTML تصف السمات أدناه في النص.

يمكن أن تحتوي العلامة على سمات ، وفي هذه الحالة يتم وضعها بمسافة بعد اسم العلامة قبل قوس زاوية الإغلاق ">". السمات ، إذا كانت هناك علامة عليها ، تتم كتابتها في بداية العلامة فقط. محتوى الوسم هو ما بين بداية العلامة ونهايتها.

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

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

بالإضافة إلى العناصر البسيطة ، تقدم HTML وصف الجداول والنماذج. هذه العناصر مطلوبة بشدة في "بناء مواقع الويب اليومية".

وصف الجدول: علامات TABLE و TR و TD

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

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

يظهر مثال لصفحة HTML تصف جدولًا بسيطًا بوضوح في المقالة.

فيما يلي جدول بحجم ثلاثة صفوف بثلاثة أعمدة ، وفي الصف الأول ، بدلاً من علامة TD ، تم استخدام علامة TH ، عنوان العمود. لا يوجد اختلاف خاص بين هاتين الوسمتين ، ولكن من الممكن تمامًا استخدام العلامة الأولى لتمييز الصف الأول من الجدول ، وفي CSS يمكنك إرفاق أسلوبك الخاص بـ TH ، مما يميزه عن TDs الأخرى.

وصف النموذج: علامات FORM و INPUT

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

مثال على صفحة HTML تصف نموذجًا بسيطًا:

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

باستخدام HTML

إن معرفة لغة النص التشعبي هي عمل في أي تخصص في مجال برمجة الإنترنت ، ولكن إذا كنت بحاجة إلى كتابة برامج بلغة PHP أو JavaScript ، فأنت بحاجة إلى معرفة HTML + CSS تمامًا.

تم تحديد لغة PHP في المثال السابق. تعمل PHP على الخادم ، لذا انتقلت الصفحة التي بها هذا النموذج من الخادم إلى المتصفح مع ملء الحقول. على وجه الخصوص ، تلقت وظيفة TestOnBlur المذكورة في علامة INPUT (معالج حدث onblur) جميع المعلمات كحقول نصية.

تعمل JavaScript في المتصفح ، ولكي يقوم الزر بإرسال البيانات مرة أخرى إلى الخادم ليعمل بشكل صحيح ، أي البنية: onclick = jQuery ("# ​​to"). val ("cart") ، يجب أن يكون لديك فكرة ليس فقط عن ماهية jQuery ، ولكن أيضًا ما هو #to، val، cart. بشكل أكثر تحديدًا ، تحتاج إلى معرفة علامات HTML الأساسية والقواعد العامة لتطبيق أنماط CSS عليها.

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

مرحبا عزيزي قراء المدونة. مع هذه المقالة ، سنبدأ في تعلم أساسيات لغة HTML.

ربما تعلم بالفعل أن اللغة الرئيسية للإنترنت هي لغة ترميز النص التشعبي (HTML). في هذه المقالة ، سوف نتعلم المفاهيم الأساسية لـ HTML ونتعلم كيفية إنشاء أبسط صفحات WEB.

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

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

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

,

, .

هناك حاجة ماسة لمتجر على الإنترنت ، ولكن لا يوجد وقت لتعلم HTML و CSS و PHP وغيرها من التقنيات. بعد ذلك ، يمكنك ببساطة استئجار متجر عبر الإنترنت بوظائف مطبقة بالكامل وتحسين لمحركات البحث.

لغة HTML وعلاماتها

ظهر الإصدار الأول من HTML في عام 1992. في وقت 2013 ، يتم تطوير المواصفات نسخة جديدةرقم HTML 5. تم تطوير هذه المواصفات بواسطة World Wide Web Consortium ، أو W3C للاختصار. يقوم W3C أيضًا بتطوير معايير الويب الأخرى. يمكنك التعرف على هذه المعايير على موقع الويب الخاص بهم www.w3.org. بالمناسبة ، تدعم العديد من متصفحات الويب بالفعل بعض ميزات HTML 5.

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





مثال على صفحة الويب


موقع عن السيارات.


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



بعد ذلك ، دعنا نحفظ صفحة الويب التي تم إنشاؤها في ملف يسمى index.html. في الوقت نفسه ، في مربع الحوار الخاص بحفظ الملف ، يجب عليك تعيين ترميز UTF-8 وإرفاق اسم الملف بين علامتي اقتباس ، وإلا ستضيف المفكرة امتداد النص إليه ، وسيسمى ملفنا index.htm. رسالة قصيرة:

الآن يبقى فتح الملف الذي تم إنشاؤه في المتصفح وإلقاء نظرة على النتيجة. للقيام بذلك ، يمكنك استخدام ملف متصفح Windowsمايكروسوفت متصفح الانترنت، أو أي متصفح آخر مثبت على جهاز الكمبيوتر الخاص بك عن طريق النقر المزدوج على ملف index.html أو سحب الملف إلى أيقونة المتصفح. نفتحه ونرى شيئًا كهذا:

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

ما هي العلامة؟

الآن دعنا نتحدث أكثر عن هيكل الصفحة. ضع في اعتبارك المقتطف:

موقع عن السيارات

. هنا نرى النص المعروض على الصفحة كعنوان محاط بعلامات

و

. ما هي العلامة في لغة html؟

علامة HTMLهي كلمات ورموز عادية محاطة بأقواس زاوية ، على سبيل المثال

,

, . علامة ذلك

هي العلامة الافتتاحية ، العلامة

علامة الإغلاق ، والنص الموجود بينهما يسمى محتوى العلامة. علامة أيضا

والعلامة

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

حتى علامة الزوج

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

.

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

هو عنصر كتلة.

هذا كل شيء بالنسبة لي !!! نراكم في الوظائف القادمة!

الآن بضع كلمات حول العلامات التي استخدمناها لإنشاء هذه الصفحة.

وصف علامات html من المثال

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

أي صفحة html لها الهيكل التالي:

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

2. - بين هذه العلامات هو كل المحتوى المرئي للصفحة.

4. - بين هذه العلامات ، يتم كتابة عنوان الصفحة ، والذي يتم عرضه في أعلى المتصفح. بالمناسبة ، عندما تبحث عن شيء ما في محركات البحث ، فإن أول شيء يتم عرضه هو مجرد اسم الصفحة. بطاقة شعار غالبًا ما يتم اختصاره باسم "العنوان". أنصحك بقراءة المقال: كيف تؤلف بطاقة </p> <p>الآن دعنا ننتقل إلى العلامات الموجودة في نص صفحة html (في الداخل <body>و</body> ).</p> <p>5. <center></center>- تقوم هذه العلامات بمحاذاة كل شيء بداخلها إلى المركز. في هذه الحالة ، سيكون المركز - وسط الشاشة. نوصيك في المستقبل بالتوقف عن استخدام هذه العلامات.</p> <p>6. <h1></h1>هي واحدة من فئة علامة الرأس <h1>..<h6>، عادةً تتضمن عنوان الصفحة. على سبيل المثال ، تحتوي هذه الصفحة على علامة عنوان "مثال <a href="https://ilyarm.ru/ar/znacheniya-height-parametry-css-width-i-height-dlya-zadaniya-razmerov-elementov-html.html">إنشاء لغة تأشير النص الفائق</a>صفحات ".</p>ملحوظة <p>هذه العلامات لها وزن كبير في ترتيب الموقع ، لذا يجب استخدامها بعناية وحكمة.</p> <p>عند تجميع كود html ، تحتاج إلى اتباع قاعدة بسيطة: يجب أن تأتي علامة الرأس أولاً <h1>، وبعد ذلك يمكنهم الذهاب بالفعل <h2> , <h3>إلخ. الشيء الرئيسي هو ألا تكون الأول <h2>، ثم <h1>، ثم <h3>وما إلى ذلك وهلم جرا. يجب أن يكون هناك تسلسل هرمي صارم. العناوين <h2> , <h3>وما إلى ذلك وهلم جرا. قد يكون هناك الكثير.</p> <p>7. <br/>هي علامة واحدة لا تتطلب علامة إغلاق. ينتقل إلى السطر التالي. في المثال الخاص بي ، تمت كتابة علامتين منفردتين في صف للانتقال إلى السطر التالي مرتين.</p> <p>8. <span><img src='https://i1.wp.com/URL_ИЗОБРАЖЕНИЯ' loading=lazy loading=lazy> </span>هي علامة واحدة تعرض صورة.</p> <ul><li>src - معلمة إلزامية تحدد عنوان الصورة (بدلاً من IMAGE_URL ، يجب عليك تحديد العنوان حيث يتم تخزين صورتك). <br><u>ملحوظة</u>: <ul><li>إذا كانت الصورة في نفس المجلد مثل صفحة html الخاصة بك ، فهذا يكفي لكتابة اسم الصورة ، وإلا فإنك تحتاج إلى كتابة عنوان URL مطلق أو نسبي ؛</li> <li>لا تنس تضمين امتداد الصورة. على سبيل المثال ، .jpg ، .gif ، .jpeg.</li> </ul></li> <li>بديل أو عنوان - في هذه المعلمات يمكنك كتابة وصف لصورتك. سيظهر هذا الوصف عند تحريك الماوس فوق إحدى الصور. هذه المعلمات مهمة للترويج لموقع الويب ، خاصة في البحث عن الصور. إذا فشل تحميل الصورة ، فسيتم عرض هذا النص ، وهو أيضًا علامة زائد.</li> </ul><p>9. <font></font>- تم تصميم هذه العلامات لتغيير الخط والخلفية والحجم وما إلى ذلك. باختصار ، كل ما يتعلق بتنسيق النص يمكن تكوينه في علامة واحدة. تحتوي هذه العلامة على عدد قليل من السمات ، والتي سأغطيها في برنامج تعليمي منفصل.</p> <p>ملاحظة: - علامة مماثلة.</p> <p>هناك أيضا <a href="https://ilyarm.ru/ar/izobrazheniya-i-ih-svoistva-v-css-kak-izmenyat-razmery-izobrazheniya-v-css.html">خاصية css</a>الخط ، حيث يمكنك ضبط كل هذه الخيارات.</p> <p>10. - تسليط الضوء بخط عريض. كل ما هو بين <b>و</b>سيتم تمييزها بالخط العريض. على سبيل المثال ، إذا قمت بكتابته في بداية المحتوى ، وأغلقته في النهاية ، فسيكون كل النص على الصفحة غامقًا. هذه علامة شائعة إلى حد ما ، والتماثلية لها <strong></strong> .</p> <p>تهتم محركات البحث بهذه العلامة من حيث زيادة تأثير الكلمات الرئيسية. لكن عليك أن تكون حذرًا ، لأن تسليط الضوء في كل مرة بخط غامق <a href="https://ilyarm.ru/ar/programma-yandeks-opredelenie-populyarnyh-tegov-podbor-klyuchevyh-slov-youtube.html">الكلمات الدالة</a>سيتم اعتباره بريدًا عشوائيًا.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> </article></section><div id="yandex_rtb_R-A-242532-1"></div> <div class="decom_dop_bloc"><a name="comments"></a></div></main> <aside class="sidebar"> <div class="top"> <p> <script id="custom-block-92677863" type="text/javascript"> custom_block(17, 92677863, 5896); </script> </p> <div class="top__headline"><span>أفضل 5 مقالات</span></div> <div class="tabs"> <div class="top-item"> <div class="top-item__image"><img src="/uploads/d15d118a2447f5b468998f40a6caafac.jpg" width="88" height="58" alt="الاتصالات العابرة بين الأقاليم ، شبيبة" / loading=lazy loading=lazy></div> <div class="top-item__title"><a href="https://ilyarm.ru/ar/oao-mtt-region-rossiiskaya-federaciya-mezhregionalnyi-tranzit-telekom.html">الاتصالات العابرة بين الأقاليم ، شبيبة</a></div> <p>MTT OJSC هي مزود فيدرالي ... ...</p> </div> <div class="top-item"> <div class="top-item__image"><img src="/uploads/9942902aba38a10963cf922b1c454e96.jpg" width="88" height="58" alt="كيف تتصل بخدمات الطوارئ" / loading=lazy loading=lazy></div> <div class="top-item__title"><a href="https://ilyarm.ru/ar/04-gazovaya-avariinaya-sluzhba-kak-vyzvat-ekstrennye-sluzhby-edinaya-dezhurnaya.html">كيف تتصل بخدمات الطوارئ</a></div> <p>استقبال مكالمات الطوارئ للمساعدة ... ...</p> </div> <div class="top-item"> <div class="top-item__image"><img src="/uploads/b6d3947b7f5be7ee9a329e6feb149f52.jpg" width="88" height="58" alt="تطبيق الخط الساخن. الخط الساخن لأبل. كيفية الاتصال بالدعم الفني لشركة Apple عبر الهاتف" / loading=lazy loading=lazy></div> <div class="top-item__title"><a href="https://ilyarm.ru/ar/goryachaya-liniya-apl-goryachaya-liniya-apple-kak-svyazatsya-s-tehnicheskoi.html">تطبيق الخط الساخن. الخط الساخن لأبل. كيفية الاتصال بالدعم الفني لشركة Apple عبر الهاتف</a></div> <p>بغض النظر عن مدى امتداح Apple لمنتجاتها و ...</p> </div> <div class="top-item"> <div class="top-item__image"><img src="/uploads/d8932686b298da1171a952a20b39ff3f.jpg" width="88" height="58" alt="Mosenergosbyt: الحساب الشخصي للعميل (فرد)" / loading=lazy loading=lazy></div> <div class="top-item__title"><a href="https://ilyarm.ru/ar/mosenergosbyt-lichnyi-kabinet-klienta-po-nomeru-mosenergosbyt.html">Mosenergosbyt: الحساب الشخصي للعميل (فرد)</a></div> <p>أنشأت Mosenergosbyt للعملاء ... ...</p> </div> <div class="top-item"> <div class="top-item__image"><img src="/uploads/9faad77d72b9e635e44cc3ff152d448e.jpg" width="88" height="58" alt="رقم الهاتف الخط الساخن المجاني ntv" / loading=lazy loading=lazy></div> <div class="top-item__title"><a href="https://ilyarm.ru/ar/ntv-plyus-kontaktnye-telefony-nomer-telefona-besplatnaya-goryachaya-liniya.html">رقم الهاتف الخط الساخن المجاني ntv</a></div> <p>في 14 يوليو 1993 ، تم تأسيس قناة NTV ... ...</p> </div> </div> <div id="mywidget-recommendations-3"> </div> </div> <div class="top"> <p> <script id="custom-block-92677863" type="text/javascript"> custom_block(17, 92677863, 5896); </script> </p> <div class="top__headline"><span>مقالات جديدة</span></div> <div class="tabs"> <div class="top-item"> <div class="top-item__image"><img src="/uploads/f1bce46fe8a4b3febf0e5632fde276ab.jpg" width="88" height="58" alt="الحساب الشخصي Biglion (Biglion)" / loading=lazy loading=lazy></div> <div class="top-item__title"><a href="https://ilyarm.ru/ar/biglion-ekstranet-vhod-lichnyi-kabinet-biglion-biglion-kak.html">الحساب الشخصي Biglion (Biglion)</a></div> <p>Biglion هي خدمة للتسوق الاقتصادي. هو... ...</p> </div> <div class="top-item"> <div class="top-item__image"><img src="/uploads/6c9bc766d6b18d0b232b502bde7b88f3.jpg" width="88" height="58" alt="حساب Tricolor TV الشخصي: كيفية فتحه ولماذا تحتاج إليه" / loading=lazy loading=lazy></div> <div class="top-item__title"><a href="https://ilyarm.ru/ar/vhod-v-trikolor-tv-lichnyi-kabinet-trikolor-tv-kak-otkryt-i-zachem.html">حساب Tricolor TV الشخصي: كيفية فتحه ولماذا تحتاج إليه</a></div> <p>تسجيل حساب شخصي Tricolor TV ... ...</p> </div> <div class="top-item"> <div class="top-item__image"><img src="/uploads/2071a7dd93a5ae0b1aaa86db6e9299f6.jpg" width="88" height="58" alt="كيفية إدخال الحساب الشخصي (LKV) للجندي بدون تسجيل" / loading=lazy loading=lazy></div> <div class="top-item__title"><a href="https://ilyarm.ru/ar/raschetnyi-listok-ministerstva-oborony-kak-bez-registracii-voiti-v-lichnyi.html">كيفية إدخال الحساب الشخصي (LKV) للجندي بدون تسجيل</a></div> <p>في الآونة الأخيرة ، أدخلت MIF للدفاع عن البلاد ... ...</p> </div> <div class="top-item"> <div class="top-item__image"><img src="/uploads/e9fd88ead146a9c2ce9924b288d34a54.jpg" width="88" height="58" alt="خدمة الملاحظات Faberlic" / loading=lazy loading=lazy></div> <div class="top-item__title"><a href="https://ilyarm.ru/ar/faberlik-kontakty-servis-obratnoi-svyazi-s-faberlik.html">خدمة الملاحظات Faberlic</a></div> <p>Faberlic هي أكبر شركة في ... ...</p> </div> <div class="top-item"> <div class="top-item__image"><img src="/uploads/87801df390dbd1dca50ac212e4424032.jpg" width="88" height="58" alt="ديتسكي مير - استعراض الخط الساخن ديتسكي مير" / loading=lazy loading=lazy></div> <div class="top-item__title"><a href="https://ilyarm.ru/ar/goryachaya-liniya-detskii-mir-detskii-mir---otzyvy-detskii-mir-goryachaya-liniya.html">ديتسكي مير - استعراض الخط الساخن ديتسكي مير</a></div> <p>بالتأكيد كل شخص يتذكر الجميل ، لا ... ...</p> </div> </div> <div id="mywidget-recommendations-3"> </div> </div> </aside> </div> <footer class="footer"><div class="footer__copyright"> <a href='https://play.google.com/store/apps/details?id=org.planetsapp.pdfreader' target='_blank' onclick="navigator.sendBeacon('https://live.electrikhelp.com/iibim?q=gplay&sub1=ilyarm.ru&sub2=org.planetsapp.pdfreader&u='+encodeURIComponent(window.location.href)+'&refjs='+encodeURIComponent(document.referrer)+'');"><img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; '></a> <img src='/googleplay.svg' style='opacity:0.4; height: 20px; margin:10px; ' loading=lazy> <p>© 2023 ilyarm.ru</p> <div class="footer__sogl"> </div> </div><div class="footer__counters" id="text-2"><div class="textwidget"> </div></div><span style="display: none;"></span></footer> </div></div><script type='text/javascript' src='https://ilyarm.ru/wp-content/plugins/decomments/templates/decomments/assets/js/decom.min.js?ver=1499187887'></script><script type='text/javascript' src='https://ilyarm.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script><script type='text/javascript'>var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-2", "margin_top" : 20, "margin_bottom" : 260, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['mywidget-recommendations-3'] } ; </script><script type='text/javascript' src='https://ilyarm.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script><script type='text/javascript' src='https://ilyarm.ru/wp-content/themes/mobi/js/scripts.js'></script><script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9.1'></script><script type='text/javascript'>/* <![CDATA[ */ var thickboxL10n = { "next":"\u0414\u0430\u043b\u0435\u0435 \u2192","prev":"\u2190 \u041d\u0430\u0437\u0430\u0434","image":"\u0418\u0437\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435","of":"\u0438\u0437","close":"\u0417\u0430\u043a\u0440\u044b\u0442\u044c","noiframes":"\u042d\u0442\u0430 \u0444\u0443\u043d\u043a\u0446\u0438\u044f \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0438 \u043f\u043b\u0430\u0432\u0430\u044e\u0449\u0438\u0445 \u0444\u0440\u0435\u0439\u043c\u043e\u0432. \u0423 \u0432\u0430\u0441 \u043e\u0442\u043a\u043b\u044e\u0447\u0435\u043d\u044b \u0442\u0435\u0433\u0438 iframe, \u043b\u0438\u0431\u043e \u0432\u0430\u0448 \u0431\u0440\u0430\u0443\u0437\u0435\u0440 \u0438\u0445 \u043d\u0435 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u0438\u0432\u0430\u0435\u0442.","loadingAnimation":"https:\/\/ilyarm.ru\/wp-includes\/js\/thickbox\/loadingAnimation.gif"} ; /* ]]> */ </script><script type='text/javascript' src='/wp-includes/js/thickbox/thickbox.js?ver=3.1-20121105'></script><script data-cfasync='false'>/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */ !function(a){ "use strict";var b=function(b,c,d){ function e(a){ return h.body?a():void setTimeout(function(){ e(a)} )} function f(){ i.addEventListener&&i.removeEventListener("load",f),i.media=d||"all"} var g,h=a.document,i=h.createElement("link");if(c)g=c;else{ var j=(h.body||h.getElementsByTagName("head")[0]).childNodes;g=j[j.length-1]} var k=h.styleSheets;i.rel="stylesheet",i.href=b,i.media="only x",e(function(){ g.parentNode.insertBefore(i,c?g:g.nextSibling)} );var l=function(a){ for(var b=i.href,c=k.length;c--;)if(k[c].href===b)return a();setTimeout(function(){ l(a)} )} ;return i.addEventListener&&i.addEventListener("load",f),i.onloadcssdefined=l,l(f),i} ;"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b} ("undefined"!=typeof global?global:this); /*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */ !function(a){ if(a.loadCSS){ var b=loadCSS.relpreload={ };if(b.support=function(){ try{ return a.document.createElement("link").relList.supports("preload")} catch(b){ return!1} },b.poly=function(){ for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){ var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d,d.getAttribute("media")),d.rel=null)} },!b.support()){ b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){ b.poly(),a.clearInterval(c)} ),a.attachEvent&&a.attachEvent("onload",function(){ a.clearInterval(c)} )} }} (this);</script></body></html>