برای تماس با ما کلیک کنید

طراحی سایت

آموزش Html(بخش دهم)

آموزش html5 (بخش سوم)

تگ ruby

این تگ حاوی حاشیه نویسی ruby ​​است. حاشیه نویسی روبی برای نمایش تلفظ کاراکترها و نشان دادن اشعار شخصیت های شرق آسیا مانند چینی ها و ژاپنی ها استفاده می شود

تگ ruby با تگ rt برای ایجاد حاشیه نویسی یا راهنمای تلفظ برای کلمات و عبارات استفاده می شود. متن پایه باید در برچسب ruby قرار گیرد حاشیه نویسی، محصور در برچسب rt، به عنوان متن کوچکتر بالای متن پایه ظاهر می شود.

<ruby>
   漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
   字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

漢 (Kan) 字 (ji)

تگ wbr

این تگ (Word Break Opportunity) یک موقعیت را درون متن مشخص می کند که در آن مرورگر ممکن است به صورت اختیاری یک خط را شکست دهد. هنگامی که یک کلمه بیش از حد طولانی باشد یا شما می ترسید که مرورگر ادامه آن کلمه را در خط بعد نمایش دهد می توانید از تگ استفاده کنید.

<p>The XML<wbr>Http<wbr>Request object is the key to AJAX.</p>

تگ audio

از این تگ برای جاسازی محتوای صوتی در یک سند HTML بدون نیاز به هیچ پلاگین اضافی مانند فلش پلیر استفاده می شود.

<audio controls="controls">
   <source src="birds.mp3" type="audio/mpeg">
   <source src="birds.ogg" type="audio/ogg">
   Your browser does not support the HTML5 Audio element.
</audio>

خصوصیت های تگ audio :

خصوصیت مقدار توضیحات
controls controls مشخص می کند که کنترل های صوتی نمایش داده شوند. (مانند دکمه play ،pause و غیره)
autoplay autoplay مشخص می کند که فایل صوتی مورد نظر به محض آماده شدن اجرا شود.
muted muted مشخص می کند که خروجی صدا خاموش باشد.
loop loop مشخص می کند که فایل صوتی هر بار پس از اتمام، دوباره اجرا شود.
preload auto – metadata – none مشخص می کند که فایل صوتی در صورت نیاز چگونه بارگذاری شود.
src URL URL مربوط به فایل صوتی را مشخص می کند.

تگ video

این تگ برای جاسازی محتوای ویدئویی در یک سند HTML بدون نیاز به هیچ پلاگین دیگری مانند فلش پلیر استفاده می شود. پشتیبانی از تگ video در مرورگرهای مختلف متفاوت است. در حال حاضر، سه فرمت ویدیویی اصلی وجود دارد که برای عنصر ویدیو پشتیبانی می شود: MP4، Ogg و WebM

<video controls="controls">
   <source src="shuttle.mp4" type="video/mp4">
   <source src="shuttle.ogv" type="video/ogg">
   Your browser does not support the HTML5 Video element.
</video>

خصوصیت های تگ video :

خصوصیت مقدار توضیحات
width pixels پهنای پخش کننده ویدئو را تنظیم می کند.
height pixels ارتفاع پخش کننده ویدئو را تنظیم می کند.
controls controls برای افزودن کنترل های play ،pause و صدا بکار برده می شود.
autoplay autoplay در صورتی که وجود داشته باشد ویدئو به محض اینکه آماده شود خود به خود پخش می شود.
loop loop در صورت وجود پس از اتمام نمایش ویدئو پخش آن دوباره شروع می شود.
muted muted مشخص کننده قطع صدا به طور پیش فرض برای ویدئو است.
poster URL مشخص کننده تصویری است که به عنوان پیش نمایش ویدئو از آن استفاده می کند. مقدار آن یک url یا آدرس اینترنتی است.
preload auto – metadata – none در صورت وجود ویدئو در زمان لود صفحه، لود شده و آماده اجرا می شود. اگر autoplay وجود داشته باشد این خاصیت نادیده گرفته می شود.
 
src URL آدرس ویدئویی که باید پخش شود.

تگ source

