Front End blog | برمجة مدونتي

1 / 1

Present

The world has responded and become a community within the internet age. People exchange their understanding and share their lives through it, using blogs, they express their own interests, experiences, and thoughts. This method of communication has helped facilitate collective and easily accessible knowledge that people can build on.

In this studio, students will learn about blogs or opinion pieces. They will research and develop their own writing within a topic that interests them. They will then create and design their own blogs following the techniques and styles that garner others' interests as well. Using HTML and CSS, students will create an interactive blog interface as the first studio installment of the field of web design and web page programming.

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

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

1 / 14

Present

امتداد اليد البشرية الى الفضاء

حكمت قرقور

ايمان الحمادى

تقديم

1 / 12

Present

Html:

<!DOCTYPE html>

<html>

<head>

</head>

<h1 class="title">امتداد اليد البشرية الى الفضاء</h1>

<p class="intro">بعد الكوارث العديد التي إصابة كوكبنا من ارتفاع الحرارة

وذوبان الثلج وفقدان جزء من طبقة الأوزون والعديد من الكوارث

بدأت وكالات الفضاء بالبحث عن امل الحياة خارج كوكب الأرض

وهنا تتمحور أهمية الروبوتات في البحث عن أي حياة في أي كوكب</p>

</div>

<br>

<h1 class="span1">خصائص الربوتات</h1>

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

</p>

</div>

<br>

<h1 class="span2"> اهداف الروبوتات</h1>

تمكننا الروبوتات من دراسة اهم عوامل الحياة على الكواكب مثل التربة والغلاف الجوي والتغييرات المناخية والكوارث المحتملة واجراء العديد من التجارب للتأكد من ان البشرية يمكنها العيش عليها

</p>

</div>

<br>

<h1 class="span1">المصادر</h1>

<ul>

<li><a href="https://faynasser.wordpress.com/author/faynasser/" target="_blank">الربوتات بشكل عام</a></li>

<li><a href="https://www.noonpost.com/content/36244" target="_blank">روبوتات الفضاء</a></li>

<li><a href="https://alfallahalyoum.news/wp-content/uploads/2021/02/8-8.jpg" target="_blank">صورة الاحتباس الحراري</a></li>

<li><a href="https://images.theconversation.com/files/379734/original/file-20210120-15-ni8svg.jpg?ixlib=rb-1.1.0&rect=152%2C970%2C5766%2C4967&q=45&auto=format&w=496&fit=clip" target="_blank">صورة لروبوت وانسان</a></li>

<li><a href="https://www.noonpost.com/sites/default/files/inline-images/image9%20%283%29.jpg" target="_blank">صورة روبوت فضائي</a></li>

</ul>

</div>

</body>

</html>

Css:

*{

color: white;

}

body{

background-color: black;

background-size: 100%;

backdrop-filter: blur(5px);

background-attachment: fixed;

background-repeat: no-repeat;

content: "";

display: block;

position: absolute;

top: 0;

}

.title{

text-align: center;

font-family: 'Tajawal', sans-serif;

color: rgb(250, 250, 250);

position: relative;

border-bottom: 4px solid #3741c5;

margin-left: auto;

margin-right: auto;

display:block;

width: 450px;

padding: 0px;

height: 47px;

}

.tilte_img{

border-radius: 8px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

display: block;

margin-left: auto;

margin-right: auto;

width: 50%;

}

.intro{

font-family: 'Tajawal', sans-serif;

border-radius: 8px;

margin-left: 25px;

margin-right: 25px;

text-align: center;

font-size: 30px;

}

.img_robot1{

border-radius: 8px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

display: block;

float: left;

width: 35%;

}

.ig{

overflow: auto;

border: rgb(116, 108, 108);

margin-left: 20px;

margin-right: 15px;

}

.text2{

font-family: 'Tajawal', sans-serif;

text-align: right;

font-size: 34px;

padding-top: 40px;

padding-top: 55px;

}

.span1{

font-weight: bold;

font-size: 30px;

font-family: 'Tajawal', sans-serif;

position: relative;

border-bottom: 3px solid #e20013;

display: inline;

padding: 0;

margin-right: 0px;

margin-top: 20px;

float: right;

}

