آموزش رایگان html (قسمت اول)

چکیده این مطلب : انتشار : ۱۰ مهر ۱۳۹۸ بدون نظر 116 بازدید

تیم  تک تا تصمیم گرفته  است که آموزش رایگان و در عین حال جامع  زبان html را در اختیار شما عزیزان قرار دهد، شما با یادگیری این زبان به راحتی می توانید یک طراح سایت بشوید هرچند علاقه به یادگیری حرف اول را می زند 🙂 HTML چیست؟ Html‌ مخفف Hyper Text Markup Language یک […]

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

HTML چیست؟

Html‌ مخفف Hyper Text Markup Language یک زبان نشانه گذاری استاندارد برای ایجاد صفحات وب است ، به عبارت دیگر ساختار صفحات وب را توصیف می کند و از یک سری عناصر تشکیل شده که به مرورگر می گویند چگونه محتوا را نمایش دهد.

نرم افزار های مورد نیاز برای کد نویسی Html :

میتوانید کد های خود را در Notepad  و TextEdit  که به صورت رایگان هم هستن بنویسید ، ویرایشگرهای پیشرفته ای  همچون PhpStorm  ،Notepade++  ‌  و …. وجود دارد ولی پیشنهاد میشود از Notepad برای یادگیری استفاده کنید ، چون ما معتقد هستیم یک ویرایشگر ساده روش خوبی برای یادگیری Html  است.

ایجاد یک صفحه وب:

برای ایجاد صفحه وب خود با Notepad مراحل زیر را دنبال کنید

  1. باز کردن Notepad ‌ :

در ویندوز ۸ یا بالاتر :

منوی start را باز کنید و Notepad را تایپ کنید

در ویندوز ۷ و پایین تر:

Start à Programs à Accessories à Notepad

۲) نوشتن کد Html   :

کد زیر را  در Notepad  خود کپی یا بنویسید

<html>

     <head>

          <title> taktateam</title>

     <head>

     <body>

           Wellcome To taktateam 

   </body>

</html>

۳) صفحه Html را ذخیره کنید

از منوی File  و SaveAs را انتخاب کرده و فایل را به اسم “taktateam.htm”  یا هر اسم دلخواه تان نام گذاری کنید فقط توجه داشته باشین که اسم  انتخابی شما همراه پسوند html  یا htm‌نوشته شود و Encoding ‌ را روی UTF-8 نام گذاری کنید

۴) صفحه html  را روی مرورگر خود مشاهده کنید

فایل html خود رادر مرورگر خود باز کنید (روی File راست کلیک کنید و Open With و بروی Firefox‌ یا بر روی مرورگر دلخواه تان کلیک کنید)

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

ساختار اصلی یک صفحه وب:

هر صفحه وب یا هر صفحه html   با تگ <html> شروع  و با یک تگ </html> پایان می یابد.

هر صفحه اصلی html  از دو عنصر اصلی تشکیل شده است :

عنصر <head>  :

این عنصر قسمت سر صفحه مشخص می کند ، حاوی اطلاعاتی درمورد خود صفحه و شامل عناوین  می باشد، آنچه در عنصر head‌نوشته می شود قابل مشاهده نیست  .

عنصر <body>  :

این قسمت بدنه سایت مان را نشان می دهد و هر چیزی که در این قسمت می نویسیم در مرورگر نشان داده خواهد شد

<html>

<head>
  <title>My First HTML</title>

</head>

<body>

.
.
.
</body>

</html>

اکنون باید دریافته باشین که یک عنصر html  از یک تگ شروع و یک تگ پایانی تشکیل میشود که محتوا آن در بینشان قرار میگیرد

توجه: هر تگی که باز می شود باید در جایی بسته شود البته استثنا هم وجود دارد مثلا تگ <br> که تگ پایانی ندارد و نشانه شکست خط  است

آشنایی اولیه با تگ ها:

پاراگراف در html  :

پاراگراف  در  html  با تگ <p> تعریف میشود

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

