الدرس الثانى : (العناصر و الاوسمه) من دورة Html

السلام عليكم ورحمة الله

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

ما هى فائدة الاوسمة و العناصر ؟

العناصر تعطي لوثائق HTML هيكلية محددة وتخبر المتصفح عن كيفية عرض الصفحة، بشكل عام العناصر عبارة عن وسم "tag" للبداية ثم بعض المحتويات ثم وسم الإغلاق.

ما هو الوسام ؟

الوسوم هي توصيفات تستخدمها لكي تضعها في بداية العنصر وعند نهايته.
كل الوسوم لها نفس نفس الشكل، تبدأ مع علامة أصغر من "<" وتنتهي مع علامة أكبر من ">".
بشكل عام هناك نوعان من الوسوم، وسم البداية: <html> ثم وسم الإغلاق </html>. الفرق بين الإثنين هي علامة "/"، توصيف المحتويات يكون بوضعها بين وسم البداية ووسم الإغلاق.
لغة HTML تتكون من هذه العناصر، لكي تتعلم HTML عليك أن تتعلم وتستخدم وسوماً مختلفة.

والان سوف نشرح لكم بعض الاوسمه و العناصر المهامه :-

سوف نبدا بالعنصر (em) وظيفة العنصر (جعله النص مائلا ) وكل النصوص بين وسم البداية <em> ووسم الإغلاق </em> ستظهر بشكل مائلا

مثال على العنصر em

</em>عرب تيم<em>

هذا الكود يعطى


عرب تيم

 والان مع العنصر أو الوسام الثانى وهو h1، h2، h3، h4، h5 وh6 تستخدم للعناوين (حرف h هو اختصار "heading"), حيث h1 هو المستوى الأول من العناوين وبالتالي الأكبر حجماً، h2 يستخدم للمستوى الثاني من العناوين وهو أصغر حجماً بقليل، وh6 هو المستوى السادس والأخير من هيكلية العناوين وهو الأصغر.

 مثال على العنصر h2 / h1
<h1>عرب تيم</h1>
<h2>عرب تيم</h2>

هذا الكود يعطى

عرب تيم 

عرب تيم


هذه بعض العناصر الهامه و ان شاء الله سوف نتدرك الى كيفية انشاء موقعك الخاص 
وبكده يكون درس اليوم انتهاء مع درس جديد من عرب تيم شكرآ لكم
مرسلة بواسطة في ليست هناك تعليقات:
التسميات: , ,

الدرس الاول : (المقدمة) من دورة Html

السلام عليكم ورحمة الله

اليوم مع اول درس من دروس دورة الـHtml والان سوف نبدآ بالمقدمة وسوف نتحدث عن اللغة سوف نشرح أن شاء الله جميع اكواد الـHtml و أن شاء الله بعد الانتهاء من الدورة سوف نقوم بعمل دورة Css


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

أولآ : ما هى الـ Html

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

ثانيآ : ما فائدة الـ Html

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

 ماذا تعني H-T-M-L؟

HTML هي اختصار "HyperText Mark-up Language"

  • Hyper هي عكس "خطي" وهي تعني في هذه الحالة أن تنتقل من أي نقطة إلى أي نقطة بدون أن تسير في خط سير محدد، في الماضي - عندما كانت الفأرة شيء يلحقه القط - كانت الحواسيب تعمل بشكل خطي، تقوم بتنفيذ أمر ما ثم تذهب لما بعده، لكن HTML مختلفة، يمكنك أن تذهب إلى أي مكان في أي وقت، ليس بالضرورة مثلاً أن تزور موقع MSN.com قبل أن تزور HTML.net.
  • Text تعني النص، وهذه تشرح نفسها.
  • Mark-up هو ما تفعله بالنص، فهذه الكلمة تعني توصيف النص، فأنت تقوم بتوصيف النص تماماً كما تفعل مع معالجات الكلمات فتضيف العناوين والنقاط والنص السميك وغيرها.
  • Language تعني اللغة، فتقنية HTML هي لغة توصيف وهي أيضاً تستخدم العديد من كلمات اللغة الإنجليزية.


وبكده نكون خلصنا درس اليوم انتظرونا فى الدرس القادم وهو (الدرس الثانى : ( العناصر والوسوم) من دورة Html)

مرسلة بواسطة في ليست هناك تعليقات:
التسميات: , ,

اضافة اداة موضوع مميز لمدونات بلوجر


اليوم نقدم لكم اضافة رائعة جدا تستخدم لتمييز موضوع أو تدوينة معينة

بشكل جميل في واجهة المدونة في السايدبار



  • لتركيب اضافة الموضوع المميز

  1. من لوحة التحكم اذهب التخطيط ثم إصافة اداة HTML/JavaScript
  2. ألصق هذا الكود :

