آموزش مقدماتی HTML

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

اما خب این ها چه سودی برای ما دارن؟

نه هنری یاد میگیریم ، و نه حرفه ای .

خب امروز من اومدم تا به شما یک هنر و حرفه دلنشین را معرفی کنم.

برنامه نویسی

برنامه نویسی علاوه بر این که جذابه ، برای خودش یک شغل پر درآمد هم هست.

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

البته HTML به تنهایی نمیتونه یه سایت درست کنه و شما باید css هم بلد باشید تا سایتتون خشک و بی روح نباشه.

اگر می‌خواهید HTML را یاد بگیرید با ما همراه باشید و لایک کامنت فراموش نشه.

Hyper Text Markup Language مخفف عبارتhtml
.به معنی زبان نشانه گذاری ابر متن است

کد HTML به مرورگرهای وب می گوید که چگونه محتوایی مانند تصاویر ، پیوندها و متن را در صفحه وب نمایش دهند.

سیستم‌های کامپیوتری هر فایلی دارای یک پسوند است. برای مثال پسوند فایل‌های کتاب الکترونیک pdf است. هر فایل در سیستم‌های کامپیوتری با توجه به پسوندی که دارد شناسایی می‌شود. برای کار با پسوندهای مختلف نیاز به نرم افزار های متفاوتی داریم.

برای مثال برای اینکه بتوانیم فایل‌های pdf را مشاهده کنیم، می‌توانیم نرم افزار adobe reader را نصب کنیم. یا برای مشاهده فایل‌های ویدیویی (با پسوند‌های مختلف) نیاز به نرم‌افزاری مثل KM Player داریم.

بزارید با یک مثال دیگه HTML را به شما توضیح بدم مثلا برای ساختن خانه اولن پی میکنند بعد ستون میگذارند و پایه و اساس خانه را درست می‌کنند که در نوشت سایت همان HTML است اما هنوز خانه خشک و بی روح است پس چه کاری انجام می دن تا خونه به دل من و شما بشینه؟

بله درسته خانه را رنگ میزنند ، گچ کاری میکنند ، لامپ و چراغ میگذارند ، سرامیک کاری میکنند و...

در سایت نویسی به این کار ها Css می‌گویند.

پس تا اینجا فکر کنم همه شما با مفهوم اولیه HTML آشنا شدید؟

وقتی که به زبان HTML کد می‌نویسیم. در نهایت این کدها را با پسوند htm ذخیره می‌کنیم. یعنی کل خروجی کار ما یک یا چند فایل با پسوند htm. می‌شود. خب نرم افزاری که بتواند فایل‌های htm را اجرا کند چه نرم‌افزاری است؟ مرورگرهای صفحات وب یا همان Web Browser ها.

در حال حاضر بهترین مرورگر دنیا نرم افزار Google Chrome است که کاربران زیادی را به خود جذب کرده است. از دیگر مرورگرهای معروف می‌توان به Firefox، Opera، Safari و Internet Explorer اشاره کرد.
پس این نکته مهم را یاد گرفتید که فایل htm که خروجی کار ماست را می‌توانیم با مرورگر‌های مختلف اجرا کنیم و نتیجه کار خود را ببینیم.

نکته: کدهای html را می‌توان با دو پسوند htm. و html. ذخیره کرد. در عمل این دو پسوند هیچ تفاوتی باهم ندارند اما نکته بسیار مهمی در اینجا وجود دارد. در سیستم‌های کامپیوتری اکثر پسوند‌ها ۳ حرفی هستند و ممکن است که بعضی از سیستم ها از پسوند‌های ۴ حرفی و غیره پشتیبانی نکنند. پس برای اینکه به مشکلی برنخورید بهتر است همیشه از پسوند htm.

مفاهیم پایه HTML

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

تگ‌ها چگونه نوشته می‌شوند؟ چند نوع تگ داریم؟

از لحاظ نوشتن تگ‌ها می‌توان آنها را به دو دسته تقسیم کرد:

1.تگ‌های جفت

2.تگ‌های تهی

تگ‌های جفت

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

<p> content </p>

در این مثال <p> تگ باز و <p/> تگ بسته است. عبارت content هم محتوای درون تگ حساب می‌شود. دقت کنید تگ بسته هم دقیقا مانند تگ باز نوشته می‌شود با این تفاوت که قبل از نام تگ یک کاراکتر / قرار می‌دهیم. تگ p وظیفه ایجاد یک پاراگراف در صفحه را دارد.

تگ‌های تهی

تگ‌های تهی به تگ‌هایی گفته می‌شود که هیچ محتوایی نمی‌تواند درون آنها قرار گیرد. یعنی عملکرد و وظیفه تگ تهی طوری است که به هیچ محتوای درونی نیاز ندارد. به مثال زیر توجه کنید:

<p> name <br>sepehr moghaddasi</p>

