دیسک بوت

ساده ترین صفحات وب به زبان html. ایجاد اولین صفحه وب. ایجاد یک صفحه وب با استفاده از HTML

سلام دوستان! آنهایی که بارها وبلاگ من را خوانده اند می دانند که من بارها چه گفته ام: برای گشت و گذار در اینترنت نیازی به مهارت برنامه نویسی خاص ندارید.

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

آیا می خواهید بدانید برای ایجاد وب سایت به چه زبان هایی نیاز است؟ سپس ادامه مطلب را بخوانید!

برخی از مفاد اساسی

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

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

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

اساس مطلقا هر سایتی است. این نحو مسئول نشانه گذاری ابر متن است. همه توسعه دهندگان وب باید آن را و همچنین جدول ضرب را بدانند.

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

زبانهای اصلی برنامه نویسی

اول از همه ، ارزش برجسته کردن جاوا اسکریپت است ، زیرا اساس همه برنامه نویسی است ، که شما باید هنگام ایجاد یک منبع وب بدانید. سیستم عامل های اصلی نرم افزار Silver Light و Adobe Flash هستند. علاوه بر این ، مورد اخیر کاملاً رایج است و برای مدت زمان نسبتاً طولانی توسط توسعه دهندگان وب استفاده می شود.

از این زبان ها برای ایجاد سایت های تعاملی استفاده می شود. پیش بینی می شود که به زودی Silver Light به طور کامل جایگزین Adobe Flash شود. در موارد نادر ، این دو محصول نرم افزاری برای ایجاد یک وب سایت کافی است ، اما استفاده از آنها فقط نامطلوب است.

انتخاب نحو مناسب نیز به سیستم عاملی که توسعه دهنده از آن استفاده می کند بستگی دارد. برای ایجاد یک منبع وب در ویندوز ، از فناوری که توسط Microsoft توسعه یافته است - ASP.NET اغلب استفاده می شود. این به شما امکان می دهد کاملاً هر منبع وب را ایجاد کنید ، هم ساده ترین و هم منبعی که قادر به پردازش تعداد قابل توجهی از درخواست ها باشد. برای استفاده از ASP.NET ، نباید دانش سطح کاربر ، بلکه دانش کمی عمیق تر داشته باشید.

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

بسیاری از افراد هنگام شروع به درک برنامه نویسی وب ، جاوا را انتخاب می کنند ، این قابل درک ترین و آسان ترین روش برای یادگیری است. Java Server Pages برای ایجاد محتوا استفاده می شود.

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

نتیجه

پارامترهای مختلفی برای انتخاب نحو مناسب وجود دارد ، یعنی:

  • نوع سیستم عامل مورد استفاده ؛
  • پیچیدگی و پویایی سایت در حال ایجاد ؛
  • زرادخانه موجود از دانش خود.

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

امیدوارم این مطالب برای شما مفید بوده باشد و شما خوشحال خواهید شد که این مقاله را با دوستان خود در شبکه های اجتماعی به اشتراک بگذارید. مشترک شدن در به روزرسانی های وبلاگ را فراموش نکنید. به زودی میبینمت!

ارادتمند شما! عبدولین روسلان

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

HTML

HTML یکی از قدیمی ترین زبان های برنامه نویسی وب است که در اوایل اینترنت ظاهر شد و خود را به عنوان یکی از ساده ترین و مطمئن ترین روش های برنامه نویسی وب معرفی کرده است. HTML مخفف Hyper Text Markup Language - Hypertext Markup Language است. سایتهایی که در بیشتر موارد با استفاده از فناوری HTML ایجاد شده اند مجموعه ای از صفحات ثابت هستند که نیازی به پایگاه داده ندارند.

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

مانند هر فناوری ، استاندارد HTML نیز ساکن نیست و امروزه استاندارد جدیدی به نام HTML5 وارد محیط توسعه وب می شود. این فناوری بسیار جوان است ، اما از نظر ایجاد سایت ها فرصت های خوبی را ایجاد می کند و به شما امکان می دهد قابلیت های جدیدی را که قبلاً غیرممکن بود ، پیاده سازی کنید. اگرچه فناوری HTML5 هنوز به طور کامل در زمینه توسعه وب ورود پیدا نکرده است و هنوز همه مرورگرهای اینترنت از آن پشتیبانی نمی کنند ، اما برنامه نویسان استودیوی وب سایت با در نظر گرفتن تأثیر HTML5 در توسعه بیشتر فناوری های اینترنت در آینده ، سایت هایی را با استفاده از پیشرفته ترین فن آوری های وب ایجاد می کنند -برنامه نويسي.

PHP

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

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

در توسعه اکثر سایتهای ایجاد شده توسط استودیوی سایت ، از فناوری PHP استفاده شده است ، زیرا پیوند دادن سایت با پایگاه داده ، با استفاده از کد PHP ، یک شرط ضروری برای ایجاد منابع اینترنتی پویا و چند منظوره است.

فلاش

اساساً خود این فناوری است گرگرفتگی یک زبان برنامه نویسی وب نیست ، اما برای ارائه عناصر نوشته شده در XML استفاده می شود.

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

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

