كيف أستخدم عناصر HTML 5 لتعديل هيكلية الصفحة لدي

Ziad Mohamed15 · 14 فبراير 2022

السلام عليكم ممكن تعديل علي الملف بحيث تشيل div بتاعت header وتحط header يعني بتحديث الجديد تظبتها بل عناصر بتاعت html 5

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description" content="موقع شخصي لاسم الطالب">
    <meta name="author" content="اسم الطالب">
    <title>الموقع الشخصي</title>
    <link rel="stylesheet" href="py.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
</head>

<body>
    <div class="one">
        <div class="navbar">
            <img src="animmation/logo.png" alt="logo" class="logo">
            <button type="button">sign up</button>
        </div>
        <div class="content">
            <small>Welcome to our</small>
            <h1>World's <br> Creative Studio</h1>
            <button type="button">Take a tour</button>
        </div>
        <div class="sidebar">
            <img src="/animmation/menu.png" alt="" class="menu">
            <div class="socialmedia">
                <img src="animmation/fb.png" alt="">
                <img src="animmation/ig.png" alt="">
                <img src="animmation/tw.png" alt="">
            </div>
            <div class="usful">
                <img src="animmation/share.png" alt="">
                <img src="animmation/info.png" alt="">
            </div>
        </div>
        <div class="bubbles">
            <img src="animmation/bubble.png" alt="">
            <img src="animmation/bubble.png" alt="">
            <img src="animmation/bubble.png" alt="">
            <img class="hj" src="pic/441-removebg-preview.png">
            <img src="animmation/bubble.png" alt="">
            <img src="animmation/bubble.png" alt="">
            <img src="animmation/bubble.png" alt="">
            <img src="animmation/bubble.png" alt="">
        </div>
    </div>
</body>

</html>

py.html

py.css

Wael Aljamal · 14 فبراير 2022

ملاحظة: لم يظهر الموقع بالشكل المطلوب لعدم تضمين ملفات الصور،

يوجد 3 عناصر HTML 5 يمكنك استخدامهم:

الترويسة header (لو أردت وضع بعض الروابط ضمن قائمة مثلاً ضع القائمة ضمن عنصر nav)

<div class="navbar">
  <img src="animmation/logo.png" alt="logo" class="logo">
  <button type="button">sign up</button>
</div>


=> 

<header>
  <img src="animmation/logo.png" alt="logo" class="logo">
  <button type="button">sign up</button>
</header>

القسم الرئيسي لديك و فيه المحتوى: نستعمل main

<div class="content">
  <small>Welcome to our</small>
  <h1>World's <br> Creative Studio</h1>
  <button type="button">Take a tour</button>
</div>

=>

<main>
  <small>Welcome to our</small>
  <h1>World's <br> Creative Studio</h1>
  <button type="button">Take a tour</button>
</main>

العنصر الجانبي يصبح aside:

<div class="sidebar">
  <img src="/animmation/menu.png" alt="" class="menu">
  <div class="socialmedia">
    <img src="animmation/fb.png" alt="">
    <img src="animmation/ig.png" alt="">
    <img src="animmation/tw.png" alt="">
  </div>
  <div class="usful">
    <img src="animmation/share.png" alt="">
    <img src="animmation/info.png" alt="">
  </div>
</div>

=>

<aside>
...
</aside>

يمكن اعتبار هذا قسم منفصل فنستخدم section

<div class="bubbles">
..
</div>

=>

<section>
..
</section>

وفي حال أضفت تذييل للصفحة استخدم Footer.

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

Ziad Mohamed15 · 15 فبراير 2022

بتاريخ 15 ساعات قال Wael Aljamal:
ملاحظة: لم يظهر الموقع بالشكل المطلوب لعدم تضمين ملفات الصور،

يوجد 3 عناصر HTML 5 يمكنك استخدامهم:

الترويسة header (لو أردت وضع بعض الروابط ضمن قائمة مثلاً ضع القائمة ضمن عنصر nav)
<div class="navbar">
  <img src="animmation/logo.png" alt="logo" class="logo">
  <button type="button">sign up</button>
</div>


=> 

<header>
  <img src="animmation/logo.png" alt="logo" class="logo">
  <button type="button">sign up</button>
</header>
القسم الرئيسي لديك و فيه المحتوى: نستعمل main
<div class="content">
  <small>Welcome to our</small>
  <h1>World's <br> Creative Studio</h1>
  <button type="button">Take a tour</button>
</div>

=>

<main>
  <small>Welcome to our</small>
  <h1>World's <br> Creative Studio</h1>
  <button type="button">Take a tour</button>
</main>
العنصر الجانبي يصبح aside:
<div class="sidebar">
  <img src="/animmation/menu.png" alt="" class="menu">
  <div class="socialmedia">
    <img src="animmation/fb.png" alt="">
    <img src="animmation/ig.png" alt="">
    <img src="animmation/tw.png" alt="">
  </div>
  <div class="usful">
    <img src="animmation/share.png" alt="">
    <img src="animmation/info.png" alt="">
  </div>
</div>

=>

<aside>
...
</aside>
يمكن اعتبار هذا قسم منفصل فنستخدم section
<div class="bubbles">
..
</div>

=>

<section>
..
</section>
وفي حال أضفت تذييل للصفحة استخدم Footer.

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

انا بحاول افهم التطبيقات المواقع بس اكترهم من غير التحديث الجديد لما غيرت وخليت header مثلا التصميم بيخرب هل من اللممكن تعدلي عليه ولا اذاكره كده من غير html5

Wael Aljamal · 15 فبراير 2022

بتاريخ 1 ساعة قال Ziad Mohamed10:

انا بحاول افهم التطبيقات المواقع بس اكترهم من غير التحديث الجديد لما غيرت وخليت header مثلا التصميم بيخرب هل من اللممكن تعدلي عليه ولا اذاكره كده من غير html5

في HTML 5 تم إضافة بعض الوسوم الجديدة التي لأسمائها دلالات، مثل الوسوم التي استبدلتها في الإجابة، ولكن اعتبر أن هذه الوسوم عبارة عن حاويات div ولا تأتي معها تنسيقات مسبقة، لذلك أخبرتك في جزء من الإجابة:

بتاريخ 16 ساعات قال Wael Aljamal:

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

هنا عليك إعادة تطبيق CSS من جديد باستخدام محددات الوصول الصحيح بع تعديل هيكلية HTML ويمكنك إعادة إضافة الأصناف Classes لهم كما قبل التعديل.

أي عليك تعديل ملف CSS لتطبيق التنسيقات بشكل صحيح.

كيف أستخدم عناصر HTML 5 لتعديل هيكلية الصفحة لدي

السؤال

Ziad Mohamed15

3 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

Ziad Mohamed15

Wael Aljamal

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية