آموزش اچ تی ام ال (HTML)

دسته بندی: آموزش طراحی وب

آموزش اچ تی ام ال

آنچه در این صفحه می خوانید:

معرفی اچ تی ام ال (HTML)

Hypertext Markup Language یا به اختصار HTML، زبان نشانه گذاری استاندارد اسنادی است که برای نمایش در مرورگر وب طراحی شده است. از فناوری هایی نظیر CSS و زبان های اسکریپتی مانند جاوااسکریپت می توان در آن بهره برد. مرورگرهای وب اسناد HTML را از وب سرور یا از فضای ذخیره محلی دریافت می کنند و اسناد را در صفحات وب چند رسانه ای ارائه می دهند. HTML ساختار صفحه وب را از نظر معنایی توصیف می کند و در اصل نشانه هایی را برای ظاهر شدن درج می کند. HTML زبان طراحی صفحات وب است و تمام کدهای صفحه، چه سمت سرور و چه سمت کلاینت در نهايت به کدهای HTML تبديل شده و توسط مرورگر به نمایش در می آیند. به این توجه داشته باشید که HTML زبان برنامه نویسی به حساب نمی آید.

المان های HTML بلوک های ساختاری صفحات HTML هستند. با المان های HTML، تصاویر و اشیاء دیگر مانند فرم های تعاملی می توانند در صفحه ارائه شده تعبیه شوند. HTML وسیله ای برای ایجاد اسناد ساختاری با نشان دادن معنای ساختاری برای متن مانند عناوین، پاراگراف ها، لیست ها، لینک ها، نقل قول ها و موارد دیگر فراهم می کند. المان های HTML توسط تگ ها، که با استفاده از براکت های زاویه ای نوشته می شوند، ترسیم می شوند. تگ هایی مانند <img /> و <input /> مستقیماً محتوا را وارد صفحه می کنند. تگ های دیگر مانند <p> اطلاعات مربوط به متن سند را احاطه کرده و ممکن است تگ های دیگر را به عنوان المان فرعی در برگیرد. مرورگرها تگ های HTML را نشان نمی دهند بلکه از آن ها برای تفسیر محتوای صفحه استفاده می کنند.

HTML می تواند برنامه هایی را که به زبان اسکریپتی مانند JavaScript نوشته شده است، تعبیه کند، که بر رفتار و محتوای صفحات وب تأثیر می گذارد. گنجاندن CSS نمایش و چیدمان محتوا را مشخص می کند. کنسرسیوم جهانی وب گسترده (W3C)، نگهبان سابق HTML و نگه دارنده فعلی استانداردهای CSS، از سال 1997 استفاده از CSS بر روی HTML ارائه صریح را ترغیب کرده است.

تفاوت HTML و HTML5

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

تغییرات جدید در HTML5

نوشتن Doctype در HTML بسیار ساده شده است. Doctype دستوری است که بیانگر نسخه استفاده شده از HTML است. در واقع Doctype کد HTML نیست. نحوه رمز گذاری (Charset) در HTML5 بسیار ساده تر شده است. جالب ترین المان های جدید در HTML5 عبارتند از: المان های معنایی مثل header،footer،article و section خصوصیت های کنترلی جدید فرم ها مثل number،date،time،calendar و range المان های گرافیکی جدید مثل canvas و svg المان های چندرسانه ای جدید مثل audio و video در بخش پشتیبانی HTML5 به شما توضیح می دهیم که چگونه مرورگرهای قدیمی را برای پشتیبانی از کدهای HTML5 به روز کنید. مرورگرهای اصلی مثلinternet explorer، opera، firefox، chrome، safari ویژگی های جدید HTML5 را در نسخه های جدیدشان اضافه کرده اند.

تاریخچه اچ تی ام ال (HTML)

در سال 1980، فیزیکدان Tim Berners-Lee، پیمانکار INQUIRE، سیستمی را برای محققان CERN برای استفاده و به اشتراک گذاری اسناد پیشنهاد و نمونه سازی کرد. در سال 1989، برنرز لی یادداشتی را نوشت که سیستم ابرمتن مبتنی بر اینترنت را ارائه می دهد. برنرز لی HTML را مشخص کرد و در اواخر سال 1990 نرم افزار مرورگر و سرور را نوشت. در آن سال، رابرت کالییا مهندس سیستم داده های CERN، درخواست مشترک برای بودجه همکاری کردند، اما این پروژه به طور رسمی توسط CERN تصویب نشده است.

اولین توصیف در دسترس عموم از HTML، سندی به نام "HTML Tag" بود که نخستین بار در اواخر سال 1991 توسط تیم برنرز لی در اینترنت ذکر شد. 18 المان شامل طراحی اولیه و نسبتاً ساده HTML است. به غیر از تگ هایپر لینک، این ها به شدت تحت تأثیر SGMLguid، فرم اسناد مبتنی بر استاندارد داخلی (SGML) در CERN قرار گرفتند. یازده مورد از این المان هنوز در HTML 4 وجود دارد.

HTML زبان نشانه گذاری است که مرورگرهای وب برای تفسیر متن، تصاویر و سایر مطالب در صفحات وب بصری یا شنیدنی استفاده می کنند. ویژگی های پیش فرض برای هر مورد از نشانه گذاری HTML در مرورگر تعریف شده است و با استفاده اضافی از CSS توسط طراح صفحه وب می توان این ویژگی ها را تغییر داد یا افزایش داد. بسیاری از المان های متنی در گزارش تکنیکال ISO 955 9537 تکنیک های استفاده از SGML یافت می شود، که به نوبه خود ویژگی های زبان های قالب بندی اولیه متن را مانند مواردی که توسط دستور RUNOFF استفاده شده در اوایل دهه 1960 برای CTSS تهیه شده است.

برنرز لی HTML را کاربرد SGML دانست. این کار به طور رسمی توسط Task Force مهندسی اینترنت (IETF) با انتشار اواسط سال 1993 اولین پیشنهاد برای مشخصات HTML، توسط برنرز لی و دن کانولی تعریف شد، که شامل تعریف نوع سند SGML برای تعریف دستور زبان است. این پیش نویس پس از شش ماه منقضی شد، اما به دلیل تأیید تگ سفارشی مرورگر NCSA Mosaic برای جاسازی تصاویر درون خط، قابل ملاحظه بود و این نشان دهنده فلسفه IETF مبانی استاندارد در مورد نمونه های اولیه موفق است. پس از انقضای پیش نویس HTML و +HTML در اوایل سال 1994، IETF گروه کاری HTML ایجاد کرد که در سال 1995 "HTML 2.0" را تکمیل کرد، اولین مشخصات HTML در نظر گرفته شده است که به عنوان معیار مورد استفاده قرار گیرد که بر اساس آن پیاده سازی های آینده مبتنی باشد.

توسعه بیشتر تحت نظارت IETF توسط منافع رقیب متوقف شد. از سال 1996، مشخصات HTML با ورودی از فروشندگان نرم افزارهای تجاری توسط کنسرسیوم جهانی وب گسترده (W3C) حفظ شده است. با این حال، در سال 2000، HTML نیز به استاندارد بین المللی تبدیل شد. HTML 4.01 در اواخر سال 1999 منتشر شد و سایر مصارف آن تا سال 2001 منتشر شد. در سال 2004، توسعه در HTML5 در گروه کاری فناوری WHATWG شروع شد که در سال 2008 با W3C قابل تحویل شد و در سال 2008 تکمیل و استاندارد شد.

اچ تی ام ال (HTML) چطور کار می‌کند؟

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

قسمت های مورد نیاز یک صفحه HTML چیست؟

اسناد HTML با تگ هایی تعریف شده اند که شامل یک تگ باز و بسته می باشند. تمام اسناد HTML باید دارای HTML و BODY باشند. به منظور نمایش در یک مرورگر وب، تگ گذاری کنید. سایر تگ های مشترک در صفحات HTML شامل تگ های سند HEAD، TITLE و P (پاراگراف) می باشد. مثلا:

<HTML>
<HEAD>
<TITLE>My Top Bits Web Page</TITLE>
</HEAD>
<BODY>
<H2>Page Heading</H2>
<P>My First Web Page paragraph</P>
</BODY>
</HTML>

تگ <HTML> در کد مثال، این سند را تایپ صفحه را از نوع HTML مشخص می کند. تگ <HEAD> حاوی یک تگ <TITLE> است که در بالای یک مرورگر وب نمایش داده می شود و همچنین می تواند شامل Javascript و سایر اطلاعات داده متا برای صفحه وب باشد. تگ <BODY> حاوی اطلاعات قابل نمایش در سند HTML است و شامل یک تگ عنوان <H2> می باشد و یک تگ پاراگراف جدید <P> را تعریف می کند. اگرچه یک صفحه HTML بدون داشتن همه تگ ها با تگ های بسته بستنی قابل نمایش است، اما یک اسناد به حساب نمی آید و در صورت بسته بودن تمام تگ ها ممکن است دارای خطاهای نمایش باشد.

چگونه HTML تصاویر را درج می کند؟

مرورگرهای اینترنتی برای جاسازی تصاویر با فرمت GIF، JPEG یا PNG طراحی شده اند، با جدیدترین مرورگرها، همچنین از فرمت SVG تصویب W3C برای نمایش پشتیبانی می کنند. کد HTML به منظور نمایش صحیح تصویر در صفحه وب، به مرجع تصویری که در یک وب سرور به همراه اندازه و سایر اطلاعات متا ذخیره می شود را ارائه می دهد. اگر تصویر را نمی توان از وب سرور بازیابی کرد، به منظور تهیه نمایشگر متنی یا اطلاعات جایگزین برای کسانی که قادر به مشاهده تصاویر نیستند، اطلاعات نمایشگر جایگزین گنجانده شده است. یکی از تگ های رایج مورد استفاده برای نمایش تصاویر در اسناد HTML، تگ <IMG> است. به عنوان مثال، برای درج تصویر در مثال قبلی، خط زیر کد HTML را بین تگ های <BODY> باز و بسته اضافه کنید:

<IMG SRC="http://hallu.xyz/myimage.png” alt=” my test image”>

کد تصویر برای بازیابی تصویر تلاش خواهد کرد و در صورت عدم امکان بارگیری تصویر برای مشاهده، متن "my test image" را به کاربر نهایی نمایش می دهد.

چگونه لینک HTML به صفحات وب وصل می شود؟

یکی از جنبه های متداول اسناد HTML ارتباط بیش از حد به سایر صفحات وب یا منابع موجود در اینترنت است. تگ HTML که برای پیوند به صفحه دیگر استفاده می شود، تگ anchor است، <A>. در بین اعلامیه تگ لنگر افتتاحیه و بسته شدن، متن یا تصویر مربوط به آدرس وب را ارائه می دهید مثلا:

<A href=”http://www.hallu.xyz”> Top Bits </A>

این عبارت HTML کلمات "Top Bits" را نشان می دهد که می توانند برای باز کردن یک پنجره جدید در مرورگر وب شما برای نمایش صفحه وب Top Bits نمایش داده شوند. از ویژگی href برای تهیه URL برای منبعی که توسط بیانیه تگ لنگر با آن در ارتباط است، استفاده می شود.

چه کسی تعاریف HTML Tag را کنترل می کند؟

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

ویژگی های اچ تی ام ال (HTML)

  • Web Workers: برخی از برنامه های وب برای انجام توابع از اسکریپت های سنگین استفاده می کنند. Web Workers از موضوعات پس زمینه جداگانه برای پردازش استفاده می کنند و این تاثیری در عملکرد یک صفحه وب ندارد.
  • Video: شما می توانید ویدیو را بدون پلاگین های اختصاصی شخص ثالث یا کدک ها جاسازی کنید. فیلم به آسانی تعبیه تصویر می شود.
  • Canvas: این ویژگی به یک توسعه دهنده وب اجازه می دهد تا گرافیک ها را در پرواز ارائه دهد. مانند فیلم، نیازی به افزونه نیست.
  • Application caches: صفحات وب شروع به ذخیره اطلاعات بیشتر و بیشتر به صورت محلی در رایانه بازدید کننده می کنند. مانند کوکی ها کار می کند، اما در جایی که کوکی ها کوچک هستند، ویژگی جدید امکان فایل های بسیار بزرگتر را فراهم می کند. Google Gears نمونه ای عالی از این ویژگی است.
  • Geolocation: جابجایی منطقه که برای استفاده در دستگاه های تلفن همراه شناخته شده است، دارای HTML5 است.

مزایا و معایب اچ تی ام ال (HTML)

مزایای استفاده از HTML:

  • اولین مزیت این است که به طور گسترده استفاده می شود.
  • هر مرورگر از زبان HTML پشتیبانی می کند.
  • آسان برای یادگیری و استفاده.
  • به طور پیش فرض در هر پنجره است، بنابراین نیازی به خرید نرم افزار اضافی ندارید.

معایب HTML:

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

کاربرد اچ تی ام ال (HTML)

در زیر لیست 10 کاربرد برتر HTML قرار دارد:

  • توسعه صفحات وب: از HTML به شدت برای ایجاد صفحاتی استفاده می شود که در شبکه جهانی وب نمایش داده می شوند. هر صفحه شامل مجموعه ای از تگ های HTML از جمله لینک های ارتباطی است که برای اتصال به صفحات دیگر استفاده می شود. هر صفحه ای که شاهد آن هستیم، در سراسر جهان، با استفاده از نسخه کد HTML نوشته شده است.
  • ایجاد اسناد وب: ایجاد اسناد در اینترنت توسط HTML حاکم است و مفهوم اصلی آن از طریق تگ و DOM، تگ های HTML قبل و بعد یا عباراتی درج شده اند تا فرمت و مکان آنها در صفحه قرار بگیرد. سند وب شامل سه بخش Title،Header و Body است. عنوان شامل اطلاعات مربوط به شناسایی سند از جمله عنوان و سایر کلید واژه های مهم دیگر است. Title در نوار مرورگر مشاهده می شود و بخش Body قسمت اصلی قابل مشاهده وب سایت برای بیننده است. هر سه بخش با استفاده از تگ های HTML طراحی و ساخته شده اند. هر بخش دارای مجموعه ای از تگ های خاص خود است که به طور اختصاصی با نگه داشتن Header،Title و مفاهیم Body در حلقه ارائه می شوند.
  • پیمایش اینترنتی: این یکی از مهمترین کاربردهای HTML است که در نوع خود انقلابی است. این پیمایش با استفاده از مفهوم Hypertext امکان پذیر است. در اصل متنی است که به سایر صفحات وب یا متن اشاره می کند و وقتی کاربر روی آن کلیک کند، می تواند به متن یا صفحه ارجاع شده حرکت کند. HTML به شدت برای جاسازی لینک در صفحات وب استفاده می شود. کاربر می تواند به راحتی در صفحات و بین وب سایت ها، که در سرورهای مختلف قرار دارند، حرکت کند.
  • ویژگی Cutting edge: مجموعه ای از استانداردها با HTML5 و API خود برای معرفی برخی از آخرین روندهای ایجاد وب سایت مورد استفاده قرار می گیرد. مانند کتابخانه های چند منظوره، که توسط مرورگرهای قدیمی نیز به خوبی پشتیبانی می شوند. مرورگر مانند Google Chrome هنگام اجرای جدیدترین مجموعه استانداردها و API های HTML5 گزینه مناسبی است. کتابخانه جاوااسکریپت به نام Modernizr موجود است که می تواند ویژگی هایی را کشف کند که به توسعه دهنده اجازه می دهد تا به صورت پویا، کتابخانه های مختلف را طبق نیاز بارگذاری کند.
  • تصاویر رسپانسیو در صفحات وب: در سطح ابتدایی در برنامه های HTML، می توان از نمایش داده شد تا از تصاویر استفاده کند، که ماهیتاً رسپانسیو هستند. با استفاده از ویژگی srcset عنصر img در HTML و ترکیب آن با المان تصویر، توسعه دهنده می تواند نحوه ارائه کاربر تصویری را به طور کامل کنترل کند. اکنون با استفاده از عنصر img می توان انواع مختلفی از تصویر را با تغییر اندازه بارگیری کرد. قوانین را می توان به راحتی با عنصر تصویر تنظیم کرد، ما می توانیم عنصر img را با منبع پیش فرض اعلام کنیم و سپس برای هر مورد می توان منبع تهیه کرد.
  • ذخیره سازی سمت کلاینت: پیش از این، کاربر نمی تواند داده های مرورگر را که در طول نشست ها باقی می ماند، ذخیره کند. برای پاسخگویی به این نیاز، باید زیرساخت های سمت سرور ساخته شود یا از کوکی های کاربر استفاده شود. اما با HTML5، ذخیره سازی سمت کلاینت با استفاده از localStorage و IndexDB امکان پذیر است. این دو استراتژی استانداردها و ویژگی های خاص خود را دارند. localStorage اساساً فضای هش جدول مبتنی بر رشته را می دهد. API آن بسیار ساده است و روش های setItem،getItem و removeItem را در اختیار توسعه دهنده قرار می دهد. از طرف دیگر، IndexDB فروشگاه داده بزرگتر و بهتر از طرف کلاینت است. بانک اطلاعاتی IndexDB با اجازه کاربر قابل گسترش است.
  • استفاده از قابلیت های آفلاین: هنگامی که داده ها در مرورگر ذخیره می شوند، هنگام قطع ارتباط، توسعه دهنده می تواند برای ایجاد برنامه های کاربردی، به استراتژی فکر کند. HTML5 دارای مکانیزم حافظه نهان برنامه کاربردی است که نحوه مدیریت مرورگر وضعیت آفلاین را تعریف می کند. حافظه نهان برنامه، مسئول توانایی آفلاین در واقع از مؤلفه های مختلفی تشکیل شده است، که شامل روش های API است که بروزرسانی را ایجاد می کند، فایل مانیفست و وقایع را می خواند با استفاده از ویژگی خاص در HTML5، توسعه دهنده می تواند بررسی کند که آیا این برنامه آنلاین است یا خیر. توسعه دهنده همچنین می تواند در حافظه نهان برنامه وب سایت اطلاعاتی را مانند آنچه مرورگر مدیریت منابع برای استفاده آفلاین را مشخص کند، مشخص کند. در پرونده مانیفست، منابعی که بصورت آفلاین در دسترس هستند نیز می توانند مشخص شوند.
  • پشتیبانی از ورود داده با HTML: استاندارد HTML5 و مجموعه API ها می توانند برای پشتیبانی از سطح کار ورود داده ها استفاده شوند. با پیاده سازی مرورگرها استانداردهای جدید HTML5، توسعه دهندگان می توانند به سادگی ویژگی هایی را به تگ اضافه کنند که نشان دهنده زمینه های لازم، متن، فرمت داده ها و غیره است. HTML5 با چندین ویژگی جدید برای هدایت صفحه کلید روی صفحه، تأیید اعتبار و ورود اطلاعات دیگر همراه شده است. تجربه می کند تا کاربر نهایی بتواند از داده های بهتری برخوردار باشد.
  • استفاده در توسعه بازی: قبل از ظهور HTML5، توسعه بازی دامنه انحصاری Flash و Silverlight بود. از آنجا که مرورگرها از مشخصات جدید HTML5 از جمله CSS3 و موتور جاوااسکریپت سریع استفاده می کنند تا تجربه غنی و جدید را تجربه کنند، HTML5 می تواند واقعیت توسعه بازی را ممکن سازد، که قبلاً Flash و Silverlight بود. تک تک ویژگی های API نیازی به پیاده سازی ندارند، اما با از بین بردن بقیه ویژگی ها می توان از مناسب ترین آن ها استفاده کرد.
  • استفاده از API های نیتیو برای غنی سازی وب سایت: HTML5 توانایی ها و ابزارهای جدید بسیاری را اضافه می کند، که این فقط تصور در گذشته بود. مجموعه بزرگی از API های جدید در رابطه با سیستم فایل، موقعیت جغرافیایی، کشیدن و رها کردن، رسیدگی به رویداد، ذخیره مشتری و غیره قابلیت هایی هستند که استفاده از HTML5 را از گذشته راحت تر می کند. تجربه برنامه را می توان با سایر API ها مانند Fullscreen،Visibility و Media Capture افزایش داد. برنامه وب مدرن دارای طبیعت ناهمزمان است که می تواند با استفاده از Websockets و کارمندان وب مانند API تقویت شود.

ساختار اچ تی ام ال (HTML)

ساختار اچ تی ام ال

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

  • عنوان: <header>.
  • نوار ناوبری: <nav>.
  • محتوای اصلی: <main>، با زیربخش های مختلف محتوا که توسط المان های <article>،<section> و <div> نمایش داده شده است.
  • نوار کناری: <aside>؛ غالباً درون <main> قرار می گیرد.
  • پاورقی: <Footer>.

تشریح یک عنصر HTML

اجازه دهید عنصر پاراگراف را کمی بیشتر مورد بررسی قرار دهیم:

تگ اچ تی ام ال

بخش های اصلی عنصر ما(عنصر مذکور) عبارتند از:

  1. تگ باز شده: این تگ(علامت) حاوی نام المان مورد نظر است(در اینجا,عنصر p)، به طوری که در داخل براکت های زاویه ای(یعنی همان علامت های < و >) قرار می گیرد. این بخش جایی است که المان ما شروع می شود و آغاز به تاثیر گذاری می کند، در این صورت می توان گفت که این بخش جایی است که پاراگراف ما شروع می شود.
  2. تگ بسته شده: این تگ مشابه با تگ باز شده، می باشد با این تفاوت که حاوی یک علامت اسلش رو به جلو (یعنی/) قبل از نام آن المان است. این بخش همان جایی است که المان ما پایان می پذیرد. نبستن یک تگ معمولا یک خطا است که تازه کارها دچار آن می شوند. که می تواند باعث نتایج زیان باری شود.
  3. محتوا: این همان محتوای المان است، که در این مورد تنها یک متن است.
  4. المان: به تگ باز شده به اضافه تگ بسته شده به اضافه محتوا,المان گفته می شود.

ارتباط اچ تی ام ال (HTML) با CSS و جاوااسکریپت

سی اس اس-اچ تی ام ال-جاوااسکریپت

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

ساختار فونداسیون همان چیزی است که HTML به شما امکان می دهد ایجاد کنید. این امکان را به شما می دهد تا عناصری مانند برچسب پاراگراف (<p> برخی از متن </ p>)، برچسب های تصویری (<img src = "" ") و بسیاری موارد دیگر از جمله فرم ها، div ها و غیره ایجاد کنید. اما آنها فقط همین هستند. آنها خام به نظر می رسند، به خودی خود زیاد حاصل نمی شوند.

سپس سی اس اس (CSS) را وارد می کنید. CSS به شما امکان می دهد HTML خام خود را استایل دهی کنید تا دقیقاً به نظر شما چگونه می خواهید. به عنوان مثال برای متن، از CSS استفاده می کنید تا نوع قلم، اندازه، رنگ، موقعیت، سایه متن و مواردی مانند underline / Straterough و غیره را تنظیم کنید. برای div ها می توانید عرض / ارتفاع، موقعیت، پس زمینه آنها را تنظیم کنید. رنگ، شفافیت، مرزها و غیره. بدون CSS، صفحه شما خام و خسته کننده به نظر می رسد و نیاز به تلاش زیادی برای تنظیم موارد فقط با استفاده از HTML همراه دارد. CSS رنگ و تمام کردن ضروری است. این ویژگی های بصری عناصر HTML را در صفحه شما تعریف می کند. شما کد CSS را یا در صفحه (تمرین بد) یا در یک پرونده .css جداگانه که به عنوان یک شیوه نامه شناخته می شود می نویسید که می تواند با استفاده از <link rel = "stylesheet" href = "stylesheet.css"> به صفحه HTML وصل شود.

جاوااسکریپت منطق را به صفحه شما اضافه می کند. افرادی که در ساختمان کار می کنند، مغزهایی هستند که می دانند چگونه از منابع برای یک هدف معنی دار استفاده کنند. به طور مشابه، جاوااسکریپت تعامل، عملکرد و هدف را به صفحه ای غیرقابل استاتیک که به نظر خوب می رسد امکان پذیر است اما علاوه بر انتشار اطلاعات به عنوان متن و تصاویر، کاری شایسته انجام نمی دهد. جاوااسکریپت با صفحه شما ارتباط برقرار می کند و محتوای HTML و CSS را مانند همه هشدار هایی که هنگام استفاده از فیس بوک برنامه ریزی می کنید ایجاد، خواندن، حذف و دستکاری می کند. وقتی پیام وضعیت خود را تایپ می کنید و بر روی دکمه ارسال کلیک می کنید، JavaScript که در پشت صحنه اجرا می شود، پست شما را می گیرد، آن را به سرور ارسال می کند و در آخر آن را به صورت زنده وارد فید می کند تا شما آن را ببینید. جاوااسکریپت را می توان مستقیماً در یک صفحه HTML (عموماً یک تمرین بد) یا ترجیحاً در فایل js. خاص خود نوشت که می تواند با استفاده از برچسب <script src = "myApp.js"> </script> به صفحه HTML مرتبط شود.

سه گانگی HTML + CSS + JavaScript با هم، یک صفحه وب کامل و پویا را تشکیل می دهد که دارای خصوصیات و عملکردهای بصری است. اگر مجبور هستید از JavaScript در مرورگر خود استفاده کنید، برای ایجاد جاوااسکریپت به HTML لازم است. با این حال، JavaScript فراتر از صفحات وب است. همچنین برای نوشتن برنامه هایی که این روزها روی سرور اجرا می شوند (به عنوان نود جی اس (Node.js)) و حتی در تلفن همراه (ری اکت نیتیو (React Native)) استفاده می شود. بنابراین، عملاً، JS فراتر از صفحات وب (HTML) استفاده می شود.

ویرایشگر های کد اچ تی ام ال (HTML)

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

متن با استفاده از ویرایشگر HTML همچنین می تواند به زبان های دیگر مانند CSS، اکس ام ال (XML) یا JavaScript ترجمه شود. اما همانطور که می دانیم، همه چیز به طور برابر ایجاد نمی شوند. برخی ویرایشگران ممکن است استفاده از آنها راحت تر باشد در حالی که برخی عملکرد بیشتری نسبت به سایرین دارند.

چه زمانی باید از ویرایشگر HTML استفاده کنید؟

به عبارت ساده، همیشه! ویرایشگر HTML هم برای مبتدیان و هم برای توسعه دهندگان پیشرفته تر ارزشمند است. ما قبلاً به ویژگی های اساسی ویرایشگران HTML اشاره کردیم، مانند نحو برجسته سازی، درج عناصر HTML مشترک و تکمیل خودکار. همه اینها باعث می شود که كد شما با تلاش كمتر تمیز نگه داشته شود.

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

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

نرم افزار دریم ویور (Adobe Dreamweaver)

Adobe Dreamweaver CC ابداع و مدیریت شده توسط غول فناوری شرکت ادوبی، ابزاری ممتاز، قدرتمند و چند منظوره است. این هم توسعه فرانت اند و هم بک اند دارد. Adobe همچنین پشتیبانی، افزونه ها و ویژگی هایی را برای اطمینان از اینکه همیشه یکپارچه کد می کنید فراهم می کند. Dreamweaver یکی از ویرایشگرانی است که از دو روش متنی و WYSIWYG پشتیبانی می کند. بنابراین، شما انتخاب می کنید که آیا می خواهید با یک نمایش بصری زنده کدگذاری کنید یا به روش کلاسیک بروید.

بدون نصب هیچگونه نرم افزار دیگری می توان به راحتی یک وب سایت را به کمک Dreamweaver طراحی کرد. این برنامه کاملا هوشمند و کار با آن ساده است. به همین دلیل لازم به حفظ تمامی کد ها و ویرایش کلمات غلط نیست. با زبان HTML می توان صفحات سایت را برپایه استاتیک و یا دینامیک طراحی و ایجاد کرد و با استفاده از گزینه FTP در نرم افزار صفحات ایجاد شده را به هاست انتقال داد.

ویژوال استودیو کد (Visual Studio Code)

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

دیگر ویرایشگر های کاربردی عبارتند از:

  • Atom
  • ++Notepad
  • Sublime Text

مثال های اچ تی ام ال (HTML)

ساختار بالا با کد زیر نشان داده شده است.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

<title>My page title</title> <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="style.css">

<!-- the below three lines are a fix to get HTML5 semantic elements working in old versions of Internet Explorer--> <!--[if lt IE 9]> <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]--> </head>

<body> <!-- Here is our main header that is used across all the pages of our website -->

<header> <h1>Header</h1> </header>

<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">Our team</a></li> <li><a href="#">Projects</a></li> <li><a href="#">Contact</a></li> </ul>

<!-- A Search form is another commmon non-linear way to navigate through a website. -->

<form> <input type="search" name="q" placeholder="Search query"> <input type="submit" value="Go!"> </form> </nav>

<!-- Here is our page's main content --> <main>

<!-- It contains an article --> <article> <h2>Article heading</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris. Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

<h3>Subsection</h3>

<p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

<p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

<h3>Another subsection</h3>

<p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>

<p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p> </article>

<!-- the aside content can also be nested within the main content --> <aside> <h2>Related</h2>

<ul> <li><a href="#">Oh I do like to be beside the seaside</a></li> <li><a href="#">Oh I do like to be beside the sea</a></li> <li><a href="#">Although in the North of England</a></li> <li><a href="#">It never stops raining</a></li> <li><a href="#">Oh well...</a></li> </ul> </aside>

</main>

<!-- And here is our main footer that is used across all the pages of our website -->

<footer> <p>©Copyright 2050 by nobody. All rights reversed.</p> </footer>

</body> </html>

آیا این نوشته را دوست داشتید؟
lynda-bootstrap-4-essential-training-3

آموزش اصولی بوت استرپ 4


بوت استرپ - یک فریمورک front-end که از HTML، CSS3 و jQuery استفاده می کند - طراحی شده است تا به توسعه دهندگان کمک کند تا به سرعت و به آسانی وب سایت ها...

1397/01/21 3293 بازدید زیرنویس دارد
wintellectnow-developing-html5-games-from-scratch-a-solid-foundation

آموزش ساخت بازی های HTML5 از ابتدا - Solid Foundation


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

1397/01/08 1211 بازدید
wintellectnow-developing-html5-games-from-scratch-creating-and-managing-game-objects

