قالب وردپرس با سئو بالا راهکار جدید برای وب سایت های دانلودی دریافت و مشاهده

آموزش HTML بخش اول – شروع با HTML5

فرهاد کره بندی

HTML5 آخرین و جدید ترین نسخه HTML است که مدت کوتاهی است که از حالت بتا خارج شده . این نسخه قرار بود به جنگ با flash برود و جای تمامه انیمیشن ها و کدنویسی های مختلف را در داخل اینترنت بگیرد . فعلا که تا حد زیادی قوی بوده و با کمک JS می تواند بسیار کارهای پیچیده ای انجام دهد که انیمیشن بخش بسیاری کوچکی از آن است .

شروع با HTML5

همانطور که می دانید کد های اچ تی ام ال به شکل بسیار ساده ای هستند . مثلا ما میخواستیم کدی برای ایجاد سند HTML بسازم قطعه کدی شبیه کد زیر داشتیم.

<!DOCTYPE html>
<html>

   <head>
      <meta charset="utf-8">
      <title>Farhadina</title>
   </head>
   <body>	
   
      <header role="banner">
         <h1>HTML5 Document Structure Example</h1>
      </header>

      <footer>
         <p>Created by <a href="http://tutorialspoint.com/">Tutorials Point</a></p>
      </footer>
      
   </body>   
</html>


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

<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″>

را داشتیم اما الان کد ما

<meta charset="UTF-8">

شده است . متوجه می شوید که HTML5 در جهت کوتاه بودن کدها و حذف بخش های بیهود خواسته است که کار را سریع تر کند .

ما برای لود فایل های js و css هم نیاز به قطعه کدی داشتیم که الان کوتاه تر شده و سریع تر می توان آنرا قرار داد .

<link rel="stylesheet" href="stylefile.css">
<script src="scriptfile.js"></script>

همانطور که میبینید کد ها به شکل زیادی کوتاه تر شده اند اما بررسی این بخش ها فقط برای آشنایی و بررسی دقیق آنهاست بلکه بخش اصلی آشنا شدن با المان های جدید در HTML5 است .

میدانید هر کد در HTML به صورت یک برچسب است . یعنی برای علامت گزاری ما قرار میدهیم <element> .. </element> که به جای المنت برچسب هایی می آیند که ما نیاز داریم آنها را قرار دهیم .مثلا برچسب <p> برای قرار دادن پاراگراف در داخل آن است .

سند و المان های HTML5

برای شروع شما مقداری از HTML باید بدانید . اما بحث اصلی این است که المان های HTML5 چه هستند و چه کاربردی دارند .

  • section – این المان بخش های اصلی یک سایت را دربر میگیرد . دقت کنید زمانی که میخواهید چند باکس در داخل چیزی قرار دهید باید آن بخش با section باشد که در آن تگ های h1 تا h6 قرار میگیرند
  • article – به معنای مقاله . نوشته های سایت شما مثلا پست های شما یا توضیحات شما باید در آن قرار بگیرد
  • aside – بخشی است که برای توضیحات و کار بیشتر با سایت قرار میگیرد مثلا ستون های سمت چپ و راست سایت
  • header – بخش بالایی سایت که از اسم آن معلوم است
  • footer – بخش پایینی سایت همان پانوشت
  • nav – محلی برای قرار دادن منو و لینک صفحات یا بخش های دیگر
  • figure – قرار دادن عکس ها و تصاویر
<!DOCTYPE html>

<html> 
  <head>  
    <meta charset="utf-8">     
 <title>...</title> 
  </head> 
<body>    
  <header role="banner">   
      <h1>بخش بالایی سایت</h1>        
 <p>توضیحاتی در مورد سایت</p>    
  </header>

      <nav> 
         <ul>     
       <li><a href="#">آموزش طراحی</a></li>       
  </ul> 
      </nav> 
  
    <article>     
    <section>         
   <p>مطالب سایت</p>     
    </section>    
  </article> 
   
   <aside>     
    <p>بخشی برای ستون چپ</p>    
  </aside>   
    
     <figure>     
  <img src="/html5logo.png" alt="فرهادینا">    
  </figure> 
  
         <footer>      
   <p>Created by <a href="#">Farhadina</a></p>  
    </footer>
    </body>
