HTML (HyperText Markup Language) یک زبان نشانه گذاری است که ساختار و محتوای صفحات وب را تعیین می کند. این کار را از طریق استفاده از تگ ها و عناصر انجام می دهد. در اینجا نحوه عملکرد آن آمده است:
**1. تگ ها و عناصر:**
* **تگ ها:** HTML از تگ ها برای تعریف عناصر مختلف صفحه وب استفاده می کند. تگ ها با استفاده از براکت های زاویه دار (`< >`) مشخص می شوند. به طور معمول، تگ ها به صورت جفتی می آیند: یک تگ شروع (`
`) و یک تگ پایان (``).
* **عناصر:** عنصر HTML از یک تگ شروع، محتوا و یک تگ پایان تشکیل شده است. به عنوان مثال:
```html
این یک پاراگراف است.
```
در اینجا، `
` تگ شروع، `این یک پاراگراف است.` محتوا و `
` تگ پایان است. کل این مجموعه یک عنصر پاراگراف را تشکیل می دهد.
**2. ساختار اصلی HTML:**
هر صفحه HTML از یک ساختار اساسی پیروی می کند:
```html
عنوان صفحه عنوان اصلی
این یک پاراگراف است.
```
* **``:** این اعلان به مرورگر می گوید که این سند از نوع HTML5 است.
* **``:** عنصر ریشه که تمام محتوای صفحه HTML را در بر می گیرد.
* **``:** حاوی فراداده (metadata) در مورد صفحه، مانند عنوان، تنظیمات کاراکتر، لینک به فایل های CSS و JavaScript، و غیره. محتوای این قسمت در خود صفحه وب نمایش داده نمی شود.
* **`
`:** عنوانی که در نوار عنوان مرورگر یا تب مرورگر نمایش داده می شود.<br />* **`<body>`:** حاوی محتوای قابل مشاهده صفحه وب است، مانند متن، تصاویر، لینک ها، و غیره.<br /><br />**3. عناصر بلوکی و درون خطی:**<br /><br />عناصر HTML به دو دسته اصلی تقسیم می شوند:<br /><br />* **عناصر بلوکی (Block-level elements):** این عناصر کل عرض در دسترس را اشغال می کنند و همیشه یک خط جدید را شروع می کنند. به عنوان مثال: `<p>`, `<h1>` تا `<h6>`, `<div>`, `<ul>`, `<ol>`, `<li>`, `<table>`, `<footer>`, `<header>`, `<nav>`.<br />* **عناصر درون خطی (Inline elements):** این عناصر فقط به اندازه محتوای خود فضا اشغال می کنند و یک خط جدید را شروع نمی کنند. به عنوان مثال: `<a>`, `<span>`, `<img>`, `<strong>`, `<em>`, `<code>`.<br /><br />**4. عناصر معنایی (Semantic elements):**<br /><br />HTML5 عناصر معنایی جدیدی را معرفی کرده است که هدف و معنای محتوای خود را به طور واضح تری بیان می کنند. این عناصر به موتورهای جستجو و افراد با استفاده از فناوری های کمکی (assistive technologies) کمک می کنند تا محتوای صفحه را بهتر درک کنند. به عنوان مثال: `<article>`, `<aside>`, `<nav>`, `<header>`, `<footer>`, `<section>`.<br /><br />**5. صفات (Attributes):**<br /><br />تگ ها می توانند صفاتی داشته باشند که اطلاعات اضافی در مورد عنصر ارائه می دهند. صفات در تگ شروع نوشته می شوند و از یک نام و یک مقدار تشکیل شده اند. به عنوان مثال:<br /><br />```html<br /><<br />
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<hr />
<div id="hnetbnr-19" class="hnet-bil"></div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<hr />
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<p>
برخی از محصولات شرکت مهندسی آبان رایان البرز
</p>
<ul style="list-style: none; line-height: 3em">
<li><span class="fa fa-home"></span> <a href="http://www.aralborz.ir/mahsol/51/نرم-افزار-مشاور-املاک">خرید نرم افزار مشاور املاک سرو</a></li>
<li><span class="fa fa-bank"></span> <a href="http://www.aralborz.ir/mahsol/53/نرم-افزار-خیریه">خرید نرم افزار خیریه سرو</a></li>
<li><span class="fa fa-user"></span> <a href="http://www.aralborz.ir/mahsol/60/نرم-افزار-دریافت-و-پرداخت">خرید نرم افزار مدیریت بدهکاران و بستانکاران سرو</a></li>
<li><span class="fa fa-phone"></span> <a href="http://www.aralborz.ir/mahsol/55/نرم-افزار-دفترچه-تلفن-سرو">خرید نرم افزار دفترچه تلفن سرو</a></li>
<li><span class="fa fa-envelope"></span> <a href="http://www.aralborz.ir/mahsol/68/نرم-افزار-نامه-نگار-سرو">خرید نرم افزار نامه نگار سرو</a></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<hr />
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<p class="h5">سایر مقالات آموزشی شرکت نرم افزاری آبان رایان البرز :</p>
<ul style="line-height: 2.5em">
<li><a href='/maghale/20786/نقش-CSS-در-طراحی-رابط-کاربری-چیست' rel='tag'>نقش CSS در طراحی رابط کاربری چیست</a></li><li><a href='/maghale/20785/تفاوت-بین-برنامه‌نویسی-سمت-کاربر-و-سمت-سرور-چیست' rel='tag'>تفاوت بین برنامه‌نویسی سمت کاربر و سمت سرور چیست</a></li><li><a href='/maghale/20784/نقش-هوش-مصنوعی-در-پایگاه-داده‌های-هوشمند-چیست' rel='tag'>نقش هوش مصنوعی در پایگاه داده‌های هوشمند چیست</a></li><li><a href='/maghale/20783/پردازش-زبان-طبیعی-NLP-در-چه-نرم‌افزارهایی-استفاده-می‌شود' rel='tag'>پردازش زبان طبیعی NLP در چه نرم‌افزارهایی استفاده می‌شود</a></li><li><a href='/maghale/20782/نقش-الگوریتم‌های-یادگیری-در-تحلیل-داده-چیست' rel='tag'>نقش الگوریتم‌های یادگیری در تحلیل داده چیست</a></li><li><a href='/maghale/20781/یادگیری-ماشین-چه-تفاوتی-با-یادگیری-عمیق-دارد' rel='tag'>یادگیری ماشین چه تفاوتی با یادگیری عمیق دارد</a></li><li><a href='/maghale/20780/هوش-مصنوعی-چه-کاربردهایی-در-نرم‌افزار-دارد' rel='tag'>هوش مصنوعی چه کاربردهایی در نرم‌افزار دارد</a></li><li><a href='/maghale/20779/رمزارزها-چگونه-در-پایگاه-داده-نگهداری-می‌شوند' rel='tag'>رمزارزها چگونه در پایگاه داده نگهداری می‌شوند</a></li><li><a href='/maghale/20778/چگونه-یک-اپلیکیشن-بلاک‌چین-طراحی-می‌شود' rel='tag'>چگونه یک اپلیکیشن بلاک‌چین طراحی می‌شود</a></li><li><a href='/maghale/20777/Blockchain-چگونه-عمل-می‌کند' rel='tag'>Blockchain چگونه عمل می‌کند</a></li><li><a href='/maghale/20776/نقش-اینترنت-اشیاء-IoT-در-فناوری-چیست' rel='tag'>نقش اینترنت اشیاء IoT در فناوری چیست</a></li><li><a href='/maghale/20775/IaaS-و-PaaS-و-SaaS-چه-تفاوت‌هایی-دارند' rel='tag'>IaaS و PaaS و SaaS چه تفاوت‌هایی دارند</a></li><li><a href='/maghale/20774/نقش-رایانش-ابری-در-توسعه-نرم‌افزارهای-مدرن-چیست' rel='tag'>نقش رایانش ابری در توسعه نرم‌افزارهای مدرن چیست</a></li><li><a href='/maghale/20773/سیستم‌های-مجازی‌سازی-Virtualization-چه-کاربردهایی-دارند' rel='tag'>سیستم‌های مجازی‌سازی Virtualization چه کاربردهایی دارند</a></li><li><a href='/maghale/20772/چگونه-می‌توان-سرعت-سیستم-را-بهینه-کرد' rel='tag'>چگونه می‌توان سرعت سیستم را بهینه کرد</a></li><li><a href='/maghale/20771/BIOS-چه-نقشی-در-راه‌اندازی-سیستم-دارد' rel='tag'>BIOS چه نقشی در راه‌اندازی سیستم دارد</a></li>
</ul>
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
<div id="hnetbnr-21" class="hnet-bil"></div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<hr />
<div id="hnetbnr-20" class="hnet-bil"></div>
</div>
</div>
</div>
<script defer="defer" async="async" type="text/javascript">nhnet = new Date(); var hdn = document.getElementsByTagName('head')[0]; var schn = document.createElement('script'); schn.type = 'text/javascript'; var sahnet = 'http://www.hezarnet.ir/js/hezarnetbils.js'; schn.src = sahnet + '?v=' + nhnet.getFullYear().toString() + '0' + nhnet.getMonth() + '0' + nhnet.getDate() + '0' + nhnet.getHours(); hdn.appendChild(schn); </script>
</div>
<footer id="mfotter" class="page-footer font-small mfotter">
<div class="container">
<div class="row">
<div class="items-container simple-items">
<div class="col-lg-3 itemh">
<h3>زیرمجموعه ها</h3>
<ul>
<li><a href="http://www.netmoj.ir" target="_blank">نیازمندی های نت موج</a></li>
<li><a href="http://www.netpasand.ir" target="_blank">ثبت تبلیغ نت پسند</a></li>
<li><a href="http://www.aralborz.ir" target="_blank">مهندسی آبان رایان البرز</a></li>
<li><a href="http://www.absharagahi.ir" target="_blank">سایت ثبت آگهی آبشار آگهی</a></li>
<li><a href="http://www.jayezebaroon.ir" target="_blank">سایت کسب درآمد جایزه بارون</a></li>
</ul>
<a href="#" class="sendFree">
<img src="/pics/sendFree.png" alt="" title="" /></a>
</div>
<div class="col-lg-3 itemh">
<h3>خدمات مشتریان</h3>
<ul>
<li><a href="/peygirisefaresh">دانلود دوباره فایل(در صورت مشکل)</a></li>
<li><a href="/سوالات-متداول">سوالات متداول</a></li>
<li><a href="/مرکز-مقالات">مقالات</a></li>
<li><a href="/خرید-اعتبار">مدیریت اعتبار</a></li>
<li><a href="/فروشگاه">فروشگاه</a></li>
<li><a href="/تماس-با-ما">تماس با ما</a></li>
<li><a href="/مرکز-دانلود" title="مرکز دانلود">مرکز دانلود</a></li>
<li><a href="/فهرست">فهرست</a></li>
</ul>
</div>
<div class="col-lg-3 itemh">
<h3>پل های ارتباطی</h3>
<div class="info">
<p><i class="fa fa-phone-square"></i> <span>09130193010</span></p>
<p><i class="fa fa-phone-square"></i> <span>09199327367</span></p>
<p><i class="fa fa-envelope"></i> <span>alborzmng(at)gmail.com</span></p>
<p><i class="fa fa-telegram"></i> <span>aralborz@</span></p>
</div>
<div class="social">
<h4>سروسافت در شبکه های اجتماعی</h4>
<a href="https://twitter.com/aralborz"><i class="fa fa-twitter"></i></a>
<a href="https://www.instagram.com/aralborz"><i class="fa fa-instagram"></i></a>
<a href="https://t.me/aralborz"><i class="fa fa-telegram"></i></a>
<a href="https://www.facebook.com/aban.rayanalborz"><i class="fa fa-facebook"></i></a>
</div>
</div>
<div class="col-lg-3 itemh">
<h3>آمار وب سایت</h3>
<div class="info">
<p dir="rtl"><i class="fa fa-user"></i> امروز: 165 نفر<span></span></p>
<p dir="rtl"><i class="fa fa-user"></i> دیروز: 5489 نفر<span></span></p>
<p dir="rtl"><i class="fa fa-user"></i> این هفته: 5654 نفر<span></span></p>
<p dir="rtl"><i class="fa fa-user"></i> این ماه: 173410 نفر<span></span></p>
<p dir="rtl"><i class="fa fa-user"></i> کل بازدید: 16136071 نفر<span></span></p>
<p dir="rtl"><i class="fa fa-user"></i> امروز: 1404/07/27 <span></span></p>
</div>
</div>
</div>
</div>
</div>
<div class="copyright">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-5 col-sm-6">
<div class="developed">
<img src="/pics/w.png" alt="فروشگاه سروسافت" title="دانلود پروژه" />
<a target="_blank" href="http://www.aralborz.ir" style="text-decoration: none">طراحی سایت </a>,
<a target="_blank" href="http://www.aralborz.ir" style="text-decoration: none">بهینه سازی سایت </a><span style="direction: rtl !important">aralborz.ir</span> © 1399
</div>
</div>
<div class="col-lg-6 col-md-7 col-sm-6">
<div class="copyL">
<img src="/pics/footerlogo.png" alt="" title="" />
<p>تمامی حقوق این وب سایت محفوظ و نزد <a href="/">سرو سافت</a> می باشد. (نسخه 58)</p>
</div>
</div>
</div>
</div>
</div>
</footer>
<script defer="defer" src="/js/jquery.min.js"></script>
<script defer="defer" src="/js/bootstrap.min.js"></script>
<script async="async" src="https://www.googletagmanager.com/gtag/js?id=UA-137362446-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'UA-137362446-1');
</script>
</body>
</html>
