Hostwinds دروس
نتائج البحث عن:
جدول المحتويات
كيفية إنشاء صفحة مقصودة مخصصة باستخدام HTML و CSS
العلامات: Web Site
سيتعلم هذا الدليل كيفية إنشاء الأساسي "ضمن صفحة هبوط البناء باستخدام HTML و CSS.
لإنشاء صفحة هبوط، ستحتاج إلى الحصول على محرر نصوص، إما أن يتم توفيره في مدير ملفات CPanel الخاص بك، المفكرة ++، أو أي محرر نصوص لاختيارك سيعمل على ما يرام في هذا الدليل.إذا كنت تستخدم لوحة تحكم مثل CPanel، فسوف تضيف هذه الملفات إلى دليل Public_html الخاص بك أو جذر المستند لاسم المجال الخاص بك.إذا كنت لا تستخدم لوحة تحكم، فمن المحتمل أن تضيف الملفات هذه الملفات إلى / var / www / html، على الرغم من أن موقع جذر المستند الخاص بك قد يختلف.
إنشاء ملف الموقع الخاص بك
لنبدأ بإنشاء ملف index.html وافتحه في محرر النصوص.
لماذا الفهرس؟
طريقة إعداد Apache، في مجلد المجال الخاص بك (أو public_html)، فهو يقرأ دليل دليلك مثل index.htm أو index.html أو index.php إذا كانت هذه الملفات موجودة وخدمة هذا الملف كصفحة الصفحة الرئيسية للمجلد.إذا لم يكن هناك أحد هذه الملفات، فسيظهر قائمة فهرس.يمكنك تغيير مؤشر الدليل الخاص بك من خلال ملف .htaccess الخاص بك.
HTML الخاص بك هو بنية صفحة موقع الويب الخاص بك بشكل أساسي، لذلك ستحتاج إلى التأكد من إعدادها بشكل صحيح.
لهذا المثال، ستحتاج إلى تحديد البرنامج النصي HTML، الرأس، والجسم.يمكنك القيام بذلك باستخدام "العلامات" التالية
<html>
<head></head>
<body></body>
</html>
هي كيف نحدد العناصر المختلفة في مستند HTML لدينا وسوف تأتي عموما في أزواج.ستتاح لمعظم العلامات بداية \ <> ونهاية \، لن تحتوي بعض العلامات على العلامات الثانية وسيتم إنهاء ذلك ب /> يسمى هذا "عنصر فارغ"، ويرى أساسا على الروابط والصور.
علامة الرأس
هذا هو المكان الذي تقوم فيه بتخزين البيانات غير المحتوى، مثل بيانات تعريف الموقع، عنوان المستند، مجموعة الأحرف، أنماط مضمنة، وصلات البرنامج النصي، وغيرها من معلومات التعريف.سوف نستخدم علامتين مختلفتين في قسم رأسنا:
علامة العنوان - هذه العلامة سوف تتغير ما يتم عرضه في علامة التبويب
علامة العلامة - هذا هو المكان الذي ستعرف فيه أي نمط خارجي أو برامج نصية.سوف نستخدم هذا لإضافة ورقة أنماط إلى موقعنا
علامة الجسم
هذا هو المكان الذي سيذهب محتوى الموقع الخاص بك.إذا أردنا ذلك، سنكون قادرين على إضافة اختبارات مباشرة.على سبيل المثال، إذا أضفنا "Hello World!"في أتش تي أم أل، سوف تبدو مثل هذا:
<!DOCTYPE html>
<HTML>
<head></head>
<body>Hello World!!</body>
</HTML>
إليك ما ستبدو عليه صفحة الويب بعد إضافة هذا الرمز وزيارة اسم المجال الخاص بك باستخدام متصفحك:
بعد ذلك، دعنا نلغاء ورقة الأنماط في HTML.كما ذكرنا أعلاه، يمكنك إرفاق ورقة قصم عن طريق إضافة ربط ورقة أنماطك إلى رأس مستند HTML الخاص بك.بعد الانتهاء، يجب أن تبدو مثل هذا:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
</body>
</html>
أضف الحاويات والمحتوى
للمساعدة في تنظيم المحتوى الخاص بك بشكل أفضل، يمكنك استخدام العلامات لتحديد كائنات مختلفة مثل الحاويات والصور والأرخصات، وما إلى ذلك. ستدعو هذه العلامات المختلفة لاحقا في ورقة الأنماط الخاصة بك.
لهذا المثال، سوف أستخدم حاوية DIV و \
و \
العلامات.
<!DOCTYPE html>
<html>
<head>
<title>Coming Soon</title>
<link rel="stylesheet" href="css.css"/>
</head>
<body>
<div>
<h1>This Site is Under Construction</h1>
<p>Content Coming December 2018</p>
</div>
</body>
</html>
هذا هو الشكل الذي ستبدو عليه صفحة الويب قبل أن نضيف ورقة الأنماط:
إضافة نمط إلى موقعك
قم بإنشاء وتعديل STYLESHEET 'CSS.CSS'
الآن، دعونا إنشاء ملف .css.هذا يجب أن يتطابق مع اسم الملف أعلاه، لذلك مثالنا هو css.css.يمكنك استدعاء العناصر المختلفة التي تحملها عبر العلامات في مستند HTML الخاص بك في ورقة الأنماط الخاصة بك.
في هذا المثال، لدينا 4 عناصر مختلفة: الجسم، DIV، H1، و P. أدناه، يمكننا أن نرى كيف يمكنك استخدام هذه العلامات لتغيير الخلفية، وتوقفه، وتغيير تحجيم النص. سنقوم أيضا بإظهار كيفية إضافة ظل نص للمساعدة في الوضوح.
هذا ملف CSS.css الخاص بنا:
body {
background-image:url('background-background-image-blue-sky-1054218.jpg');
background-size: 100%, 100%;
}
div {
font-family: verdana;
color:black;
text-align: center;
margin-top:250px;
}
h1{
text-align:center;
font-size: 75px;
margin:0px;
padding:0px;
text-shadow: 2px 1px 1px grey;
}
p{
font-size: 40px;
text-shadow: 1px 1px 3px lightgrey;
}
هناك الكثير من السمات المختلفة التي يمكنك إضافتها إلى ورقة الأنماط الخاصة بك. في هذه المقالة، قمنا فقط بتغطية بعض الخيارات الأساسية.
تتطلب العديد من الخصائص المختلفة بنية مختلفة قليلا اعتمادا على ما يتغير.
اختبر موقعك
الآن يمكنك التحقق من صفحتك الهبوط الجديدة!إذا لم تكن قد أشركت بالفعل إلى نطاقك إلى الاستضافة الخاصة بك، فيمكنك استخدام موقع اختبار مثل Hosts.cx أو عنوان IP المخصص لعرض موقعك.
كتب بواسطة Hostwinds Team / شهر نوفمبر 24, 2018