آموزش html جلسه اول

آموزش html جلسه اول

اولین جلسه آموزش زبان html :

مقدمه : ابتدا کمی در مورد زبان html :

قبل از هر چیز باید بدانیم که Html یک زبان برنامه نویسی نیست و یک زبان نشانه گذاریست ، این به این معنیست که در html امکان استفاده از متغییر و …در حالت عادی وجود ندارد و فقط به ازای هر خط از این زبان ، مرورگر ها یه عمل خاص را انجام میدهند ، مثلا با نوشتن <title> عنوان صفحه  </title> عنوان صفحه تغییر میکند.

فبلم اموزش جلسه اول:

 

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

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

 

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

 

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

 

شروع کار:

برای شروع کار اول باید روی صفحه دسکتاپ راست کلیک کنید و از قسمت new گزینه new text document رو بزنید تا یه فایل جدید ساخته بشه ، برای فایل یه نام دلخواه میذاریم و پسوند اون رو هم به html تغییر میدیم ، مثلا نام فایل میشه  mbe.html

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

 

برای نوشتن کد باید روی فایل راست کلیک کنید و فایل رو با نرم افزار notepad باز کنید.

 

حالا شروع به کد نویسی می کنیم.

در html اکثر کدها به شکل تگ (نشانه tag) نوشته میشن که شکل کلی اکثر اونها به شکل زیره :

<نام تگ/> محتویات <نام تگ>

شروع تگ درون <> و پایان تگ درون </> و بین این دو معمولا متن قرار میگیره به مثال زیر توجه کنید:

توضیح :
در مثال بالا خط اول و سوم رو در نظر نگیرید  ، کد ما خط دوم هست که یه تگ p هست که بین اون یک کلمه نوشته شده ، تگ P برای قرار دادن پاراگراف استفاده میشه ، یعنی وقتی یه متن رو توی تگ p قرار میدیم به این معناست که هنگام نمایش مرورگر باید قبل و بعد از این تگ اینتر کرده و به خط بعد برود.

اگر شما در کد بالا در پایان خط دوم یک کلمه (مثلا سلام) اضافه کنید متوجه میشید که بعد از زدن اجرای کد، توی کادر دوم نتیجه به شکل دو خط جداگانه نمایش داده میشه و همه متن توی یک خط نمایش داده نمیشه

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

در این جلسه یاد گرفتیم که چگونه یک تگ پاراگراف بنویسیم در جلسه دوم بیشتر با تگها آشنا میشویم.

فیلم آموزشی این جلسه در قسمت بالای صفحه با توضیحات بهتر برای استفاده قرار داده شده است.

  fanavarinovin.mbesoft.ir فناوری نوین کازرونفناوری نوین کازرون

درباره ی فناوری نوین

محمد باقر اسماعیلی فرد/
متولد 1364 /
شهرستان کازرون/
مدرس زبانهای برنامه نویسی به 18 زبان مختلف ، طراح سایت و برنامه نویس/

4 دیدگاه

  1. سلام استاد.تشکر از مطلب مفیدتون.خوشحالم در فضای مجازی اموزش گذاشتین و شروع به کار کردین.استاد به سایت منم سر بزنید یه نظر در مورد سایتم بدین اگه امکان داره اشکالات سایتم رو بهم بگین.باتشکر.www.ostadnavid.ir

    نظر شما: Thumb up 3 Thumb down 0

    • سلام
      ممنون
      فقط یه نکته ، هر جا اسم سایتتون رو مینویسید حتما Htpp:// اول اون رو هم بذارید چون بدون این چند تا حرف ، اسمی که نوشتین عملا لینک نیست ولی اگه به شکل http://ostadnavid.ir بنویسید خود به خود توی نظرات سایتها به شکل لینک نوشته میشه و باعث افزایش یازدید سایتتون میشه مثل همین الان که من نوشتم

      چشم سر میزنم و نظر هم میدم

      نظر شما: Thumb up 2 Thumb down 0

  2. ممنون
    عالی بود استاد

    نظر شما: Thumb up 0 Thumb down 0

    • سلام خواهش میکنم
      البته متاسفانه زیر ساخت کدنویسی ها در سایت هنوز به گونه ای نشده که آموزش ها رو ادامه بدم و کدها یه مقدار جابجا نمایش داده میشه فعلا در حال رفع ایراد و تکمیل زیر ساخت ها هستیم تا سایتی فارسی و کامل در زمینه انواع کدها رو راه اندازی کنیم که مرجع برنامه نویسی تمام فارسی زبانان بشه از اونجایی که من کلا برنامه نویسی رو با ترجمه سایتها و pdf ها و … در سایتهای دیگر کشور ها یاد گرفته م لذا علاوه بر کتابها و سایتهای فارسی ، به کمک دوستان و به امید خدا دارم تمام سعیم رو میکنم که این کمبود رو در سایتهای فارسی زبان به زودی در حد توان رفع کنیم

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *