html

ساخت وبلاگ

آخرین مطالب

امکانات وب

html

در ابتدا برای طراحی یک وب سایت شما باید از نرم افزارهای ادیتور استفاده کنید که بنده از دو نرم افزار دریم ویور و ویژوال استدیو استفاده میکنم

دریم ویور برای نوشتن کدهای HTML و PHP

و نرم افزار ویژوال استدیو برای نوشتن کدهای جاوا و CSS

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

خوب در ابتدا از HTML شروع میکنیم.

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

استفاده از تگهای منسوخ شده باعث کاهش سئو سایت شما می شود.

تیبل سنگین ترین تگ HTML است و بارگزاری سایت شما را طولانی تر میکند.

 

نمونه ای از یک وب سایت طراحی شده در html5

<!DOCTYPE html>
<html lang=”en”>
<head>
        <meta charset=”utf-8”>
        <title>Awesome HTML5 Webpage</title>
        <meta name=”description” content=”An awesome HTML5 page YOU built from scratch!”>
        <meta name=”author” content=”Udemy”>
        <link rel=”stylesheet” href=”style.css”>
</head>
<body>
        <div id=”wrapper”>
                <header class=”main_headline”>
                        <nav>
                                <ul>
                                        <li><a href=”#”>About</a></li>
                                        <li><a href=”#”>Services</a></li>
                                        <li><a href=”#”>Products</a></li>
                                        <li><a href=”#”>Contact</a></li>
                                </ul>
                        </nav>
                        <h1>Super Duper Awesome Headline! </h1>
                </header>
                <div id=”primary_content”>
                        <section id=”left_column”>
                                <h3>A Hitchhiker’s Guide!</h3>
                                <p>To the Galaxy!</p>
                        </section>
 
                        <section id=”right_column”>
                                <article>
<header>
<h3>The Answer to Life?</h3>
<p>Published: 30 August 2013</p>
                                        </header>
                                        <p>Douglas Adams, when asked: “What is the answer to life, universe and everything”, replied:</p>
                                        <blockquote>”42”</blockquote>
                                </article>
                        </section>
                </div>
 
                <footer>
                        <p>The Footer is where all useless info goes!</p>
                </footer>
</div>
</body>
</html>

بهینه سازی کدها:

برای بهینه سازی کدها برای یک جستجوگر ما از میکرودیتا ها استفاده میکنیم .

در سال ۲۰۱۱ موتور های جستجو سایتی را به نام Schema.org معرفی کردند که خدماتی را برای بهبود وب سایت ها ارائه میدهد. این وب سایت خدماتی را برای معرفی بهتر محتوای سایت به جستجوگر ارائه میدهد. هنوز هم بیشتر مردم از این خدمات استفاده  نمیکنند.

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

ITEMSCOPE

ITEMTYPE

ITEMPROP

ITEMID

ITEMREF

به تگ های شما اضافه میشوند و اطلاعات شما را برای موتور جستجو دسته بندی میکنند.

به این اطلاعات میکرو دیتا میگویند.

میکرو دیتا ها انواعی از داده را پشتیبانی میکنند که ما پنج نوع را نام میبریم.

شخص

محصول

رویداد

سازمان

فیلم

کتاب

نقدو برسی

هر یک نسبت به نوع خود داده هایی را دریافت میکنند و شما باید با توجه به نوع داده خود، میکرو دیتا های مورد نظر را ست کنید.

 برای مثال در زیر ما یک کتاب را به جستجو گر معرفی کردیم.

<!DOCTYPE HTML>

<html lang="en">

<head>

<meta charset=utf-8>

<title>Example Page With Microdata</title>

</head>

<body>

<section itemscope itemtype="http://schema.org/Book">

<h1 itemprop="name">Anything You Want</h1>

<span>Author: <span itemprop="author">Derek Sivers</span></span>

<span>Category : <span itemprop="genre">business</span></span>

<a href="http://sivers.org/ayw/"><span itemprop="detail">About the Book<span></a>

</section>

</body></html>

 

 
در روزهای آینده زبان های دیگر و نکات دیگری را برسی میکنیم
طراحی سایت...
ما را در سایت طراحی سایت دنبال می کنید

برچسب : html,طراحی سایت,نکته های قابل توجه در طراحی سایت, نویسنده : علی آخرتی web500 بازدید : 1520 تاريخ : يکشنبه 20 مهر 1393 ساعت: 19:12

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه