• اطلاعیه ها

    • Saeed Fard

      برگزاری چهارمین همایش Coder Conf و کد تخفیف برای کاربران وردپرس پارسی   20/04/97

      کدرکانف هر سال در آخرین پنجشنبه مرداد با بورد‌های مختلفی برگزار می‌گردد،امسال نیز کدرکانف در همین تاریخ با حضور برنامه نویسان مطرح کشور در بورد تخصصی جاوااسکریپت برگزار خواهد شد، یک گردهمایی متفاوت با طعم Javascript. Coderconf هر سال نسبت به سال‌های گذشته با حضور برنامه‌نویسان پر رنگتر می‌شود. ما سعی کردیم هر ساله به این کنفرانس مفهوم عمیق تری ببخشیم تا از آنچه در سال‌های گذشته عرضه شده به روزتر و مفیدتر واقع شویم. امسال فرصتی خواهد بود تا با نگرشی جدید و بهبود مطالب ارائه شده، عمیقتر به این موضوع نگاه کنیم تا بجای تکرار مباحث پیشین گامی هر چند کوچک در مسیر ارتقای دانش فنی برنامه‌نویسان ایرانی برداریم. ما در Coderconf ۴ با تمرکز بر روی Javascript نیت کرده‌ایم این فرصت را در اختیار برنامه نویسان قرار دهیم تا با ظرافت و استانداردهای روز دنیا کار خود را پیش ببرند. به نظر ما امسال زمان آن فرا رسیده‌است تا این زبان را به صورت تخصصی و از ابعاد مختلف به چالش بکشیم.   دبیر علمی همایش میلاد حیدری، کدرکانف ۴ را اینگونه توصیف کرده است :اشتراک گذاری دانش بهترین راه رسیدن به جاودانگی اطلاعات است. هر ساله همایش‌های زیادی برگزار میشه که افراد شرکت‌کننده می‌توانند با افراد مجرب شبکه سازی کنند. امسال در کدرکانف سعی کردیم علاوه بر بخش شبکه سازی بین افراد بیشتر روی انتقال دانش و کیفیت ارائه ها تمرکز داشته باشیم . به قصد یک گردهمایی بلند مدت بین برنامه‌نویسان جاوااسکریپت که با هم تبادل دانش و اطلاعات کنند گردهم آییم.
      بنده به عنوان عضو کوچکی از جامعه برنامه‌نویسان جاوااسکریپت ایران امیدوارم در کدرکانف امسال علاوه بر شبکه سازی، از اطلاعاتی که دوستان در این همایش در اختیارتان قرار می‌دهند استفاده کنید. در سایت همایش میتوانید سخنرانان و موضوع پنل همایش کدرکانف رو مشاهده کنید . علاقه‌مندان به حضور در این همایش می‌توانند با کد تخفیف wpparsi اقدام به ثبت نام در این گردهمایی کنند. سایت همایش :‌http://coderconf.org
      بلیط فروشی همایش :‌https://evand.com/events/coderconf4  

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

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


