مشاركة حلول: مهمة تطبيق فيتامين واو

ورشات الواجهات الأمامية Frontend أساسيات تطوير واجهات الويب
#65 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
    </head>  
    <body>
         <header>
               <h1>فيتامين واو</h1>
         </header>
         <h2>سنجعلك في المقدمة إن تأخرت</h2>
         <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
         <main>
                <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
                <div>
                    <a href="#">اطلب وساطة</a>
                </div>
             <footer>
                 <p>&copy; 2019 جميع الحقوق محفوطة لـ فيتامين واو</p>
             </footer>
         </main>
    </body>
</html>```
3 Likes
#66

:star_struck: شغل نظيف

2 Likes
#67

هذا هو حل للمهمة التدريبية تقسيم وهيكلة الصفحة

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>فيتامين واو</title>
    </head>
    <body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        
        <main>
            <h2>سنجعلك في المقدمة إن تأخرت</h2>
            <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الأخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك</p>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" >
        </main>
        <a href="#">أطلب وساطة</a>
        <footer>
            <p>&copy; 2019 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>
2 Likes
#68

شغل ممتاز حمزة :clap:

ملاحظة واحدة فقط :muscle:

قمت بكتابة العنصر

<a href="#">أطلب وساطة</a>

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

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

image
image.jpg814×517 81.5 KB

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

3 Likes
#69

شكراً أستاذ Mohammed Alhakem قمت بالتعديل المطلوب في المحررز
@Alhakem

3 Likes
#70

ممتاز ممكن تعمل تعليق جديد بالكود :wink:

2 Likes
#71

تحديث الكود بالتعديلات المطلوبة من اضافة وسم a داخل الmain في داخل div لكي لا يأتي الرابط بجانب الصورة

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>فيتامين واو</title>
    </head>
    <body>
        <header>
            <h1>فيتامين واو</h1>
        </header>
        
        <main>
            <h2>سنجعلك في المقدمة إن تأخرت</h2>
            <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الأخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك</p>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" >
           <div> <a href="#">أطلب وساطة</a></div>
        </main>
       
        <footer>
            <p>&copy; 2019 جميع الحقوق محفوظة لفيتامين واو</p>
        </footer>
    </body>
</html>
3 Likes
#72

الأن كل شئ perfect :ok_hand:

2 Likes
#73 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>فيتامين واو</title>
    </head>
<body>
    <header>
        <h1>فيتامين واو</h1>
    </header>
    <main>
        <h2>سنجعلك في المقدمة إن تأخرت</h2>
        <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
        <div>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" width="600">
        </div>
        <a href="#">اطلب وساطة</a>
    </main>
    <footer>
        <p>&Copy; جميع الحقوق محفوظة لفيتامين واو 2018</p>
    </footer>
</body>    
</html>
2 Likes
#74

ممتاز بن يحيى :clap:،

ملاحظة واحدة نسيت العنصر body قم بإصلاح هذه المشكلة وتعديل الأكواد

1 Like
#75
عنوان الموقع

فيتامين و

سنجعلك في المقدمة إن تأخرت

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

اطلب رسالة @2018 جميع الحقوق محفوظة لفيتامين و 
</body>
2 Likes
#76

أهلاً @Sahar إطلعت على الأكواد وعمل ممتاز وصحيح أحسنتي :clap::star_struck:

فقط أرجوا أن تقومي بتعديل التعليق وكتابة الأكواد بين هذه العلامات

```
هنا
```

كما هو موضح في الفيديو أدناة عشان تظهر الأكواد بشكل سليم

1 Like
#77 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>فيتامين واو</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<header>
		<h1>فيتامين واو</h1>
	</header>
	<main>
		<h2>سنجعلك في المقدمة إن تأخرت</h2>
		<p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
		<div>
			 <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" alt="فيتامين واو" width="600px">
            
		</div>
		<a href="#">أطلب وساطة</a>
	</main>
	<footer>
		<p>&copy; جميع الحقوق محفوظة لفيتامين واو 2018</p>
	</footer>

</body>
</html>
2 Likes
#78

أكوادك تنم عن خبرة سابقة :wink: كلة ممتاز :clap:

2 Likes
#79
`المحافظة على التنسيق` 
   <title> واو</title> 
</head>
<body>
    <header>
        <h1>فيتامين واو</h1>
    </header>
    <main>
        <h2>سنجعلك في المقدمة إن تأخرت</h2>
        <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
        <div>
        <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
        </div>
        <a href="">اطلب وببساطه</a>
    </main>
    <footer>
        <p>&copy; جميع الحقوق محفوظة لفايتامين واو</p>
    </footer>
    
</body>
2 Likes
#80

ممتاز أحمد، إطلعت على أكوادك و كلة مضبوط مية مية :muscle:

فقط قم بتعديل تعليقك وإصلاح الأكواد بوضعها بين العلامات التالية:

```
هنا ضع الاكواد
```
1 Like
#81 
<!DOCTYPE html>
    <html>
        <head>
            <title>عنوان الموقع</title>
            <meta charset="ut8-8">
        </head>
        <body>
            <header>
                <h1>فيتامين واو</h1>
            </header>
            <main>
                <h2>سنجعلك في المقدمة إن تأخرت</h2>
                <p>إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.</p>
                <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg">
                <a href="#">أطلب وساطه</a>
            </main>
            <footer>&copy;جميع الحقوق محفوظه لفيتامين واو</footer>
        </body>    
    </html>
2 Likes
#82

اود ان اشكر مجتمع كورتابس على كل شيء

2 Likes
#83 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>عنوان الموقع</title>
    </head>
    <body>
        <header> 
            <h1> فيتامين باء </h1>
        </header>
        <main>
            <h3>سنجعلك في المقدمة إن تأخرت</h3>
            <p>  إحتياجك لهذا الفيتامين أكثر من الفيتامينات الآخرى فهو الفيتامين الذي لا يمد جسدك بالقوة فحسب ولكن يفيدك من الناحية الوظيفية ويوسع حجم معارفك.
            </p>
            <img src="https://raw.githubusercontent.com/coretabs-academy/frontend-basics-workshop-markdown/master/project-structure/task/assets/banner.jpg" width="400">
            <div>
              <a href="">اطلب وساطه</a>
            </div>
        </main>
        <footer>
           2018  جميع الحقوق محفوظة للفيتامين باء 
        </footer>
    </body>
</html>
2 Likes
#84

هلا محمود، كلة ممتاز :grin: فقط بعض الملاحظات خذهم بعين الإعتبار:

الاولى كود الmeta فيه غلط

<meta charset="ut8-8">

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

الملاحظة الأخيرة في القسم footer قمت بكتابة فقرة بشكل مباشر من الأفضل وضعها بداخل عنصر الفقرات p

قم بعمل التعديلات ومشاركتها معي

2 Likes