أكواد html جاهزة للمبتدئين أكثر من 100 كود جاهز
لغات البرمجة
2

أكواد html جاهزة للمبتدئين أكثر من 100 كود جاهز

صورة
محمد قاسم
اخر تحديث :

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

أكواد html جاهزة للمبتدئين أكثر من 100 كود جاهز
أكواد html جاهزة للمبتدئين

أساسيات لغة html للمبتدئين

أولاً وقبل الخوض في تعلم كتابة أكواد البرمجة html ، دعني أعطيك لمحة قصيرة عن اساسيات هذه اللغة ، ولماذا تستخدم؟

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

أكواد html الأساسية لبناء صفحة الويب

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

  • الكود <html>

وهو الكود الذي يعطي الأمر للمتصفح بأن هذه الصفحة تتم كتابتها بلغة html ، ويقفل بالوسم <html/>.

  • الكود <head>

وهو كود رأس الصفحة يتم وضع عنوان الصفحة والموضوع بداخله ضمن الوسم title ، ويقفل بالوسم <head/>.

  • الكود <title>

هو الكود الذي يتم كتابة عنوان صفحة الويب بداخله ، ويقفل بالوسم <title/>.

  • الكود <body>

وهو الكود الذي يرمز للمحتوى المرئي من صفحة الويب مثل الكتابات ، والمحتوى الصوري ، أو الفيديوهات ، أو المقاطع الصوتية ، إلخ.. ويقفل بالوسم <body/>.

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

جميع أكواد HTML مع الشرح

أكواد html كاملة

كود إضافة صورة

<img src="هنا تضع رابط الصورة"></img>


كود إضافة فيديو

<video src"هنا تضع رابط الفيديو"></video>


كود إضافة ملف صوتي

<audio src="هنا تضع رابط الملف الصوتي"></audio>

كود آخر المواضيح
<br/>< style="text/javascript" src="http://wa7ed.mn.elnas.googlepages.com/rec-posts.js"></>< style="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</>< src="http://egypt-goldentours1974.blogspot.com/feeds/posts/default?orderby=updated&alt=json-in-&callback=showrecentposts"></>

كود القرآن الكريم
<center>
<p style="visibility:visible;">
<embed src="http://assets.myflashfetish.com/swf/mp3/mff-stick.swf?myid=19442782&path=2009/03/14" quality="high" wmode="transparent" flashvars="mycolor=111111&mycolor2=99CCCC&mycolor3 =FFFFFF&autoplay=true&rand=1&f=4&vol=100&pat=9&gra d=false" width="219" height="35" name="myflashfetish" salign="TL" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" border="0" style="visibility:visible;width:219px;height:35px; " /><br><a href="http://www.mixpod.com/playlist/19442782" rel="nofollow" target="_blank"><img src="http://assets.myflashfetish.com/images/get-tracks.gif" title="Get Music Tracks!" style="border-style:none;" alt="Music"></a><a href="http://www.mixpod.com" rel="nofollow" target="_blank"><img src="http://assets.myflashfetish.com/images/make-own.gif" title="Create A Playlist!" style="border-style:none;" alt="Playlist"></a><br /><a href="http://mixpod.com">Music Playlist</a> at <a href="http://mixpod.com">MixPod.com</a></p>
</center>

كود زر
<center>
<br/><br/><form>
<input value="اكتب هنا اسم الزر" onclick="alert('اكتب هنا ما تشاء'); return true" type="button"/></form>
<br/><br/>

قد يهمك أيضاً 👇
_____________[ أكواد html رائعة ]_____________

كود إعلان نصي
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="54%" id="AutoNumber2" height="74">
<tr>
<td width="100%" height="74">
<p align="right">
<font style="font-size:16px" color="#000000" face="Arial"><b> <a href="اكتب هنا رابط مدونتك" rel="nofollow" target="_blank" class="style1">اكتب اسم مدونتك هنا</a> <br>
</b></font><font style="font-size:8px" color="#000000" face="Arial"><b><a href="اكتب رابط مدونتك" rel="nofollow" target="_blank" class="style1"><br></a></b></font><font style="font-size:16px" color="#000000" face="Arial"><b>اسم مدونتك<br>
</b></font><font style="font-size:16px" color="#007700" face="Arial"></font></td>
</tr>
</table>

كود لإضافة فلاش للمدونة
<img src="https://img1.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: 240px; width: 320px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_0" data-original-id="BLOGGER_object_0" /> </div>
<div style="text-align: center;">
  <input name="selectit" onclick="selectAll ();" type="button" value="تحديد الكل" /></div>
<div style="text-align: center;">
<br /></div>
</form>
</div>
<br />
<br />
<br />
<br />
<b><u><span style="font-size: large;"> كود نص متحرك: </span></u></b><br />
<form name="form1">
<div style="text-align: center;">
<textarea cols="50" name="demo" readonly="" rows="6"><marquee behavior="alternate">اكتب هنا عبارتك</marquee>

كود نص مضيء
<span>نص مضيء</span>

كود إطار حول النص
<table border=”10″ width=”380″ id=”myexample” style=”border:5px solid green”>
<br>
<tr>
<br>
<td> النص للسطر الأول<br>النص للسطر الثانى<br><br></td>
<br>
</tr>
<br>
</table>
<br>
<script language=”JavaScript1.2″>
<br>
<!–
<br>
myexample.style.borderColor=”green”
<br>
}
<br>
setInterval(“flashit()”, 500)
<br>
//–>
<br>
</script>
<br>
<br>

