الصفحة الرئيسية>دروس تصميم الويب>تعليمي HTML

تصميم صفحات الويب باستخدام رمز HTML5 الدلالي

الكاتب：Eve Cole وقت التحديث：2025-03-27 06:00:02

أولاً ، نريد أن نعلن وننشئ نوع المستند ، لم نعد نستخدم HTML 4 أو XHTML 1.0 مثل Public -// W3C // DTD XHTML 1.0 Transitional ...

  1.  <! doctypehtml>

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

لقد حددنا الآن نوع وثيقة HTML 5. كل شيء سار على ما يرام حتى الآن. الآن ، دعنا نلقي نظرة على العلامات الجديدة لـ HTML5. قبل أن نتصفح علامة التبويب الجديدة ، دعونا نلقي نظرة على كيفية كتابة عادة:

  1.  <html>
  2.  <head>
  3.  ...آخر...
  4.  </head>
  5.  <body>
  6.  <divid = header>
  7.  <H1> CSS3-HTML5 Home </h1>
  8.  </div>
  9.  <vivid = nav>
  10.  <ul>
  11.  <li> الصفحة الرئيسية </li>
  12.  <li> حول </li>
  13.  <li> الاتصال </li>
  14.  </ul>
  15.  </div>
  16.  <vivid = content>
  17.  <H1> العنوان </h1>
  18.  <p> ... </p>
  19.  </div>
  20.  <vivid = تذييل>
  21.  <p> معلومات حقوق الطبع والنشر </p>
  22.  </div>
  23.  </body>
  24.  </html>

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

<Header> العلامة:

علامة <header> تعادل العلامة التي نحددها عادةً مع <div id = header>. إذا كان موقع الويب الخاص بك لا يزال محددًا مثل هذا باستخدام <div id = header> ، فيمكننا الآن استبداله بـ <header>.

<v> العلامة:

<nav> هي علامة التنقل ، تمامًا كما نستخدم عادة:

<div id = menu>

<ul>

<li> الفهرس </li>

<li> الأخبار </li>

...

</ul>

</div>

استخدم الآن <vis>:

  1.  <v>
  2.  <ul>
  3.  <li> <hhref = index.html> home </a> </li>
  4.  <li> <ahref =/about/about/about </a> </li>
  5.  <li> <hhref =/blog/> Blog </a> </li>
  6.  </ul>
  7.  </nav>

<section> العلامة: يمكن أن تكون علامة <section> مجموعة من مجموعات المحتوى أو الموضوعات ، عادةً مع علامة البدء وعلامة نهاية. بالطبع ، يمكن أيضا أن تكون هذه العلامة متداخلة.

<article> العلامة: يمكن أن يكون هناك قسم من المحتوى داخل العلامة <article>.

<جانب جانب>

<Tooler> العلامة: <Tooler> علامة ، إذا لم تقل ذلك ، يمكنك أن تفهم ما هذا. يمكن أن يكون هناك أيضًا متعددة ، عادة في أسفل الموقع.

لنلقي نظرة على الرمز الأخير:

  1.  <! doctypehtml>
  2.  <html>
  3.  <head>
  4.  ...أشياء...
  5.  </head>
  6.  <body>
  7.  <header>
  8.  <h1> mysite </h1>
  9.  </header>
  10.  <v>
  11.  <ul>
  12.  <li> الصفحة الرئيسية </li>
  13.  <li> حول </li>
  14.  <li> الاتصال </li>
  15.  </ul>
  16.  </nav>
  17.  <section>
  18.  <h1> myarticle </h1>
  19.  <article>
  20.  <p> ... </p>
  21.  </article>
  22.  </القسم>
  23.  <Tower>
  24.  <p> ... </p>
  25.  </tower>
  26.  </body>
  27.  </html>

من خلال الكود ، يكون الفهم أكثر إيجازًا وأسهل ، أليس كذلك؟

مقالات ذات صلة