آموزش HTML
آموزش HTML
در دوره آموزش HTML قرار است الفبای طراحی وب سایت را به صورت اصولی و صفر تا صد یاد بگیرید. چرا از کلمه الفبا استفاده می کنم؟ چون شما از هر روشی که قرار باشه سایت طراحی کنید، باید یکسری مباحث مثل همین HTML رو بخوبی آموزش دیده باشین! قبل از اینکه به صورت جدی بریم سراغ آموزش HTML بهتر هست که یک سری مقدمات و اصطلاحات رو بدونین. پس اگر آماده هستین شروع کنیم!
HTML این امکان را به شما می دهد که ساختار اصلی یک صفحه اینترنتی را با استفاده از Tag (تگ) های مختلف طراحی کنید. به عنوان مثال در شکل زیر یک شِمای کلی از یک صفحه اینترنتی را مشاهده می کنید که با استفاده از چند تگ مختلف طراحی شده است:
بنابراین می توان گفت HTML با استفاده از مجموعه ای از تگ ها برای ساخت رابط گرافیکی صفحات اینترنتی استفاده می شود.
پس CSS این وسط چیکارس؟
البته ذکر این نکته الزامی است که معمولا از HTML و CSS در کنار یکدیگر برای ساخت رابط گرافیکی صفحات اینترنتی استفاده می شود. ولی تفاوت این دو در چی هست؟
فرض کنید ایشون جناب HTML هستند:
و ایشون هم جناب CSS:
اگر یک صفحه اینترنتی رو یک ساختمان در نظر بگیریم، از HTML برای ساخت اسکلت و از CSS برای انجام ظریف کاریهاش استفاده میشه.
برای اینکه منظورم رو بهتر متوجه بشین، سایت کد آکادمی رو واستون مثال می زنم. این حالتی هست که صفحه اصلی سایت داره به کمک هم HTML و هم CSS نمایش داده میشه:
همانطور که میبینید همه چیز به خوبی داره نمایش داده میشه. ولی حالا اگر به کمک یه افزونه فایرفاکس، CSS این صفحه رو غیر فعال کنم، یعنی روی حالتی که فقط HTML این صفحه فعال هست و CSS رو غیر فعال کرده باشم، یه چیزی به این صورت در میاد!
این چیزی که در این شکل میبینید فقط یک سری تگ HTML است. در واقع این شکل خروجی یکسری تگ HTML است.
پس نتیجه اینکه:
HTML با استفاده از یک سری تگ، ساختار یک صفحه اینترنتی رو تعریف می کنه و این CSS هست که مشخص می کنه:
- رنگ هر تگ چی باشه
- اندازه هر تگ چه مقدار باشه
- موقعیت هر تگ در صفحه کجا باشه
و خیلی چیزای دیگه که در دوره CSS بهتون آموزش میدم.
استاد شما که تفاوت این دو رو گفتی، جاوا اسکریپت رو هم بگین چیه!
معمولا صفحات اینترنتی دارای:
- ظاهر
- رفتار
هستند.
صفحه عضویت سایت کد آکادمی رو در نظر بگیرین:
رابط کاربری (ظاهر) این صفحه با استفاده از HTML و CSS طراحی شده. ولی این صفحه باید علاوه بر رابط کاربری (ظاهر)، قابلیت رفتار رو هم داشته باشه. مثلا شما اگر روی دکمه عضویت کلیک کنید، می شه با استفاده از جاوا اسکریپت بررسی کرد که آیا ایمیل وارد شده معتبر هست؟! یا فرضا بررسی بشه که آیا نام کاربری بیشتر از 3 کارکتر هست؟ که در واقع این بررسی ها، نوعی رفتار هستند که این صفحه از خودش نشان می ده.
بنابراین از جاوا اسکریپت برای ایجاد تعامل هر چه بیشتر بین کاربر و صفحه وب استفاده میشه.
مثل یک حرفه ای به این قضیه نگاه کنید!
حالا که می دونین هر صفحه اینترنتی دارای ظاهر و رفتار هست، بگذارین دو اصطلاح رو بهتون معرفی کنم:
- Frond-End Development
- Back-End Development
معمولا وقتی شما قرار هست به عنوان یک تخصص به طراحی سایت نگاه کنید، و تصمیم دارین که برای متخصص شدن برنامه ریزی کنید، به سر یک دوراهی خواهید رسید. و اون دو راهی این هست که آیا گزینه شماره 1 رو انتخاب کنم؟! یا گزینه شماره 2؟
اگر گزینه شماره 1 یا همان Front-End Development را انتخاب کنید، به این معنی هست که قراره شما در طراحی رابط گرافیکی (طراحی ظاهر سایت) متخصص بشین. که معمولا باید موارد زیر رو حرفه ای یاد بگیرین:
- HTML
- CSS
- Java Script
و اگر قرار هست که یک متخصص Back-End بشین (یعنی رفتارهای یک سایت رو کد نویسی کنید)، باید یک یا چند مورد زیر رو یاد بگیرین:
- Python
- Ruby
- Java Script
البته تعجب نکنید. Java Script در هر دو دسته قرار می گیره. یعنی هم میشه باهاش ظاهر یک سایت رو طراحی کرد و هم رفتار!
مورد دیگه ای که در این رابطه وجود داره این هست که در ایران معمولا افراد هم متخصص Back-End میشن و هم Front-End که به اصطلاح Full Stack Developer هستن
دلیلش هم این هست که سایز بیشتر پروژه ها جوری نیست که نیاز به دو نفر متخصص باشه! و دلیل دیگه ای هم که بنظر من داره این هست که در کل طبع و سلیقه ایرانیها جوری هست که دوست دارن بیشتر چیزها رو بلد باشن و در اون متخصص بشن.
یک فلش بَکِ ریز!
HTML مخفف چهار کلمه زیر است:
Hyper Text Markup Language
این چهار کلمه به معنای “زبان نشانه گذاری ابر متن” است. عجب! خوب این دقیقا به چه معنی هست؟
به این معنا که HTML یک زبانی هست که از تگ ها استفاده می کنه تا یک صفحه اینترنتی رو تعریف کنه. به عبارتی تگ ها این قابلیت رو می دن که فرضا متن زیر، بیشتر از یک متن معمولی باشه.
<html>
<head>
<title/>عنوان صفحه<title>
<head/>
<body>
<p/>این یک پاراگراف است<p>
<body/>
<html/>
در متن بالا از این تگ ها استفاده شده:
- <html>
- <head>
- <title>
- <body>
- <p>
متن بالا در واقع یک “زبان نشانه گذاری” است. همه چیز با استفاده از تگ ها نشانه گذاری شده است. به عبارتی زبان نشانه گذاریِ HTML زبانی است که توسط مرورگرها قابل فهم است.
نکته مهم اینکه HTML یک زبان نشانه گذاری است و نه یک زبان برنامه نویسی. شاید سوال پیش بیاد تفاوتشون چیه؟
زبان نشانه گذاری: با استفاده از یک سری تگ ساختار (ظاهر) را مشخص می کند.
زبان برنامه نویسی: مجموعه ای از دستورات است که برای نوشتن برنامه های کامپیوتری استفاده می شود.
نکات گفته شده در این قسمت نکاتی است که اگر مبتدی باشید ممکن است کمی گیج کننده باشد، ولی پیشنهاد می کنم برای درک بهتر، بعد از اینکه تا حدودی با HTML, CSS و Java Script آشنا شدید، مجددا به همین قسمت برگشته و مطالب را مرور کنید.
مشاهده کتاب کامل آموزش اچ تی ام ال
همینطور اگر به یاد گرفتن از طریق ویدیو هستید، می توانید این آموزش را به صورت ویدیویی در لینک زیر مشاهده کنید:
آموزش HTML5 به صورت ویدیویی و زبان فارسی
5 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
امکان ارسال نظر وجود ندارد.
اچ تی ام ال با این پی دی اف تموم شده ؟ ؟؟؟؟
این آموزش به صورت ویدیویی هست.
سلام ممنون بابت مطالبتون سوالی داشتم من به تازگی دوره html css درحال حاضر دارم جاوا اسکریپت کار میکنم سوالم اینه من قسمت فانکشن ها نمی‌فهمم هرچی تحقیق میکنم تمرین میکنم برام جا نمیفته
سلام فانکشن یعنی شما برداری یک سری کد رو (که لازمه چند جای مختلف استفاده بشه) توی یک بلاک بگذاری و یک نام به اون بلاک بدی و هر زمان به کاری که اون کد می کنه لازم داشتین، فقط اون نام رو صدا بزنی! چه کاربردی داره؟ کاربردش اینه که کد هایی که چند جای مختلف نیاز هستن رو یکبار می نویسن (نام بهش می دن) و هر چند جا نیاز بود فقط اسمش رو صدا می زنن
اچ تی امل رو بلد بودم فقط از سر کنجکاوی نگاهی انداختم
جالب بود