آموزش html بخش اول

آموزش HTML – بخش اول

آموزش HTML

HTML چیست؟ HTML مخفف عبارت Hyper Text Markup Language است. حتما در مقالات مختلف این جمله را خوانده‌اید که ” HTML زبان برای نشانه‌گذاری است و زبان برنامه‌نویسی نیست ” اما چرا میگوییم زبان نشانه‌گذاری؟

درواقع هر صفحه وب دارای ساختاری است و از اجزای مختلفی تشکیل‌شده است. از طریق این زبان، این اجزا را تعریف می‌کنیم. یعنی ساختمان اصلی صفحه وب را می‌سازیم و در آن تعیین می‌کنیم کدام قسمت پاراگراف است، کدام قسمت منو است و چه متنی عنوان یک مطلب است و … . یعنی هر قسمت از صفحه را نشانه‌گذاری کرده‌ایم و برای هر بخش از صفحه از نشانه‌ای استفاده کرده‌ایم.

پس برای یادگیری کامل طراحی سایت ، ابتدا باید زبان HTML را آموخت. اکنون‌که با کاربرد HTML آشنا شدیم در ادامه با ایجاد یک سند و توضیحات بخش‌های مختلف، به یادگیری این زبان می‌پردازیم.

شروع کار با HTML

با ایجاد یک سند، آموزش HTML را آغاز می‌کنیم. گام‌به‌گام مراحل را با ما پیش بیایید و از یادگیری لذت ببرید.

ابتدا نرم‌افزار Sublime Text را اجرا کرده و از قسمت File بر روی New File کلیک نمایید. می‌توانید هم‌زمان کلیدهای Ctrl+N را فشار دهید تا یک سند جدید ایجاد شود. فایل ایجادشده را باید ذخیره کنید. در منوی File بر روی Save As کلیک کنید.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

 

سندمان را بانام index ذخیره کرده‌ایم. توجه داشته باشید که باید اسناد HTML را با همین پسوند ذخیره کنید؛ یعنی پس از تایپ نام دلخواه برای سند، عبارت.html و یا.htm را تایپ نمایید. همانند عکس بالا. حالا بر روی دکمه Save کلیک کنید.

در خط اول نرم‌افزار sublime text عبارت html:5 را تایپ کنید و دکمه Tab را فشار دهید تا اسکلت اصلی ایجاد شود. برای اینکه بتوان از امکانات sublime استفاده کنید باید Emmet را نصب کنید. باکمی جستجو در اینترنت بسته به نوع ویندوز خود، می‌توانید آن را نصب کنید.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

توضیحات سند ایجادشده:

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

به Browser می‌گوید که سندی که ایجاد کرده‌ایم HTML5 است و به آن کمک می‌کند تا محتویات صفحه را به‌درستی نمایش دهد. این بخش باید در اولین خط از سند HTML نوشته شود و بهتر است از حروف بزرگ برای تایپ آن استفاده شود.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

ریشه سند HTML است و تمام اجزا در این تگ قرار می‌گیرند.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

تمام اطلاعات متا که در مورد سند است در این تگ قرار می‌گیرند.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

عنوان سند در این تگ نوشته می‌شود.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

تمام اجزا و اطلاعاتی که در Browser نمایش داده می‌شود در این تگ قرار می‌گیرند.

توجه: با تمام تگ‌های HTML به‌مرور آشنا خواهید شد. در طول آموزش ممکن است از تگ‌هایی استفاده‌ای شود که شما آن را ندیده‌اید. جای هیچ نگرانی نیست. همه تگ‌ها، در زمان مناسب توضیح داده خواهند شد. در هر مرحله با تگ‌های جدید آشنا خواهید شد و با تمرین و تکرار، در ذهنتان خواهند ماند.

ساختار تگ‌های HTML

هر تگ HTML دارای نامی است که محتویاتی را که می‌خواهیم نمایش دهیم و در کل، اطلاعاتی که می‌خواهیم توسط آن‌ها صفحه وب را تشکیل دهیم، در آن‌ها قرار می‌گیرند.

