آموزش طراحی سایتآموزش HTML

نرم افزار های مورد نیاز در HTML

آموزش طراحی سایت با HTML

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

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

نرم افزارهایی که شما برای این دوره نیاز دارید نرم افزار های رایگان و در عین حال ساده ای هستند و نیاز به هیچ گونه آموزشی جهت استفاده ندارند و هر فردی به راحتی می‌تواند از این نرم افزارها استفاده کند شما برای کدنویسی نیاز به یک ویرایشگر متن مثل Notepad دارید البته در صورت تمایل می‌توانید از ویرایشگر های پیشرفته‌تری همچون Notepad++ ، PhpStorm  و … استفاده کنید و برای نمایش کدهایی که می نویسید نیاز به یک مرورگر دارید از جمله مرورگرهایی که می‌توانید مورد استفاده قرار دهید می‌توان به Internet Explorer ، Mozilla Firefox ، Chrome و … اشاره نمود .

یک فایل زبان اچ تی ام ال (HTML) یک فایل متنی ساده شامل برچسب ها (Tag) میباشد که بایستی پسوند htm یا html داشته باشد این فایل متنی توسط یک ویرایشگر متن مثل Notepad ساخته می‌شود ، مرورگرها که بر پایه ی موتورهای رندرکننده (Rendering Engine) به وجود آمده اند دستور العمل های موجود در این فایل متنی را می‌خوانند و صفحات وب را به ما نمایش می‌دهند .

موتور رندر کننده چیست ؟

موتور رندر کننده یک بخش نرم افزاری است که کدهای زبان نشانه گذاری یا نماد گذاری مثل HTML و CSS را به شی متناظر در صفحه نمایش تبدیل کرده و سپس آن را نمایش می دهد از جمله معروف ترین موتورهای رندرکننده می توان به Trident (موتور رندرکننده مرورگر Internet Explorer) ، Presto (موتور رندرکننده مرورگر Opera) ، Webkit (موتور رندرکننده مرورگر Chrome و Safari )  و … اشاره کرد .

برای روشن تر شدن مطلب بهتر است که یک فایل HTML بسازیم برای این منظور برنامه ی Notepad را باز کرده و متن زیر را درون آن بنویسید.

<html> 
     <head> 
          <title>mizfa</title> 
     <head> 
     <body> 
           Wellcome To Mizfa 
     </body> 
</html>

سپس این فایل را با نام mizfa.htm یا نام دلخواه خودتان ذخیره کنید فقط دقت کنید که فایل حتما باید پسوند html یا htm را داشته باشد حال روی فایل ساخته شده راست کلیک کرده و از قسمت  open with بر روی Firefox و یا مرورگر دلخواه خودتان کلیک کنید مرورگر صفحه‌ی وب ساخته شده توسط شما را نمایش می‌دهد بله به همین راحتی شما موفق شدید که نخستین صفحه وب خود را بسازید .

 

نکته : برای نوشتن کدهای در نرم افزار + Notepad بهتر است به نکات زیر دقت کنید :

  • از منوی Encoding (رمز گذاری) گزینه Encode in UTF-8 را انتخاب کنید تا هنگام تایپ فارسی کلمات به درستی در مرورگر نمایش داده شوند.
  • برای اینکه به برنامه بفهمانیم که در حال نوشتن کدهای هستیم از منوی Language گزینه H و سپس گزینه HTML را انتخاب کنید .

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

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

