آموزش کامل html

تاریخ : 2020-08-26 بازدید : 72 دسته بندی : مقالات
آموزش کامل html

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

HTML یک زبان علامت گذاری است و مخفف عبارت Hyper Text Markup Langouge است. دقت کنید که HTML یک زبان برنامه نویسی نیست بلکه زبان مرورگر هاست.

در زبان های برنامه نویسی ما با مباحثی مثل توابع ، دستورات شرطی ، متغیر و.. سروکار داریم اما در html هیچ یک از این ها دیده نمیشود.  در Html صرفا چند تگ داریم که هریک از آن ها کاربرد خاص خود را دارند .

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

پیشنهادی :  وبسایت چیست و چگونه کار می کند؟‌

در این مقاله قصد داریم تا تگ های html را به همراه کاربردی که دارند برای شما شرح دهیم .

چگونه html تمرین کنیم ؟‌

اگر شما بخواهید کد زدن html را شروع کنید به ابزار زیادی نیاز ندارید . شما به یک مرورگر برای دیدن نتیجه ی کدهای html و یک ادیتور برای نوشتن کد ها نیاز دارید.
برای شروع کد نویسی html ابتدا یک پوشه در رایانه خود ایجاد کنید. در آن پوشه فایل html خود را بسازید. یک فایل html فایلی است که دارای پسوند .html یا .htm است.
خب حالا که فایل html خودتان را ساختید. آن را با کمک یک ویرایشگر متن باز کنید. برای مثال می توانید از ویرایش گر های رایگانی که وجود دارند استفاده کنید . مثل notepad ++ و یا ویرایشگر رایگان Atom

ساختار کلی تگ های html

به صورت کلی تگ های html ساختار این چنینی را دارند :

 

آموزش کامل html

Attribute ها در html

 

در تگ های html یک سری ویژگی ها وجود دارد که به آن ها Attribute می گوییم . این ویژگی ها می توانند مخصوص به یک تگ باشند. همچنین بعضی ویژگی ها می توانند برای همه تگ ها هم استفاده شوند . تمام تگ های html می توانند Attribute داشته باشند.

خب اکنون به ترتیب تگ های مهم و پرکاربرد html  را به ترتیب بررسی می کنیم .

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

آموزش کامل html

هدینگ ها
تگ ها هدینگ شامل شش تگ زیر می شوند :
h1 ، h2 ، ، h3، h4، h5، h6
استفاده ی از هرکدام از این تگ ها بستگی به اهمیت تیتر شما دارد . اهمیت این تگ به ترتیب شماره ای که دارند است. مثلا شما برای عنوان سایت در ابتدای صفحه ی اصلی باید از h1 استفاده کنید. چون که نام سایت یک تیتر مهم به حساب می آید.
اما مثلا در بخش های فوتر یا پایینی سایت اگر بخواهید عنوانی را بنویسید معمولا این عنوان اهمیت کمتری دارد و می توان از تگ های مانند h4 یا h5 استفاده کرد.

پاراگراف ها

اگر بخواهید متنی را در صفحه ی وب خود قرار دهید این کار با کمک تگ ها p باید انجام دهید. در تصویر زیر یک مثال را برای شما آورده ایم .

 

آموزش کامل html

 

تگ های قالب بندی

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

تگ b : این تگ برای بولد کردن یک نوشته به کار می رود .
تگ strong : این تگ برای متن های مهم به کار می رود.
تگ i : این تگ نوشته ی شما را مایل می کند.
تگ em : اگر بر روی یک متن تاکید دارید از این تگ استفاده کنید.
تگ mark : این تگ متن را برای شما هایلایت می کند.
تگ small : این تگ متن را کوچک می کند.
تگ del :‌ این تگ یک خط بر روی متن می کشد مانند متن های حذف شده.
تگ sup : این تگ متن را کوچک و مانند توان بالا می برد.
تگ sub : این تگ برعکس تگ قبلی عمل می کند.

تگ های نقل و قول

بعضی از تگ هستند که برای نقل و قول به کار می روند. این تگ ها به ترتیب زیر هستند :

blockquote , q , abbr , address , cite , bdo

 

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

 

آموزش کامل html

 
همانطور که در تصویر می بینید تگ a یک ویژگی یا attribute دارد به نام href . این ویژگی به ما کمک می کند تا کاربر را به صفحه ی دلخواه خودمان هدایت کنیم. فقط کافی است آدرس آن صفحه را در بین دابل کوتیشین یا  “” قرار دهیم.

تصاویر در html

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

 

آموزش کامل html

همانطور که در تصویر می بینید تگ img یک ویژگی به نام src را دارد این ویژگی به شما کمک می کند تا آدرس تصویر مورد نظر خود را به کاربر نمایش دهید. فقط کافی است آدرس تصویر را در بین دابل کوتیشین یا “” قرار دهید.
در این جا ما گفته ایم که آدرس تصویر مورد نظر ما در پوشه ی image و بعد از آن نام تصویر که فرمت آن jpg است را قرار داده ایم.

