طراحی آسان صفحات وب؛ آموزش ۱۷ تگ HTML ساده و کاربردی

حتی مدرن ترین وب سایت ها هم عموما از سطح رابط ها و اینترفیس های کاربرپسند و سازگار با کاربر ساخته می شوند، بنابراین بهتر است چند HTML پایه را بدانیم. اگر هفده tag HTML زیر را بدانید می توانید یک وب پیج پایه را با استفاده از یک برنامه یا اپلیکیشن مثل ورد پرس ، بسازید.

مثال هایی از کد HTML با خروجی شان را برای بیشتر tag ها بیان می کنیم.

۱-<!DOCTYPE html>

در آغاز هر سند HTML که تولید می کنید، به این tag نیاز دارید. این tag تضمین می کند که بروسور بفهمد درحال خواندن HTML است و انتظار HTML5 یعنی جدیدترین ورژن را دارد. حتی اگر اینtag، واقعا یک HTML tag نباشد باز هم بهتر است آن را بدانید.

۲-<html>

این tagدیگری است که به بروسور یا جستجو گر می گوید بعد از DOCTYPE tag ، راه را درست ادامه دهند و آن را با tag <html> درست در پایان فایل تان، ببندید. هرچیز دیگر در داکیومنت و سند شما بین این tag ها حرکت می کند.

۳-<head>

تگ <head>، بخش header فایل تان را شروع می کند. اجزای این قسمت روی وب پیج شما ظاهر نمی شوند. به جای آن، جاوی متاداده هایی برای موتورهای جستجو است و اطلاعاتی برای بروسور یا جستجوگر ارائه می دهد. برای پیج های بیسیک و پایه، این تگ حاوی عنوان و مطلب مربوط به آن است. اما چند چیز دیگر هم می توان در این بخش گنجاند.


برای یادگیری صد ها تگ دیگر کلیک کنید


۴-<title >

 

این تگ، عنوان یا title  پیج شما را تنظیم می کند. همه چیزی که باید انجام دهید، نوشتن title یا عنوان در تگ و بستن آن است. درست اینطوری:

این نامی است که به صورت tab title نمایش داده می شود وقتی که در یک بروسور یا جستجوگر باز می شود.

۵-<meta>

درست مثل title tag، متاداده در بخش header پیج شما قرار داده می شود. متاداده عموما توسط موتورهای جستجو استفاده شده و اطلاعاتی درمورد آنچه روی پیج و صفحه شماست. فیلدهای متای مختلف وجود دارد اما چند فیلدی وجود دارد که عموما استفاده می شوند:

-description : توضیحات عمومی و پایه درباره صفحه یا پیج شما.

Keywords: کلیدواژه های انتخابی که برای پیج یا صفحه شما قابل استفاده است.

author: نویسنده پیج و صفحه شما.

Viewport: یک تگ برای حصول اطمینان از اینکه پیجتان به درستی نمایش داده می شود.

در ادامه مثالی زده می شود تا مطلب را بهتر متوجه شوید:

“Viewport” باید همیشه “width=device-width, initial-scale=1.0” باشد تا اطمینان حاصل شود که صفحه شما به خوبی روی موبایل و صفحه دسکتاپ کامپیوتر نمایش داده می شود.

۶- <body>

بعد از بستن قسمت header، به body یا بدنه متن می روید.این بخش را با تگ <body> باز کرده و آن را با تگ </body> می بندید. این در انتهای فایل تان درست قبل از تگ </html> قرار دارد.

همه محتویات وب پیج تان بین این تگ ها حرکت می کند. این خیلی ساده است:

 

۷- <h1>

تگ  <h1>، یک header سطح یک را روی پیجتان تعریف می کند. این معمولا، title  است و به طور ایده آل فقط یکی روی هر پیج وجود دارد. <h2> ، headerهای سطح دو مثل section header ها،  <h3>، sub header های سطح سه را تعریف می کند و همینطور تا  <h6>ادامه می یابد.

۸- <p>

تگ پاراگراف یک پاراگراف جدید را شروع می کند. این معمولا دو line breaks را تعبیه می کند.

 برای مثال به شکستگی یا break میان خط قبلی و این خط نگاه کنید. این کاری است که تگ <p> انجام می دهد.

 

خروجی:

پاراگراف اول شما

پاراگراف دوم شما.

می توانید از استایل های CSS در تگ های پاراگراف خود استفاده کنید، درست مثل این تگ که اندازه متن را تغییر می دهد:

خروجی:

۲۰درصد متن بزرگتر

۹-<br>

تک line break یا قطع کردن خط، در خط، شکستگی ایجاد می کند:

 

خروجی:

خط اول.

خط دوم(نزدیک به خط اول)

شبیه تگ <<hr کار می کند. خط افقی روی پیج تان می کشد و برای جداکردن بخش های متن خوب است.

۱۰-strong>>

این تگ، قسمتهای مهم متن را تعریف میکند. به طورکلی، این یعنی  متن میتواند bold یا پررنگ باشد. با این حال، می توان از css استفاده کرد تا متن strong>> به طور متفاوتی نمایش داده شود. با این حال می توانید برای bold کردن متن هم از strong>> استفاده کنید:

 

