طراحی وب با HTML (آموزش کامل با یک مثال گام به گام)

رتبه: 0 ار 0 رای sssss
طراحی سایت
نویسنده: میلاد حیدری زمان مطالعه 8 دقیقه
Banner Image

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

توسعه وب با HTML

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

ایجاد پروژه HTML با ویژوال استودیو کد یا هر ویرایشگر کد دیگری

می ‌توانید ساختن یک وب سایت را با باز کردن ویرایشگر VS Code و ایجاد یک پوشه پروژه جدید با نام “Tutorials” شروع کنید. این پوشه حاوی تمام فایل ‌ها و پوشه‌ هایی که قرار است در این آموزش ایجاد شوند، خواهد بود. بعد در داخل پوشه tutorials با کلیک راست روی پوشه پروژه ‌تان و افزودن یک فایل جدید به نام index.HTML، یک فایل جدید بسازید.

حتما دانلود کنید: آموزش صفر تا صد اچ تی ام ال با 14 درس رایگان

مشاهده سورس کد سند HTML

برای مشاهده کد منبع یک صفحه، ترجیحا مرورگر کروم را باز و از هر وب ‌سایتی دیدن کنید. روی صفحه وب ‌سایت کلیک ‌راست کنید و با پیدا کردن گزینه View Page source سورس کد را ببینید. این کد وب ‌سایت HTML را نشان می ‌دهد.

درک عناصر HTML و استفاده از آن ها

یک سند HTML از دو بخش اصلی، عنوان (Head) و بدنه (Body) تشکیل شده است. هر جزء از یک سند HTML از یک سری تگ های بسته و باز تشکیل شده است، با این حال، برخی از تگ ‌ها به طور پیش ‌فرض خودشان بسته می ‌شوند. نمونه کد زیر را ببینید ، آن را در فایل index.HTML تان ذخیره و در مرورگر مشاهده کنید.

   

   

   

   

   

Hello World

از کد بالا، تگ HTML کل کد وب ‌سایت تان را در خودش جای می ‌دهد. تگ head حاوی تگ ‌های دیگری است که توضیحات بیشتری در مورد وب‌سایت تان می ‌دهند. تگ head حاوی تگ ‌های دیگری هم هست که به ما در بارگیری منابع خارجی کمک می ‌کند.

در نهایت ، تگ body محتوای یک وب ‌سایت را در خودش جای می ‌دهد. 98٪ از تگ‌ ها در HTML در تگ بدنه هستند.

حتما همه تگ های اچ تی ام ال را بلد باشید (لیست کامل در اینجا)

استفاده از عناصر درون خطی و بلوکی در HTML

در سندHTML ، عناصر می ‌توانند درون خط (Inline level) یا درون بلوکی (In-block) ظاهر شوند . عناصر درون خطی به صورت افقی پشت سر هم می‌آیند، در حالی که عناصر بلوکی به صورت عمودی پشت سر هم ظاهر می ‌شوند. نمونه کد زیر را ببینید.

   

       

In-line Elements Example

        These

        Tags

        Appear

        In-line

   

   

       

Block Elements Example

       

These

       

Tags

       

Appear

       

In block

   

تو در تو کردن عناصر HTML

یکی از متد‌ های رایج درHTML ، قرار دادن یک تگ داخل یک تگ دیگر یا Nest‌ کردن است. در واقع تگها در داخل تگ‌های دیگر مثل مادر و فرزندش کنار هم قرار می‌گیرند. مثال زیر را در مورد نحوه Nest کردن در HTML ببینید.

   