جمله ی این یک تگ لینک است اشتباه است و نباید اینگونه در کدها نوشت !

تگ img یک ویژگی دیگر دیگری به نام alt نیز دارد . این ويژگی برای این است که اگر به هر دلیلی تصویر شما قادر به نمایش نبود ، متنی که در ویژگی alt قرار دادید به کاربر نمایش داده می شود . بنابراین کاربر متوجه می شود که تصویر مربوط به چه موضوعی بوده است.

در تصویر بالا همانطور که می بینید تگ img مانند تگ های قبلی تگ بسته ای ندارد و تنها یک طرف تگ نوشته شده است. خب نباید هم تگ بسته ای داشته باشد به این دلیل که تگ img محتوای خاصی ندارد که بخواهیم بین دو تگ بنویسیم تا به کاربر نمایش دهد. تنها می خواهیم یک تصویر را نمایش دهیم که آدرس آن را هم در ویژگی src می نویسیم .

جداول در html

برای ایجاد یک جدول در html از تگ table استفاده می کنیم. همانطور که می دانید یک جدول دارای ردیف ها و ستون هایی است. برای ایجاد یک ردیف ما tr و برای نمایش هر ستون از تگ td استفاده می کنیم .
اگر دقت کرده باشید جداول در ستون ها بالایی خود شامل تیتر اصلی می شوند مانند تصویر زیر :

آموزش کامل html

برای ایجاد تیتر هایی مانند تصویر (نام ،‌سن و شغل) ،‌ ما به جای تگ ها td از tr استفاده می کنیم.

آموزش کامل html

لیست ها

لیست ها در html یا شماره دار(مرتب) هستند یا شماره دار نیستد(نامرتب) . برای ایجاد لیست های مرتب از تگ ol و برای لیست های نامرتب از ul استفاده می کنیم.

آموزش کامل html

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

فرم ها در html

هرگاه بخواهید از کاربر اطلاعاتی را دریافت کنید از تگ form استفاده می کنید. برای مثال ثبت نام کاربر در سایت یا پر کردن فرم استخدام در یک سایت .
ایجاد فرم
برای ایجاد یک فرم در html باید از تگ form استفاده کنید. در بین دو تگ باز و بسته ی تگ form تگ های دیگری را استفاده می کنیم که هر کدام کاربرد خود را دارند.

تگ input در فرم

کاربر اطلاعات خود ، از جمله نام ، ایمیل یا شماره را درون input وارد می کند. واژه ی input به معنی ورودی است. برای نوع اطلاعات خاص از یک نوع input استفاده می کنیم . یکی از ویژگی ها یا Attribute های input ، type است . با کمک این ویژگی مشخص می کنیم که نوع اطلاعات ورودی از کاربر چه چیزی باشد.

برای مثال اگر می خواهیم کاربر یک فایل را آپلود کند از کلمه ی file برای تعریف نوع input استفاده می کنیم.

تگ lable در فرم

این تگ مشخص می کند که lable متعلق به کدام input است.

تگ div
تگ div در html مانند یک ظرف نگه دارند عمل می کند . شما می توانید تعدادی تگ مرتبط را درون تگ div قرار دهید.

تگ section

این تگ برای جدا کردن یک بخش از سایت از دیگر بخش هاست. یعنی شما تعداد تگ های با موضوع مشترک را درون تگ section قرار می دهید.

تگ footer

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

تگ head

این تگ در صفحه ی سایت نمایش داده نمی شود . از این تگ برای قرار دادن تگ هایی از جمله link یا script استفاده می کنیم.

تگ html

این تگ کل تگ های html را شامل می شود .

تگ body

در این تگ عناصری که در صفحه ی سایت نمایش داده می شوند قرار داده می شوند.

Class و id در تگ ها html

برای هر یک از تگ های html می توانیم از ویژگی های کلاس و آی دی استفاده کنیم . اما این ویژگی ها به چه دردی می خورند ؟ از این ویژگی ها هنگام استایل دهی در css استفاده می کنیم.
در حقیقت استفاده از تگ های html ظاهر چندان زیبایی به سایت نمی دهند . با کمک css شما می توانید به صفحه ی بی روح سایت خود رنگ و لعاب بدهید تا بخش های مختلف سایت برای کاربر مشخص باشد.
شاید برایتان این سوال برای شما پیش آمده باشد که تفاوت این دو در چیست ؟‌
شما می توانید یک نام دلخواه برای class یا id انتخاب کنید اما دقت کنید که نامی که برای class انتخاب کردید را می توانید برای چندین تگ تکرار کنید اما در مورد id این گونه نیست . نامی که برای id انتخاب می کنید منحصر به فرد همان تگ است و اگر برای تگ دیگری آن را تکرار کنید با خطا مواجه خواهید شد.

اشاره ای به css

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

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

 

برچسب ها : ,