نظاره گر پیشرفت کسب و کار خود باشید ، وقتی اسپیناس وب جرئی از تیم شما می شود

ویرایشگرهای ویژوال و نمایش کد در آن ها

سیستم های مدیریت محتوا و ویرایشگرهای HTML مانند Dreamweaver معمولا دارای دو منظر از صفحه ای که شما ایجاد می کنید، هستند: یکی ویرایشگر ویژوال و دیگری نمایش کد.

ویرایشگرهای ویژوال اغلب شبیه پردازنده های کلمه هستند. گرچه هر ویرایشگر کمی متفاوت است، اما همه آن ها امکان کنترل متن را به شما می دهند.

• سرفصل ها با مشخص کردن (هایلات) نوشته، سپس استفاده از یک باکس کشویی برای انتخاب یک سرفصل ایجاد می شوند.
• متن های ضخیم یا اُریب (Bold or Italic)، با هایلات بخشی از متن و فشار دادن دکمه های b یا i ایجاد می شوند.
• پاراگراف های جدید با استفاده از دکمه بازگشت یا اینتر ایجاد می شوند.
• ایجاد شکاف خطی با فشار دادن کلید shift و کلید بازگشت بطور همزمان ایجاد می شود.

اگر شما متن را از یک برنامه کپی کرده و بخواهید از آن استفاده کنید ویرایشگر ویژوال به شما اجازه تغییر متن را مانند برنامه word می دهد ولی ممکن است نشانه گذاری اضافه داشته باشد، برای جلوگیری از این کار می توانید ابتدا متن را وارد یک ویرایشگر ساده متن (مانند notepad کامپیوتر) کرده و سپس آن را مجدداً کپی کرده و به ویرایشگر ویژوال ببرید.

نشانه گذاری معنایی

برخی عناصر متن وجود دارند که بر ساختار صفحات طراحی سایت تأثیری ندارند، اما اطلاعات بیشتری را به صفحات اضافه می کنند، این عناصر به عنوان نشانه گذاری معنایی شناخته می شوند.

در ادامه مقاله شما با برخی از این عناصر آشنا می شوید. به طور مثال شما خواهید دید که در هر کجای صفحه که نیاز به تأکید روی متن باشد، از عنصر <em> و جایی که بخواهید یک نوشته را به صورت نقل قول بنویسید، از المان <blockquote> استفاده می کنید.

مرورگرها معمولاً محتوای این المان ها را به شیوه ای متفاوت نشان می دهند، برای مثال محتوای المان <em> بصورت اُریب نمایش داده می شود، اما شما نباید از به منظور تغییر ظاهر متن از آن ها استفاده کنید، هدف از استفاده آن ها توصیف دقیق تر محتوای طراحی وب سایت می باشد.

دلیل استفاده از این عناصر این است که برنامه های دیگری مانند خوانندگان صفحات نمایش یا موتورهای جستجو، می توانند از این اطلاعات اضافی استفاده کنند. به عنوان مثال لحن و صدای یک برنامه خواننده صفحه برای جایی که از عنصر <em> استفاده شده، دارای تأکید بیشتری می باشد.

Strong & Emphasis

<strong>

استفاده از عنصر <strong>نشان می دهد که محتوای آن اهمیت زیادی دارد. به عنوان مثال، کلمات موجود در این المان ممکن است با تأکید قوی بیان شوند. به طور پیش فرض مرورگر محتوای یک عنصر <strong> را به صورت ضخیم یا بولد نشان می دهد.

<em>

این عنصر تأکید روی محتوای خود را نشان می دهد. و به طور پیش فرض محتوای آن به شکل اُریب یا ایتالیک نمایش داده می شود.

به کدهای زیر و نتایج آن ها دقت کنید:

<p><strong>Beware:</strong> Pickpockets operate in this area. </p>

<p>This toy has many small pieces and is <strong>not suitable for children under five years old. </strong></p>

<p>I <em>think</em> Ivy was the first. </p>

<p>I think <em>Ivy</em> was the first. </p>

<p>I think Ivy was the <em>first</em>. </p>

نقل قول ها

برای علامت گذاری نقل قول ها معمولاً دو المان وجو دارد:

<blockquote>

این عنصر برای نقل قول های طولانی استفاده می شود که یک پاراگراف را می گیرد. توجه کنید که المان <p> می تواند درون المان <blockquote> استفاده شود.

مرورگرها محتویات این عنصر را با تورفتگی از حاشیه نشان می دهند. اما شما به منظور ایجاد فرورفتگی نباید از این المان استفاده کنید و می بایست از css برای این کار کمک بگیرید.

<q>

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

<blockquote cite="http://en.wikipedia.org/wiki/ Winnie-the-Pooh">

<p>Did you ever stop to think, and forget to start again? </p>

</blockquote>

<p>As A.A. Milne said, <q>Some people talk to animals. Not many listen though. That's the problem. </q></p>

علامات اختصاری

<abbr>

اگر شما در متن از مخفف کلمه ای استفاده می کنید، می توانید المان <abbr> که برگرفته از از واژه abbreviation را به کار ببرید. و از ویژگی title در تگ آغازین استفاده کرده و کلمه کامل را درون آن قرار بدهید.

در HTML4 از المان <acronym> برای کلمات اختصاری استفاده می کرد، اما HTML5 فقط از المان <abbr> استفاده می کند.

به کد زیر و نتیجه آن در تصویر زیر دقت کنید مشاهده می کنید که با آوردن موس روی کلمه NASA عبارت کامل آن بصورت title ظاهر می شود:

<p><abbr title="Professor">Prof</abbr> Stephen Hawking is a theoretical physicist and cosmologist. </p>

<p><acronym title="National Aeronautics and Space Administration">NASA</acronym> do some crazy space stuff. </p>

استنادها و تعاریف

<cite>

هنگامی که شما در متن خود اشاره به یک قطعه از کار مانند یک کتاب، فیلم یا مقاله پژوهشی اشاره می کنید، می توانید از عنصر <cite> (گرفته شده از واژه citation) برای نشان دادن آن قسمت استفاده می شود.

در HTML5 این عنصر نباید برای نام اشخاص استفاده شود، اما در HTML4 این کار مجاز بود، بنابراین اکثر افراد ممکن است این کار را ادامه دهند.

مرورگرها محتوای این المان را بصورت اُریب نمایش می دهند.

<p><cite>A Brief History of Time</cite> by Stephen Hawking has sold over ten million copies worldwide. </p>

مشخصات نویسنده

<address>

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

مرورگرها معمولا محتوای این المان را بصورت اُریب نشان می دهند.

<address>

<p><a href="mailto:homer@example.org"> homer@example.org </a> </p>

<p>742 Evergreen Terrace, Springfield. </p>

</address>

تغییر در محتوا

<ins> و <del>

عنصر <ins> می تواند برای قرار دادن خط زیر محتویات درونش استفاده شود. در حالی که عنصر <del> متن را حذف شده نشان می دهد و یک خط روی متن می کشد.

<p>It was the <del>worst</del> <ins>best</ins> idea she had ever had. </p>

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