در این مقاله ادامه توضیحات در مورد HTML5 و استفاده از آن در طراحی سایت را بیان می کنیم.

کامنت ها در HTML5

<!–   –>

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

<!-- comment goes here -->

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

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

کامنت ها می توانند در اطراف بلوک های کد نیز استفاده شده تا نمایش کد در مرورگر را متوقف نمایند. در مثال پائین لینک ایمیل بصورت کامنت درآمده است:

<!-- start of introduction -->

 <h1>Current Exhibitions</h1>

 <h2>Olafur Eliasson</h2>

 <!-- end of introduction -->

 <!-- start of main text -->

 <p>Olafur Eliasson was born in Copenhagen, Denmark in 1967 to Icelandic parents. </p>

 <p>He is known for sculptures and large-scale installation art employing elemental materials such as light, water, and air temperature to enhance the viewer's experience. </p>

 <!-- end of main text -->

 <!-- <a href="mailto:[email protected]">Contact</a>

 -->

طراحی سایت

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

طراحی سایت

همانطور که بیان شد در سورس کد، کامنت ها دیده می شوند:

DOCTYPES

در هنگام شروع کدنویسی به منظور طراحی سایت، نوشتن تگ <!doctype html> در ابتدای فایل html یک اعلامیه راهنما برای مرورگر است که نشان دهنده نسخه پنجم از HTML می باشد. و در واقع به مرورگر کمک می کند استاندارد صحیح را برای صفحه وب اعمال کرده و یک صفحه را به درستی ارائه دهد. به محل قرارگیری آن در کدها دقت کنید:

<!DOCTYPE html>

<html>

<head>

<title>espinas</title>

</head>

<body>

<p> Espinas web </p>

</body>

</html>

ویژگی id

هر المان در HTML می تواند ویژگی id را داشته باشد. این ویژگی برای شناسایی آن عنصر از سایر عناصر صفحه به کار می رود. مقدار آن باید با یک حرف یا خط زیر شروع شود (از عدد یا سایر کاراکترها نمی توان به عنوان کاراکتر شروع استفاده کرد). به یاد داشته باشید که هیچ دو عنصر در HTML نباید از شناسه id مشابه استفاده کنند.

  طراحی سایت کارخانه

همانطور که در کدهای زیر مشاهده می کنید، دادن ویژگی id به یک عنصر، و اعمال یکسری استایل ها به آن در CSS باعث می شود تا یک المان به سبکی متفاوت از سایر المان های مشابه در همان صفحه، مشاهده شوند. به طور مثال یک عنصر <p> با گرفتن ویژگی id و استایل خاص می تواند از سایر المان های <p> آن صفحه متفاوت دیده شود.

ویژگی id به عنوان یک global attribute شناخته می شود، زیرا می توان در هر المان از آن استفاده کرد.

به کد زیر و نتیجه آن در صفحه مرورگر دقت کنید (المان دوم <p> دارای ویژگی id با مقدار pullquote است که با کد CSS کلمات آن با حروف بزرگ نوشته شده است):

<p>Water and air. So very commonplace are these substances, they hardly attract attention - and yet they vouchsafe our very existence. </p>

 <p id="pullquote">Every time I view the sea I feel a calming sense of security, as if visiting my   ancestral home; I embark on a voyage of seeing. </p>

 <p>Mystery of mysteries, water and air are right there before us in the sea. </p>
طراحی سایت

ویژگی class

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

  ویدئوها و فایل های صوتی در HTML

به طور مثال ممکن است بخواهید رنگ متن های نوشته شده در یک عنصر <h3> و یک عنصر <p> را به قرمز تغییر دهید. می توانید به آن ها یک ویژگی class داده و مقدار آن را مشابه بنویسید. و در CSS به آن استایل دهید. در واقع، صرف دادن ویژگی class به یک المان تأثیری روی آن نخواهد داشت و حتما باید استایل مورد نظر را در CSS مشخص کنیم.

در مثال زیر به المان های <p> و <h2> کلاس important را داده آن ها را به رنگ قرمز در می آوریم، و به عنصر <p> کلاس admittance را نیز داده و آن را به شکل اریب تغییر می دهیم. دقت کنید که اگر بخواهیم دو کلاس به یک المان بدهیم، کافیست نام دو کلاس را با فاصله از هم جدا کرده و به این صورت بنویسیم: “class=”value1 value2

<h2>For a one-year period from November 2010, the Marugame Genichiro-Inokuma Museum of Contemporary Art (MIMOCA) will host a cycle of four Hiroshi Sugimoto exhibitions. </h2>

<h3 class="important">Each will showcase works by the artist thematically contextualized under the headings "Science", "Architecture", "History" and "Religion" so as to present a comprehensive panorama of the artist's oeuvre. </h3>

 <p class="important admittance">Hours: 10:00 – 18:00 (No admittance after 17:30) </p>

طراحی سایت

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

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

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