0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, طراحی سایت فروشگاهی , شرکت طراحی سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی

کد نویسی استاندارد html5

نویسنده پشتیبانی وب یار
امتیاز مطلب
5.0
01
تعداد بازدید 245
تاریخ بروزرسانی ۲۳ آبان ۱۳۹۵

اصول کد نویسی  HTML5 

HTML زبان کد نویسی برای طراحی، چیدمان و نمایش محتویات وب سایت و همچنین نرم افزارهای تحت وب است. کد نویسی استاندارد html 5 برگرفته از عبارت Hyper Text Markup Language5 (زبان نشان گذاری ابر متن ۵) و پنجمین نسخه از HTML می باشد و همچنان در حال توسعه است. HTML از مهم ترین زبان های برنامه نویسی سمت کاربر می باشد. شما عزیزان برای این که بتوانید سایتی را بهینه طراحی کنید، باید با اصول کدنویسی استاندارد html 5 آشنا باشید.

در این پست از وب یار می خواهیم کدنویسی استاندارد html 5 را آموزش دهیم. برای یاد گیری html 5 ابتدا به اصول و قواعد کلی و پایه ای آن پرداخته و سپس استاندارد ها و تغییرات جدید html 5 را بررسی می کنیم. پس تا پایان مقاله همراه ما باشید.

 

قوانین پایه ای html 5

 

در این بخش به آموزش و آشنایی با قوانین پایه ای html 5 در طراحی وب سایت می پردازیم.

 

مروری بر کدهای html 5

 

۱- نوع سند و ورژنی که از HTML استفاده می کنید را توسط تگ DOCTYPE در خط اول مشخص کنید. یعنی برای html 5  بنویسید: DOCTYPE html>!>

۲- درون تگ <html> ابتدا تگ < head> را وارد کرده و در آن تگ های لازم همچون link ، meta ، title ، keyword  و description را قرار دهید.

۳- بعد از تگ head تگ body>> می باشد که نشان دهنده ی بدنه ی وب سایت است.

۴- تمامی تگ ها به صورت زوج، یعنی باز و بسته می باشند. البته به جز تگ های فرد مانند <br> و <hr> .

۵- در html 5 تگ های فرد غیر خالی مثل <img src=”” /> را در جایی که باز و تعریف کردید را در همان جا نیز ببندید.

۶- تگ border که برای حاشیه ی تصاویر و جداول به کار می رود که در html 5 منقضی شده است.

۷- استفاده از تگ align که برای تعیین موقعیت به کار می رود که در html 5 نیز منقضی شده است.

۸- در html 5 برای ضخیم کردن نوشته ها، باید از تگ strong به جای تگ b به کار ببرید.

۹- فایل خود را با پسوند .html ذخیره کنید تا توسط مرور گر اجرا شود.

 

جایگاه html 5 در طراحی

 

با این که html برای توصیف ساختار ظاهری اطلاعات نیز به کار می رود، اما امروزه این عملیات با تگ هایی نظیر font، center، bgcolor ، strike ، width و… در html منسوخ شده و این وظایف بر عهده ی css می باشد. حتی html از table ها نیز برای طراحی و چیدمان اصلی سایت استقاده نمی کند و به جای آن از تگ div استفاده می کند. کدنویسی استاندارد html 5  باعث شده تا از css استفاده ی بیشتری برده و به امکانات آن اضافه گردد.

 

امکانات html 5

 

۱- با html 5 می توان امکاناتی نظیر فضای آفلاین را داشت. درست شبیه Googe Gears . توسط این امکان، می توانید ایمیل خود را به صورت آفلاین ببینید.

۲- با html 5 می توانید در هر گوشه از صفحه اشکال غیر منظمی داشته باشید و دیگر نیازی ندارید که از افزونه هایی مانند فلش استفاده کنید.

۳- با html 5 می توانید به صورت مستقیم فایل های صوتی و تصویری را پخش کنید. بنابراین دیگر مجبور نیستید از افزونه هایی مانند Flash استفاده کنید.

۴- html 5 می تواند مکان شما را تشخیص داده و توسط API ها ذخیره سازی محلی کند. بنابراین بر اساس سیستم مکان یابی خود، مکان شما را تشخیص داده و جستجو ها را طبق مکان شما لیست می کند.