مشروع html جاهز للمبتدئين

في هذه الفقرة عزيزي الزائر أقدم لك كود html لموقع كامل، يمكنك الاحتفاظ به أو التعديل عليه كما تريد. وهو عبارة عن كود صفحة ويب بلغة html جاهزة.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> صفحة ويب المقدمة الذاتية الخاصة بـ Wang Di </title>
</head>
<body>
     <center> <! - اجعل المحتوى في شاشة مركز صفحة الويب ->
                 <a name="top"> </a> <! - قم بتعيين نقطة ربط ، وانتقل إلى هذا الموضع عند النقر فوق ->
        <img src="timg.png" width="160" height="160" />
                 <h1> <font color = "# FF6633"> وانغ دي </font> </h1>
                 <p> التحكم في الكوكبة / الحياة الخفيفة / مذكرات الضوء / حلم الإضاءة </ p>
        <marquee width="750px"><p>======QQ：1476737138======</p></marquee><br /><br />
        <img src="20190214095702_90925.jpg" />
        <h2><font color="red"></font></h2>
                 <h3> الحياة </ h3>
                 <p> امنح الوقت نظرة ضحلة للخلف ، وامنح الروح لمسة من السلام والدفء ، وعبق الماضي ، والسنوات هادئة. </p> <br /> <br />
        <hr color="#FFCCCC" width="750px" /><br /><br />
        <h2><font color="red">02</font></h2>
                 <h3> العمل </ h3>
        <img src="20190214095710_36438.jpg" /><br /><br />
        <hr color="#FFCCCC" width="750px" /><br /><br />
        <h2><font color="red">03</font></h2>
                 <h3> هراء </ h3>
                 <p> عندما يلتقي تصميم الويب بالأسلوب الأدبي ، ما هو نوع اللقاء ، لا تخطط للقاء ، أفضل الأشياء تحدث دائمًا بالصدفة! —— وانغ دي </p>
        <img src="img/cat.gif" /><br /><br />
        <hr color="#FFCCCC" width="750px" /><br /><br />
        <h2><font color="red">04</font></h2>
                 <h3> يوميات </ h3>
        <img src="20190214095726_34296.jpg" /><br /><br /><br />
                 <a href="#top"> انقر للرجوع إلى الأعلى </a> <! - آمل أن أعطي المستخدم رابطًا هنا ، وينقر المستخدم على المحتوى هنا للانتقال إلى نقطة الارتساء ->
  </center>
</body>
</html>

أفضل المواقع التي تقدم مشاريع جاهزة بلغة html

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

  • موقع githob

للدخول إلى الموقع من هذا الرابط githob.com.

  • موقع search code

للدخول إلى الموقع من هذا الرابط searchcode.com.

  • موقع openhob

للدخول إلى الموقع من هذا الرابط openhob.org.

  • موقع codeproject

للدخول إلى الموقع من هذا الرابط codeproject.com.

قد يهمك أيضاً 👇

مجموعة أكواد Java Script و html لمصممي المواقع

كود للنص العريض
<b>اكتب النص هنا </b>

كود تحديد إتجاه النص

<p dir="rtl" align="right">اكتب هنا النص الذي سيظهر من اليمين إلى اليسار</p>

كود نص يتحرك لأعلى

<marquee behavior="scroll" direction="up" height="140" scrollamount="1" scrolldelay="60" onMouseOver="this.stop()" onMouseOut="this.start()">


<center><br>اكتب هنا النص الذي سيتحرك للأعلى الفقرة 1
<br>اكتب هنا النص الذي سيتحرك للأعلى الفقرة 2
<br>مدونة syria matrix 3
<br>اكتب هنا النص الذي سيتحرك للأعلى الفقرة 4
<br>......</center>
</marquee>

كود نص متحرك

<div align="center">
<table border="0" width="100%" style="border-collapse: collapse">
<tr><td class="alt1" colspan="3"><b>
<font size="4" color="000000">
<marquee direction="right" width="100%" height="20"direction="right" onmouseover="this.stop()" onmouseout="this.start()" scrolldelay="0" scrollamount="5"> </marquee></font></b></td>
</tr></table></div>
كود وضع الفلاش
<object width="150" height="340">
<param value="MYFLASH.swf" name="movie"/>
<embed width="150" src="URL OF MYFLASH.swf" height="340">
</embed>
</object>

كود شريط الحديث والدعاء

<iframe
 align="center" 
src="http://www.wathakker.net/outdoor-strip-marquee.html" 
frameborder="0" allowtransparency="1" scrolling="no" width="474" 
<height="41" vspace="0"></iframe>


_________♡🌼{ وصلنا إلى النهاية }🌼♡_________

كان كل هذا ما في جعبتي من

أكواد html جاهزة للمبتدئين

أتمنى أن تكون قد وجدت الكود الذي كنت تبحث عنه.

الإنتقال إلى الدرس التالي من اوامر html
















تعديل المقال
facebook twitter

مقالات قد تهمك

تعليقات



    حجم الخط
    +
    16
    -
    تباعد السطور
    +
    2
    -