• اطلاعیه ها

    • Saeed Fard

      برگزاری میتاپ وردپرسی   14/08/96

      بعد از اولین دوره همایش وردپرس در ایران اگر پیگیر اخبار وردپرس بوده باشید، حتما خبر برگزاری چندین میتاپ و جلسه متعدد وردپرسی را شنیده‌اید، یکی از بحث‌های اصلی که محور اصلی این میتاپ‌ها بوده است برگزاری وردکمپ بود که به طور جدی دنبال می‌شود. این میتاپ‌ها و جلسات توسط جمعی از فعلان حوزه وردپرس در کنار وردپرس‌پارسی برگزار می‌شد و مسائل مربوط به این حیطه و از جمله وردکمپ مورد بحث قرار می‌گرفت. این بار با رایزنی‌هایی که با تیم اصلی وردپرس داشتیم در بخش دوم این رویدادها قصد داریم که میتاپ‌ها و جلسات وردپرسی را به صورت آزاد برگزار کنیم تا تمامی علاقه‌مندان و دوست‌داران وردپرس فرصت حضور داشته باشند و با گردهمایی، جامعه کاملتری از دوست داران وردپرس بسازیم و از تجربیات یکدیگر استفاده کنیم.   بدیهی است که این رویدادها با رویکرد مثبت در جهت سود رسانی به جامعه وردپرس و افراد حاضر در آن برگزار می‌شود و برای تمامی علاقه‌مندان به وردپرس است. پس اگر یک کاربر معمولی وردپرس یا یک توسعه دهنده هستید می‌توانید در این رویدادها شرکت کنید. ما در ملاقات‌هایمان از موارد مختلف و کاربردی وردپرس صحبت می‌کنیم و علاقمند به توسعه هر چه بیشتر وردپرس در ایران هستیم. ما وردپرس را دوست داریم. عضویت در این گروه برای همه افرادی که مایل به پیوستن هستند بدون در نظرگرفتن توانایی‌ها، مهارت‌ها، وضعیت مالی و یا معیارهای دیگر باز و رایگان است. فضای میتاپ‌ها و جلسات ما دوستانه و آزادنه و دور از هرگونه تبعیض و رفتارهای زننده است. بر این اساس از تمامی دوستانی که علاقه‌مند به شرکت در میتاپ‌های وردپرس هستند دعوت می‌شود تا از طریق لینک زیر در سایت میتاپ اقدام به ثبت‌نام کنند و منتظر خبرهای برگزاری جلسات در آینده باشند . لینک ثبت نام و عضویت : https://www.meetup.com/Iran-WordPress-Meetup    

9 پست در این موضوع قرار دارد

HTML5_Logo_512.png

HTML 5 دارای قابلیت ها و امکانات جدیدی است که کار را برای طراحان وب بسیار ساده می کند . از جمله این امکانات می توان به پخش فایل های صوتی و تصویری بدون نیاز به نرم افزار جانبی خاص و یا طراحی اشیا به صورت 2 بعدی اشاره کرد . در اين بخش سعی میشه ، تا با ارائه مثال های عملی همراه با کد اصلی برنامه و خروجی واقعی ، نحوه ايجاد يک وب سايت را تشريح کنیم .

40

به اشتراک گذاری این پست


لینک به پست

معرفی زبان HTML 5 :

HTML 5 ، ورژن جدید زبان طراحی صفحات وب یعنی HTML است . این زبان به عنوان جدیدترین استاندارد طراحی صفحات وب معرفی شده است .

HTML 4 در سال 99 میلادی به دنیای وب معرفی شد ، ولی از آن زمان تاکنون دنیای وب و نیازهای اینترنتی تغییر زیادی کرده است . بنابراین این نیاز وجود داشت تا یک استاندارد جدید معرفی شود تا بتواند نیاز های جدید کاربران را بهتر پوشش دهد .

HTML 5 هنوز در حال بروز رسانی و ویرایش است و مرورگرهای مطرح در تلاشند تا نسخه های جدید آنها ، سازگاری بهتری با این زبان جدید داشته باشد .

در HTML 5 ، قابلیت ها و امکانات جدیدی قرار داده شده است که تا قبل از این برای انجام آنها نیاز به نرم افزارهای جانبی در مرورگر ها داشتیم .

HTML 5 ، چگونه متولد شد :

HTML 5 ، حاصل همکاری و مشارکت دو نهاد اصلی استاندارد سازی وب یعنی W3C و the Web Hypertext Application Technology Working Group (WHATWG) است .

این دو نهاد به صورت مستقل در حال طراحی یک استاندارد برای وب بودند ، ولی در سال 2006 توافق کردند تا با همکاری هم HTML 5 را ایجاد نمایند .

در طراحی HTML 5 قوانین و راهکارهای زیر به صورت اجباری تعیین شد تا رعایت شوند :

  1. تمام قابلیت های جدید باید بر پایه HTML , CSS و جاوا اسکریپت باشند .
  2. باید نیاز به plugin ها و نرم افزارهای جانبی مثل فلش کاهش یابد .
  3. سیستم عیب یابی و رفع نقص عیب HTML بهبود یابد .
  4. سعی شود در طراحی صفحات وب نیاز کمتری به اسکریپت ها باشد .
  5. HTML 5 باید در اجرا مستقل از سیستم و کامپیوتر باشد .

معرفی ویژگی های جدید در HTML 5 :

در HTML 5 ، ویژگی ها و قابلیت های فراوان جدیدی قرار داده شد است که کار را برای طراحان وب بسیار ساده می کند . تا پیش از این طراحان وب برای انجام این امور نیازمند استفاده از plugin ها و نرم افزارهای جانبی مختلفی بودند .

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

  • اضافه شدن تگ < canvas > ، برای طراحی اشیا و اشکال به صورت 2 بعدی .
  • اصافه شدن تگ < video > و < audio > برای اجرای فایل های صوتی و تصویری بدون نیاز به یک نرم افزار جانبی مثل Flash Player .
  • کنترل های جدید فرم مثل calendar , email , date و time اضافه شده اند ، که طراحی و برنامه نویسی فرم ها را بسیار ساده می کند .
  • امکان ذخیره اطلاعات بر روی مرورگر کاربر - این قابیلت تقریبا کار کوکی ها cookie را در صفحات HTML انجام می دهند .

نکاتی راجع به نحوه آموزش HTML 5 :

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

تمامی مثال ها و مطاب این بخش بر اساس استاندارهای مرجع های آموزشی رسمی این زبان طراحی شده و با مرورگر های مطرح IE , Opera , FireFox و Chrome تست شده اند .

30

به اشتراک گذاری این پست


لینک به پست

نمایش ویدیو در صفحات HTML :

بسیاری از صفحات وب به پخش و اجرای فایل های ویدیویی و فلش می پردازند . تا قبل از ارائه HTML 5 ، استاندارد خاصی برای نمایش فایل های ویدویی در صفحات وب وجود نداشت و طراحان وب برای نمایش اینگونه فایل ها از ابزارهای جانبی مثل falsh player استفاده می کردند .

این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل ویدویی را نمایش دهد .

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

تگ جدید < video > ، برای نمایش فایل های ویدویی در صفحات وب به کار می رود .

در زیر نحوه کلی استفاده از این تگ را به شما نمایش داده و سپس به توضیح موارد مطرح شده در آن می پردازیم :

شکل کلی استفاده از تگ < video > :

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>

در این بخش به تشریح کد بالا و مواردی که ممکن است برای شما سوال ایجاد کند می پردازیم :

  1. خواص width و height : این خواص ابعاد فریم نمایش ویدیو را تعیین می کنند . تعیین این پارامترها اجباری نیست ، اما تعیین آنها از قبل ، این امکان را به مرورگر و طراح صفحه می دهد تا قبل از اجرای صفحه میزان فضای لازم برای این تگ را در نظر گرفته و طرح صفحه به هم نریزد . اگر مقدار این خواص تعیین نشوند ، فریم پخش ویدیو به اندازه سایز فایل ویدویی در خواهد آمد .
  2. خاصیت controls : مقدار دهی خاصیت controls ، باعث می شود تا مرورگر دکمه های پخش ، توقف و تنظیم صدا را به کاربر نمایش دهد . در حالت پیش فرض این کنترل ها نمایش داده نمی شوند .
  3. تعیین چند فرمت برای فایل ویدویی توسط تگ < source > : همانطور که متوجه شده اید ، چند فرمت مختلف از یک فایل یکسان را به وسیله تگ < source > در درون تگ < video > قرار داده ایم . این کار به این دلیل است که مرورگرهای مختلف از فرمت های خاص ویدویی پشتیانی می کنند که اسامی آنها در جدول زیر آمده است . هر مرورگر هنگامی که یه این کد می رسد ، فرمتی که خود می تواند اجرا کند را پخش می کند . این کار برای سازگاری با مرورگرهای مختلف است .