لینک به پست

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

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

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

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


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

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

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


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

  • مطالب مشابه

    • توسط AminHashemy
      سلام دوستان 
      من لیستی از آموزش های خوب وردپرس که به نظرم ارزش استفاده داره رو دور هم جمع کردم 
      شما هم اگر مورد بیشتری میشناسید اضافه کنید تا همه استفاده کنن:
       
      https://evand.com/events/wordpress-complete-giude
      مثلا شامل مباحث زیر :
      معرفی پیشخوان وردپرس آموزش ایجاد گالری محصولات افزونه های ووکامرس
      سرچ به صورت زنده (ایجکس سرچ) افزونه مقایسه کالا آموزش نحوه برخورد با کارفرما و درک نیاز های کارفرما  
      https://abzarwp.com/wordpress-tutorials/
      تعداد جلسات تا اکنون : 33 جلسه کل زمان دوره تا اکنون : 880 دقیقه سطح دوره از نظر آموزش : از ۰ تا ۱۰۰ مناسب برای افراد مبتدی تا حرفه ای  
      مورد بعدی آموزش وردپرس https://faradars.org/how-to-learn/wordpress
      یک مجموعه ای از آموزش های تکه تکه هست
       
      https://hamyarwp.com/webdesign/
      دوره جامع ۰ تا ۱۰۰ آموزش طراحی سایت و آموزش طراحی فروشگاه اینترنتی دارای پیش نیازهایی می باشد که قبل از ثبت نام می بایست به آنها توجه کنید تا در ادامه آموزش به مشکل نخورید.
          https://mihanwp.com/wordpress-learn/ دوره وردپرس رایگان میهن وردپرس    
      نظرتون رو بگید لطفا

    • توسط fateme.fathi
      در این مطلب 7 نکته در مورد عکاسی به شما خواهیم گفت. تکنیک Dutch Tilt چیست؟ چگونه به عکس عمق دهیم؟ چگونه مردم در حال عبور از عکس را حذف کنیم؟ همه این نکته ها و حقه های بیشتر را در ادامه خواهید خواند.


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

      مردم را از عکس حذف کنید
      آیا حرکت و تعدد مردم در مکان های معروف مزاحم عکاسی تان می شود؟ یک فیلتر کاهنده نور ND و یک سه پایه با خود همراه داشته باشید. حال می توانید با عکاسی با سرعت پایین مردم را به شکل هاله هایی رنگی نشان دهید و تقریبا آنها را از عکس محو کنید و همچنین نور خوبی هم در عکس داشته باشید.

      عمق عکس را افزایش دهید
      برای اینکه عمق میدان عکس را بیشتر کنید، از لنز واید استفاده کنید، دیافراگم را نزدیک به 22/f بگذارید و روی نقطه ای نزدیک به یک سوم جلوی کادر قرار دهید. اگر در عکستان افق وجود دارد روی نقطه Hyperfocal فوکوس کنید تا بیشترین محدوده فوکوس ممکن را داشت باشید.
       
      از لنز بسیار واید استفاده کنید
      وقتی می خواهید از یک معماری عکس بگیرید حواستان به آب باشد وقتی از لنز واید استفاده می کنید تصویر آن بنا در آب می تواند پیش زمینه بسیار زیبایی برای عکس باشد. اگر آب در حرکت است می توانید با عکاسی با سرعت شاتر پایین تصویر بهتری از بنا را در آب ایجاد کنید، البته در زمان استفاده از چنین تکنیکی باید از فیلتر ND استفاده کنید تا عکس بیش از حد روشن نشود.

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

      لنزهای Prime
      عصر، دوربین خود را در خانه نگذارید. یک لنز پرایم Prime یا ثابت روی دوربین خود ببندید. لنز 8.50 mmf، 1 لنز ایده آلی است. در تاریکی با بازترین دیافراگم ممکن عکس بگیرید. مقدار ISO را بالا انتخاب کنید تا نیازی به فلاش یا سه پایه هم نداشته باشید. با این کار بوکه های زیبایی هم ایجاد می شود. (بوکه، نورهایی در پس زمینه است که به شکل هاله هایی رنگی و دایره ای شکل در عکس ظاهر می شوند.)
       

       
       
    • توسط hamedsog
      سلام من درحال طراحی یک قالب سایت هستم  و بخش ایندکس رو بدون مشکل تمام کردم اما در طراحی بخش سینگل با یک مشکل مواجه شدم  در صفحه ی سینگل کاملا در پایین صفحه قرار نمیگیره و من با هر راهی نمیتونم بیارمش پایین لطفا راهنمایی کنید که باید چکار کنم؟
       

    • توسط drmajidghiasi
       آموزش افزونه WP PostViews
      مخزن وردپرس پر است از انواع افزونه‌های مختلف برای نمایش بازدید و آمار و حتی نمایش آمار به کاربران اما افزونه WP-PostViews
      چندین مزیت دارد که به آن‌ها اشاره می‌کنیم.
       
      امکانات ویژه افزونه WP-PostViews:
      سبکی خاص بدون فشار به سرور رابط کاربری آسان و… برای نمایش آمار برای خودمان نیاز به هیچ نوع تنظیم خاصی ندارد اما برای نمایش در بخش خاصی از قالب سایت نیاز به قرار دادن چندین کد در قالب سایت داریم که در این آموزش یعنی آموزش افزونه WP-PostViews ریزبه‌ریز افزونه را باهم بررسی خواهیم کرد.
       
      نصب افزونه WP-PostViews
      برای نصب این افزونه طبق مراحل  زیر اقدام کنید:
      یا از قسمت افزونه‌ها روی گزینه بارگذاری افزونه کلیک کنید و از لینک زیر افزونه را دانلود کنید و سپس در قسمت بارگذاری، افزونه را بارگذاری کنید. یا اینکه از قسمت کلیدواژه WP-PostViews را تایپ کنید و افزونه WP-PostViews را در مخزن وردپرس جستجو کنید و سپس نصب و فعال‌ کنید. پس از نصب و فعال‌سازی افزونه گزینه‌ای بانام PostViews در بخش تنظیمات وردپرس اضافه می‌شود برای انجام تنظیمات روی این گزینه کلیک کنید.
       

      تنظیمات افزونه WP PostViews بخش بازدید مطالب:
      Count Views From: در این بخش مشخص می‌کنیم که افزونه بازدید چه دسته از افرادی را حساب کند؛ میهمانان، کاربران ثبت‌نام‌شده یا هر دو. Exclude Bot Views: در نظر نگرفتن بازدید ربات‌ها. Views Template: در این بخش یک قالب کلی مشخص می‌کنیم برای نوع نمایش تعداد بازدید و می‌توانیم از متن‌های فارسی هم استفاده کنیم البته توجه داشته باشید که در حال پیش‌فرض ما کلمه views را می‌توانیم فارسی کنیم و دو کد کوتاهی که افزونه دارد نباید دست‌کاری کنیم فقط باید استفاده کنیم. توجه کنید: هر مطلب در پیشخوان وردپرس بخشی به اسم views اضافه‌شده است که درصورت تغییر کلمه بالا نام این کلمه به نامی که شما تغییر می‌دهید تغییر خواهد کرد. Most Viewed Template: ازنظر عملکرد این بخش هم مثل بخش بالا برای ساخت یک قالب کلی است اما در این بخش امکانات و کدهای کوتاه بیشتری را داریم که می‌توانیم برای مطالب پرطرفدار استفاده کنیم.  

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

      نمایش بازدید مطالب با کد کوتاه:
      در انتهایی هر مطلب می‌توانید با قرار دادن کد کوتاه افزونه میزان بازدید را نمایش دهید. می‌توانید از تعداد بازدید: ۱۵۸ یا تعداد بازدید: ۰ استفاده کنید. عدد ۵۴ در کد کوتاه شناسه مطلب است که هر مطلب شناسه خاص خودش را دارد که راحت‌ترین روش به دست آوردن شناسه طبق عکس زیر بردن موس بر روی اسم مطلب است.

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

      نمایش بازدید توسط کد:
      هر قالب شامل فایل‌های مختلفی است مثلاً فایل (Page.php) مخصوص نمایش صفحات سایت است و یا (Single.php) مخصوص نمایش ادامه مطالب است. در هرکدام از صفحاتی که قصد نمایش بازدید را دارید آن صفحه را بازکنید، مثلاً ما می‌خواهیم در بخش ادامه مطلب سایت تعداد بازدید را نمایش دهیم، برای همین فایل (Single.php) قالب را باز می‌کنیم که معمولاً در اکثر قالب‌ها در این مسیر یافت می‌شود.
      wp-content/themes/<Name Ghaleb>/single.php
      فایل را بازکنید و دنبال کدی مشابه کد زیر بگردید.
      ۱ <?php while (have_posts()) : the_post(); ?>
      حالا در پایین همین کد هرجایی که قصد نمایش تعداد بازدید را دارید کد زیر را قرار دهید.
      ۱ <?php if(function_exists('the_views')) { the_views(); } ?>
      برای اینکه تشخیص بدهیم کد را دقیقاً کجا باید قرار بدهیم نیاز به کمی دانش برنامه‌نویسی هست که بخشی را که بالای مقالات و یا پایین مقالات است را تشخیص بدهیم، به‌هرحال در فیلم آموزشی روشی را توضیح داده‌ایم که اگر کد نویسی این مورد را هم بلد نیستید به‌راحتی از همین چند خط شروع کنید.

      جمع‌بندی:
      یکی دیگر از روش‌های نمایش آمار بازدید از مطالب سایت استفاده از افزونه wp-postviews است، این افزونه بدون فشار به سرور آمار دقیقی از آمار نمایش صفحات سایت در اختیار شما قرار می‌دهد.
    • توسط replywp
      سلام خدمت شما دوست وردپرس عزیز من یک سایت بنام پاسخ وردپرس دارم تازه راه اندازی کردم درباره آموزش های وردپرس میزارم اما نمیدونم چرا السکا سایت هی میره در صورت که هروز هم مطالب میزارم لطفا راهینمایی فرمایید 
      آدرس : https://replywp.com/