رفتن به مطلب
انجمن آی ترفند

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

vip-itarfand.PNG

در این قسمت از انجمن زبان برنامه نویسی html آموزش داده می شود.

line.png

برای تست آنلاین کد ها می توانید از سایت زیر استفاده کنید:

ادیتور آی ترفند

line.png

از پرسیدن سوال در این تاپیک خودداری کنید.

 

 

 

 

 

 

 

 

 

 

 

 

 

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


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

قسمت 1 ) شروع به کار

line.png

نرم افزار مورد استفاده در این آموزش Visual Studio 2015 می باشد اما شما می توانید کدهای خود را در note pad بنویسید و به صورت name.html ذخیره و اجرا کنید تا خروجی آن را ببینید.

ابتدا با کلید های ctrl+alt+n صفحه website را باز کنید و یا از قسمت File بخش New گزینه Web Site را انتخاب کنید.

در صفحه باز شده گزینه ASP.Net Empty Web Site را انتخاب کنید.

itarfand-forum (48)-min.png

اکنون از قسمت Solution Explorer بر روی پروژه خود راست کلیک کنید و مانند عکس زیر Add New Item را انتخاب کنید.

itarfand-forum (49)-min.png

در صفحه باز شده گزینه HTML Page را انتخاب کنید.

itarfand-forum (50)-min.png

اکنون پروژه شما ایجاد شده است.

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


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

قسمت 2 ) مقدمه

line.png

فایل های html چگونه خوانده می شوند؟

کدهای html توسط مرورگرهای اینترنت تفسیر می شوند.

شکل کلی برنامه

<!DOCTYPE html>
<html>
<head>
  
    <title></title>
	<meta charset="utf-8" />
  
</head>
<body>

</body>
</html>

در کد بالا کدهای قرار گرفته بین <head> و <head/> توضیحات راجع به صفحه می باشد و کدهای بین <body> و <body/> به کاربر نمایش داده می شود.

تگ چیست؟

به دستورات در این زبان تگ می گویند مانند <html> در کد بالا.

ویژگی تگ ها

هر تگ می تواند دارای یک یا چند ویژگی (Attribute) اختصاصی باشد مانند:

<h1 Attribiute="Value">
  
</h1>

نکته : زبان html به حروف بزرگ و کوچک تگ ها حساس نمی باشد و p برای P می باش.

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

<!--This is a comment-->

<!-- <h6> code </h6> -->

در زبان html می تواد هم از " و ' استفاده کرد و این دو تفاوتی با هم ندارند.

<p align='right'>
</p>

<p align="right">
</p>

 

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


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

قسمت 3) تگ های heading

line.png

لیست تگ های heading

<h1> , <h2> , <h3> , <h4> , <h5> , <h6>

این تگ ها برای ایجاد سر تیتر می باشند که بزرگترین آن ها h1 و کوچکترین آن ها h6 می باشد. این تگ ها متن خود را bold می کنند و به قبل و بعد آن فاصله اضافه می کنند.

مثال:

<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>

ویژگی ها

با استفاده از کد زیر می توان این تگ را راست چین کرد.

<h1 align="right">
  hello
</h1>

 

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


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

قسمت 4) تگ p

line.png

این تگ فقط متن شما را Block Level می کند و تغییر دیگری در آن ایجاد نمی کند.

مثال:

<p>
  itarfand forum
</p>

<p align="center">
  لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
</p>

<p align="justify">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</p>

ویژگی کد دوم متن را وسط چین می کند و کد سوم انتها و ابتدا متن ها را در یک خط قرار می دهد.

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


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

قسمت 5) تگ body

line.png

در این تگ قسمت هایی که به کاربر نمایش داده می شود قرار می گیریند.

ویژگی تگ

<!DOCTYPE html>
<html>
<head>  
    <title></title>
	<meta charset="utf-8" />
</head>
<body dir="rtl" text="white" bgcolor="back">
  <p>
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
  </p>
</body>
</html>

dir : استفاده از rtl در این کد باعث راست چین شدن کل صفحه می شود.

text : این ویژگی رنگ متن کل صفحه را تغییر می دهد.

bgcolor : این کد رنگ پس زمینه صفحه را تغییر می دهد.

 

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


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

قسمت 6) تگ font

line.png

این تگ برای تغییر فونت متن می باشد.

ویژگی تگ

<p>
  <font face="tahoma" size="4" color="green">
    لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است و برای شرایط فعلی تکنولوژی مورد نیاز و کاربردهای متنوع با هدف بهبود ابزارهای کاربردی می باشد. کتابهای زیادی در شصت و سه درصد گذشته، حال و آینده شناخت فراوان جامعه و متخصصان را می طلبد تا با نرم افزارها شناخت بیشتری را برای طراحان رایانه ای علی الخصوص طراحان خلاقی و فرهنگ پیشرو در زبان فارسی ایجاد کرد. در این صورت می توان امید داشت که تمام و دشواری موجود در ارائه راهکارها و شرایط سخت تایپ به پایان رسد وزمان مورد نیاز شامل حروفچینی دستاوردهای اصلی و جوابگوی سوالات پیوسته اهل دنیای موجود طراحی اساسا مورد استفاده قرار گیرد.
  </font>
</p>

face : نوع فونت متن را تعیین می کند.

size : اندازه متن را تعیین می کند.

color : رنگ متن را تعیین می کند.

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


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

قسمت 7) تگ های قاب بندی

line.png

<b> : متن را بولد می کند

<big> : متن را بزرگ می کند

<em> : متن را مورب می کند

<i> : متن را مورب می کند

<small> : متن را کوچک می کند

<strong> : متن را بولد می کند

<sub> : متن را زیرنویس دار می کند

<sup> : متن را بالانویس دار  می کند

مثال:

<p>
  <strong>
    itarfand  
  </strong>
  <i>
    forum
  </i>
</p>

 

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


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

قسمت 8) تگ hr

line.png

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

<hr />

<hr color="red" size="5" width="400px" />

<hr width="60%" />

color : رنگ خط

size : اندازه خط بر حسب px

width : عرض خط بر حسب px  و یا درصد

 

قسمت 8.1) تگ br

این تگ عمل enter را انجام می دهد و متن به خط بعد می رود.

<p>
  test forum
  <br />
  test1
</p>

این تگ نیز از نوع empty می باشد.

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


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

قسمت 9 ) لیست ها

line.png

لیست ها به سه صورت مرتب ، غیر مرتب و توضیحی می باشند.

لیست مرتب

<ol>
  <li>تست</li>
  <li>1تست</li>
  <li>2تست</li>
  <li>3تست</li>
  <li>4تست</li>
</ol>

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

<ol type="A">
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ol>

<ol type="a">
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ol>

<ol type="1">
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ol>

<ol type="i">
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ol>

<ol type="I">
  <li>test</li>
  <li>test</li>
  <li>test</li>
  <li>test</li>
</ol>

لیست نامرتب

<ul>
  <li>تست</li>
  <li>تست</li>
  <li>تست</li>
  <li>تست</li>
</ul>

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

<ul type="circle">
  <li>تست</li>
  <li>تست</li>
  <li>تست</li>
  <li>تست</li>
</ul>

<ul type="disc">
  <li>تست</li>
  <li>تست</li>
  <li>تست</li>
  <li>تست</li>
</ul>

<ul type="square">
  <li>تست</li>
  <li>تست</li>
  <li>تست</li>
  <li>تست</li>
</ul>

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

<ol>
  <li>test</li>
  <li>
    <ul>
      <li>test1</li>
    </ul>
  <li>test2</li>
</ol>

لیست توضیحی

<dl>
  <dt>test</dt>
  <dd>test forum itarfand</dd>
  <dt>tset1</dt>
</dl>

 

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


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

قسمت 10) لینک دهی

line.png

لینک دهی در HTML به دو صورت نسبی و مطلق می باشد.

آدرس دهی نسبی

در این نوع آدرس دهی شروع آدرس از فولد ریشه سایت می باشد.

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

آدرس دهی مطلق

در این نوع آدرس دهی از آدرس مستقیم مقصد مانند آی ترفند | ترفند | موبايل | نرم افزار | رايانه | آموزش استفاده می کنیم.

لینک دهی

برای این کار از کد زیر استفاده می کنیم.

<a href="link">
  click
</a>

مثال:

<a href="https://forum.itarfand.com/">
  itarfand
</a>

<a href="index.html">
  نسبی
</a>

<a href="../index.html">
  نسبی1
</a>

لینک دهی داخل صفحه

<a href="#link1">1سوال</a>
<a href="#link2">2سوال</a>
<a href="#link3">3سوال</a>

<br><br><br><br><br><br>

<a name="link1">1پاسخ</a>

<br><br><br><br>

<a name="link2">2پاسخ</a>

<br><br><br><br>

<a name="link3">3پاسخ</a>

آدرس دهی به ایمیل

<a href="mailto:itarfand@mail.com">my mail</a>

 

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


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

قسمت 11) تصویر دهی

line.png

عکس در html به صورت زیر استفاده می شود.

<img src="https://forum.itarfand.com/uploads/monthly_2017_09/logo-site.png.eb013882ef4498dc286485fcd60d0373.png" width="500px" height="400" alt="itarfand" title="itarfand forum" hspace="20" vspace="20" />

src : آدرس عکس را طبق قسمت 10 در آن قرار می گیرید.

اگر فرمت عکس png و یا gif باشد و پس زمینه نداشته باشد ، رنگ پس زمینه صفحه برای عکس نمایش داده می شود اما اگر jpg باشد پس زمینه آن سفید نمایش داده می شود.

width : عرض عکس را مشخص می کند.

height : ارتفاع عکس را مشخص می کند.

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

alt : عنوان عکس را مشخص می کند. در صورت خراب بودن آدرس عکس این متن نمایش داده می شود. همچنین موتورهای جستجو این عنوان را جستجو می کنند.

title : با استفاده از این عنوان با رفتن موس بر روی عکس متن مشخص شده نمایش داده می شود

hspace و vsapce : این دو فاصله را از عکس بالا و کناری مشخص می کند.

قرار دادن عکس ها در وسط

<p align="center">
  <img src="img.png" />
</p>

 

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


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

قسمت 12) جدول

line.png

برای ایجاد جدول در زبان html از کد زیر استفاده می شود.

<table>
  <tr>
    <td>test1</td>
    <td>test2</td>
  </tr>
</table>

حتما باید به ازای tr از td استفاده کرد.

اگر سطر اول n ستون داشته باشد باید سطر دوم نیز n ستون داشته باشد.

به طور پیش فرض خطوط جدول نمایش داده نمی شوند. برای نمایش خطوط از کد زیر استفاده می شود.

<table border="1">
  <tr>
    <td>test1</td>
    <td>test2</td>
  </tr>
</table>

کنترل اندازه جدول

<table border="1" width="400">
  <tr>
    <td>test1</td>
    <td>test2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td width="300">test1</td>
    <td>test2</td>
  </tr>
</table>

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

دیگر ویژگی سطرها

<table border="1" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="center">test1</td>
    <td align="right">test2</td>
  </tr>
  <tr>
    <td bgcolor="red">test3</td>
  </tr>
</table>

cellspacing و cellpadding فاصله پیش فرض هر خانه با خانه دیگر را تغییر می دهند.

<table border="1">
  <tr>
    <td height="40">test1</td>
    <td>test2</td>
  </tr>
  <tr>
    <td>test3</td>
  </tr>