در حال حاصر 3 نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف را در جدول زیر نمایش داده ایم :

post-52-0-49436900-1341562010_thumb.jpg

تگ های مربوط به پخش ویدیو در صفحات وب ":

در لیست زیر تگ های اصلی و مهم مرتبط با پخش ویدیو در HTML 5 را به همراه توضیحات مختصری راجع به هر کدام ، قرار داده ایم :

< video > : این تگ تگ اصلی پخش ویدیو در HTML 5 است ، که به وسیله آن کد لازم برای نمایش ویدیو را قرار می دهیم .

< source > : این تگ آدرس و نوع فایل ویدیویی که می خواهیم نمایش دهیم را تعیین می کند .

پخش صوت و آهنگ در صفحات HTML :

ممکن است در صفحات وب نیاز داشته باشید تا به پخش و اجرای فایل های صوتی و آهنگ بپردازید . تا قبل از ارائه HTML 5 ، استاندارد خاصی برای نمایش فایل های صوتی در صفحات وب وجود نداشت و طراحان وب برای پخش اینگونه فایل ها از ابزارهای جانبی مثلreal palyer و falsh player استفاده می کردند .

این مسئله چند اشکال عمده دارد . اول اینکه باید plugin فلش پلیر بر روی مرورگر شما نصب شده باشد و ورژن آن به روز بوده تا فایل صوتی را پخش کند .

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

تگ جدید < audio > ، برای پخش فایل های صوتی در صفحات وب به کار می رود .

در جدول زیر نحوه کلی استفاده از این تگ را به شما نمایش داده و سپس به توضیح موارد مطرح شده در آن می پردازیم :

شکل کلی استفاده از تگ < audio > :

<audio controls="controls">
<source src="song.mp3" type="audio/mp3" />
<source src="song.ogg" type="audio/ogg" />
Your browser does not support the audio elemet.
</audio>

در این بخش به تشریح کد بالا و مواردی که ممکن است برای شما سوال ایجاد کند می پردازیم :

  1. خاصیت controls : مقدار دهی خاصیت controls ، باعث می شود تا مرورگر دکمه های پخش ، توقف و تنظیم صدا را به کاربر نمایش دهد . در حالت پیش فرض این کنترل ها نمایش داده نمی شوند .
  2. تعیین چند فرمت برای فایل صوتی توسط تگ < source > : همانطور که متوجه شده اید ، چند فرمت مختلف از یک فایل یکسان را به وسیله تگ < source > در درون تگ < audio > قرار داده ایم . این کار به این دلیل است که مرورگرهای مختلف از فرمت های خاص صوتی پشتیانی می کنند که اسامی آنها در جدول زیر آمده است . هر مرورگر هنگامی که یه این کد می رسد ، فرمتی که خود می تواند اجرا کند را پخش می کند . این کار برای سازگاری با مرورگرهای مختلف است .

در حال حاصر 3 نوع فرمت فایل های ویدویی داریم که پشتیانی یا عدم پشتیانی آنها توسط مرورگر های مختلف را در جدول زیر نمایش داده ایم :

post-52-0-88174700-1341562342_thumb.jpg

تگ های مربوط به پخش صوت و آهنگ در صفحات وب :

< audio > : این تگ ، تگ اصلی پخش صوت در HTML 5 است ، که به وسیله آن کد لازم برای نمایش صوت را قرار می دهیم .

< source > : این تگ آدرس و نوع فایل صوتی که می خواهیم پخش کنیم را تعیین می کند .

22

به اشتراک گذاری این پست


لینک به پست

در ادامه آموزش Nested عزیز برای کاملتر کردن بحث برچسب video برخی از خصیصه های دیگر را قرار می هم:

  • loop با افزودن این عبارت کلیپ ما پس از اتمام به طور خودکار دوباره شروع به پخش می کند.
  • autoplay با افزودن این عبارت کلیپ ما به محض این که صفحه لود شود شروع به پخش می کند.
  • muted با این عبارت در ویندوز و پلیر ها نیز آشنا می باشید کار آن قطع کردن صدای کلیپ می باشد.
  • poster به کمک این عبارت می توانید عکسی را به عنوان موضوعی از کلیپ قبل از پخش ویدیو نمایش دهید.

منبع: رنگو

25

به اشتراک گذاری این پست


لینک به پست

drag & drop عناصر در صفحات وب :

یکی از قابلیت های هیجان انگیز و جالب HTML 5 ، این است که شما می توانید کاری کنید عنصر مورد نظرتان در صفحه وب ، قابل جابه جا شدن باشد . به عبارت دیگر کاربر بتواند آن را از نقطه ای به نقطه دیگر drag & drop کند .

برای مثال شما می توانید کدی طراحی کنید تا کاربر بتواند یک عکس را از مکان اولیه آن به یک مکان دوم که تعیین نموده اید ، به وسیله موس بلند کرده و جابه جا کند .

این کار نیازمند کد نویسی و تعریف چند تابع است . برای اینکه درک بهتری از نحوه کار داشته باشید ، ابتدا نمونه کد لازم برای انجام این عملیات را به شما نشان می دهیم . سپس مرحله به مرحله اقدام به تشریح کد می کنیم .

کد لازم برای dargable ( قابل جابه جا بودن ) یک عکس و سپس انتقال آن در جدول زیر به شما نمایش داده شده است . به کد دقت کنید . در ادامه هر مرحله از کد را توضیح داده ایم :

  <head>
<script type="text/javascript">
function allowDrop(ev)
{
ev.preventDefault();
}
function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}
function drop(ev)
{
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
ev.preventDefault();
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69" />
</body>

ممکن است کد بالا در نگاه اول بسیار پیچیده باشه ، ولی در ادامه آن را جز به جز شرح داده ایم ، تا متوجه نحوه کار شوید .

مرحله اول - عنصر مورد نظر را قابل جا به جا کردن کنید :

در مرحله اول باید کاری کنید تا عنصر مورد نظرتان برای drag & drop کردن ، قابل جا به جا شدن باشد .

برای این منظور بایر مقدار خاصیت drggable آن را بر روی مقدار true تنظیم نمایید .

< img draggable = " true " /> 

مرحله دوم - تعیین عنصری که می خواهید جا به جا شود :

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

کد مربوط به این قسمت ، قطعه کد زیر است :

function drag ( ev )
{
ev.dataTransfer.setData ( " Text " , ev.target.id ) ;
}

در کد بالا ، خاصیت ondragstart عنصر عکس تگ ( < img > ) ، رویداد ( drag ( event را فراخوانی می کند . این رویداد تعیین می کند چه عنصری می خواهد drag شود . این رویداد زمانی اتفاق می افتد که شما دکمه موس را بر روی عکس کلیک کرده و سعی می کنید آن را بکشید .

متد ( ) dataTransfer.setData اطلاعات عنصری که قرار است darg شود ، یعنی id آن را دریافت کرده و در حافظه مرورگر قرار می د هد . این id از نوع " text " بوده و مقدار آن در این مثال drag1 است .

مرحله سوم - عنصر darg شده در کجا drop شود ؟ :

پس از اینکه عنصر مورد نظر را انتخاب کرده و آن را drag کردیم ، باید مکانی که فرود ( drop ) می آید را تعیین کنیم . این کار توسط کد زیر انجام می شود :

 function drop(ev)
{
var data = ev.dataTransfer.getData( " Text " ) ;
ev.target.appendChild ( document.getElementById ( data ) );
ev.preventDefault( );
}

هنگامی که عکس را در مکان تعیین شده رها می کنید ، رویداد ondrop تگ < div > رخ داده و تابع drop را فراخوانی می کند ..تابع drop توسط متد ( ) ev.dataTransfer.getData ، شناسه یا همان id عنصر drag شده را دریافت کرده و با متد ev.target.appendChild آن را به تگ div مرتبط می سازد .

17

به اشتراک گذاری این پست


لینک به پست

SVG درون خطی html5

svg مخفف: Scalable Vector Graphics به معنای گرافیک برداری مقیا پذیر است

SVG چیه؟

1- استفاده می شه برای مشخص کرد مبنای بردار گرافیکی در وب

2-گرافیک را در فرمت xml تعریف می کند.

3- بابزرگنمایی آن کیفیت خودش رو از دست نمی ده.

4-هر عنصر (Element) و هر خصوصیتی در SVG قابلیت متحرک شدن دارد.

مزیت های SVG:

  1. تصاویر می توانند براحی ایجاد و بوسیله ویرایشگر متن ویرایش بشن
  2. این تصاویر می توانند جستت و جوبشن. ایندکس بشن .فشرده بشن و بصورت اسکریپت هم دربیان
  3. این تصاویر مقیاس پذیر هستند
  4. این تصاویر می تونند با کیفیت و سایت بالا چاب بشن
  5. زوم کردن روی این تصاویر بدون افت کیفیت

مرگرهایی که پشتیبانی می کنند؟

کروم.موزیلا.سافاری .اپرا.اینترنت اکسپلورر

به کاربردن SVG در html


<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180"
style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>
</body>
</html>

نمایش نتیجه

منبع:w3schools.com

6

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

عناصر اچ تی ام ا (HTML ELement) چیست؟

بوسیله ی عناصر سند های html مشخص می شوند.

بیشتر توضیح بده.. :blink:

در سند های اچ تی ام ل هر چیزی که بوسیله ی یک تگ باز شروع و با تگ بسته به پایان برسه. :rolleyes:

مثال:

تگ شروع <p>

تگ پایان </p>

محتوای عنصر <p>این یه پاراگرافه </p>

نکته:تگ شروع رو غالبا تگ باز نامیده شده و تگ پایان رو هم تگ بسته نامیده شده.

ویژگی های عناصر در html

  • این عناصر بوسیله ی تگ باز شروع می شه . مثلا <p>
  • این عناصر بوسیله ی تگ پایان بسته می شه. مثلا </p>
  • محتوای در عناصر می تونه شامل هر چیزی باشه که بین دو تگ قرار گرفته م. مثلا: <p>این یک پاراگراف است </p>
  • بعضی از عناصر هم بدون محتوا هستند مثل <br> یا </br>
  • بیشتر عنصار می تونند خواصی رو داشته باشند

عناصر تو دتو html

بیشتر عناصر می تونند تو در تو نوشته بشن

اسناد html از عناصر تو در تو تشکیل شده.

نمونه


<!DOCTYPE html>
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>

مثال بالا شامل 3 تا عنصر هست .

عنصر <p>


<p>این یک پاراگراف است </p>

  • عنصر <p> پاراگراف رو در html تعریف می کنه.
  • این عنصر با <p> شروع می شه و با </p> تموم می شه.
  • محتوای این عنصر هم اینه ... این یک پاراگراف است....

عنصر <body>


<body>
<p>این یک پاراگراف است.</p>
</body>

  • عنصر<body> همون طور که از اسمش پیداست ، بدنه اسناد html رو مشخص می کنه که نحوه چیدن ستون ها و لینک و ... در این عنصر نمایش داده می شه
  • این عنصر با <body> شروع , با </body> بسته می شه.
  • محتوای این عنصر هم می تونه شامل هر چیزی باشه مثل </p> و <a></a> و...

عنصر <html>

  • این عنصر مشخص می کنه که سند ساخته شده از نوع html هست.

  • این عنصر با تگ <html> شروع و با </html> بسته می شه.

  • محتوای این عنصر هم می تونه شامل <head> و <body> و.. باشه.

تگ پایان رو یادتون نره

بعضی از عنصار html رو حتی اگر شما تگ رو بسته هم نکنید بدرستی نمایش داده می شه. مثل نمونه زیر


<p> این یه پاراگرافه

مثال بالا در بیشتر مرورگر ها عمل می کنه ، چون بستن تگ اختیاری در نظر گرفته شده.

اما یه نکته ای اینجاست هست، هرگز بر این موارد تکیه نکید چون که بیشتر تگ رو اگه بسته نکنید هنگام نمایش در مروگر خطا می ده و بدرستی نمایش داده نمی شه.

نکات پایانی:

از تگ بزرگ استفاده نکنید <P> . چون با استاندارد طراحی وب مطابقت نداره ، و بهتره از تگ کوچک استفاده کنید <p>

تمامی عناصر در xhtml باید بسته بشن. می تونید با زدن یک اسلش (/) این کار رو انجام دهید. </b>

خسته که نشدید :D :D :ph34r:

موفق باشید :wub: :wub:

ویرایش شده در توسط tazeh
6

به اشتراک گذاری این پست


لینک به پست

ارسال شده در (ویرایش شده)

خواص اچ تی ام ال (HTML Attributes)

خواص ، یه اطلاعات اضافی رو درباره عناصر html می ده.

ویژگی ها HTML Attributes

  • عناصر می تونند خواصی رو بپذیرند
  • اطلاعات اضافی رو درباره عناصر می ده.
  • برای دادن خاصیت ها به تگ مورد نظر ، همیشه در تگ شروع مشخص می شه.
  • خواص دارای دو قسمت هست name/value ، نام خاصیت و مقدار آن .. مثال :name="value"

مثال ها:

برای تعریف لینک در html از تگ <a> استفاده می شه. آدرس لینک هم در خاصیت href مشخص می شه.


<a href="http://www.wp-parsi.com">This is a link</a>

استفاده از خاصیت ها

مقادیر خاصیت ها یا ویژگی ها در دو کوتیشن ("/") باید محصور بشن.


<a href="http://www.wp-parsi.com">This is a link</a>

شایعترین نوع،استفاده از دو کوتشین هست و لی اط یک کتشین هم می شه استفاده کزد.

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

مثال


name='John "ShotGun" Nelson'

نکته: از حروف کوچک برای مقادیر و ویژگی ها استفاده کنید. در نسخه ها ی جدید xhtml که در آینده میاد از حروف کوچک باید استفاده کرد.

چند نمونه از خاصیت یا ویژگی ها + توضیحات هر کدام

class : یک کلاس برای عنصر مشخص می کند ( اشاره به یک کلاس در شیوه نامه یا استایل داره)

id: شناسه منحصربه فردی برای یک عنصر ایجاد می کنه.

style: شناسه استایل داخلی رو برای عنصار مشخص می کنه.

نکته:مهمترین تفاوت class و id

id: از یک آی دی فقط می شه برای یک عنصر استفاده کرد.

<a id="linkha"></a>

class:از یک کلاس می شه برای چند عنصر مختلف استفاده کرد.

<a class="linkam'>خانه</a> و <a class="linkam">زندگی</a>

موفق باشید.

منبع:w3school.om

ویرایش شده در توسط tazeh
4

به اشتراک گذاری این پست


لینک به پست

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

کد های زیر ساختار html5 هست که می تونید استفاده کنند.


<!DOCTYPE HTML>

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>نام وب سایت شکا</title>
</head>

<body>

<header>
<nav>
<ul>
<li>نام منو</li>
</ul>
</nav>
</header>

<section>

<article>
<header><!---هدرسایت-->
<h2>عنوان مقاله</h2>
<p>پست شده در<time datetime="2009-09-04T16:31:24+02:00">4 سپتامبر 2009</time> توسط <a href="#">نویسنده</a> - <a href="#comments">6 دیدگاه</a></p>
</header>
<p>این یک پاراگراف هست که می توانید محتوای مطلب خود را اینجا قرار دهید</p>
</article>
<article>
<header>
<h2>عنوان مقاله</h2>
<p>پست شده در<time datetime="2009-09-04T16:31:24+02:00">4 سپتامبر 2009</time> توسط <a href="#">نویسنده</a> - <a href="#comments">6 دیدگاه</a></p>
</header>
<p>این یک پاراگراف هست که می توانید محتوای مطلب خود را اینجا قرار دهید</p>
</article>



</section>

<aside>
<h2>ستون کنار صفحه</h2>
<p>این یک پاراگراف هست که می توانید محتوای مطلب خود را اینجا قرار دهید</p>
</aside>

<footer>
<p>Copyright 2009 نام شما</p>
</footer>

</body>

</html>

منبع:http://snipplr.com/

این قالب دوم html5


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Title</title>
<meta name="description" content="Ermahgerd Webr">
<meta name="author" content="Derp">
<link rel="stylesheet" href="css/style.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<!-- Le Header -->
<header></header>

<!-- Le Navigation -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>

<!-- Le Content Wrapper -->
<div id="wrapper">

<!-- Le Content -->
<div id="content">

<!-- Le Article -->
<article>
<h1>This is a Header.</h1>
<p>Le lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed facilisis porta augue, vel convallis ligula dignissim eu. Le nam scelerisque aliquam adipiscing. Le aenean ante urna, accumsan quis placerat at, consectetur et tellus.</p>
</article>

</div><!-- Le Content END -->

<!-- Le Complementary Stuff -->
<aside></aside>

</div><!-- Le Content Wrapper END -->

<!-- Le Footer -->
<footer></footer>

<!-- Le End -->
</body>
</html>

منبع:http://snipplr.com/

ویرایش شده در توسط tazeh
5

به اشتراک گذاری این پست


لینک به پست

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری

  • مطالب مشابه

    • توسط سعید فرزادی پور
      با عرض سلام
      من به مشکلی خوردم که راه حل اون رو نمیدونم
      در هدر سایت یک نویگیشن بار دارم که منوی اصلی سایتم به صورت دراپ داون در این نویگیشن بار وجود داره ، قال سایت من shaply هستش و استفاده از ویجت ها در body بازه ، من با استفاده از یک ویجت اسلایدر در بالاترین قسمت و زیر هدر سایت که ارتفاع اونم 55 پیکسل هستش اسلایدر بزرگ ایجاد کردم ، و حالا زمانی که میرم روی دراپ داون ها متاسفانه تا قبل از اسکرول کردن به پایین ، زیر منو ها به زیر اسلایدر میرن ، اما بعد از اسکرول کردن به پایین این مشکل حل شده و منو ها و زیر منو ها نمایش داده میشن ، هرچه z-index رو افزایش دادم نتیجه ای نداشت ، چطور میتونم این مشکل رو حل کنم ؟
      و سوال دوم این که در این تم منو ها اول به پایین و بعد به راست باز میشن و من میخوایم سایت رو به صورت فارسی داشته باشم و میخوام اول به پایین و بعد به چپ باز بشن منو ها , چه تغییری میتونم در css ایجاد کنم ؟
    • توسط poruamohammady
      سلام دوستان من یه مدت هست افزونه هایی که نصب می کنم ورد پرس بهم این اخطار هار رو میده کسی میتونه کمک کنه برای مثال تازگی ها افزونهwp-super cacheرو که نصب کردم این اومد قبلا هم چیزای دیگه بود مرسی اگر راهنمایی کنید

    • توسط mehran-b
      با سلام و عرض ادب خدمت تمامی کاربران انجمن وردپرس پارسی
       
      امروز یک کدی براتون قرار میدم که با استفاده از این کد میتونید به تمامی پست های یه دسته خاص از وب سایتتون متای robots با مقدار noindex,follow اضافه کنید.
       
      در صورت نصب بودن افزونه سئو وردپرس
      add_filter('wpseo_robots', 'mehran_specific_category_posts_add_noindex_yoast'); function mehran_specific_category_posts_add_noindex_yoast($content) { if(is_single() && in_category(777)) { return "noindex,follow"; } return $content; } در صورت نصب نبودن افزونه سئو وردپرس
      add_action('wp_head', 'mehran_specific_category_posts_add_noindex'); function mehran_specific_category_posts_add_noindex() { if(is_single() && in_category(777)) { $output = '<meta name="robots" content="noindex,follow" />' . "\n"; } echo $output; }  
      توجه1: کدهای بالا رو باید در فایل functions.php قالب سایتتون و زیر اولین
      <?php قرار بدید.
      توجه2: به جای عدد 777 در کد باید آیدی دسته ای رو قرار بدید که قراره پست هاش noindex,follow بشن.
       
      موفق باشید
    • توسط mohamad-8
      سلام
      دوستان برای طرح بندی صفحه با html 5 دیگه نیازی نیست از تگ div استفاده کنم؟
      بعد در html5 تگ هدر که برای بالا صفحه میزاریم یعنی header سایت
      تگ footer هم پایین سایت
      واسه ستون های چپ و راست هم باید از تگ side bar باستفاده کنم؟
      حالا واسه مطالب اصلی سایت(همان main) باید از تگ section استفاده کنم یا از تگ article ؟ من این و اصلا متوجه نشدم که کجا هرکدام بزارم ؟
    • توسط majidbarz
      سلام دوستان چند بار  وردپرس و نصب کردم موقعی که لاگین میکنم به پیشخوان
      پیشخوان مثل عکس میشه چیکار کنم؟
      به هاستینگم گفت گفت مشکل از ما نیست
      رو زبان انگلیسی اوکی ولی فارسی نه چند افزونه فارسی سازم نصب کردم نشد