این تگ برای تعیین منابع چند رسانه ای برای عناصر رسانه هایی، مانند video و audio استفاده می شود.

تگ canvas

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

<canvas id="myCanvas" width="300" height="200"></canvas>
<script type="text/javascript">
   window.onload = function(){
   var canvas = document.getElementById("myCanvas");
   var context = canvas.getContext("2d");
   context.moveTo(50, 150);
   context.lineTo(250, 50);
   context.stroke();
};
</script>

تگ embed

این تگ را می توان برای جاسازی برنامه های خارجی، معمولا محتوای چند رسانه ای مانند صوتی و یا ویدئویی به یک سند HTML استفاده کرد.

<embed src="blur.swf" width="400px" height="200px">

خصوصیت های تگ embed :

خصوصیت مقدار توضیحات
width
pixels
 مشخص کننده عرض موجود در تگ embed
height pixels مشخص کننده طول موجود در تگ embed
type media_type مشخص کننده media type موجود در تگ
src URL مشخص کننده آدرس فایل خارجی در تگ embed


تگ figure

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

<figure>
   <img src="designestan.png" alt="Designestan">
   <figcaption>Designestan Website</figcaption>
</figure>
designestan
Designestan Website

تگ figcaption

این تگ یک عنوان یا caption برای عنصر figure تعریف می کند.

<figure>
   <img src="discovery.jpg" alt="Space Shuttle">
   <figcaption>NASA - Space Shuttle Discovery</figcaption>
</figure>

نوشته‌های تازه

آموزش Html(بخش نهم)

آموزش html5 (بخش دوم)

تگ keygen

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

<form action="process-key.php" method="post">
   <label>Username: <input type="text" name="username"></label>
   <label>Encryption: <keygen name="key"></label>
   <input type="submit" value="Submit">
</form>

تگ meter

این تگ برای اندازه گیری عددی یا مقدار کسری در محدوده شناخته شده تعریف می شود. این تگ به عنوان مقیاس نیز شناخته می شود.

<p>Disk Usage: <meter value="0.8">80%</meter></p>
<p>Total Score: <meter value="6" min="0" max="10">6 out of 10</meter
</p>
<p>Pollution Level: <meter low="60" high="80" max="100" value="85">Very High</meter></p>

Disk Usage: ۸۰%

Total Score: ۶ out of 10

Pollution Level: Very High

خصوصیت های تگ meter :

خصوصیت مقدار توضیحات
form form-id یک یه چند فرم که تگ meter به آنها تعلق دارد را مشخص می کند.
low number رنجی که به عنوان یک مقدار کم مطرح شده است را مشخص می کند.
high number رنجی که به عنوان یک مقدارزیاد مطرح شده است را مشخص می کند.
min number رنجی برای مشخص کردن مقدار minimum
max number رنجی برای مشخص کردن مقدار maximum
value number این خصوصیت الزامی است. مقدار رایج اندازه گیری را مشخص می کند.
optimum number مشخص می کند که برای اندازه گیری چه مقداری بهینه است.

تگ bdi

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

<p dir="ltr">This arabic word <bdi>ARABIC_PLACEHOLDER</bdi> is automatically displayed right-to-left.</p>

This arabic word ARABIC_PLACEHOLDER is automatically displayed right-to-left.

تگ mark

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

<p>This is some <mark>highlighted</mark> text.</p>
<p>Here are <mark>some more highlighted</mark> text.</p>

This is some highlighted text.

Here are some more highlighted text.

تگ output

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

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
   <input type="range" id="a" value="50"> +
   <input type="number" id="b" value="100"> =
   <output name="result" for="a b"></output>
</form>
+ =

تگ progress

این تگ نشان دهنده تکمیل پیشرفت یک کار است. این تگ به طور معمول برای نشان دادن اینکه چه مقدار از یک کار تکمیل شده است، مانند بارگذاری چیزی در یک صفحه یا روند ثبت نام استفاده می شود. به طور معمول به عنوان یک نوار پیشرفت نمایش داده می شود و اغلب به عنوان یک درصد از ۰ تا ۱۰۰٪ مشخص می شود.