</table>

در صورت ارتفاع دادن به یک ستون از سطر ، ارتفاع دیگر ستون ها در آن سطر نیز تغییر می کند.

<table border="1">
  <tr>
    <td width="80" height="60" align="center" valign="top">test1</td>
    <td width="800" align="right" valign="bottom">test2</td>
  </tr>
  <tr>
    <td width="100" height="90"  align="left" >test3</td>
    <td width="120"  align="left" >test4</td>
  </tr>
</table>

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

استفاده از ستون دلخواه

<table border="1">
  <tr>
    <td colspan="2">test1</td>
  </tr>
  <tr>
    <td>test2</td>
    <td>test3</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td colspan="3">test1</td>
  </tr>
  <tr>
    <td>test2</td>
    <td>test3</td>
    <td>test4</td>
  </tr>
</table>

استفاده از سطر دلخواه

<table border="1">
  <tr>
    <td colspan="2">1</td>
  </tr>
  <tr>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
    <td>6</td>
    <td rowspan="2">7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

برای این کار حتما باید عدد پایینی (در این مثال 10) پاک شود و rowspan به عدد بالایی آن (در این مثال 7) داده شود.

استفاده از جدول در داخل جدول

<table border="1" align="center" width="900">
  <tr>
    <td>test1</td>
  </tr>
  <tr>
    <td height="700">
      <table border="1" width="100%">
        <tr>
          <td>test2</td>
          <td>test3</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>test3</td>
  </tr>
</table>

<table border="1" align="center" width="900">
  <tr>
    <td>test1</td>
  </tr>
  <tr>
    <td>
      <table border="1" width="100%">
        <tr>
          <td height="700" width="200">test2</td>
          <td>test3</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr>
    <td>test3</td>
  </tr>
</table>

 

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


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

قسمت 13) فرم ها

line.png

مثال:

<form action"" autocomplete="on">
  name:
  <input type="text" maxlength="8" />
  <br />
  phone:
  <input type="text" size="4" />
  <br />
  <input type="number" step="2" />
  <br />
  password:
  <input type="password" required/>
  <br />
  <input type="url" />
  <br />
  <input type="password" autofocus/>
  <br />
  <input type="email" />
  <br />
  <input type="text" name="firstname" value="ali" autocomplete="off" />
  <br />
  <input type="text" name="last" value ="hossein" readonly>
  <br />
  <input type="text" placeholder="نام خود را وارد کنید" />
  <br />
  <input type="submit" value="ok">
  <input type="submit" disabled>
  <input type="reset" value="reset form">
</form>

type : نوع ورودی را مشخص می کند که می تواند رمز عبور و ایمیل ، متن و ... باشد.

size : اندازه قسمت ورودری را مشخص می کند.

maxlength : حداکثر تعداد حروف ورودری را مشخص می کند.

autocomplete : قابلیت خودکار کامل شدن توسط مرورگر را تعیین می کند.

value : مقدار نوشته شده در داخل بلاک ورود را مشخص می کند.

name : یک نام برای فیلد ورود قرار می دهد.

number : با انتخاب این عنوان در type کاربر حتما باید عدد وارد کند.

step : این کد در تگ number تعداد زیاد شدن اعداد را مشخص می کند.

url : با انتخاب این عنوان در type کاربر حتما باید آدرس اینترنتی وارد کند.

autofocus : فیلد پیش فرض انتخاب شده در لود صفحه.

readonly : فقط می توان متن را مشاهده کرد و نمی توان تغییر داد.

placeholder : این کد یک متن راهنما داخل فیلد نمایش می دهد.

required : باعث می شود که ورود آیتم مورد نظر الزامی باشد.

disabled : باعث غیر فعال شدن انتخاب می شود.

فیلد ورود متن

<form>
  <br />
  address:
  <textarea rows="10" cols="50"></textarea>
</form>

rows : ارتفاع را مشخص می کند.

