یادگیری HTML

محتوا

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

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

گام برداشتن

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

سند HTML را باز کنید. بیشتر برنامه های پردازش کلمه ، از جمله Notepad یا Word برای Windows و Text Editor for Mac ، می توانند برای ایجاد اسناد HTML استفاده شوند. سند جدیدی را باز کنید و File menu Save As را از فهرست بالا انتخاب کنید تا سند خود را به عنوان صفحه وب ذخیره کنید یا پسوند پرونده را از ".doc" ، ".rtf" یا هر چیز دیگری به ".html" یا ".htm تغییر دهید "
- اکنون ممکن است یک هشدار مشاهده کنید که سند شما از قالب Rich Text Format (RTF) به قالب "متن ساده" تغییر می کند و برخی از گزینه ها و تصاویر قالب بندی به درستی ذخیره نمی شوند. می توانید این هشدار را نادیده بگیرید اسناد HTML از این گزینه ها استفاده نمی کنند.
- پرونده های .html و .htm یکسان هستند. هر دو کار می کند
سند خود را با یک مرورگر مشاهده کنید. سند خالی خود را ذخیره کنید ، آن را ببندید و سپس بر روی سند در محلی که در آن ذخیره شده است ، دوبار کلیک کنید تا دوباره باز شود. سند شما اکنون باید توسط مرورگر شما به عنوان یک صفحه وب خالی باز شود. اگر این کار نمی کند ، نماد فایل را به نوار آدرس مرورگر خود بکشید. بعداً ، اگر سند HTML خود را با دنبال کردن مراحل این مقاله ویرایش کنید ، به مرورگر خود ادامه خواهید داد تا بررسی کنید تغییرات کد چگونه است.
- توجه: صفحه وب شما هنوز آنلاین نیست. این صفحه برای دیگران قابل دسترسی نیست و برای آزمایش آن نیازی به اتصال اینترنتی فعال ندارید. شما فقط از مرورگر خود برای "خواندن" سند HTML مانند یک وب سایت استفاده می کنید.
درک کنید که "برچسب" چیست. مانند متن عادی ، برچسب ها در صفحه وب نهایی قابل مشاهده نیستند. برچسب ها به مرورگر شما نحوه نمایش صفحه و محتوای صفحه را می گویند. برچسب شروع شامل دستورالعمل است. به عنوان مثال ، می تواند به مرورگر بگوید که متن را به صورت پررنگ نشان دهد. برچسب پایان لازم است تا به مرورگر بگویید که دستورالعمل ها در کجا اعمال می شوند: در این مثال ، تمام متن بین برچسب شروع و پایان پررنگ است. برچسب های انتهایی نیز درون پرانتز قرار می گیرند ، اما یک بریدگی به دنبال اولین پرانتز است.
- برچسب های شروع را در براکت بنویسید: این روز شروع است>
- برچسب های انتهایی را در پرانتز بنویسید ، اما بعد از اولین پرانتز یک بریدگی قرار دهید: /این برچسب بسته شدن است>)
- بعداً در مقاله نحوه نوشتن برچسب های کاربردی را بخوانید. در این مرحله ، شما فقط باید به یاد داشته باشید که از چه روشی می توانید برچسب ها را بنویسید:> و />.
- در سایر دوره های HTML ، برچسب ها به عنوان "عناصر" و متن بین برچسب های باز و بسته نیز به عنوان "محتوای عنصر" نامیده می شوند.
اولین برچسب html> خود را بنویسید. هر سند HTML با یک شروع می شود html>برچسب گذاری می شود و با یک پایان می یابد / html>برچسب زدن این به مرورگر می گوید که همه چیز بین این برچسب ها با HTML نوشته شده است. این برچسب ها را به سند خود اضافه کنید:
- نوشتن html> در بالای سند خود قرار دهید.
- چندین بار وارد شوید یا برگردید تا فضای کمی به خودتان بدهید ، سپس بنویسید / html>
- یادت باشه همه چيز در این مقاله بین این دو برچسب
head> بخشی از سند خود را قرار دهید. بین برچسب های html> و / html> شما یک نامه می نویسید سر>برچسب شروع و a / سر>برچسب پایان دوباره بین این برچسب ها فاصله بگذارید. هر آنچه بین این برچسب ها نوشته شده باشد ، در خود صفحه وب قابل مشاهده نخواهد بود. مراحل زیر را امتحان کنید و ببینید آیا می توانید اطلاعات را از کجا نشان دهید؟
- بین برچسب های head> و / head> بنویسید: عنوان> و / عنوان>
- بین عنوان برچسب ها> و / عنوان> می نویسید: نحوه یادگیری HTML (با تصاویر) - wikiHow.
- سند را ذخیره کرده و در مرورگر باز کنید (یا اگر سند هنوز باز است سند را ذخیره کرده و صفحه را در مرورگر تازه کنید). آیا آنچه در بالای صفحه ، بالای نوار آدرس نوشتید ، می بینید؟
بخش body> ایجاد کنید. همه موارد دیگر در این سند مبتدی در بخش body> قرار می گیرد و در صفحه وب نشان داده می شود. بعد از برچسب / سر> ، اما در مقابل برچسب / html> شما می نویسید بدن> و / بدن>. هر آنچه را که در این مقاله بیشتر بحث خواهیم کرد ، بین برچسب های بدن قرار می دهیم. اکنون باید سندی داشته باشید که به این شکل باشد (بدون گلوله):
- html>
- سر>
- عنوان> یادگیری HTML - wikiHow / عنوان>
- / سر>
- بدن>
- / بدن>
- / html>
متن را به سبک های مختلف اضافه کنید. اکنون وقت آن است که شما شروع به نوشتن مطلبی کنید که در واقع در مرورگر قابل مشاهده خواهد بود! پس از ذخیره تغییرات و بازخوانی صفحه در مرورگر ، هر آنچه را که در برچسب های بدن می نویسید ، در مرورگر قابل مشاهده خواهد بود. نوشتن نه چیزی با علائم و >زیرا مرورگر شما آن را به جای متن ساده به عنوان دستورالعمل HTML تفسیر می کند. برای مثال بنویسید سلام دنیا! (به انگلیسی "Hello world!" ، این متن استاندارد جهانی به عنوان اولین نمونه در هر دوره برنامه نویسی در یک زبان برنامه نویسی خاص است) یا چیز دیگری ، و برچسب های زیر را قبل و بعد از متن قرار دهید و ببینید چه اتفاقی می افتد:
- آنها> سلام به جهان! / آنها> به نظر می رسد مانند متن کج شده: سلام دنیا!
- strong> سلام به جهان! / قوی> شبیه متن پررنگ است: سلام دنیا!
- s> سلام به جهان! / s> به نظر می رسد مانند متن خط حمله: ~~سلام دنیا!~~
- sup> سلام به جهان! / sup> به نظر می رسد مانند نسخه خطی:
- زیر> سلام به جهان! / زیر> شبیه کپشن است: _{سلام دنیا!}
- ترکیبات را امتحان کنید: چگونه می بیند آنها> قوی> سلام به جهان! / قوی> / آنها> برو بیرون؟
متن خود را به پاراگراف تقسیم کنید. اگر متن های مختلفی را در سند خود قرار دهید ، می بینید که همه سطرها یکی پس از دیگری قرار می گیرند. خطوط جدید و خطوط خالی را باید خود برنامه ریزی کنید:
- p> این یک قسمت جداگانه است. / p>
- این جمله در سطر اول و این جمله در سطر بعدی است.
  این اولین برچسبی است که با آن روبرو می شویم و نیازی به برچسب پایان ندارد! ما چنین برچسبی را یکی می نامیم برچسب خالی.
