tejariapp-new-logotejariapp-new-logotejariapp-new-logotejariapp-new-logo
  • صفحه اصلی
  • پروژه ها
    • پروژه طراحی سایت
    • پروژه های اندروید
    • پروژه های تحت ویندوز
    • UI & UX
    • ربات تلگرام
  • سفارش پروژه
    • انجام پروژه اندروید (Android)
    • طراحی و ساخت اپلیکیشن موبایل
    • انجام پروژه طراحی سایت با php
    • انجام پروژه طراحی سایت با Asp.net
    • انجام پروژه سی شارپ
    • فرم سفارش پروژه
  • مدرسه ی تجاری اپ
    • طراحی سایت
    • اندروید
    • سی شارپ
    • آموزش پایگاه داده
    • برنامه های کاربردی
  • لینک های مفید
    • پرداخت آنلاین
    • درباره تجاری اپ
    • تماس با ما
استخدام برنامه نویس متلب
سفارش پروژه
✕
            هیچ نتیجه ای یافت نشدمشاهده همه نتایج

            آموزش HTML | مبانی و مفاهیم پایه HTML

            • صفحه نخست
            • مدرسه ی تجاری اپ آموزش طراحی سایت
            • آموزش HTML | مبانی و مفاهیم پایه HTML
            آموزش HTML | ساخت اولین صفحه وب و چاپ Hello World
            آموزش HTML | ساخت اولین صفحه وب و چاپ Hello World
            21 مهر 1400
            انواع متغیر ها در زبان برنامه نویسی دارت Dart برای فریم ورک فلاتر
            انواع متغیر ها در زبان برنامه نویسی دارت (Dart) برای فلاتر
            5 دی 1400
            منتشر شده توسط مدیر سایت
            آموزش HTML | مبانی و مفاهیم پایه HTML

            آموزش HTML | مبانی و مفاهیم پایه HTML

            آموزش HTML ، مبانی و مفاهیم پایه HTML. در قسمت قبل، اولین صفحه وب خود را ایجاد کردیم. و همچنین متن ” Hello World! ” را روی صفحه نمایش چاپ کردیم. در این پست، بسیاری از موارد اساسی مورد نیاز برای نوشتن کدهای HTML را مرور می کنیم. تگ های مختلفی وجود دارد که هنگام شروع کد نویسی با HTML باید آنها را در نظر بگیریم و بدانیم. این تگ ها به سازماندهی و قالب بندی اولیه عناصر در اسکریپت یا صفحات وب ما کمک می کند.

            مبانی و مفاهیم پایه HTML

            همانطور که در ابتدا گفته شد، در این قسمت از آموزش HTML به توضیح بسیاری از موارد اساسی یا به عبارتی مبانی و مفاهیم پایه HTML مورد نیاز برای نوشتن کدهای HTML می پردازیم.

            پاراگراف در HTML (تگ p‌ در HTML )

            این تگ ها به ما کمک می کند تا دستورات پاراگراف را در یک صفحه وب بنویسیم. پاراگراف ها با تگ <p> شروع و با </p> خاتمه می یابند. و همچنین تگ <br> برای شکستن خط جاری و رفتن به خط جدید استفاده می شود.<br> یک تگ خالی (empty) است.

            <!DOCTYPE html>
            
            <html dir="rtl">
                <head>
                    <title>
                        آموزش طراحی سایت با HTML و CSS | وب سایت تجاری اپ
                    </title>
                </head>
            
                <body>
                    <h1>پاراگراف در HTML</h1>
                    <p>
                        آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
                        آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
                        آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
                    </p>
                </body>
            </html>
            
            

            خروجی: هنگام باز کردن فایل در مرورگر، خروجی زیر را مشاهده خواهید کرد.

            پاراگراف در HTML (تگ p‌ در HTML )
            پاراگراف در HTML

            مبانی پایه HTML: خطوط افقی در HTML (تگ hr در HTML )

            تگ <hr> برای شکستن صفحه (تقسیم صفحه) به قسمت های مختلف استفاده می شود. و با کمک یک خط افقی از سمت چپ به راست صفحه، حاشیه های افقی (خطوط افقی) ایجاد می کند. این تگ نیز مانند تگ <br> یک تگ خالی (empty) می باشد.

            مثال:

            <!DOCTYPE html>
            
            <html dir="rtl">
                <head>
                    <title>
                        آموزش طراحی سایت با HTML و CSS | وب سایت تجاری اپ
                    </title>
                </head>
            
                <body>
                    <h1>ایجاد خطوط افقی در HTML</h1>
                    <p>
                        آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
                        آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
                        آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
                    </p>
                    
                    <hr>
            
                    <p>
                        آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
                        آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
                        آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
                    </p>
                    
                    <hr>
                    <p>
                        آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
                        آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
                        آموزش طراحی سایت با HTML و CSS در وب سایت تجاری اپ<br>
                    </p>
            
                </body>
            </html>
            

            خروجی:

            مبانی و مفاهیم پایه HTML
            آموزش HTML

            تصاویر در HTML (تگ img در HTML )

            از تگ <img> برای قرار دادن تصویر در صفحه وب خود استفاده می کنیم. منبع یا سورس تصویری که قرار است به صفحه وب ما اضافه شود در داخل تگ <img src = ”source_of_image”> قرار  می گیرد.

            مثال:

            <!DOCTYPE html>
            
            <html dir="rtl">
            <head>
                <title>آموزش طراحی سایت با HTML و CSS | وب سایت تجاری اپ</title>
            </head>
            <body>
                <h1>تصاویر در HTML</h1>
                <img src="https://www.tejariapp.com/wp-content/uploads/tejariapp-new-logo.png">
            </body>
            </html>
            

            خروجی:

            مبانی و مفاهیم پایه HTML - تصاویر در HTML
            تصاویر در HTML

            لینک ها یا پیوندها در HTML (تگ a در HTML )

            از لینک ها یا پیوندها تقریباً در همه صفحات وب استفاده می شود. لینک ها به کاربران این امکان را می دهند که با کلیک کردن بر روی آنها از صفحه ای به صفحه دیگر بروند. (صفحه ای از سایتی که در آن هستند یا صفحه ای از سایتی دیگر)
            لینک های HTML، هایپرلینک هستند. می توانید روی یک لینک کلیک کنید و به صفحه دیگری بروید. هنگامی که ماوس را روی یک لینک حرکت می دهید، فلش ماوس به یک دست کوچک تبدیل می شود. توجه داشته باشید که لازم نیست لینک حتما متنی باشد. یک لینک می تواند یک تصویر یا هر عنصر HTML دیگری باشد. سینتکس لینک در HTML به این صورت می باشد :

            <a href="url">متن لینک</a>
            

            مهمترین مشخصه یا ویژگی (Attribute) عنصر <a> ویژگی href است که مقصد لینک را نشان می دهد. متن لینک، بخشی است که برای کاربر قابل مشاهده خواهد بود. با کلیک بر روی متن لینک، کاربر به آدرس URL مشخص شده هدایت می شود.

            مثال:

            <a href="https://www.tejariapp.com/">مشاهده تجاری اپ</a>
            

            جدول در HTML

            یک جدول در HTML از سلول های جدول در داخل سطرها و ستون ها تشکیل شده است. از تگ table برای ایجاد در صفحه وب خود استفاده می کنیم. هر جدول شامل سربرگ جدول (Table Header)، ردیف ها (Rows) و ستون های اطلاعات می باشد. سربرگ هر جدول، که عنوان مربوط به هر ستون را در آن قرار می دهیم را با تگ th تعریف می کنیم. ردیف ها یا سطرهای هر جدول را با تگ tr ایجاد می کنیم. و همچنین در نهایت سلول های اطلاعات را با تگ td تعریف می کنیم.

            مثال:

            <!DOCTYPE html>
            <html dir="rtl">
            <style>
            table, th, td 
            {
              border:1px solid black;
            }
            </style>
            <body>
            
            <table style="width:100%">
              <tr>
                <th>نام</th>
                <th>نام خانوادگی</th>
                <th>سن</th>
              </tr>
              <tr>
                <td>مهسا</td>
                <td>رضایی</td>
                <td>25</td>
              </tr>
              <tr>
                <td>علی</td>
                <td>محمدی</td>
                <td>38</td>
              </tr>
            </table>
            
            </body>
            </html>
            

            خروجی:

            مبانی و مفاهیم پایه HTML - جدول در HTML
            جدول در HTML

            همچنین بخوانید: تگ های معنایی یا semantic Tags در HTML5

            مبانی پایه HTML: مشخصه یا ویژگی ها (Attributes) در HTML

            یک مشخصه برای ارائه اطلاعات اضافی در مورد یک عنصر استفاده می شود.

            • همه عناصر HTML می توانند مشخصه (attribute) داشته باشند. مشخصه ها اطلاعات اضافی را در مورد یک عنصر ارائه می دهند.
            • همه مشخصه ها (attribute) دو پارامتر دارند: نام (name) و مقدار (value). مشخصه ها برای تعریف ویژگی های یک عنصر HTML استفاده می شود و داخل “تگ باز شده یا تگ آغازین” المنت قرار می گیرد. پارامتر name نام خاصیتی را که می خواهیم به عنصر اختصاص دهیم، می گیرد. و value مقداری است که برای صفت (property) تعیین می شود.
            • مقدار (value) چیزی است که مقدار صفت را تعیین می کند و همیشه در علامت نقل قول قرار می گیرد.

            توضیحات یا (Comments) در HTML

            برای درج توضیحات در کد HTML استفاده می شود. استفاده از توضیحات، به ویژه در کدهای پیچیده، بهترین روش برنامه نویسی است تا برنامه نویس و خواننده بتوانند برای درک کدها از این توضیحات کمک بگیرند.

            • کامنت ها، فقط یک قطعه کد هستند که توسط مرورگر های وب نادیده گرفته می‌شوند. به عبارت دیگر توسط مرورگر نمایش داده نمی شود.
            • کامنت‌ها به برنامه نویسان و کسانی که کد را می خوانند کمک می کنند تا کدهایی که نوشته شده است، مخصوصا کدهای پیچیده را درک کنند.
            • کامنت ها همچنین برای غیرفعال کردن بخشی از کدها نیز استفاده می شود.

            سینتکس کامنت در HTML :

            <!-- Write your comments here -->
            

            مثال:

            <!DOCTYPE html>
            
            <html dir="rtl">
            <head>
                <title>آموزش طراحی سایت با HTML و CSS | وب سایت تجاری اپ</title>
            </head>
            <body>
            
                <!-- there is a comment -->
                
                <p>آموزش کامنت در HTML</p>
            
            </body>
            </html>
            
            

            خروجی:

            توضیحات یا (Comments) در HTML
            توضیحات در HTML

            لیست ها (Lists) در HTML

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

            • یک لیست خرید
            • لیست انجام کارها
            • و …

            HTML سه روش برای نمایش لیست اطلاعات ارائه می دهد. انواع لیست هایی که می توان در HTML استفاده کرد عبارتند از:

            لیست بدون ترتیب (ul): این نوع لیست تعدادی آیتم‌های مرتبط و بدون ترتیب را به صورت پیش فرض با دایره های توپر لیست می کند. که البته این دایره های توپر قابل تغییر و سفارشی سازی هستند.

            لیست مرتب (ol): این نوع لیست تعدادی آیتم‌های مرتبط را با استفاده از طرح های مختلف اعداد و حروف الفبا و به صورت مرتب لیست می کند.

            لیست توضیحی (dl): dl از کلمه ( Description List ) گرفته شده است. این نوع لیست از نام/مقدار تشکیل شده است. و برای توضیح بخش هایی مانند اصطلاحات و تعاریف استفاده می شود.

            مثال لیست نامرتب:

            <!DOCTYPE html>
            <html dir="rtl">
            <body>
            
            <h2>یک لیست HTML نامرتب</h2>
            
            <ul>
              <li>HTML</li>
              <li>CSS</li>
              <li>JavaScript</li>
            </ul>  
            
            </body>
            </html>
            

            خروجی:

            لیست نامرتب در HTML
            لیست نامرتب در HTML

            مثال لیست مرتب:

            <!DOCTYPE html>
            <html dir="rtl">
            <body>
            
            <h2>یک لیست HTML مرتب </h2>
            
            <ol>
              <li>HTML</li>
              <li>CSS</li>
              <li>JavaScript</li>
            </ol>  
            
            </body>
            </html>
            

            خروجی:

            لیست مرتب در HTML
            لیست مرتب در HTML

            مثال لیست توضیحی:

            <!DOCTYPE html>
            <html dir="rtl">
            <body>
            
            <h2>لیست توضیحی</h2>
            
            <dl>
              <dt>HTML</dt>
              <dd>- یک توضیح در مورد HTML</dd>
              <dt>CSS</dt>
              <dd>- یک توضیح در مورد CSS</dd>
              <dt>JavaScript</dt>
              <dd>- یک توضیح در مورد JavaScript</dd>
            </dl>
            
            </body>
            </html>
            

            خروجی:

             لیست توضیحی در HTML
            لیست توضیحی در HTML

            در این قسمت به مبانی و مفاهیم پایه HTML پرداختیم. امیدواریم این آموزش برای شما مفید بوده باشد. قسمت های قبلی و بعدی این آموزش ها را در پایین می توانید مشاهده کنید.

            سرفصل های آموزش طراحی یک وب سایت ساده با HTML و CSS

            1. مقدمه: آموزش طراحی یک وب سایت ساده با HTML و CSS
            2. ساختار یک صفحه یا سند HTML
            3. ساخت اولین صفحه وب و چاپ Hello World
            4. مبانی و مفاهیم پایه HTML
            اشتراک گذاری

            پست های مرتبط

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            دستورات جریان کنترل (Control flow statements) یا دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت Dart

            30 بهمن 1400

            دستورات شرطی و حلقه ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت یا Dart

            30 بهمن 1400

            آموزش عملگرها یا Operator ها در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب
            توابع در زبان برنامه نویسی دارت (Dart)

            توابع در زبان برنامه نویسی دارت (Dart)

            27 بهمن 1400

            توابع در زبان برنامه نویسی دارت (Dart)


            ادامه مطلب

            دیدگاهتان را بنویسید لغو پاسخ

            نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

            ساخت اپلیکیشن های موبایل

            • ساخت اپلیکیشن فروشگاهی
            • ساخت اپلیکشن ابزاری و خدماتی
            • ساخت اپلیکیشن آموزشی
            • و هزاران موضوع دیگر

             
            کلیک کنید

            آخرین دیدگاه ها

            • 7 خرداد 1401

              داودی نظر در آموزش استفاده از ckeditor همراه با آپلود عکس در لاراول 6

            • 6 فروردین 1401

              yasaman نظر در راست چین کردن متن در فیگما Figma

            • 3 فروردین 1401

              رضا نظر در مفاهیم Observable و Observer در RxJava

            تجاری اپ در شبکه های اجتماعی

            لوگوی تایید پرداخت آنلاین

            2015-2022 © تمامي حقوق مادي و معنوي اين وب سايت نزد تجاری اپ محفوظ بوده و هر گونه کپي برداري از مطالب پيگرد قانوني به همراه دارد! | طراح سایت : ProgRun
            سفارش پروژه
                      هیچ نتیجه ای یافت نشدمشاهده همه نتایج