cols : عرض را مشخص می کند.

دیگر نوع ورودی ها

<form>
  جنسیت:
  <input type="radio" name="gender"> Man
  <input type="radio" name="gender"> Woman
</form>

 با انتخاب یک name می توان جلوی انتخاب هر دو گزینه به صورت هم زمان را گرفت.

گزینه checked باعث پیش فرض انتخاب شدن گزینه می شود.

<form>
  شهر:
  <select>
    <option>tehran</option>
    <option>karaj</option>
    <option selected>zanjan</option>
  </select>
  
  <select multiple>
    <option>tehran</option>
    <option>karaj</option>
    <option selected>zanjan</option>
  </select>
  
  <select>
<optgroup label="first">
    <option>tehran</option>
    <option>karaj</option>
</optgroup>

<optgroup label="secont">
    <option>gorgan</option>
    <option>shiraz</option>
</optgroup>
  </select>
</form>

تگ select یک لیست باز شونده را ایجاد می کند.

کد selected باعث پیش فرض انتخاب شدن گزینه می شود.

کد multiple باعث می شود که کاربر بتواند چند گزینه را انتخاب کند.

<form>
  انتخاب:
  <input type="checkbox" checked>بازی
  <input type="checkbox">موبایل
  <input type="checkbox">برنامه نویسی
</form>

گزینه checked باعث پیش فرض انتخاب شدن گزینه می شود.

<form>
  آپلود:
  <input type="file" />
</form>

توسط کد بالا می توان یک فایل را آپلود کرد.

<form>
  <input type="hidden" value="" />
</form>

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

<fieldset>
  <legend>اعضا</legend>
  <form>
   شهر:
   <select>
    <option>tehran</option>
    <option>karaj</option>
   </select>
  </form>
</fieldset>

کد fieldset یک border دور فرم می اندازد.

جستجو

    <form>
        <input type="search" />          
    </form>

جستجو در لیست

    <form>
        <input type="text" list="mylist" />
        <datalist id="mylist">
            <option value="ali"></option>
            <option value="bill"></option>
            <option value="sasi"></option>
            <option value="mohsen"></option>
            <option value="mohammad"></option>
        </datalist>   
    </form>

Range

    <form>
        <input type="range" min="2" max="100" value="15" />
    </form>

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

min : حداقل مقدار.

max : حداکثر مقدار

value : مقدار اولیه.

Color

    <form>
        <input type="color" />
    </form>

این تگ برای انتخاب رنگ می باشد.

تاریخ و زمان

<form>
        <input type="date" />
        <input type="month" />
        <input type="time" />
        <input type="datetime-local" />
</form>

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

رمز گذاری ارسال اطلاعات

    <form>
        <label>
            Hash: <keygen />
        </label>
    </form>

توسط این کد کاربر می تواند نوع رمز گذاری اطلاعات را انتخاب کند.

لیست کلمات قابل قبول در input type

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

لیست کلمات قابل قبول در ویژگی های input

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

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


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

قسمت 14 ) تگ video و audio

line.png

تگ audio برای نمایش یک فایل ویدئو بدون نیاز به پلیر و افزونه می باشد.

مثال:

    <video width="1000" preload="none" poster="https://forum.itarfand.com/uploads/monthly_2017_09/logo-site.png.eb013882ef4498dc286485fcd60d0373.png" controls loop autoplay>
        <source src="https://hw13.asset.aparat.com/aparat-video/a79042e39c45d6aa9b14cc2952b71d6e7515963-720p__57081.mp4" type="video/mp4" />
        <source src="/file/myVideo.ogg" type="video/ogg" />
        مرورگر شما از این تگ پشتیبانی نمی کند
    </video>

width : اندازه صفحه نمایش فیلم