.img_robot2{

border-radius: 8px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

float: right;

width: 40%;

margin: 20px;

}

.text3{

font-family: 'Tajawal', sans-serif;

direction: rtl;

font-size: 34px;

padding-top: 55px;

}

.span2{

text-align: right;

font-weight: bold;

font-size: 30px;

font-family: 'Tajawal', sans-serif;

position: relative;

border-bottom: 3px solid #e20013;

display: inline;

padding: 0;

margin-right: 0px;

margin-top: 20px;

float: right;

}

.igg {

overflow: auto;

}

h1{

margin-right: 20px;

}

.div3{

margin: 20px;

overflow: auto;

}

.img3{

margin-top: 30px;

margin-left: 70px;

float: left;

}

ul{

direction: rtl;

font-family: 'Tajawal', sans-serif;

font-size: 25px;

padding-top: 80px;

padding-right: 0px;

display: block;

text-align: right;

float: right;

}

الفن والطعام من مكونات الثقافة

جودي سليمان

فاطمة ياسين

1 / 13

Present

html :

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1> الفن والطعام من مكونات الثقافة</h1>

<p class="p1"> الطعام فن والفن طعام وكلاهما من مكونات الثقافة فكل منهما لديه القدرة على<br> نقل من يتذوقه الى عوالم تتجاوز تجاربه

السابقة وتغذية العقول وإغناء الإذواق<br>وكلاهما ينبع من القلب وتشكله اليدان لمتعة الاخرين</p>

<h2> طبق الرامن</h2>هو واحدا من الأطباق الأكثر شعبية في اليابان. وهو عبارة عن نوع من حساء المعكرونة. تحضر من مرق اللحم او السمك وتكون بطعم صلصة الصويا او الميسو, كما تضاف اليها شرائح من اللحوم أو الدجاج او الطحالب المجففة. كما يستخدم في التحضير بصل اخضر أو ذرة <br> أصل نشأة الرامن غير واضح بعض المصادر تقول أنه نشأة في الصين, ومصادر اخرى تقول انه تخترع في اليابان في أواءل القرن العشرين , وتقول مصادر اخرى ان الرامن كانت وجبة طلابية . بعد تدفق الطلاب من الصبن الى اليابان في القرن السابع عشر بدأت المطاعم في دمج المعكرونة الصينية مع المطبخ الياباني لإعداد طبق سريع وسهل<br> يمكننا القول ان الرامن اندومي صحي </div>

<div class="p3"> <img class="img1"src="./img/3.jpg"style="border:10px dashed #ff9999" > <h2> الفن في صنع الرامن</h2> الرامن بالنسبة لي لوحة فنية ,الألوان , الرائحة , واهم شيء الطعم. من خلال تجربتي ومشاهدتي للكثير من الطهاة الذين يعدون طبق الرامن جميعهم تقريبا يستخدمون المكونات نفسها ولكن لكل طبق لوحة مختلفة عن الأخرى<br> كما يقول ذواقة الأطباق العالمية ان تحضير طبق الرامن هو فن بحد ذاته لايجيده إلا اليابانيين</div>

<div class="p3"> <img class="img1"src="./img/4.jpg" style="border:10px dashed #ff9999" > <h2> متحف شين يوكوهاما رامن</h2> هو متحف يختص بالغذاء وبحساء الرامن بشكل خاص . رَحّب المتحف منذ فتح أبوابه بأكثر من ٢٢ مليون زائر، وسجل نحو ١٠١٨٥ زائر في يوم واحد. "مقتطف" من مدونة <a href="https://www.nippon.com/ar/views/b01707/"> اليابان بالعربي</a> كان هناك الكثير من الناس عندما قمنا بالزيارة أيضا، بما في ذلك بعض السياح من برشلونة. وقال لنا واحد منهم، وهو رجل في الثلاثينات من عمره،: ”أنا أحب الرامن وقد تناولته كل يوم منذ جئت الى هنا. حتى في إسبانيا، أتناوله مرة واحدة في الشهر“هذا يدل على ان طبق الرامن يملك شعبية كبيرة عند مختلف الشعوب<br><a href="https://youtu.be/um5Z5b8WHNY"> رحلة في المتحف</a></div>