<tagname> محتویات موردنظر </tagname>

هر تگ از دو قسمت تشکیل‌شده است.

Start tag: شروع تگ را نشان می‌دهد؛ مانند :<p>

End tag: در انتهای محتویات نوشته می‌شود و نشان‌دهنده‌ی پایان تگ است. این قسمت شامل یک  /” همراه بانام تگ می‌شود؛ مانند:</p>

توجه داشته باشید که start tag و end tag در مرورگر نمایش داده نمی‌شوند و تنها محتویات درون آن‌ها نمایش داده می‌شود.

نکته: start tag را معمولا opening tag و end tag را closing tag میگویند.

Web Browser

برای مشاهده اطلاعاتی که در سند HTML نوشته‌ایم نیاز به یک Browse داریم. در آموزش‌هایمان معمولا از chrome و یا firefox استفاده می‌کنیم. همان‌طور که گفتیم، در Browser تگ‌ها نمایش داده نمی‌شوند و صرفا متن‌هایی که درون تگ‌ها نوشته‌شده‌اند نمایش داده می‌شوند.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

عناوین در HTML

در زبان HTML برای نوشتن عناوین از ۶ تگ <h1> تا <h6> استفاده می‌کنیم. H1 دارای بیشترین اهمیت و بیشترین اندازه برای نمایش و <h6> حائز کمترین اهمیت و به طبع کمترین اندازه نمایش هست. به‌عکس زیر توجه نمایید:

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

پاراگراف

برای نمایش هر پاراگراف از تگ <p> استفاده می‌شود:

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

ایجاد لینک

برای ایجاد لینک در صفحه، تگ <a> استفاده می‌شود. با استفاده از خصیصه href آدرس صفحه و یا سایتی را که می‌خواهیم به آن لینک بزنیم را تعیین می‌کنیم.

 

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

Attribute یا خصیصه همان اطلاعات و ویژگی‌هایی هستند که می‌خواهیم به هر تگ اضافه کنیم.

وقتی‌که نشانگر موس را روی لینک قرار می‌دهید، شکل نشانگر تغییر پیدا می‌کند و در قسمت پایین بروز، آدرسی را که در href تعیین کرده بودیم نمایش داده می‌شود. (به‌عکس بالا توجه کنید)

قرار دادن عکس در سند

تگ <img> برای قرار دادن یک عکس در سند استفاده می‌شود. این تگ دارای خصیصه‌های src برای منبع عکس یعنی پوشه‌ای که عکس در آن قرارگرفته است، width و height برای طول و عرض عکس استفاده می‌شوند. خصیصه alt متنی را تعیین می‌کند که اگر عکس به هر دلیلی دانلود نشد، به‌جای عکس آن متن نمایش داده می‌شود.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

اگر به هر دلیلی عکس نمایش داده نشود، متن alt نمایش داده خواهد شد؛ که این خصیصه به سئو سایت کمک می‌کند:

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

اجزا سند HTML

همان‌طور که قبلا گفتیم هر جزء از صفحه، با استفاده از تگ‌های HTML به وجود می‌آیند؛ و گفتیم که محتوا، بین تگ شروع و تگ پایان قرار می‌گیرند.

اجزا تودرتو (nested)

وقتی‌که یک جزء از سند، شامل یک یا چند جزء دیگر شود، حالت تودرتو یا nested به وجود می‌آید. همه‌ی اسنادی که با زبان HTML نشانه‌گذاری می‌شوند، قطعا شامل اجزا تودرتو هستند.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

در عکس بالا، تگ <html> تگ اصلی است و تمام تگ‌ها را دربر می‌گیرد که از خط ۲ آغازشده و در خط ۱۴ بسته می‌شود. درون تگ <html> تگ‌های <head> (خط‌های ۳ تا ۶) و <body> (خط‌های ۷ تا ۱۳) قرارگرفته‌اند که این تگ‌ها نیز خود شامل تگ‌های دیگری شده‌اند. این همان حالت nested است که در بالا توضیح داده شد.

تگ <body> شامل تگ‌های h1 و p می‌شود. در تگ هدینگ با <h1> آغازشده و با h1 پایان میابد. تگ p نیز به همین صورت. همان‌طور که در عکس‌ها می‌بینید، محتوایی که می‌خواهیم نمایش دهیم درون تگ‌های شروع و پایان قرار می‌گیرند.

توجه: تگ‌های پایان را حتما بنویسید. البته بعضی از تگ‌ها، مثل تگ <p> درصورتی‌که تگ پایان هم نوشته نشود، محتوا را به‌درستی نمایش می‌دهد؛ اما بهتر است که برای همه تگ‌ها، تگ پایان نوشته شود. همچنین توجه داشته باشید که در تگ پایان، علامت ” / ” را قبل از نام تگ بنویسید. <p> some text </p>

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

برای رفتن به خط بعدی ، همانند فشردن دکمه Enter در نرم‌افزار word و تایپ در ابتدای خط بعدی، تگ <br> استفاده می‌شود.

 

تگ <br> را می‌توان به‌ این صورت  هم نوشته می شود:<br />

استفاده از حروف بزرگ یا کوچک؟

برای نوشتن تگ‌ها هم می‌توان از حروف بزرگ و یا حروف کوچک استفاده کرد یعنی <p> با <P> هیچ فرقی ندارد؛ اما بهتر است که از حروف کوچک استفاده کنید. ما نیز تا انتهای آموزش از حروف کوچک استفاده می‌کنیم.

خصیصه (Attributes)

در بیشتر تگ‌ها، باید یک سری اطلاعات را برای تگ تعریف کنیم. این اطلاعات اضافه‌شده را Attribute یا خصیصه میگوییم. خصیصه‌ها همیشه در start tag و به‌صورت name=”value” نوشته می‌شوند؛ یعنی وقتی‌که تگی را باز می‌کنیم، بعد از نوشتن نام تگ، خصیصه‌ای را که می‌خواهیم اضافه کنیم را می‌نویسم و بعد علامت مساوی (=) و در ادامه مقدار خصیصه را در بین علامت نقل‌قول (” “) می‌نویسیم. توجه داشته باشید که می‌توانیم علامت Double Quote را استفاده نکنیم؛ اما بهتر است که همیشه از علامت نقل‌قول استفاده کنیم.

با خصیصه‌ها به‌مرور و در بین مثال‌ها آشنا می‌شوید.

خصیصه lang

برای هر سندی که ایجاد می‌کنیم باید زبانی را تعریف کنیم تا موتورهای جستجو در هنگام ایندکس کردن صفحه، زبان متنی که قرار می‌دهیم را بفهمند. این زبان را در تگ <html> و به‌صورت lang نوشته می‌شود.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

در این مثال زبان سند را انگلیسی تعریف کرده‌ایم. اگر به‌طور خواص بخواهیم از لهجه انگلیسی استفاده کنیم، مقدار Attribute را به‌صورت

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

می‌نویسیم.

خصیصه title

حتما در هنگام جستجو و مطالعه صفحات وب، با متن‌هایی مواجه شده‌اید که وقتی نشانگر موس را روی آن قرار می‌دهید، متنی در کنار نشانگر نمایش داده می‌شود که به آن tooltip میگوییم. این متن را با استفاده از خصیصه title تعیین می‌کنیم:

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

در مثال بالا در تگ آغاز p تعیین کردیم که وقتی نشانگر موس بر روی متن درون تگ p قرار گرفت، متن this is tooltip نمایش داده شود.

در آغاز این قسمت از آموزش گام‌به‌گام طراحی سایت، در مورد خصیصه‌های href در یک لینک،alt، src، width و height صحبت کردیم و گفتیم هرکدام چه کاربردی دارند.همان‌گونه که در بالا ذکر شد و گفتیم که برای نوشتن تگ‌ها بهتر است که از حروف کوچک استفاده کنیم، برای نوشتن خصیصه‌ها نیز از حروف کوچک استفاده می‌کنیم.

آموزش HTML

