آغاز آشنایی با زبان HTML

برای اینکه بتوانیم یک طراح وب ماهر شویم ابتدا باید قبل از هر چیز با زبان هایی که در این کار استفاده میشود آشنایی کامل داشته باشیم

 

زبان های کدنویسی طراحی وب را میتوان به ۲ دسته تقسیم بندی کرد

دسته اول شامل زبان های Backend مثل: PHP ، Mysql ، Asp.net ، Angular

دسته دوم شامل زبان های Frontend مثل: HTML ، CSS ، jQuery این دسته ار زبان ها برای اسکلت بندی و ظاهر سایت به کار میروند که نتیجه آن مستقیما در دید کاربر خواهد بود.

 

اچ تی ام ال

 

 

معرفی زبان HTML :

این زبان کدنویسی جزء زبان های دسته دوم محسوب میشود و تقریبا تمام طراحان وب سایت ها با آن آشنایی کامل دارند.عبارت HTML مخفف (Hyper Text Markup Language) است . Html زبان استاندارد طراحی صفحات وب است که همه ی کدهای نوشته شده در یک سایت اعم از کدهای سمت سرور ، کدهای Backend،و… در نهایت تبدیل به کدهای HTML شده و توسط مرورگر نمایش داده میشود به عبارت دیگر مرورگر ها هیچکدام از کدها و کنترل های سمت سرور همچون کدهای asp و php را نمیشناسد و کد قابل فهم برای آنها اچ تی ام ال می باشد. لذا نقطه آغاز یادگیری برنامه نویسی وب، آموزش این زبان است.

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

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

 

تگ های html

 

برای درک بهتر تگ های Html برخی از آن ها را به شما معرفی میکنیم :

۱- تگ <P>

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

<p/>متن پراگراف<p>

۲- تگ <img>

کاربرد این تگ برای نمایش عکس در صفحات وب است استفاده از src یا source همان آدرس تصویر است و alt نوشته ای است که Tooltip موس برای آن تصویر به نمایش در می آید مثال :


<"img src="solutionz.gif" alt="Smiley face" height="42" width="42>

۳- تگ <a>

این تگ نیز دارای پایان است و از این تگ برای ایجاد لینک ارتباطی به یک صفحه دیگر استفاده می شود این تگ دارای خاصیت target است که به مکان باز شدن صفحه جدید اشاره دارد و این خاصیت مقادیر Blank یعنی باز شدن در یک صفحه جداگانه و parent یعنی باز شدن در صفحه اصلی و self یعنی باز شدن در همان صفحه و در نهایت top یعنی باز شدن در یک صفحه که بالا تر از صفحات دیگر است را دارا است. به عنوان مثال

<a href="http://www.solutionz.com">Visit solutionz.com</a>

 

 

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

 

یک سند اچ‌تی‌ام‌ال، یک پروندهٔ مبتنی بر متن است که میتوان آن را به ۲ صورت .html و .htm ذخیره سازی کرد که مرورگر ها قادر به خواندن آن خواهند بود. برای این کار نیاز به برنامه خواصی نیست و می توان با Notepad  آن را انجام داد و کدهای مربوط به Html را درون آن نوشت.

 

 

 

 

نگارش و انتشار توسط ابراهیم عادلی

فعال در زمینه های : طراحی رابط کاربری UI ، توسعه و طراحی وب ، تولید محتوی مارکتینگ گوگل

دیدگاه شما

ایمیل شما نزد ما محفوظ خواهد بود.