<div class="p3"> <img class="img2"src="./img/f4.2img.jpg" style="border:10px dashed #ff9999" > <h2> فن النيب</h2>

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

</body>

</html>

CSS:

h1{

color:darkgreen;

text-align: center;

font-family: sans-serif;

font-size: 40px;

}

.p1{

color: black;

font-family: sans-serif;

text-align: center;

font-size: 24px;

margin: 20px;

}

h2{

color:crimson;

text-align: right;

font-family: sans-serif;

font-size:40px

}

.img2{

width: auto;

height: 200px;

float:left;

}

.p3{

color: black;

font-family: sans-serif;

text-align: right;

font-size: 24px;

margin: 20px;

padding-bottom:80px

}

.img1{

width: auto;

height: 200px;

float:right;

margin: 20px;

}

body{

background-image: url(/img/44.jpg);

background-repeat :no-repeat;

background-size: cover;

}

Lucifer Programming Blog

كمال البيك

فاطمة كعيد

1 / 15

Present

للذهاب الى البرمجة

اضغط هنا

sharj circuit

mohamed muaaz saiedeisa

1 / 7

Present

Sharj circuit

Human hand reach the space

Hikmet Karkour

Presented by

1 / 12

Present

Html:

<!DOCTYPE html>

<html>

<head>

</head>

<h1 class="title">امتداد اليد البشرية الى الفضاء</h1>

<p class="intro">بعد الكوارث العديد التي إصابة كوكبنا من ارتفاع الحرارة

وذوبان الثلج وفقدان جزء من طبقة الأوزون والعديد من الكوارث

بدأت وكالات الفضاء بالبحث عن امل الحياة خارج كوكب الأرض

وهنا تتمحور أهمية الروبوتات في البحث عن أي حياة في أي كوكب</p>

</div>

<br>

<h1 class="span1">خصائص الربوتات</h1>

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

</p>

</div>

<br>

<h1 class="span2"> اهداف الروبوتات</h1>

تمكننا الروبوتات من دراسة اهم عوامل الحياة على الكواكب مثل التربة والغلاف الجوي والتغييرات المناخية والكوارث المحتملة واجراء العديد من التجارب للتأكد من ان البشرية يمكنها العيش عليها

</p>

</div>

<br>

<h1 class="span1">المصادر</h1>

<ul>

<li><a href="https://faynasser.wordpress.com/author/faynasser/" target="_blank">الربوتات بشكل عام</a></li>

<li><a href="https://www.noonpost.com/content/36244" target="_blank">روبوتات الفضاء</a></li>

<li><a href="https://alfallahalyoum.news/wp-content/uploads/2021/02/8-8.jpg" target="_blank">صورة الاحتباس الحراري</a></li>

<li><a href="https://images.theconversation.com/files/379734/original/file-20210120-15-ni8svg.jpg?ixlib=rb-1.1.0&rect=152%2C970%2C5766%2C4967&q=45&auto=format&w=496&fit=clip" target="_blank">صورة لروبوت وانسان</a></li>

<li><a href="https://www.noonpost.com/sites/default/files/inline-images/image9%20%283%29.jpg" target="_blank">صورة روبوت فضائي</a></li>

</ul>

</div>

</body>

</html>

Css:

*{

color: white;

}

body{

background-color: black;

background-size: 100%;

backdrop-filter: blur(5px);

background-attachment: fixed;

background-repeat: no-repeat;

content: "";

display: block;

position: absolute;

top: 0;

}

.title{

text-align: center;

font-family: 'Tajawal', sans-serif;

color: rgb(250, 250, 250);

position: relative;

border-bottom: 4px solid #3741c5;

margin-left: auto;

margin-right: auto;

display:block;

width: 450px;

padding: 0px;

height: 47px;

}

.tilte_img{

border-radius: 8px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

display: block;

margin-left: auto;

margin-right: auto;

width: 50%;

}

