منتديات رحيل لكل العرب - عرض مشاركة واحدة

الفارس · 05-04-2019, 01:24 PM

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

الملفّ عبارة عن html عاديّ. حيث يبدأ بـ DOCTYPE، عنوان الصفحة ورابط لـ CSS. يبدأ محتوى الصفحة بـ <H1>، والذي سيتم لاحقا تحويله إلى شعار HD، بعد ذلك سنضيف وعاء div لمساعدتنا على توسيط المحتوى.

بعد إغلاق <THEAD> يبدأ <TBODY>. وبينما تُستخدم <th> داخل <THEAD>، فإنّ <td> تستخدم داخل <TBODY>. كل سلسة من الخلايا مُتضمَّنة داخل صفّ واحد، وصفوفنا تساعدنا في تحديد الأعمدة. كما ستتم إضافة كافّة صفوف البيانات لإنهاء HTML.

كود:

HTML النّهائي
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Harley Davidson Sportster Motorcycle Model Comparison</title>

<link href="style.css" rel="stylesheet" />

</head>

<body>

<h1>Harley Davidson Motorcycles</h1>

<div id="container">
    
    <table>
        <thead>
            <tr>
                <th> </th>
                <th class="iron"><img src="images/iron.jpg" alt="Harley Davidson Iron 883" /></th>
                <th class="nightster"><img src="images/nightster.jpg" alt="Harley Davidson Nightster" /></th>
                <th class="fortyeight"><img src="images/forty-eight.jpg" alt="Harley Davidson Forty-Eight" /></th>
            </tr>
            <tr>
                <th> </th>
                <th class="iron"><h2>Iron 883</h2></th>
                <th class="nightster"><h2>Nightster</h2></th>
                <th class="fortyeight"><h2>Forty-Eight</h2></th>
            </tr>
        </thead>
        
        <tbody>
            <tr>
                <td class="feature">Engine</td>
                <td class="iron">883cc</td>
                <td class="nightster">1202cc</td>
                <td class="fortyeight">1202cc</td>
            </tr>
            
            <tr>
                <td class="feature">Torque</td>
                <td class="iron">70Nm</td>
                <td class="nightster">98Nm</td>
                <td class="fortyeight">98Nm</td>
            </tr>
            
            <tr>
                <td class="feature">Exhaust</td>
                <td class="iron">Chrome, staggered shorty exhaust with dual mufflers</td>
                <td class="nightster">Chrome, slash-cut ex-haust with dual mufflers</td>
                <td class="fortyeight">Chrome, staggered shorty exhaust with dual slash-cut mufflers</td>
            </tr>
            
            <tr>
                <td class="feature">Wheels</td>
                <td class="iron">Black, 13-Spoke Cast Alumi-num</td>
                <td class="nightster">Black, Laced Steel</td>
                <td class="fortyeight">Black, Laced Steel</td>
            </tr>
            
            <tr>
                <td class="feature">Ground Clearance</td>
                <td class="iron">120mm</td>
                <td class="nightster">130mm</td>
                <td class="fortyeight">100mm</td>
            </tr>
            
            <tr>
                <td class="feature">Price</td>
                <td class="iron">£6,699</td>
                <td class="nightster">£8,099</td>
                <td class="fortyeight">£8,849</td>
            </tr>
        </tbody>
    
    </table>

</div>

</body>
</html>

المصدر: منتديات رحيل لكل العرب - من قسم: قسم تطوير المواقع ومحركات البحث والسيو Seo والووردبريس WordPress