لینک ها در html :

لینک ها در html  با تگ <a> تعریف میشود.

<a href=”https:// taktateam.ir“>This is a link</a>

همانطور که میبیند لینک سایت مورد نظرمون در href مینویسم

عکس ها در html :

در قسمت src  اسم عکس نوشته میشود و در قسمت alt متن عکس ، widthو heightهمانطور که از معانی آنها مشخص است طول  وعرض عکس را مشخص میکند

<img src=”takta.jpg” alt=”taktateam.ir” width=”104″ height=”142″>

 دکمه ها در html :

<button>Click me</button>

صفت ها :

همه عناصر html می توانند دارای صفت باشند .عناصر تشکیل دهنده صفت ها name و value هستند.برای مثال

<p align=’right’>html</p>

توجه کنید که صفت ها همیشه داخل دابل کتیشن (“ ”)  یا تک کتیشن (‘ ‘) قرار میگیرند و با علامت = به نام صفت منتسب می شوند  name=”value”               

صفت style :

از صفت style برای مشخص کردن رنگ ، فونت ، اندازه و… استفاده میکنیم به عبارت دیگر با صفت style‌می توانیم ویژگی css را بروی تگ های html اعمال کنیم در صورت استفاده از چنذد ویژگی  css با علامت سیمی کالن (;) آن ها را از هم جدا میکنیم

نتیجه:

صفت lang :

زبان صفحه html را مشخص می کند ، این صفت یک کلمه دو حرفی را به عنوان مقدار می پذیرد که این مقدار برای زبان فارسی fa و برای زبان انگلیسی en است

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

صفت title :

زمانی که بخواهیم توضیحی برای یک عنصر ذکر کنیم تا هنگامی که کاربر اشاره گر موس روی عنصر برد توضیح نشان داده بشه از صفت title  استفاده میکنیم برای مثال:

خب همراهان عزیز صفت ها هم یادگرفتیم میریم سراغ آشنایی با عنواین html 🙂

عنواین html :

عنوانین با تگ های <h1> تا <h6>  تعریف میشوند درجه اهمیت آنها به ترتیب از <h1> تا <h6> است یعنی تگ <h1> بیشترین اهمیت و تگ <h6> دارای کمترین اهمیت است

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

 هر عنوان html دارای اندازه پیش فرض است با این وجود می توانید با استفاده از ویژگی های css اندازه هر عنوان را با استفاد از صفت style مشخص کنید برای مثال :

<h1 style=”font-size:60px;”>Heading 1</h1>

با ما همراه باشید :))

معرفی تگ P  :

همانطور که قبلا اشاره کردم تگ p برای نشان دادن پاراگراف در html استفاده میشود یعنی موتور های جست وجو با دیدن تگ p  متوجه میشوند که با یک پاراگراف روبرو هستند .پاراگراف با تگ <p>  شروع میشه و با تگ </p> خاتمه پیدا میکند.

در نظر داشته باشین که نذاشتن تگ پایانی در بیشتر مرورگرها مشکلی ایجاد نمیکند  ولی پیشنهاد ما این است که هیچ وقت اعتماد نکنین چون ممکن است نتایج و خطاهای غیر منتظره ای ایجاد شود.

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

دوستانی که این مطلب را مطالعه کرده اند، از مطالب زیر نیز استقبال کرده اند

آموزش رایگان html (قسمت دوم)

  خب همراهان همیشگی تکتا  ، در جلسه اول با برخی از مباحث آموزش html آشنا شدیم .در این جلسه  به سراغ دیگر مباحث میرویم .امیدواریم  تا اینجا آموزش نهایت استفاده کرده باشید آخرین مطلبی که در جلسه اول درموردش صحبت کردیم درمورد تگ <pr>  بود  تو این جلسه آموزشمون با تگ br  شروع میکنیم تگ […]

نظرات

برای ارسال نظر لطفا ابتدا وارد شوید

تماس با ما