.intro{

font-family: 'Tajawal', sans-serif;

border-radius: 8px;

margin-left: 25px;

margin-right: 25px;

text-align: center;

font-size: 30px;

}

.img_robot1{

border-radius: 8px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

display: block;

float: left;

width: 35%;

}

.ig{

overflow: auto;

border: rgb(116, 108, 108);

margin-left: 20px;

margin-right: 15px;

}

.text2{

font-family: 'Tajawal', sans-serif;

text-align: right;

font-size: 34px;

padding-top: 40px;

padding-top: 55px;

}

.span1{

font-weight: bold;

font-size: 30px;

font-family: 'Tajawal', sans-serif;

position: relative;

border-bottom: 3px solid #e20013;

display: inline;

padding: 0;

margin-right: 0px;

margin-top: 20px;

float: right;

}

.img_robot2{

border-radius: 8px;

box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

float: right;

width: 40%;

margin: 20px;

}

.text3{

font-family: 'Tajawal', sans-serif;

direction: rtl;

font-size: 34px;

padding-top: 55px;

}

.span2{

text-align: right;

font-weight: bold;

font-size: 30px;

font-family: 'Tajawal', sans-serif;

position: relative;

border-bottom: 3px solid #e20013;

display: inline;

padding: 0;

margin-right: 0px;

margin-top: 20px;

float: right;

}

.igg {

overflow: auto;

}

h1{

margin-right: 20px;

}

.div3{

margin: 20px;

overflow: auto;

}

.img3{

margin-top: 30px;

margin-left: 70px;

float: left;

}

ul{

direction: rtl;

font-family: 'Tajawal', sans-serif;

font-size: 25px;

padding-top: 80px;

padding-right: 0px;

display: block;

text-align: right;

float: right;

}

AHMED EL SAİD

Majd shaker

مستقبل الهواتف الذكية

1 / 6

Present

كود

Html

<!DOKTAYP html>
<html>
<head>
<link rel="stylesheet" href="./style/style.css">
<title>my blog </title>
</head>

<body>
<h1>مستقبل الهواتف الذكية</h1>

<img class="img5" src="./img/mm.jpeg" alt="the image has not been uploaded">

<p class="p1">

عام 1926 تنبئ نيكولا تيسلا

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

</p>

<div class="p3">
<img class="img1" src="./img/s15.jpeg" alt="the image has not been uploaded">
يطلق عليه "التليفون أبو منفلة"، كانت الهواتف في العشرينات من القرن الماضي تحتوى على بوق ومستقبل منفصلين، وكان يعرف في العالم باسم الشمعدان.

ولم يكن الإصدار البدائي يسمح لك بالاتصال مباشرة بالشخص، بل كان عليك الاتصال بالمشغل أولالذي يقوم بتوصيل المكالمة

كما كان يتطلب أن تضع البوق أمام الفم، والمستقبل على الأذن حتى يمكنك إجراء مكالمة،وكلما كنت تصرخ كلما وصل الصوت بشكل أفضل
</div>

<div class="p3">

<img class="img1" src="./img/s14.jpeg" alt="the image has not been uploaded">
و اليوم في عام 2021 اصبحت الهواتف متطورة جداً

مقارنة بما كانت عليه في الماضي حيث الان و هنالك الكثير من الشركات بتنافس دائم
</div>

<div class="p3">
<h3>
اذا كيف ستبدو الهواتف مستقبلاً
</h3>
<img class="img1" src="./img/s13.jpeg" alt="the image has not been uploaded">
<h4>

بالنسبة لي هي ستكون الهولوجرام

</h4>

