نحوه یادگیری HTML

محتوا

مراحل
قسمت 1 از 2: یادگیری اصول HTML
قسمت 2 از 2: HTML پیشرفته
نکات
هشدارها
چه چیزی نیاز دارید

HTML مختصر انگلیسی است زبان نشانه گذاری Hyper Text (زبان نشانه گذاری ابرمتن). این کد یا زبانی است که در آن نشانه گذاری اولیه سایت ها ایجاد می شود. اگر هرگز برنامه نویسی نکرده اید ، یادگیری سخت به نظر می رسد ، اما در واقع تنها چیزی که برای شروع نیاز دارید یک ویرایشگر متن اصلی و مرورگر اینترنت است. حتی ممکن است نمونه هایی از نشانه گذاری HTML را که در انجمن های اینترنتی ، صفحات سفارشی سفارشی یا مقالات wikiHow مشاهده کرده اید ، تشخیص دهید. HTML یک ابزار مفید برای هر کاربر اینترنت است و یادگیری اصول اولیه کمتر از آنچه فکر می کنید طول می کشد.

مراحل

قسمت 1 از 2: یادگیری اصول HTML

1 یک سند HTML باز کنید. اکثر ویرایشگرهای متنی (Notepad یا Notepad ++ برای Windows ، TextEdit برای Mac ، gedit برای GNU / Linux) می توانند برای تولید فایل های HTML استفاده شوند. یک سند جدید ایجاد کرده و با استفاده از File → Save As in Web Page Format ذخیره کنید یا پسوند فایل را به .doc ، .rtf یا پسوند دیگر به .html یا .htm تغییر دهید.
- ممکن است هشدار دریافت کنید که فایل به جای قالب RTF به عنوان "متن ساده" ذخیره می شود ، یا قالب بندی و تصاویر ذخیره نمی شوند. این خوبه؛ برای HTML به این گزینه ها نیازی نیست.
2 فایل ایجاد شده را در مرورگر باز کنید. فایل خالی را ذخیره کنید ، آن را در رایانه خود بیابید و روی آن دوبار کلیک کنید تا باز شود. یک صفحه خالی باید در مرورگر باز شود. اگر چنین نشد ، فایل را به نوار آدرس مرورگر خود بکشید. هنگام ویرایش فایل HTML ، می توانید این صفحه را برای مشاهده تغییرات تازه کنید.
- لطفاً توجه داشته باشید که به این ترتیب شما در حال ایجاد وب سایت در اینترنت نیستید. سایر افراد به این صفحه دسترسی نخواهند داشت و برای آزمایش صفحه محلی خود نیازی به اتصال به اینترنت ندارید. مرورگر به سادگی کد HTML را تفسیر می کند و آن را "به عنوان یک وب سایت" می خواند.
3 درک کنید که برچسب های نشانه گذاری چیست. بر خلاف متن معمولی ، برچسب ها در صفحه ظاهر نمی شوند. در عوض ، آنها به مرورگر می گویند که چگونه صفحه و محتوای آن را نمایش دهد. برچسب "باز کردن" شامل دستورالعمل هایی است. به عنوان مثال ، می تواند به مرورگر بگوید که متن باید به صورت نمایش داده شود جسورانه... همچنین به یک برچسب "پایان" نیاز دارد تا مرورگر را نشان دهد که دستورالعمل در کجا به پایان می رسد. در این مثال ، متن بین برچسب های شروع و پایان به صورت برجسته نمایش داده می شود. برچسب ها در داخل علائم نابرابر نوشته می شوند ، اما تگ انتهایی با یک خط افقی رو به جلو شروع می شود.
- برچسب باز بین علائم نابرابری نوشته شده است: برچسب باز کردن>
- در برچسب پایانی ، یک اسلاید رو به جلو قبل از توصیف کننده برچسب (نام) قرار می گیرد: /تگ پایان>
- برای اطلاع از نحوه استفاده از برچسب های مختلف به ادامه مطلب بروید. برای این مرحله ، فقط باید فرمت ضبط را به خاطر بسپارید. برچسب ها بین علائم نابرابری نوشته می شوند:> و />
- در برخی از آموزشها ، تگ های HTML را عناصر ، و متن بین برچسب های باز و بسته را محتوای عنصر می نامند.
4 برچسب html> را در ویرایشگر وارد کنید. هر فایل HTML باید با یک برچسب شروع شود html> و با برچسب پایان دهید / html>... این برچسب ها به مرورگر می گویند که تمام محتوای بین برچسب ها در HTML است. این برچسب ها را به سند خود اضافه کنید:
- اغلب فایلهای HTML با خط شروع می شوند ! DOCTYPE html>این بدان معناست که مرورگرها باید کل فایل را به عنوان HTML تشخیص دهند. این خط ضروری نیست ، اما می تواند به شما در رفع مشکلات سازگاری کمک کند.
- شماره گیری html> در بالای سند
- برای ایجاد چندین خط خالی ، Enter یا Return را چند بار فشار دهید ، سپس تایپ کنید / html>
- به یاد بیاور تمام کدی که در این مقاله ایجاد می کنید باید بین این دو برچسب نوشته شود.
5 یک head> section در فایل ایجاد کنید. بین برچسب های html> و / html> ، یک تگ باز ایجاد کنید سر> و برچسب پایانی / head>... چند خط خالی بین آنها اضافه کنید. محتوای نوشته شده بین برچسب های head> و / head> در خود صفحه نمایش داده نمی شود. این مراحل را دنبال کنید و خواهید دید که این برچسب برای چیست:
- بین برچسب های head> و / head> ، بنویسید عنوان> و / عنوان>
- بین عنوان> و / title> برچسب ها ، بنویسید نحوه یادگیری HTML - wikiHow.
- تغییرات خود را ذخیره کرده و فایل را در مرورگر باز کنید (یا اگر فایل قبلاً باز شده است صفحه را بازخوانی کنید). متنی را که در عنوان صفحه بالای نوار آدرس ظاهر می شود مشاهده می کنید؟
6 یک body> section ایجاد کنید. همه برچسب ها و متن های دیگر در این مثال در قسمت بدنه نوشته شده اند که محتوای آنها در صفحه نمایش داده می شود. بعد از تگ بستن / head> ، اما قبل از tag / html> افزودن برچسب بدن> و / body>... در بقیه این مقاله ، با بخش بدن کار کنید. فایل شما باید چیزی شبیه به این باشد:
html>
سر>
title> نحوه یادگیری HTML - wikiHow / title>
/ head>
بدن>
/ body>
/ html>
7 با استفاده از سبک های مختلف متن اضافه کنید. وقت آن است که محتوای واقعی را به صفحه اضافه کنید! هر چیزی که بین برچسب های بدن می نویسید پس از تازه شدن در مرورگر در صفحه نمایش داده می شود. استفاده نکن نمادها یا >زیرا مرورگر سعی می کند محتوا را به عنوان یک متن به عنوان یک متن تفسیر کند. نوشتن سلام! (یا هر چیزی که دوست دارید) ، سپس این برچسب ها را به متن اضافه کنید و ببینید چه اتفاقی می افتد:
- em> سلام به همه! / em> متن را "کج" می کند: سلام!
- strong> سلام به همه! / strong> متن را "پررنگ" می کند: سلام!
- s> سلام به همه! / s> متن خط کش: ~~سلام!~~
- sup> سلام به همه! / sup> فونت را به عنوان یک زیرنویس نشان می دهد:
- sub> سلام به همه! / sub> فونت را به عنوان زیرنویس نمایش می دهد: _سلام!
- برچسب های مختلف را با هم امتحان کنید. چگونه به نظر می رسد em> strong> سلام به همه! / strong> / em>?
8 متن را به پاراگراف تقسیم کنید. اگر سعی کنید چندین خط متن را در یک فایل HTML بنویسید ، متوجه می شوید که خطوط شکسته در مرورگر نمایش داده نمی شوند. برای تقسیم متن به پاراگراف ، باید برچسب ها را اضافه کنید:
- p> این یک پاراگراف جداگانه است. / p>
- این جمله قبل از شروع این سطر با یک خط شکستن br> دنبال می شود.
  این اولین برچسب است که نیازی به تگ پایان ندارد. این برچسب ها برچسب های "خالی" نامیده می شوند.
