أكواد html جاهزة لتصميم المواقع
Mariam Magdy
·
Posted: 08 Sep, 2024
تعد أكواد html جاهزة لتصميم المواقع خدمة مميزة وموفرة تقدمها بعض شركات البرمجة للعملاء إذ تعتبر لغة HTML اللغة البرمجية المستخدمة في انشاء أو بناء صفحات الويب أو الموقع الالكتروني وتسمى هذه اللغة بلغة توصيف النص الفائق، لكن بناء موقع الويب يحتاج إلى لغات أخرى بجانب لغة HTML التي تستخدم في التعريف بالهيكل الخاص بصفحة الويب وما يعرض عليها من محتوى أو روابط أو فيديوهات أو صور ونصوص، وتقوم شركة البرمجة أو مطوري الويب ببناء أكواد html جاهزة لتصميم المواقع
نماذج أكواد html جاهزة لتصميم المواقع
هذه النماذج قام بإعدادها خبراء في عالم البرمجة وتطوير مواقع الويب على دراية بلغة html وغيرها من اللغات البرمجية الأخرى مثل لغة سي اس اس وجافا سكريبت، وفيما يلي بعض أكواد html جاهزة لتصميم المواقع:
كود نص متحرك
يمكن إدراج نص المتحرك من الأعلى الى الأسفل في الموقع الإلكتروني عن طريق لغة html عبر هذا الكود الجاهز:
<marquee direction=”Down” scrollAmount=”2″> <BR><BR><FONT size=”6″><FONT COLOR=”green”>النص</FONT c></FONT s><BR><BR></marquee><BR><P><BR>
كود عمل اطار للنص
يمكن إدراج إطار للنص عن طريق لغة اتش تي ام ال عبر كود مبرمج وجاهز وهو كالتالي:
"<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 كما يلي:
<P><head><BR><title></title><BR></head><P><BODY onLoad=”alert(‘ نـــــص الـــتـــرحـــيـــب ‘);” onUnload=”alert(‘نـــص الـــــوداع’);” link=”#FFA1000″ vlink=”#FFA1000 alink=”#00FF95″><br><BR><BR><p><BR><br><BR> <center><BR><br><BR><font color=white><BR><br><BR><p><BR><br><P><br><BR><P> <BR><br><P><BR><p>"
كود رسالة وداع للزائر
عند خروج الزائر من الصفحة قد يرى رساله توديع مثل مع السلامة أو في أمان الله أو إلى اللقاء ويمكن كتابة هذه الرسالة عن طريق كود جاهز كالتالي:
"<body onUnload=”window.alert(‘مع السلامة’)”>"
كود لتشغيل الوسائط وملفات الفيديو
وفي إطار الحديث عن أكواد html جاهزة لتصميم المواقع هناك كود خاص لتشغيل الوسائط المتعددة وملفات الفيديو وهو كما يلي:
"<embed SRC=”العنوان” type=”audio/x-pn-realaudio-plugin” CONSOLE=”Clip1″ CONTROLS=”ImageWindow” HEIGHT=”170″ WIDTH=”220″ AUTOSTART=”true” style=”border: 100groove #333333″>"
"<br>"
"<p align=”center”>"
"<br>"
كود إنشاء جدول
يتم كتابة كود إنشاء جدول في الموقع الإلكتروني كما يلي:
"<table>"
"<tr>"
"<td>عنوان الخلية 1</td>"
"<td>عنوان الخلية 2</td>"
"</tr>"
"<tr>"
"<td>المحتوى في الخلية 1</td>"
"<td>المحتوى في الخلية 2</td>"
"</tr>"
"</table>"
كود إنشاء قائمة منسدلة
يتم كتابة كود إنشاء قائمة منسدلة كما يلي:
"<select name=”cars”>"
"<option value=”volvo”>Volvo</option>"
"<option value=”audi”>Audi</option>"
"<option value=”bmw”>BMW</option>"
"</select>"
أكواد html جاهزة لتصميم صفحة ويب
لإنشاء صفحة ويب عبر أكواد html جاهزة اتبع الكود التالي:
"<!DOCTYPE html>"
"<html>"
"<head>"
"<title>مثال تصميم صفحة ويب</title>"
"<meta charset=”UTF-8″>"
"<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>"
"<style>"
"body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}"
"header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}"
"nav {
background-color: #eee;
padding: 10px;
text-align: center;
}"
"nav a {
color: #333;
display: inline-block;
margin: 0 10px;
text-decoration: none;
}"
"main {
margin: 10px;
padding: 10px;
}"
"h1 {
font-size: 36px;
margin-bottom: 20px;
text-align: center;
}"
"p {
line-height: 1.5;
margin-bottom: 20px;
text-align: justify;
}"
"footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}"
"</style>"
"</head>"
"<body>"
"<header>"
"<h1>عنوان الصفحة</h1>"
"</header>"
"<nav>"
"<a href=”#”>الرئيسية</a>"
"<a href=”#”>من نحن</a>"
"<a href=”#”>اتصل بنا</a>"
"</nav>"
"<main>"
"<h2>عنوان الفقرة</h2>"
"<p>هذه هي النص الخاص بالفقرة الأولى في الصفحة. يمكنك إضافة نص آخر هنا إذا كنت تريد.</p>"
"<h2>عنوان آخر لفقرة</h2>"
"<p>هذه هي النص الخاص بالفقرة الثانية في الصفحة. يمكنك إضافة نص آخر هنا إذا كنت تريد.</p>"
"</main>"
"<footer>"
"<p>حقوق الطبع والنشر © 2023</p>"
"</footer>"
"</body>"
"</html>"
إنشاء نموذج أو قالب تسجيل حساب جديد
عن طريق أكواد html الجاهزة يمكنك إنشاء هذا النموذج الذي يسمح للزائر بتسجيل حساب جديد يتضمن اسم المستخدم وكلمة المرور والبريد الإلكتروني الخاص به كالتالي:
"<!DOCTYPE html>"
"<html>"
"<head>"
"<title>تسجيل حساب جديد</title>"
"<meta charset=”UTF-8″>"
"<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>"
"<style>"
"body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f2f2f2;
}"
"form {
background-color: #fff;
margin: 50px auto;
padding: 20px;
max-width: 500px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}"
"h1 {
font-size: 36px;
margin-bottom: 20px;
text-align: center;
color: #333;
}"
"input[type=”text”], input[type=”email”], input[type=”password”] {
display: block;
width: 100%;
margin-bottom: 20px;
padding: 10px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
font-size: 16px;
color: #333;
font-family: Arial, sans-serif;
}"
"input[type=”submit”] {
display: block;
width: 100%;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #333;
color: #fff;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}"
"input[type=”submit”]:hover {
background-color: #555;
}"
</style>
</head>
"<body>"
"<form>"
"<h1>تسجيل حساب جديد</h1>"
"<label for=”name”>الاسم:</label>"
"<input type=”text” id=”name” name=”name” required>"
"<label for=”email”>البريد الإلكتروني:</label>"
"<input type=”email” id=”email” name=”email” required>"
"<label for=”password”>كلمة المرور:</label>"
"<input type=”password” id=”password” name=”password” required>"
"<input type=”submit” value=”إنشاء الحساب”>"
"</form>"
"</body>"
"</html>"
تصميم موقع بلغة HTML و CSS
يحتاج تصميم الموقع الالكتروني إلى خبير في لغات البرمجة المختلفة ولذلك نقدم في كود 95 هذه الخدمة المميزة لعملائنا حيث نوفر له تصميم شامل ومتكامل لموقع الويب بجميع متطلباته من أيقونات تفاعلية وواجهة سلسة للمستخدم والوان متناسقة، كما نوفر استضافة مواقع ونطاق ودعم فني متواصل وللتعرف على المزيد من خدماتنا تفضلوا بزيارة الموقع الرسمي للشركة من هنا.
Posted: 08 Sep ,2024
Mariam Magdy
Read Also
Laying the Foundation: How Code95 is Building Success in the Construction Sector
We Don’t Just Build Apps and Websites — We Create Exceptional Financial Experiences
Code95 Transforming the Automotive Sales Experience
مزايا المتجر
شركة برمجة تطبيقات في جدة