۵- توسط html 5 می توانید فرم های ورود اطلاعات هموشمندانه تری نظیر جعبه های متن، checkbox و… طراحی کنید.

۶- html 5 می تواند امکانی را فراهم آورد که شما دیگر برای انجام امورات خود، نیاز به نصب نرم افزار خاصی در سیستم خود نباشید. بلکه بتوانید کارهایتان را به صورت آنلاین و تحت وب انجام دهید.

 

نشانه های جدید html 5

 

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

  • تگ های جدیدی که برای توصیف ساختار ظاهری سایت به کار رفته اند و از لحاظ تکنیکی چیزی شبیه به تگ های div و span می باشند، نظیر:

Section, article, aside, header, footer, nav, dialog, figure

  • انواع input هایی نیز برای فرم های ورود اطلاعات، افزوده شده است. از جمله:

Datetime, datetime-local, date, month, week, time, number, range, email, url, datalist, output

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

Audio, video, canvas, meter, progress, event-source و…

  • همچنین ویژگی هایی که در html 5 افزوده شده است، مانند:

Ping, charset, async

و ویژگی های عمومی که به تمامی عناصر قابل اعمال است، مثل:

Id, tabindex, repeat

می باشد.

 

ساختار کلی یک صفحه وب مبتنی بر html 5

 

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

<header> : مکان سر برگ را در سایت مشخص می کند.  در این قسمت تمام کدهای مربوط به سر برگ را در این قسمت وارد کنید.

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

<section> : این مکان در بردارنده ی تمامی بخش هایی نظیر فصل ها، سر صفحه، پاورقی، تبلیغات و … می باشد.

<article> : این قسمت جهت تعریف محتوای خارجی نظیر مقاله ها ، اخبار یا یک متن از یک وبلاگ به کار می رود.

<footer> : این قسمت برای مشخص کردن مکان پا برگ سایت یا وبلاگ به کار می رود.

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

برای آشنایی بیشتر با تگ های html5 مقالات زیر را مطالعه کنید.

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

آموزش طراحی سایت HTML5 – قسمت دوم

آموزش HTML5 – قسمت سوم

آموزش HTML5 – قسمت چهارم

 

سازگاری مرور گر ها با html 5

 

اکثر مرورگر ها به جز IE کم و بیش با استاندارد های html5 سازگاری دارند و روز به روز نیز پیشرفت می کنند. از این رو مشکلی با این گونه مرورگر ها نخواهید داشت. اما با وجود این که کاربران از مرورگرهای بروز استفاده می کنند متاسفانه حدود ۷۵% از کاربران از IE استفاده می کنند. از این رو کدنویسی استاندارد html کمی نگران کننده به نظر می رسد. لذا ناچارید که خودتان طرح هایتان را با مرورگر ها سازگار کنید. مثلا برای پشتیبانی canvas در IE می توانید از canvas شبیه سازی شده با جاوا اسکریپت و vml، که explorercanvas نام دارد، استفاده کنید. با این حال احتمالا تا سال ۲۰۲۲ بسیاری از استاندارد های html پایدار بوده و به راحتی قادرید از آن در طراحی سایتتان استفاده کنید. در تصویر زیر سازگاری html با چند مرورگر به روز دنیا نمایش داده شده است.

سازگاری HTML5با مرورگرها

 

امیدواریم با آموزش امروز وب یار و رعایت استاندارد های html5 بتوانید سایتی بهینه، معتبر و Valid برای w3c طراحی کنید. برای آشنایی و آموزش استاندارد HTML5 می توانید در کلاس های طراحی سایت وب یار ثبت نام نمائید. برای کسب اطلاعات بیشتر در این خصوص می توانید به کانال تلگرام  webyar_net@ وب یار مراجعه فرمائید.

5.0
01
مطالب مرتبط
افزایش فروش طراحی سایت
مطالعه : 10 دقیقه

