آموزش اچ تی ام ال (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

در زیر لیست 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

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

<!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>

 

آیا این نوشته را دوست داشتید؟