HTML چیست؟ HTML مخفف عبارت Hyper Text Markup Language است. حتما در مقالات مختلف این جمله را خوانده‌اید که ” HTML زبان برای نشانه‌گذاری است و زبان برنامه‌نویسی نیست ” اما چرا میگوییم زبان نشانه‌گذاری؟

درواقع هر صفحه وب دارای ساختاری است و از اجزای مختلفی تشکیل‌شده است. از طریق این زبان، این اجزا را تعریف می‌کنیم. یعنی ساختمان اصلی صفحه وب را می‌سازیم و در آن تعیین می‌کنیم کدام قسمت پاراگراف است، کدام قسمت منو است و چه متنی عنوان یک مطلب است و … . یعنی هر قسمت از صفحه را نشانه‌گذاری کرده‌ایم و برای هر بخش از صفحه از نشانه‌ای استفاده کرده‌ایم.

پس برای یادگیری کامل طراحی سایت ، ابتدا باید زبان HTML را آموخت. اکنون‌که با کاربرد HTML آشنا شدیم در ادامه با ایجاد یک سند و توضیحات بخش‌های مختلف، به یادگیری این زبان می‌پردازیم.

شروع کار با HTML

با ایجاد یک سند، آموزش HTML را آغاز می‌کنیم. گام‌به‌گام مراحل را با ما پیش بیایید و از یادگیری لذت ببرید.

ابتدا نرم‌افزار Sublime Text را اجرا کرده و از قسمت File بر روی New File کلیک نمایید. می‌توانید هم‌زمان کلیدهای Ctrl+N را فشار دهید تا یک سند جدید ایجاد شود. فایل ایجادشده را باید ذخیره کنید. در منوی File بر روی Save As کلیک کنید.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

 

سندمان را بانام index ذخیره کرده‌ایم. توجه داشته باشید که باید اسناد HTML را با همین پسوند ذخیره کنید؛ یعنی پس از تایپ نام دلخواه برای سند، عبارت.html و یا.htm را تایپ نمایید. همانند عکس بالا. حالا بر روی دکمه Save کلیک کنید.

در خط اول نرم‌افزار sublime text عبارت html:5 را تایپ کنید و دکمه Tab را فشار دهید تا اسکلت اصلی ایجاد شود. برای اینکه بتوان از امکانات sublime استفاده کنید باید Emmet را نصب کنید. باکمی جستجو در اینترنت بسته به نوع ویندوز خود، می‌توانید آن را نصب کنید.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

توضیحات سند ایجادشده:

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

به Browser می‌گوید که سندی که ایجاد کرده‌ایم HTML5 است و به آن کمک می‌کند تا محتویات صفحه را به‌درستی نمایش دهد. این بخش باید در اولین خط از سند HTML نوشته شود و بهتر است از حروف بزرگ برای تایپ آن استفاده شود.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

ریشه سند HTML است و تمام اجزا در این تگ قرار می‌گیرند.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

تمام اطلاعات متا که در مورد سند است در این تگ قرار می‌گیرند.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

عنوان سند در این تگ نوشته می‌شود.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

تمام اجزا و اطلاعاتی که در Browser نمایش داده می‌شود در این تگ قرار می‌گیرند.

توجه: با تمام تگ‌های HTML به‌مرور آشنا خواهید شد. در طول آموزش ممکن است از تگ‌هایی استفاده‌ای شود که شما آن را ندیده‌اید. جای هیچ نگرانی نیست. همه تگ‌ها، در زمان مناسب توضیح داده خواهند شد. در هر مرحله با تگ‌های جدید آشنا خواهید شد و با تمرین و تکرار، در ذهنتان خواهند ماند.

ساختار تگ‌های HTML

هر تگ HTML دارای نامی است که محتویاتی را که می‌خواهیم نمایش دهیم و در کل، اطلاعاتی که می‌خواهیم توسط آن‌ها صفحه وب را تشکیل دهیم، در آن‌ها قرار می‌گیرند.

<tagname> محتویات موردنظر </tagname>

هر تگ از دو قسمت تشکیل‌شده است.

