آموزش HTML به صورت کاربردی

به اولین مرجع ارائه دهنده آموزش HTML به صورت کاملا کاربردی برای وبمستران ، خوش آمدید. با استفاده از آموزش برنامه نویسی HTLM در سایت وبمستر وردپرس، شما در کمتر از ۹ ساعت با کدنویسی HTML آشنا می گردید.

در این آموزش رایگان HTML  سعی شده است تا کلیه نکات مربوط به HTML که مورد نیاز وبمستران می باشد، به صورت خلاصه و کاربردی برای شما دوستان عزیز ارائه گردد.

در این آموزش HTML به زبان ساده، شما با کاربرد ها و نحوه کار کلیه تگ ها در HTML آشنا می گردید. ضمن اینکه می توانید به راحتی کد های HTML را دستکاری نمایید.

آموزش HTML برای وبمستران

صفحه آموزش HTML همواره در حال بروز رسانی می باشد. آخرین مقاله کاربردی اضافه شده به این قسمت، در تاریخ ۷ اردیبهشت ۱۳۹۹ به سایت اضافه شده  است. آموزش HTML رایگان در سایت وبمستر وردپرس در بازه های مختلف آپدیت می شود.

چند نکته کوتاه در مورد بخش آموزش HTML5 برای وبمستران

تصمیم گرفتیم تا به درخواست بازدید کنندگان سایت، بخش مجزایی برای آموزش HTML در نظر بگیریم تا شما وبمستران عزیز به صورت کاربردی با زبان HTML آشنا شوید.

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

در این چند ماه شما با نکات کاربردی برنامه نویسی HTML به صورت خلاصه آشنا خواهید شد تا بتوانید به راحتی از پس بسیاری از مسائل روزمره وبمستری خود که نیاز به کدنویسی HTML دارد، بربیایید.

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

پس از آماده سازی تمامی بخش های آموزش HTML رایگانه ، کتاب آموزش HTML به صورت pdf از این مطالب تهیه خواهد شد و به صورت رایگان قابل دانلود در همین بخش خواهد بود.

برای دریافت آموزش HTML به زبان ساده pdf، می توانید ایمیل خود را در خبرنامه ما  ثبت کنید تا در هنگام آماده شده این کتاب، به صورت رایگان برای شما ایمیل دریافت کتاب ارسال گردد.

تمام هدف ما این است که شما با آموزش تصویری HTML5 رایگان در این سایت،  بتوانید به کدنویسی HTML مسلط شوید. لذا سعی خواهیم کرد تا از انواع مثال ها و کدها استفاده کنیم تا به صورت کاربردی زبان برنامه نویسی HTML را بیاموزید.

نکته: ممکن است به اشتباه به HTML زبان برنامه نویسی گفته شود. در واقع HTML یک زبان نشانه گذاری  برای صفحات وب است. اما به دلیل اینکه اصطلاح برنامه نویسی برای آن رایج است، لذا ما نیز از این اصطلاح استفاده کرده ایم.

چرا آموزش HTML را برای وبمستران فراهم کردیم؟

اصلی ترین دلیل ما برای گذاشتن آموزش HTML رایگان به صورت پروژه محور و کاربردی این بوده است که زبان HTML مبنای تشکیل صفحات وب و رد و بدل اطلاعات بین آن ها می باشد.

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

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

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

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

آموزش کدنویسی HTML

زبان HTML چیست؟

HTML در واقع مخفف عبارت Hyper Text Markup Language می باشد. این یعنی HTML یک زبان نشانه گذاری ابر متن می باشد (این ترجمه فارسی زبان HTML است).

زبان HTML در واقع یک زبان برنامه نویسی نیست، بلکه یک زبان برای نشانه گذاری یا برچسب گذاری یا همان Markup می باشد.

در واقع امکاناتی که یک زبان برنامه نویسی مثل PHP دارد با زبان نشانه گذاری HTML کاملا فرق دارد. مثلا زبان PHP دارای ساختارهای شرطی و کنترلی یا ساختار های منطقی می باشد. در حالی که در زبان نشانه گذاری HTML چنین ساختارهایی وجود ندارد.

در واقع از این نشانه گذاری ها استفاده می شود تا اطلاعات بین دو دستگاه (که با نام Document شناخته می شود) منتقل شده و قابل تفسیر برای انسان ها به صورت بصری باشد.

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

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

حرفه ای ترین و به روزترین مقالات در حوزه وب و برنامه نویسی

