ورود یا ثبت نام

جلسه ۱۴: ساخت قالب HTML بصورت عملی

4 / 5. تعداد رای: 4

جلسه ۱۴: ساخت قالب HTML بصورت عملی

درود بر شما. بعد از مدت‌ها وقفه، دوباره قصد داریم بپردازیم به آموزش طراحی سایت و علاوه بر دوره آموزش صفر تا صد طراحی سایت، یک دوره رایگان هم داشته باشیم. البته نه با کیفیت دوره صفر تا صد. 😀 پس بریم سراغ جلسه ۱۴ و راهکار‌های عملی برای ساخت قالب HTML که زیبا و جامع باشد. البته در عین حال باید ساده باشد تا بتوانید متوجه چگونگی ساخت قالب شوید. پس شروع می‌کنیم.

آنچه در این مقاله می‌خوانید

ساخت قالب HTML

برای ساخت قالب HTML باید ابتدا یک نرم افزار ادیتور متن نصب کنید. اگر ویندوز استفاده می‌کنید پیشنهاد من استفاده از نرم افزار Notepad++ است و اگر کاربر لینوکس یا مک هستید پیشنهاد می‌کنم از Atom استفاده کنید.

ایجاد فایل HTML

حالا یک فایل به نام index.html بسازید. دقت داشته باشید هاست شما فایل index.html را به عنوان فایل اصلی سایت شما لود خواهد کرد. به همین دلیل نام این فایل را index.html قرار دادیم.

حالا این فایل را با نرم افزار ویرایشگر متن باز کرده و کد زیر را در آن تایپ کنید:

Hello World

حالا اگر مرورگر را باز کرده و این فایل را در مرورگر خود اجرا کنید. (بکشید و رها کنید.) عبارت Hello World نمایش داده می‌شود.

تبریک! حالا شما یک طراح وب هستید. 😀 البته کمی باید صبر داشته باشید. هنوز کار خاصی انجام نشده!

شروع ساخت قالب

برای شروع ساخت قالب HTML باید کد زیر را در این فایل قرار دهید:

<html>
<head>
<title>Page Title</title>
</head>
<body>
Hello World
</body>
</html>

به جای Page Title می‌توانید عنوان صفحه مورد نظر خود را وارد کنید. مثلا : میهن وردپرس

حالا ذخیره کنید و فایل را دوباره با مرورگر باز کنید. مشاهده می‌کنید که کدهای HTML در مرورگر اجرا خواهد شد.

راستی: فراموش نکنید که HTML و CSS زبان برنامه نویسی نیست، بلکه زبان نشانه‌گذاری و استایل‌نویسی است. پس زیاد هم سخت نیست!

در جلسات بعدی استایل دهی و تگ‌های HTML را بصورت عملی به شما آموزش خواهیم داد.

موفق باشید.

Reza Rad
رضا راد

میلیون‌ها کیلومتر اسکرول کردم تا به هدفم نزدیک بشم و این داستان همچنان ادامه داره...

نظر شما در این مورد چیه؟

  1. U16380 ۲۹ تیر ۱۳۹۸

    سلام
    من کد زیر را در تنظمیات قالبم قسمت کد های سفارشی 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

      • U16380 ۳۰ تیر ۱۳۹۸

        سلام
        ممنونم ازتون ولی متوجه نشدم لطفا خواهش میکنم شما که 50 هزار تا پست جواب دادید این یه پست هم کامل آدرس دهی درست بدید که جوری من کد در قرار دادم هر جا خواستم دکمه قرار بدم و جاهای دیگری مثل اون نشه لطفا

        • تیم پشتیبانی تیم پشتیبانی ۳۰ تیر ۱۳۹۸

          ببینید بستگی به قالب سایت شما داره. مثلا یک div به نام comments ساختید. حالا باید اینطوری استایل دهی کنید.
          .comments .button{style}

  2. کاربر مهمان ۲۳ خرداد ۱۳۹۸

    سلام خسته نباشید میخاستم برای طراحی سایت و استفاده از دوره های شما نیازی به لینوکس هست؟ یا اینکه با ویندوزم میشه کار کرد؟