الهولوجرام (الهولوجراف) هو أحد تطبيقات الليزر لإنتاج واقع افتراضي مجسم , وقد سبق الحاسب الآلي في هذا المجال ، والهولوجراف يعطي صورا تخيلية مجسمة ثلاثية الأبعاد مسجِّلة لكل المعلومات، والتي تنتج الهولوجرام , والهولوجراف هو عملية تسجيل لتداخلات الموجات الصادرة من شعاع الليزر على وسيط عالى الحساسية للضوء ، حيث ينقسم شعاع الليزر إلى شعاعين ( شعاع المصدر وشعاع الجسم ) ويتقابلا على الوسيط الحساس ، فيقوم بتسجيل التداخل بين الشعاعين ويظهر هذا التداخل على شكل ما هو معروف فيزيقيًا باسم (هدب التداخل)، وعند إعادة إضاءة هذا الوسيط المسجل عليه هدب التداخل بنفس شعاع الليزر، يظهر فى الفراغ صورة مجسمة (ثلاثية الأبعاد) للجسم.
</div>

<h6>المصادر<br>
<a href="https://kayf.co/hologram/">https://kayf.com</a>
<br>
و مواقع الكترونية اخرى</h6>
</body>
</html>

كود

css

h1 {
color:#ff0a00;
font-size:50px;
text-align:Center;
font-family:verdana;
}

.img5{width:auto;
height:350px;
margin-left:auto;
margin-right:auto;
display:block;
}
.img1{
float:left;
height:200px;
width:220px;
}

a{
color:#0057ff;
font-family:verdana;
font-size:20px;
}

.p1{
color:#000000;
text-align:center;
font-size:25px;
font-family:verdana;
}

.p2{
color:#000000;
text-align:right;
font-size:20px;
font-family:verdana;
}
.p3{
margin-bottom:70px;
margin-left:50px;
color:#000000;
text-align:right;
font-size:20px;
font-family:verdana;
}

.p5{
color:#000000;
text-align:center;
font-size:20px;
font-family:verdana;
}

. p6{
color:#000000;
text-align:center;
font-size:20px;
font-family:verdana;
}

h6{
color:#ff001f;
font-size:20px;
text-align:center;
}
h3{
color:#ff000a;
font-size:25px;
text-align:center;
}

h4{
color:#000000;
text-align:center;
font-size:20px;
font-family:verdana;
}

Adam_Sofrasi

Areej.betar

1 / 8

Present

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style/style.css">
</head>

<body>
<h1>Adam_sofrasi</h1>
<h2>مشروع عائلي يهتم بأدق تفاصيل مناسباتكم</h2>
<img src="./img/Areej b..jpg">
<h3>تجربتي الخاصة</h3>
<div>انا اشجع هذا المشروع كوني احب الطهي وإجتماعية ايضاً. مايميز هذا المشروع انه يجمع عائلتي المتعاونة مع بعضها البعض وهذا.في الحقيقة امراٌ في غاية الروعة والتميز.
وبناءاً على رأي وتجارب الزبائن ارى اسم Adam_sofrasi من الاسماء اللامعة في اسطنبول في القريب العاجل.</div>
<h3>المناسبات التي تتم تغطيتها</h3>
<div>
<p>
اعياد الميلاد ،
بوفيهات اعراس<br>
بوفيهات خطوبة ،
زيارات عائلية<br>
اجتماعات

</p>
</div>
<a href="https://www.instagram.com/adam_sofrasi/">instagram</a>

</body>
</html>

CSS:

h1{

color:#6affe0;
text-align:center;
font-family:Cursive;
font-size:90px
}
h2{

text-align:center;
font-family:Cursive;
font-size:50px;
}

img{
width:auto;
height:700px;
display:block;
margin-left: auto;
margin-right:auto;

}

h3{

color: black;
text-align:center;
font-family:Cursive;
font-size:40px;
width:300px;
padding: 10px;
box-sizing: border-box;
background-color:#6affe0;
display:block;
margin-left: auto;
margin-right:auto;
}
div{text-align:center;
font-family:Cursive;
font-size:35px;
direction: rtl;

}
a{color:#6affe0;
text-align:left;
font-family:Cursive;
font-size:40px;

}

1 / 5

Present

Front End blog | برمجة مدونتي

Studio Description | وصف الاستوديو

Intro Presentation | العرض التقديمي

العرض النهائي

العرض النهائي

العرض النهائي

sharj circuit

العرض النهائي

final presentation

Adam_Sofrasi

العرض النها

Or