اگر می خواهید لیست حرفه ای ترین و به روزترین مقالات در حوزه وب  و برنامه‌نویسی، به ایمیلتان ارسال شود، ایمیل خود را وارد نمایید.

    HTML5 چیست؟

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

    با استفاده از تگ های جدید ارائه شده در HTML5 بسیاری از امکانات مفهومی جدید برای صفحات وب فراهم شده است.

    در HTML5 بسیاری از امکانات HTML با استفاده از قابلیت زبان جاوا اسکریپت می تواند ترکیب شده و امکانات بسیار زیادی را در صفحات وب برای ما به وجود آورد.

    در آموزش رایگان HTML5 برای وبمستران، ما به تمامی این امکانات به صورت کاملا کاربردی و نحوه استفاده از آن ها، اشاره خواهیم کرد.

    آموزش برنامه نویسی HTML برای وبسمتران

    تفاوت HTML5 با سایر نسخه های html مثل HTML4 چیست؟

    در واقع HTML5 یک نسخه کامل تر و استاندارد تر و همین طور بهینه تر برای استفاده در سطح وب می باشد.

    HTML در این سال ها بسیار پیشرفت کرده و قوانین حاکم بر آن کامل تر و استاندارد تر شده است. این باعث شده است که زبان HTML 5  به صورت استاندارد در کل وب توسط همه دستگاه ها و نرم افزار ها شناخته شود و همه از قوانین حاکم بر آن برای نمایش صفحات وب استفاده کنند.

    مدیریت این استانداردها بر عهده گروهی با نام اختصاری W3C می باشد که وظیفه تعیین استاندارد ها در وب و این زبان را عهده دار می باشد.

    توضیح در مورد آموزش های رایگان HTML در سایت وبمستر وردپرس

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

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

    در همین حال، شروع به ساخت چک لیست هایی برای وبمستران کردیم و همین طور سعی کردیم تا مهم ترین نکات آموزش سئو را هم در سایت خود پوشش دهیم.

    در ادامه نیز آموزش PHP را در سایت خود قرار دادیم که این آموزش ها همچنان در حال آپدیت شدن می باشد.

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

    درخواست ما از شما همراهان همیشگی سایت وبمستر وردپرس

    می دانیم که راه بسیار دراز و سختی را برای تکمیل شدن و همین طور آپدیت شدن مطالب به صورت روزانه، در پیش خواهیم داشت، اما می دانیم که در این راه دشوار، نظرات و پیشنهادات شما، هر روز ما به نتیجه بهتر نزدیک تر خواهد کرد.

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

    مشتاقانه منتظر پیشنهادات و انتقادات سازنده شما هستیم تا بتوانیم قوی تر از گذشته به راه خود ادامه داده و این بخش را تکمیل نماییم.

    شما می توانید نظرات خود در پایین همین صفحه برای ما قرار دهید. پیشاپیش از شما همراهان همیشگی، کمال سپاس و تشکر را داریم.

    بخش اول – آشنایی با مقدمات زبان HTML

    معرفی زبان HTML

    معرفی زبان HTML و تاریخچه آن

    در این فیلم آموزشی ابتدا با معرفی زبان HTML آغاز می کنیم.

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

    در ادامه در مورد ساختار صفحات وب که در واقع یک Document با فرم HTML می باشد صحبت خواهیم کرد. در ادامه نیز با بهترین محیط برنامه نویسی HTML آشنا خواهیم شد.

    ساختار کلی تگ ها در HTML

    در این فیلم آموزشی ابتدا با مفهوم تگ در HTML آغاز می کنیم. در ابتدا بررسی می کنیم که تگ در HTML چیست.

    در این فیلم سپس با ساختار تگ  ها در HTML آشنا می شویم. در ادامه می آموزیم که همه تگ های html5 از چه اجزایی تشکیل شده اند.

    در ادامه به بررسی خصوصیات تگ ها در HTML می پردازیم. سپس با تگ های کاربردی در زبان برنامه نویسی HTML آشنا می شویم.

    تگ HTML چیست؟
    فراخوانی CSS در HTML

    فراخوانی CSS در HTML و نحوه استفاده از آن

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

    در ادامه این فیلم چگونگی نحوه اتصال CSS به HTML مطرح می کنیم.

    سپس به بررسی شیوه های مختلف استفاده از CSS در صفحات HTML می پردازیم.

    این آموزش را با بررسی تفاوت بین روش های استفاده از آن به پایان می رسانیم.

    تگ head در HTML

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

    در ادامه این فیلم توضیحاتی در مورد متاتگ title و اهمیت آن خواهیم داد.

    سپس به متا تگ های مهم از جمله متا تگ های سئو، متا تگ دیسکریپشن (description) نیز اشاراتی می کنیم.

    در نهایت با متا تگ viewport و اینکه تگ meta name viewport چه کاربردی دارد، آشنا می شویم.

    تگ head در HTML
    تگ script در HTML چیست

    تگ script در HTML

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

    همچنین با زبان برنامه نویسی جاوا اسکریپت آشنا می شویم.

    در ادامه این فیلم شیوه های فراخوانی js در HTML مطرح می کنیم.

    در نهایت نحوه اتصال جاوا اسکریپت به HTML را بررسی می کینم.

    تگ body در HTML

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

    همچنین با عناصر inline و block آشنا می شویم و تفاوت بین آن ها را نیز بررسی می کنیم.

    در ادامه این فیلم بیان می کنیم که تگ div چیست و چه کاربردی در HTML دارد.

    در نهایت تگ span در HTML را توضیح می دهیم.

    تگ body چیست
    نحوه آدرس دهی در HTML

    آدرس دهی در HTML

    در این فیلم آموزشی ابتدا نحوه آدرس دهی در HTML یا File Path را مورد بررسی قرار می دهیم.

    سپس آدرس دهی نسبی در HTML را توضیح می دهیم. در ادامه آدرس دهی مطلق در HTML را بیان می کنیم.

    همچنین آدرس دهی عکس در HTML را شرح می دهیم. در انتها با آدرس دهی فایل CSS در HTML آشنا می شویم.

    فرمت دهی متن در HTML

    در این فیلم آموزشی ابتدا با فرمت دهی متن در HTML آشنا می شویم. فرمت دهی در HTML نظم خاصی به سایت می بخشد.

    در ادامه این فیلم تگ های heading را معرفی می کنیم. جزو یکی از مهم ترین تگ های سئو می باشد.

    همچنین تگ p درHTML را توضیح می دهیم. همچنین تنظیم متن در html را بیان می کنیم.

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

    فرمت دهی متن در HTML
    id در html و class در html

    id در HTML و class در HTML

    در این فیلم آموزشی ابتدا با مفهوم کلی id و class در HTML آشنا می شویم.

    سپس id در html را توضیح می دهیم و کاربرد id در HTML را به صورت کامل بررسی می کنیم.

    در ادامه این فیلم دستور class در html را معرفی می کنیم. کاربرد class در HTML را مطرح می کنیم.

    همچنین فرق id و class در HTML را با ذکر مثال آنالیز و تحلیل می کنیم.

    رنگ در HTML

    در ابتدای این فیلم آموزشی با دستور و مفهوم رنگ در HTML آشنا می شویم.

    سپس کدهای رنگ در HTML را بیان می کنیم و رنگ متن در HTML را به صورت کامل بررسی می کنیم.

    در ادامه این فیلم تغییر رنگ در html را با مثال و نمونه شرح می دهیم. همچنین کد رنگ RGB و کد رنگ cmyk را تعریف می کنیم.

    رنگ ها در HTML

    سر فصل های دوره آموزش HTML

    • معرفی HTML و نحوه تعامل آن

    • نحوه نشانه گذاری در وب

    • آشنایی با تگ های باز و بسته در HTML

    • محیط های توسعه و کدنویسی و انواع IDE ها

    • بررسی شبیه سازهای محیط سرور بر روی یک ماشین محلی (Local Machine) مانند Xampp و Wamp

    • معرفی استانداردها در HTML

    • آشنایی با المنت های اصلی در یک Document از نوع HTML

    • بررسی متا دیتاها در یک صفحه HTML و کدهای اصلی آن

    • تشریح Start Tag ها و End Tag ها در HTML

    • تعریف HTML entities و نحوه کامنت گذاری در کدهای HTML

    • معرفی متا دیتاها و نحوه معرفی آن ها در یک صفحه HTML

    • آشنایی با تگ های مهم همچون title و description

    • بررسی ساختار link برای معرفی فایل های استایل

    • آشنایی با ساختار CSS

    • چگونگی چیدمان صفحه HTML توسط CSS

    • روش های اضافه کردن فایل CSS به یک فایل HTML

    • معرفی جاوا اسکریپت

    • تعریف تگ Script

    • روش های اضافه کردن فایل js به یک فایل HTML

    • تعریف تگ body در HTML

    • آشنایی با نحوه نمایش المنت های HTML به صورت بلاکی یا خطی

    • تعریف تگ div

    • تعریف تگ span

    • تفاوت بین تگ های div و span

    • آشنایی با نحوه آدرس دهی در HTML یا File Path

    • تعریف آدرس دهی نسبی در HTML

    • معرفی آدرس دهی مطلق در HTML

    • بررسی آدرس دهی عکس در HTML

    • نحوه آدرس دهی فایل CSS در HTML

    • آدرس دهی از طریق تگ a

    • آشنایی با فرمت بندی در HTML

    • تگ heading در HTML

    • آموزش تگ p در HTML

    • تگ های نوشتن متن در HTML

    • معرفی کوتیشن در HTML

    • آشنایی با id در HTML

    • معرفی class در HTML

    • بررسی تفاوت id و class در HTML

    • معرفی انواع رنگ ها در HTML

    • آشنایی با کدهای رنگ در HTML

    • نحوه تغییر رنگ در HTML

    آموزش HTML5 برای وبمستران