</html>

همانطور که میبینید بخش هدر به عنوان سربرگ قرار گرفته است . article بخشی است که پست های سایت قرار میگیرد و مثلا بخش aside برای قرار دادن ستون است .

ویژگی ها در HTML5

ویژگی های مختلفی در html5 وجود دارد که رایج ترین آنها Class و data ست . مثلا قبلا کدی مانند <p class=”main”>…</p> را دیده بودید . Class یک ویژگی برای ما است که به ما می کند به المنت مورد نظر خود استایل یا خصوصیات دیگر نسبت دهیم .

ویژگی امکانات عملکرد
accesskey User Defined قابلیت ویژگی المنت با استفاد از کیبرد
align right, left, center قرار گیری متن
background URL قرار دادن تصویر پیش زمینه
bgcolor numeric, hexidecimal, RGB values رنگ مثلا : white یا #fff
class خودتان تعریف می کنید کلاسی که در فایل css تعریف میکنیم
contenteditable true, false یوزر های شما می توانند مقدار و اطلاعات داخل المنت را عوض کنند
contextmenu Menu id تعریف منو
data-XXXX خودتان تعریف می کنید برای تعریف ویژگی که باید با Data شروع شود . برای مقدار دهی
draggable true,false, auto قابلیت Drag & drop
height Numeric Value تعیین ارتفاع مورد نظر
hidden hidden نمایش یا عدم نمایش
id خودتان تعریف می کنید قراردادن اسم برای المنت که با # در فایل سی اس اس قرار می گیرد و میتواند عملکردی مانند کلاس داشته باشد
item List of elements گروه کردن
itemprop List of items آیتم های درون گروه
spellcheck true, false بررسی کردن به صورت هوشمند اینکه کلمات داخل درست است یا نه
style CSS Style sheet قراردادن استایل در آن
subject خودتان تعریف می کنید موضوع
tabindex Tab number مشخص کردن ترتیب مثلا بر اساس حروف الفبا
title خودتان تعریف می کنید وقتی موس روی المنت میرود یک توضیح می آید
valign top, middle, bottom قرار گیری در عرض
width عدد مشخص کردن عرض المنت

برای مثال در نظر بگیرید

  • <section width=”200px”>  در این حالت عرض باکس ما ۲۰۰ پیکسل خواهد بود
  • <img alt=”Farhadina”> وقتی موس روی تصویر برود Farhadina را نمایش می دهد
  • <article id=”Post-1″> آیدی این بخش Post-1 است و داخل css به شکل #Post-1 {…} استایل دهی می شود

تفاوت article یا section با div چیست ؟

اگر شما قبلا با این زبان کار کرده باشید متوجه می شود که هیچ تفاوتی نداریم زمانی که شما div یا article در سایت قرار دهید . اما این تفاوت فقط ظاهری است ولی در داخل این موضوع تفاوت هایی هست . اولا زمانی که گوگل شروع به بررسی سایت شما می کند بخش هایی که article دارند بسیار دقیق تر از سایر بخش ها مورد بررسی قرار میگیرند ضمننا سایر تفاوت در استفاده از heading هاست . شما زمانی که در داخل سایت یک h1 یا h2 قرار میدهید گوگل ارزش تمامی آنها را یکسان می داند . اما اگر داخل html5 و article آنرا قرار دهید بهتر میداند که در داخل یک مقاله خاص با سر تیتر های مشخص هستیم اما html5 فقط قرار دادن کد های ساده header یا article نیست در آینده بیشتر به آنها می پردازیم همچنین زمانی که این زبان با jquery دست به یکی می شود کار های عجیب غریبی انجام میدهد .

برچسب ها : , , , ,

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آموزش طراحی سایت

آموزش کامل طراحی سایت

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


براتون منتشر کنم