آموزش ساخت بازی های HTML5 از ابتدا - ایجاد و مدیریت آبجکت های بازی


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

1397/01/08 1314 بازدید
wintellectnow-developing-html5-games-from-scratch-drawing-and-animation

آموزش ساخت بازی های HTML5 از ابتدا - ترسیم و انیمیشن


بدون انیمیشن، یک بازی چیزی بیش از عناصر استاتیک در یک صفحه نیست که سرگرم کننده نخواهد بود. در این دوره با ترسیم به وسیله HTML5 Canvas API، انیمیشن can...

1397/01/08 1573 بازدید
wintellectnow-creating-an-html-form-with-labels-and-other-form-controls

آموزش ایجاد فرم HTML با برچسب ها و دیگر کنترل های فرم


در این دوره به متدهای Html helper class می پردازیم که برای برای تولید تگ فرم HTML و کنترل های فرم برای کنترل کد منتشر شده از برنامه های MVC مورد استفا...

1397/01/06 785 بازدید
wintellectnow-html5-indexed-db

دوره HTML5 Indexed DB


Indexed DB ذخیره سازی پایگاه داده محلی مبتنی بر شیء برای مشتریان HTML5 فراهم می کند. فروشگاه های Objects می توانند شامل شاخص هایی باشند که اجازه می ده...

1397/01/03 796 بازدید
wintellectnow-introduction-to-data-annotations

آشنایی با Data Annotations


با اعتبارسنجی متادیتا، Data Annotations و متدهای کلاس HTML helper می توانید برای فرم های خود HTML بسازید. سرفصل: مقدمه افزودن متادیتا به Propert...

1396/12/19 657 بازدید
wintellectnow-introduction-to-html5-for-game-developers

آشنایی با HTML5 برای توسعه دهندگان بازی


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

1396/12/18 712 بازدید
wintellectnow-html5-file-apis

آموزش HTML5 File APIs


HTML5 شامل سه API فایل است: API فایل، FileWriter API و FileSystem API. در این دوره با این سه API، نحوه نوشتن اپلیکیشن های HTML5  که به سیستم فایل محلی...

1396/12/18 772 بازدید
wintellectnow-html5-web-workers

آموزش HTML5 Web Workers


مشخصات Web Workers به جاوااسکریپت multithreading ارائه می دهد و به اپلیکیشن های HTML5 اجازه می دهد تا threads پیش زمینه را برای ساخت اپلیکیشن های واکن...

1396/12/18 764 بازدید
wintellectnow-html5-web-storage

آموزش HTML5 Web Storage


HTML5 Web Storage اپلیکیشن های جاوااسکریپت را قادر می سازد تا داده را در کلاینت چه به طور مداوم در ذخیره سازی محلی، و یا چه به طور موقت در ذخیره سازی ...

1396/12/18 748 بازدید
wintellectnow-html5-networking-apis

آموزش HTML5 Networking API 


HTML5 سبب بهبود networking API مرورگر با ارتقا آبجکت XMLHttpRequest و افزودن پشتیبانی به WebSockets می شود. اپلیکیشن های جاوااسکریپت علاقه به ساخت فرا...

1396/12/18 841 بازدید
wintellectnow-html5-geolocation-api

آموزش HTML5 Geolocation API


HTML5 geolocation API این امکان را فراهم می کند تا اپلیکیشن هایی مانند Urban Spoon بسازید که در موقعیت کاربر قرار می گیرد.  برای ردیابی تغییرات در محل...

1396/12/18 837 بازدید
wintellectnow-angular-ui-router-how-to-build-complex-html-user-interfaces

آموزش Angular UI-Router - نحوه ساخت رابط های کاربری پیچیده HTML 


ایجاد رابط کاربری پیچیده در HTML می تواند پیچیده و دشوار باشد. UI-Router یک ماژول Angular است که توسط گروه AngularUI ساخته شده است. به عنوان یک جایگزی...

1396/12/14 1046 بازدید
ساخت-اپلیکیشن-های-تک-صفحه-ای-html5-و-web-api-و-knockout-و-jquery

ساخت اپلیکیشن های تک صفحه ای HTML5 و Web API و Knockout و jQuery


تکنولوژی جدید طراحی وب مبحث Single Page Apps یا اپلیکیشن های تک صفحه ای است که در این روش تمام وب سایت یک صفحه دارد و اطلاعات معمولا از طریق Ajax بارگ...

1396/11/16 5591 بازدید
1396/11/13 1096 بازدید