List of ingredients

   

           

    • Rice

           

    • Fish

           

    • Cubes

           

    • Onion

       

    استفاده از ویژگی‌ های HTML

    Attribute یا ویژگی ‌ها شما را قادر می ‌سازند تا رفتار های بیشتری را به یک عنصر HTML اضافه یا آن را کنشی ‌تر کنید. این ویژگی ها معمولا از سینتکس زیر پیروی می ‌کند.

    اضافه کردن تصاویر به صفحه وب با استفاده از HTML

    ما از تگ برای درج تصاویر در صفحه HTML استفاده می ‌کنیم. سینتکس را می ‌توان به این صورت بیان کرد.

    تگ کانتینر تصویر است، در حالی که image_url محل منبع تصویر در کل وب است . مثال زیر را ببینید.

        <img

          src=”https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg”

          width=”500px”

        />

    اضافه کردن هایپرلینک در HTML

    هایپرلینک ‌ها رابط و اتصال‌دهنده‌ هایی برای وب هستند. آن ها مسئول وصل کردن یک صفحه به صفحه دیگر و یک صفحه به یک وب ‌سایت می باشند . سینتکس آن به این صورت است:

    Label

    Href به معنای مرجع فرامتنی و مخفف Hypertext Reference است. این ویژگی مسئول تعیین مکانی است که وب ‌سایت شما باید به آن لینک دهد. به عنوان مثال کد زیر را ببینید.

        Visit KnowledgeHut

    حتما دانلود کنید: آموزش طراحی سایت از صفر تا صد (16 درس رایگان)

    استفاده از یک

    یا عنصر تقسیم محتوای HTML

    Divها برای تقسیم ‌بندی عناصر به بخش‌ های مختلف استفاده می‌ شوند. این تگ شما را قادر می‌ سازد تا عناصرتان را در بخش ‌های مختلف گروه‌ بندی و سازماندهی کنید.

    درست مثل هر عنصر دیگری درHTML ، تگ div انواع مختلفی از ویژگی ‌ها را در داخل خودش می ‌پذیرد. مثال زیر را ببینید، جایی که عرض ، ارتفاع و رنگ پس‌زمینه در ویژگی style مشخص شده، تگ div‌ است.

       

          A div text.

       

    اگر فایل را ذخیره و مرورگر را Refresh کنید. یک کادر آبی با ابعاد 300 در 150 پیکسل دریافت خواهید کرد.

    علاوه بر این، عناصر div را می ‌توان در داخل سایر تگ ‌های div قرار داد. مثال زیر را ببینید ، ما یک عنصر div زرد را در یک کانتینر div آبی قرار دادیم.

       

         

       

    بعد از ذخیره فایل، مرورگر را دوباره بارگیری کنید.

    دانلود کنید: آموزش صفر تا صد سی اس اس

    تغییر رنگ عناصر HTML

    تغییر رنگ عناصر HTML به راحتی با مشخص کردن مشخصه رنگ در ویژگی styles امکان ‌پذیر است. این را می ‌توان در تصویر زیر مشاهده کرد.

    This is blue text.

    این کد را در فایل index.HTML تان قرار بدهید و سپس مرورگر را اجرا کنید.

    ویژگی style و border برای تغییر رنگ حاشیه استفاده می‌ شوند.

        <img

          src=”https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg”

          style=”border: 10px solid green;”

        />

    کد بالا را در فایل index.HTML تان قرار دهید و آن را در مرورگر باز کنید تا ببینید کار می ‌کند یا خیر.

    ایجاد پروژه وب ‌سایت HTML

    برای ایجاد یک وب ‌سایت ساده با استفاده ازHTML ، مراحل زیر را انجام دهید:

    • یک پوشه پروژه به نام tutorials ایجاد کنید.
    • یک فایل با نام index.HTML در پروژه HTML ایجاد کنید .
    • کد زیر را داخل فایلindex.HTML تان قرار بدهید و ذخیره کنید.

      <!– codes go in here… –>

    اضافه کردن یک عنصر هد HTML به صفحه ‌وب تان

    تگاطلاعاتی در مورد وب‌سایت تان ارائه می ‌دهد و همچنین منابع خارجی را در وب‌سایت تان بارگذاری می‌ کند. مثال زیر را ببینید.

       

       

    با این که تگابرداده ‌ای را به وب‌سایت تان اضافه می ‌کند، عنوان به صفحه وب شما یک برچسب می‌ دهد.

    اضافه کردن یک فاویکون با HTML به وبسایت تان

    برای پیاده‌ سازی فاویکون (Favicon) یا آیکون سایت در پروژه‌ های توسعه وب تان با استفاده از HTML، اول یک تصویر آیکون شفاف را (ترجیحا به صورت png) دانلود کنید و در پوشه پروژه‌تان قرار بدهید . سپس پسوند تصویر را به .ico تغییر دهید. تصویر زیر نحوه قرار دادن فاویکون در تگرا بیان می‌ کند.

    مرورگرتان را ذخیره و بازخوانی کنید تا فاویکون تان را ببینید.

    استایل‌ دهی به عنصر body HTML

    کد زیر به سادگی رنگ پس‌زمینه کل وب ‌سایت تان را به قرمز تغییر می‌ دهد.

      <!– Code goes in here –>

    بعد از ذخیره فایل، مرورگر را دوباره بارگیری کنید.

    حالا که می ‌دانید چه طور عنصر بدنه در HTML استایل‌ دهی می ‌شود، می‌ توانید خودتان بیشتر تمرین کنید.

    ایجاد بخش بالای صفحه اصلی تان با HTML

    کد زیر نحوه ایجاد یک بخش بالای صفحه ساده درHTML که به عنوان یک ابزار ناوبری عمل می‌ کند را توضیح می ‌دهد.

       

       

       

       

       

         

            Home

            About

            Contact

         

       

    اضافه کردن تصویر پس ‌زمینه به قسمت بالای صفحه وب با HTML

    کد های زیر به شما نشان می ‌دهند که چه طور به سرعت یک تصویر پس ‌زمینه را در قسمت بالای صفحه وب تان اضافه کنید.

       

       

       

       

       

         

            Home

            About

            Contact

         

       

        <div

          style=”

            background-image: url(‘https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg’);

            background-repeat: no-repeat;

            height: 500px;

            width: 100%;

            background-size: cover;

          “

        >

    اضافه کردن یک تصویر نمایه استایل ‌دهی شده به صفحه وب با HTML

    کد زیر یک عکس پروفایل را به تگ هدر اضافه می ‌کند.

       

       

       

       

        <header

          style=”

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 15px 10px;

            box-shadow: 1px 1px 3px #cccccc;

          “

        >

         

            Home

            About

            Contact

         

          <img

            src=”https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg”

            alt= “profile”

            style=”height: 50px; width: 50px; border-radius: 50%; object-fit: cover;”

          />

       

        <div

          style=”

            background-image: url(‘https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg’);

            background-repeat: no-repeat;

            height: 500px;

            width: 100%;

            background-size: cover;

          “

        >

    نتیجه را در صفحه وب تان مشاهده کنید.

    اضافه کردن عنوان و استایل‌ دهی به آن با HTML

    برای استایل‌ دهی درHTML ، فایلindex.HTML تان را با کد زیر تغییر دهید.

       

       

       

       

        <header

          style=”

            display: flex;

            justify-content: space-between;

            align-items: center;

            padding: 15px 10px;

            box-shadow: 1px 1px 3px #cccccc;

          “

        >

         

            Home

            About

            Contact

         

          <img

            src=”https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg”

            alt= “profile”

            style=”

              height: 50px;

              width: 50px;

              border-radius: 50%;

              object-fit: cover;

            “

          />

       

        <div

          style=”

            background-image: url(‘https://images.pexels.com/photos/207983/pexels-photo-207983.jpeg?cs=srgb&dl=pexels-pixabay-207983.jpg&fm=jpg’);

            background-repeat: no-repeat;

            height: 500px;

            width: 100%;

            background-size: cover;

            display: flex;

            justify-content: center;

            align-items: center;

          “

        >

          <h4

            style=”

              color: white;

              font-size: 10rem;

              font-weight: 600;

              background-color: rgba(0, 0, 0, 0.353);

              padding: 10px;

            “

          >

            Hello world

         

       

    با پی اچ پی هم میشه سایت ساخت! روش ساخت سایت با PHP با یک مثال ساده

    برخی از سوالات متداول

    1-چرا توسعه‌ دهندگان وب باید HTML بلد باشند؟

    توسعه‌ دهندگان وب به HTML نیاز دارند زیرا نقطه شروعی برای ساخت یک وب‌ سایت و همین طور تبدیل شدن به یک برنامه ‌نویس وب است.

    2- آیا می ‌توان فقط با HTML و CSS یک وب ‌سایت ساخت؟

    البته! بسیاری از وب ‌سایت ‌های ساده فقط با استفاده از HTML و CSS ایجاد شده ‌اند.

    3- توسعه وب با HTML،CSS ، JS و یا با جنگو (پایتون)؟ کدام موثرتر است و ارزش یادگیری دارد؟

    اگر قصد دارید یک توسعه ‌دهنده فول استک شوید، جاوا اسکریپت بهترین است. اما در کل بهتر است توسعه وب را بیشتر باHTML ، CSS و JS انجام بدهید تا جنگو! علتش این است که برای کار با جنگو ، لازم است بر جاوا اسکریپت هم مسلط باشید.

    4- کدام نرم‌ افزار برای توسعه وب بهترین است؟

    VS Code یا ویژوال استودیو کد بهترین ویرایشگر برای توسعه برنامه‌ ها با چندین زبان برنامه ‌نویسی است. علتش هم استفاده گسترده و حمایت یک جامعه بزرگ از آن است.

    در ادامه بخوانید: طراحی سایت با CSS با 4 درس آموزشی

    profile name
    میلاد حیدری

    بخندید کتاب بخونید و خوب باشید تا جامعه مون به آرامش برسه. لطفا ! هر سوالی دارید در بخش نظرات مطرح کنید. ما یا سایر هموطنان عزیز پاسخ خواهیم داد. برای کمک به سایت ما و گسترش آموزش در بین هموطنان، در سایتها، وبلاگ ها و شبکه های اجتماعی لینک سایت ما را درج کنید.

    مطالب پیشنهادی برای شما

    محصولات مرتبط

    مشاهده همه
    آموزش WordPress به زبان فارسی (جدید)
    آموزش WordPress به زبان فارسی (جدید)
    قیمت محصول 249,000 تومان 269,000
    ادامه مطلب
    آموزش جوملا به زبان فارسی
    آموزش جوملا به زبان فارسی
    قیمت محصول 76,000 تومان 79,000
    ادامه مطلب

    کلاس های آنلاین مرتبط

    مشاهده همه
    سایر مقالات آموزشی
    سایر مقالات آموزشی

    مدرس : حامد رضوانی

    0

    *برای مشاهده قیمت کلاس روی رزرو کلاس آنلاین کلیک کنید*

    رزرو کلاس آنلاین

    دیدگاهتان را بنویسید

    1 2 3 4 5

    0 نظر درباره «طراحی وب با HTML (آموزش کامل با یک مثال گام به گام)»

      هنوز نظری برای این بخش ثبت نشده است
    مشاهده همه نظرات
    سبد خرید
    سبد خرید شما خالی است
    × جهت نصب روی دکمه زیر در گوشی کلیک نمائید
    آی او اس
    سپس در مرحله بعد برروی دکمه "Add To Home Screen" کلیک نمائید