آموزشها
قالبها
افزونهها
سایت برتر
هاست وردپرس
طراحی سایت
تولزیناجلسه ۱۴: ساخت قالب HTML بصورت عملی
- مقالات آموزشی
- بروزرسانی شده در
خب سلام رفقا! راستش بعد از یه مدت طولانی که غیبمون زد، دوباره برگشتیم که بریم سراغ آموزش طراحی سایت. این دفعه تصمیم گرفتیم علاوه بر دوره صفر تا صد طراحی سایت، یه دوره رایگان هم کنارش داشته باشیم. حالا نگید چرا رایگان؟ 😀 قبول دارم که کیفیتش قد اون دوره اصلی نمیشه، ولی بهت قول میدم که آخرش دستت میاد قضیه از چه قراره.
پس معطل نکنیم و بریم سراغ جلسه ۱۴. قراره با هم یه قالب HTML بسازیم؛ هم قشنگ باشه، هم جامع، ولی مهم‌تر از همه ساده باشه که تو راحت بفهمی داری چیکار می‌کنی. آماده‌ای؟ بزن بریم.
آنچه در این مقاله می‌خوانید
نصب ویرایشگر متن
قبل از هر کاری باید یه نرم‌افزار ویرایشگر متن نصب کنی. حالا نگو مگه با Notepad خود ویندوز نمیشه؟ چرا میشه، ولی خیلی حال نمیده. من بهت پیشنهاد میکنم:
- اگه ویندوز داری، برو سراغ Notepad++. سبکه، سریعه و مخصوص همین کاراست.
- اگه کاربر لینوکس یا مک هستی، Atom گزینه خوبیه.
خلاصه فرقی نداره کدومو انتخاب کنی، فقط یه ادیتور درست‌وحسابی داشته باش که کارمون راه بیفته.
ساخت فایل index.html
حالا یه فایل بساز به اسم index.html. یه نکته مهم بگم که یادت نره: هاست تو، همیشه فایل index.html رو به عنوان صفحه اصلی سایتت لود می‌کنه. یعنی اولین چیزی که کاربر می‌بینه همینه. برای همینم اسمشو گذاشتیم index. پس این اسم رو الکی انتخاب نکردیم، یه دلیل داشت.
فایل رو با همون ویرایشگری که نصب کردی باز کن و این خط ساده رو توش تایپ کن:
Hello Worldحالا مرورگرتو باز کن و این فایل رو بکش و بندازش توش (drag & drop). اگه همه‌چی درست باشه، عبارت Hello World برات نمایش داده میشه.
تبریک میگم! حالا تو یه طراح وبی. 😀 خب… راستش نه هنوز. یه کوچولو صبر کن، هنوز کار خاصی نکردیم. این فقط یه گرم‌کردن بود.
چیدن اسکلت اصلی قالب
اینجاست که کار جدی میشه. برای اینکه واقعاً یه قالب HTML داشته باشیم، باید کد زیر رو تو همون فایل بذاری:
html
<html>
<head>
<title>Page Title</title>
</head>
<body>
Hello World
</body>
</html>حالا اون قسمت Page Title رو می‌بینی؟ اونجا رو می‌تونی عنوان دلخواه صفحه‌تو بنویسی. مثلاً بنویس: میهن وردپرس. این همون چیزیه که بالای تب مرورگر نشون داده میشه.
فایلو ذخیره کن و دوباره با مرورگر بازش کن. می‌بینی که این دفعه کدهای HTML واقعاً اجرا میشن و مرورگر داره اونا رو می‌خونه. تازه داریم وارد دنیای واقعی میشیم.
یه نکته ظاهرا ترسناک
بذار همینجا یه چیزی رو صاف بگم که خیالت راحت شه: HTML و CSS اصلاً زبان برنامه‌نویسی نیستن! اینا زبان نشانه‌گذاری و استایل‌نویسی‌ان. یعنی چی؟ یعنی تو با اینا داری به مرورگر میگی همین. پس اگه از کلمه «برنامه‌نویسی» می‌ترسیدی، دیگه لازم نیست. اونقدرام که فکر می‌کنی سخت نیست.
جمع‌بندی
خب تا اینجا یاد گرفتی چطوری اولین فایل HTML رو بسازی، اسکلت اصلی یه قالب رو بچینی و عنوان صفحه رو تنظیم کنی. اینا پایه‌ی همه‌چیزه.
از جلسه بعد میریم سراغ قسمت هیجان‌انگیزش، یعنی استایل‌دهی و تگ‌های HTML رو کاملاً عملی بهت آموزش میدیم. پس همراهمون بمون که کم‌کم قراره این صفحه ساده رو تبدیل کنیم به یه سایت درست‌وحسابی.
موفق باشی رفیق. 🙌
سلام
من کد زیر را در تنظمیات قالبم قسمت کد های سفارشی CSS قرار دادم
.archive, input[type=”submit”], form button, .wp-block-button a {
background-image: linear-gradient(125deg, rgb(30, 136, 229), rgb(94, 53, 177));
background-color: rgb(94, 53, 177);
box-shadow: rgba(171, 71, 188, 0.376) 0px 5px 15px;
display: block;
line-height: 45px;
transition-duration: 0.2s;
width: 35%;
font-size: 15px;
font-weight: 200;
text-align: center;
color: rgb(255, 255, 255) !important;
border-width: initial !important;
border-style: none !important;
border-color: initial !important;
border-image: initial !important;
border-radius: 50px !important;
margin: 20px auto !important;
}
و حالا اون دکمه در نوشته به خوبی و همونی هست که می خواستم اما یه مشکل هست مشاهده تصویر زیر کنید:
http://s8.picofile.com/file/8367241784/bandicam_2019_07_20_14_51_42_131.jpg
این کد اومده دکمه ارسال دیدگاه، افزودن به سبد خرید و دکمه ارسال دیدگاه به صفحه محصول را گرد کرده و دکمه ارسال دیدگاه همین طوری کرده باید چی کار کنم تا اینطوری نشه؟
http://s8.picofile.com/file/8367241784/bandicam_2019_07_20_14_51_42_131.jpg
سلام برای حل این مشکل شما باید استایل رو دقیق تر ادرس دهی کنید مثلا comments .button
سلام
ممنونم ازتون ولی متوجه نشدم لطفا خواهش میکنم شما که 50 هزار تا پست جواب دادید این یه پست هم کامل آدرس دهی درست بدید که جوری من کد در قرار دادم هر جا خواستم دکمه قرار بدم و جاهای دیگری مثل اون نشه لطفا
ببینید بستگی به قالب سایت شما داره. مثلا یک div به نام comments ساختید. حالا باید اینطوری استایل دهی کنید.
.comments .button{style}
سلام خسته نباشید میخاستم برای طراحی سایت و استفاده از دوره های شما نیازی به لینوکس هست؟ یا اینکه با ویندوزم میشه کار کرد؟
سلام سپاس از شما. خیر نیازی نیست با ویندوز هم میشه.