<progress value="22" max="100"></progress>

 

تگ rp

این تگ تعریف می کند که چه چیزی نشان داده شود، اگر مرورگر از حاشیه نویسی ruby پشتیبانی نکند. حاشیه نویسی روبی برای نشان دادن تلفظ کاراکترهای شرق آسیا، مانند کاراکترهای چینی یا ژاپنی استفاده می شود.

<ruby>
   漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
   字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

漢 (Kan) 字 (ji)

تگ rt

این تگ برای توضیح یا تلفظ صحیح حروف (برای تایپوگراف شرق آسیا) در حاشیه نویسی ruby را مشخص می کند. تگ rt همراه با تگ rp و تگ ruby بکار برده می شود، تگ ruby شامل یک یا چند کاراکتر است که نیاز به تفسیر یا تلفظ صحیح کارکترها دارد، و تگ rt برای دادن اطلاعات و اختیار به تگ rp که چه چیزی نشان داده شود، هنگامی که مرورگر از حاشیه نویسی ruby پشتیبانی نکند.

<ruby>
   漢 <rp>(</rp><rt>Kan</rt><rp>)</rp>
   字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

漢 (Kan) 字 (ji)

آموزش Html(بخش دهم)

نوشته‌های تازه

آموزش Html(بخش پنجم)

تگ گروه بندی Fieldset , Legend

تگ fieldset برای دسته بندی چندین کنترل و برای تعیین عنوان یک گروه از تگ Legend در ابتدای تگ Fieldset استفاده می گردد. تگ Fieldset برای گروه بندی در فرم ها بسیار کاربرد دارد.

<fieldset>
   <legend>عنوان گروه</legend>
   <p>متن آزمایشی شماره یک</p>
   <p>متن آزمایشی شماره دو</p>
</fieldset>
عنوان گروه

متن آزمایشی شماره یک

متن آزمایشی شماره دو

مهم ترین خصوصیت Legend خصوصیت Align یا تراز می باشد که محل قرار گیری عنوان را مشخص میکند.

مقدار هایی که این خصوصیت می پذیرد عبارتند از : Top , Bottom , Left , Right

<fieldset>
   <legend align="left">عنوان گروه</legend>
   <p>متن آزمایشی شماره یک</p>
   <p>متن آزمایشی شماره دو</p>
</fieldset>

تگ img

برای استفاده از تصاویر در برگه‌های وب شما باید از تگ img در HTML استفاده کنید که این تگ یک تگ Self Closing است(تگ پایانی برای بسته شدن ندارد).

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

این تگ دارای خاصیتی تحت عنوان src می باشد که این خاصیت در واقع مخفف کلمه source است و مقدار ورودی آن تعیین کننده عکسی است که می‌خواهید آن را نمایش دهید.

خاصیت بسیار مهم دیگری که در این تگ وجود دارد و باید حتما از آن استفاده شود، خاصیت alt است. alt مخفف کلمه alternative است و در هنگام بارگئاری نشدن تصویر به هر دلیلی متن داخل آن نمایش داده می شود.

بصورت پیش فرض تگ img نمایش عکس ها را به اندازه ی اصلی و پیش فرض عکس و بدون خط حاشیه نمایش میدهد. در صورتی که بخواهید تصویر را در سایز دلخواه و با خط حاشیه نمایش دهید از خصوصیات width , height , border استفاده می کنیم.

<img src="UploadFile/images/pic1.jpg" alt="عنوان عکس"  width="100"    height="100" border="2" />

تگ لینک (a)

برای ایجاد لینک باید از تگ a استفاده کرد، a ابتدای کلمه anchor به معنای لنگر است. تگ لینک برای ارتباط بین صفحات وب و یا ایجاد لنگر در داخل صفحه، در سایت به کار میرود.