preload : لود شدن فیلم و ددیگر فیلم های صفحه را مشخص می کند. 

  • none : در زمان کلیک بر روی دکمه پخش فیلم لود می شود.
  • auto : تمام فیلم های صفحه لود می شوند.
  • metadata : فقط عنوان و اطلاعات فیلم لود می شود.

poster : عکس پیش زمینه فیلم قبل از نمایش آن را مشخص می کند.

controls : بخش کنترل فیلم را نمایش می دهد.

loop : در صورت پایان یافتن فیلم ، فیلم دوباره از اول شروع می شود.

autoplay : فیلم به صورت خودکار شروع به پخش می کند.

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

type : فرمت فیلم را مشخص می کند.

 

audio

این تگ برای برای پخش صوت می باشد.

    <audio controls>
        <source src="file/music.mp3" type="audio/mp3" />
        <source src="file/music.mp3" type="audio/ogg" />
        فایل پخش نمی شود.
    </audio>

تمام خصوصیت های تگ ویدئو برای این تگ نیز عمل می کند.

 

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


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

قسمت 15 ) تگ svg

line.png

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

مثال:

    <svg width="300" height="300">
        <circle cx="150" cy="150" r="100" stroke-width="5" fill="#3D8EB9"></circle>
        <rect width="200" height="200" style="fill:#FEC606; stroke:#CF000F" rx="30" ry="40" stroke-width="10"></rect>
    </svg>

circle : برای کشیدن دایره

cx : موقعیت x شکل

cy : موقعیت y شکل

r : شعاع

stroke-width : اندازه هاشیه تصویر

fill : رنگ شکل

rect : برای کشیدن مستطیل

rx : مقدار گرد شدن x

ry : مقدار گرد شدن y

style : قرار دادن استایل با css

 

طراحی آنلاین

برای طراحی آنلاین اشکال خود می توانید از سایت زیر استفاده کنید و با گزینه save as در سربرگ file آن را با فرمت svg ذخیره کنید.

http://editor.method.ac/

نمونه کد:

<svg width="580" height="400" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 <g>
  <title>background</title>
  <rect fill="#fff" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
  <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
   <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%"/>
  </g>
 </g>
 <g>
  <title>Layer 1</title>
  <path id="svg_1" d="m447.712519,163.394699l-34.688123,1.634747l-9.280563,39.829975l-30.687658,-9.629408l-44.504411,30.562896l-16.944115,-17.836288l-142.715137,76.275879l79.295746,-85.063838l-65.865511,-11.058726l20.610455,-16.453676l-45.220685,-30.198727l32.498141,-7.30314l-10.218603,-39.750821l34.067876,4.166088l28.027801,-36.682329l24.821326,14.312618l57.375569,-21.96745l7.694166,19.914988l68.507026,-0.278068l-11.875841,19.194493l57.887952,21.499604l-27.675325,12.379874l28.889913,36.451308z" stroke-width="1.5" stroke="#000" fill="#2f6d6d"/>
  <text stroke="#000" transform="matrix(9.018734931945799,0,0,7.0269060134887695,-2024.7305703163145,-844.3302892446518) " xml:space="preserve" text-anchor="start" font-family="Helvetica, Arial, sans-serif" font-size="4" id="svg_2" y="141.549777" x="252.61088" stroke-width="0" fill="#ffff00">itarfand</text>
  <path id="svg_3" d="m55.06018,376.413722c-6.257961,-4.756873 9.802061,-4.884201 7.27896,-10.157286c4.6131,-6.98754 16.60764,-11.217072 18.374026,-19.157347c-4.864737,-2.206831 -7.662607,-7.543958 1.618492,-6.910331c6.806191,-3.335949 5.955559,-10.162556 8.002398,-15.172301c1.917408,-8.085837 2.351618,-16.269836 3.175191,-24.422106c-7.875182,-0.393876 -15.945166,-0.119517 -23.618545,-1.433481c0.220722,-5.421598 15.834243,-3.341319 16.544872,-8.457233c11.352495,-0.133581 0.62881,-11.174602 -3.994349,-13.808808c-5.917597,-4.443746 -9.859021,-11.458663 -5.360391,-16.946618c6.434509,-2.783792 20.983461,-1.089276 20.325849,-8.405031c-4.376006,-1.624231 -9.932004,-0.592781 -14.836663,-0.880023c0.301627,-3.411342 0.603246,-6.822679 0.904873,-10.234021c6.486341,-0.324871 12.972698,-0.649768 19.45904,-0.97467c-3.292378,-2.228101 -8.21979,-3.867859 -9.452814,-7.019622c4.194014,-4.489251 14.301884,-4.092965 21.543044,-4.050521c7.041216,-0.316243 19.879117,2.741968 10.281506,7.667903c-0.777897,1.20968 -8.348594,4.21748 -3.670008,3.889572c5.99037,0 11.980725,0 17.971079,0c-0.017216,3.334895 -0.154895,6.70293 1.047903,9.966526c-4.572635,2.217395 -19.400462,-1.894102 -15.178506,4.947649c4.753892,2.860472 12.034656,2.784982 18.064321,4.044747c3.517003,0.228793 6.314781,0.825557 5.047379,3.502449c0.66105,4.970074 -1.264706,9.969682 -6.511263,13.742476c-3.713934,3.936807 -12.055373,8.865238 -9.586033,13.422133c4.671895,-0.495189 8.424853,1.502248 4.693323,3.748528c3.829418,1.846242 17.314258,1.423446 14.397666,6.045578c-6.832103,1.472617 -14.171508,0.859106 -21.259725,1.009379c1.887321,12.616792 4.49688,25.234779 8.857282,37.589889c2.547728,2.74158 12.668268,4.84868 4.362462,8.422816c-3.099722,6.655967 6.800956,11.639696 13.019002,15.911657c6.836688,3.334118 3.519667,10.04265 13.191569,11.112582c7.617047,4.804562 -10.457659,4.676648 -15.098135,4.687127c-30.720493,0.215692 -61.474124,0.517458 -92.182597,-0.127132c-2.513854,-0.206585 -5.619648,-0.159324 -7.411203,-1.554486l-0.000008,0.000005z" stroke-opacity="null" stroke-width="0" stroke="#000" fill="#2b10c9"/>
 </g>
</svg>

 

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


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

قسمت 16 ) دیگر تگ های html

line.png

کاراکترهای خاص

برای تایپ کاراکترهای خاص مانند @ و یا # در html می توان از کدهای خاص آن استفاده کرد.

&euro;

&#169;

لیست این کاراکترها را می توانید در سایت زیر ببینید.

http://www.tutorialspark.com/html5/HTML5_ASCII_Characters.php

تگ iframes

این تگ برای نمایش یک سایت دیگر در سایت بدون باز کردن آن می باشد.

<iframe src="iframe.html" height="300" width="300" name="myiframe"></iframe>

<p><a href="https://itarfand.com" target="myiframe">itarfand</a></p>

در صورت هم نام بودن myiframe مانند کد بالا در صورت کلیک بر روی لینک ، سایت مورد نظر به صورت آی فریم باز می شود.

پشتیانی از مرورگر اینترنت اکسپلولر

برای درست نمایش داده شدن سایت در مرورگر می توانید کد زیر را در تگ head قرار بدهید.

<!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->

کد <!doctype html>

این کد برای دانستن ورژن html شما توسط مرورگر می باشد و به صورت زیر استفاده می شود.

<!DOCTYPE html>
<html>
	<head>
	</head>

	<body>
	</body>
</html>

تگ span

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

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. <span style="color:blue">blue</span> eyes.</p>

 

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


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

قسمت 17 ) رنگ ها

line.png

برای استفاده از رنگ در وب مدهای محتلفی وجود دارد که مهمترین آن ها مدهای CMYK و RGB و HEX می باشد.