Start tag: شروع تگ را نشان می‌دهد؛ مانند :<p>

End tag: در انتهای محتویات نوشته می‌شود و نشان‌دهنده‌ی پایان تگ است. این قسمت شامل یک  /” همراه بانام تگ می‌شود؛ مانند:</p>

توجه داشته باشید که start tag و end tag در مرورگر نمایش داده نمی‌شوند و تنها محتویات درون آن‌ها نمایش داده می‌شود.

نکته: start tag را معمولا opening tag و end tag را closing tag میگویند.

Web Browser

برای مشاهده اطلاعاتی که در سند HTML نوشته‌ایم نیاز به یک Browse داریم. در آموزش‌هایمان معمولا از chrome و یا firefox استفاده می‌کنیم. همان‌طور که گفتیم، در Browser تگ‌ها نمایش داده نمی‌شوند و صرفا متن‌هایی که درون تگ‌ها نوشته‌شده‌اند نمایش داده می‌شوند.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

عناوین در HTML

در زبان HTML برای نوشتن عناوین از ۶ تگ <h1> تا <h6> استفاده می‌کنیم. H1 دارای بیشترین اهمیت و بیشترین اندازه برای نمایش و <h6> حائز کمترین اهمیت و به طبع کمترین اندازه نمایش هست. به‌عکس زیر توجه نمایید:

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

پاراگراف

برای نمایش هر پاراگراف از تگ <p> استفاده می‌شود:

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

ایجاد لینک

برای ایجاد لینک در صفحه، تگ <a> استفاده می‌شود. با استفاده از خصیصه href آدرس صفحه و یا سایتی را که می‌خواهیم به آن لینک بزنیم را تعیین می‌کنیم.

 

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

Attribute یا خصیصه همان اطلاعات و ویژگی‌هایی هستند که می‌خواهیم به هر تگ اضافه کنیم.

وقتی‌که نشانگر موس را روی لینک قرار می‌دهید، شکل نشانگر تغییر پیدا می‌کند و در قسمت پایین بروز، آدرسی را که در href تعیین کرده بودیم نمایش داده می‌شود. (به‌عکس بالا توجه کنید)

قرار دادن عکس در سند

تگ <img> برای قرار دادن یک عکس در سند استفاده می‌شود. این تگ دارای خصیصه‌های src برای منبع عکس یعنی پوشه‌ای که عکس در آن قرارگرفته است، width و height برای طول و عرض عکس استفاده می‌شوند. خصیصه alt متنی را تعیین می‌کند که اگر عکس به هر دلیلی دانلود نشد، به‌جای عکس آن متن نمایش داده می‌شود.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

اگر به هر دلیلی عکس نمایش داده نشود، متن alt نمایش داده خواهد شد؛ که این خصیصه به سئو سایت کمک می‌کند:

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

اجزا سند HTML

همان‌طور که قبلا گفتیم هر جزء از صفحه، با استفاده از تگ‌های HTML به وجود می‌آیند؛ و گفتیم که محتوا، بین تگ شروع و تگ پایان قرار می‌گیرند.

اجزا تودرتو (nested)

وقتی‌که یک جزء از سند، شامل یک یا چند جزء دیگر شود، حالت تودرتو یا nested به وجود می‌آید. همه‌ی اسنادی که با زبان HTML نشانه‌گذاری می‌شوند، قطعا شامل اجزا تودرتو هستند.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

در عکس بالا، تگ <html> تگ اصلی است و تمام تگ‌ها را دربر می‌گیرد که از خط ۲ آغازشده و در خط ۱۴ بسته می‌شود. درون تگ <html> تگ‌های <head> (خط‌های ۳ تا ۶) و <body> (خط‌های ۷ تا ۱۳) قرارگرفته‌اند که این تگ‌ها نیز خود شامل تگ‌های دیگری شده‌اند. این همان حالت nested است که در بالا توضیح داده شد.

