رفتن به مطلب

پست های پیشنهاد شده

HTML5_Logo_512.png

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

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


لینک به ارسال

معرفی زبان 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 تست شده اند .

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


لینک به ارسال

نمایش ویدیو در صفحات 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 > : این تگ آدرس و نوع فایل صوتی که می خواهیم پخش کنیم را تعیین می کند .

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


لینک به ارسال

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

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

منبع: رنگو

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


لینک به ارسال

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 مرتبط می سازد .

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


لینک به ارسال

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

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


لینک به ارسال

عناصر اچ تی ام ا (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

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


لینک به ارسال

خواص اچ تی ام ال (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

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


لینک به ارسال

خوب یکی از مشکلاتی که کاربران تازه کار با 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

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


لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.


  • مطالب مشابه

    • توسط Black_Sky
      با سلام خدمت دوستان
      در این آموزش قصد دارم درباره زبان جاوا اسکریپت آموزش بدم
      این آموزش نوع آموزش ها در فضای مجازی بسیار وجود دارد اما قرار هست تفاوت های بسیاری وجود داشته باشد
      خب ابتدا :
      1-در این تاپیک اسپم ندهید و یا سوال نفرمایید /سوال و جواب در تاپیک جداگانه مطرح کنید تا بقیه دوستان استفاده کنند
      2-آموزش ها پیوسته میباشند و در آخر به صورت یک فایل PDF در اختیار دوستان قرار میگیرد
      3-یک سری پیش نیاز هم لازم هست همانند : HTML
      4-اگر هر نوع پیشنهاد و یا انتقادی هم وجود دارد با بنده در ارتباط باشید
      5-دوستانی هم که میخواهند در این تاپیک همکاری کنند اعلام نمایند
      --------------------
      موفق باشید
      ---------------------
    • توسط chetorir
      با سلام و وقت بخیر خدمت اساتید بزرگ. چند وقتی بود به دنبال غیر فعال کردن قرار گرفتن کدهای HTML در داخل سایتم بودم ولی از اونجایی که تمام وب سایتهای ایرانی همشون از روی هم کپی میکنن و اصلا نمیخونن چی به چیه نمیتونستم این مشکل رو برطرف کنم. 
      یه سری کد قرار میدادن که باید داخل فایل function.php قرار میدادم ولی همش با ارور که این دستور درست نیست مواجع میشدم و وقتی سیو میکردم سایت کاملا از دسترس خارج میشد. چندتا منبع خارجی رو بررسی کردم و متوجه شدم که باید یه سری تغییرات در داخل کد ها قرار بدیم. منم تقریبا چند روزی بود درگیرش بود تا تونستم مشکل رو برطرف کنم خواستم این کد رو قرار بدم تا شما عزیزان هم ازش استفاده کنید و شاید مشکل شما هم باشه.
      // remove HTML for commnet function wpb_comment_post( $incoming_comment ) { $incoming_comment['comment_content'] = htmlspecialchars($incoming_comment['comment_content']); $incoming_comment['comment_content'] = str_replace( "'", '&apos;', $incoming_comment['comment_content'] ); return( $incoming_comment ); } function wpb_comment_display( $comment_to_display ) { $comment_to_display = str_replace( '&apos;', "'", $comment_to_display ); return $comment_to_display; } add_filter( 'preprocess_comment', 'wpb_comment_post', '', 1); add_filter( 'comment_text', 'wpb_comment_display', '', 1); add_filter( 'comment_text_rss', 'wpb_comment_display', '', 1); add_filter( 'comment_excerpt', 'wpb_comment_display', '', 1); remove_filter( 'comment_text', 'make_clickable', 9 );  
      کد های بالا دقیقا از سایت هایی ایرانی برداشته شده بجز بخش str_replace که باید یه سری تغییر بدیم تا درست کار کنه. تصویر زیر هم نمونه کاریه که روی سایت خودم انجام دادم.
      اول از هم حالتی که قبل از قرار دادن کد ها بالا هست رو بهتون نشون میدم :

      خب حالا باید به بخش پوسته های سایتتون برید و قبل از هرکاری یک فایل پشتیبان از function.php بگیرید. فایل function.php را باز کنید و کدهایی که در بالا قرار گرفته شدن رو در انتهای این فاقل قرار بدید. حالا نمونه کار رو مشاهده کنید که با توجه به قرار گرفتن یک لینک در کامنت ، لینک اصلا کار نکرده و به شکل زیر دراومده.

       برای تست این موضوع هم میتونی سایت بنده رو بررسی کنید و اگه سوالی بود در خدمتتون هستم.
      موفق باشید
       
       
    • توسط pese
      سلام
      با افزونه کیوفرم quform در سایتم فرم زدم اطلاعات توسط کارفرمایان و کارجویان در سایتم توسط فرم ثبت می شود.
      حالا من پایگاه داده ام رکوردهاش خیلی زیاد شده برای پیدا کردن کارفرما باید فرمی درست کنم تا از طریق کد ملی و یا نام و یا تلفن بتوانم به مشخصات کامل آن کارفرما سریع دسترسی داشته باشم.
      افزونه کیو فرم آیا فقط اطلاعات را فقط ارسال می کنه به دیتابیس من ؟؟؟؟ آیا نمی شه فرمی را با همان نوشت که بتوانم اطلاعاتی را از پایگاه داده استخراج کنم اگر می شه لطفا راهنمایی کنید .
      عکس و توضیحات کامل باشه
    • توسط madish
      سلام وقت بخیر یه سوال داشتم اگر بتونین کمک کنید ممنون میشم
      ببینید من یه لیست باز شو شرطی میخام که بدون دکمه تایید یا ارسال باشه بع این صورت که کاربر وقتی لیست رو باز کرد روی هر گزینه کلیک کرد یه لینک براش باز شه
      ساده تر میتونم بگم
      لیست شرطی که بلافاصله از انتخاب (بدون دکمه تایید یا ارسال) یه لینک جدید باز شه
      مث صفحه اصلی سایت اچاره با یه تفاوت های ریز
      اینو چطور میتونم با وردپرس پیاده کنم ؟
      افزونه یا چیزی هست ؟
      ممنون میشم راهنمایی کنین
    • توسط hosseiny.mahdi
      از افرادی که به صورت تمام وقت تمایل به همکاری دارند دعوت میشود رزومه کاری خود را به شماره انتهای آگهی واتساپ نمایند تا پس از بررسی و مصاحبه با شرایط مناسب دعوت به همکاری شوند.
      ⁦⚙️⁩ موارد تخصصی مورد نیاز:
      ⚫طراح حرفه ای سایت
      ⚫متخصص وردپرس
      ⚫تسلط به پلاگین های وردپرس
      ⚫مسلط به امنیت وردپرس
      ⚫تسلط به css , html5,php , jQuery , JavaScript
      ⚫تسلط به سئو تکنیکال و محتوا
      ⚫تسلط به سفارشی سازی قالب ها و افزونه ها
      ⚫تسلط به اختصاصی سازی قالب وردپرس بصورت بهینه و استاندارد
      ⚫تسلط به AdWords , webmaster tools , analytics
      ⚫توانایی پیاده سازی سایت از روی طرح های psd
      ⚫تسلط به کنترل پنل های هاستینگ
      ⚫تسلط به طراحی ریسپانسیو
      ⚫تسلط به UI ,UX
      ⚫تسلط به عیب یابی و رفع مشکلات وردپرسی
      ⚫ مسلط به لینک سازی صحیح داخلی و خارجی
       
      ⁦⚙️⁩ موارد شخصیتی مورد نیاز :
      ⚫ تعهد کاری بالا و منظم
      ⚫ متخصص حرفه ای در کار خود
      ⚫ سابقه کار حداقل ۲ سال
      ⚫ نمونه کار قوی و متعدد
      ⚫توانایی تجزیه و تحلیل و حل مسئله
      ⚫ مستعد و خلاق
      ⚫ صفر تا صد مسلط به طراحی سایت
      ⚫ متعهد به زمان‌بندی
      ⚫ انجام وظایف محوله با نهایت دقت و ظرافت
      ⚫پایبند به اصول اخلاقی در تعاملات بین فردی و سازمانی
      ⚫ توانمندی کار تیمی
      ⚫ تمایل به ارتقاء و پیشرفت
      ⁦⚙️⁩ برخی ویژگی‌های مشمول:
      ⚫ حقوق ثابت عالی
      ⚫ ایاب و ذهاب
      ⚫ بیمه تامین اجتماعی
      ⚫ عیدی
      ⚫ پاداش
      ⚫ کارمزد مجزا برای هر پروژه
      ⚫ قابلیت ارتقاء جایگاه
      ⚫ نزدیک مترو
      ⚫از ۹ صبح تا ۱۸ و پنجشنبه ها تا ۱۴
      ⚫استخدام کارآموزان قوی(پس از یک ماه کارآموزی و رضایت)
       
×
×
  • اضافه کردن...