در این مثال بازهم از تگ p برای ایجاد یک پاراگراف استفاده شده. درون این پاراگراف عبارتی وجود دارد. همچنین درون تگ p از تگ <br> استفاده شده. این تگ وظیفه شکستن خط را دارد (مانند کلید Enter در هنگام تایپ). اگر دقت کنید این تگ اصلا تگ بسته ندارد. چون اصلا نیازی به تگ بسته ندارد. این تگ یک وظیفه خاص دارد و ما نمی‌توانیم چیزی را درون آن قرار دهیم. خروجی مثال بالا عبارت زیر می‌شود:

name
sepehr moghaddasi

نکته: اگر دقت کنید در این مثال ما تگ br را درون تگ p نوشته‌ایم. یعنی تگ‌ها می‌توانند بدون هیچ محدودیتی بصورت تو در تو نوشته شوند.





صفت یا attribute چیست؟

برای اینکه بتوان یک عنصر (تگ) را بهتر توصیف کرد، از صفت یا همان attribute استفاده می‌شود. بگذارید با یک مثال توضیح دهیم.

تگ <a> وظیفه ایجاد پیوند (link) در صفحات وب را دارد. کد زیر گوگل را به آدرس google.com لینک می‌کند.

<a href="https://google.com"> گوگل </a>

همانطور که مشاهده می‌کنید، در این مثال از تگ a برای ایجاد لینک استفاده شده. صفت href در این مثال آدرس مقصد لینک را تعیین می‌کند.

صفت‌ها همیشه در تگ شروع (تگ باز) نوشته می‌شوند، همچنین مقدار صفت‌ها باید همیشه در جفت کوتیشن قرار گیرد و با یک علامت مساوی به صفت نسبت داده می‌شود. یک تگ می‌تواند به تعداد نامحدودی صفت داشته باشد. و این صفت‌ها تنها با یک کاراکتر فاصله (space) از هم جدا می‌شوند.

<tag attr1="value" attr2="value" attr3="value"> content </tag>







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

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

DOCTYPE html>1!>

html>2>

head>3>

title> Page title </title>4>

head>5/>

body>6>

7

body>8/>

html>9/>

در خط اول تگ <DOCTYPE html!> را می‌بینید. این تگ یک تگ تهی است و باید دقیقا به همین صورت در ابتدای کدها نوشته شود. این تگ را تگ اعلامیه هم می‌گویند. یعنی به مرورگر اعلام می‌کند که این فایل حاوی کدهای html ورژن 5 است.

در خط بعدی تگ html را می‌بینید. اگر دقت کنید تگ بسته آن در انتهای کدها قرار دارد. به عبارتی تمام تگ‌های دیگر درون این تگ قرار می‌گیرند و هیچ تگی جز تگ اعلامیه نمی‌تواند خارج از این تگ قرار گیرد. به همین علت به این تگ عنصر ریشه (root) گفته می‌شود.

در خط سوم تگ head را مشاهده می‌کنید. این تگ بصورت جفت نوشته می‌شود و تمام اطلاعات و پیوست‌های یک صفحه وب درون این تگ اعلام می‌شوند.

در خط چهارم تگ title وجود دارد. این تگ عنوان صفحه وب را تعیین می‌کند. یعنی هر عبارتی که درون این تگ نوشته شود در عنوان صفحه نمایش داده می‌شود. همانطور که مشاهده می‌کنید این تگ درون تگ head نوشته می‌شود.

در خط ششم تگ body را مشاهده می‌کنید. به تگ body عنصر بدنه هم می‌گویند. هر تگی که درون این تگ نوشته شود در صفحه مرورگر نمایش داده می‌شود.

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

تمرین: پیشنهاد می‌کنیم برای روان شدن دستتان در تایپ انواع تگ‌ها، و یادگیری ساختار کدهای HTML، قطعه کد بالا را ده ها بار در یک ادیتور متن مثل ++Notepad یا بنویسید.
نحوه ‌ذخیره و اجرای کدهای HTML

قدم اول: یک نرم‌افزار ویرایشگر متن (مانند ++Notepad یا Atom) را باز کرده و کدهای ساختار html را درون آن بنویسید.

قدم دوم: این کدها را با استفاده از کلید‌های ترکیبی Ctrl+S یا از طریق منوی File و انتخاب گزینه save ذخیره کنید. حواستان باشد که باید فایل را با پسوند htm. ذخیره کنید.

قدم سوم: فایلی که ذخیره کرده‌اید را با یک مرورگر (مانند Google Chrome، Firefox، Opera، Edge یا internet explorer) باز کنید تا کدها اجرا شوند و نتیجه را مشاهده کنید. (البته فعلا چیزی جز یک صفحه سفید و خالی مشاهده نمی‌کنید!)


نکته: هربار که فایل کدهای خود را ویرایش کردید تنها کافیست تا با زدن کنترل ترکیبی Ctrl+S تغییرات را ذخیره کرده و صفحه مرورگر را Refresh کنید تا تغییرات را مشاهده کنید.

#روایتگرباش

#ماسک_بزنیم

#هر_ایرانی_یک_برنامه_نویس