آموزش HTML : قسمت اول

آموزش HTML : قسمت اول

به اولین قسمت از دوره آموزش html خوش آمدید در این قسمت قصد داریم با هم یاد بگیریم که : HTML چیه ؟ کاربرد اون چیه , چه معنی میده , در چه مواردی استفاده میشه , چه پیش نیاز هایی داره , و از کجا شروع کنیم؟ و با همدیگه چند تا تگ اولیه و خیلی ساده یاد بگیریم

اول از هرچیزی باید بدونین html زبان برنامه نویسی نیست ! HTML مخفف کلمات Hyper Text Markup Language می باشد HTML یک زبان نشانه گذاری می باشد که برای معرفی اجزای صفحات وب به مرورگر ها نظیر (Firefox , Chrome) استفاده می شود

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

HTML5 چیست؟

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

پیشنهاد می شود بخوانید : تفاوت HTML و CSS و JavaScript در طراحی سایت

پیش نیاز های html

  • صبر و حوصله
  • اینترنت مناسب
  • یک ویرایشگر متن ( vim , nano , notepad ) یا ویرایشگر های مدرن مثل : VScode , Sublime text و…
  • آشنایی اولیه با مبانی نرم افزار
آموزش تغییر توزیع لینوکسی
مشاهده

ساخت فایل HTML

در اولین قدم باید یک سند HTML ایجاد کنیم برای این کار اول یکی از این ویرایشگرهای متن را انتخاب کنید آن را اجرا کنید

سپس برروی گزینه New File کلیک کنید و در قسمت نام پرونده نام : Index.html را قرار دهید

دقت داشته باشید صفحه اصلی تمام صفحات وب با نام Index ذخیره می شوند و فرمت تمامی صفحات html بصورت .html ذخیره می شوند

به عنوان مثال : اگر قصد دارید صفحه ای برای تماس با ما بسازید باید نام آن را contact.html بزارید

آموزش HTML : قسمت اول

 

حالا قطعه کد زیر را Copy و در فایل index.html آن را Paste کنید

<!DOCTYPE html>
<html>
    <head>
        <title>Preshka</title>
    </head>
    <body>
    
    </body>
</html>

خب حالا باید خط به خط این کد رو بررسی کنیم

اولین کدی که ما دیدیم

<!doctype html>

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

در HTML یک قانون خیلی مهم است که اگه آن را درک کنید مشکلی نخواهید داشت ! هر تگ HTML یک بار باز می شود و باید یک بار بسته شود

<TagName> Content </TagName>

به دستور بالا توجه کنید تگ <tagname> ایجاد شده است و با <tagname/> بسته شده است !

پس دقت کنید هر وقت بخواهیم یک تگ را ببندیم از علامت / در ابتدا تگ استفاده می کنیم  البته نوعی تگ ها هم هستند که بسته نمی شوند به این تگ‌ها Self Closing می‌گویند. در ادامه مطالب با این نوع تگ‌ها نیز آشنا خواهیم شد.

کانفیگ و کاوش کرنل لینوکس – قسمت پنجم
مشاهده

خب بیاید دوباره کد را بررسی کنیم

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

این کد از ۴ تگ تشکیل شده است  که به ترتیب باید بررسی کنیم

Html

تمام تگ های html شما باید بین <html> <html/> قرار بگیرند و نباید خارج از این محدوده باشند تا توسط مرورگر شناسایی بشن

Head

هر تگی که داخل تگ <head> <head/> قرار بگید توسط مرورگر به کاربر نمایش داده نمی شود و تنها توسط مرورگر مشاهده می شود و هیچ محتوا بصری در این تگ قرار نمی گیرد

Title

این تگ منحصرا باید در داخل <head> و </head> استفاده شود. محتوای بین این دو تگ، عنوان وبسایت را مشخص کرده و روی تب‌های مرورگر قرار می‌دهد.

Body

این تگ بسیار مهم هست هر تگی که داخل تگ <body> </body> قرار بگیرد به کاربر نمایش داده می شود دقیقا بر خلاف head ما تمام محتویات بصری و قابل مشاهده را که می خواهیم به کاربر نمایش بدیم در این تگ قرار می دهیم پس کار اصلی ما در این دوره پرداختن به این تگ و محتوای میان آن است.

در قسمت دوم تگ های H1 و br و hr و p را بررسی می کنیم

مقاله های مرتبط :

دیدگاه خود را بیان کنید :

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