آموزش html و css جلسه 1 معرفی html چیست ؟

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

مفهوم کلی  HTML چیست؟

برای پاسخ به سوال HTML چیست باید یک آشنایی نسبی و ابتدایی با آن داشته باشیم. HTML مخفف عبارت Hyper Text Markup Language هست.

آموزش html و css جلسه اول

اگر بخواهیم یک ترجمه‌ی فارسی از HTML داشته باشیم، میتوانیم به آن «زبان نشانه گذاری فرا متن» بگوییم. البته که این ترجمه، نمیتواند کارایی HTML را به خوبی توضیح دهد به سوال HTML چیست پاسخ خوبی دهد! در ادامه بیشتر با HTML آشنا خواهیم شد.

HTML یک زبان برنامه‌نویسی نیست

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

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

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

اگر بخواهیم خیلی ساده به سوال HTML چیست پاسخ دهیم، میتوانیم بگوییم:

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

اگر دقت کرده باشید توی دمو گفتم،‌ حتما میدانید که طراحی وب ۲ مرحله اصلی دارد:

• ساختاربندی اصلی صفحات وب که با HTML انجام میشود.
• اضافه کردن جذابیت های ظاهری مثل رنگ و… که با CSS انجام میشود.

تاریخچه زبان HTML توضیح بدم

برای اینکه بدانیم HTML از کجا آمده باید سفر کوتاهی به سال 1991 داشته باشیم.
زمانی که آقای Tim Berners-Lee کار خود را روی 18 Tag یا همان برچسب ساده شروع کرد و اولین نسخه HTML را طراحی کرد.
HTML روز به روز پیشرفت کرد و در هر نسخه امکانات بیشتری را در قالب تگ‌ های کاربردی‌تر در اختیار طراحان قرار داد.

به این ترتیب این زبان مشکلات قبلی خود را به مرور رفع کرد.
HTML4 در سال 1999 معرفی شد و توانست تا مدت‌ها توسط طراحان وب مورد استفاده قرار گیرد،
تا این که بزرگترین تحول تاریخ HTML با معرفی HTML5 اتفاق افتاد.
این نسخه از زبان HTML توانست بیش از پیش به توسعه دهندگان در طراحی سایت ها کمک کند که در ادامه آموزش های HTML و CSS آشنا خواهید شد.

یک مثال HTML یک ساختمان را تصور کنید

اگر میخواهید خیلی خوب با HTML آشنا شوید و دقیقا درک کنید که HTML چیست ،
یکی از بهترین مثال‌های آن، مثال یک ساختمان است که میخواهیم آن‌را در این قسمت بررسی کنیم.

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

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

w3c چیست ؟

w3c مخفف کلمه (World Wide Web Consortium) به معنی کنسرسیوم جهانی وب که یک صنعت بین المللی برای حمایت از استعدادهای نهان وب می باشد.
W3C استانداردهاي عملي را توسعه مي دهد تا منجر به بهبود قابليت محصولات و فناوري هاي وب شود.
اعضا و كارشناسان دعوت شده در اين انجمن، نظريه هاي خود را مطرح مي نمايند. پس از آن موافقت سازمان هائي كه نرم افزارهاي وب توليد مي كنند را كسب مي نمايند و پيش نويس هائي را ايجاد مي كنند.

سپس اين پيش نويس ها به اعضاي W3C فرستاده مي شوند تا مورد تصويب رسمي قرار بگيرند.
این کنسرسیوم به مدیریت تیم برنرز لی مخترع وب هدایت میشود و در سال ۱۹۹۴ تاسیس شده است.
w3c دارای بیش از ۴۵۰ عضو سازمانی دارد مانند apple,microsoft,adob و..
و مجموعه اي متنوع از ديگر توليد کنندگان نرم افزار و سخت افزار ، تامين کننده محتوا ، نهادهاي علمي و شرکتهاي ارتباط از راه دور.
کنسرسيوم توسط سه سازمان تحقيقاتي ميزباني ميشود : MIT در آمريکا ، INRIA در اروپا و Keio University در ژاپن. برای مطالعه بیشتر کلیک نمایید

شروع آموزش تگ های html به صورت متنی برای دریافت آموزش به صورت فیلم کلیک فرمایید .

آموزش html عناصر HTML را توضیح بدیم

سندهای HTML به ساختاری از عناصر تو در تو از HTML اشاره دارند.
این عناصر در سند توسط تگ‌های HTML مشخص می‌شوند. مابین تگ آغازین و پایانی می‌توان ترکیبی از تگ‌های مختلف و متن را قرار داد.
برخی از عناصر مانند link break با علامت <br> اجازه تعبیه هیچگونه محتوا، متن یا تگ دیگری را نمی‌دهند.
در صفحات HTML می‌توان عناصر مختلفی مثل عکس، فرم و جدول قرار داد اما برای آن که این عناصر برای مرورگر قابل فهم باشند،
باید از کد و تگ مشخصی استفاده کرد تا مرورگر وقتی به قسمت مشخص شده برای آن عنصر رسید، آن را در صفحات اینترنت نمایش دهد.

دست به کد شو!

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

حالا با ساده ترین ابزار موجود میخوایم کار کنیم. لطفاً دفترچه یادداشت (Notepad) ویندوز رو باز کنین و شروع کنین به نوشتن.

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

فایلی رو که نوشتین با نام index.html رو دسکتاپ ذخیره کنین.
همچنین encoding فایل رو روی UTF-8 قرار بدین تا از زبان فارسی پشتیبانی کنه.
حالا فایلی رو که روی صفحه ایجاد شده باز کنین. خب می بینین که یک صفحه مرورگر باز میشه و توی اون هیچی ننوشته که طبیعی هم هست چون ما هنوز چیز خاصی درست نکردیم.

پیشنمایش کد های نوشته شده 

در تب باز شده تو مرورگرتون میببینین که نوشته index.html مثل تصویر زیر:

آموزش html نرم افزار های مورد نیاز برای کد نویسی

ما توی آموزش html از نرم افزار براکتس یا brackets استفاده میکنم شما هم میتوایند از این ویرایشگر قدرت من و ساده استفاده نمایید لینک دریافت آموزش نصب براکتس

اگر از ویندوز استفاده می‌کنید، نرم افزار notepad برای این منظور در دسترس شما خواهد بود.
ویرایشگرهای کد بسیار زیادی وجود دارند که از این زبان پشتیبانی کرده و یک محیط کدنویسی HTML به حساب می‌آیند.
مثلا Adobe Dreamweaver یا Jetbrain PHPMystorm که جزء محبوب‌ترین ویرایشگرهای کد در طراحی وب هستند.
اگر با ابزارهای برنامه نویسی و طراحی سایت آشنایی ندارید، از لینک زیر میتوانید استفاده نمایید.

نرم افزار های مورد نیاز برای کد نویسی

آموزش html توضیحات کد های بالا

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

• doctype html : این تگ به مرورگر می‌گوید که ما از کدام نسخه HTML استفاده می‌کنیم.
• تگ HTML : تمام تگ های HTML باید داخل این تگ قرار بگیرند تا به عنوان زبان HTML شناخته شوند.
• تگ head : این تگ به عنوان مغز متفکر صفحات وب شناخته می شود و کارهایی مثل تعامل با موتور جستجو، تعامل با فایل‌های CSS و جاوااسکریپت، عنوان صفحه، توضیحات صفحه و غیره را به عهده دارد.
• تگ body : مهم‌ترین تگ HTML است. تمام عناصری که مربوط به ظاهر صفحه هستند باید در این تگ قرار بگیرند. در غیر اینصورت نمایش داده نمی‌شوند.