در این جلسه به توضیح مبانی HTML و نحوه استفاده از تگ‌ها و صفات مختلف برای ایجاد صفحات وب سایت می‌پردازیم.
مقدمه:
در اینجا، برخی از موضوعات و تگ‌های HTML که در متن آمده است را مرور می‌کنیم و شما با صفات و تگ‌های مقدماتی در HTML آشنا میشوید.
توضیحات:
- تگ پاراگراف و تگ‌های تأکید:که تگ‌های <p> برای پاراگراف‌ها استفاده می‌شوند. تگ <strong> برای تأکید بر متن و نمایش آن به صورت پررنگ (bold) و تگ <em> برای تأکید و نمایش متن به صورت مورب (italic) به کار می‌روند.
- تگ‌های تیتر (Heading Tags): HTML شامل شش نوع تگ تیتر، از <h1> تا <h6>، است که برای تعیین اهمیت تیترها به کار می‌روند. <h1> مهم‌ترین تیتر و بزرگ‌ترین سایز را دارد و <h6> کم‌اهمیت‌ترین و کوچک‌ترین سایز را دارد.
- لیست‌ها: دو نوع لیست در HTML وجود دارد:
- لیست نامرتب (unordered list) با تگ <ul> که از نقاط بولت برای آیتم‌ها استفاده می‌کند.
- لیست مرتب (ordered list) با تگ <ol> که آیتم‌ها را با اعداد مرتب می‌کند.
- تگ‌های ساختاری <div>: تگ <div> برای تقسیم‌بندی محتوا به بخش‌های مختلف استفاده می‌شود و به کمک آن می‌توان عناصر مرتبط را در یک گروه قرار داد.
- تگ‌های ساختاری <span>: این تگ برای تقسیم‌بندی درون خطی (inline) استفاده می‌شود و برخلاف <div> که محتوای بلوکی ایجاد می‌کند، برای تکه‌های کوچک‌تر متن و محتوا مناسب است.
- تگ‌های بدون بسته شدن مانند <br> و <hr>: این تگ‌ها به دلیل نداشتن محتوای داخلی نیازی به تگ بسته ندارند. <br> برای ایجاد یک خط جدید و <hr> برای ایجاد یک خط افقی استفاده می‌شود.
- تگ تصویر <img>: برای اضافه کردن تصویر به صفحه، از تگ <img> همراه با صفت src برای مسیر تصویر استفاده می‌شود. همچنین، صفت alt برای توضیحات تصویر به‌خصوص در دسترس‌پذیری (accessibility) مهم است.
- لینک‌ها: تگ <a> برای ایجاد لینک‌ها استفاده می‌شود و صفت href آدرس مقصد لینک را مشخص می‌کند.
- تگ نقل قول <blockquote>: برای نقل قول از منابع دیگر، از تگ <blockquote> استفاده می‌شود. صفت cite منبع اصلی نقل قول را نشان می‌دهد.
- استفاده از صفات style برای استایل‌دهی: صفت style می‌تواند برای اعمال CSS به تگ‌ها استفاده شود، مثل تغییر رنگ یک عنصر خاص.
- نظرات در HTML: برای توضیح کد و کمک به درک آن توسط توسعه‌دهندگان دیگر، از نظرات HTML استفاده می‌شود که به صورت <!– comment –> قرار می‌گیرند و در مرورگر نمایش داده نمی‌شوند.
کدها:
برای یادگیری و درک بهتر کدهای زیر را تمرین کنید.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Document</title>
</head>
<body>
<h1>hello<span> world</span></h1>
<p>p1</p1>
<br>
<p2>p2</p2>
<em>
<h2>h2</h2>
</em>
<p3>p3</p3> <hr>
<strong>
<p4>p4</p4>
</strong>
<div>
<ul>
item ul1
<ol>
item ol1
</ol>
<ol>
item ol2
</ol>
<ol>
item ol3
</ol>
</ul>
</div>
<ul>
item ul2
<ol>
item ol4
</ol>
<ol>
item ol5
</ol>
<ol>
item ol6
</ol>
</ul>
<img src=”./coding-3-85.png” alt=”IMG:” width=400PX>
<a href=”./Untitled-1.html”>درباره ما</a>
<blockquote>
ساخت وب سایت با فرکیان تک
</blockquote>
<!–هر چیزی در این قسمت بنویسید نمایش داده نمیشود–>
</body>
</html>
در ادامه، با آموزش تگ‌ها و صفات HTML، نکاتی در مورد نحوه لینک‌گذاری بین صفحات و استفاده از مسیرهای نسبی برای تعیین آدرس فایل‌ها را ارائه میدهیم.
برای مشاهده و دسترسی به مطالب بیشتر بر روی اینجا کلیک کنید.