تگ <body> شامل تگ‌های h1 و p می‌شود. در تگ هدینگ با <h1> آغازشده و با h1 پایان میابد. تگ p نیز به همین صورت. همان‌طور که در عکس‌ها می‌بینید، محتوایی که می‌خواهیم نمایش دهیم درون تگ‌های شروع و پایان قرار می‌گیرند.

توجه: تگ‌های پایان را حتما بنویسید. البته بعضی از تگ‌ها، مثل تگ <p> درصورتی‌که تگ پایان هم نوشته نشود، محتوا را به‌درستی نمایش می‌دهد؛ اما بهتر است که برای همه تگ‌ها، تگ پایان نوشته شود. همچنین توجه داشته باشید که در تگ پایان، علامت ” / ” را قبل از نام تگ بنویسید. <p> some text </p>

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

برای رفتن به خط بعدی ، همانند فشردن دکمه Enter در نرم‌افزار word و تایپ در ابتدای خط بعدی، تگ <br> استفاده می‌شود.

 

تگ <br> را می‌توان به‌ این صورت  هم نوشته می شود:<br />

استفاده از حروف بزرگ یا کوچک؟

برای نوشتن تگ‌ها هم می‌توان از حروف بزرگ و یا حروف کوچک استفاده کرد یعنی <p> با <P> هیچ فرقی ندارد؛ اما بهتر است که از حروف کوچک استفاده کنید. ما نیز تا انتهای آموزش از حروف کوچک استفاده می‌کنیم.

خصیصه (Attributes)

در بیشتر تگ‌ها، باید یک سری اطلاعات را برای تگ تعریف کنیم. این اطلاعات اضافه‌شده را Attribute یا خصیصه میگوییم. خصیصه‌ها همیشه در start tag و به‌صورت name=”value” نوشته می‌شوند؛ یعنی وقتی‌که تگی را باز می‌کنیم، بعد از نوشتن نام تگ، خصیصه‌ای را که می‌خواهیم اضافه کنیم را می‌نویسم و بعد علامت مساوی (=) و در ادامه مقدار خصیصه را در بین علامت نقل‌قول (” “) می‌نویسیم. توجه داشته باشید که می‌توانیم علامت Double Quote را استفاده نکنیم؛ اما بهتر است که همیشه از علامت نقل‌قول استفاده کنیم.

با خصیصه‌ها به‌مرور و در بین مثال‌ها آشنا می‌شوید.

خصیصه lang

برای هر سندی که ایجاد می‌کنیم باید زبانی را تعریف کنیم تا موتورهای جستجو در هنگام ایندکس کردن صفحه، زبان متنی که قرار می‌دهیم را بفهمند. این زبان را در تگ <html> و به‌صورت lang نوشته می‌شود.

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

در این مثال زبان سند را انگلیسی تعریف کرده‌ایم. اگر به‌طور خواص بخواهیم از لهجه انگلیسی استفاده کنیم، مقدار Attribute را به‌صورت

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

می‌نویسیم.

خصیصه title

حتما در هنگام جستجو و مطالعه صفحات وب، با متن‌هایی مواجه شده‌اید که وقتی نشانگر موس را روی آن قرار می‌دهید، متنی در کنار نشانگر نمایش داده می‌شود که به آن tooltip میگوییم. این متن را با استفاده از خصیصه title تعیین می‌کنیم:

آموزش HTML - بخش 1 | آموزش طراحی صفحات وب

در مثال بالا در تگ آغاز p تعیین کردیم که وقتی نشانگر موس بر روی متن درون تگ p قرار گرفت، متن this is tooltip نمایش داده شود.

در آغاز این قسمت از آموزش گام‌به‌گام طراحی سایت، در مورد خصیصه‌های href در یک لینک،alt، src، width و height صحبت کردیم و گفتیم هرکدام چه کاربردی دارند.همان‌گونه که در بالا ذکر شد و گفتیم که برای نوشتن تگ‌ها بهتر است که از حروف کوچک استفاده کنیم، برای نوشتن خصیصه‌ها نیز از حروف کوچک استفاده می‌کنیم.

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

دسته بندی طراحی سایت در سایت سازان