- برای شفاف سازی نام بخش ها ، سرصفحه ایجاد کنید:
  h1> سرصفحه / h1>: بزرگترین هدر ممکن
  h2> هدر / h2> (هدر 2 سطح)
  h3> هدر / h3> (هدر 3 سطح)
  h4> هدر / h4> (هدر 4 سطح)
  h5> هدر / h5> (کوچکترین هدر ممکن)
نحوه ایجاد لیست را بیاموزید. روش های مختلفی برای ایجاد لیست در یک صفحه وب وجود دارد. روش های زیر را امتحان کنید تا بفهمید چه چیزی را بیشتر دوست دارید. توجه داشته باشید که یک جفت برچسب در کل لیست قرار گرفته است (مانند برچسب ul> و / ul> برای لیست های غیر مرتب) و یک جفت برچسب متفاوت در اطراف هر مورد در لیست قرار دارد ، مانند li> و / li> .
- برای ایجاد لیست های دارای گلوله از کد زیر استفاده کنید:
  ul> li> یک مورد / li> li> مورد دیگر / li> li> مورد دیگر / li> / ul>
- یا این کد برای ایجاد لیست های شماره گذاری شده:
  ol> li> مورد 1 / li> li> مورد 2 / li> li> مورد 3 / li> / ol>
