در این مقاله در مورد عناصر block و inline بحث خواهیم کرد. فهم این عناصر و کاربرد آن ها در طراحی سایت اهمیت ویژه ای دارد.

المان های Block

برخی المان ها همیشه از یک خط جدید شروع می شوند که به آن ها عناصر بلاک (block) گفته می شود.

طراحی سایت

برای مثال می توان المان های <h1> تا <h6>، <ul>، <li> و <p> را نام برد. اگر به کد زیر و نتیجه آن در مرورگر دقت نمائید، متوجه خواهید شد:

<h1>Hiroshi Sugimoto</h1>

 <p>The dates for the ORIGIN OF ART exhibition are as   follows:</p>

 <ul>

 <li>Science: 21 Nov - 20 Feb 2010/11</li>

 <li>Architecture: 6 Mar - 15 May 2011</li>

 <li>History: 29 May - 21 Aug 2011</li>

 <li>Religion: 28 Aug - 6 Nov 2011</li>

 </ul>

طراحی سایت

المان های Inline

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

طراحی سایت

از مثال های المان inline می توان به <a>، <b>، <em>، و <img> اشاره کرد.

Timed to a single revolution of the planet around the sun at a 23.4 degrees tilt that plays out the rhythm of the seasons, this <em>Origins of Art</em> cycle is organized around four themes: <b>science, architecture, history</b> and <b>religion</b>.

طراحی سایت

متن های گروهی و عناصر block

<div>

این المان اجازه می دهد تا مجموعه ای از المان ها را در یک باکس گروه بندی کنید. برای مثال ممکن است شما یک المان <div> را به منظور جای دادن عناصر موجود در هدر سایت (مثل لوگو یا منوی اصلی) به وجود آورید.

محتویات این عنصر از یک خط جدید شروع می شوند، ولی هیچ تغییر دیگری در ظاهر سایت ایجاد نمی کند. اما اگر از ویژگی های id و یا class برای این عنصر استفاده کنید، می توان با استفاده از CSS به آن استایل داده و مشخص کنید که چه میزان حجمی از صفحه را اشغال کرده است. و حتی می توانید ظاهر عناصر دیگر موجود در آن را تغییر بدهید.

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

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

<div id="header">

 <img src="images/logo.gif" alt="Anish Kapoor" />

 <ul>

  <li><a href="index.html">Home</a></li>

  <li><a href="biography.html">Biography</a></li>

  <li><a href="works.html">Works</a></li>

  <li><a href="contact.html">Contact</a></li>

 </ul>

 </div>

<!-- end of header -->

طراحی سایت

متن های گروهی و المان های inline

<span>

  وراثت پذیری در CSS

المان <span> در واقع معادل خطی یا inline عنصر <div> عمل می کنید. این ویژگی ها برای آن صدق می کند:

  1. شامل یک بخش از متن است، که هیچ عنصر دیگری نمی تواند به خوبی آن باعث تمایز محتوای آن از متن اطرافش شود.
  2. شامل تعدادی از عناصر خطی می شود.

مهم ترین دلیلی که افراد از عنصر <span> استفاده می کنند این است که به راحتی می توانند به بخشی از متن استایل خاصی توسط CSS داده و ظاهر آن را کنترل کنند.

معمولاً مشاهده می کنید که یک ویژگی class یا id به این عنصر داده می شود.

<p>Anish Kapoor won the Turner Prize in 1991 and exhibited at the <span class="gallery">Tate Modern</span> gallery in London in 2003. </p>

طراحی سایت

Iframes

<iframe>

یک iframe مانند یک پنجره کوچک است که به صفحه شما وارد شده است، و در آن پنجره می توانید یک صفحه دیگر را ببینید. اصطلاح iframe ترکیبی از frame و inline است.

یکی از استفاده های معمول ازiframes  که شما ممکن است در طراحی سایت های مختلف دیده باشید، این است که یک نقشه گوگل را درون یک صفحه دیگر جاسازی کنید. محتوای iframe می تواند هر صفحه HTML دیگری باشد (یا روی همان سرور یا در هر جای دیگری در وب قرار داشته باشد).

ویژگی هایی که در المان <iframe> استفاده می شوند:

src

این ویژگی حاوی URL صفحه ای است که درون frame نشان داده می شود.

height

این ویژگی ارتفاع پنجره iframe را بر حسب پیکسل تعیین می کند.

width

این خصوصیت عرض پنجره را بر حسب پیکسل مشخص می کند.

<iframe

  width="400"

  height="150"

  src="https://sitedp.com/wp-content/themes/espinas/images/map-ny.jpg">

</iframe>

طراحی سایت

اطلاعات راجع به سایت شما

<meta>

المان <meta> درون المان <head> قرار گرفته و حاوی اطلاعاتی در مورد صفحه وب است.

این المان برای کاربران قابل مشاهده نیست، اما اهداف متعددی می تواند داشته باشد. مثلاً به موتورهای جستجو در مورد صفحه شما، می گوید که چه کسی آن را ایجاد کرده است.

عنصر <meta> یک عنصر خالی است بنابراین یک تگ پایانی ندارد. این المان از ویژگی ها برای حمل اطلاعات استفاده می کند.

مهم ترین ویژگی های مورد استفاده در تگ <meta>، ویژگی های name و content هستند، که با هم استفاده می شوند. این ویژگی ها، خصوصیات کل صفحه را مشخص می کند. مقدار ویژگی name، صفتی است که شما تعیین می کنید. و مقدار ویژگی content، مقدار همان صفت را تعیین می کند.

در خط اول از مثال زیر این دو ویژگی را مشاهده می کنید، که برای تگ <meta> به کار رفته اند. مقدار ویژگی name می تواند هرچیزی که شما مایلید، باشد. برخی مقادیر تعریف شده برای این ویژگی که معمولا استفاده می شوند عبارتند از:

  فرم ها در HTML قسمت اول

description

شامل یک توضیح از صفحه است. این توصیف معمولا توسط موتورهای جستجو استفاده می شود تا بتواند آنچه در مورد صفحه است را درک کند و حداکثر باید 155 کاراکتر باشد. گاهی اوقات نیز در نتایج موتور جستجو نمایش داده می شود.

keywords

این شامل لیستی از کلمات ذخیره شده است که ممکن است کاربر برای یافتن صفحه جستجو کند.

robots

نشان می دهد که آیا موتورهای جستجو باید این صفحه را به نتایج جستجوی خود اضافه کنند یا خیر. اگر این صفحه نباید اضافه شود، می توان از مقدار noindex برای آن استفاده کرد. اگر موتورهای جستجو باید این صفحه را در نتایج خود اضافه کنند، اما صفحه هایی که به آن پیوند شده اند، اضافه نشوند، می توان از مقدار nofollow استفاده کرد.

عنصر <meta> همچنین از ویژگی http-equiv و ویژگی content به صورت جفت استفاده می کند. در مثال ما می توانید سه نمونه از ویژگی http-equiv را ببینید. که هر یک هدف متفاوت دارد:

author

نویسنده صفحه وب را مشخص می کند.

pragma

این مقدار باعث می شود که مرورگر نتواند صفحه را cache کند (به معنی ذخیره صفحه به صورت محلی برای صرفه جویی در زمان بارگذاری صفحه در بازدیدهای بعدی)

expires

از آنجا که مرورگرها اغلب محتوای صفحه را کَش می کنند، گزینه expires می تواند برای نشان دادن زمانی که صفحه باید منقضی شود (و دیگر ذخیره نشود) استفاده شود. توجه داشته باشید که تاریخ باید در قالب نمایش داده شود.

<!DOCTYPE html>

<html>

<head>

<title>Information About Your Pages</title>

<meta name="description" content="An Essay on Installation Art" />

<meta name="keywords" content="installation, art, opinion" />

<meta name="robots" content="nofollow" />

<meta http-equiv="author" content="Jon Duckett" />

<meta http-equiv="pragma" content="no-cache" />

<meta http-equiv="expires" content="Fri, 04 Apr 2014 23:59:59 GMT" />

</head>

<body>

</body>

</html>

کاراکترهای فرار (escape characters)

در HTML کاراکترهایی وجود دارند که اگر بخواهیم در صفحه وب نمایش داده شوند، باید از کدهای خاصی استفاده کرد. مثلاً اگر بخواهیم علامت کمتر را در صفحه وب نمایش دهیم باید از &lt; و یا از < استفاده کرد.

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

طراحی سایت

در مقاله بعد نحوه استفاده از فایل های صوتی و ویدئویی در طراحی سایت عنوان می شود.

به وبلاگ توسعه دهندگان وب خوش آمدید .

سعی کرده ایم در این وبلاگ مقالات مفید در زمینه طراحی سایت برای شما تهیه کنیم لطفا با کامنت های خوب خود ما را همراهی کنید