<div class="team_arab">
<img alt="عرب تيم" src="رابط صورة التدوينة" /><a href="رابط التدوينة"><i class="fa  fa-arrows-alt"></i></a><p>اسم التدوينة</p></div><style>.team_arab{position:relative;padding-top:5px}.team_arab img{width:100%;height:200px}.team_arab a{display:block;width:48px;height:48px;background:rgba(255,255,255,0.8);color:#e23a3e;font-size:20px;text-align:center;line-height:2.6;opacity:0;-webkit-transition:all .3s ease 0;-moz-transition:all .3s ease 0;-ms-transition:all .3s ease 0;-o-transition:all .3s ease 0;transition:all .3s ease 0;-webkit-transform:scale(0.2);-moz-transform:scale(0.2);-ms-transform:scale(0.2);-o-transform:scale(0.2);transform:scale(0.2);position:absolute;top:76px;left:126px;z-index:1001;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%}.team_arab p{position:absolute;bottom:0;left:0;background: rgba(77, 135, 209, 0.6);text-align: center;padding:12px 29px;margin:0;font-size:15.1px;color:#FFF;}.team_arab:hover a{opacity:1;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0)}.team_arab:hover a:hover{color:#333}.team_arab_posts{float:right;width:730px;background:#FFF;margin:24px 0;-webkit-box-shadow:0 0 5px #DDD;-moz-box-shadow:0 0 5px #DDD;box-shadow:0 0 5px #DDD}.team_arab_post{position:relative;padding:24px;border-bottom:1px solid #EEE}.team_arab_post_title h1{padding:0;margin:0;font-size:24px;font-weight:400}</style>

  • ونقوم بتغير كل ما بالوان الاحمر بما يلزم

مبروك عليك الاضافة المميزه و الرائعه وكده نكون خلصنا شرح النهارده
مرسلة بواسطة في ليست هناك تعليقات:
التسميات: ,

إضافة إبتسامات متحركة للتعليقات في مدونة بلوجر




سوف نتعرف اليوم علي طريقة جميلة جدا لوضع تأتيرات متحركه فى التعليقات ،هذه الخاصية تعطي لتعليقات مدونتك جمالية وتنسيق رائع .

اولآ لتركيب الاضافة 

  1. ندخل الى لوحة التحكم فى بلوجر
  2. نقوم باختيار القالب
  3. نقوم بالضغط على تحرير Html
  4. نقوم بالبحث عن الوسام </body>  (نقوم بالبحث بالضغط على Ctrl+F)
  5. نضع الكود التالى فوق الوسام </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'><script type='text/javascript'>//<![CDATA[jQuery(document).ready(function () {emoticonx({emoRange:"#comments p, div.emoWrap",putEmoAbove:"iframe#comment-editor",topText:"إضغط على الابتسامة لظهور الكود الخاص بها",emoMessage:"لإدراج تعبيرات الوجه يجب إضافة ما لا يقل عن مسافة واحدة قبل الرمز."})});//]]></script><script src='https://arblab.googlecode.com/svn/JS/emoticonnya.js' type='text/javascript'/></b:if>
الان نقوم بالبحث عن الوسام ]]></b:skin>
ونضع فوقها الكود التالى

.emoWrap {
position:relative;
padding:10px;
margin-bottom:7px;
background:#fff;
background-image: -ms-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
background-image: -moz-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
background-image: -o-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #FFFFFF), color-stop(1, #FFF9F2));
background-image: -webkit-linear-gradient(right, #FFFFFF 0%, #FFF9F2 100%);
background-image: linear-gradient(to left, #FFFFFF 0%, #FFF9F2 100%);
border:3px solid #860000;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-moz-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
-webkit-box-shadow:0 4px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
box-shadow:0 2px 6px rgba(0,0,0,0.1),0 1px 1px rgba(0,0,0,0.3);
font-weight:normal;
color:#333;
}
.emoWrap:after {
content:"";
position:absolute;
bottom:-10px;
right:10px;
border-top:10px solid #860000;
border-left:20px solid transparent;
width:0;
height:0;
line-height:0;
}
و أخيرا نضيف هدا الكود قبل الوسم </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>

واتمنى ان تعجبكم الاضافة و لا تبخلو علينا بردودكم المشجعة



مرسلة بواسطة في ليست هناك تعليقات:
التسميات: ,

حذف ايقونة التحرير السريع من مدونة بلوجر

اليوم مع تدوينه جديده على مدونة عرب تيم اليوم سوف نتعلم كيفية حذف ايقونة التحرير السريع من مدونة بلوجر


ايقونة التحرير السريع فائدتها انه اذا كنت داخل الصفحة الرئيسيه لمدونتك فأنك تستطيع تحرير الادوات والتحكم فيها .


طريقة حذف ايقونة التحرير السريع :

  1. ادخل مدونتك .
  2. القالب .
  3. حرر القالب وابحث عن ]]></b:skin>
  4. ضع هذا الكود فوقه : 
.item-control.blog-admin {display: none !important;}


 ثم قم بحفظ القالب ومبروك عليك حذف ايقونة التحرير السريع الدرس بسيط و سهل جدآ و لائ استفسار يرجاء وضعه فى تعليق
كان معكم فريق عرب تيم
مرسلة بواسطة في ليست هناك تعليقات:
التسميات: , ,
الاشتراك في: الرسائل (Atom)

جميع الحقوق محفوظه لمدونةعرب تيم 2014

من تصميم : عرب تيم