- یا این کد برای ایجاد یک لیست به اصطلاح تعریف:
  dl> dt> قهوه / dt> dd> - نوشیدنی گرم / dd> dt> شیر / dt> dd> - نوشیدنی سرد / dd> / dl>
صفحه خود را با خطوط ، خطوط و تصاویر جدید جذابتر کنید. اکنون وقت آن است که شروع به اضافه کردن موارد دیگر به صفحه خود کنید. برچسب های زیر را امتحان کنید (تصویر باید به صورت آنلاین ارسال شود تا بتوانید از پیوند به تصویر استفاده کنید):
- درج یک خط: br>> یا ساعت>
- درج تصاویر: img src = "the_url_of_your_image شما">
پیوندها را به مکانهای دیگر صفحه وارد کنید. همچنین می توانید از این کد برای پیوند دادن به صفحات و وب سایت های دیگر استفاده کنید ، اما از آنجا که هنوز وب سایتی ندارید ، ما بر روی "لنگرگاه ها" تمرکز خواهیم کرد که مکان های خاصی در صفحه ای هستند که می توانید به آنها پیوند دهید:
- ابتدا یک لنگر با برچسب a> در نقطه صفحه ای که می خواهید به آن پیوند دهید ایجاد کنید. نام واضحی را به لنگر خود اضافه کنید که به راحتی به خاطر سپرده شود:
  
  a name = "Tips"> این متنی است که لنگر خود را در اطراف آن قرار می دهید. / a>
- از برچسب href> برای پیوند دادن به لنگر خود یا صفحه وب دیگری استفاده کنید:
  
  a href = "url از صفحه وب یا نام لنگر در این صفحه"> متن یا تصویر نشان داده شده را به عنوان لینک در اینجا بنویسید. / a>
- برای پیوند دادن به لنگر در صفحه دیگر ، نویسه # را بعد از آدرس اضافه کنید و به دنبال آن نام لنگر خود را اضافه کنید. به عنوان مثال http://www.wikihow.com/HTML-leren# نکته ها شما را مستقیماً به بخش "نکات" در این صفحه هدایت می کنند.

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

درباره ویژگی ها بیاموزید. ویژگی ها درون برچسب قرار می گیرند و برای ایجاد تنظیمات اضافی در "محتوای عنصر" بین برچسب شروع و پایان استفاده می شوند. آنها هرگز تنها نمی مانند. آنها به روش زیر نوشته شده اند: نام = "ارزش". نام نام ویژگی را نشان می دهد (به عنوان مثال ، "رنگ") و مقدار این مورد خاص را توصیف می کند (به عنوان مثال "قرمز").
- اگر در قسمت قبلی این مقاله دقت کرده باشید ، قبلاً با صفاتی روبرو شده اید. برچسب img> از ویژگی استفاده می کند src، یک لنگر از ویژگی استفاده می کند نام و پیوندها از ویژگی استفاده می کنند href. می توانید بگویید همه آنها اندازه دارند ___='___’ پيگيري كردن.
با جداول HTML آزمایش کنید. برای تهیه جدول یا نمودار به چندین برچسب نیاز دارید:
- با برچسب های جدول ("جدول" به انگلیسی) در اطراف کل جدول شروع کنید:جدول> / جدول>
- برچسب ها را در اطراف محتوای هر سطر قرار دهید: tr>
- عنوان های ستون را در ردیف اول قرار دهید: هفتم>
- سلول ها را در ردیف های متوالی قرار دهید: td>
- این نمونه ای از چگونگی جمع شدن همه این موارد است:
  
  جدول> tr> هفتم> ستون 1: ماه / هفتم> هفتم> ستون 2: پول پس انداز / هفتم / / tr> tr> td> ژانویه / td> td> 100 € / td> / tr> / جدول>
