اموزش اچ تی ام ال ۲: ویرایشگر

نویسنده : محمد جواد فرکاریان ۵ اردیبهشت ۱۳۹۵

education-html

سلام

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

شما با کمک برنامه های زیر میتوانید کد های HTML را ویرایش کنید :

  • Microsoftweb Matrix
  • sublime text
  • notepad++
  • و…

حالا برای اینکه بتوانید کد های نوشته شده را مشاهده کنید و بهتر بتوانید تمرین کنید شما میتوانید با کمک Notepad ویندوز و بدون نیاز به هیچ برنامه دیگری کد هایی HTML را در ان بنویسید و خروجی بگیرید اگر هم از مک استفاده میکنید از Textedit میتوانید استفاده کنید.

در ۴ مرحله شما میتوانید در Notepad کد های HTML بنویسید.

مرحله ۱ : Notepad را باز کنید

برای باز کردن Notepad میتوانید از طریق قسمت جستجو در ویندوز عبارت Notepad را جستجو کنید و سپس Notepad را اجرا کنید و یا با کلیک راست کردن از قسمت “New>Text Ducument ” یک سند متنی جدید ایجاد کنید.

اگر هم مک دارید این قسمت را بخوانید :

برای اجرای Textedit در مک شما باید از طریق “Preferences>New Ducument>Slect plain text” یک سند متنی جدید ایجاد کنید.

مرحله ۲ :شروع کنید

حالا شما میتوانید کد زیر را در فایلی که ساختید اضافه کنید :


<!DOCTYPE html>
<html>
<body>

<h1>اولین سربرگ من</h1>

<p>اولین پاراگراف من</p>

</body>
</html>

html-editor-1

مرحله ۳ : ذخیره کردن فایل

پس از اینکه کد را به Notepad اضافه کردید حال میتوانید این فایل را ذخیره کنید . برای اینکار میبایست از طریق ” File>Save as ” اقدام کنید.

html-editor-2

در قسمت Fline name نام فایل را بنویسید با پسوند .html

در قسمت Encoding حالت ذخیره سازی را بر روی utf-8 قرار دهید تا از کاراکتر های پارسی نیز پشتیبانی کند.

بخوانید  اموزش اچ تی ام ال 7:پاراگراف ها

در اخر بر روی دکمه Save کلیک کنید تا فایل ذخیره شود.

html-editor-3

مرحله ۴ : کد ها را در صفحه مرورگر مشاهده کنید

html-editor-4

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

موفق و پیروز باشید;-)

منبع : www.w3schools.com

 

محمد جواد فرکاریان

علاقه مند به سیستم مدیریت محتوای وردپرس هستم و اموزش ها ی در رابطه با سیستم مدیریت محتوای وردپرس را با شما عزیزان به اشتراک میگذارم . لبخند را هیچ وقت فراموش نکنید ;-)

0 دیدگاه

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