آموزش html به زبان ساده قسمت اول

//آموزش html به زبان ساده قسمت اول

آموزش html به زبان ساده قسمت اول

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

ابزارهای مورد نیاز :

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

<!DOCTYPE html>
<html>

<head>
</head>
<body>
</body>
</html>

کدهای بالا را به همین شکلی که هست درون نرم افزار بنویسید و سپس فایل را با یک نام و پسوند .htm و utf-8 ذخیره کنید. برای مشاهده کدهای خود در مرورگر بر روی فایل کلیک راست کرده و بر روی Open With رفته و یکی از مرورگرهای خود را انتخاب کنید تا کدها خوانده شده و نمایش داده شوند. البته با کدهای بالا فعلا چیزی نمایش داده نمی شود و هر چه جلوتر برویم این کدها بیشتر و بهتر خودشان را نشان خواهند داد.

حالا یک مثال از مطالب گفته شده میزنیم:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

حالا اگر این کد را در فایل بنویسید و ذخیره و سپس نمایش دهید نتیجه را خواهید دید. یکسری کد را اضافه کرده ایم که بعدا به طور کامل آنها را معرفی می کنیم.

تمامی کدهای زبان برنامه نویسی HTML با تگ شروع و پایان می یابند، اما بعضی از تگ ها به صورت تکی هستند پس به یاد داشته باشید تمامی دستورات در این زبان با تگ که با رنگ زرد در مثال بالا نمایش داده شده اند انجام می شوند. به تگ ابتدایی تگ باز و به تگ انتهایی تگ بسته گفته می شود.

همان طور که مشاهده می کنید تمامی کدها با تگ <!DOCTYPE html> آغاز می شوند. تگ بعدی <html> است که تمامی تگ ها درون آن قرار می گیرند. بعد از آن تگ <head> که در آن یکسری کدها برای سربرگ و … نوشته می شود. تگ بعدی <body> است که هر کدی درون آن قرار گیرد در مرورگر قابل نمایش می باشد.

توجه داشته باشید از این به بعد تمامی تگ ها را درون تگ <body> قرار می دهیم تا نمایش داده شوند و دیگر کدهای گفته شده را نمی نویسیم.


تگ h1 تا h6 :

این تگ ها برای تیترها به کار می رود و تگ h1 بزرگترین و مهمترین و تگ h6 کوچکترین نوع قلم را به شما می دهد. مانند:

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>


تگ P :

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

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>


تگ a :

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

<a href=”https://www.site.com”>نام سایت</a>


تگ img :

این تگ برای تعریف و ایجاد و آدرس دهی و نمایش تصاویر به کار برده می شود. مانند:

<img src=”site.jpg” alt=”site.com” width=”104″ height=”142″>

در این تگ بعضی مشخصه ها وجود دارد. مشخصه src همان نام تصویر است و مشخصه alt برای نام دادن به تصویر زمانی که تصویر در سایت به خوبی نمایش داده نمی شود به کار می رود. مشخصه های width و height برای ابعاد تصویر به کار می روند.


تگ buttons :

این تگ برای ایجاد دکمه به کار می رود. مانند :

<button>کلیک کن</button>


تگ لیست در آموزش html :

همان طور که از اسمش پیداست برای ایجاد انواع لیست از جمله لیست ترتیبی با اعداد و نشانه ها ( تگ ol ) ، لیست غیرترتیبی با اشکال ( تگ ul ) ، اضافه کردن موارد لیست ها ( تگ li ) می باشد. مانند :

<ul>

  <li>اول</li>

  <li>دوم</li>

  <li>سوم</li>

</ul> 

<ol>

  <li>اول</li>

  <li>دوم</li>

  <li>سوم</li>

</ol>


تگ br :

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


صفت style :

این صفت برای ایجاد جلوه ها بر روی اکثر تگ ها به کار می رود. یعنی با این صفت می توانید مثلا رنگ و یا فونت و اندازه پاراگراف را تغییر دهید. مانند:

<p style=”color:red”>این پراگراف به رنگ قرمز است.</p>


صفت lang :

این صفت برای مشخص کردن زبان نوشته ها می باشد و در تگ html به کار می رود. مانند:

<html lang=”en-US”>


صفت title :

این صفت برای این به کار می رود که شما مثلا یک متن و یا تصویر دارید و می خواهید زمانی که کاربر با ماوس بر روی آن متن و یا تصویر رفت یک متن نمایش داده شود. این متن نمایش داده شده را با صفت title می توانید اضافه کنید. مانند:

<h2 title=”I’m a header”>The title Attribute</h2>


خلاصه صفت های آموزش اچ تی ام ال :

alt : این صفت برای ایجاد نام جایگزین برای تصاویر به کار می رود.

Disabled : مشخص می کند که یک عنصر ورودی باید غیرفعال شود.

href : برای ایجاد لینک به صفحات و سایت های دیگر به کار می رود.

id : یک شناسه منحصر به فرد برای عنصر مشخص می کند.

src : برای آدرس دهی به تصاویر به کار می رود.

Style : برای دادن جلوه و استایل بر روی متون به کار می رود.

title : برای ایجاد یک توضیح برای متن و یا تصاویر به کار می رود.


تگ hr :

این تگ برای ایجاد یک خط افقی به کار می رود که به صورت تگ <hr> به کار می رود. البته می توانید برای جلوه و استایل دادن به آن نیز از صفت style استفاده کنید.


تگ title :

این تگ برای تغییر دادن متن زبانه یا تب مرورگر به کار می رود و این تگ در داخل تگ head باید نوشته شود. مانند:

<head>

  <title>این تگ عنوان زبانه مرورگر است</title>

</head>


تگ pre :

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

<pre>

   My Bonnie lies over the ocean.

</pre>

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

۱۳۹۷-۱۱-۱۶ ۱۴:۲۵:۲۹ +۰۰:۰۰

دیدگاه خود را بنویسید

با خبرم کن

می خوای با ثبت ایمیل خودِت خیلی سریع از آموزش های جدید با خبر بشی؟