سایر برچسب های استفاده شده در بخش head را بیاموزید. شما قبلاً تگ head> را آموخته اید ، که در ابتدای هر سند قرار می دهید. علاوه بر تگ عنوان> ممکن است برچسب های دیگری نیز در قسمت head وجود داشته باشد:
- برای ایجاد از برچسب های متا استفاده می شود فراداده درباره یک صفحه وب. این داده ها توسط موتورهای جستجو برای دسته بندی صفحات وب استفاده می شود. برای اینکه صفحه شما برای موتورهای جستجو قابل مشاهده باشد ، می توانید یک یا چند برچسب متا قرار دهید (برچسب های انتهایی ضروری نیستند) ، هر برچسب باید دقیقاً حاوی یک صفت نام و ویژگی محتوا باشد ، به عنوان مثال: description ">؛ یا meta name = "keywords" content = "لیستی از کلمات کلیدی را در اینجا بنویسید ، همیشه با کاما از هم جدا شوند">
- link> برچسب ها برای پیوند دادن پرونده های دیگر به صفحه استفاده می شوند. این صفحات که به طور معمول برای ارتباط صفحات سبک CSS با صفحات HTML استفاده می شود ، با نوع دیگری از کد ساخته می شوند و برای تعیین سبک کلی یک صفحه استفاده می شوند.
- script> برچسب ها برای ارتباط فایل های javascript با صفحه HTML استفاده می شود. Javascript اجازه می دهد تا صفحه در صورت انجام کار کاربر روی صفحه تغییر کند.
با HTML از صفحات موجود بازی کنید. مشاهده کد منبع صفحات وب راهی عالی برای گسترش دانش HTML است. بر روی صفحه کلیک راست کرده و "مشاهده منبع" ، "نمایش منبع صفحه" یا موارد دیگر را انتخاب کنید. بدانید که برچسب خاصی که نمی دانید چه کاری انجام می دهد یا به دنبال پاسخ آنلاین هستید.
- شما نمی توانید وب سایت های دیگران را ویرایش کنید ، اما می توانید کد HTML را در سند خود کپی کنید و با آن بازی کنید تا ببینید تنظیمات مختلف چه کاری انجام می دهد. توجه: از آنجا که بسیاری از وب سایت ها از ورق های سبک CSS استفاده می کنند ، ممکن است شما نتوانید بسیاری از رنگ ها یا سبک های دیگر را مشاهده کنید.
با خواندن مقالات بیشتر و دقیق تر ، درباره HTML اطلاعات کسب کنید. منابع بسیاری در اینترنت برای تسلط بر برچسب های HTML بیشتر مانند W3Schools یا Codecademy وجود دارد. همچنین بسیاری از کتابهای HTML موجود است ، اما اطمینان حاصل کنید که از نسخه اخیر استفاده می کنید زیرا استاندارد HTML هر از چند گاهی تغییر می کند. پس از تسلط کامل بر HTML ، می توانید برای کنترل بیشتر بر طراحی و سبک صفحه وب خود به CSS مراجعه کنید. بعد از آن ، مرحله بعدی معمولاً javascript است.

نکات

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

هشدارها

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

ضروریات

یک برنامه پردازش کلمه ، مانند Notepad (ویندوز) یا ویرایشگر متن (Mac).
یک ورق کاغذ یا دفتر (اختیاری)
برنامه ای ویژه برای نوشتن HTML مانند Notepad ++ برای Windows یا TextWrangler برای Mac (اختیاری)