مهمترین خصوصیات این تگ به شرح زیر می باشد :

  • href : مشخص می کند در صورت کلیک شدن بر روی لینک چه صفحه ای باز شود
  • title : برای ایجاد توضیحی که با بردن موس روی لینک به نمایش در می آید و برای آن به کار می رود که کاربر قبل از کلیک بداند به کجا هدایت خواهد شد
  • target : که طریقه ی باز شدن لینک در مرورگر را مشخص می کند و در آن مشخص می کنیم که صفحه ای که به آن لینک کردیم می خواهیم که در همین صفحه باز شود(self_) یا در تب جدیدی یا پنجره جدیدی در مرورگر(blank_) باز شود.
  •  
<a href="http://www.google.com" target="_blank" title="موتور جستجوی گوگل"></a>

سیستم رنگ‌بندی در HTML

در HTML راه‌های مختلفی برای استفاده از رنگ‌ها وجود دارد :

  1. نام رنگ‌ها
  2. استفاده از سیستم Hexadecimal
  3. استفاده از RGB
  4.  

نام رنگ‌ها

استفاده از نام رنگ ها یک روش ساده اما محدود برای سیستم رنگ‌بندی است. به این صورت که اگر شما به رنگ آبی نیاز داشته باشید کافی‌ است نام آن را بنویسید(blue).

 <h1 style="color:blue;">Simple Text</h1>

در این مدل ما دسترسی به طیف های مختلف هر رنگ نداریم و میزان غلظت آن ها را نمی توانیم کم یا زیاد کنیم.

استفاده از سیستم Hexadecimal

در این مدل، اعداد به ما این قابلیت را می‌دهد تا کمی بیشتر از ۶ میلیون رنگ را استفاده کنیم. استفاده از این سیستم بسیار آسان است. در یک سیستم ۱۶تایی از اعداد ما با اعداد ۰ تا ۹ و a تا f سر و کار داریم. ما در این مدل قابلیت ترکیب رنگی سه رنگ اصلی یعنی Red Green Blue یا قرمز سبز آبی را داریم.

برای مقدار دهی به میزان هرکدام از این رنگ‌ها ما می‌توانیم از اعداد سیستم ۱۶ تایی استفاده بکنیم. مقدار f یعنی حداکثر میزان از آن رنگ و مقدار ۰ یعنی خالی از آن رنگ در ترکیب رنگ بندی مورد نظر ما است.

 <h1 style="color:#5547ff;">Simple Text</h1>

در سیستم رنگ‌دهی هگزادسیمال ۶ عدد وجود دارد که هر دو عدد از سمت چپ نمایانگر یک رنگ از سه رنگ اصلی(قرمز ، سبز ، آبی) هستند. از سمت چپ به راست، دو عدد اول قرمز، دو عدد میانی سبز و دو عدد آخر آبی هستند. وقتی که مقدار دو عدد اول ۰۰ باشد به این معناست که رنگ قرمز وجود ندارد، برای دو عدد میانی نیز به همین صورت، اما وقتی دو عدد آخر برابر ff (حالت حداکثر) باشد به این معنی است که رنگ برابر با آبی می باشد.

استفاده از RGB

در سیستم رنگ‌بندی RGB دقیقا همان فلسفه مورد قبلی پیاده‌سازی می‌شود، با این تفاوت که سیستم عدد گذاری در این حالت متفاوت است. در این سیستم ما از اعداد بین ۰ تا ۲۵۵ استفاده می‌کنیم.

 <h1 style="color:rgb(13,23,255);">Simple Text</h1>

در برخی سیستم‌های رنگ‌بندی ما می‌توانیم یک گزینه یا پارامتر دیگر را نیز تنظیم کنید. این پارامتر میزان شفافیت یا Opaciy است. این مقدار عددی بین ۰ تا ۱ است. این مقدار به صورت پیشفرض برابر با ۱ است اما می‌توانید آن را تا حدی کاهش دهید که کاملا المان شما محو شود. برای مثال اگر این مقدار برابر ۰ باشد هیچ چیزی در صفحه مشاهده نمی‌شود. برای اینکار نیاز است که حرف a را به انتهای rgb اضافه کنید و همچنین یک مقدار چهارم در پرانتز قرار دهید.

  <h1 style="color:rgba(13,23,255,0.5);">Simple Text</h1>
آموزش Html(بخش ششم)

نوشته‌های تازه

با کارشناسان ما تماس بگیرید 09125959757