الموضوع سيتم أكبر موسوعة متجددة من أكواد الـHTML فقط.
وإن شاء لله يشاركنا جميع خبراء الـHTML لمساعدتي في تطوير الموضوع وإيصال فكرة اكواد الاتش تي ام ال إلى الجميع
أكواد HTML
أكواد بسيطة ومصغره
وهي سهلة الإستعمال بمجرّد إستيعاب مهمة الكود وواجبه بصفحة البرمجة.
في البداية نبدأ بالاكواد البسيطة
الأمثلة في كل فصل :
رمز Code:
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
الكود يكتب في عدة الطرق والفرق بينهم هو حجم الخط
تفصيل أكثر :
<h1>النص هنا</h1>
هذا النص الأكبر
ويتدرج من رقم واحد إلى رقم 5
مثال:
رمز Code:
<h1>النص هنا</h1> <h2>النص هنا</h2> <h3>النص هنا</h3> <h4>النص هنا</h4> <h5>النص هنا</h5>
_______________________________________
رابط توجيه على شكل نص
رمز Code:
<a href="http://www.alamakwad.blogspot.com">This is a link</a>
ويتم إستبدال الجملة This is a link بالكلام الذي تريد وضعه
________________________________________
كود الفصل بين الكلام من خلال سطر يملأ السطر:
الكود :
رمز Code:
<html> <body> <p>سطر واحد:</p> <hr> <p>عالم الأكواد.</p> <hr> <p>سنتر سكربت.</p> <hr> <p>عالم الأكواد.</p> </body> </html>
________________________________________
الفصل بالكلام بشكل عادي
الكواد
رمز Code:
<html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>
كود جعل الكلام غليظ/مائل/مائل رفيع
الكود :
رمز Code:
<!DOCTYPE html> <html> <body> <p><b>نص غليظ</b></p> <p><strong>نص غليظ 2</strong></p> <p><i>نص مائل</i></p> <p><em>نص مائل رفيع</em></p> <p><code>نص رفيع متباعد</code></p> <p>نص<sub> مرتفع</sub> and <sup>مرتفع</sup></p> </body> </html>
كود وضع اسم الصفحة في المتصفح/مع محتوى بسيط في الصفحة
رمز Code:
<!DOCTYPE html> <html> <head> <title>هنا يوضع إسم الصفحة المطلوب</title> </head> <body> هنا يوضع كتابة بسيطة في محتوى الصفحة </body> </html>
كود رائع/ لا يوجد إسم مفسّر له لكن يوجد مثال له الصورة :
الكود :
رمز Code:
<!DOCTYPE html> <html> <body> <div style="opacity:0.5;position:absolute;left:50px;width:300px;height:150px;background-color:#40B3DF;"></div> <div style="font-family:verdana;padding:20px;border-radius:10px;border:10px solid #EE872A;"> <div style="opacity:0.3;position:absolute;left:120px;width:100px;height:200px;background-color:#8AC007;"></div> <h3>wonderful Text By: Mr.TnT</h3> <div style="letter-spacing:12px;">Ce-scripts.net | Traidnt.net</div> <div style="color:#40B3DF;">Tridnt.net<span style="background-color:#B4009E;color:#ffffff;">Ce-scripts.net</span></div> <div style="color:#000000;">and more...</div> </div> </body> </html>
كود تلوين الخلفية/تلوين خلفية النص
رمز Code:
<!DOCTYPE html> <html> <body style="background-color:yellow;"> <h2 style="background-color:red;">alamakwad.blogspot.com</h2> <p style="background-color:green;">Ce-scripts.net.</p> </body> </html>
كود تلوين النص
رمز Code:
<!DOCTYPE html> <html> <body> <h1 style="font-family:verdana;">alamakwad.blogspot.com</h1> <p style="font-family:arial;color:red;font-size:20px;">Ce-scripts.net.</p> </body> </html>
كود توسيط النص
رمز Code:
<!DOCTYPE html> <html> <body> <h1 style="text-align:center;">By: Mr.hcikchu</h1> </body> </html>
كود وضع نص + صورة تحت النص
رمز Code:
<!DOCTYPE html> <html> <body> <h2>alamakwad.blogspot.com - Ce-scripts.net</h2> <img border="0" src="vb/AGT04-b/head_img/traidnt_logo.png" alt="Pulpit rock" width="304" height="228"> </body> </html>
نكمل إن شاء لله في شروحات آخرى وردود آخرى ...
لا تبخلوا عليّ بردودكم وتشجيعكم لي
ليست هناك تعليقات:
إرسال تعليق