خروجی:

نکات بسیار مهمی که می خواهید بهتر دیده شوند.

اگر با تگ <b> برای بولد کردن متن آشنا باشید، می توانید هنوز هم از آن استفاده کنید.

۱۱-<em>

درست مثل<b> و strong>>،  <em> و<i> با هم ارتباط دارند. تگ <em> متن مورد تاکید را شناسایی می کند که عموما یعنی آن را ایتالیک می کند. این احتمال است که CSS متن مورد تاکید را به شکل متفاوتی نمایش دهد.


برای یادگیری صد ها تگ دیگر کلیک کنید


 

خروجی:

روی یک خط از متن تاکید می شود

تگ <i>  کار می کند اما این امکان وجود دارد که در آینده از ورژن های جدید تر html حذف شود.

۱۲-<a>

این تگ به شما امکان می دهد لینک تولید کنید. یک لینک ساده، اینگونه است:

”herf” مقصد لینک را شناسایی می کند. در بسیاری از موارد، مقصد، وبسایت دیگر است. البته می تواند یک فایل، یک عکس یا یک فایل pdf باشد. خصیصه های مفید دیگر شامل “target” و “title” هستند. خصیصه target منحصرا برای باز کردن یک لینک در یک Tab یا پنجره جدید استفاده می شود:

خروجی:

Go to MakeUse of in a new tab

 خصیصه “title” یک tooltip تولید می کند.

۱۳- <img>

اگر می خواهید عکسی را در پیج خود تعبیه کنید باید از تگ تصویر استفاده کنید. از این به طور نرمال با خصیصه “src” استفاده می شود. این منبع تصویر را تشخیص می دهد:

خصیصه های دیگر مثل “height”، “width” و “alt” در دسترس هستند.

همانطور که انتظار دارید، “height” و “width”، ارتفاع و عرض تصویر را تعیین می کند. به طور کلی، ایده خوبی است که فقط یکی از آنها را تنظیم کنید تا مقیاس و اندازه عکس به درستی تعیین شود. اگر هر دو را تنظیم کنید ممکن است در نهایت عکس کشیده یا فشرده ای داشته باشید.

تگ”alt” به بروسور می گوید اگر عکس را نمی تواند نمایش دهد، کدام متن را نمایش دهد و بهتر است عکسی در آن بگنجاند.

۱۴- <ol>

تگ ordered list به شما امکان می دهد یک لیست منظم و مرتب داشته باشید. به طور کلی ، این یعنی لیست شماره دار و مرتبی دارید. هر آیتم در لیست به یک تگ آیتم نیاز دارد بنابراین لیستی اینچنینی دارید:

خروجی:

۱-اولین چیز

۲-دومین چیز

۳- سومین چیز

در HTML5، می توانید از <ol reversed> برای معکوس کردن ترتیب اعداد استفاده کنید و می توانید عدد آغاز کننده را با خصیصه start تنظیم کنید.

خصیصه “type” به شما امکان می دهد به بروسور بگویید از کدام نوع سمبل برای آیتم های لیست استفاده کنید. می تواند روی  ، “۱”  ، “A” ، “a” ، “l” یا سمبل خاصی مثل سمبل زیر تنظیم شود:

۱۵-<ul>

لیست نامرتب ساده تر از لیست مرتب است.

خروجی:

-آیتم اول

-آیتم دوم

-آیتم سوم

لیست نامرتب دارای خصیصه های “type” است و می توان آن را روی “disc”، “circle” یا “square” قرار داد.

۱۶- <table>

درحالی که از جدول برای فرمت بندی اطلاعات استفاده می شود، گاهی می خواهید از ردیف ها و ستون ها برای بخش بندی اطلاعات روی صفحه تان استفاده کنید. چند Tag لازم است تا جدول کار کند. در ادامه، کد HTML نمونه بیان می شود:

 

<table> و </table> شروع و پایان جدول را تعیین می کند. تگ <tbody> حاوی همه محتویات جدول است.

هر ردیف جدول در یک تگ <tr> بسته می شود. هر سلول در هر ردیف در تگ های <th> برای header های ستون یا <td> برای داده های ستون پیچیده شده است. برای هر ستون روی هر ردیف به یکی از این تگ ها نیاز دارد.

خروجی:

۱st column                                             ۲nd column

Row 1 column 2                                       row 1 column 2

Row 2 column 1                                       row 2 column 2

 

۱۷- <blockquote>

وقتی درحال نقل قول از وب سایت یا فرد دیگری هستید و می خواهید نقل قول را از بقیه متن خود جدا کنید از این تگ استفاده کنید. تنها کاری که باید بکنید قرار دادن نقل قول در تگ های بازکردن و بستن blockquote است.

فرمت دقیقی که استفاده می شود به بروسوری که استفاده می کنید یا css سایت شما بستگی دارد. اما تگ همانطوری باقی می ماند.

با این ۱۷ مثال HTML باید بتوانید یک وب سایت ساده را بسازید.


منبع : makeuseof


 

لینک کوتاه: https://Tjjc.ir/hKEqn

پاسخی بگذارید