WAP

WAP (پروتکل برنامه های بی سیم) یک فناوری است که به شما امکان می دهد از طریق دستگاه تلفن همراه خود مستقیماً به منابع اینترنت دسترسی پیدا کنید.

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

سایتهایی که برای WAP نوشته شده اند زبان نشانه گذاری خاص خود را دارند که به طور خاص برای تبادل اطلاعات با یک مرورگر WAP سازگار شده است. و اگر سایت های معمولی که برای مشاهده از طریق کامپیوتر طراحی شده اند بیشتر به زبان نوشته شده اند html, پی اچ پی, پرل، یا xml، سپس از استاندارد WML برای ایجاد سایت های WAP استفاده می شود ( زبان نشانه گذاری بی سیم) از جمله ، هنگام توسعه منابع WAP ، ما از قالب تصویر خود - WBMP استفاده می کنیم ، که امکان ساده سازی صفحه WAP را تا حد ممکن فراهم می کند.

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

ASP

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

پرل

پرل (استخراج عملی و گزارش Languge) یک زبان برنامه نویسی وب جهانی و تفسیری است که برای نوشتن اسکریپت های cgi و برنامه های cgi استفاده می شود که در سمت سرور اجرا می شوند و به شما امکان می دهند کار سایت را خودکار کنید. Perl یکی از راحت ترین و گسترده ترین محیط ها برای ایجاد صفحات وب پویاست ، اگرچه اخیراً توسط فناوری های جدیدتر اینترنت جایگزین شده است. قالب Perl ابزاری عالی برای تعامل با وب سرورها از طریق CGI است ( رابط تعامل مشترک) در حال حاضر ، زبان Perl نسبت به آنالوگ عملکردی خود - PHP در حال از دست دادن است.

C +

C ، C ++ - زبان های برنامه نویسی وب گسترده ای که برای نوشتن اسکریپت های cgi استفاده می شود. در حال حاضر توسط اکثر سرورها پشتیبانی می شود. اسکریپت های نوشته شده با C + باید در سمت سرور وارد شوند.

SSI

SSI (سمت سرور شامل شود) یک فناوری است که به شما امکان می دهد یک صفحه وب را از چندین اسکریپت یا فایل در یک کل عملکردی واحد جمع آوری کنید. SSI به شما امکان می دهد اطلاعات سمت سرور را در یک صفحه وب که با استفاده از HTML در دسترس نیست ، قرار دهید. در حقیقت ، SSI نوعی آنالوگ شامل PHP است. به شما امکان می دهد عناصر مشترک برای هر یک یا گروهی از صفحات را در کد سایت قرار دهید ، به شما امکان می دهد هر صفحه را فقط از طریق یک فایل ویرایش کنید. دستورالعمل های SSI پشتیبانی می شوند .shtml, .htm و .html و در پرونده .htaccess نوشته شده است.

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

طرح ها یا نمونه های اولیه یک وب سایت معمولاً در برنامه های طراحی گرافیکی ایجاد می شود. از بین برنامه های حرفه ای ، سه مورد رایج را جدا می کنیم - این موارد عبارتند از: Adobe illustratorو CorelDRAW... البته بسیاری از برنامه های کمتر حرفه ای اما جالب توجه کمتر نیز وجود دارد ، اما ما هنوز روی آنها تمرکز نخواهیم کرد.

مرحله بعد - این یک سری خسته کننده از اصلاحات و تأییدهای بی شمار این طرح ها توسط مشتری است.

خوب ، طراحی سایت ایجاد شده ، مورد بازبینی و تأیید مشتری قرار گرفته است ، اکنون باید طرح بندی شود ، اما طرح آن چیست؟

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

و سرانجام ، آخرین مرحله - "بارگذاری" سایت پایان یافته بر روی سرور استقرار دائمی ، تنظیم و رفع اشکال ، به طوری که همه چیز همانطور که نیاز داریم بدون اشکالات و اشکالات کار می کند.

بنابراین ، برای نوشتن یک وب سایت ، باید زبان های برنامه نویسی زیر را بدانید: HTML ، CSS ، JavaScript ، PHP ، MYSQL... زبانهای دیگری نیز وجود دارد اما امروزه این زبانها محبوب ترین آنها هستند. و من در مورد هر زبان با جزئیات بیشتری به شما خواهم گفت.

HTML (HyperText Markup Language) یک زبان نشانه گذاری است که نحوه نمایش اطلاعات را توصیف می کند. از این زبان برای ایجاد پایه و اساس سایت و به عبارتی برای اسکلت سایت استفاده می شود.

CSS (Cascading Style Sheets) زبانی است که با آن می توانید ظاهر یک صفحه وب را کنترل کنید. با CSS می توانید مشخصات دقیق تقریباً همه عناصر یک صفحه وب را تعیین کنید.

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

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

MYSQL یک پایگاه داده است. با استفاده از این زبان می توانید داده ها را اضافه ، تغییر یا حذف کنید ، اطلاعات مورد نیاز را دریافت کنید. اگر MYSQL را می دانید به راحتی می توانید سایر زبانهای پایگاه داده را یاد بگیرید.

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