CMYK یا : Cyan Magenta Yellow Black 

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

اطلاعات بیشتر :

https://www.w3schools.com/colors/colors_cmyk.asp

CMYK color model - Wikipedia

کد رنگ ها در این حالت:

http://www.december.com/html/spec/colorcmyk.html

به طور مثال برای نمایش رنگ سیاه باید هر چهار رنگ 100% باشند.

 

RGB یا : Red Green Black

از این مد بیشتر برای وب سایت ها استفاده می شود و بحث آن استفاده از شعاع نور می باشد و رنگ واقعی موجود نیست.

اطلاعات بیشتر:

https://www.w3schools.com/colors/colors_rgb.asp

http://www.rapidtables.com/web/color/RGB_Color.htm

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

 

HEX یا FF6600

از این کد برای وب استفاده می شود.

هر کدام از کاراکترها می تواند مقدار 0 تا f را بگیرد که به جای 10 حرف a قرار می گیرد.

اطلاعت بیشتر :

http://htmlcolorcodes.com/color-picker/

مشکلی که این نوع از رنگ دهی دارد این است که ممکن است در مرورگرهای مختلف رنگ ها به شکل های مختلفی نمایش داده شوند. برای حل این مشکل رنگ های Web Safe بوجود آمده اند که 216 عدد می باشند.

این رنگ ها به صورت aa2244 می باشند. یعنی دو حرفی که برای یک رنگ می باشند با یکدیگر برابر می باشند.

 

رنگ های فلت

برای استفاده از رنگ های فلت می توانید از سایت زیر استفاده کنید.

http://flatcolors.net/

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

http://flatcolors.net/palettes.php

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


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

قسمت 18 ) تگ head

line.png

این تگ محل قرار گرفتن فایل های استایل و توضیحات سایت می باشد.

قرار دادن فایل css

<link rel="stylesheet" href="mystyle.css">

قرار دادن فایل اسکریپت

<script type="text/javascript" src="myscript.js"></script>

تگ های متا

این تگ ها توضیحاتی درباره سایت به مرورگرها می دهند و زبان سایت را مشخص می کنند.

<meta charset="UTF-8">
<meta name="description" content="itarfand">
<meta name="keywords" content="HTML, itarfand">
<meta name="author" content="karami">
<meta http-equiv="refresh" content="20">
<meta name="theme-color" content="#3c6994">
<meta name="copyright" content="your copyright text here" />

<meta property="og:site_name" content="itarfand">
<meta property="og:description" content="itarfand">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@I_tarfand">
<meta name="twitter:domain" content="itarfand.com">
<meta name="twitter:title" content="itarfand">
<meta name="twitter:description" content="itarfand">
<meta name="twitter:image" content="image.png">
<meta property="og:image" content="image.png">
<meta property="og:title" content="itarfand">
<meta property="og:type" content="website">
<meta property="og:url" content="itarfand.com">
<meta property="og:site_name" content="itarfand">

<meta http-equiv="Cache-control" content="public" />
<meta http-equiv="Cache-control" content="private" />
<meta http-equiv="Cache-control" content="no-cache" />
<meta http-equiv="Cache-control" content="no-store" />

<meta property="og:locale" content="fa_IR">
<meta itemprop="image" content="image.png">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="fb:admins" content="https://www.facebook.com/itarfand.com.persian/">

کدهای بالا به ترتیب:

  • تعیین یونیکد متن سایت
  • توضیحی درباره سایت شما
  • کلمات کلیدی سایت شما
  • نویسنده سایت
  • رفرش شدن سایت در هر 20 ثانیه
  • رنگ مرورگر در موبایل
  • کپی رایت سایت شما
  • دیگر متاتگ ها برای شبکه های اجتماعی می باشند.
  • تگ هایی با نام Cache برای کنترل کش شدن سایت برای کاربر می باشد.

 

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


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

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

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

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

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

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

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

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

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

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