334 میلیون بیننده ، دستاورد مسابقات قهرمانی League of Legends 2015
December 12, 2015
احتمال عرضه کارت گرافیک هایی با حافظه GDDR6 در سال 2016
December 13, 2015
با جلسه چهارم HTML از سری آموزش های مدیاسافت در خدمتتون هستیم . با ما همراه باشید.
سرفصل ها در HTML
سرفصل ها در HTML با تگ <h1> تا <h6> تعریف می شوند.
مثال
<!DOCTYPE html>
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
خروجی :
همانطور که مشاهده می کنید تگ سرفصل یا Heading شش جور می باشد. تگ <h1> بزرگترین و تگ <h6> کوچک ترین می باشد.
این تگ ها به دلیل اینکه موتورهای جستجو از این تگ ها به عنوان شاخص متن شما برای جستجو استفاده می کنند مهم هستند. بنابراین باید وقتی از این تگ استفاده می کنیم باید مطمئن باشیم که محتوای آن را درست انتخاب کنیم.
از این تگ حتما به عنوان سرفصل استفاده کنید و هرگز از آن برای اینکه متنتان را Bold یا ضخیم یا بزرگ نمایش بدهید استفاده نکنید.
خط افقی در HTML
با استفاده از تگ <hr> یک خط افقی در صفحه می توان رسم کرد.
مثال
<!DOCTYPE html>
<html>
<body>
<p>Mediasoft.ir<p>
<hr>
<p>This is a paragraph.</p>
<hr>
<p>This is a paragraph.</p>
</body>
</html>
خروجی :
نکته : برخی از تگ ها مانند تگ <hr> نیازی به بستن ندارند . یعنی نیازی به <hr/> ندارند و اگر این کار را انجام دهید کار بیهوده ای کرده اید.
تگ <head> و عناصر آن
تگ <head> هیچ ربطی به تگ سرفصل یا Heading ندارد.
این تگ دارای عناصری است که به آنها meta data می گویند. Meta data که به آن فراداده نیز گفته می شود مجموعه ای اطلاعات درباره ی سند HMTL به موتور های جستجو می دهد.
این تگ بین تگ های <html> و <body> قرار می گیرد.
تگ <title>
با این تگ که جزو عناصر تگ <head> می باشد می توان عنوان سند HTML را مشخص کرد.
عنوان برروی صفحه نمایان نمی شود بلکه برروی سربرگ مرورگر نمایش پیدا می کند.
تگ <meta>
در این تگ صفت charset وجود دارد که برای تعریف انکدینگ (Encoding) سند به کار می رود. این تگ در صفحه ی مرورگر نمایش پیدا نمی کند.
مثال : در این مثال می توانید با موقعیت تگ های <head> و <title> و <meta> آشنا شوید.
<!DOCTYPE html>
<html>
<head>
<title>My First HTML</title>
<meta charset=”UTF-8″>
</head>
<body>
<p>Future is yours …</p>
</body>
</html>
خروجی :
تگ <p>
با استفاده از تگ <p> می توان یک پاراگراف ایجاد نمود.
مثال
<!DOCTYPE html>
<html>
<body>
<p>This is First paragraph.</p>
<p>This is Second paragraph.</p>
<p>This is Third paragraph.</p>
</body>
</html>
خروجی :
مرورگرها به صورت اتوماتیک بین پاراگراف ها اندازه ی یک خط خالی می گذارند.
نمایش HTML
شما هیچ گاه نمی توانید مطمئن شوید که HTML چگونه نمایش پیدا می کند، چراکه در صفحه نمایش های بزرگ و کوچک و تغییر اندازه ی پنجره ها نتایج مختلفی به دست می آید.
در HTML نمی توانید خروجی را بااستفاده از Space های اضافه و Enter های اضافه( زدن Enter و رفتن به خط بعد) تغییر دهید. زیرا مرورگرها Space های اضافی و خط های اضافی را در نظر نمی گیرد.
هر تعداد Space و هر تعداد خط جدید را فقط به عنوان یک Space در نظر می گیرد.
مثال
<!DOCTYPE html>
<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
</body>
</html>
خروجی :
همانطور که در تگ <p> اول مشاهده می کنید با اینکه محتوای آن در چند خط نوشته شده است ولی در خروجی کل پاراگراف در یک خط نمایش داده شده است. همینطور برای تگ <p> دوم ، با اینگه از تعداد زیادی Space استفاده شده است ولی فقط یک Space در نظر گرفته شده است .
تگ <br>
اگر بخواهیم در وسط پاراگراف به سطر بعد برویم با اضافه کردن تگ <br> این عمل انجام می شود. این تگ نیز بسته تنها به کار می رود و تگ بسته ای برای آن به کار نمی رود.
نکته: اگر تگ <br> را به صورت <br/> بنویسیم نیز یک سطر خالی ایجاد می کند.(به سطر بعد می رود)
مثال
<!DOCTYPE html>
<html>
<body>
<p>This is<br>a para<br>graph with line breaks</p>
</body>
</html>
خروجی :
به قرار گیری <br> در داخل تگ <p> دقت کنید. حالا به خروجی دقت کنید. فکر می کنم کاملا با تگ <br> آشنا شده باشید.
تگ <pre>
این تگ نوشته را همان گونه که در قسمت کد تظیم شده است (چه از لحاظ فضای خالی بین کاراکترها یا Space و یا چه از لحاظ فاصله ی بین خطوط) در مرورگر نمایش می دهد ، با این تفاوت که فونت و اندازه ی آن مقدار فرق می کند.
مثال
<!DOCTYPE html>
<html>
<body>
<pre>
Mediasoft.ir
Future is yours
Best Technology News Site
@Mediasoft : Mediasoft Channel in Telegram
</pre>
</body>
</html>
خروجی :
پایان جلسه چهارم
