ماهو HTML
الفهرس
قبل البدأ فى تعلم تصميم مشروع html بسيط جاهز يجب اولا معرفة اساسيات لغة الـ HTML وماذا تعني الحروف المختصرة
HTML هو اختصار لـ “HyperText Markup Language”، وهو لغة توصيف للصفحات الويب. يستخدم HTML لترتيب وتنسيق محتوى الصفحات الويب، ويُعتبر أساسيًا في تطوير المواقع والتفاعل مع المتصفحات.
HTML يعتمد على نموذج العلامات (Markup)، حيث يستخدم علامات (tags) لتحديد هيكل الصفحة وتعريف محتوياتها. العلامات تشير إلى أنواع مختلفة من العناصر، مثل الفقرات والصور والروابط والجداول والعناوين، وتوفر للمتصفح تعليمات حول كيفية عرض وتنسيق هذه العناصر.
على سبيل المثال، إليك مثال بسيط على كيفية استخدام HTML لإنشاء صفحة ويب بسيطة:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>عنوان الصفحة</title>
</head>
<body><header>
<h1>عنوان رئيسي للصفحة</h1>
</header><section>
<h2>قسم رئيسي</h2>
<p>هذا هو نص القسم الرئيسي.</p>
<img src=”صورة.jpg” alt=”وصف للصورة”>
<a href=”http://www.example.com”>رابط إلى موقع خارجي</a>
</section><footer>
<p>© 2024 اسم الموقع. جميع الحقوق محفوظة.</p>
</footer></body>
</html>
طريقة انشاء مشروع html بسيط جاهز 2024
سأقدم لك نموذج مبسط لـ إنشاء مشروع HTML بسيط لصفحة ويب HTML تحتوي على هيكل أساسي، قم بنسخ الكود التالي ولصقه في ملف بامتداد .html باستخدام أي محرر نصوص:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>صفحة الويب البسيطة</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 0;
background-color: #f4f4f4;
}header {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}section {
margin: 20px 0;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body><header>
<h1>مشروع HTML بسيط</h1>
</header><section>
<h2>مرحبًا بك في صفحتنا البسيطة</h2>
<p>هذه صفحة ويب بسيطة تمثل مشروع HTML أولي.</p>
</section><footer>
<p>© 2024 – جميع الحقوق محفوظة</p>
</footer></body>
</html>
شرح انشاء رابط بلغة الـ HTML
في HTML، يُستخدم العنصر <a> (الرابط) لإنشاء روابط (Links). لإنشاء رابط، تحتاج إلى استخدام <a> مع خاصية href التي تحدد عنوان URL الذي سيتم الانتقال إليه عند النقر على الرابط.
إليك مثال بسيط على كيفية إنشاء رابط:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>رابط بـ HTML</title>
</head>
<body><h1>صفحة موقعي</h1>
<p>زيارة <a href=”http://www.example.com”>الموقع الرئيسي</a> لمزيد من المعلومات.</p>
</body>
</html>
في هذا المثال، يتم إنشاء رابط إلى “http://www.example.com” داخل العنصر <a>، ويظهر النص الذي يظهر على الصفحة (النص بين علامات <a> و</a>) كرابط. عند النقر على هذا الرابط، سيتم توجيه المتصفح إلى العنوان الذي تم تحديده في خاصية href.