HTML و CSS چیست؟

HTML (HyperText Markup Language) ساختار محتوا و معنای آن را تعریف می کند ، محتوایی مانند عنوان ، عنوان ها ، پاراگراف ها یا تصاویر را تعریف می کند. CSS (Cascading Style Sheets) یا Cascading Style Sheets یک زبان ارائه است که برای سبک سازی ظاهر محتوا ، با استفاده از مثلاً فونت یا رنگ ، طراحی شده است.

این دو زبان - HTML و CSS مستقل از یکدیگر هستند و باید به همین ترتیب باقی بمانند. CSS نباید در داخل یک سند HTML نوشته شود و بالعکس. به طور معمول ، HTML همیشه نمایانگر محتوا است و CSS همیشه شکل ظاهری آن را تعیین می کند.

با این درک از تفاوت بین HTML و CSS ، بیایید با جزئیات بیشتر به HTML برویم.

اصطلاحات اساسی HTML

قبل از شروع با HTML ، احتمالاً با اصطلاحات جدید و غریب غریبی روبرو خواهید شد. با گذشت زمان با همه آنها بیشتر آشنا خواهید شد ، اما در حال حاضر باید با سه اصطلاح اصلی HTML - عناصر ، برچسب ها و ویژگی ها شروع کنید.

المانها

عناصر نحوه تعریف ساختار و محتوای اشیا را در یک صفحه نشان می دهند. برخی از عناصر معمولاً استفاده شده شامل چندین سطح عنوان (به عنوان عناصر دارای تعریف می شوند)

قبل از

) و پاراگراف ها (تعریف شده به صورت

) می توانید مواردی را در لیست قرار دهید ,

, , و و خیلی های دیگر.

موارد با استفاده از براکت های زاویه ای مشخص می شوند<>پیرامون نام عنصر بنابراین ، عنصر به صورت زیر خواهد بود:

برچسب ها

افزودن براکت های زاویه ای< и > در اطراف عنصر چیزی را ایجاد می کند که به عنوان برچسب شناخته می شود. برچسب ها معمولاً در جفت برچسب های شروع و پایان یافت می شوند.

یک برچسب باز آغازگر یک عنصر است. این نماد تشکیل شده است<, затем идёт имя элемента и завершается символом >؛ به عنوان مثال،

.

برچسب پایان پایان یک عنصر را نشان می دهد. این نماد تشکیل شده است< с последующей косой чертой и именем элемента и завершается символом >؛ به عنوان مثال،

.

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

بنابراین ، برچسب های پیوند مانند این به نظر می رسند:

...

ویژگی های

ویژگی ها خصوصیاتی هستند که برای ارائه اطلاعات اضافی در مورد یک عنصر استفاده می شوند. معمول ترین ویژگی ها شامل ویژگی id هستند که عنصر را مشخص می کند. ویژگی class که عنصر را طبقه بندی می کند. ویژگی src ، منبع محتوای جاسازی شده را مشخص می کند. و یک ویژگی href که نشان دهنده پیوند به منبع مرتبط است.

ویژگی ها در برچسب شروع پس از نام عنصر تعریف می شوند. به طور کلی ، ویژگی ها شامل نام و مقدار هستند. قالب این ویژگی ها از نام ویژگی و به دنبال آن علامت برابر و به دنبال آن مقدار ویژگی در گیومه تشکیل شده است. به عنوان مثال ، عنصر با ویژگی href به این شکل است:

شای هو

نمایش اصطلاحات اصلی HTML

این کد متن "Shay Howe" را در صفحه وب نمایش می دهد و با کلیک روی آن کاربر به http://shayhowe.com منتقل می شود. عنصر پیوند با برچسب باز اعلام می شود و برچسب بسته شدن متن ، و همچنین ویژگی و مقدار URL پیوند اعلام شده از طریق href \u003d "http://shayhowe.com" در برچسب باز.

شکل: 1.01 نحو HTML schema شامل عنصر ، ویژگی و برچسب است

اکنون که دانستید عناصر ، برچسب ها و ویژگی های HTML چیست ، بیایید نگاهی به اولین صفحه وب خود بیندازیم. اگر چیزی در اینجا جدید به نظر می رسد ، نگران نباشید - ما در طول راه همه چیز را رمزگشایی خواهیم کرد.

تنظیم ساختار سند HTML

اسناد HTML اسناد متنی ساده هستند که به جای .txt با پسوند .html ذخیره می شوند. برای شروع نوشتن HTML ، ابتدا به یک ویرایشگر متن نیاز دارید که استفاده از آن راحت باشد. متأسفانه ، این شامل Microsoft Word یا Pages نیست زیرا آنها ویرایشگرهای پیچیده ای هستند. Dreamweaver و Sublime Text دو محبوب ترین ویرایشگر متن برای نوشتن HTML و CSS هستند. گزینه های رایگان نیز Notepad ++ برای Windows و TextWrangler برای Mac هستند.

تمام اسناد HTML حاوی یک ساختار اجباری است که شامل اعلامیه ها و عناصر زیر است: , , و .

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

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