‫20 نظر داریم، تو هم نظر بذار، پاسخ کامل میدیم :)

  1. سلام خدمت همه شما واقعا که عالی دارین اموزش میدین.
    دو تا سوال داشتم یک اینکه شما الان خودتون این صفحه رو با اسفاده از کدوم روش برنامه نویسی ساختین؟
    و دوم اینکه به عنوان ی نوجوان 14 ساله که کلی هم علاقه دارم و برای یادگیری اینجور چیزا کم نمیارم( از خودم تعریف نکردم فقط ی شرحی بود تا مطمِِعن شم جواب واقعیتونو بهم میدین) چ زبان برنامه نویسی رو پیشنهاد میکنین؟
    ممنون میشم راهنمایی کنین.

    1. سلام نیمای عزیز و پر انرژی روزت بخیر
      اول از همه ممنونم ازت که این همه با انرژی پیامت رو گذاشتی که باعث بشه من هم با انرژی بهت جواب بدم.
      برای شروع بهتره اول برای خودت مشخص کنی که دوست داری چه برنامه ای بنویسی، برنامه نویس وب بشی یا برنامه نویس اپلیکیشن های کامپیوتر شخصی (دسکتاپ) یا موبایل.
      بعد از اینکه این رو متوجه شدی و برای خودت مشخص کردی هدفت چیه، یک سری پیش نیاز ها لازم داری که باید بگذرونی، باید در مورد الگوریتم ها و فلوچارت ها اطلاعات پیدا کنی. بعد از اینکه این پیش نیاز ها رو گذرونی و مفهوم اولیه برنامه نویسی رو متوجه شدی که اصلا برای چی یک برنامه کامپیوتری نوشته میشه، بهت پیشنهاد میکنم بری سمت یک زبان برنامه نویسی که به هدفت مربوطه.

      برای برنامه نویسی سمت وب : پیش نیاز : HTMLCSS – JavaScript هست که بعد از یادگیری اینها میتونی هدفت را گسترش بدی که سمت سرور ادامه بدی یا سمت کاربر.
      برای برنامه نویسی سمت اپلیکیشن : الان پیشنهادم Dart – سی شارپ هست.

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

      راستی یک کد تخفیف هم از یکی از دوره های میزفا آکادمی برای اینکه انقدر پر انرژی اومدی ازمون سوال پرسیدی برات ایمیل کردیم که اگر وارد مسیر طراحی وب شدی، میتونه بهت کمک کنه. موفق باشی ☺️

  2. سلام من دوست دارم کد نویسی کنم با html برای این کار چه برنامه ای خوبه من تازه این کارو شروع کردم ولی دوستام تاحدی بلده ولی خودم کد هاشو بلدم کمک کنید ممنون

    1. سلام محمد. من خودم از نرم افزار رایگان و خوب visual studio code استفاده میکنم.

  3. سلام
    من میخواهیم تمپلیت یک سایت را تغییردهم میشه راهنمایی کنید.ممنون

    1. سلام. شما باید html و css رو یاد بگیرید. مسیر شروع شما این موارد است.

      1. سلام من کد نویسی رو انجام دادم ولی نمی تونم برای اش url و در موتور جوستوجوگر بیزارم کد نویسی کامل و درسته ممنون میشم راهنمایی کنید.

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

      1. تو مرور گر به جای اینکه اسم سایت باشه مثلا Mizfa.com آدرس مکان فایل ذخیره شده نوشته شده است.

        1. لوکال به همین شکل هست. یک ترفند هست که میشه از لوکال دراورد که کمی پیچیده هست در قالب کامنت نمیشه توضیح داد ولی پیشنهاد نمیشه دیفالت زمپ و ومپ رو عوض کنید

          1. خلاصه حرفم این هست که انجام نشده توی لوکال.

  4. با سلام
    میخواستم بدونم دستور webkit-box در نوت پد پلاس پلاس چطور نوشته می شود ؟
    اصلا این نرم افزار این دستور رو رو در کتابخانه اش داره؟
    اگه راهنمایی کنید ممنون میشم؟

    1. سلام. مثل بقیه دستورهای CSS دیگه و ربطی به نرم افزار نداره. فقط در نوت پد پلاس پلاس باید دستی نوشت و اتوماتیک دستورات کامل نمیشه.
      درباره کتابخانه اطلاع ندارم.

    1. سلام
      من یک نمونه اصلاح کردم، به شکل زیر درست هست:

      <div style="text-align:center;">
          <a href="https://www.facebook.com/forfile.ir" target="_blank" rel="nofollow">Text here</a>
      </div>

پاسخی بگذارید

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

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر