شما در حال مطالعه نسخه آفلاین یکی از مطالب «مجله فرادرس» هستید. لطفاً توجه داشته باشید، ممکن است برخی از قابلیتهای تعاملی مطالب، مانند امکان پاسخ به پرسشهای چهار گزینهای و مشاهده جواب صحیح آنها، نمایش نتیجه آزمونها، پاسخ تشریحی سوالات، پخش فایلهای صوتی و تصویری و غیره، در این نسخه در دسترس نباشند. برای دسترسی به نسخه آنلاین مطلب، استفاده از کلیه امکانات آن و داشتن تجربه کاربری بهتر اینجا کلیک کنید.
حتی جدیدترین و مدرن‌ترین سایت‌هایی که عموما دارای طراحی کاربرپسند هستند از کدهای ساده‌ی (HTML) بهره می‌گیرند. اگر ۱۷ تگ زیر را بدانید، می‌توانید سایت‌های ساده‌ای را از ابتدا طراحی کرده و سپس سایت خود را با برنامه‌هایی مانند وردپرس راه‌اندازی کنید.
در این مطلب تلاش شده است برای بیشتر تگ‌ها، نمونه‌هایی نیز آورده شود. ضمن اینکه می‌توانید این کدهای (HTML) را در یک ویرایشگر متن پیاده کرده و بعد از ویرایش، آنها را در مرورگر خود باز کنید تا تغییرات اعمال شده را مشاهده کنید.
<!DOCTYPE html>
این تگ برای شروع هر فایل (HTML) که قصد ایجاد آن را دارید، ضروری است. این تک به مرورگر کمک می‌کند تا فایل (HTML) را بخواند و آن را از آخرین نسخه‌ی این زبان برنامه‌نویسی، یعنی (HTML5) مستنثی کند.
با اینکه این کد در واقع یک تگ (HTML) نیست، ولی می‌تواند نمونه‌ی خوبی باشد که دانستن آن ضروری است.
<html>
یکی دیگر از تگ‌هایی که مرورگر براساس آن می‌تواند فایل (HTML) را بخواند، <html> است. چرا همزمان به این مورد و گزینه‌ی قبلی نیاز داریم؟ شاید کسی علت دقیق آن را نداند ولی بهتر است از هر دو استفاده کنید!
در پایان سند خود باید تگ </html> را نیز اضافه کنید.
<head>
در صفحات ساده، تگ <head> شامل عنوان مورد نظر و توضیحات آن است. اما موارد کوچکی وجود دارد که می‌توانید داخل آن قرار دهید که در بخش بعدی می‌بینید.
<title>
همان طور که انتظار می‌رود، این بخش عنوان صفحه را تعریف می‌کند. هر آنچه که می‌خواهید در این تگ قرار داده و آن را می‌بندید.
1<head>2<title>3My Website</title></head>
هنگامی که این فایل یا صفحه در مرورگر باز می‌شود، این نامی است که به عنوان نام تب در مرورگر نمایش داده می‌شود.
<meta>
مانند تگ عنوان، متادیتا در بخش هدر صفحه قرار می‌گیرد (این متادیتا برخلاف متادیتای دستگاه‌های موبایل، حساس نیست). اصولا متادیتا توسط موتورهای جستجو مورد استفاده قرار می‌گیرد و همان طور که حدس می‌زنید، اطلاعاتی که درباره‌ی صفحه‌ی شما باشد در آن نمایش داده می‌شود. فیلدهای مختلفی از متا وجود دارد، اما برخی از آنها بیشتر استفاده می‌شوند:
توصیف (description): توصیف ساده‌ای از صفحه‌ی شما.
کلمات کلیدی (keywords): گلچینی از کلمات کلیدی که در صفحه‌ی شما وجود دارد.
نویسنده (author): نام نویسنده‌ی صفحه‌ی شما.
درگاه نمایش (viewport): تگی که به شما این اطمینان را می‌دهد صفحه‌ی مورد نظر در تمامی درستگاه‌ها درست نمایش داده می‌شود.
در قسمت زیر می‌توانید مثالی را ببینید که امکان اجرای آن در صفحه‌ی مورد نظر وجود دارد:
تگ (viewport) همیشه باید به صورت “width=device-width, initial-scale=1.0” باشد؛ چرا که محتوا باید روی دستگاه‌های دسکتاپ و موبایل درست نشان داده شود.
<body>
بدنه‌ی صفحه‌ی وب شما اصولا شامل هر چیزی غیر از عنوان است که در تگ <body> قرار می‌گیرد. این تگ خیلی ساده است:
1<body>2Everything you want displayed on your page.3</body>
<h1>
تگ <h1> هدرهای سطح یک را در صفحه‌ی شما تعریف می‌کند. <h2> هدرهای سطح دو و <h3> هدرهای سطح سه و به همین ترتیب تا <h6> هدر سطح 6 را تعریف می‌کنند. به عنوان مثال نام تگ‌های این مطلب از هدرهای سطح دو بهره می‌برند.
1<h1>Big and Important Header</h1>2<h2>Slightly Less Big Header</h2>3<h3>Sub-Header</h3>
نتیجه به صورت زیر خواهد بود:
Big and Important Header
Slightly Less Big Header
Sub-Header
همان طور که می‌بینید به ترتیب هر سطح، تیترها (هدرها) کوچکتر می‌شود.
<p>
تگ پاراگراف شروع کننده‌ی یک پاراگراف جدید است. معمولا بعد از استفاده از این تگ، دو خط فاصله ایجاد می‌شود.
به عنوان مثال به فاصله‌ی میان این خط و خط قبلی نگاه کنید.این کاری است که تگ <p> انجام می‌دهد.
1<p>Your first paragraph.</p>2<p>Your second paragraph.</p>
نتیجه به صورت زیر می‌شود:
.Your first paragraph
.Your second paragraph
همچنین می‌توانید از استایل‌های (CSS) در تگ‌های پاراگراف استفاده کنید:
1<p style="font-size: 120%;">20% larger text</p>
که نتیجه به شکل زیر است:
20% larger text
<br>
تگ ایجاد فاصله بین خطوط یک خط فاصله ایجاد می‌کند:
1<p>The first line.<br>2The second line (close to the first one).</p>
نتیجه به صورت زیر می‌شود:
.The first line .(The second line (close to the first one
نکته: ممکن است تگ‌هایی را ببینید که به صورت <br /> یا <br/> نوشته شده باشد. استفاده از علامت اسلش کمک می‌کند تا تگ مورد نظر در فایل (XHTML) قابل خواندن باشد.
<strong>
این تگ متون مهم را مشخص می‌کند. در کل می‌تواند گفت همان بولد کردن مطلب است. با وجود این، احتمال دارد استفاده از تگ <strong> در (CSS) نمایش متفاوتی داشته باشد.
با وجود این می‌تواند با استفاده از <strong> متن خود را بولد کنید.
1<strong>Very important things you want to say.</strong>
نتیجه به صورت زیر خواهد بود:
.Very important things you want to say
اگر با تگ <b> برای بولد کردن متن آشنایی داشته باشید، می‌توانید از آن نیز استفاده کنید. البته هیچ تضمینی وجود ندارد که در نسخه‌های آتی (HTML) این تگ کار کند. اما فعلا کار می‌کند.
<em>
مانند تگ‌های <b> و <strong>، تگ‌های <em> و <i> با هم مرتبط هستند. تگ <em> متن‌های برجسته را تعریف می‌کند که عموما به صورت ایتالیک نمایش داده می‌شود. این امکان در CSS وجود دارد که متون ایتالیک به صورت متفاوتی نمایش داده شود.
1<em>An emphasized line.</em>
نتیجه به صورت زیر نمایش داده می‌شود:
.An emphasized line
تگ <i> همچنان کار می‌کند ولی همچنان این احتمال وجود دارد که در نسخه‌های آتی (HTML) کار نکند.
<a>
تگ <a> ایجادکننده‌ی لینک است. این لینک ساده به صورت زیر است:
1<a href="//www.makeuseof.com/>Go to MakeUseOf</a>
صفت "href" آدرس لینک مقصد را نشان می‌دهد. در بسیاری از مواقع، این لینک به یک سایت دیگر ارجاع داده می‌شود. ضمن اینکه ممکن است فایلی مانند تصویر یا پی‌دی‌اف باشد.
از دیگر صفت‌های کاربردی "target" و "title" هستند. صفت (target) به صورت ویژه و اختصاصی برای باز کردن لینک در یک تب یا پنجره‌ی جدید استفاده می‌شود:
1<a href="//www.makeuseof.com/" target="blank">Go to MakeUseOf in a newtab</a>
اگر می‌خواهید تصویری را داخل صفحه‌ی خود جاسازی کنید، باید از تگ تصویر استفاده کنید. ساده‌ترین روش این است که منبغ تصویر را با استفاده از صفت "src" به صورت زیر اضافه کنید:
همان طور که می‌بینید صفحه شامل تصویر خواهد بود. با وجود این، تعدادی صفت‌های دیگری مانند "height"، "width" و "alt" وجود دارد که می‌توانید به صورت زیر از آنها استفاده کنید:
1<img src="https://cdn.makeuseof.com/wp-content/uploads/2016/02/hdr-moderation.png" width="320" alt="the name of your image">
نتیجه به شکل زیر است:
همان طور که می‌بینید صفات "height" و "width" به ترتیب نشان‌دهنده‌ی عرض و طول تصویر است. در کل، بهتر است یکی از آنها را به درستی تنظیم کنید تا به همان نسبت ابعاد تصویر تغییر کند. اگر از هر دو مورد استفاده کنید، احتمالا تصویر شما کشیده‌تر یا فشرده‌تر می‌شود.
تگ "alt" به مرورگر می‌گوید که در صورت عدم نمایش تصویر، چه متنی به عنوان جایگزین نشان داده شود. بهتر است تمامی تصاویر متن جایگزین داشته باشند. اگر سرعت اینترنت کند باشد یا از مروگر قدیمی استفاده کنید، بهتر است از این تگ در صفحات خود بهره بگیرید.
<ol>
تگ لیست ترتیب‌بندی شده به شما اجازه می‌دهد تا فهرستی را براساس مواردی که می‌خواهید مرتب کنید. در کل، می‌توان گفت فهرست شما، شماره‌بندی شده خواهد شد. هر مورد در لیست، نیاز به تگ <li> دارد که به صورت زیر نوشته می‌شود:
در (HTML5) می‌توانید از <ol reserved> برای معکوس کردن ترتیب شماره‌ها استفاده کنید. صفت "type" به شما اجازه می‌دهد که مرورگر بگویید کدم نوع از نشانه‌ها برای آیتم‌های لیست استفاده شود. شما می‌توانید "1"، "A"، "a"، "I" یا "i" بهره بگیرید که کنار لیست شما نمایش داده می‌شوند.
<ul>
فهرست‌های بدون ترتیب خیلی ساده‌تر از موارد مرتب‌شده هستند. تنها کافی است از گوی‌های توپر استفاده کنید:
فهرست‌های بدون ترتیب دارای صفت "type" هستند و می‌توانید از "disc"، "circle" یا "square" استفاده کنید.
<table>
در حالی که استفاده از جداول به دلیل فرمت آن کمی سخت است، ولی زمان‌هایی وجود دارد که بخواهید اطلاعات خود را در سط و ستون‌های مجزا قرار دهید. به چندین تگ برای عملکرد صحیح جدول نیاز دارید. در ادامه می‌توانید به یک مثال توجه کنید:
هر کدام از تگ‌های <th> یک هدر را احاطه کرده است. <tbody> بدنه‌ی جدول را غیرفعال می‌کند. تگ <tr> یک سطر جدید به جدول اضافه کرده و هر تگ <td> سلولی را در یکی از سطرها مشخص می‌کند.
<blockquote>
زمانی که بخواهید نقل قولی را در از یک سایت یا فرد دیگر در سایت خود بیاورید، می‌توانید با کوتیشن آن را جدا کنید. تگ (blockquote) این کار را انجام می‌دهد. تمام چیزی که نیاز دارید این است تگ‌های کوتیشن را باز کرده، چیزی که می‌خواهید در آن قرار دهید و کوتیشن را ببندید.
1<blockquote>I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain.</blockquote>
نتیجه به صورت زیر است:
I must not fear. Fear is the mind-killer. Fear is the little-death that brings total obliteration. I will face my fear. I will permit it to pass over me and through me. And when it has gone past I will turn the inner eye to see its path. Where the fear has gone there will be nothing. Only I will remain
البته ممکن است فرمت دقیق نوشته‌ی شما براساس مرورگری که استفاده می‌کنید یا کدهای CSS سایت شما متغیر باشد. اما تگ‌ها یکسان است.
اگر به این مقاله علاقه‌مند بوده‌اید، شاید مقاله‌های زیر نیز برای شما جذاب و مفید باشد:
شما در حال مطالعه نسخه آفلاین یکی از مطالب «مجله فرادرس» هستید. لطفاً توجه داشته باشید، ممکن است برخی از قابلیتهای تعاملی مطالب، مانند امکان پاسخ به پرسشهای چهار گزینهای و مشاهده جواب صحیح آنها، نمایش نتیجه آزمونها، پاسخ تشریحی سوالات، پخش فایلهای صوتی و تصویری و غیره، در این نسخه در دسترس نباشند. برای دسترسی به نسخه آنلاین مطلب، استفاده از کلیه امکانات آن و داشتن تجربه کاربری بهتر اینجا کلیک کنید.
فرادرس
همان طور که می‌بینید صفات "height" و "width" به ترتیب نشان‌دهنده‌ی عرض و طول تصویر است. در کل، بهتر است یکی از آنها را به درستی تنظیم کنید تا به همان نسبت ابعاد تصویر تغییر کند. اگر از هر دو مورد استفاده کنید، احتمالا تصویر شما کشیده‌تر یا فشرده‌تر می‌شود.
