HTML یک زبان نشانه گذاری برای ایجاد صفحات وب سایت است. اینکه آیا HTML یک زبان برنامه نویسی نیز محسوب می شود یا خیر، باید بگوییم که از نظر فنی HTML یک زبان برنامه نویسی برای طراحی صفحات وب سایت محسوب می شود ولی در واقع بسیاری از امکاناتی که زبان برنامه نویسی دارد را ندارد، البته نباید هم داشته باشد به دلیل اینکه کاربردش چیز دیگری است. مثلا در HTMl خبری از دستورات شرطی یا خبری از حلقه ها و یا دستورات مختلف برای نوشتن توابع مختلف و برنامه های مختلف نیست. بنابراین HTML یک زبان برنامه نویسی است که فقط برای نشانه گذاری به منظور ایجاد صفحات وب سایت مورد استفاده قرار می گیرد.
این نشانه گذاری به کمک تگ های HTML ایجاد می شوند و در واقع با استفاده از تگ های مختلف، عناصر مختلف هر صفحه مشخص می شوند. به عنوان مثال با یک تگ خاص می توانید یک متن را در صفحه به نمایش در آورید، یا با یک تگ خاص یک تصویر را را در صفحه به نمایش در آورید، یا با یک تگ خاص بگویید که این متن تیتر است و … . بنابراین هر تگ HTML معنی خاصی دارد و برای کاربرد خاصی استفاده می شود. دقت داشته باشید که HTML برای رنگ بندی و … صفحات بکار نمی رود و فقط ساختار صفحه را و عناصر آن را مشخص می کند و رنگ بندی و … بر عهده CSS است. در این مقاله با ما همراه باشید تا به صورت ساده و کاربردی با HTML آشنا شوید و یک صفحه با استفاده از تگ های مهم HTML ایجاد کنید.
فهرست مطالعه این مقاله
HTML چیست؟
اچ تی ام ال به معنی زبان نشانه گذاری فرامتنی می باشد به این معنی که زمانی که مطلبی یا مقاله ای یا … در وب سایت می خواهد به نمایش در آید، به کمک این نشانه گذاری ها (که توسط تگ ها مشخص می شود) قسمت های مختلف آن مطلب مشخص و در مرورگر به نمایش گذاشته می شود.
بنابراین اچ تی ام ال یک زبان نشانه گذاری برای مشخص کردن عناصر مختلف صفحه وب سایت است و برای این منظور از یک سری تگ و صفات استفاده می کند تا هر عنصر در صفحه را مشخص کند. مرورگر وظیفه اجرای این دستورات را دارند و به خواندن این تگ ها، عناصر متناظر با آن ها را به نمایش می گذارند و به این ترتیب زمانی که یک فایل اچ تی ام ال توسط مرورگر خوانده می شود و اجرا می شود، یک صفحه وب را مشاهده می کنید.
ساختار HTML
به طور کلی یک فایل اچ تی ام ال از یک سری تگ به همراه صفات مربوطه تشکیل می شود. در بیش تر موارد، تگ HTML شامل یک تگ شروع و یک تگ پایان است که بستگی به نوع تگ، مواردی بین آن ها قرار می گیرد.
| <نام تگ/> ………………………. <نام تگ> |
به طور کلی در یک فایل اچ تی ام ال که برای ایجاد یک صفحه مورد استفاده قرار می گیرد، 4 تگ اصلی وجود دارد که در واقع ساختار کلی را تشکیل می دهد و تگ های دیگر در این 4 قسمت قرار می گیرند.
<!DOCTYPE html>
<!DOCTYPE html> این قسمت به معنی این است که این سند، یک سند از نوع HTML 5 است و صرفا می نویسید تا مشخص کنید از نوع HTML 5 است. این تگ نیاز به بسته شدن ندارد.
- <html>
این تگ نشان دهنده ی ریشه صفحه HTML است. دستور بسته شدن این تگ مانند همه تگ های دیگر است (<html/>) و در آخرین خط باید بسته شود.
- <head>
این تگ شامل اطلاعات متا درباره ی صفحه HTML است. معمولا تایتل صفحه (که در نتایج جستجو نشان داده می شود، در داخل این بخش قرار می گیرد). این تگ نیز مانند همه تگ های دیگر باید بسته شود.
- <body>
این تگ تقریبا اصلی ترین تگ است و بدنه صفحه شامل متن، تیتر، تصویر، هایپرلینک، جدول، لیست ها و … همه در این قرار می گیرد. این تگ نیز مانند دیگر تگ ها در آخر باید بسته شود.
به عنوان مثال فایل HTML زیر را در نظر بگیرید:
| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Page Title</title> |
| </head> |
| <body> |
| <h1>My First Heading</h1> |
| <p>My first paragraph.</p> |
| <body/> |
| <html/> |
این کد شامل عناصر مختلفی است. اولین خط همانطور که گفتیم نشان دهنده این است که از نوع html5 می باشد. دو مین خط ریشه است و در آخر بسته شده است.
در قسمت تگ head، یک تگ تایتل ایجاد شده است که عنوان صفحه در نتایج موتورهای جستجو است.
در قسمت body نیز دو تگ h1 و p تعریف شده است که یکی تیتر اصلی صفحه یا مقاله یا .. است و دیگری یک پاراگراف است که در همین مقاله با آن ها آشنا می شویم.
و در نهایت برای دیدن خروجی می توانید این تگ ها را در برنامه نوت پد بنویسید و بعد با پسوند .html ذخیره کنید و سپس با مرورگر باز کنید. به عنوان مثال خروجی مثال بالا بصورت زیر نمایش داده می شود.
معرفی برخی از تگ ها و صفات ضروری HTML
در این بخش به معرفی برخی از مهمترین و ضروری ترین تگ ها و صفات در HTML اشاره می کنیم و خواهید دید که با همین چند تگ می توانید یک صفحه ایجاد کنید و البته بعدا که آشنایی پیدا کردید می توانید از منابعی مانند w3school یادگیری خود را کامل تر کنید و خودتان به همه ی بخش های آن تسلط پیدا کنید. بنابراین به جای اینکه یک لیستی از تگ ها و صفت ها را به شما آموزش دهیم و در نهایت شما گیج شوید، چند تگ ساده به همراه یک مثال کاربردی را با هم یاد می گیریم تا ببینیم ایجاد یک صفحه html کار ساده ای است. بعدا علاوه بر اینکه با دیگر دستورات html می توانید این صفحه را بهتر کنید، می توانید از کدهای css برای رنگ و … و همچنین جاوا اسکریپت برای انجام برخی کارها استفاده کنید. ابتدا تگ های مهم و ضروری را معرفی می کنیم.
تگ های مهم و ضروری HTML
1- تگ های h1 تا h6
تگ های h1 تا h6 که معروف به Html headings هستند و با <h1> و … نمایش داده می شوند (h1>…</h1> و …)، برای مشخص کردن عناوین صفحه مورد استفاده قرار می گیرند. این ها عنوان ها و زیر عنوان هایی هستند که شما می خواهید در صفحه داشته باشید. زمانیکه مقاله می نویسید حتما دیده اید که تیترها بزرگتر و موارد داخلی تیترها کوچکتر هستند. این تگ ها برای نشان دادن همان موارد است. مثلا زمانیکه متنی را در داخل تگ h1 می گذارید به این معنی است که این متن از نوع تیتر اصلی آن صفحه (که از همه بزرگتر است) است. یا زمانیکه عنوان های اصلی مقاله یا … را می خواهید نشان دهید باید از h2 استفاده کنید و مثلا اگر یکی از عنوان های h2، چندین زیر عنوان داشت باید از h3 در درون آن استفاده کنید و … . همچنین کاربران اغلب یک مرور کوتاه بر روی کلیه هدینگ ها می اندازند و به اصطلاح یک مرور کلی می کنند.
مثال:
| <h1/>تیتر 1(تیتر اصلی مقاله یا …)<h1> |
| <h2/>تیترهای 2<h2> |
| <h3/>تیترهای 3<h3> |
| <h4/>تیترهای 4<h4> |
| <h5/>تیترهای 5<h5> |
| <h6/>تیترهای 6<h6> |
خروجی این تگ ها به صورت زیر است:
2- تگ p
تگ p که به HTML Paragraph معروف است و با <p> نمایش داده می شود (<p>…</p>)، برای مشخص کردن پاراگراف ها یا متن های صفحه مورد استفاده قرار می گیرد. در واقع هر زمانی متنی بخواهید بنویسید که در مرورگر نمایش داده شود، با استفاده از این تگ می نویسید.
مثال:
| <p/>این متن یک پاراگراف است.<p> |
خروجی این تگ به صورت زیر است:
3- تگ a
تگ a که به HTML Links معروف است و با تگ <a …> نمایش داده می شود (<a …….> ….</a>)، برای مشخص کردن لینک است و اگر بخواهید متنی را به صورت لینک نمایش دهید بکار می رود. به عنوان مثلا حتما دیده اید که برای اشاره به صفحه یا جای دیگری، در یک متن از متنی استفاده می شود که به صورت لینک نمایش داده شده است و با کلیک روی آن می توانید به آن قسمت بروید. قسمت داخل تگ a بصورت لینک نمایش داده می شود و برای اینکه بگویید این لینک به کجا اشاره کند و در واقع کاربر با کلیک روی آن به کجا برود، باید آدرس صفحه مد نظر را به کمک صفت href در تگ a مشخص کنید. صفت ها برای ارائه اطلاعات بیشتر به تگ های HTML اضافه می شوند. فقط دقت کنید که فرمت را مانند بالا رعایت کنید.
مثال:
<p>برای خواندن اطلاعات بیشتر روی<a href=”https://rayatarh.com/blog/internal-link/”> این لینک </a> کلیک کنید</p>
خروجی این تگ به صورت زیر است:
برای خواندن اطلاعات بیشتر روی این لینک کلیک کنید
یا مثلا:
<p>برای آشنایی بیشتر با این مبحث مقاله ی<a href=”https://rayatarh.com/blog/internal-link/”> لینک داخلی چیست </a> را مطالعه کنید</p>
خروجی این تگ به صورت زیر است:
برای آشنایی بیشتر با این مبحث مقاله ی لینک داخلی چیست را مطالعه کنید
4- تگ img
تگ img که به HTML Images معروف است و با تگ <img> نمایش داده می شود (<img …>)، برای مشخص کردن تصویر در یک صفحه مورد استفاده قرار می گیرد.
تگ img صفت های مختلفی دارد. برای مثال با صفت scr منبع تصویر مورد نظر را مشخص می کنید که یا بر روی سایت شما است و یا در فضای دیگری است. با استفاده از صفت alt متن جایگزین برای این تصویر می نویسید. همچنین با صفت style (که البته این مورد css است) می توانید عرض و طول را مشخص کنید. موارد دیگری نیز وجود دارد که بعدا می توانید به تدریج با آن ها آشنا شوید.
مثال:
<img src=”https://rayatarh.com/wp-content/uploads/2021/02/1.jpg” alt=لینک داخلی چیست”” style=width:104px; height:142px;>
خروجی این تگ به صورت زیر است:
در ادامه به معرفی مهمترین صفات در اچ تی ام ال می پردازیم.
صفات مهم و ضروری HTML
تگ های html می توانند صفت (Attribute) داشته باشند و در واقع صفت ها اطلاعات اضافی به تگ ها می دهد. صفت ها معمولا به فرمت “نام = مقدار” هستند. در ادامه به برخی از صفت های مهم اشاره می کنیم.
1- صفت href
تگ <a> یک لینک را تعریف می کند. در این تگ صفت href بیانگر آدرس (یو آر آل) صفحه ای که این لینک به آن داده شده است، است.
<a href=”https://rayatarh.com/blog/internal-link/”>
2- صفت src
تگ <img> برای ایجاد تصویر در یک صفحه بکار می رود. صفت src نمایانگر مسیر تصویری که باید به نمایش گذاشته شود، است.
با دو روش می توانید آدرس در صفت src را مشخص کنید. یا آدرس مطلق که در واقع آدرس تصویری که در سایت دیگری است را می گذارید مثلا
Scr=”https://rayatarh.com/wp-content/uploads/2021/02/1.jpg“.
فقط دقت داشته باشید زمانی که این کار را انجام می دهید کنترل بر روی تصویر ندارید و آن عکس ممکن است پاک شود تا تغییر کند.
روش دوم این است که از آدرس نسبی استفاده کنید و در واقع لینک به تصویری که هاست سایت خودتان است، بدهید. در این روش آدرس دیگر شامل نام دامنه نمی باشد.
<p><a href=”html_images.asp”>HTML Images</a></p>
<p><a href=”/css/default.asp”>CSS Tutorial</a></p>
3- صفت width و height
تگ <img> همچنین دو صفت width برای مشخص کردن عرض تصویر و height برای مشخص کردن ارتفاع تصویر می تواند داشته باشد. فقط برای استفاده از این دو صفت باید از صفت style (که در واقع مشخص کننده css است) استفاده کنید.
<img src=”https://rayatarh.com/wp-content/uploads/2021/02/1.jpg” alt=لینک داخلی چیست”” style=width:104px; height:142px;>
4- صفت Alt
تگ <img> همچنین صفتی به اسم alt دارد که با استفاده از این متن جایگزینی برای تصویر می توانید بنویسید. این متن همان متنی است که صفحه نتایج موتورهای جستجو برای تصاویر می آید. همچنین اگر به دلایلی تصویر نمایش داده نشود، کاربر می تواند این متن را ببیند.
<img src=”img_s.jpg” alt=”this is a man picture.”>
5- صفت Style
صفت style برای اضافه کردن رنگ، فونت، سایز و … به یک تگ (h، p و …) مورد استفاده قرار می گیرد (البته این مورد Css است ولی در اینجا به آن اشاره می کنیم). خود صفت style، چندین صفت دیگر دارد که هر کدام برای انجام کاری مورد استفاده قرار می گیرد.
مثلا برای اینکه یک متن را به رنگ قرمز کنیم نیاز است که از style استفاده کنیم و همچنین در صفت style، صفت color را برابر با قرمز قرار می دهیم. برای مشخص کردن رنگ هم می توانید اسم آن را بنویسید هم rgb آن و هم دیگر فرمت های رنگ مانند hsl، rgba، hex و … .
<p style=”color:red;”>this is a red paragraph.</p>
همچنین می توانید rgb آن را بنویسید
<p style=”color:rgb(255, 99, 71);”>this is a red paragraph.</p>
یا مثلا برای مشخص کردن سایز فونت به روش زیر عمل می کنیم.
<h1 style=”font-size: 60px;”>Heading 1</h1>
یا مثلا برای تعیین رنگ پس زمینه کل صفحه می توانید به این صورت از صفت style استفاده کنید
<body style=”background-color:powderblue;”>
بسیاری از موارد دیگر وجود دارد که می شود مثال زد ولی تا همین جا اگر همین دستورات را به خوبی فرا گرفته باشید یک صفحه HTML واقعی می توانید ایجاد کنید و به تدریج می توانید از منابعی مثل W3school و … دانش خودتان را افزایش دهید. در ادامه می خواهیم ببینیم چطور یک مقاله یا یک صفحه را با html ایجاد کنیم.
مثال کاربردی از ایجاد یک صفحه HTML
فرض کنید یک مقاله در مورد لینک داخلی نوشته اید و می خواهید یک صفحه html ایجاد کنید تا این مقاله در مرورگر نمایش داده شود.
ابتدا مقاله خود را آماده کنید و مثلا مقاله شما بصورت زیر است.
{
استفاده از لینک داخلی، هم به کاربران و هم به الگوریتم های موتورهای جستجو کمک می کند تا محتوای سایت شما را راحت تر بفهمند. به عبارت دیگر، بکارگیری درست لینک های داخلی یکی از مواردی است که علاوه بر اینکه با بهبود درک بهتر کاربر از مطالب سایت، باعث رضایت کاربر (مهمترین فاکتور برای افزایش رتبه در موتورهای جستجو) می شود، همچنین استفاده ی درست از آنها باعث می شود که الگوریتم های موتورهای جستجو درک بهتری از سایت ما داشته باشند و به درستی ارتباط بین مطالب سایت ما را درک کنند و در نتیجه رفته رفته، رتبه های بالاتری را به سایت ما بدهند. در ادامه این مقاله با ما همراه باشید تا کاملا با لینک داخلی و تاثیر آن بر سئو سایت و همچنین با نحوه لینک سازی داخلی آشنا شوید. علاوه بر این ها، شما را با نکات حرفه ای در بکارگیری درست لینک های داخلی آشنا می کنیم.
- لینک داخلی (Internal Link) چیست؟
………………………
}
ادامه را نقطه چین گذاشتیم. خوب اکنون که مقاله آماده است باید دستورات html ای بنویسید که به همین صورت مقاله در مرورگر به نمایش در بیاید.
همانطور که در بالا توضیح دادیم برای تک تک بخش های این مقاله باید از تگ های اچ تی ام ال استفاده کنیم تا نمایش داده شوند. یعنی باید تگی بنویسید که عنوان اصلی مقاله را مشخص کند، تگی بنویسید که تصویر مقاله را مشخص کند، تگی بنویسید که متن های مقاله را مشخص کند و …
کد مربوطه مطابق زیر می شود.
<!DOCTYPE html>
<html>
<head >
<meta charset=”UTF-8″>
<head>
<title>Page Title</title>
</head>
<body>
<h1>لینک داخلی و تاثیر آن بر سئو سایت و نحوه لینک سازی داخلی</h1>
<img src=”https://rayatarh.com/wp-content/uploads/2021/02/1.jpg” alt=”لینک داخلی چیست”>
<p>استفاده از لینک داخلی، هم به کاربران و هم به الگوریتم های موتورهای جستجو کمک می کند تا محتوای سایت شما را راحت تر بفهمند. به عبارت دیگر، بکارگیری درست لینک های داخلی یکی از مواردی است که علاوه بر اینکه با بهبود درک بهتر کاربر از مطالب سایت، باعث رضایت کاربر (مهمترین فاکتور برای افزایش رتبه در موتورهای جستجو) می شود، همچنین استفاده ی درست از آنها باعث می شود که الگوریتم های موتورهای جستجو درک بهتری از سایت ما داشته باشند و به درستی ارتباط بین مطالب سایت ما را درک کنند و در نتیجه رفته رفته، رتبه های بالاتری را به سایت ما بدهند. در ادامه این مقاله با ما همراه باشید تا کاملا با لینک داخلی و تاثیر آن بر سئو سایت و همچنین با نحوه لینک سازی داخلی آشنا شوید. علاوه بر این ها، شما را با نکات حرفه ای در بکارگیری درست لینک های داخلی آشنا می کنیم.</p>
<h2>1- لینک داخلی (Internal Link) چیست؟</h2>
<img src=”https://rayatarh.com/wp-content/uploads/2021/02/2.png” alt=”لینک داخلی چیست”>
<p>به طور کلی لینک داخلی (پیوند داخلی)، هر پیوندی است که شما در یکی از صفحات سایت، به یکی دیگر از صفحات همان سایت می زنید و از این طریق، به ارتباط بین این دو مطلب اشاره می کنید. زمانیکه این ارتباطات به درستی انجام شود کاربران و موتورهای جستجو می توانند مطالب سایت شما را به درستی بفهمند و به درستی در وب سایت شما قدم بردارند.</p>
<h2>2-نکات حرفه ای برای ایجاد لینک داخلی</h2>
<img src=”https://rayatarh.com/wp-content/uploads/2021/02/7.jpg” alt=”نکات حرفه ای لینک سازی داخلی “>
<p>تا اینجا با اینکه لینک داخلی چیست و همچنین چرا باید از آن استفاده کنیم و نحوه ی ایجاد لینک داخلی آشنا شدیم. اگر چه اگر همین مطالب را به صورت اصولی در سایتمان انجام دهیم، می توان علاوه بر اینکه به وب سایتمان نظم می دهیم، همچنین جایگاه های بهتری را در نتایج موتورهای جستجو کسب کنیم. اما در ادامه می خواهیم به نکات دیگری هم اشاره کنیم تا در کنار این مطالب، بتوانید به نحو مطلوبتری از لینک داخلی استفاده کنید.</p>
<h3>2-1 تعداد لینک های داخلی در صفحه</h3>
<p>یکی نکات مهم تأثیر گذار روی سئو، تعداد لینک داخلی در هر صفحه است. اما این به این معنی نیست که تعداد مشخصی در هر مقاله لینک داخلی باید داشته باشیم. در واقع بهترین فرمول برای انتخاب تعداد لینک های داخلی در صفحه، توجه به رضایت مخاطب و تعداد مقاله های مرتبط سایتتان است. به عبارت بهتر در هر جایی که تمایل به استفاده از لینک داخلی داشتید توجه کنید که آیا نیاز کاربر است یا خیر. البته در مواقعی در زمانیکه از تکنیک های کلاه سیاه استفاده می کنیم شرایط به گونه ی دیگری می شود!!!</P>
<h3>2-2 جایگاه لینک در صفحه</h3>
<p>یکی از نکاتی که میتواند ارزش لینک شما را مشخص کند، جایگاه قرار گرفتن آن در صفحه است. این یعنی لینک داخلی که در اول مقاله قرار داده میدهید، ارزش بیشتری به صفحه مقصد منتقل میکند تا لینک های داخلی اواسط یا انتهای صفحه.</p>
<h2>نتیجه گیری</h2>
<p>لینک های داخلی به عنوان یکی از مهمترین عواملی است که بکارگیری درست آنها می تواند ارتباط بین مفاهیم سایت را مشخص کند و در نتیجه به رفع نیاز کاربر کمک کند. به علاوه الگوریتم های موتورهای جستجو با استفاده از آنها می توانند محتوای سایت شما را بفهمند. بنابراین بکارگیری درست لینک های داخلی بر سئو سایت بسیار تاثیر گذار است. اگر سایت شما از لینک های داخلی خوبی برخوردار نیست پیشنهاد می کنیم از امروز شروع به این کار بکنید و از نتایج آن استفاده کنید.</p>
</body>
</html>
اگر از ابتدای این مقاله مطالب را خوانده باشید، نیازی به توضیح این کد نیست و همه خط های آن کاملا واضح است و دلیل وجودی اش معلوم است. فقط یک خط در این کد نا آشنا است که <meta charset=”UTF-8″> است و برای نمایش کاراکترهای فارسی به درستی بکار می رود. در مورد کل این کد فقط یک توضیح مختصر می تواند این باشد که در خط اول دستور <!DOCTYPE html> وجود دارد که در بالا گفتیم برای بیان این است که این فایل از نوع اچ تی ام ال 5 است. در خط بعدی تگ html را داریم که در انتها بسته نیز شده است. در قسمت بعدی تگ head را داریم. قسمت body اصلی ترین بخش است که در این قسمت عناصر مختلف مشخص می شود برای نمونه عنوان مقاله را با h1 مشخص کرده ایم، تصویر بعد از آن را با img و به همین ترتیب.
در نهایت خروجی کار به صورت زیر در مرورگر نمایش داده می شود. فقط از لحاظ رنگ، فونت و … کمی نا مرتب است که با استفاده از کدهای css می توانید این موارد را انجام دهید.
HTML یک زبان نشانه گذاری برای ایجاد صفحات وب سایت است. در این مقاله ضمن معرفی HTML، شما را به صورت کاربردی با ایجاد یک صفحه وب سایت آشنا کردیم.
با عضویت در خبرنامه ایمیلی ما میتوانید در رشد کسب و کار خود قدم موثری بردارید!
برچسب :
بدون دیدگاه