html چیست؟ html مخفف کلمه‌ی Hypertext Markup Language است. به ما این امکان را می‌دهد تا بخش‌ها، پاراگراف‌ها، عناوین، لینک‌ها و نقل و قول‌های را برای صفحات وب ایجاد کنیم. نکته‌ای که باید به آن توجه کنیم و در مقاله زبان‌های طراحی سایت به آن نیز پرداختیم، این است که html یک زبان برنامه‌نویسی نیست. به این معنای که توانایی ایجاد سایت داینمایک را ندارد. در عوض به ما این قابلیت را می‌دهد تا سازمان‌دهی و قالب‌بندی وب‌سایت خودمان را انجام دهید.
هنگام کار با اچ تی‌ام ال ما از ساختار کدهای ساده (tags and attributes) برای ساخت وب‌سایت استفاده می‌کنیم. به‌عنوان‌مثال ما می‌توانیم یک پاراگراف را با تگ <p> شروع کنیم و با تگ <p/> به‌پایان برسانیم.
<p>This is how you add a paragraph in HTML.</p>
به‌طورکلی html یک زبان نشانه‌گذاری است که یادگیری آن برای همه راحت است. ما در باپ وب که بزرگترین شرکت طراحی سایت و سئو هستیم به طورکامل طراحی سایت با html را یاد خواهیم داد.
تاریخچه html چیست؟
زبان html توسط تیم برنرز لی، فیزیکدان موسسه تحقیقاتی CERN در سوییس ابداع شد. او ایده‌ی سیستم ابر متنی مبتنی بر اینترنت را ارائه داد. HYPER TEXT به معنای متنی است که شامل پیوندهایی به سایر متون است که بینندگان می‌توانند بلافاصله به آن دسترسی پیدا کنند. وی اولین نسخه HTML را در سال ۱۹۹۱ منتشر کرد که متشکل از ۱۸ تگ اچ تی‌ام ال بود. از آن زمان، هر نسخه‌ی جدیدی از HTML با ویژگی‌ها و تگ‌ها جدید که اصلاح‌کننده قبلی‌ها بود وارد شد.
طبق آماری که HTML MOZILLA DEVELOPER NETWORK ارائه کرده است، در حال حاضر ۱۴۰ تگ HTML وجود دارد. برخی از آنها نیز منسوخ‌شده است.
به دلیل افزایش محبوبیت HTML، هم‌اکنون این زبان نشانه‌گذاری یک استاندارد برای طراحی سایت محسوب می‌شود. مشخصات HTML توسط W3C حفظ و توسعه پیدا می‌کند. می‌توانید آخرین تغییرات این زبان نشانه‌گذاری تحت وب را در سایت W3C مشاهده کنید.
بزرگترین آپدیت و ارتقایی که این زبان داشت، در سال ۲۰۱۴ بود. زمانی که HTML5 معرفی گردید. در آن هنگام چندین تگ معنایی جدید اضافه گردید که موتورهای جستجو نیز بسیار به آنها اهمیت می‌دهند. این تگ‌ها معنایی، معنای محتوای شمارا نشان می‌دهد. مثلاً تگ <footer> یا <article> ازجمله این تگ‌های معنایی هستند.
html چگونه کار می کند؟
کدهایی که با html نوشته می‌شود با پسوند.html یا.htm ذخیره می‌شوند. سپس می‌توانید فایل‌های ذخیره‌شده را توسط مرورگر خود مانند گوگل کروم، موزیلا یا سافاری مشاهده کنید. مرورگرها فایل html را می‌خوانند و محتوای آن را به‌صورت کاملاً دقیق به کاربران نمایش می‌دهند.
معمولاً یک سایت از چندین صفحه html مختلف تشکیل شده است. مانند: صفحه اصلی، وبلاگ، تماس با ما و… همه اسناد html هستند..
هر صفحه HTML از مجموعه‌ای از برچسب‌ها تشکیل‌شده است (عناصر نیز نامیده می‌شوند)، که می‌توانید از آنها به‌عنوان عناصر سازنده صفحات وب یاد کنید. آنها سلسله مراتبی را ایجاد می‌کنند که مطالب را در بخش‌ها، پاراگراف‌ها، عناوین و سایر بلوک‌های محتوایی ساختار می‌دهد.
در زیر، می‌توانید یک نمونه کد از نحوه ساختار عناصر HTML را مشاهده کنید:
<div> <h1>The Main Heading</h1> <h2>A catchy subheading</h2> <p>Paragraph one</p> <img src="/" alt="Image"> <p>Paragraph two with a <a href="https://example.com">hyperlink</a></p> </div>
تگ html چیست و پر کاربردترین آنها کدام است؟
تگ‌های html دارای دو نوع اصلی هستند: تگ‌های inline و تگ‌های block
عناصری که block هستند فضای کاملی را از یک خط اشغال می‌کنند و ادامه‌ی کد از خط بعدی شروع می‌شود. عنوان‌ها و پاراگراف‌ها نمونه‌ای بارز از تگ‌های بلاک هستند. در مقابل عناصری وجود دارند که inline هستند. این تگ‌ها به اندازه‌ی فضای موردنیاز خودشان جایی را اشغال می‌کنند و ادامه‌ی خط‌ها نیازی نیست در خط بعدی شروع شود. لینک‌ها، نمونه‌ی بارز تگ‌های inline هستند.
تگ های block
سه تگ که هر فایل html نیاز دارد، عبارت است از <html> ، <head> و <body>.
تگ head دارای اطلاعات سایت مانند نام سایت، عنوان صفحه، نام طراح سایت، توضیحات متا و…. است.
در آخر نیز تگ body تمام محتوای نوشته‌شده داخل خودش را در صفحه مرورگر نمایش می‌دهد.
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>
عناوین در اچ تی‌ام ال دارای ۶ سطح هستند. آنها از تگ h1 تا h6 متغیر هستند. h1 بااهمیت‌ترین و در بالاترین سطح و h6 کمترین اهمیت و در پایین سطح قرار می‌گیرد. پاراگراف ها نیز توسط برچسب p نمایش داده می‌شود. برای نقل و قول نیز از برچسب blockquote می‌کنیم.
بخش‌ها بزرگ‌تر یعنی محتواهایی که به‌طورمعمول دارای چند پاراگراف، تصویر، نقل و قول و….. هستند، با استفاده از تگ div علامت‌گذاری می‌شوند. فراموش نکنید که داخل تگ div می‌توانید چند تا div دیگر نیز داشته باشیم.
برای درست کردن لیست نیز از ol برای لیست‌های مرتب و از ul برای لیست‌های نامرتب استفاده کنیم. موارد داخل لیست باید با li کد شوند. به‌عنوان‌مثال یک لیست نامرتب در html به‌صورت زیر است.
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
تگ های inline
بسیاری از تگ‌های inline برای قالب‌بندی متن‌ها استفاده می‌شوند. به‌عنوان‌مثال، برچسب strong متنی را bold می‌کند. درحالی‌که تگ em آن متن را کج یا italic نمایش می‌دهد.
لینک‌ها هم عناصر inline هستند که برای نمایش دادن آنها و مقصد داخل تگ a باید ویژگی href قرار دهیم. مثل:
<a href="https://example.com/">Click me!</a>
تصاویر نیز عناصری inline هستند. برای آنکه یک تصویر را در سایت نمایش دهید باید از تگ img استقاده کنید. برای تعیین مسیر قرارگیری عکس نیز باید از ویژگی src استفاده کنید.
<img src="/images/example.jpg" alt="Example image">
Html5 چیست و تفاوت آن با نسخه های دیگر آن چیست؟
html یک تحول باورنکردنی را پشت سر گذاشته است. w3c دائما نسخه‌ها و به‌روزرسانی های جدید را منتشر می‌کند. درحالی‌که نقاط عطف تاریخی نیز نام‌های اختصاصی دارند. html4 که این روزها html نامیده می‌شود، در سال ۱۹۹۹ منتشر شد. درحالی‌که آخرین نسخه اصلی آن در سال ۲۰۱۴ منتشر گردید. این نسخه را با نام html5 می‌شناسند. html5 بسیاری از ویژگی‌های جدید را به این زبان معرفی کرده است.
یکی از ویژگی‌های مورد انتظار html پشتیبانی از صوت و تصویر است. به‌جای استفاده از flash player، می‌توانید به راحتی و با استفاده از تگ‌های audio و video فیلم‌ها و فایل‌های صوتی خود را در صفحات وب جاسازی کنیم.
html5 تگ‌های معنایی و مفهمومی را ارائه داده است. این تگ‌های معنایی، مفهوم صفحات وب را به موتورهای جستجو انتقال می‌دهند که هم به نفع خوانندگان است و هم اینکه به سئو و بهینه سازی سایت کمک می‌کند.
معروف‌ترین تگ‌های معنایی عبارتند از:
<article></article>, <section></section>, <aside></aside>, <header></header>, and <footer></footer>
مزایا و معایب html چیست؟
مانند هر چیز دیگری، html نیز دارای معایب و مزایا است که قرار است در این بخش به آنها بپردازیم.
مزایا:
- یک زبان پرکاربرد با منابع یادگیری فراوان
- در هر مرورگری قابل اجرا است
- یادگیری آسان
- کاملا رایگان و مبع باز
- استاندارهای رسمی طراجی سایت را حفظ می کند
- به راحتی با زبان های بک اند مانند PHP و Node.Js قابل ادغام است.
معایب:
- بیشتر برای طراحی static استفاده می‌شود. برای عملکرد پویا، ممکن است لازم باشد از جاوا اسکریپت یا یک زبان بک‌اند مانند php استفاده کنیم.
- همه‌ی صفحات سایت باید جداگانه طراحی شوند. حتی اگر از عناصر مشابه استفاده کنیم. مانند: فوتر و هدر.
- برخی از مرورگرها ویژگی‌های جدید آن را آرام‌آرام ایجاد می‌کنند.
- پیش‌بینی رفتار مرورگر دشوار است. زیرا مرورگرهای قدمی دستورات جدید را اجرا نمی‌کنند.
html , css , js چگونه باهم ارتباط برقرار می کنند؟
اگرچه html یک زبان نشانه‌گذاری قدرتمند است. اما برای ایجاد یک سایت حرفه‌ای و کاملاً پاسخگو، کافی نیست. فقط می‌توانیم از آن برای افزودن عناصر متنی و ساختار محتوا استفاده کنیم. بااین‌حال اچ تی‌ام ال با دو زبان دیگر یعنی css و js بسیار هماهنگ و خوب کار می‌کند. آنها باهم می توانند به تجربه کاربری خوبی دست پیدا کنند و عملکردهای پیشرفته‌ای را پیاده‌سازی کنند.
css مسئول استایل دهی به عناصر مانند رنگ پس‌زمینه، عکس پس‌زمینه، چیدمان و فاصله هاست.
جاوا اسکریپت به شما این امکان را می‌دهد تا قابلیت‌های پویا مانند پنجره‌های بازشو، اسلایدر تصاویر و…. را به سایتتان اضافه کنید.
html را مانند یک فرد برهنه، css را به‌عنوان یک لباس و js را به‌عنوان حرکات آن فرد در نظر بگیرید.
پس بالاخره، Html چیست؟
html زبان‌اصلی نشانه‌گذاری در صفحات وب است. این زبان در هر مرورگر بومی‌ای استفاده می‌شود. می‌توانید از آن برای ایجاد ساختار محتوای وب‌سایت‌ها و برنامه‌های وب استفاده کنید. این پایین‌ترین سطح فن‌آوری های frontend است که به‌عنوان پایه‌ای برای یک ظاهر طراحی‌شده شما می‌توانید با css اضافه کنید و عملکرد هرکدام را نیز با جاوا اسکریپت پیاده‌سازی کنید.
در آخر ممنون از شما که تا اینجا همراه ما بودید. ممنون خواهیم بود این مقاله رایگان را با دوستانتان به اشتراک بگذارید.
۱ دیدگاه. ارسال دیدگاه جدید
سلام واقعا ممنونم ازتون
منی که نمیدونستم html چیه و چه کاربردی داره قشنگ فهمیدم