آموزش HTML – درس اول

 

HTML یا Hyper Text Markup Language پایه زبان های برنامه نویسی است جهت استفاده در صفحات وب. به ندرت مشاهده میشود صفحه وبی در اینترنت و یا اینترانت وجود داشته باشد، ولی قطعه ای از کد HTML در آن استفاده نشده باشد.

لطفا به تاریخچه این زبان برنامه نویسی دقت کنید. نکته ای که برای من بسیار جالب بود این است که من و این زبان برنامه نویسی هم سن هستیم.

این یک قطعه کد HTML است.

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

این کد چهارچوب صفحات HTML را نمایش میدهد.

تمامی فایل های HTML میبایست با تگ ذیل شروع شوند.

<!DOCTYPE html>

تگ DOCTYPE

تگ DOCTYPE برای نمایش هرچه بهتر صفحه HTML شماست.

<!DOCTYPE html>
 <!DOCTYPE HTML>  
<!doctype html>

<!Doctype Html>

لازم به ذکر است بزرگی و کوچکی حروف در این تگ از اهمیت بالایی برخوردار نیست.

استفاده از تگ DOCTYPE برای زبان های مرسوم به شرح ذیل میباشد.

HTML5

<!DOCTYPE html>

HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

تگ ها در HTML

هرچیزی که درون دو علامت پایین باشد، تگ نامیده میشود.

<tag-name></tag-name>

مهم: تگ HTML محتوای کلی صفحه HTML را در خود جای میدهد.

<html></html>

مهم: تگ head حاوی تمامی مواردیست که میبایست در Header تعریف شوند. شامل مسیر فایلهای CSS، مسیر فایل های Java Script و برخی تعاریف صفحه.

<head></head>

مهم: تگ body حاوی تمامی مواردیست که به صورت فیزیکی برای بازدیدکننده سایت شما قابل نمایش میباشد. مانند تصاویر، متن ها، و …

<body></body>

مهم: تگ های h1, ht, h3, h4, h5, h6 موضوع اصلی صفحه را مشخص میکند که این موضوع برای موتورهای جستجوگر بسیار دارای اهمیت میباشد.

<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>

مهم: تگ p نگهداری پاراگراف ها را بر عهده دارد. متن هایی که در صفحه مینویسید میبایست درون این تگ قرار گیرند.

<p></p>

مهم: تمامی لینک ها در تگ a قرار میگیرند. لازم به ذکر است مقصد لینک در بخش href تعریف میگردد.

 <a href="http://www.regux.com">This is a link</a>

مهم: تصاویر در داخل تگ img قرار میگیرند.

 <img src="regux.jpg" alt="Regux.com" width="104" height="142">

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

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

 

نویسنده: میلاد خوشدل
کپی تنها با ذکر لینک مطلب مجاز است.


پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

سه × دو =