- ایجاد سرفصل برای نشان دادن عناوین بخش:
  h1> عنوان متن / h1>: بزرگترین عنوان
  h2> عنوان متن / h2> (عنوان سطح دوم)
  h3> عنوان متن / h3> (عنوان سطح سوم)
  h4> عنوان متن / h4> (عنوان سطح چهارم)
  h5> عنوان متن / h5> (کوچکترین عنوان)
9 آموزش ایجاد لیست روش های مختلفی برای ایجاد لیست در صفحه وب وجود دارد. گزینه های زیر را امتحان کنید و تصمیم بگیرید کدام را بیشتر دوست دارید. توجه داشته باشید که برای یک لیست به طور کلی یک جفت برچسب مورد نیاز است (به عنوان مثال ، ul> و / ul> برای یک لیست گلوله ای) ، و هر مورد لیست با یک جفت برچسب متفاوت برجسته می شود ، به عنوان مثال ، li> و / li>.
- لیست گلوله ای:
  ul> li> خط اول / li> li> خط دوم / li> li> و غیره / li> / ul>
- لیست شماره گذاری شده:
  ol> li> One / li> li> Two / li> li> Three / li> / ol>
- لیست تعریف:
  dl> dt> قهوه / dt> dd> - نوشیدنی گرم / dd> dt> لیموناد / dt> dd> - نوشیدنی سرد / dd> / dl>
