كيفية جعل موقع على شبكة الانترنت
تعرف على كيفية إنشاء موقع ويب سريع الاستجابة يعمل على جميع الأجهزة وأجهزة الكمبيوتر والكمبيوتر المحمول والكمبيوتر اللوحي والهاتف.
إنشاء موقع على شبكة الإنترنت من سكراتش
"مسودة تخطيط"
قد يكون من الحكمة رسم مسودة تخطيط لتصميم الصفحة قبل إنشاء موقع ويب:
شريط التنقل
المحتوى الجانبي
بعض النص بعض النص ..
المحتوى الرئيسي
بعض النص بعض النص ..
بعض النص بعض النص ..
بعض النص بعض النص ..
تذييل
الخطوة الأولى - صفحة HTML الأساسية
HTML هي لغة الترميز القياسية لإنشاء مواقع الويب و CSS هي اللغة التي تصف نمط مستند HTML. سنقوم بدمج HTML و CSS لإنشاء صفحة ويب أساسية.
ملاحظة: إذا كنت لا تعرف HTML و CSS ، فنحن نقترح أن تبدأ بقراءة دروس HTML الخاصة بنا .
مثال
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta
charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>My Website</h1>
<p>A website created by me.</p>
</body>
</html>
شرح المثال
- يعرّف
<!DOCTYPE html>الإعلان هذا المستند على أنه HTML5 - العنصر
<html>هو العنصر الجذر لصفحة HTML - يحتوي
<head>العنصر على معلومات وصفية حول المستند - يحدد
<title>العنصر عنوانًا للمستند - يجب أن يحدد
<meta>العنصر مجموعة الأحرف لتكون UTF-8 - العنصر
<meta>الذي يحمل الاسم = "viewport" يجعل موقع الويب يبدو جيدًا على جميع الأجهزة ودرجات دقة الشاشة - يحتوي
<style>العنصر على أنماط موقع الويب (تخطيط / تصميم) - يحتوي
<body>العنصر على محتوى الصفحة المرئي - يحدد
<h1>العنصر عنوانًا كبيرًا - يحدد
<p>العنصر فقرة
إنشاء محتوى الصفحة
داخل <body>عنصر موقعنا ، سوف نستخدم "Layout Draft" الخاص بنا وننشئ:
- رأس
- شريط التنقل
- المحتوى الرئيسي
- المحتوى الجانبي
- تذييل
رأس
يوجد رأس الصفحة عادةً في الجزء العلوي من موقع الويب (أو أسفل قائمة التنقل العلوية مباشرةً). غالبًا ما تحتوي على شعار أو اسم موقع الويب:
<div class="header">
<h1>My Website</h1>
<p>A website
created by me.</p>
</div>
ثم نستخدم CSS لتصميم الرأس:
.header {
padding: 80px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c;
/* green background */
color: white; /* white text color */
}
/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
شريط التنقل
يحتوي شريط التنقل على قائمة روابط لمساعدة الزوار في التنقل عبر موقع الويب الخاص بك:
<div class="navbar">
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#">Link</a>
<a href="#" class="right">Link</a>
</div>
استخدم CSS لتصميم شريط التنقل:
/* Style the top navigation bar */
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333;
/* Dark background color */
}
/* Style the navigation bar links */
.navbar
a {
float: left; /* Make sure that the links stay
side-by-side */
display: block; /* Change the display to
block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center;
/* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none;
/* Remove underline */
}
/*
Right-aligned link */
.navbar a.right {
float: right;
/* Float a link to the right */
}
/*
Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black;
/* Black text color */
}
المحتوى
قم بإنشاء تخطيط من عمودين ، مقسم إلى "محتوى جانبي" و "محتوى رئيسي".
<div class="row">
<div class="side">...</div>
<div
class="main">...</div>
</div>
نستخدم CSS Flexbox للتعامل مع التخطيط:
/* Ensure proper sizing */
* {
box-sizing: border-box;
}
/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}
/* Create
two unequal columns that sits next to each other */
/* Sidebar/left column
*/
.side {
flex: 30%; /* Set the width of the sidebar
*/
background-color: #f1f1f1; /* Grey background color
*/
padding: 20px; /* Some padding */
}
/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
ثم أضف استعلامات الوسائط لجعل التخطيط مستجيبًا. سيؤدي هذا إلى التأكد من أن موقع الويب الخاص بك يبدو جيدًا على جميع الأجهزة (أجهزة الكمبيوتر المكتبية وأجهزة الكمبيوتر المحمولة والأجهزة اللوحية والهواتف). تغيير حجم نافذة المتصفح لرؤية النتيجة.
/* Responsive layout - when the screen is less than 700px wide, make the two
columns stack on top of each other instead of next to each other */
@media
screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}
/*
Responsive layout - when the screen is less than 400px wide, make the
navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
نصيحة: لإنشاء نوع مختلف من التخطيط ، ما عليك سوى تغيير العرض المرن (ولكن تأكد من أنه يضيف ما يصل إلى 100٪).
نصيحة: هل تتساءل كيف تعمل قاعدةmedia؟ اقرأ المزيد عنها في فصل CSS Media Queries .
نصيحة: لمعرفة المزيد حول وحدة تخطيط الصندوق المرن ، اقرأ فصل CSS Flexbox الخاص بنا .
ما هو حجم الصندوق؟
يمكنك بسهولة إنشاء ثلاثة صناديق عائمة جنبًا إلى جنب. ومع ذلك ، عندما تضيف شيئًا يوسع عرض كل مربع (مثل الحشو أو الحدود) ، فإن المربع سوف ينكسر. تسمح box-sizingلنا الخاصية بتضمين المساحة المتروكة والحد في العرض الكلي (والارتفاع) للمربع ، مع التأكد من بقاء الحشوة داخل الصندوق وعدم كسرها.
يمكنك قراءة المزيد حول خاصية box-sizing في البرنامج التعليمي CSS Box Sizing .
تذييل
أخيرًا ، سنضيف تذييلًا.
<div class="footer">
<h2>Footer</h2>
</div>
وأسلوبه:
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd;
/* Grey background */
}
تهانينا! لقد قمت بإنشاء موقع ويب سريع الاستجابة من البداية.
مساحات W3Schools
إذا كنت ترغب في إنشاء موقع الويب الخاص بك واستضافة ملفات .html الخاصة بك ، فجرّب أداة إنشاء مواقع الويب المجانية الخاصة بنا ، والتي تسمى W3schools Spaces :