با طراحی سایت تخصصی به اهداف فروش پر درآمد برسید     یکی از بزرگترین و مهمترین اهداف تیم وب یار، کمک به افزایش فروش و درآمد مشتریان است. در واقع تخصص اصلی ما بازاریابی و مارکتینگ است که در قالب مشاوره، طراحی سایت ارزان و زیبا، تبلیغات، آموزش های تکنیکی و مفید به مدیران در جهت مدیریت بهتر نیروها و … می باشد و هدف از طراحی سایت، افزایش فروش و درآمد شماست.   هدف ما از طراحی سایت، افزایش فروش و درآمد شماست   يک وب سايت سئو شده! امروزه تمام افراد جامعه داراي کامپيوتر و موبایل و تبلت هستند که دسترسي به اينترنت را برای آنان بسیار راحت کرده است. این افراد برای انتخاب و خرید هر چیز کوچکی ابتدا در اینترنت به جستجو می پردازند و با مقایسه و داشتن اطلاعات کامل اقدام به خرید می کنند. پس هر کس که دارای یک وبسایت موفق و سئو شده باشد در نتایج جستجو دیده خواهد شد. تیم وب یار، با ارائه خدمات طراحي وب سايت با تخصص و مهارت لازم، مي تواند به شما در ساخت يک وب سايت کمک کند که منافع اين واقعیت را که اينترنت کامل ترين ابزار تجارت (خريد و فروش) اين قرن خواهد بود را به شما خواهد داد. تجربه هاي حرفه اي که شرکت طراحي وب سايت ما بکار مي برد […]

seo-webyar-کلاس های آموزشی سئو وب یار
مطالعه : 2 دقیقه

کلاس های آموزشی سئو در اصفهان بهترین راه برای یاد گیری علوم سئو و استاندارد های طراحی سایت از صفر است زیرا بدون خطا و در کنار متخصصین سئو سایت در اصفهان سایت خود را با آسودگی تحلیل و آموزش های مربوط به آنالیز، بهینه سازی و روش های سئو گوگل یاد خواهید گرفت. طراحی سایت وب یار کلاس های آموزشی کامل سئو با ۳۰ سرفصل آموزشی، هم چنین دوره ی کامل تر آن با ۵۰ سرفصل آموزشی برای علاقمندان در شهر اصفهان و شهرهای حومه اصفهان برگزار می کند. چرا سئو و اهمیت سئو: خیلی از مدیران زمانی که با شرکت ما تماس می گیرند، از ما می پرسند که سایت آنان همانند خیلی از شرکت های رقبایشان در صفحات اول گوگل نمایش داده نمی شود؟ یا درخواست طراحی سایتی را دارند که وقتی کاربران، مطلبی مرتبط با سایت آن ها را جستجو می کنند سایت آن ها در صفحه ی اول و دوم گوگل نمایش داده بشود، این همان سئو است که شاید بارها افراد از آن استفاده بکنند اما شاید نام تخصصی آن را نداند، یا اینکه چه اتفاقاتی افتاده که یک وب سایت در صفحات اول گوگل قرار گرفته است؟ سئو کردن سایت یعنی تولید کردن صفحات وبی که برای موتورهای جستجو جالب هستند و باعث شود که شما در نتایج یک موتور جستجوی بزرگ بیشترین […]

مطالعه : 7 دقیقه

طراحی آرم یا لوگو و ست اداری آیا تا حالا به چگونه مجسم شدن برند خودتون تو ذهن مشتریانتون فکر کرده اید؟ فکر می کنید وقتی که نام شرکت یا حوزه ی صنعتی شما در مکانی برده میشه دیگران چه تصویری از برند شما از ذهنشون به سرعت رد میشه؟ به نظر خودتون آرم یا لوگو شما به شکلی هست که بتونه ملکه ذهن دیگران بشه؟ اگر تو پاسخ به همه ی این سوالات شک داری بهتره با تیم طراحی آرم لوگو ست اداری اصفهان وب یار همراه بشی تا اطمینان خاطر پیدا کنی طراحی لوگو و آرم شما به نحوی هست که بتونه بیانگر تخصص شما و برجسته شدن شما در میان رقباتون بشه.     طراحی آرم یا لوگو و ست اداری برای هر شرکت یا مؤسسه یا سازمان یک امر ضروری محسوب می شود. با داشتن یک آرم یا لوگوی منحصر به فرد به راحتی می توانید در میان رقبای خود بیشتر و بهتر بدرخشید. همچنین در میان مشتریان به وسیله آرم یا لوگوی خاص خود شناخته شده و برند می شوید و مشتریان ثابت بسیاری را بدست می آورید. وجود یک نشان زیبا و چشمگیر که در ست اداری شما نیز مشاهده شود احساس خوب همراه با نمایش قدرت شما را در ضمیر مشتریانتان بر می انگیزد. با توجه به اینکه هنوز برخی از مشتریان تفاوت […]