10 صفحه را با استفاده از چیدمان کنید خطوط شکسته، خطوط افقی و تصاویر. وقت آن است که چیزی غیر از متن به صفحه اضافه کنید. برچسب های زیر را امتحان کنید یا برای اطلاعات بیشتر پیوندها را دنبال کنید. از یک سرویس میزبانی آنلاین برای ایجاد پیوند به تصویری که می خواهید ارسال کنید استفاده کنید:
- خط افقی: ساعت>
- درج تصویر: img src = "پیوند تصویر">
11 پیوندها را اضافه کنید. می توانید از این برچسب ها برای ایجاد پیوندها به صفحات و سایت های دیگر استفاده کنید ، اما از آنجا که هنوز وب سایت ندارید ، اکنون نحوه ایجاد پیوندهای متصل ، یعنی پیوندها به مکانهای خاص یک صفحه را خواهید آموخت:
- یک لنگر با تگ a> که می خواهید در صفحه پیوند دهید ایجاد کنید. یک نام واضح و به یاد ماندنی بیاورید:
  
  a name = "Tips"> متنی که به آن پیوند می دهید. / a>
- از تگ href> برای ایجاد پیوند نسبی یا پیوند به منبع خارجی استفاده کنید:
  
  a href = "پیوند به صفحه یا نام لنگر درون صفحه"> متن یا تصویری که به عنوان پیوند عمل می کند. / a>
- برای پیوند دادن به پیوند نسبی در صفحه دیگر ، علامت # را بعد از پیوند اصلی و نام لنگر اضافه کنید. به عنوان مثال ، https://fa.wikihow.com/learn-HTML# نکات مربوط به بخش نکات این صفحه را پیوند می دهد.

قسمت 2 از 2: HTML پیشرفته

1 با ویژگی ها آشنا شوید. ویژگی ها در داخل برچسب نوشته شده اند که اطلاعات اضافی را نشان می دهد. قالب ویژگی ها به شرح زیر است: نام = "ارزش"، جایی که عنوان یک ویژگی را تعریف می کند (به عنوان مثال ، رنگ برای یک ویژگی رنگ) ، و مقدار مقدار آن را نشان می دهد (به عنوان مثال ، قرمز برای رنگ قرمز)
- ویژگیها در واقع در قسمت قبل در مورد اصول HTML استفاده شده است. تگ img> از ویژگی استفاده می کند src، لنگرهای پیوند نسبی از ویژگی استفاده می کنند نامو پیوندها از ویژگی استفاده می کنند href... همانطور که قبلاً متوجه شده اید ، همه ویژگی ها با فرمت نوشته می شوند ___='___’.
2 با جداول HTML آزمایش کنید. ایجاد یک جدول شامل استفاده از برچسب های مختلف است. می توانید آزمایش کنید یا دستورالعمل های دقیق تر را بخوانید.
- ایجاد برچسب های جدول:جدول> / جدول>
- محتویات هر سطر در جدول را در برچسب ها قرار دهید: tr>
- عنوان ستون با برچسب تعریف می شود: th>
- سلول ها در سطرهای بعدی: td>
- نمونه ای از استفاده از این برچسب ها:
  
  جدول> tr> th> ستون 1: ماه / th> th> ستون 2: پس انداز / th> / tr> tr> td> ژانویه / td> td> 5000 روبل / td> / tr> / جدول>
3 برچسب های اضافی بخش سر را بیاموزید. شما قبلاً تگ head> که در ابتدای هر فایل html قرار دارد را آموخته اید. علاوه بر تگ عنوان> برچسب ها ، تگ های دیگری نیز برای این بخش وجود دارد:
- متا برچسب هایی که شامل می شوند فرادادهموتورهای جستجو برای فهرست بندی سایت استفاده می کنند. برای اینکه سایت خود را در موتورهای جستجو راحت تر بیابید ، از یک یا چند متا> برچسب بازکن استفاده کنید (بستن برچسب ها لازم نیست).از یک ویژگی و یک مقدار در هر برچسب استفاده کنید: meta name = "description" content = "description page">؛ یا meta name = "keywords" content = "کلمات کلیدی جدا شده با کاما">
- پیوند> برچسب هایی که به فایل های شخص ثالث اشاره می کنند ، مانند شیوه نامه (CSS) ، که با استفاده از نوع دیگری از کدگذاری ایجاد می شوند و به شما امکان می دهند صفحه HTML را با استفاده از رنگ ، تراز متن و بسیاری از ویژگی های دیگر تغییر دهید.
- اسکریپت> تگ های مورد استفاده برای پیوست کردن فایل های جاوا اسکریپت به صفحه. این فایل ها برای اصلاح تعاملی صفحه (در پاسخ به اقدامات کاربر) مورد نیاز است.
4 با کد HTML سایت های دیگر آزمایش کنید. مشاهده کد منبع سایر صفحات وب راهی عالی برای یادگیری HTML است. می توانید روی صفحه کلیک راست کرده و از منوی بالای مرورگر خود View Source یا موارد مشابه را انتخاب کنید. سعی کنید بفهمید که یک برچسب ناآشنا چه کار می کند یا در اینترنت در مورد آن جستجو کنید.
- اگرچه نمی توانید سایت های دیگران را ویرایش کنید ، اما می توانید کد منبع را در فایل خود کپی کنید تا بعداً برچسب ها را آزمایش کنید. لطفاً توجه داشته باشید که نشانه گذاری CSS ممکن است در دسترس نباشد و رنگ و قالب بندی متفاوت به نظر برسند.
5 شروع به جستجوی راهنماهای دقیق تر کنید. سایت های زیادی در اینترنت به تگ های HTML اختصاص داده شده است ، مانند W3Schools یا HTMLbook. کتابهای کاغذی نیز به فروش می رسند ، اما سعی کنید با تغییر و تکامل استانداردها ، آخرین نسخه را بیابید. بهتر است ، بر CSS تسلط داشته باشید تا کنترل بیشتری روی طرح و ظاهر سایت خود داشته باشید. پس از یادگیری CSS ، طراحان وب معمولاً جاوا اسکریپت را یاد می گیرند.

نکات

Notepad ++ یک برنامه رایگان عالی است ، شبیه Notepad معمولی ، اما می توانید کد خود را بصورت آنلاین در مرورگر خود ذخیره و آزمایش کنید. (همچنین تقریباً از هر زبانی پشتیبانی می کند - HTML ، CSS ، Python ، JavaScript و غیره.)
چند صفحه ساده در شبکه پیدا کنید ، کد را در رایانه خود ذخیره کرده و با آن آزمایش کنید. سعی کنید متن را تغییر دهید ، فونت را عوض کنید ، تصاویر را جایگزین کنید - هر چه که باشد!
می توانید یک نوت بوک در جایی که برچسب ها را می نویسید نگه دارید تا همیشه آنها را در دست داشته باشید. همچنین می توانید این صفحه را چاپ کرده و به آن مراجعه کنید.
هنگام نوشتن کد ، این کار را با دقت انجام دهید تا شما و سایر افراد بتوانند آن را درک کنند. استفاده کنید! - نظر را در اینجا وارد کنید -> برای نظرات HTML: آنها در صفحه منعکس نمی شوند ، اما در سند کد قابل مشاهده هستند.
XML و RSS در حال افزایش محبوبیت هستند. خواندن و درک کد صفحات حاوی فناوری های XML و RSS برای یک کاربر بی تجربه دشوارتر است ، اما این ابزارها بسیار مفید هستند.
برچسب های نشانه گذاری در HTML به حروف کوچک و کوچک حساس نیستند ، اما توصیه می کنیم برای استانداردسازی و سازگاری با XHTML فقط از حروف کوچک (مانند مثالهای این مقاله) استفاده کنید.

هشدارها

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