• آموزش HTML فصل دوم

    ساختار شناسی Strict و خاصیت های جدید HTML5، معرفی تگ های ساختاری و معنایی

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

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    	<head>
    		<title>وبینوکس :: آموزش HTML</title>
    	</head>
    	<body>
    	</body>
    </html>

    نکته : DOCTYPE نوع HTML5 رو مشخص میکنه.
    XHTML سه نسخه داره که براتون شرح میدم و تفاوت هاش رو میگم

    XHTML 1.0 Strict : قواعد در این نسخه خیلی منظم هست و بسیار حساس هست، شما باید طبق قوانین خودش همه چیو مرتب بنویسید.

    XHTML 1.0 Transitional : در این نسخه خیلی تاکیید روی نوشتن درست قوانین وجود نداره و از خیلی چیزا چشم پوشی میکنه

    XHTML 1.0 Framset : این نسخه بیشتر برای استفاده از Frameset ها تعیین شده(Frameset خاصیتی هست که به کاربر اجازه میده تا صفحتون رو به چند قسمت تیکه تیکه کنید)

    تگ Head : قبلا توضیح دادیم اما یادتون بیاد که گفتیم جلو دار صفحه هست و منابع صفحه رو در اونجا به مرورگر نشان میده و. باعث بارگزاری بصورت پیش منابع میشه
    تگ Title : که خیلی واضح هست. عنوان صفحه
    تگ Body : تگ اصلی بدنه هست که خوب هر چی توش بنویسید به کاربر نشان میده

    خاصیت های جدید HTML 5

    چند تا از خاصیت های مهمش :
    »    تگ <Canvas> برای افزودن 2D
    »    تگ های <Video> , <Audio> برای پخش رسانه
    »    پشتیبانی از ذخیره سازی محلی
    »    تگ های جدید مثل <article><footer><header><nav><section>
    »    اضافه شدن کنترل هایی مثل تقویم، تاریخ، زمان، پست الکترونیک، آدرس اینترنتی، جستجو

    تگهای ساختاری و مفهومی

    <article> : برای معرفی محتوا
    <aside> : معرفی محتوا را  به عنوان بخشی از صفحه
    <bdi> : به منظور تغییر جهت متن به صورت راست چین یا چپ چین
    <command> : دستوری را که کاربر روی یک دکمه تعریف میکنه
    <details> : جزئیاتی به صفحه با امکان نمایش، مخفی کردن اضافه میکنه
    <summary> : جزئیاتی با حالت نمایش در تگ <detailes> ایجاد میکنه
    <figure> : تعریف دیاگرام و عکس
    <figcaption> : تعریف برچسب برای عکس یا دیاگرام
    <footer> : تعریف زیرنویس برای محتوا یا قسمتی از صفحه
    <header> : تعریف عنوان برای محتوا
    <hgroup> : گروه عناوین h1 تا h6
    <mark> : برجسته کردن متن
    <meter> : تعریف مقیلس و اندازه
    <nav> : ایجاد لینک
    <progress> : برای نمایش درصد پیشرفت یک وظیفه
    <ruby> : حاشیه نویسی، شرق آسیا
    <rt> : برای افزودن تلفظ یک کاراکتر
    <rp> : برای نمایش قسمت های که توسط حاشیه نویسی ruby در مرورگر پشتیبانی نمی شود
    <section> : برای افزودن یک بخش به صفحه
    <time> : برای تعریف زمان، تاریخ در صفحه
    <wbr> : تعریف خط جدید

    تگ های چند رسانه ای

    <audio> : نمایش صدا
    <video> : نمایش تصویر
    <embed> : نمایش Plugin
    <source> : مسیر دسترسی پخش صدا یا تصویر
    <track> : تعریف متن فایل صوتی یا ویدیویی

    تگ <canvas> برای ترسیم اشکال یا نقاشی بر روی صفحه که با استفاده از کد های Javascript امکان پذیر میشه

    تگ های فرم

    تگایی که این بخش معرفی میکنم، عملکرد بالایی در HTML دارند
    <datalist> : تعریف لیست پیشفرض در کنترل Input
    <keygen> : ایجاد یک کلید امن در فرم
    <output> : محاسبه مقدار نهایی یک عبارت

    تگ های حذف شده در HTML 5

    <Acronym>
    <applet>
    <basefont>
    <big>
    <center>
    <dir>
    <font>
    <frame>
    <frameset>
    <noframes>
    <strike>
    <tt>

    درنهایت متونید ساختار HTML رو به این شکل بنویسید

    <!DOCTYPE html>
    
    <html lang="en">
    	<head>
    		<meta charset="UTF-8" />
    		<title>وبینوکس :: آموزش HTML</title>
    	</head>
    	<body>
    		<p>سلام به شما کاربران سایت وبینوکس</p>
    	</body>
    </html>

     

    c="/upload/DevinuxUploaderRepo/8723ae3f-16ff-4ea7-a997-c7d2d37a7e6d.png" alt="آموزش HTML فصل دوم" style="max-width:23px; max-height:23px; width:100%;" id="" class=" prog-created">سلام مجدد، در تکمیل مبحث فصل یک، HTML 5 از ساختار XHTML گرفته شده و در کل مجمعه ای از تگ های زیره ست که برای نمونه به اون دقت کنید

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    	<head>
    		<title>وبینوکس :: آموزش HTML</title>
    	</head>
    	<body>
    	</body>
    </html>

    نکته : DOCTYPE نوع HTML5 رو مشخص میکنه.
    XHTML سه نسخه داره که براتون شرح میدم و تفاوت هاش رو میگم

    XHTML 1.0 Strict : قواعد در این نسخه خیلی منظم هست و بسیار حساس هست، شما باید طبق قوانین خودش همه چیو مرتب بنویسید.

    XHTML 1.0 Transitional : در این نسخه خیلی تاکیید روی نوشتن درست قوانین وجود نداره و از خیلی چیزا چشم پوشی میکنه

    XHTML 1.0 Framset : این نسخه بیشتر برای استفاده از Frameset ها تعیین شده(Frameset خاصیتی هست که به کاربر اجازه میده تا صفحتون رو به چند قسمت تیکه تیکه کنید)

    تگ Head : قبلا توضیح دادیم اما یادتون بیاد که گفتیم جلو دار صفحه هست و منابع صفحه رو در اونجا به مرورگر نشان میده و. باعث بارگزاری بصورت پیش منابع میشه
    تگ Title : که خیلی واضح هست. عنوان صفحه
    تگ Body : تگ اصلی بدنه هست که خوب هر چی توش بنویسید به کاربر نشان میده

    خاصیت های جدید HTML 5

    چند تا از خاصیت های مهمش :
    »    تگ <Canvas> برای افزودن 2D
    »    تگ های <Video> , <Audio> برای پخش رسانه
    »    پشتیبانی از ذخیره سازی محلی
    »    تگ های جدید مثل <article><footer><header><nav><section>
    »    اضافه شدن کنترل هایی مثل تقویم، تاریخ، زمان، پست الکترونیک، آدرس اینترنتی، جستجو

    تگهای ساختاری و مفهومی

    <article> : برای معرفی محتوا
    <aside> : معرفی محتوا را  به عنوان بخشی از صفحه
    <bdi> : به منظور تغییر جهت متن به صورت راست چین یا چپ چین
    <command> : دستوری را که کاربر روی یک دکمه تعریف میکنه
    <details> : جزئیاتی به صفحه با امکان نمایش، مخفی کردن اضافه میکنه
    <summary> : جزئیاتی با حالت نمایش در تگ <detailes> ایجاد میکنه
    <figure> : تعریف دیاگرام و عکس
    <figcaption> : تعریف برچسب برای عکس یا دیاگرام
    <footer> : تعریف زیرنویس برای محتوا یا قسمتی از صفحه
    <header> : تعریف عنوان برای محتوا
    <hgroup> : گروه عناوین h1 تا h6
    <mark> : برجسته کردن متن
    <meter> : تعریف مقیلس و اندازه
    <nav> : ایجاد لینک
    <progress> : برای نمایش درصد پیشرفت یک وظیفه
    <ruby> : حاشیه نویسی، شرق آسیا
    <rt> : برای افزودن تلفظ یک کاراکتر
    <rp> : برای نمایش قسمت های که توسط حاشیه نویسی ruby در مرورگر پشتیبانی نمی شود
    <section> : برای افزودن یک بخش به صفحه
    <time> : برای تعریف زمان، تاریخ در صفحه
    <wbr> : تعریف خط جدید

    تگ های چند رسانه ای

    <audio> : نمایش صدا
    <video> : نمایش تصویر
    <embed> : نمایش Plugin
    <source> : مسیر دسترسی پخش صدا یا تصویر
    <track> : تعریف متن فایل صوتی یا ویدیویی

    تگ <canvas> برای ترسیم اشکال یا نقاشی بر روی صفحه که با استفاده از کد های Javascript امکان پذیر میشه

    تگ های فرم

    تگایی که این بخش معرفی میکنم، عملکرد بالایی در HTML دارند
    <datalist> : تعریف لیست پیشفرض در کنترل Input
    <keygen> : ایجاد یک کلید امن در فرم
    <output> : محاسبه مقدار نهایی یک عبارت

    تگ های حذف شده در HTML 5

    <Acronym>
    <applet>
    <basefont>
    <big>
    <center>
    <dir>
    <font>
    <frame>
    <frameset>
    <noframes>
    <strike>
    <tt>

    درنهایت میتونید ساختار HTML رو به این شکل بنویسید

    <!DOCTYPE html>
    
    <html lang="en">
    	<head>
    		<meta charset="UTF-8" />
    		<title>وبینوکس :: آموزش HTML</title>
    	</head>
    	<body>
    		<p>سلام به شما کاربران سایت وبینوکس</p>
    	</body>
    </html>

    بدنه اصلی HTML5

    در Firefox فایلی به نام nsElementTable.cpp وجود داره که کار کنترل هر یک از تگ ها و انطباق اون با مرورگر را بر عهده داره. علاوه بر این، در این فایل کلیه بروزرسانی های لازم برای گرافیک و استایل اعمال میشه. به عنوان مثال در Firefox تگ time که زمان را نشون میده توسط این فایل شناسایی میشه در حالیکه تا IE8.0 شناسایی این تگ وجود نداشت و به وسیله جاوااسکریپت شناسایی این تگ انجام میشد. اسکریپتی به نام shiv وجود داره که در IE امکان اجرای تگ های HTML5 را داره.

    اعتبار سنجی

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

    • وبسایت http://validator.whatwg.org
    • وبسایت http://html5.validator.nu

    با وارد شدن به این سایت ها میتونید با وارد کردن آدرس سایت ها، از لحاظ صحت کد های HTML5 اطمینان خاطر داشته باشید و چک کنید.

    تگ ای ساختاری HTML5

    در HTML4 تگ هایی چون div,h1-h6 وظایف خاص خودشون رو دارند، اما در HTML5 تگ های ساختاری جدیدی بوجود اومده که براتون مصال میزنم:

    • section
    • article
    • header
    • footer
    • hgroup
    • nav
    • aside

    در هر تگ یک سری صفت قرار داره که خاصیت های مختلفی را از اون تگ تنظیم میکنه و باید به اون ها توجه کرد.

    تگ های ساخت بلوک

    در HTML4 با تگ div آشنا شدید، تگی که برای تقسیم بندی صفحه استفاده میشه که بطور کلی محتوایی خالی هست . با اعمال گرافیک به آن رنگی مشخص و ظاهری زیبا به خودش میگیره . اما در HTML5 از Article برای تقسیم بندی صفحه در حالت کلی استفاده میشه. تفوت Section با Article در این هست که Section برای قسمت کوچکتر استفاده میشه.

    درکد زیر از Section  و article استفاده شده و داخل article با section جدا شده.

    <DOCTYPE html!>
    <html>
    	<body>
    		<article>
    			<h1>عنوان یک</h1>
    			<section>
    				<h2>عنوان دو</h2>
    				<p>متن</p>
    			</section>
    		</article>
    	</body>
    </html>

    تگ های عنوان

    عناوین در HTML5 شامل تگ هایی است که برای شما معرفی خواهم کرد:

    • header : برای شروع عنوان استفاده میشه
    • footer : برای افزودن اطلاعات به محتوا شامل حقوق کپی و از این دست اطلاعات استفاده میشود
    • hgroup : برای گروه بندی عناوین استفاده میشه
    • h1 تا h6 : در html4 برای استفاده از استایل متفاوت نسبت به هم استفاده میشد اما اینجا اولویت و برتری مقام هم بررسی میشه
    <!DOCTYPE html>
    <html>
    <body>
        <article>
            <header>
                <hgroup>
                    <h1>عنوان یک</h1>
                    <h2>عنوان دو</h2>
                </hgroup>
            </header>
            <p>متن</p>
        </article>
        <footer>
            <p>تمامی حقوق برای وبینوکس محفوظ است</p>
        </footer>
    </body>
    </html>
    

    تگ های nav ، aside  و figure

    تگ های دیگری هم وجود دارند که جزء تگ های ساختاری خساب میشوند

    • nav : برای نمایش منو در ساختار استفاده میشه
    • aside : برای ایجاد کناره یا sidebar استفاده میشه
    • figure : برای مجزا کردن عکس، گراف و ... با متن شود
    • figcaption : عنوان جداساطی شده عکس
    <!DOCTYPE html>
    <html>
    <body>
        <nav>
            <h2>منوی اصلی</h2>
            <ul>
                <li><a href="#">خانه</a></li>
                <li><a href="#">درباره ما</a></li>
                <li><a href="#">ارتباط با ما</a></li>
            </ul>
        </nav>
    
        <figure>
            <figcaption>عکس اصلی اسلایدر</figcaption>
            <img src="slider.jpg" />
        </figure>
    </body>
    </html>

    پایان فصل

    نظرات ارسال شده ارسال نظر جدید برای ارسال نظر، وارد شوید
    نویسنده پیام
    متن پیام
دوستان وبینوکس
  • نمونه محصول  انتشارات هنر آبی
  • نمونه محصول  بهساخت
  • نمونه محصول  دیوان محاسبات کشور
  • نمونه محصول  نگین سبز خاور میانه
  • نمونه محصول  وینسام
  • نمونه محصول  سازمان میراث فرهنگی
  • خبرنامه وبینوکس، اخبار، مقالات، محصولات جدید