طراحی فروشگاه اینترنتی
مطالعه : 10 دقیقه

طراحی سایت و طراحی فروشگاه اینترنتی امروز با مقایسه طراحی سایت و فروشگاه اینترنتی به سراغ شما آمده ایم تا تفاوت این دو برای شما آشکار شود، چرا که بسیاری از مدیران کسب و کار و مشاغل در زمان سفارش طراحی سایت و یا فروشگاه اینترنتی دچار سردرگمی می شوند و نمی دانند برای هدف خود باید کدام یک را برگزینند. در ادامه با توضیحاتی مختصر و کاربردی در خصوص طراحی سایت و طراحی فروشگاه اینترنتی در خدمت شما هستیم تا بتوانیم بهترین راهنما جهت سفارش طراحی سایت و طراحی فروشگاه اینترنتی برای شما باشیم.     طراحی سایت 1) تعریف اجمالی از طراحی سایت: طراحی سایت و طراحی فروشگاه اینترنتی با زبان های مختلف و با سیستم های مدیریت مختلف از قبیل وردپرس، جوملا، دروپال، نیوک و … در دنیا در حال انجام است که از میان آن ها وردپرس اولین رتبه را به خود اختصاص داده است.   2) مراحل طراحی سایت: همان طور که در مطالب قبل مراحل طراحی سایت و طراحی فروشگاه اینترنتی را برای شما شرح داده ایم طراحی سایت حرفه ای و استاندارد از جلسه مشاوره و انتخاب امکانات که میان طراحان سایت و مشتری است شروع می شود و تا مراحل بعدی طراحی گرافیکی، برنامه نویسی ایستاتیک و داینامیک سایت، تست آزمون و خطا سایت، و پشتیبانی و آموزش سایت ادامه دارد.   […]

سئو فروشگاه اینترنتی
مطالعه : 8 دقیقه

 اصول بهینه سازی فروشگاه اینترنتی سئو سایت فروشگاهی سئو سایت و بهینه سازی سایت بر اساس اصول استاندارد و سئو شده یکی از مهم ترین مراحل طراحی سایت است، اما سئو فروشگاه اینترنتی و اصول بهینه سازی فروشگاه اینترنتی نیز برای افزایش فروش و درآمد مشتریان به شدت حایز اهمیت می باشد و دارندگان فروشگاه های اینترنتی مهم ترین هدفی که از راه اندازی فروشگاه های اینترنتی دارند سوق دادن مشتریانشان به سمت فروشگاه اینترنتی و خرید مشتریانشان از سایتشان میباشد، به همین دلیل سئو سایت فروشگاهی از سئو کد نویسی سئو کانتنت گرفته تا سئو یوزر فرندلی (کاربر پسندانه بودن ظاهر سایت) سئو اکسترنال و دیگر مراحل سئو حایز اهمیت میباشد. بهینه سازی یا سئو یکی از مهمترین موضوعات قابل توجه برای طراحی سایت فروشگاهی می باشد ، اما اصول بهینه سازی فروشگاه اینترنتی آن قدر حایز اهمیت است که فروشگاه اینترنتی شما را دچار رکود یا سقوط میکند، در حالی که در بسیاری از فروشگاه های مبتنی بر وب نادیده گرفته می شود. سئو فروشگاه اینترنتی می تواند ترافیک بیشتری را برای شما به ارمغان آورد ، بنابراین لازم نیست شما تنها بر تبلیغات و لینک ها تمرکز کنید. با انجام تکنیک های عمومی بهینه سازی می توانید تا حدودی به سطحی از سئو دست یابید و جایگاه فروشگاه خود را در نتایج جستجو ارتقاء دهید و از رقبای […]

طراحی سایت حرفه ای
مطالعه : 15 دقیقه

طراحی سایت اصفهان |طراحی سایت حرفه ای | سئو تضمینی سایت تیم طراحی سایت و سئو سایت وب یار به آدرس https://www.webyar.net ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت ,سئوسایت در گوگل و امنیت سرور

دیدگاه ها

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

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