تمام محتوای قابل مشاهده صفحه وب در عنصر خواهد بود ... ساختار یک سند HTML معمول مانند این است:

سلام دنیا!

سلام دنیا!

این یک صفحه وب است.

نمایش ساختار یک سند HTML

این کد سند را با اعلامیه نوع سند نشان می دهد ، ، سپس بلافاصله عنصر می آید ... داخل اقلام می روند و ... عنصر شامل رمزگذاری صفحه از طریق برچسب است و عنوان سند را از طریق عنصر ... عنصر <body> شامل یک سرصفحه از طریق یک عنصر است <h1> و یک پاراگراف از متن را از طریق<р> ... از آنجا که هر دو عنوان و پاراگراف درون عنصر قرار دارند <body> ، آنها در صفحه وب قابل مشاهده هستند.</p><p>هنگامی که یک عنصر درون یک عنصر دیگر است ، که به عنوان یک عنصر تودرتو نیز شناخته می شود ، ایده خوبی است که به آن دندانه اضافه کنید تا ساختار سند به خوبی سازمان یافته و خوانا باشد. در کد قبلی ، هر دو عنصر است <head> و <body> درون یک عنصر قرار گرفته و جابجا شده است <html> ... ساختار بالشتک برای عناصر با عناصر اضافه شده جدید در داخل ادامه می یابد <head> و <body> .</p><h3>عناصر خود بسته شونده</h3><p>در مثال قبلی ، عنصر <meta> تنها برچسبی بود که شامل برچسب پایانی نبود. نگران نباشید ، این عمدی بود. همه عناصر از برچسب های شروع و پایان تشکیل نشده اند. برخی از عناصر به سادگی محتوا یا رفتار را از طریق ویژگی های درون همان برچسب دریافت می کنند. <meta> یکی از این عناصر است. محتوای عنصر <meta> در مثال با استفاده از ویژگی و مقدار charset اختصاص داده شده است. سایر عناصر معمول خود بسته شونده عبارتند از:</p><ul><li><br> </li><li><embed> </li><li><hr> </li><li><img> </li><li><input> </li><li><li><meta> </li><li><param> </li><li><source> </li><li><wbr> </li> </ul><p>ساختار کاهش یافته با اعلامیه نوع سند<!DOCTYPE html> و عناصر <html> , <head> و <body> ، کاملاً رایج است. ما می خواهیم این ساختار سند مفید باشد زیرا در هنگام ایجاد اسناد جدید HTML از آن استفاده مکرر خواهیم کرد.</p><h3>اعتبار کد</h3><p>مهم نیست که ما کد خود را با چه دقت بنویسیم ، اشتباهات اجتناب ناپذیر هستند. خوشبختانه ، هنگام نوشتن HTML و CSS ، ما اعتبارسنجی داریم تا کار خود را تأیید کنیم. W3C اعتبار سنج HTML و CSS را ارائه می دهد که کد را برای مشاهده خطاها اسکن می کنند. اعتبارسنجی کد ما نه تنها به نمایش صحیح آن در همه مرورگرها کمک می کند ، بلکه به شما در آموزش بهترین روش های کدگذاری نیز کمک می کند.</p><h2>در تمرین</h2><p>ما به عنوان طراحان وب و توسعه دهندگان جلویی ، این شانس را داریم که در تعدادی از کنفرانس های بزرگ اختصاص داده شده به کار خود شرکت کنیم. ما قصد داریم کنفرانس سبک های خود را تشکیل دهیم و در دوره های بعدی وب سایتی برای آن ایجاد کنیم. مثل این!</p><br><img src='https://i2.wp.com/webref.ru/assets/images/learn-html-css/practice-1.png' width="100%" loading=lazy><p>بیایید کمی از HTML دور شویم و نگاهی به CSS بیندازیم. به یاد داشته باشید ، HTML محتوای و ساختار صفحات وب ما را تعریف می کند ، در حالی که CSS سبک بصری و شکل ظاهری آنها را تعریف می کند.</p><h2>اصطلاحات اساسی CSS</h2><p>علاوه بر اصطلاحات HTML ، چند اصطلاح اساسی CSS نیز وجود دارد که لازم است با آنها آشنا شوید. این اصطلاحات شامل انتخابگرها ، خصوصیات و مقادیر هستند. همانند اصطلاحات HTML ، هرچه بیشتر با CSS کار کنید ، این اصطلاحات برای شما ماهیت دوم پیدا می کنند.</p><h3>انتخاب کنندگان</h3><p>وقتی عناصر به یک صفحه وب اضافه می شوند ، می توان آنها را با استفاده از CSS سبک کرد. انتخابگر تعیین می کند که کدام عنصر یا عنصر در HTML را هدف قرار دهد و سبکها را (مانند رنگ ، اندازه و موقعیت) در آنها هدف قرار دهد. بسته به نوع خاص بودن ما ، انتخاب کنندگان می توانند ترکیبی از معیارهای مختلف را برای انتخاب موارد منحصر به فرد در نظر بگیرند. به عنوان مثال ، ما می خواهیم هر پاراگراف را در یک صفحه انتخاب کنیم ، یا فقط یک پاراگراف خاص را انتخاب کنیم.</p><p>انتخابگرها معمولاً با یک مقدار ویژگی مانند شناسه یا مقدار کلاس یا یک نام عنصر مانند موارد دیگر مرتبط می شوند <h1> یا<р> .</p><p>در CSS ، انتخابگرها با مهاربندهای فرفری () ترکیب می شوند تا سبکهای اعمال شده روی عنصر انتخاب شده را در بر بگیرد. این انتخابگر تمام عناصر را هدف قرار می دهد <span><p>پ (...)</p><h3>خواص</h3><p>پس از انتخاب یک عنصر ، ویژگی سبک هایی را که به آن اعمال می شوند تعیین می کند. نام خاصیت از انتخابگر ، داخل پرانتزهای فرفری () و بلافاصله قبل از روده بزرگ پیروی می کند. ویژگی های بسیاری وجود دارد که می توانیم از آنها استفاده کنیم ، مانند پس زمینه ، رنگ ، اندازه قلم ، ارتفاع و عرض و سایر خصوصیات معمولاً اضافه شده. در کد زیر ، خصوصیات رنگ و اندازه قلم را که برای همه عناصر اعمال می شود ، تعریف می کنیم <span><p>P (رنگ: ... ؛ اندازه قلم: ...؛)</p><h3>ارزش ها</h3><p>تا کنون ، ما فقط یک عنصر را از طریق انتخابگر انتخاب کرده ایم و مشخص کرده ایم که کدام سبک را از طریق ویژگی هایی که می خواهیم برای آن اعمال کنیم ، تعیین کردیم. اکنون می توانیم رفتار این ویژگی را از طریق مقدار تنظیم کنیم. مقادیر را می توان به عنوان متن بین دون و ویرگول تعیین کرد. در زیر همه عناصر را انتخاب می کنیم <p >و مقدار خاصیت رنگ را روی نارنجی و مقدار ویژگی font-size را روی 16 پیکسل قرار دهید.</p><p>P (رنگ: نارنجی ؛ اندازه قلم: 16px؛)</p><p>برای آزمایش ، در CSS ، قوانین ما با انتخابگر شروع می شود و بلافاصله با بریس های فرفری دنبال می شود. این مهاربندهای مجعد حاوی اعلامیه هایی از جفت خصوصیات و مقادیر هستند. هر اعلامیه با یک خاصیت شروع می شود و به دنبال آن یک نقطه کول ، مقدار املاک و در آخر یک نقطه ویرگول می آید.</p><p>این یک عمل معمول است که یک جفت ویژگی و مقادیر را درون پرانتزهای فر قرار دهید. مانند HTML ، دندانه دار بودن به نظم و درک کد ما کمک می کند.</p><p><img src='https://i1.wp.com/webref.ru/assets/images/learn-html-css/css-syntax-outline.png' height="138" width="257" loading=lazy></p><p>شکل: 1.03 ساختار نحو CSS شامل انتخابگر ، خصوصیات و مقادیر است</p><p>دانستن چند اصطلاح اساسی و نحو کلی CSS یک شروع عالی است ، اما قبل از اینکه به عمق بپردازیم چند نکته دیگر برای یادگیری داریم. به طور خاص ، باید نگاه دقیق تری به نحوه کار انتخابگرها در CSS داشته باشیم.</p><h2>کار با سلکتورها</h2><p>همانطور که قبلاً ذکر شد ، انتخابگرها نشان می دهند که کدام عناصر HTML سبک می شوند. درک کامل نحوه استفاده از سلکتورها و نحوه کار آنها بسیار مهم است. اولین قدم آشنایی با انواع انتخابگرها است. ما با ابتدایی ترین انتخابگرها شروع می کنیم: انتخابگرهای نوع ، کلاس ها و شناسه ها.</p><h3>انتخابگرها را تایپ کنید</h3><p>انتخاب کنندگان نوع عناصر را با توجه به نوع آنها هدف قرار می دهند. به عنوان مثال ، اگر می خواهیم همه عناصر را هدف قرار دهیم <div> ما باید از انتخابگر div استفاده کنیم. کد زیر یک انتخابگر نوع را برای عناصر نشان می دهد <div> و همچنین HTML مربوطه.</p><p>Div (...)</p><p> <div>...</div> <div>...</div> </p><h3>کلاس ها</h3><p>کلاسها به شما امکان می دهند بر اساس مقدار صفت کلاس عنصری را انتخاب کنید. انتخابگرهای کلاس کمی مشخص تر از انتخابگرهای نوع هستند ، زیرا آنها گروه خاصی از عناصر را به جای همه عناصر یک نوع انتخاب می کنند.</p><p>کلاسها به شما این امکان را می دهند که با استفاده از همان مقدار صفت کلاس برای چندین عنصر ، سبکهای یکسانی را به طور همزمان در عناصر مختلف اعمال کنید.</p><p>در CSS ، کلاسها با یک دوره در جلو نشان داده می شوند و به دنبال آن مقدار ویژگی کلاس دنبال می شود. در زیر انتخابگر کلاس ، همه عناصر حاوی مقدار ویژگی عالی کلاس ، از جمله عناصر را انتخاب می کند <div> و <span><p>عالی (...)</p><p> <div class="awesome">...</div> </p><h3>شناسه ها</h3><p>شناسه ها حتی از کلاس ها دقیق ترند ، زیرا آنها هر بار فقط یک عنصر منحصر به فرد را هدف قرار می دهند. مشابه نحوه استفاده انتخابگرهای کلاس از مقدار ویژگی کلاس ، شناسه ها از مقدار ویژگی id به عنوان انتخابگر استفاده می کنند.</p><p>صرف نظر از نوع عنصری که نمایش داده می شود ، مقدار ویژگی id فقط یک بار در هر صفحه قابل استفاده است. اگر شناسه وجود داشته باشد ، باید آنها را فقط به عناصر مهم اختصاص دهید.</p><p>در CSS ، شناسه ها با نماد هش در جلو مشخص می شوند و به دنبال آن مقدار ویژگی id نشان داده می شود. در اینجا ، شناسه فقط عنصر حاوی ویژگی id را با مقدار shayhowe انتخاب می کند.</p><p> #shayhowe (...)</p><p> <div id="shayhowe">...</div> </p><h3>انتخابگرهای اضافی</h3><p>انتخابگرها بسیار قدرتمند هستند و مواردی که در بالا توضیح داده شد از متداول ترین انتخاب کننده هایی هستند که با آنها روبرو می شویم. این انتخابگرها فقط آغاز کار هستند. تعداد زیادی انتخابگر پیشرفته در دسترس و به راحتی موجود است. هنگامی که با آنها راحت شدید ، از بررسی برخی از موارد مترقی تر ، نترسید.</p><p>خوب ، بیایید همه چیز را با هم جمع کنیم ما عناصر را به صفحه داخل HTML خود اضافه می کنیم ، سپس می توانیم آن عناصر را انتخاب کرده و با CSS سبک دهیم. حال ، بیایید نقاط را بین HTML و CSS متصل کنیم تا دو زبان با هم کار کنند.</p><h2>اتصال CSS</h2><p>برای اینکه CSS ما با HTML ما صحبت کند ، باید فایل CSS را از HTML نشان دهیم. این روش خوبی است که همه سبک های ما را در یک پرونده خارجی قرار دهید که در داخل عنصر به آن اشاره شده است <head> سند HTML ما استفاده از یک CSS خارجی به ما امکان می دهد سبک های یکسانی را در سراسر سایت اعمال کنیم و سریعاً تغییراتی در آن ایجاد کنیم.</p><h3>گزینه های دیگر برای افزودن CSS</h3><p>سایر گزینه های اتصال CSS شامل استفاده از سبک های درون خطی و درون خطی است. ممکن است در واقع با این گزینه ها روبرو شوید ، اما معمولاً دلسرد نمی شوند زیرا به روزرسانی سایت ها را دست و پاگیر و دست و پا گیر می کند.</p><p>برای ایجاد سبک صفحه خارجی خود ، ما دوباره می خواهیم از ویرایشگر متن انتخاب شده برای ایجاد یک فایل متنی جدید با پسوند .css استفاده کنیم. پرونده CSS ما باید در همان پوشه یا زیر پوشه فایل HTML ما ذخیره شود.</p><p>عنصر درون <head> عنصر اعمال شد <link> که رابطه بین فایلهای HTML و CSS را تعریف می کند. از آنجا که ما در حال پیوند دادن به CSS هستیم ، از ویژگی rel با یک مقدار شیوه نامه برای نشان دادن رابطه آنها استفاده می کنیم. علاوه بر این ، از ویژگی href برای نشان دادن مکان یا مسیر رسیدن به پرونده CSS استفاده می شود.</p><p>در مثال زیر سند HTML ، این عنصر است <head> به یک فایل سبک خارجی اشاره می کند.</p><p> <head> <link rel="stylesheet" href="main.css"> </head> </p><p>برای اینکه CSS به درستی ارائه شود ، مقدار مسیر ویژگی href باید به طور مستقیم با محل ذخیره پرونده CSS مطابقت داشته باشد. در مثال قبلی ، فایل main.css در همان مکان فایل HTML ذخیره شده است که به عنوان پوشه ریشه نیز شناخته می شود.</p><p>اگر پرونده CSS در یک زیر پوشه قرار دارد ، بنابراین مقدار ویژگی href باید مطابق با این مسیر باشد. به عنوان مثال ، اگر فایل main.css ما در زیر پوشه ای به نام stylesheets ذخیره شده باشد ، مقدار ویژگی href می تواند stylesheets / main.css باشد. از اسلش رو به جلو (یا اسلش) برای نشان دادن حرکت به یک زیر پوشه استفاده می کند.</p><p>در این مرحله ، صفحات ما کم کم اما مطمئناً زنده می شوند. ما هنوز خیلی عمیق به CSS وارد نشده ایم ، اما ممکن است شما متوجه شده باشید که برخی از عناصر دارای سبک هایی هستند که ما در CSS خود اعلام نکرده ایم. این مرورگر سبک های دلخواه خود را بر روی این عناصر اعمال می کند. خوشبختانه ، ما می توانیم این سبک ها را به راحتی بازنویسی کنیم ، که در مرحله بعدی با تنظیم مجدد CSS انجام خواهیم داد.</p><h2>با استفاده از تنظیم مجدد CSS</h2><p>هر مرورگر سبک های پیش فرض خاص خود را برای عناصر مختلف دارد. نحوه ارائه عنوان ها ، پاراگراف ها ، لیست ها و موارد دیگر توسط Google Chrome ممکن است با نحوه انجام این کار توسط Internet Explorer متفاوت باشد. برای اطمینان از سازگاری با مرورگرهای مختلف ، از تنظیم مجدد CSS به طور گسترده استفاده شده است.</p><p>بازنشانی CSS تمام عناصر اساسی HTML را با یک سبک داده شده می گیرد و یک سبک سازگار را در تمام مرورگرها فراهم می کند. این بازنشانی ها معمولاً شامل حذف ابعاد ، پر کردن ، حاشیه یا سبک های اضافی برای کاهش این مقادیر است. از آنجا که آبشار CSS از بالا به پایین کار می کند (به زودی خواهید فهمید) ، تنظیم مجدد ما باید در بالای سبک ما باشد. این اطمینان می دهد که ابتدا این سبک ها خوانده می شوند و همه مرورگرهای مختلف از یک نقطه مرجع مشترک کار می کنند.</p><p>تنهایی تنظیم مجدد CSS مختلف برای استفاده در دسترس است که همه نقاط قوت خاص خود را دارند. تنظیم مجدد CSS یکی از محبوب ترین ها در میان اریک میر است و شامل عناصر جدید HTML5 می شود.</p><p>اگر کمی احساس ماجراجویی می کنید ، Normalize.css نیز وجود دارد که توسط Nicholas Gallagher ایجاد شده است. Normalize.css نه بر روی استفاده از تنظیم مجدد سخت برای همه عناصر اصلی ، بلکه در عوض بر روی تنظیم سبک های معمول برای آن عناصر تمرکز دارد. این امر به درک عمیق تری از CSS و همچنین دانش در مورد آنچه می خواهید از سبک استفاده کنید ، نیاز دارد.</p><h3>سازگاری و آزمایش بین مرورگر</h3><p>همانطور که قبلا ذکر شد ، مرورگرهای مختلف عناصر را متفاوت ارائه می دهند. شناخت اهمیت سازگاری و آزمایش بین مرورگر مهم است. لازم نیست وب سایت ها در تمام مرورگرها کاملاً یکسان باشند ، اما باید نزدیک باشند. از کدام مرورگرها می خواهید پشتیبانی کنید و تصمیمی که باید بر اساس بهترین گزینه برای سایت خود بگیرید ، تا چه اندازه است.</p><p>هنگام نوشتن CSS باید موارد زیادی را رعایت کنید. خبر خوب این است که این کار قابل انجام است و برای تسلط بر آن کمی صبر لازم است.</p><h2>در تمرین</h2><p>بیایید به جایی که آخرین بار در سایت کنفرانس خود اقامت داشتیم برگردیم و ببینیم که چگونه می توانیم CSS اضافه کنیم.</p><ol><li>در داخل پوشه styles-conference خود ، بیایید پوشه جدیدی به نام Asset ایجاد کنیم. این جایی است که ما تمام منابع وب سایت خود را ذخیره خواهیم کرد ، مانند سبک ها ، تصاویر ، فیلم ها و غیره. برای سبک های خود ، بیایید ادامه دهیم و پوشه سبک های دیگری را به داخل پوشه دارایی اضافه کنیم.</li><li>با استفاده از یک ویرایشگر متن ، یک فایل جدید به نام main.css ایجاد کنید و آن را در پوشه stylesheets که ما ایجاد کردیم ذخیره کنید.</li><p>فایل HTML در یک مرورگر ، می توانیم عناصر را مشاهده کنیم <h1> و <p>از قبل دارای سبک پیش فرض هستید. به طور خاص ، آنها دارای اندازه و فونت منحصر به فرد در اطراف خود هستند. با استفاده از تنظیم مجدد اریک میر می توانیم این سبک ها را نرم کنیم به طوری که هر کدام از یک پایه شروع شوند. برای انجام این کار ، به وب سایت وی نگاهی بیندازید ، کد را کپی کرده و در بالای فایل main.css ما جای گذاری کنید.</p><p> / * http://meyerweb.com/eric/tools/css/reset/ 2.v2.0 | مجوز 20110126: هیچ (دامنه عمومی) * / html ، body ، div ، span ، applet ، object ، iframe ، h1 ، h2 ، h3 ، h4 ، h5 ، h6 ، p ، blockquote ، pre ، a ، abbr ، نام اختصاری ، آدرس ، big ، cite ، code ، del ، dfn ، em ، img ، ins ، kbd ، q ، s ، samp ، small ، strike ، strong ، sub ، sup ، tt ، var ، b ، u ، i ، center ، dl ، dt ، dd ، ol ، ul ، li ، fieldset ، فرم ، برچسب ، افسانه ، جدول ، عنوان ، tbody ، tfoot ، thead ، tr ، هفتم ، td ، مقاله ، کنار ، بوم ، جزئیات ، جاسازی ، شکل ، figcaption ، پاورقی ، هدر ، گروه ، منو ، ورودی ، خروجی ، یاقوت ، بخش ، خلاصه ، زمان ، علامت ، صدا ، فیلم (حاشیه: 0 ؛ padding: 0؛ حاشیه: 0؛ اندازه قلم: 100٪؛ قلم: وراثت؛ vertical-align: baseline ؛) / * تنظیم مجدد نقش نمایش HTML5 برای مرورگرهای قدیمی * / مقاله ، به جز ، جزئیات ، شکل ، شکل ، پاورقی ، هدر ، گروه گروه ، منو ، قسمت ، بخش (نمایش: بلوک ؛) بدنه (ارتفاع خط: 1 ؛) ol ، ul (سبک سبک: هیچ؛) blockquote ، q (نقل قول ها: هیچ؛) blockquote: قبل ، blockquote: بعد ، q: قبل ، q: بعد (محتوا: "" ؛ محتوا: هیچ؛) جدول (حاشیه- فروپاشی: ج افتادن فاصله مرز: 0؛ )</p><li>پرونده main.css ما شروع به شکل گیری می کند ، بنابراین بیایید آن را در پرونده index.html خود قرار دهیم. index.html را در یک ویرایشگر متن باز کرده و عنصر را اضافه کنید <link> در <head> ، بلافاصله بعد از عنصر <title> .</li><li>از آنجا که ما از طریق عنصر به سبک ها اشاره می کنیم <link> ویژگی rel را با صفحه سبک مقدار اضافه کنید.</li><p>ما همچنین با استفاده از ویژگی href پیوندی به پرونده اصلی.css خود ارائه خواهیم داد. بخاطر بسپارید ، فایل main.css ما در پوشه stylesheets داخل پوشه دارایی ذخیره می شود. بنابراین مقدار ویژگی href که راهی به فایل main.css ماست ، باید Asset / stylesheets / main.css باشد.</p><p> <head> <meta charset="utf-8"> <title>کنفرانس سبک ها

وقت آن است که کار خود را آزمایش کنیم و ببینیم HTML و CSS چگونه با هم مطابقت دارند. باز کردن فایل index.html (یا تازه سازی صفحه در صورت باز بودن صفحه) در یک مرورگر باید نتیجه کمی متفاوت از قبل نشان دهد.

شکل: 1.04 وب سایت کنفرانس سبک های ما با بازنشانی CSS

نسخه ی نمایشی و کد منبع

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

خلاصه

پس اشکالی ندارد! ما چند قدم بزرگ در این آموزش برداشته ایم.

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

برای یادآوری ، موارد زیر را بررسی کردیم:

  • تفاوت بین HTML و CSS.
  • آشنایی با عناصر ، برچسب ها و ویژگی های HTML.
  • تنظیم ساختار اولین صفحه وب خود.
  • آشنایی با انتخابگرها ، خصوصیات و مقادیر CSS.
  • کار با انتخابگرهای CSS.
  • اشاره گر CSS از HTML.
  • اهمیت بازنشانی CSS.

حال بیایید نگاهی دقیق به HTML بیندازیم و کمی با معناشناسی آشنا شویم.

منابع و پیوندها

  • اصطلاحات متداول HTML از طریق Master Scripting
  • شرایط و تعاریف CSS از طریق وب های تأثیرگذار
  • CSS Tools: تنظیم مجدد CSS از طریق Eric Meyer

صفحات وب می توانند در هر قالبی وجود داشته باشند ، اما زبان علامت گذاری متن به عنوان یک استاندارد پذیرفته شده است - یک زبان نشانه گذاری فرامتن برای ایجاد متن غنی با تصاویر ، صدا ، انیمیشن ، کلیپ های ویدیویی و پیوندهای فرامتنی به سایر اسناد ، که در سراسر وب پراکنده شده اند ، طراحی شده است. فضا ، و در همان سرور قرار دارد و یا بخشی جدایی ناپذیر از همان پروژه وب است.

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

HTML در چندین طعم وجود دارد و همچنان به تکامل خود ادامه می دهد ، اما ساختارهای HTML احتمالاً در آینده مورد استفاده قرار خواهد گرفت. با یادگیری و درک HTML ، با ایجاد سندی در ابتدای یادگیری HTML و گسترش هرچه بیشتر آن ، قادر به ایجاد صفحاتی وب هستیم که توسط مرورگرهای وب چه در حال حاضر و چه در آینده قابل مشاهده است. این امکان استفاده از روشهای دیگر ، مانند روش قابلیت های پیشرفته ارائه شده توسط Netscape Navigator ، Internet Explorer یا برنامه های دیگر را مستثنی نمی کند.

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

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