رفتن به مطلب

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

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 به کمک این عبارت می توانید عکسی را به عنوان موضوعی از کلیپ قبل از پخش ویدیو نمایش دهید.

منبع: رنگو

لینک به ارسال
  • 5 ماه بعد...

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

لینک به ارسال
  • 6 ماه بعد...

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

لینک به ارسال
  • 4 هفته بعد...

عناصر اچ تی ام ا (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
لینک به ارسال
  • 3 هفته بعد...

خوب یکی از مشکلاتی که کاربران تازه کار با 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
لینک به ارسال
  • Morteza unpinned this موضوع

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

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

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

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

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

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

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

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

×
×
  • اضافه کردن...