ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
تگ <script>
متعلق به زبان HTML بوده و زمانی استفاده می شود که بخواهیم در سند HTML از کدهای جاوا اسکریپتی استفاده کنیم؛ چه این کدها به صورت دستی درون این
تگ وارد شوند و چه شامل آدرسی باشند که به یک فایل خارجی جاوا اسکریپت اشاره می کنند.(
ایران گستر)
بیشترین استفاده از جاوا اسکریپت در این موارد اتفاق می افتد:(
ایران گستر)
ایران گستر)
ایران گستر)
1- ممکن است بگویید مگر نمی توان این موارد را در سمت سرور چک کرد؟ حرفتان اشتباه نیست و قطعا اعتبارسنجی در سمت سرور هم انجام می گیرد اما اگر ابتدا یک بار با جاوا اسکریپت
اعتبار سنجی کنیم دیگر نیازی نیست از سرور های خود کار بکشیم و بیخودی روی آن ها بار پردازشی قرار دهیم.(
ایران گستر)
اگر بخواهیم یکی از عناصر HTML را با جاوا اسکریپت بگیریم می توانیم از تابع ()document.getElementById
استفاده کنیم. این تابع در واقع عنصر خاصی را بر اساس مقدار
id اش می گیرد. مثال:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body>
<h2>Use JavaScript to Change Text</h2> <p>This example writes "Hello JavaScript!" into an HTML element with id="demo":</p>
<p id="demo"></p>
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>
</body> </html> |
برای مشاهده ی خروجی، روی این لینک کلیک کنید.
در مثال بالا یک عنصر <p> داشتیم که id آن برابر با demo بود اما محتوایی نداشت. سپس با جاوا اسکریپت آن را دریافت کردیم و به آن محتوا (عبارت Hello JavaScript) دادیم.(
ایران گستر)
البته استفاده از جاوا اسکریپت به همین مرحله ختم نمی شود. ما می توانیم پیشرفته تر شویم و با استفاده از جاوا اسکریپت حتی خصوصیات
CSS را نیز به همراه HTML تغییر دهیم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body>
<h1>My First JavaScript</h1>
<p id="demo">JavaScript can change the style of an HTML element.</p>
<script> function myFunction() { document.getElementById("demo").style.fontSize = "25px"; document.getElementById("demo").style.color = "red"; document.getElementById("demo").style.backgroundColor = "yellow"; } </script>
<button type="button" onclick="myFunction()">Click Me!</button>
</body> </html> |
برای مشاهده ی خروجی، روی این لینک کلیک کنید.
مشخص است که می توانیم کارهای خلاقانه ی بسیار زیادی را با جاوا اسکریپت انجام دهیم!
به طور مثال به کد زیر نگاه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <body> <script> function light(sw) { var pic; if (sw == 0) { pic = "https://www.w3schools.com/html/pic_bulboff.gif" } else { pic = "https://www.w3schools.com/html/pic_bulbon.gif" } document.getElementById('myImage').src = pic; } </script>
<img id="myImage" src="https://www.w3schools.com/html/pic_bulboff.gif" width="100" height="180">
<p> <button type="button" onclick="light(1)">Light On</button> <button type="button" onclick="light(0)">Light Off</button> </p>
</body> </html> |
برای مشاهده ی خروجی، روی این لینک کلیک کنید.
در این کد با تغییر دادن دو تصویر متفاوت، تصور می کنیم که با فشار دادن دکمه ها چراغ را خاموش یا روشن می کنیم!
به هر حال این ها چند مثال از قدرت ترکیبی جاوا اسکریپت و HTML بود تا شما بدانید چه کارهایی را می توان با این دو انجام داد. انتظار بنده این است که اگر فرد مبتدی باشید از این کدها سردر نیاورید. اگر این طور است، اصلا مشکلی نیست چرا که شما هنوز زبان جاوا اسکریپت را یاد نگرفته اید، تنها کاری که باید انجام دهید این است که از مثال ها لذت ببرید و چشم خود را به دیدن این نوع کدها عادت بدهید.(
ایران گستر)
تگ <noscript>
که یکی از
تگ های HTML می باشد کار جالبی دارد؛ اگر کاربری که از
سایت شما بازدید می کند قابلیت جاوا اسکریپت مرورگر خود را غیر فعال کرده باشد و یا اصلا مرورگر او از قابلیت جاوا اسکریپت پشتیبانی نکند محتوای درون تگ <noscript>
به او نمایش داده می شود.(
ایران گستر)
سوال: چه محتوایی باید درون <noscript>
بنویسیم؟
پاسخ: کاملا بستگی به شما دارد. ممکن است بخواهید وب سایت خود را طور دیگری برنامه نویسی کنید تا افرادی که جاوا اسکریپت ندارند از آن نسخه استفاده کنند و یا شاید هم بخواهید مانند اکثر توسعه دهندگان دیگر یک اخطار به کاربر نمایش دهید تا جاوا اسکریپت خود را فعال کند. مثال:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <body dir='rtl'>
<p id="demo"></p>
<script> document.getElementById("demo").innerHTML = "Hello JavaScript!"; </script>
<noscript>متاسفانه مرورگر شما از جاوا اسکریپت پشتیبانی نمی کند بنابراین نمیتوانید محتوای وب سایت را ببینید.</noscript>
<p>اگر مرورگری جاوا اسکریپت خود را غیر فعال کرده باشد، متن داخل تگ noscript را خواهد درد. در غیر این صورت همین متنی را که در حال حاضر می خوانید، خواهد خواند!
</p>
<p> شما می توانید برای تست کردن این موضوع، از قسمت تنظیمات مرورگر خود به دنبال گزینه ی JavaScipt بگردید و آن را غیر فعال کنید تا محتوای این تگ را ببینید. </p>
</body> </html> |
برای مشاهده ی خروجی، روی این لینک کلیک کنید.
آدرس دهی فایل ها در دنیای وب (چه HTML باشد، چه جاوا اسکریپت، چه PHP و …) معمولا از یک قانون پیروی می کنند. file path به معنی مسیر فایل» است و آدرس یک فایل را بر اساس ساختار پوشه های یک سایت مشخص می کند. ما زمانی از file path استفاده می کنیم که بخواهیم از عناصر خارجی استفاده کنیم، مانند:(
ایران گستر)
نکته: باید توجه داشته باشید، زمانی که می گوییم عناصر خارجی منظورمان خارج از سورس کد است، نه وما خارج از سرور شما!(
ایران گستر)
آدرس های کامل یا مطلق، همانطور که از نامشان مشخص است، آدرس یک فایل را به صورت کامل و تمام مشخص می کنند. معمولا زمانی از این نوع آدرس دهی استفاده می کنیم که منابع خارجی ما روی سرور خودمان نباشد و بخواهیم از یک آدرس اینترنتی دیگر فایلی را بگیریم مانند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <body>
<h2>Using a Full URL File Path</h2> <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="Mountain" style="width:300px">
</body> </html> |
برای مشاهده ی خروجی، روی این لینک کلیک کنید.
آدرس های نسبی به جای آنکه آدرس فایل مورد نظر ما را تمام و کمال مشخص کنند، قسمت خاصی از آن را مشخص می کنند. از این نوع آدرس دهی تنها زمانی می توان استفاده کرد که فایل یا منابع مورد نظر حتما روی سرور خودمان باشد! مثال:(
ایران گستر)
1 |
<img src="/images/picture.jpg" alt="HTML"> |
آدرسی که در کد بالا داده ایم با یک اسلش (علامت /
) شروع شده است:
/images/picture.jpg
این اسلش می گوید به root (فولدر اصلی) برو و از آنجا دنبال پوشه ی images بگرد و از داخل آن تصویر picture.jpg را پیدا کن!
یک حالت دیگر به این شکل است:(
ایران گستر)
1 |
<img src="images/picture.jpg" alt="HTML"> |
در این شکل آدرس دهی، از هیچ علامت اسلشی در ابتدای آدرس استفاده نکرده ایم:
images/picture.jpg
این یعنی به پوشه ی images برو و فایل picture.jpg را پیدا کن. البته یادتان باشد زمانی می توانید اینطور آدرس بدهید که فایل سورس کدتان (فایلی که کد بالا را در آن نوشته اید) به همراه images در یک پوشه باشند! به طور مثال اسم فایل سورس کد index.html باشد و به همراه پوشه ای به نام images هر دو در یک پوشه ی دیگر (مثلا My HTML Files) باشند. به همین دلیل این نوع آدرس دهی نسبی» نام دارد؛ فایل هایتان را نسبت به سورس کد آدرس دهی می کنید.(
ایران گستر)
روش دیگر آدرس دهی نسبی به این صورت است:
1 |
<img src="/images/picture.jpg" alt="HTML"> |
آدرسی که در این کد مشخص کرده ایم با دو علامت نقطه و یک اسلش شروع می شود:
/images/picture.jpg
این ترکیب (/
) معنای خاصی دارد، یک پوشه به عقب برو! در اینجا دیگر پوشه ی images مانند مثال قبل در یک پوشه با سورس کد قرار ندارد. این حالتی است که در آن فایل سورس کد ما در یک پوشه قرار دارد اما پوشه ی images در آنجا نیست بلکه یک پوشه عقب تر یا یک سطح عقب تر می باشد.(
ایران گستر)
پاسخ این سوال در موقعیت های مختلف متفاوت خواهد بود اما در حالت کلی آدرس دهی نسبی بسیار بهتر است چرا که file path های شما به آدرس URL تان وابسته نمی شوند و با تغییر آن مجبور نیستید همه را دوباره تغییر دهید. همچنین لینک ها و منابعی که آدرس دهی دارند در localhost (کامپیوتر خود) نیز کار می کنند و می توانید هنگام توسعه دادن یک برنامه در سیستم خود نیز کارکرد آن را ببینید.(
ایران گستر)
استفاده از file path های مطلق و کامل باعث بروز دردسر های زیادی می شوند به جز مواردی که راه دیگری نداشته باشیم (مثلا منابع ما روی یک سرور دیگر قرار داشته باشند).(
ایران گستر)
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
در زبان
HTML دسته ای از attribute ها را داریم که
id نام دارند. id ها، همانطور که از نامشان مشخص است، آیدی (id) منحصر به فردی را برای عنصری در HTML تعیین می کند. برخلاف کلاس ها، id ها باید منحصر به فرد و غیر تکراری باشند؛ به طور مثال نمی توانیم در یک صفحه 2 عنصر با آیدی یکسان داشته باشیم.(
ایران گستر)
سوال: اگر id
دو عنصر را یکی کنیم چه می شود؟(
ایران گستر)
پاسخ: یکی کردن id
دو یا چند عنصر باعث توقف برنامه تان نمی شود اما دو مشکل کلی را به وجود می آورد: اول اینکه کار id
ها تعیین آیدی و مشخص کردن یک عنصر خاص است. اگر قرار است چند عنصر را مشخص کنیم باید از همان
کلاس ها استفاده کنیم. دوم اینکه این کار از نظر HTML غیر معتبر است بنابراین در سئو و رتبه بندی ضرر خواهید کرد.(
ایران گستر)
معمولا از id
ها برای هدف گرفتن یک عنصر خاص در صفحه استفاده می شود تا بعدا در جاوا اسکریپت یا CSS مورد استفاده قرار گیرد. در مثال زیر می خواهیم عنصری که id اش برابر با myHeader را تغییر دهیم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <style> #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; } </style> </head> <body>
<h2>The id Attribute</h2> <p>Use CSS to style an element with the id "myHeader":</p>
<h1 id="myHeader">My Header</h1>
</body> </html> |
مشاهده ی خروجی در JSBin
نکات مهم در مورد id:(
ایران گستر)
Attribute های عمومی هستند.
id ها برای تشخیص دادن یک عنصر خاص مورد استفاده قرار می گیرند و غیر تکراری اند اما کلاس ها برای شناسایی بیشتر از یک عنصر هستند و تکراری نیز می باشند.(
ایران گستر)
بگذارید برایتان مثالی بزنم. در قسمت های قبل گفتیم برای درک بهتر، class را به عنوان کلاس درس و عناصر داخل آن را به عنوان دانش آموزان کلاس در نظر بگیرید. دانش آموزان خاص هستند اما دانش آموزانی که داخل یک کلاس هستند علاوه بر تفاوت هایشان، دارای شباهت های پایه ای و مهم هستند (یک مجموعه درس را می خوانند، هم سن هستند، یک هدف دارند و …). عناصر داخل کلاس نیز شباهت های پایه ای دارند.(
ایران گستر)
حالا هر کدام از این دانش آموزان چیزی به نام شماره ی دانش آموزی» دارند که برای هر کدامشان متفاوت است و از سمت اداره ی آموزش پرورش تعیین می شود. این شماره ی دانش آموزی مانند همان id است! اگر بخواهید تمام دانش آموزان را در سیستم وارد کنید، می نویسید بچه های کلاس فلان… اما اگر بخواهید یک دانش آموز را وارد سیستم کنید، از شماره ی دانش آموزی اش استفاده می کنید.(
ایران گستر)
این مسئله را در مثال زیر مشاهده می کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
<!DOCTYPE html> <html> <head> <style> /* Style the element with the id "myHeader" */ #myHeader { background-color: lightblue; color: black; padding: 40px; text-align: center; }
/* Style all elements with the class name "city" */ .city { background-color: tomato; color: white; padding: 10px; } </style> </head> <body>
<h2>Difference Between Class and ID</h2> <p>An HTML page can only have one unique id applied to one specific element, while a class name can be applied to multiple elements.</p>
<!-- A unique element --> <h1 id="myHeader">My Cities</h1>
<!-- Multiple similar elements --> <h2 class="city">London</h2> <p>London is the capital of England.</p>
<h2 class="city">Paris</h2> <p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p>
</body> </html> |
مشاهده ی خروجی در JSBin
bookmark های HTML با bookmark های مرورگرتان متفاوت هستند اما مفهوم یکسانی دارند. در مرورگر ها اگر صفحه ای را bookmark (در فارسی نام های نشانک»، چوب الف» و … برایش انتخاب شده است) کنید، آدرس آن را برای بعد ذخیره کرده اید اما در HTML اگر قسمتی از صفحه را bookmark کنید به کاربر اجازه می دهید که سریعا به آن قسمت منتقل شود. اگر صفحه یا صفحات شما بسیار طولانی هستند و دارای عناوین متعددی می باشند، bookmark ها می توانند به کاربران شما کمک زیادی بکنند.(
ایران گستر)
برای ایجاد یک bookmark باید قسمتی را انتخاب کنید و سپس لینکی به آن اضافه کنید. زمانی که کاربر روی آن
لینک کلیک کند به قسمت مورد نظر منتقل می شود. به مثال زیر توجه کنید:(
ایران گستر)
ابتدا یک عنصر (معمولا تگ های h1 و …) با id
خاصی می سازیم:(
ایران گستر)
1 |
<h2 id="C4">Chapter 4</h2> |
سپس برایش لینک تعیین می کنیم:(
ایران گستر)
1 |
<a href="#C4">Jump to Chapter 4</a> |
نتیجه ی نهایی مثال زیر می شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!DOCTYPE html> <html> <body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 19</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 20</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 21</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 22</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 23</h2> <p>This chapter explains ba bla bla</p>
</body> </html> |
اضافه کردن chapter های اضافی به خاطر این است که صفحه طولانی شود تا بتوانیم اسکرول انجام دهیم.(
ایران گستر)
برای دسترسی داشتن به id ها در زبان جاوا اسکریپت می توانید از روش های مختلفی استفاده کنید. ساده ترین آن ها استفاده از دستور ()getElementById
است:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<h2>Using The id Attribute in JavaScript</h2> <p>JavaScript can access an element with a specified id by using the getElementById() method:</p>
<h1 id="myHeader">Hello World!</h1> <button onclick="displayResult()">Change text</button>
<script> function displayResult() { document.getElementById("myHeader").innerHTML = "Have a nice day!"; } </script>
</body> </html> |
در این خروجی باید روی دکمه ی موجود در سمت راست (قسمت خروجی) کلیک کنید تا متوجه تغییر صفحه و نحوه ی دسترسی به myHeader بشوید.(
ایران گستر)
از iframe برای نمایش یک صفحه ی وب داخل صفحه ی وب دیگر استفاده می شود.(
ایران گستر)
برای تعریف آن باید از تگ <iframe>
استفاده کنید:
1 |
<iframe src="URL"></iframe> |
باید آدرس صفحه ی وبی که می خواهید در صفحه ی خود نمایش دهید را به src
بدهید.
همچنین می توانید برای iframe ها طول و عرض (width
و height
) تعریف کنید.
به مثال زیر توجه فرمایید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body>
<h2>HTML Iframes</h2> <p>You can use the height and width attributes to specify the size of the iframe:</p>
<iframe src="https://www.roxo.ir/best-code-editors/" height="300" width="600"></iframe>
</body> </html> |
البته می توانید تعیین اندازه را از طریق CSS نیز انجام دهید:(
ایران گستر)
1 |
<iframe src="https://www.roxo.ir/best-code-editors/" style="height:200px;width:300px;"></iframe> |
اگر بخواهید حاشیه ی دور iframe را حذف کنید می توانید border
را اینطور بنویسید:(
ایران گستر)
1 |
<iframe src="https://www.roxo.ir/best-code-editors/" style="border:none;"></iframe> |
یکی از نکات جالب این است که شما می توانید در عناصر لینک، attribute ای به نام target
را با attribute ای به نام name
یکی کنید تا با کلیک روی لینک، iframe باز شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body>
<h2>Iframe - Target for a Link</h2>
<iframe height="300px" width="100%" src="https://www.roxo.ir/plus" name="iframe_a"></iframe>
<p dir='rtl' align='center'><a href="https://www.roxo.ir/best-code-editors/" target="iframe_a">بهترین ویرایشگر برنامه نویسی کدام است؟</a></p>
</body> </html> |
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
تمام عناصر HTML به صورت پیش فرض دارای مقداری برای خاصیت display خود هستند که به نوع عنصر بستگی دارد. این مقادیر پیش فرض یا
block هستند و یا inline.(
ایران گستر)
عناصری که از نوع block باشند، همیشه در خط جدید ایجاد می شوند و تمام عرض (width) صفحه را می گیرند و تا جایی که بتوانند خود را به راست و چپ گسترش می دهند.(
ایران گستر)
به طور مثال به کد زیر و خروجی آن دقت کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<div>Hello</div> <div>World</div>
<p>The DIV element is a block element, and will start on a new line.</p>
</body> </html> |
همانطور که می بینید عنصر div در یک خط جدید شروع به کار کرده است! اگر به آن یک رنگ پس زمینه بدهیم بهتر مشخص می شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <style> #first { background-color: red; }
#second { background-color: purple; } </style> <body>
<div id="first">Hello</div> <div id='second'>World</div>
<p>The DIV element is a block element, and will start on a new line.</p>
</body> </html> |
در
کد بالا به div اول رنگ قرمز و به div دوم رنگ بنفش داده ایم. حالا با سادگی می توان دید که هر کدام تمام عرض صفحه را گرفته اند و به همین خاطر است که کنار عنصر دیگری قرار نمی گیرند بلکه باید در خط جدیدی ایجاد شوند.(
ایران گستر)
نکته: عنصر
div معمولا به عنوان نگه دارنده ی دیگر عناصر مورد استفاده قرار می گیرند و به تنهایی کاربرد خاصی ندارد:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body>
<div style="background-color:black;color:white;padding:20px;"> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </div>
</body> </html> |
عناصر Block شامل تمام تگ های زیر می شوند:(
ایران گستر)
<address>
<article>
<aside>
<blockquote>
<canvas>
<dd>
<div>
<dl>
<dt>
<fieldset>
<figcaption>
<figure>
<footer>
<form>
<h1>-<h6>
<header>
<hr>
<li>
<main>
<nav>
<noscript>
<ol>
<p>
<pre>
<section>
<table>
<tfoot>
<ul>
<video>
عناصر
inline در خط جدید ایجاد نمی شوند و تمام عرض صفحه را نیز نمی گیرند بلکه تنها فضایی را که نیاز داشته باشند اشغال می کنند.(
ایران گستر)
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body>
<span>Hello</span> <span>World</span>
<p>The SPAN element is an inline element, and will not start on a new line.</p>
</body> </html> |
حالا مانند مثال قبلی یک رنگ پس زمینه اضافه می کنیم تا بهتر مشخص شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html>
<style> #first { background-color: red; }
#second { background-color: purple; } </style>
<body>
<span id='first'>Hello</span> <span id='second'>World</span>
<p>The SPAN element is an inline element, and will not start on a new line.</p>
</body> </html> |
به سادگی مشاهده می شود که هر دو عنصر کنار هم قرار گرفته اند و رنگ پس زمینه ای که برایشان تعیین کرده ایم تنها در محدوده ی خودشان باقی مانده است.
نکته: تگ span معمولا به عنوان نگه دارنده ی قسمتی از متن به کار برده می شود:(
ایران گستر)
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body>
<h1>My <span style="color:red">Important</span> Heading</h1>
</body> </html> |
عناصر inline در زبان HTML شامل تمام موارد زیر می شوند:
<a>
<abbr>
<acronym>
<b>
<bdo>
<big>
<br>
<button>
<cite>
<code>
<dfn>
<em>
<i>
<img>
<input>
<kbd>
<label>
<map>
<object>
<output>
<q>
<samp>
<script>
<select>
<small>
<span>
<strong>
<sub>
<sup>
<textarea>
<time>
<tt>
<var>
همانطور که می دانید attribute ای به نام class
وجود دارد. class
برای تعیین استایل های مشابه در عناصری به کار می رود که نام کلاسشان یکی باشد. برای راحت تر شدن موضوع، class را مانند کلاس های درس واقعی تصور کنید که هر عنصر در آن مانند یک دانش آموز در کلاس واقعی است. درست است که دانش آموزان یک کلاس با یکدیگر تفاوت دارند اما شباهت های بسیاری نیز دارند! در زبان HTML این شباهت، استایل های
CSS است.(
ایران گستر)
در مثال زیر 3 تگ div داریم که برای همه شان یک استایل و کلاس تعریف کرده ایم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <head> <style> .cities { background-color: black; color: white; margin: 20px; padding: 20px; } </style> </head> <body>
<div class="cities"> <h2>London</h2> <p>London is the capital of England.</p> </div>
<div class="cities"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div>
<div class="cities"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div>
</body> </html> |
به این صورت می توانیم کدهای تکراری CSS را حذف کنیم و هر سه div را یک جا استایل دهی کنیم. همچنین همانطور که از کد بالا فهمیده اید برای هدف قرار دادن یک کلاس در زبان CSS باید از نقطه استفاده کنیم. به طور مثال:(
ایران گستر)
1 2 3 4 5 6 7 |
<style> .city { background-color: tomato; color: white; padding: 10px; } </style> |
نکته: کلاس های HTML می توانند روی هر عنصر و تگی استفاده شوند (inline یا block و …) اما باید توجه داشته باشید که case sensitive (حساس به حروف بزرگ و کوچک انگلیسی) هستند.(
ایران گستر)
شما می توانید به عناصر HTML بیش از یک کلاس بدهید. برای این کار باید نام کلاس ها را با اسپیس جدا کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <style> .city { background-color: tomato; color: white; padding: 10px; }
.main { text-align: center; } </style> <body>
<h2>Multiple Classes</h2> <p>All three headers have the class name "city". In addition, London also have the class name "main", which center-aligns the text.</p>
<h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2>
</body> </html> |
همانطور که می بینید، در استایل ها ابتدا گفته ایم کلاس city را قرمز رنگ کن و غیره. سپس گفته ایم آن هایی که کلاس main دارند باید وسط چین باشند. نتیجه ی ادغام این دو استایل همان London است که در خروجی مشاهده می کنید.
با اینکه ما در مثال بالا فقط از تگ های h2 استفاده کردیم اما باید بدانید که می توانید یک کلاس را روی تگ های مختلف نیز پیاده سازی کنید. مثال:(
ایران گستر)
1 2 |
<h2 class="city">Paris</h2> <p class="city">Paris is the capital of France</p> |
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <body>
<h2>Using The class Attribute in JavaScript</h2> <p>Click the button, to hide all elements with the class name "city", with JavaScript:</p>
<button onclick="myFunction()">Hide elements</button>
<h2 class="city">London</h2> <p>London is the capital of England.</p>
<h2 class="city">Paris</h2> <p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2> <p>Tokyo is the capital of Japan.</p>
<script> function myFunction() { var x = document.getElementsByClassName("city"); for (var i = 0; i < x.length; i++) { x[i].style.display = "none"; } } </script>
</body> </html> |
اگر به خروجی کد بالا مراجعه کنید، می بینید که با فشرده دکمه ی Hide elements تمام div ها ناپدید می شوند(
ایران گستر)
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
لیست های غیر ترتیبی (در انگلیسی: unordered list) با استفاده از تگ <ul>
مشخص شده و سپس درون این
تگ از تگ های <li>
برای مشخص کردن هر گزینه استفاده می کنیم. (
ایران گستر)
در حالت پیش فرض این نوع از لیست ها با bullet مشخص می شوند. bullet در لغت به معنی گلوله» است اما منظور از آن در لیست ها همان دایره های سیاه رنگ کنار هر گزینه هستند.(
ایران گستر)
در لیست های غیر ترتیبی (همانطور که از نامشان مشخص است) ترتیب گزینه ها اهمیتی ندارد. به مثال زیر توجه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body>
<h2>An unordered HTML list</h2>
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
</body> </html> |
دایره های سیاه کنار هر مورد را به سادگی می توان دید. همچنین به راحتی متوجه می شویم که بین Coffee (قهوه)، Tea (چای) و Milk (شیر) ترتیبی وجود ندارد؛ چه شیر را اول بیاوریم و چه قهوه را، هیچ تفاوتی به حال ما و یا بحث اصلی ندارد (قبل از نتیجه گیری، قسمت لیست های ترتیبی را نیز ببینید).(
ایران گستر)
سوال: چطور می توانیم شکل bullet ها را تغییر دهیم؟(
ایران گستر)
پاسخ: همانطور که دیگر اجزای HTML را تغییر می دهیم! با استفاده از CSS. به جدول زیر نگاه کنید:(
ایران گستر)
مقدار | توضیحات |
disc | این حالت همان bullet های پیش فرض و سیاه رنگ است |
circle | این حالت دایره ها را به صورت توخالی نمایش می دهد |
square | این حالت به جای دایره از مربع استفاده می کند |
none | در این حالت، موارد یک لیست بدون شکل خواهند بود |
بیایید تک تک این موارد را بررسی کنیم.
حالت اول: تنظیم روی مقدار disc (
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
</body> </html> |
حالت دوم: تنظیم روی مقدار Circle (
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body>
<h2>Unordered List with Disc Bullets</h2>
<ul style="list-style-type:disc;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
</body> </html> |
حالت سوم: تنظیم روی مقدار Square (
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
</body> </html> |
حالت چهارم: تنظیم روی مقدار none (
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
</body> </html> |
لیست های ترتیبی (به انگلیسی: ordered list) با تگ <ol>
مشخص می شود و برای اضافه کردن هر مورد جدید به
لیست باید از همان <li>
استفاده کنید. در این نوع از لیست ها، ترتیب اهمیت دارد.(
ایران گستر)
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body>
<h2>An ordered HTML list</h2>
<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
</body> </html> |
سوال: مگر در قسمت قبل همین مثال را به صورت غیر ترتیبی نیاوردیم و نگفتیم که ترتیب موارد آن اهمیتی ندارد؟
پاسخ: بله! در واقع اهمیت داشتن یا نداشتن ترتیب به دو مورد اصلی بستگی دارد:(
ایران گستر)
از نظر زمینه و موضوع بحث: بگذارید با مثال برایتان توضیح دهم؛ اگر بحث شما در مورد مقدار پروتئین و میزان کالری شیر، قهوه و چای باشد، ترتیب اهمیت پیدا می کند! تصور کنید می خواهید لیستی به مخاطب ارائه کنید که در آن نوشیدنی ها بر اساس میزان کالری شان لیست شده اند. در این حالت ترتیب اهمیت دارد اما زمانی که می خواهید چند مورد از نوشیدنی های محبوب جهان را نام ببرید آیا باز هم مهم است کدام را اول بیاوریم؟ خیر.(
ایران گستر)
از نظر سلیقه ی نویسنده: سلیقه ی شما ممکن است چنین چیزی را قبول نکند! به طور مثال برای شما (به هر دلیل شخصی که دارید) مهم است ابتدا شیر بیاید یا قهوه یا چای! در این حالت این لیست تغییر می کند. مسئله ی عکس آن نیز صادق است.(
ایران گستر)
بنابراین می توان به عنوان قانونی کلی گفت: زیاد در مورد جزئیات لیست ها، فنی رفتار نکنید چرا که تعیین ترتیب داشتن یا نداشتن موارد یک لیست به این سادگی ها نیست. علاوه بر آن اهمیت آنچنانی نیز ندارد و مسئله ای بین شما و کاربرانتان محسوب می شود.
لیست های ترتیبی انواع مختلفی دارند. به جدول زیر نگاه کنید:(
ایران گستر)
نوع | توضیحات |
type=”1″ | موارد لیست با عدد شماره گذاری می شوند (حالت پیش فرض) |
type=”A” | موارد لیست با حروف بزرگ انگلیسی علامت گذاری می شوند (A و B و C و …) |
type=”a” | موارد لیست با حروف کوچک انگلیسی علامت گذاری می شوند (a و b و c و …) |
type=”I” | موارد لیست با اعداد بزرگ رومی علامت گذاری می شوند (I و II و III و …) |
type=”i” | موارد لیست با اعداد کوچک رومی علامت گذاری می شوند (i و ii و iii و …) |
بیایید هر کدام را بررسی کنیم:
حالت اول: تنظیم روی مقدار Numbers (
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body>
<h2>Unordered List without Bullets</h2>
<ul style="list-style-type:none;"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul>
</body> </html> |
حالت دوم: تنظیم روی حروف بزرگ (
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body>
<h2>Ordered List with Letters</h2>
<ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
</body> </html> |
حالت سوم: تنظیم روی حروف کوچک (
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body>
<h2>Ordered List with Lowercase Letters</h2>
<ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
</body> </html> |
حالت چهارم: تنظیم روی حروف رومی بزرگ (
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body>
<h2>Ordered List with Roman Numbers</h2>
<ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
</body> </html> |
حالت پنجم: تنظیم روی حروف رومی کوچک
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body>
<h2>Ordered List with Lowercase Roman Numbers</h2>
<ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
</body> </html> |
سوال: اگر بخواهیم شمارش لیست از عدد خاصی شروع شود باید چه کار کنیم؟
پاسخ: برای این کار از
attribute ای به نام start
شروع می کنیم. به طور مثال کد زیر را طوری نوشته ایم که شمارش در آن ها از عدد 50 شروع شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body>
<h2>The start attribute</h2> <p>شمارش به صورت پیش فرض از عدد 1 شروع می شود اما میتوانیم کاری کنیم که شمارش از عدد دلخواه ما شروع شود:</p>
<ol start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
<ol type="I" start="50"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
</body> </html> |
انواع دیگری از لیست ها در زبان HTML لیست های توضیحات (به انگلیسی: description list) هستند. این لیست ها مجموعه ای از اصطلاحات هستند که به صورت جداگانه توضیح داده شده اند. (
ایران گستر)
این نوع از لیست ها با تگ <dl>
تعریف شده و برای اضافه کردن هر مورد به آن باید از تگ های زیر استفاده کرد: (
ایران گستر)
<dt>
اصطلاح را مشخص می کنند.<dd>
نیز شامل تعریف فنی آن هستند.به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body>
<h2>A Description List</h2>
<dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl>
</body> </html> |
نکته: شما می توانید لیست های HTML را به صورت تو در تو (nested) بنویسید: (
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body>
<h2>A Nested List</h2> <p>List can be nested (lists inside lists):</p>
<ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul>
</body> </html> |
البته باید توجه داشت که لیست های HTML می توانند تصاویر، لینک ها و دیگر عناصر HTML را نیز در خود جای دهند و اامی در متنی بودنشان نیست. (
ایران گستر)
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"] HTML[/caption]
Country | Contact | Company |
Germany | Maria Anders | Alfreds Futterkiste |
Mexico | Francisco Chang | Centro comercial Moctezuma |
Austria | Roland Mendel | Ernst Handel |
UK | Helen Bennett | Island Trading |
Canada | Yoshi Tannamuri | Laughing Bacchus Winecellars |
Italy | Giovanni Rovelli | Magazzini Alimentari Riuniti |
جدولی که در بالا می بینید نمونه ای از جدول در زبان HTML است، البته جدول های HTML به دلیل وجود زبان CSS می توانند ظاهر بسیار متفاوتی داشته باشند و بستگی به کدهای CSS شما دارند.(
ایران گستر)
هدف از ساخت جدول به کار و سلیقه ی شما بستگی دارد اما سعی کنید زمانی از
جدول ها استفاده کنید که داده های جدولی داشته باشید! برخی از برنامه نویسان وب با تصور اشتباه اینکه هر جدولی به هر صفحه ای زیبایی می دهد بی جا و بدون دلیل از جدول ها استفاده می کنند. با اینکه احتمال ضربه زدن به سئو از طریق این کار تقریبا صفر است اما برای ظاهر وب سایت شما خوب نیست. برخی داده ها به صورت گروهی هستند و یا به هر دلیل دیگر مستقیما در یک جدول جا می گیرند؛ در آن زمان می توانید از جدول ها استفاده کنید.(
ایران گستر)
برای ساختن جدول ها از تگ <table>
استفاده می کنیم. این
تگ به مرورگر اعلام می کند ما قصد ساخت یک جدول را داریم. سپس در داخل این تگ، برای هر ردیف از جدولتان باید از تگ <tr>
استفاده کنید که مخفف table row (ردیف جدول) است. اگر ردیف اول شما دارای عنوان برای داده ها است و می خواهید پر رنگ تر باشد باید درون <tr>
اول، از تگ <th>
استفاده کنید. حالا برای هر خانه ی جدول باید از تگ <td>
(مخفف table data) استفاده کنید.(
ایران گستر)
بیایید به یک مثال نگاهی بیندازیم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<!DOCTYPE html> <html> <body>
<h2>Basic HTML Table</h2>
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table>
</body> </html> |
نکته:ها به طور پیش فرض به صورت Bold (پررنگ) و centered (وسط چین) هستند، به همین دلیل خروجی را به این شکل مشاهده می کنید.(
ایران گستر)
باید بدانید <td>
ها که خانه های جدول شما را می سازند می توانند هر عنصر HTML ای مانند تصویر، لیست، متن و … را در خود نگه دارند.(
ایران گستر)
همانطور که در مثال قبلی دیدیم، اگر برای جدول هایتان حاشیه (border) تعیین نکنید، بدون حاشیه و به شکل زشتی نمایش داده می شوند. برای اضافه کردن حاشیه باید از خصوصیت border
در زبان CSS استفاده کنیم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; } </style> </head> <body>
<h2>Bordered Table</h2> <p>Use the CSS border property to add a border to the table.</p>
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table>
</body> </html> |
حواستان باشد که حاشیه ها را می توانید هم برای کل جدول تعیین کنید و هم برای تک تک خانه های جدول. دلیل دو خطه بودن حاشیه در کد بالا نیز همین است.(
ایران گستر)
اگر بخواهیم خاصیت دو خطی بودن حاشیه را حذف کنیم می توانیم از دستور border-collapse
در زبان CSS استفاده کنیم:(
ایران گستر)
1 2 3 4 |
table, th, td { border: 1px solid black; border-collapse: collapse; } |
اگر این کار را بکنید کد بالا به این شکل در می آید.
padding در هر خانه ی جدول، فضایی خالی را بین داده های جدول و حاشیه های آن مشخص می کند. در حالت پیش فرض خانه های جدول ها در HTML هیچ padding ای ندارند. بیایید به جدول خودمان padding اضافه کنیم تا متوجه تغییر آن بشویم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; } </style> </head> <body>
<h2>Cellpadding</h2> <p>Cell padding specifies the space between the cell content and its borders.</p>
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table>
<p dir='rtl'>سعی کنید مقدار padding را به 5 پیکسل تغییر دهید.</p>
</body> </html> |
همانطور که در جدول می بینید، خانه های آن بسیار بزرگتر شده اند که نتیجه ی ایجاد padding است.
در ضمن همانطور که گفتیم <th> ها به طور پیش فرض به صورت Bold (پررنگ) و centered (وسط چین) هستند اما اگر بخواهیم آن ها را سر جایشان برگردانیم چه کار کنیم؟ می توانیم از text-align
استفاده کنیم. این خصوصیت CSS به ما اجازه می دهد راست چین، چپ چین و وسط چین بودن داده های جدول را تعیین کنیم. به طور مثال می خواهیم <th> ها را به سمت چپ ببریم بنابراین کد زیر را به استایل ها اضافه می کنیم:(
ایران گستر)
1 2 3 |
th { text-align: left; } |
با اضافه کردن این کد، جدول ما به این شکل در می آید (تمام داده ها به سمت چپ می روند)
از طرفی خصوصیتی به نام border-spacing
وجود دارد که مانند نامش، کارش ایجاد فاصله بین حاشیه های خانه های جدول است. بیایید مثالی از آن را ببینیم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; padding: 5px; } table { border-spacing: 15px; } </style> </head> <body>
<h2>Border Spacing</h2> <p>Border spacing specifies the space between the cells.</p>
<table style="width:100%"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table>
<p dir='rtl'> مقدار فاصله را به 5 پیکسل تغییر دهید و خروجی را دوباره مشاهده کنید.</p>
</body> </html> |
نکته: اگر حاشیه های جدول شما دارای border-collapse
باشند، دستور border-spacing
کار نکرده و هیچ تاثیری روی آن ها ندارد. چرا؟ چون گفته نباید حاشیه های دو خطی داشته باشیم (حاشیه های تک خطی) و یک خط هم نمی تواند از خودش فاصله بگیرد! چطور می شود از نظر منطقی یک شیء از خودش فاصله بگیرد؟!(
ایران گستر)
حتما شما هم دیده اید که برخی از جدول ها طوری طراحی شده اند که یک خانه متعلق به دو یا چند ستون است و به عبارتی بین آنها مشترک است. این اتفاق معمولا به این دلیل می افتد که مقدار آن خانه مساوی و یا مرتبط به هر دو ستون است. برای ایجاد این نوع خانه ها باید از یک attribute به نام colspan
استفاده کنیم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body>
<h2>Cell that spans two columns</h2> <p>To make a cell span more than one column, use the colspan attribute.</p>
<table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>55577854</td> <td>55577855</td> </tr> </table>
</body> </html> |
در مثال بالا از آن جایی که شماره تلفن خانه و شماره تلفن همراه هر دو زیر مجموعه ی شماره تلفن یا Telephone قرار می گیرند می توانیم آن ها را ادغام کنیم.(
ایران گستر)
حالت دیگر این است که یک خانه از جدول، شامل چندین ردیف شود. در این حالت از attribute دیگری به نام rowspan
استفاده می کنیم. به مثال زیر توجه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 5px; text-align: left; } </style> </head> <body>
<h2>Cell that spans two rows</h2> <p>To make a cell span more than one row, use the rowspan attribute.</p>
<table style="width:100%"> <tr> <th>Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>55577854</td> </tr> <tr> <td>55577855</td> </tr> </table>
</body> </html> |
در اینجا هم همان بحث شماره تلفن پیش می آید اما طراحی جدول به طوری است که داده ها به صورت ستونی دریافت می شوند بنابراین می توانیم به این شکل آن ها را به هم مرتبط کنیم.(
ایران گستر)
تگ <caption>
به معنی زیرنویس» یا توضیحات» است و آن را می توانید به جدول هایتان اضافه کنید تا توضیح مختصری را به مخاطب ارائه دهید. به طور مثال:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<table style="width:100%"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$50</td> </tr> </table> |
Monthly savings (به معنی پس اندازهای ماهانه») توضیح این جدول است و مخاطب را سریعا با محتوای آن آشنا می کند.
نکته: تگ <caption> باید بلافاصله بعد از تگ <table> نوشته شود.(
ایران گستر)
سوال: اگر چندین جدول داشته باشیم اما بخواهیم هر کدام را به شکلی خاص استایل دهی کنیم چطور؟
پاسخ: این سوال در دوره ی CSS پاسخ داده شده است. می توانید برای جدول یک id خاص تعیین کنید و در زمان
استایل دهی با CSS فقط آن id را هدف بگیرید. یک مثال را در این لینک برایتان نوشته ام.(
ایران گستر)
از آنجا که این دوره مربوط به HTML است همین مقدار برایتان کافی است و از نظر HTML شما را با جدول ها آشنا کرد. بحث استایل دهی جدول ها مربوط به دوره ی CSS می شود. به طور مثال یک جدول را به شکل چشم نواز تری استایل دهی کرده ایم و برایتان آورده ایم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
<!DOCTYPE html> <html> <head> <style> table { width:100%; } table, th, td { border: 1px solid black; border-collapse: collapse; } th, td { padding: 15px; text-align: left; } table#t01 tr:nth-child(even) { background-color: #eee; } table#t01 tr:nth-child(odd) { background-color: #fff; } table#t01 th { background-color: black; color: white; } </style> </head> <body>
<h2>Styling Tables</h2>
<table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table> <br>
<table id="t01"> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </table>
</body> </html> |
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"] HTML[/caption]
برای نمایش تصاویر در زبان HTML از تگ معروف <img>
استفاده می شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <body>
<h2>HTML Image</h2> <img src="https://s1.1zoom.me/big0/715/Blonde_girl_Snow_Hair_447971.jpg" alt="Girl blowing snow" width="500" height="333">
</body> </html> |
همانطور که مشاهده می کنید نکاتی در مورد
تگ <img>
وجود دارد:(
ایران گستر)
attribute های مختلف می شود که مهم ترین آن ها src (مخفف source و به معنی منبع») می باشد.
با این توضیحات متوجه می شویم که ساختار حداقلی تگ img به این شکل است:(
ایران گستر)
1 |
<img src="url"> |
بیایید تک تک attribute های این تگ را بررسی کنیم:
در تصاویری که در دنیای وب هستند، attribute ای به نام alt
وجود دارد. کار این attribute ارائه ی متنی جایگزین برای تصویر ما است تا اگر زمانی تصویر ما به کاربر نمایش داده نشود (به طور مثال تصویر به صورت اتفاقی از سرور ما حذف یا فیلتر شده باشد، آدرس دهی ما به src اشتباه باشد و …) به جای آن متنی نمایش داده شود که به کاربر بگوید این تصویر در مورد چه چیزی بوده است.(
ایران گستر)
استفاده ی دیگر این تگ نیز برای افراد نابینا یا کم بینا است که از دستگاه های screen reader استفاده می کنند. screen reader ها می توانند alt
را بخوانند تا فرد متوجه تصویر شود.(
ایران گستر)
بر اساس چیزی که گفته شد همیشه سعی کنید alt
را طوری بنویسید که تصویر را توصیف کند و از موارد دیگر پرهیز کنید.
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>
<img src="https://s1.1zoom.me/big0/715/Blonde_girl_Snow_Hair_447971.jpg" alt="دختری با لباس های زمستانی در هوای سرد" width="500" height="333">
</body> </html> |
هشدار: بسیاری از attribute ها در زبان HTML دلخواه هستند اما alt
اجباری است و اگر صفحه ی شما تصاویر بدون alt
داشته باشد، از نظر HTML غیر معتبر تلقی شده و می تواند به رتبه بندی و سئوی شما ضربه بزند.(
ایران گستر)
قبلا به صورت کوتاه اشاره کرده بودیم که می توانید از style
استفاده کنید تا width (عرض یا پهنا) و height (طول یا ارتفاع) یک تصویر را مشخص کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body>
<h2>Alternative text</h2>
<p>The alt attribute should reflect the image content, so users who cannot see the image gets an understanding of what the image contains:</p>
<img src="https://s1.1zoom.me/big0/715/Blonde_girl_Snow_Hair_447971.jpg" alt="دختری با لباس های زمستانی در هوای سرد" style="width:500px;height:350px;>
</body> </html> |
اما این روش آنچنان چنگی به دل نمی زند. چرا که باز هم inline (درونخطی) است. اگر نمی دانید استایل های inline چه هستند به
دوره ی CSS ما سری بزنید.(
ایران گستر)
بنابراین راه بهتر چیست؟ راه بهتر این است که اصلا از CSS استفاده نکنیم چرا که خود زبان HTML برای ما attribute هایی را به همین اسم فراهم کرده است:(
ایران گستر)
1 |
<img src="https://s1.1zoom.me/big0/715/Blonde_girl_Snow_Hair_447971.jpg" alt="دختری با لباس های زمستانی در هوای سرد" width="500" height="350"> |
واحد کار با تصاویر در زبان HTML پیکسل است بنابراین ‘width = ‘500 یعنی عرض تصویر 500 پیکسل باشد.
سوال: اگر کد های CSS را به صورت inline ننویسیم چطور؟
پاسخ: تفاوت زیادی ایجاد نمی کند و بستگی به سلیقه ی شما دارد.(
ایران گستر)
نکته: بهتر است همیشه برای تصاویر خود طول و عرض تعیین کنید. اگر این کار را انجام ندهید ممکن است در برخی از موارد صفحه تان کمی به هم بریزد و یا تا تصویر بارگذاری نشده باشد صفحه تان نمایش داده نشود.(
ایران گستر)
حتما متوجه شده اید که تا به حال برای src از آدرس کامل (full path) استفاده کرده ام، دلیل آن هم این است که تصویر مورد نظر خود را از سرور دیگری برداشته ام. اگر تصویر شما روی سرور خودتان وجود دارد می توانید از آدرس دهی نسبی (relative path) استفاده کنید. مثال:(
ایران گستر)
1 |
<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;"> |
شما مجاز هستید در زبان HTML از تصاویر متحرک GIF نیز استفاده کنید. به طور مثال میخواهیم GIF زیر را به کد هایمان اضافه کنیم:(
ایران گستر)
اضافه کردن این تصویر به یک صفحه ی HTML به سادگی کد زیر است:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body>
<h2>Animated Images</h2> <p>The GIF standard allows moving images.</p>
<img src="https://undo.io/media/uploads/files/Frustrated_programmer.gif" alt="وقتی بعد از 100 بار ویرایش کد ها، باز هم چند تا باگ توی برنامه ات می بینی!" width="500" height="350">
</body> </html> |
همچنین به یاد داشته باشید که تصاویر GIF از دیگر تصاویر جدا نیستند، بنابراین می توانید به راحتی آن ها را نیز به لینک تبدیل کنید! اگر از قسمت های قبلی به یاد داشته باشید برای این کار تنها کافی است تگ img را بین تگ های a قرار دهید:
(
ایران گستر)
1 2 3 |
<a href="roxo.ir"> <img src="Programmer.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0;"> </a> |
attribute ای به نام float
(به معنی شناور» یا شناور شدن») وجود دارد که به تصویر اجازه می دهد با متن تعامل داشته و در کنار آن قرار بگیرد. در حالت عادی تصاویر نمی توانند هم سطح و کنار یک متن یا عناصر دیگر قرار بگیرند اما با استفاده از float
این کار انجام شدنی است. مثال:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body>
<h2>Floating Images</h2> <p align ='center'><strong>کردن تصاویر به سمت راست نوشته float</strong></p>
<p> <img src="https://www.w3schools.com/html/smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;"> A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. </p>
<p align ='center'><strong>کردن تصاویر به سمت چپ نوشته float</strong></p> <p> <img src="https://www.w3schools.com/html/smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;"> A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image. </p>
</body> </html> |
البته این نکته پیچیده تر و به مبحث CSS مربوط می شود بنابراین توضیحات بیشتر آن را به
دوره ی CSS واگذار می کنیم.(
ایران گستر)
در HTML5 عنصر جدیدی به نام <picture>
معرفی شده است تا به صفحات وب انعطاف پذیری بیشتری بدهد. تگ <picture>
شامل چند تگ <source>
می باشد که هر کدام از آن ها دارای attribute هایی هستند که به مرورگر می گویند در دستگاه های مختلف (با سایز صفحات مختلف) کدام تصویر بهتر نمایش داده می شود. به مثال زیر دقت کنید تا بهتر متوجه این موضوع شوید.(
ایران گستر)
در مثال زیر میبینید که با تغییر سایز پنجره ی مرورگر و یا تغییر سایز قسمت راست (قسمت مشاهده ی خروجی در JSBin) تصاویری که برای شما نمایش داده می شوند متفاوت هستند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body>
<h2>The picture Element</h2>
<picture> <source media="(min-width: 650px)" srcset="https://www.w3schools.com/html/img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="https://www.w3schools.com/html/img_white_flower.jpg"> <img src="https://www.w3schools.com/html/img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>
</body> </html> |
صفحه ی نتایج (سمت راست) و یا پنجره ی مرورگر خود را کوچک و بزرگ کنید تا متوجه تغییر تصاویر بشوید! مرورگر با استفاده از media query ها سعی می کند بهترین تصویر را برای سایز صفحه ی شما پیدا کند. اگر دقت کنید می بینید که تگ آخر به جای آنکه از نوع <source>
باشد، از نوع img
است. باید بدانید که قرار دادن آخرین تصویر با تگ img اامی است و حتما باید انجام شود؛ دلیل آن این است که اگر مرورگری بسیار قدیمی بود و از تگ <picture>
پشتیبانی نمی کرد،
وب سایت شما بدون تصویر نماند و همان تصویر img بارگذاری شود.(
ایران گستر)
نکته: این قابلیت در مرورگر IE12 و نسخه های قبل تر و همچنین در Safari 9.0 و نسخه های قبل تر پشتیبانی نمی شود.
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"] HTML[/caption]
در زبان HTML،
لینک ها معمولا شما را به صفحات دیگری می فرستند و زمانی که موس خود را روی آن ها ببرید، نشانگر موس تبدیل به علامت دست» می شود.(
ایران گستر)
تصور اشتباهی از لینک ها بین عموم مردم جا افتاده است: لینک ها، متنی هستند! لینک ها می توانند متن، تصویر یا هر عنصر دیگر HTML باشند و تنها محدود به متن نمی شوند.(
ایران گستر)
ساختار کلی لینک ها در زبان HTML از این قرار است:
1 |
<a href="url">link text</a> |
همانطور که می بینید برای ایجاد لینک ها از تگی به نام <a>
استفاده می شود. مثال زیر را ببینید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <body>
<h2>HTML Links</h2> <p dir='rtl' align='center'><a href="https://www.roxo.ir/series/html-tutorials/"> دوره ی آموزشی صفر تا صد HTML</a></p>
</body> </html> |
لینکی که در مثال بالا ساختیم، شما را مستقیما به صفحه ی دوره ی آموزشی HTML در وب سایت روکسو می برد؛ attribute ای به نام href
وجود دارد که آدرس لینک مورد نظرتان را باید در آن قسمت قرار دهید و متنی که بین دو
تگ آغازی و پایانی <a>
نوشته می شود قسمتی از متن است که کاربر مشاهده می کند.(
ایران گستر)
توجه: اگر در پایان آدرس لینک ها از علامت forward slash (یعنی /) استفاده نکنید، ممکن است 2 درخواست به سمت سرور ارسال کنید! البته بسیاری از سرورها به طور خودکار علامت slash را به آخر
آدرس لینک اضافه می کنند و سپس درخواست را پردازش می کنند اما کار از محکم کاری عیب نمی کند.(
ایران گستر)
نکته: ما دو علامت slash داریم؛ یکی از آن ها forward slash است (این علامت -> /
) و دیگری back slash است (این علامت -> \
). دلیل نام گذاری آن ها به forward (جلو) و back یا backwards (عقب) از این جهت است که سر علامت اول رو به جلو بوده و سر دومی رو به عقب است!(
ایران گستر)
مثال بالا از absolute path یا full path استفاده می کند که در فارسی با نام های آدرس مطلق و آدرس کامل شناخته می شوند. در این نوع آدرس دهی ها، آدرس کامل یک لینک به href داده می شود اما اگر لینک های شما به
وب سایت خودتان برمی گردد، می توانید قسمت اول آدرس را به آن ندهید. مثال:(
ایران گستر)
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <body>
<h2>HTML Links</h2> <p dir='rtl' align='center'><a href="series/html-tutorials/"> دوره ی آموزشی صفر تا صد HTML</a></p>
</body> </html> |
آدرس وب سایت (نام دامنه ی اصلی) به صورت خودکار به لینک اضافه خواهد شد.
در تمام مرورگرها ظاهر پیش فرض لینک ها از این قرار است:(
ایران گستر)
لینک های active به معنی لحظه ای است که کلیک چپ را روی لینک نگه داشته اید، اما هنوز رهایش نکرده اید تا به صفحه ی مورد نظر منتقل شوید. می توانید به خروجی مثال قبلی مراجعه کنید و روی لینک مورد نظر کلیک چپ را نگه دارید تا متوجه تغییر رنگ لینک ها بشوید.(
ایران گستر)
شما می توانید این ظاهر را با استفاده از CSS تغییر دهید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <style> a:link { color: green; background-color: transparent; text-decoration: none; } a:visited { color: pink; background-color: transparent; text-decoration: none; } a:hover { color: red; background-color: transparent; text-decoration: underline; } a:active { color: yellow; background-color: transparent; text-decoration: underline; } </style> </head> <body>
<h2>Link Colors</h2>
<p>You can change the default colors of links</p>
<a href="html_images.asp" target="_blank">HTML Images</a>
</body> </html> |
اگر به خروجی این کد مشاهده کنید، متوجه می شوید تمام رفتارهای لینک را تغییر داده ایم. اگر متوجه کدهای CSS نمی شوید جای نگرانی نیست، کافی است دوره ی آموزشی CSS ما را دنبال کنید. این مثال ها تنها برای این آورده شده اند که شما با قدرت CSS و همکاری اش با HTML آشنا شوید.(
ایران گستر)
حالا که بحث از قدرت CSS شد، خوب است بدانید که می توانید لینک ها را به شکل دکمه در بیاورید!.به مثال زیر نگاه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <head> <style> a:link, a:visited { background-color: #f44336; color: white; padding: 15px 25px; text-align: center; text-decoration: none; display: inline-block; }
a:hover, a:active { background-color: red; } </style> </head> <body>
<h2>Link Button</h2> <p>A link styled as a button:</p> <a href="default.asp" target="_blank">This is a link</a>
</body> </html> |
زمانی که به خروجی کد بالا مراجعه کنید، متوجه می شوید که با استفاده از کدهای CSS یک لینک عادی را به شکل یک دکمه در آورده ایم(
ایران گستر)
شما با استفاده از Attribute ای به نام target
می توانید تعیین کنید که لینک مورد نظر چطور باز شود:(
ایران گستر)
target
مقدار blank_
را بدهید، کاربر با کلیک روی لینک به یک tab جدید در مرورگر منتقل شده و لینک در آن tab برایش باز می شود.target
مقدار self_
را بدهید، لینک در صفحه ی فعلی باز می شود که حالت پیش فرض مرورگر ها است.target
مقدار parent_
را بدهید، لینک در frame پدر باز می شود.target
مقدار top_
را بدهید، کاربر با کلیک روی لینک به یک پنجره ی جداگانه (window و نه tab) منتقل شده و لینک در آنجا برایش باز می شود.target
مقدار framename را بدهید، لینک در یک frame نام گذاری شده باز می شود.دو مثال از موارد بالا میزنیم. لینک زیر در یک tab جداگانه باز خواهد شد:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body>
<h2>The target Attribute</h2>
<a href="https://www.roxo.ir/plus/" target="_blank">انتقال به صفحه ی اصلی روکسو پلاس</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>
</body> </html> |
اما در مثال بعدی میخواهیم لینک را در همان صفحه باز کنیم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body>
<h2>The target Attribute</h2>
<a href="https://www.roxo.ir/plus/" target="_self">انتقال به صفحه ی اصلی روکسو پلاس</a>
<p>If you set the target attribute to "_blank", the link will open in a new browser window or tab.</p>
</body> </html> |
اگر در این مثال روی لینک کلیک کنید، دیگر به Tab جدیدی منتقل نمی شوید بلکه لینک در همان صفحه برایتان باز می شود.
سوال: frame چیست؟ مقدار top_
که به آن مربوط می شود چه کاری انجام می دهد؟(
ایران گستر)
پاسخ: هنوز به مبحث frame ها در HTML نرسیده ایم اما اگر بخواهم به صورت کوتاه توضیح دهم همان JSBin را برایتان مثال می زنم. اگر به خروجی مثال قبل سر زده باشید، متوجه می شوید صفحه ی ما به 2 قسمت تقسیم شده است؛ قسمت سمت چپ حاوی کد ها است و قسمت سمت راست حاوی خروجی آن ها. به هر کدام از این قسمت ها یک frame (به معنی قاب») می گویند.
زمانی که روی لینکِ موجود در سمت راست کلیک کنید می بینید که سایت در همان frame سمت راست باز می شود. اگر
کد قبل را ویرایش کنیم و به target مقدارِ top_
را بدهیم، صفحه ی JSBin کاملا از بین می رود و لینک جدید تمام صفحه را می گیرد.(
ایران گستر)
همانطور که گفتیم لینک ها به متن محدود نیستند و می توانند از نوع تصویر باشند. به مثال زیر توجه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h2>Image Links</h2>
<p>The image is a link. You can click on it.</p>
<a href="https://www.roxo.ir/plus/"> <img src="https://www.roxo.ir/wp-content/uploads/2019/03/roxo-plus-new.png" alt="Roxo Plus" style="border:0"> </a>
<p dir='rtl'>ما از "border:0" استفاده کرده ایم تا جلوی اینترنت اکسپلورر نسخه ی 9 و نسخه های قدیمی ترش را بگیریم تا دور تصویر ما دورگیری نکنند. </p>
</body> </html> |
اگر در خروجی، روی لوگوی روکسو پلاس کلیک کنید، به صفحه ی روکسو پلاس منتقل خواهید شد؛ تنها کاری که کردیم قرار دادن تصویر (تگ <img>) درون تگ <a> بود.(
ایران گستر)
نکته: شما می توانید به لینک های خود، attribute ای به نام title بدهید. هر مقداری به title بدهید به عنوان توضیحات اضافی آن لینک محسوب می شود و اگر کاربر موس خود را روی لینک نگه دارد، این توضیحات نمایان می شوند.(
ایران گستر)
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h2>Image Links</h2>
<p>The image is a link. You can click on it.</p>
<a href="https://www.roxo.ir/plus/" title="این لینک شما را به صفحه ی روکسو پلاس خواهد برد"> <img src="https://www.roxo.ir/wp-content/uploads/2019/03/roxo-plus-new.png" alt="Roxo Plus" style="border:0"> </a>
<p dir='rtl'>ما از "border:0" استفاده کرده ایم تا جلوی اینترنت اکسپلورر نسخه ی 9 و نسخه های قدیمی ترش را بگیریم تا دور تصویر ما دورگیری نکنند. </p>
</body> </html> |
در این مثال باید موس خود را روی لوگوی روکسو پلاس نگه دارید تا توضیحات title نمایش داده شود.
لینک ها همیشه شما را به صفحات دیگر منتقل نمی کنند. برخی اوقات می توانید از لینک ها استفاده کنید تا کاربر را به قسمت های مختلف یک صفحه منتقل کنند. معمولا این کار را برای صفحات بسیار طولانی انجام می دهند. یک مثال میزنم:(
ایران گستر)
ابتدا به عنصر دلخواه خود attribute ای به نام id
میدهیم:
1 |
<h2 id="C4">Chapter 4</h2> |
سپس لینکی در همان صفحه ایجاد می کنیم و به href آن مقدار id
عنصر اولیه را به همراه علامت #
می دهیم:
1 |
<a href="#C4">Jump to Chapter 4</a> |
حالا اگر روی آن لینک کلیک کنیم به قسمت مورد نظر (در این مثال همان chapter 4) منتقل می شویم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<!DOCTYPE html> <html> <body>
<p><a href="#C4">Jump to Chapter 4</a></p>
<h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p>
<h2 id="C4">Chapter 4</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 10</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 16</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 17</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 19</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 20</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 21</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 22</h2> <p>This chapter explains ba bla bla</p>
<h2>Chapter 23</h2> <p>This chapter explains ba bla bla</p>
</body> </html> |
به خروجی این کد بروید و روی لینک اول صفحه کلیک کنید (سمت راست). مشاهده می کنید که شما را مستقیما به chapter 4 می برد و دیگر نیازی به اسکرول کردن های متوالی نیست. این قابلیت باعث می شود کاربر راحت تر به مطالب سایت شما دسترسی پیدا کند (البته اگر مقاله ی شما آنچنان حجیم و طولانی باشد که پیدا کردن قسمت های خاص در آن سخت باشد). همچنین کار رفرنس یا ارجاع دادن دیگر سایت ها به سایت خود را راحت تر می کنید، چرا که دیگر سایت ها می توانند به قسمتی از سایت شما که مد نظر دارند ارجاع دهند نه تمام مقالهتان.(
ایران گستر)
یکی از مثال های عملی آن را در صفحه ی توضیحات تگ <a> از توسعه دهندگان Mozilla می بینید. اگر روی این لینک کلیک کنید شما را مستقیما به صفحه ی تگ <a> می برد اما اگر روی این لینک کلیک کنید شما را به قسمت Accessibility concerns از همان صفحه می برد (اسکرول برای شما انجام شده است و دیگر در ابتدای صفحه نخواهید بود.(
ایران گستر)
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"] HTML[/caption]
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body>
<p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
</body> </html> |
گروه WWF یکی از گروه های فعال محیط زیستی است که با کمک مردم دنیا سعی در حفظ طبیعت این کره ی خاکی را دارد و متن بالا قسمتی از توضیح وب سایت خودشان در این مورد است. از آن جایی که ما عیناً نوشته ی وب سایت آن ها را برداشته و کپی کرده ایم باید آن را به صورت نقل قول بیاوریم تا مشخص شود که متعلق به ما نیست. اگر به خروجی این کد دقت کنید متوجه می شوید که قسمت
نقل قول شده کمی جلوتر از قسمت های دیگر است و این استایل پیش فرض HTML در مورد نقل قول ها است.(
ایران گستر )
بیایید
تگ های آن را بررسی کنیم.
تگ <q>
مخفف
quotation یا نقل قول است و وظیفه اش مشخص کردن نقل قول های مختصر و کوتاه است. اگر از این تگ استفاده کنید معمولا مرورگرها محتوایش را بین دو علامت Quotation () قرار می دهند. مثال:(
ایران گستر )
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>Browsers usually insert quotation marks around the q element.</p>
<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>
</body> </html> |
معمولا نقل قول هایی که از این قبیل هستند بسیار کوتاهند (در حد یک جمله یا کمتر) اما اگر بخواهیم قسمت طولانی تری را نقل کنیم چطور؟(
ایران گستر )
تگ <blockquote>
در زبان HTML وظیفه ی استناد و نقل قول قسمت کاملی از متن را دارد و مرورگرها معمولا آن را indent (جلوتر قراردادن نسبت به بقیه ی متن) می کنند. مثال:(
ایران گستر )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body>
<p>Browsers usually indent blockquote elements.</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
</body> </html> |
همانطور که می بینید در این نوع از نقل قول ها، متن طولانی تر است و تقریبا یک پاراگراف را شامل می شود.
نکته: شما می توانید با استفاده از CSS ظاهر انواع نقل قول ها را تغییر دهید بنابراین نگران ظاهر آن ها نباشد. دلیل اصلی استفاده از این تگ ها، مبحث semantic (
کدنویسی معنایی) است که برای موتورهای جستجو اهمیت دارد.(
ایران گستر )
تگ <abbr>
مخفف abbreviation و به معنی کلمات مخفف است. به طور مثال کلماتی که شکل اختصاری آن ها به کار می رود و یا سرواژه ها در این دسته قرار می گیرند. شما می توانید با استفاده از این تگ اعلام کنید که فلان کلمه ی متن یک سرواژه است یا مخفف عبارت خاصی است:(
ایران گستر )
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
<p>Marking up abbreviations can give useful information to browsers, translation systems and search-engines.</p>
</body> </html> |
نکته: همانطور که در کد بالا مشاهده می کنید ما به این تگ attribute ای به نام title داده ایم تا اگر کاربر معنی مخفف را ندانست، موس خود را روی آن نگه دارد و معنی برایش نمایش داده شود.
سوال: چرا متن را به صورت عادی ننویسیم؟ آیا لازم است از این تگ استفاده کنیم؟(
ایران گستر )
پاسخ: از نظر فنی خیر اما با استفاده از این تگ به
موتورهای جستجو کمک می کنید تا آنها بهتر متن سایتتان را درک کنند و سایت اصولی تری خواهید داشت. همچنین در صورت استفاده از این تگ، اگر کاربری از سیستم های ترجمه (مانند افزونه google translate و …) استفاده کند، می تواند ترجمه ی بهتری دریافت کند.(
ایران گستر )
تگ <address>
در زبان HTML اطلاعات تماس نویسنده ی صفحه و یا صاحب وب سایت را به کاربر ارائه می کند. محتوای این نوع تگ ها معمولا به صورت مورب (italic) به نمایش در می آیند. همچنین اکثر مرورگرها قبل و بعد از آن، یک line break (اینتر) اضافه می کنند:(
ایران گستر )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body>
<p>The HTML address element defines contact information (author/owner) of a document or article.</p>
<address> Written by John Doe.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address>
</body> </html> |
در خروجی، نحوه ی نمایش اطلاعات را مشاهده می کنید که italic هستند.
تگ <cite>
در هنگام نقل قول معمولا عنوان یک اثر را مشخص می کند. به طور مثال:(
ایران گستر )
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body>
<p>The HTML cite element defines the title of a work.</p> <p>Browsers usually display cite elements in italic.</p>
<img src="https://www.w3schools.com/html/img_the_scream.jpg" width="220" height="277" alt="The Scream"> <p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
</body> </html> |
در مثال بالا نقاشی معروف ادوارد مانچ به نام The Scream” را آورده ایم و از آنجا که The Scream نام اثر است آن را در cite قرار داده ایم.(
ایران گستر )
تگ <bdo>
مخفف bi-directional override (به معنی باطل کردن دو طرفه») می باشد. دلیل استفاده از آن باطل کردن یا نادیده گرفتن text direction فعلی است. text direction یعنی نوشته ی ما از راست به چپ نوشته می شود (مانند فارسی) یا از چپ به راست (مانند انگلیسی) و با استفاده از این تگ می توانید در وسط یک جمله این جهت را عوض کنید:(
ایران گستر )
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>If your browser supports bi-directional override (bdo), the next line will be written from right to left (rtl):</p>
<bdo dir="rtl">This line will be written from right to left</bdo>
</body> </html> |
اگر به خروجی کد بالا بروید می بینید که جمله ی This line will be written from right to left کاملا برعکس شده است.(
ایران گستر )
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"] HTML[/caption]
در جلسه ی قبل در مورد
attribute ای به نام style صحبت کردیم و با هم دیدیم که می توان با آن شکل ظاهری عناصر را در HTML تغییر داد اما وقتی صحبت از متون عادی می شود، HTML موارد خاصی را برای تغییر چهره شان دارد!(
ایران گستر)
<b>
متون را bold (پررنگ) می کند.<strong>
نشان دهنده ی یک متن مهم است.<i>
متون را italic (مورب) می کند.<em>
بر متن تاکید می کند.<mark>
متن را علامت گذاری می کند.<small>
متن را کوچک می کند.<del>
نشان دهنده ی متن حذف شده است.<ins>
نشان دهنده ی متن اضافه شده است.<sub>
نشان دهنده ی متن زیروند است.<sup>
نشان دهنده ی متن بالاوند است.سوال: برخی از این تگ ها متن را به یک شکل نمایش می دهند. چرا برای یک شکل چند تگ مختلف داریم؟
ایران گستر
پاسخ: استفاده ی صحیح از این تگ ها بسیار مهم است! اگر بنا بر تغییر ظاهر متن بود، می توانستیم از همان style و زبان CSS استفاده کنیم اما اینجا بحث بر سر
برنامه نویسی semantic (معنایی) است. هر کدام از این تگ ها علاوه بر نمایش دادن متن به شکل متفاوت، معنی متفاوتی برای موتورهای جستجو دارند. در ادامه ی این دوره بیشتر در مورد آن ها صحبت می کنیم.
ایران گستر
حتما متوجه شده اید که هر دوی این
تگ ها متن را bold و پررنگ می کنند و در ذهنتان سوال می کنید که فرقشان چیست؟ باید بگویم که <b>
تنها متن را پررنگ می کند و هیچ معنایی فراتر از آن ندارد:
ایران گستر
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>This text is normal.</p>
<p><b>This text is bold.</b></p>
</body> </html> |
اما تگ <strong>
علاوه بر پررنگ کردن متن یا کلمه، معنی strong (قوی یا مهم) را به آن متن اضافه می کند. شما در عمل و در کدهایتان هیچ تفاوتی را متوجه نمی شوید اما موتورهای جستجو بین این تگ ها و معانی فرق قائل می شوند. مثالی از تگ strong:
ایران گستر
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>This text is normal.</p>
<p><strong>This text is strong.</strong></p>
</body> </html> |
دقیقا مانند تفاوت تگ های قبلی، تگ <i>
در زبان HTML متن مورد نظرتان را مورب می کند و هیچ اهمیت خاص یا معنی دیگری به آن اضافه نمی کند:
ایران گستر
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>This text is normal.</p>
<p><i>This text is italic.</i></p>
</body> </html> |
اما تگ <em>
جدا از مورب کردن متن، به آن معنی و اهمیت خاصی نیز می دهد. مثال استفاده از این تگ را در
کد زیر می بینید:
ایران گستر
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body> </html> |
اگر بخواهم به طور خلاصه بگویم:
مرورگرها تگ های <strong>
و <b>
و تگ های <em>
و <i>
را به یک شکل نمایش می دهند اما تگ های <b>
و <i>
تنها کارکرد نمایشی دارند در حالی که <strong>
و <em>
به موتورهای جستجو می گویند فلان متن مهم است و معنی خاصی را همراهشان دارند.
ایران گستر
تگ <small>
متن مورد نظر شما را به شکل بسیار کوچک نمایش می دهد. به این مثال توجه کنید:
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<h2>HTML <small>Small</small> Formatting</h2>
<p>This is a paragraph and <small>smaller text goes here</small></p>
</body> </html> |
تگ <mark>
در زبان HTML متون مورد نظر شما را به حالت هایلایت شده (ماژیک فسفری) نمایش می دهد تا به مخاطب بفهماند فلان قسمت از متن اهمیت خاصی دارد:
ایران گستر
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body>
<h2>HTML <mark>Marked</mark> Formatting</h2>
</body> </html> |
در ابتدای مقاله در مورد تگ <del>
به طور خلاصه نوشتم نشان دهنده ی متن حذف شده است.» احتمالا این توضیح بیشتر شما را گیج کرده است! بگذارید واضح تر بگویم؛ برخی اوقات مطلبی را روی سایت خود منتشر می کنید اما پس از مدتی متوجه می شوید آن مطلب دیگر صحیح نیست. آنجاست که از تگ <del>
استفاده می کنیم.
ایران گستر
سوال: چرا از اول آن نوشته را حذف نکنیم و این همه به خودمان دردسر بدهیم؟
پاسخ: این تگ نوشته را حذف نمی کند بلکه نشان دهنده ی متن حذف شده است. یعنی دانستن این موضوع که قبلا این متن در وب سایت ما بوده است اهمیت دارد. به طور مثال ما در آموزش برنامه نویسی جاوا اسکریپت می گوییم از فلان دستور جاوا اسکریپت برای دریافت خصوصیات یک شیء استفاده می شود. بعد از گذشت یک سال یا دو سال یا هر مقدار زمان دیگر، نسخه ی جدیدی از جاوا اسکریپت معرفی شده و دستور ما منسوخ می شود. حالا می توانیم از تگ <del>
استفاده کنیم تا به مخاطب بفهمانیم دستور جدید این است اما فلان دستور قدیمی نیز وجود داشته است تا اگر کنجکاو بود در مورد آن تحقیق کند. این تنها یک مثال از مثال های عملی بسیار برای این تگ بود.
ایران گستر
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>The del element represents deleted (removed) text.</p>
<p>My favorite color is <del>blue</del> red.</p>
</body> </html> |
تگ <ins>
نشان دهنده ی متن اضافه شده است. این یعنی چه؟
اول از همه باید بگویم این تگ در فضای وب فارسی تقریبا هیچ استفاده ای ندارد چرا که فرهنگ استفاده از آن جا نیفتاده است. در وب سایت های انگلیسی زبان، زمانی که بخواهند به مخاطب نشان دهند فلان قسمت از متن بعدا اضافه شده است، از این تگ استفاده می کنند.می توان به جای آنکه مثل من تمرینات را به شکل یک تصویر ارائه کرد، آن ها را متنی ارائه کرد تا با فشرده شدن دکمه ای، جواب ها (قسمت های جاافتاده) به کدهای اصلی (متن حاضر) اضافه شود.
ایران گستر
مثال:
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>The ins element represent inserted (added) text.</p>
<p>My favorite <ins>color</ins> is red.</p>
</body> </html> |
تگ <sub>
در زبان HTML، متون زیروند را مشخص می کند. استفاده از این حروف در موقعیت های مختلفی امکان دارد که یکی از آن ها فرمول های شیمیایی است! فرمول شیمیایی زیر نحوه ی تبدیل کربن دی اکسید (co2) به کربن مونو اکسید (co) را نشان می دهد:
ایران گستر
CO2 + 2 e− + 2H+ → CO + H2O
می بینید که می توانیم به سادگی از این تگ برای نمایش زیروند ها استفاده کنیم. تصور کنید که انجام این کار با CSS و تگ Style چقدر زمان بر خواهد بود!
ایران گستر
تگ <sup>
دقیقا بر خلاف تگ <sub>
عمل می کند و برای بالاوند کردن متون استفاده می شود. از مثال های کاربردی آن باز هم می توان به سراغ مثال های علمی رفت؛ بیایید فرمول معروف آلبرت انیشتین را در رابطه با هم ارزی جرم و انرژی» بنویسیم:
ایران گستر
E=mc2
می بینید که برای اضافه کردن توان 2 از این تگ استفاده کرده ایم. البته تمام کاربرد های این تگ و تگ قبلی محدود به متون علمی نیست بلکه اینها یک مورد از چندین مورد استفاده ی آن هستند.
ایران گستر
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="300"] HTML[/caption]
عنصر <p>
در زبان HTML یک
پاراگراف را تعریف می کند:(
ایران گستر )
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<p>این یک پاراگراف است</p> <p>این یک پاراگراف است</p> <p>این یک پاراگراف است</p>
</body> </html> |
اگر به لینک بالا رفته و خروجی را مشاهده کنید، متوجه می شوید که مرورگرها به طور پیش فرض قبل و بعد از هر پاراگراف، کمی فضای خالی (white space) اضافه می کنند تا پاراگراف ها به عناصر پیرامون خود نچسبند.(
ایران گستر )
مسئله ی جالبی که در زبان HTML به آن برمیخوریم مسئله ی حذف شدن فضاهای خالی است. اگر شما به پاراگراف های خود فضای خالی اضافه کنید (به طور مثال استفاده از اینتر و رفتن به خط بعد و یا استفاده از چندین اسپیس) مرورگر تمام این فضاها را حذف می کند و نمایش نخواهد داد.(
ایران گستر )
به مثال زیر توجه کنید (در این مثال توضیحاتی نوشته ام بنابراین خود مثال را نیز مطالعه کنید):(
ایران گستر )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html> <body dir = 'rtl'>
<p> این یک پاراگراف است که شامل خطوط زیادی می شود این خطوط و فاصله ها در سورس کد قرار دارند اما مرورگر ها آن را حذف می کنند. </p>
<p> این یک پاراگراف است که شامل فضاهای خالی زیادی است که در سورس کد قرار دارند اما در مرورگر نادیده گرفته می شوند. </p>
<p> تعداد خط ها در هر پاراگراف به اندازه ی مرورگر و صفحه ی کاربر بستگی دارد. به طور مثال اگر اندازه ی مرورگر را کوچک تر کنید تعداد خط های پاراگراف هایتان نیز بیشتر می شود چرا که باید متن را در صفحه ی کوچکتری جا بدهند و در نتیجه زودتر می شکنند. </p>
</body> </html> |
اگر دقیقا به این کد دقت کنید متوجه می شوید فضاهای خالی و اینترهای متعددی در آن استفاده شده است. حالا بیایید خروجی آن در JSBin را ببینیم.(
ایران گستر )
در قسمت آخر این مثال گفته ام که با تغییر سایز مرورگر و صفحه ی کاربر (لپتاپ، تبلت، تلفن هوشمند و …)، تعداد خطوط یک پاراگراف تغییر می کند. برای مشاهده ی این مسئله با چشم های خودتان می توانید در JSBin خط وسط صفحه را بگیرید و فضای سمت راست را کوچکتر کنید. می بینید که تعداد خطوط بیشتر می شوند. همچنین می توانید به جای این کار، پنجره ی مرورگر خود را کوچک و بزرگ کنید تا شاهد این مسئله باشید.(
ایران گستر )
توجه داشته باشید که اگر
تگ پایانی <p>
را فراموش کنید باز هم خروجی به شکل صحیح نمایش داده می شود:
1 2 |
<p>This is a paragraph. <p>This is another paragraph. |
اما در قسمت قبل نیز به شما توصیه ی اکید کردیم که به هیچ عنوان چنین کاری نکنید.
نکته: من در مثال های مختلف چینش صفحات را راست چین» می کنم تا متن های فارسی بهتر نمایش داده شوند ('dir = 'rtl
). اگر متوجه آن نمی شوید نگران نباشید در آینده با آن آشنا می شویم.(
ایران گستر )
حتما با خود می گویید اگر مرورگرها فضای خالی در زبان HTML را نادیده می گیرند، پس چطور این فضا را در متون خود ایجاد کنیم؟ اگر بخواهم به خط بعد بروم باید چکار کنم؟ نگران نباشید این کار بسیار ساده است؛ از عنصر <br>
استفاده می کنیم! در
برنامه نویسی به مفهوم اینتر زدن و به خط بعد رفتن line break می گوییم که یعنی شکستن خط. بنابراین در طول این دوره نیز از همین مفهوم به جای اینتر استفاده می کنیم.(
ایران گستر )
حتما خودتان متوجه شده اید که استفاده از <br>
بسیار آسان است:
1 2 3 4 5 6 7 8 |
<!DOCTYPE html> <html> <body dir = 'rtl'>
<p>این خط شامل<br>یک پاراگراف<br>می باشد که در خط جداگانه قرار دارد</p>
</body> </html> |
حالا می بینید با اینکه تمام این متن در سورس کد (HTML) در یک خط نوشته شده است اما به خاطر استفاده از <br>
در حالت خروجی خود دارای چندین خط می باشد.(
ایران گستر )
نکته: اگر از قسمت قبل یادتان باشد به تگ هایی مانند <br>
تگ پوچ یا تگ خالی می گفتیم؛ این تگ ها، تگ پایانی ندارند.
سوال: اما اگر من بخواهم مطلبی بنویسم که line break های زیادی داشته باشد چطور؟ به عنوان مثال اگر بخواهم یک شعر بنویسم (که دارای فضاهای خالی زیادی است) نمی توانم از <br>
استفاده کنم چرا که باید صد ها مورد تگ <br>
بنویسم!(
ایران گستر )
پاسخ: برای چنین حالت هایی باید از <pre>
که مخفف preformatted (به معنی از پیش قالب بندی شده») است، استفاده کنید. در واقع هر متنی که داخل <pre>
قرار بگیرد دقیقا به شکلی نمایش داده می شود که در سورس کد نوشته شده باشد.(
ایران گستر )
استفاده از این تگ، فونتِ متن داخلش را تغییر می دهد که می توانید آن را بعدا با کمک CSS تغییر دهید. مثال:(
ایران گستر )
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre> گر مرد رهی میان خون باید رفت
از پای فتاده، سرنگون باید رفت
تو پای به راه نه و هیچ مپرس
خود راه بگویدت که چون باید رفت </pre>
</body> </html> |
هنوز دوره ی CSS را برگزار نکرده ایم اما اگر از قبل با CSS آشنایی دارید می توانم به شما کد های پیش فرض تگ pre را معرفی کنم:(
ایران گستر )
1 2 3 4 5 6 |
pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0; } |
دلیل عجیب بودن شکل متن داخل این تگ همین کد
CSS است. واضح است که شما می توانید این کد را تغییر دهید تا شکل متن تان نیز تغییر کند.(
ایران گستر )
به طور مثال شعر بالا را می توان اینگونه نمایش داد:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <head> <style> pre { display: block; font-family: calibri; white-space: pre; margin: 1em 0; } </style> </head> <body>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre> گر مرد رهی میان خون باید رفت
از پای فتاده، سرنگون باید رفت
تو پای به راه نه و هیچ مپرس
خود راه بگویدت که چون باید رفت </pre>
</body> </html> |
حالا با مراجعه به خروجی این کد متوجه می شوید که شکل متن به حالت عادی خود برگشته است.(
ایران گستر )
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
وقتی می گوییم کدهای کامپیوتری یعنی کدهایی که به یکی از زبان های برنامه نویسی یا نشانه گذاری یا … تعلق داشته باشد. اگر به کدهای کامپیوتری نگاه کرده باشید متوجه می شوید که از نظر ظاهری کمی با متون عادی متفاوت هستند. ما می خواهیم در این قسمت این حالت را در HTML به وجود بیاوریم.(
ایران گستر)
کد های کامپیوتری تنها متونی نیستند که از نظر ظاهری چنین تفاوت هایی دارند، بلکه ورودی های کیبورد (مثلا وقتی می گوییم کلیدهای Ctrl و S را برای ذخیره سازی فشار دهید و …) و موارد دیگری نیز در این گروه هستند و ما می خواهیم تک تک آن ها را بررسی کنیم.(
ایران گستر)
ورودی های صفحه کلید ورودی هایی هستند که از طرف کاربر و با فشردن کلیدهای خاص انجام می گیرند. برای نمایش این نوع ورودی ها می توانید از تگ <kbd>
استفاده کنید. نوشته هایی که درون این
تگ قرار بگیرند با فونت monospace نمایش داده خواهند شد. به این مثال توجه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body>
<h2>The kbd Element</h2> <p>The kbd element represents user input:</p>
<p>Save the document by pressing <kbd>Ctrl + S</kbd></p>
</body> </html> |
به خروجی بروید تا قسمت Ctrl و S را در فونت monospace مشاهده کنید.(
ایران گستر)
معمولا برای نمایش خروجی یک کد
برنامه نویسی یا یک برنامه ی کامپیوتری از تگ <samp>
استفاده می کنند. متنی که در این تگ نوشته شود نیز با فونت monospace مرورگر نمایش داده خواهد شد. مثال:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body>
<h2>The samp Element</h2> <p>The samp element represents output from a program or computing system:</p>
<p>If you input wrong value, the program will return <samp>Error!</samp></p>
</body> </html> |
کدهای برنامه نویسی مهم ترین و شایع ترین دلیل استفاده از این نوع فونت هستند و شکل کاملا متفاوتی دارند. اگر شما بخواهید قسمتی از کدی را در وب سایت خود نمایش دهید می توانید از تگ <code>
استفاده کنید تا کدها در فونت monospace به نمایش در بیایند.(
ایران گستر)
در مثال زیر چند خط کد ساده را نوشته ایم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body>
<h2>The code Element</h2> <p>Programming code example:</p>
<code> x = 5; y = 6; z = x + y; </code>
</body> </html> |
حتما متوجه نکته ای شده اید. در خروجی ما اینترها رعایت نشده اند و تمام کد در یک خط نوشته شده است، به این شکل:
x = 5; y = 6; z = x + y;
اما معمولا هنگام کدنویسی کسی اینطور کد نمی نویسد بنابراین راه حل چیست؟
تگ <code>
مانند خود HTML کاری با اینترها و فضای خالی ندارد. برای آنکه اینترها (البته نحوه ی صحیح بیان آن line break است) را رعایت کنیم باید از تگ <pre>
استفاده شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<p>The code element does not preserve whitespace and line-breaks.</p> <p>To fix this, you can put the code element inside a pre element:</p>
<pre> <code> x = 5; y = 6; z = x + y; </code> </pre>
</body> </html> |
همچنین برای نمایش متغیرها، چه در زبان های برنامه نویسی و چه در معادلات فیزیکی و ریاضی، می توانیم از <var>
استفاده کنیم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 |
<!DOCTYPE html> <html> <body>
<h2>The var Element</h2> <p>Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>.</p>
</body> </html> |
سوال: چه تفاوتی دارد که از کدام یک از این تگ ها استفاده کنیم؟ همه ی آن ها ظاهر یکسانی دارند.(
ایران گستر)
پاسخ: بله درست است، تمام آن ها ظاهر یکسانی دارند و با فونت monospace نمایش داده می شوند اما شما نباید برای نمایش همه ی آن ها از یک تگ استفاده کنید. دلیل اش هم این است که این تگ ها برای موتور های جست و جو معنی دارند و به مبحث کدنویسی Semantic (به معنی معنایی») مربوط می شوند. یک موتور جست و جو می تواند به دیدن این تگ ها بفهمد که محتوای روبرویش چیست و آن را بهتر درک کند.(
ایران گستر)
برخی از کاراکترها در زبان های برنامه نویسی رزرو شده هستند؛ برخی کاراکترها نیز در زبان HTML رزرو شده هستند یعنی در
زبان HTML معنی خاصی دارند (مثلا کاراکترهای <
و >
که نشان دهنده ی تگ ها هستند). حالا اگر بخواهیم از این کاراکترها به صورت عادی در متن صفحاتمان استفاده کنیم چه می شود؟ باید از HTML Entities استفاده کنید. در واقع برای دو هدف اصلی از HTML Entities استفاده می شود:(
ایران گستر)
به طور مثال اگر بخواهیم از علامت کمتری یا بیشتری (> <) در متن خود استفاده کنیم، ممکن است مرورگر تصور کند در حال نوشتن HTML هستیم و تمام متن ما را خراب کند.(
ایران گستر)
معمولا ساختار کلی entity ها به این شکل است:
1 2 3 4 |
&entity_name; OR
&#entity_number; |
به طور مثال برای حل مشکل استفاده از علامت کمتری باید از ;< یا ;< استفاده کنیم! مزیت استفاده از entity ها آسان بودن حفظ و کار با آن ها است اما نکته ی منفی آن ها این است که برخی از مرورگر ها از تمام entity پشتیبانی نمی کنند و باید مواظب این مورد باشید.(
ایران گستر)
کاراکتری در زبان HTML وجود دارد به نام Non-breaking Space (به معنی اسپیس غیر شکستنی») که به این شکل نوشته می شود: ; 
.(
ایران گستر)
ما از آن جهت به این کاراکتر اسپیس غیر شکستنی می گوییم که اگر دو کلمه با این اسپیس از هم جدا شوند دیگر در آخر خط شکسته نمی شوند و یکی از آن ها به خط بعد نمی رود بلکه همیشه به هم چسبیده اند. تصور کنید می خواهیم بگوییم 10 کیلومتر بر ساعت؛ باید آن را اینطور بنویسیم:(
ایران گستر)
10 km/h
مواردی مانند بالا (10 کیلومتر بر ساعت) نباید از هم جدا شوند چرا که قسمت عددی مقدار را نشان می دهد و قسمت حرفی نیز واحد آن را نشان می دهد، اما در عین حال باید بینشان اسپیس باشد و به هم نچسبند. در این حالت از Non-breaking Space استفاده می کنیم.(
ایران گستر)
اما استفاده ی اصلی از Non-breaking Space زمانی است که می خواهیم چندین اسپیس را در متن خود داشته باشیم اما همانطور که می دانید HTML اسپیس های بیشتر از یک عدد را حذف می کند و به آن ها اهمیت نمی دهد. اگر در سورس کد خود تنها اسپیس بزنید هیچ اتفاقی نمی افتد اما اگر از Non-breaking Space استفاده کنید اسپیس ها سر جایشان خواهند ماند.(
ایران گستر)
در اینجا لیست برخی از Entity های مختلف در زبان HTML را برایتان آورده ایم:
کد عددی Entity | کد حرفی Entity | نام یا توضیح | نتیجه |
| non-breaking space | ||
< | < | کمتر از (در فارسی برعکس است) | < |
> | > | بیشتر از (در فارسی برعکس است) | > |
& | & | علامت ampersand | & |
" | علامت نقل قول double | ||
‘ | ' | علامت نقل قول single | ‘ |
¢ | سنت (پول) | ||
£ | £ | پوند (پول) | £ |
¥ | ین (پول) | ||
€ | یورو (پول) | ||
© | © | علامت کپی رایت (حق انتشار) | © |
® | ® | علامت تجاری ثبت شده | ® |
هشدار: کد حرفی Entity ها نسبت به بزرگی و کوچکی حروف حساس است.(
ایران گستر)
برای مشاهده ی لیست کامل Entity های HTML به این صفحه (از سایت کنسرسیوم جهانی وب) و این صفحه مراجعه کنید.
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
طراحی واکنش گرا نوعی از
طراحی سایت بوده که در سال های اخیر باب شده است و هدف اصلی آن استفاده از HTML و CSS به طوری است که ظاهر و سایز صفحات را بر اساس نیازشان تغییر دهد.(
ایران گستر)
نیاز به تغییر سایز صفحات به خاطر متغیر بودن اندازه ی صفحات دستگاه هایی است که به سایت ما مراجعه می کنند. بزرگی صفحه ی کامپیوتر های عادی با یک گوشی هوشمند یا تبلت یکی نیست و این مسئله باعث می شود که بازدید با گوشی همراه از
سایت ما آزار دهنده باشد. راه حل این مشکل طراحی واکنش گرا است.(
ایران گستر)
می خواهیم چند مورد از مواردی را که در این زمینه کاربرد دارند برایتان بازگو کنیم.(
ایران گستر)
اولین قدم برای واکنش گرا کردن یک سایت تنظیم viewport آن با استفاده از <meta>
می باشد. در دو مثال زیر تفاوت استفاده از آن را متوجه می شوید:(
ایران گستر)
مثال اول
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body>
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
<img src="https://www.w3schools.com/css/img_chania.jpg" alt="Chania" width="460" height="345">
<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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</body> </html> |
اگر اندازه ی خروجی یا سایز پنجره تان را کوچک کنید متوجه می شوید که تصویر موجود در
کد بالا از کادر خارج می شود. این روش، روش بسیار بدی برای طراحی سایت است.(
ایران گستر)
مثال دوم
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> img { max-width: 100%; height: auto; } </style> </head> <body> <p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
<img src="https://www.w3schools.com/css/img_chania.jpg" alt="Chania" width="460" height="345">
<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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</body> </html> |
در این مثال اگر خروجی یا اندازه ی مرورگر خود را کوچکتر کنید متوجه می شوید که سایز تصویر نیز تغییر می کند و به نوعی تمام صفحه به هم نمیریزد. دلیل اصلی تعیین Viewport نیز همین نظم است.(
ایران گستر)
تصاویر واکنش گرا تصاویری هستند که با تغییر سایز صفحه، سایزشان تغییر می کند. اگر خاصیت width
را برابر با 100 درصد گذاشته باشید، تصاویر از نوع واکنش گرا خواهند بود و سایزشان تغییر می کند.(
ایران گستر)
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body>
<h2>Responsive Image</h2> <p dir='rtl'>اگر خاصیت width را برابر با 100 درصد گذاشته باشید، تصاویر از نوع واکنش گرا خواهند بود و سایزشان تغییر می کند.</p>
<img src="https://www.w3schools.com/html/img_girl.jpg" style="width:100%;">
</body> </html> |
به صفحه ی خروجی مثال بالا بروید و سایز قسمت خروجی یا مرورگر خود را کوچک کنید. به سرعت متوجه می شوید که سایز تصویر نیز تغییر می کند.(
ایران گستر)
البته مشکلی وجود دارد؛ اگر سایز قسمت خروجی را بزرگتر از سایز عادی اش بکنید، تصویر نیز بزرگتر از سایز عادی اش می شود و صفحه را زشت می کند. برای آنکه به تصاویر اجازه ندهیم از سایز مشخصی بزرگتر شوند می توانیم به جای استفاده از خاصیت width
از خاصیت max-width
استفاده کنیم.(
ایران گستر)
در این صورت شاهد مثال زیر می شویم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body>
<h2>Responsive Image</h2> <p dir='rtl'>اگر خاصیت max-width را برابر با 100 درصد گذاشته باشید، تصاویر از نوع واکنش گرا خواهند بود و سایزشان تغییر می کند. همچنین از حد عادی خودشان بزرگتر نمی شوند. برای مشاهده ی تفاوت از خط وسط صفحه بگیرید و قسمت خروجی را بزرگتر کنید. </p>
<img src="https://www.w3schools.com/html/img_girl.jpg" style="max-width:100%;height:auto;">
</body> </html> |
حالا هر چقدر هم که قسمت خروجی را بزرگتر کنید، سایز تصویر ما افزایش بیش از حد نخواهد داشت.
برخی اوقات تغییر سایز تصویر راه حل خوبی نیست و به درستی کار نمی کند. برای چنین مواقعی می توانیم از عنصر <picture>
استفاده کنیم. این عنصر به شما اجازه می دهد که چندین تصویر را برای یک قسمت قرار دهید که بر اساس سایز صفحه، کاربر تصویر مناسب اش را به او بدهیم. به این مثال نگاهی بیندازید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body>
<h2>Show Different Images Depending on Browser Width</h2> <p>Resize the browser width and the image will change at 600px and 1500px.</p>
<picture> <source srcset="https://www.w3schools.com/html/img_smallflower.jpg" media="(max-width: 600px)"> <source srcset="https://www.w3schools.com/html/img_flowers.jpg" media="(max-width: 1500px)"> <source srcset="https://www.w3schools.com/html/flowers.jpg"> <img src="https://www.w3schools.com/html/img_flowers.jpg" alt="Flowers" style="width:auto;"> </picture>
</body> </html> |
در مثال بالا اگر سایز قسمت خروجی را تغییر دهید، تصاویر متفاوتی را مشاهده خواهید کرد! این قابلیت می تواند به شما کمک بسیار زیادی بکند.(
ایران گستر)
نتها نکته ی منفی این دستور این است که با آپلود کردن چندین عکس برای هر قسمت از سایتتان، فضای زیادی از سرور را اشغال می کنید بنابراین پیشنهاد ما این است که از این قابلیت تنها در جاهایی استفاده کنید که با کدنویسی جواب نگرفته اید.(
ایران گستر)
با بزرگ و کوچک شدن یک صفحه، متون ما نیز باید کوچک و بزرگ شوند، در غیر این صورت یا صفحه ظاهر زشتی پیدا می کند و یا خواندن مطالب خیلی سخت می شود. برای واکنش گرا کردن یک متن باید سایز آن را با واحد vw تنظیم کنیم و از مقادیری مثل پیکسل و … دوری کنیم. به کد زیر نگاه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p dir='rtl' style="font-size:5vw;">با تغییر سایز این قسمت متوجه می شوید که اندازه ی فونت و نوشته ی ما نیز تغییر می کند.</p>
<p dir='rtl' style="font-size:5vw;">اگر از 10vw استفاده کنید اندازه ی فونت شما 10 درصد از کل viewport را خواهد گرفت.</p>
<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.</p>
</body> </html> |
با تغییر سایز قسمت خروجی کد بالا می توانید به وضوح مشاهده کنید که اندازه ی نوشته ها نیز تغییر می کند تا کاربر بهتر بتواند محتوا را بخواند.(
ایران گستر)
media query ها دستور هایی متعلق به CSS هستند که می توان با استفاده از آن ها طرح صفحات را کاملا تغییر داد به طوری که کاربر فکر می کند وارد سایت دیگری شده است! بهترین روش یادگیری آن از طریق مثال است بنابراین بیایید کدهای زیر را بررسی کنیم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing:border-box; }
.left { background-color:#2196F3; padding:20px; float:left; width:20%; /* The width is 20%, by default */ }
.main { background-color:#f1f1f1; padding:20px; float:left; width:60%; /* The width is 60%, by default */ }
.right { background-color:#4CAF50; padding:20px; float:left; width:20%; /* The width is 20%, by default */ }
/* Use a media query to add a break point at 800px: */ @media screen and (max-width:800px) { .left, .main, .right { width:100%; /* The width is 100%, when the viewport is 800px or smaller */ } } </style> </head> <body>
<h2>Media Queries</h2> <p>Resize the browser window.</p>
<p dir = 'rtl'>قسمت خروجی را کوچکتر کنید تا به 800px برسد. آن موقع متوجه تغییر می شوید سپس قسمت خروجی را بزرگتر کنید تا ببینید در حالت بزرگ چه اتفاقی می افتد. </p>
<div class="left"> <p>Left Menu</p> </div>
<div class="main"> <p>Main Content</p> </div>
<div class="right"> <p>Right Content</p> </div>
</body> </html> |
به خروجی کد بالا بروید و سایز قسمت خروجی را بزرگتر کنید، سپس کوچکتر کنید. متوجه خواهید شد که با تغییر سایز صفحه و رسیدن به نقطه ی عرض 800 پیکسل محتوا تغییر می کند. این به دلیل استفاده از دستور زیر است:(
ایران گستر)
@media screen and (max-width:800px)
این دستور یک media query است و می گوید زمانی که عرض صفحه به 800 پیکسل رسید، استایل های قبلی را فراموش کن و استایل هایی که من می گویم را اعمال کن. به همین دلیل است که شاهد تغییر محتوا در عرض 800 پیکسل هستیم. در مورد media query ها در دوره ی آموزش زبان CSS بیشتر صحبت خواهیم کرد.(
ایران گستر)
با استفاده از فریم ورک های مختلف زبان CSS می توانید صفحات خود را به صورت واکنش گرا طراحی کنید. تقریبا تمام آن ها رایگان و یادگیری شان نیز بسیار ساده است. مثال زیر با استفاده از فریم ورک Bootstrap طراحی شده است:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body>
<div class="container"> <div class="jumbotron"> <h1>My First Bootstrap Page</h1> <p>Resize this responsive page to see the effect!</p> </div> <div class="row"> <div class="col-sm-4"> <h3>Column 1</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> </div> <div class="col-sm-4"> <h3>Column 2</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> </div> <div class="col-sm-4"> <h3>Column 3</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p> </div> </div> </div>
</body> </html> |
مشاهده ی خروجی در JSBin
به خروجی کد بالا بروید و سایز صفحه را بزرگ و کوچک کنید. به راحتی متوجه تغییرات صفحه خواهید شد.(
ایران گستر)
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
صفحات وب مانند صفحات رومه ها و مجلات، محتوای خود را در ستون ها و طرح های خاصی نمایش می دهند. با معرفی HTML5 مبحث
semantics وارد دنیای طراحی وب شد و حالا عناصری را داریم که semantic هستند.(
ایران گستر)
semantic در لغت به معنی معنایی» است و وقتی می گوییم عناصرِ semantic، منظورمان عناصری است که در HTML5 دیگر تنها یک عنصر نیستند، بلکه برای موتورهای جست و جو معنی خاصی دارند.(
ایران گستر)
عناصر semantic ای که برای تعریف قسمت های مختلف یک صفحه استفاده می شوند از این قرار اند:(
ایران گستر)
ایران گستر)
برای درک بهتر به تصویر زیر نگاه کنید:(
ایران گستر)
طرح کلی HTML5
این نوع طرح، تنها طرحی نیست که شما می توانید برای
سایت خود انتخاب کنید بلکه طرح های بسیار زیادی وجود دارد اما ما می خواهیم در این قسمت در مورد این طرح صحبت کنیم چرا که یکی از قدیمی ترین و اصیل ترین طرح ها برای صفحات HTML است.(
ایران گستر)
برای ایجاد این نوع طرح چند ستونه 5 روش اصلی وجود دارد:(
ایران گستر)
ایران گستر)
در سال های قبل (بسیار قبل تر از معرفی HTML5) طراحان مجبور بودند برای طراحی سایت های چند ستونه (طرح موجود در تصویر بالا) از <table> یا همان جدول ها در HTML استفاده کنند. واضح است که جدول ها برای شکل دهی به صفحات وب ساخته نشده اند بلکه برای نمایش داده های خاص که نیاز به جدول دارند می باشند.(
ایران گستر)
استفاده از <table> برای شکل دادن به صفحات وب تان کاری بسیار طاقت فرسا و غیر استاندارد است که کاملا منسوخ شده و هیچ انسان عاقلی دیگر از آن استفاده نمی کند.(
ایران گستر)
استفاده از framework های زبان
CSS نیز یکی دیگر از این گزینه ها است اما از آنجا که نمی توان یک framework کامل CSS را در این مقاله توضیح داد، به صورت خلاصه از کنار آن عبور می کنیم چرا که شما می توانید با جست و جو در اینترنت در مورد فریم ورک های CSS اطلاعات بیشتری کسب کنید. اما به طور خلاصه چند مورد از این فریم ورک ها را به شما معرفی می کنیم.(
ایران گستر)
فریم ورک Bulma یکی از محبوب ترین فریم ورک های CSS است که قبلا با نام Scotch شناخته میشد. از مزیت های اصلی این فریم ورک این است که از CSS خالص تشکیل شده است و هیچ کد جاوا اسکریپتی ندارد؛ بنابراین تنها باید یک فایل css را درون پروژه ی خود import کنید و نیازی به فایل های js نیست.(
ایران گستر)
همچنین این فریم ورک بر اساس Flexbox طراحی شده است و بر پایه ی Sass می باشد بنابراین تنها از کدهایی استفاده خواهید کرد که به آن ها نیاز داشته باشید. طراحی با این فریم ورک کاملا واکنش گرا (responsive) بوده و اولویت خود را بر گوشی های موبایل قرار داده است.(
ایران گستر)
فکر نمی کنم Bootstrap نیاز به معرفی داشته باشد! Bootstrap یکی از بزرگترین فریم ورک های CSS در دنیا می باشد که تا امروز به نسخه ی چهارم خود رسیده است. این فریم ورک، فریم ورک پیش فرض اکثر توسعه دهندگان وب است و بر اساس SASS و LESS ساخته شده است. می توان به صورت خلاصه گفت که
Bootstrap بزرگترین فریم ورک CSS محسوب می شود.(
ایران گستر)
فریم ورک های بسیار دیگری نیز وجود دارد اما ما نمی توانیم تمام آن ها را بررسی کنیم. این دو مورد از موارد مشهور در کنار فریم ورک Foundation هستند.(
ایران گستر)
استفاده از خصوصیت float برای نظم دهی به صفحات وب و طراحی چند ستونه از شایع ترین روش های طراحی است. از مزیت های کار با float این است که یادگیری آن بسیار آسان است؛ تنها کافی است با خصوصیت های float و clear آشنا باشید. اما نکته ی منفی آن اینجاست که عناصر float وابسته به document flow (جریان عناصر در سند HTML) هستند که از انعطاف پذیری CSS کم می کند.(
ایران گستر)
به مثال زیر توجه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; }
/* Style the header */ header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white; }
/* Create two columns/boxes that floats next to each other */ nav { float: left; width: 30%; height: 300px; /* only for demonstration, should be removed */ background: #ccc; padding: 20px; }
/* Style the list inside the menu */ nav ul { list-style-type: none; padding: 0; }
article { float: left; padding: 20px; width: 70%; background-color: #f1f1f1; height: 300px; /* only for demonstration, should be removed */ }
/* Clear floats after the columns */ section:after { content: ""; display: table; clear: both; }
/* Style the footer */ footer { background-color: #777; padding: 10px; text-align: center; color: white; }
/* Responsive layout - makes the two columns/boxes stack on top of each other instead of next to each other, on small screens */ @media (max-width: 600px) { nav, article { width: 100%; height: auto; } } </style> </head> <body>
<h2>CSS Layout Float</h2> <p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p> <p>Resize the browser window to see the responsive effect (you will learn more about this in our next chapter - HTML Responsive.)</p>
<header> <h2>Cities</h2> </header>
<section> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav>
<article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article> </section>
<footer> <p>Footer</p> </footer>
</body> </html> |
در مثال بالا یک صفحه ی وب را به صورت ساده طراحی کرده ایم که از عناصر semantic در HTML5 استفاده کرده است.(
ایران گستر)
قابلیت Flexbox نسبتا از قابلیت های جدید در CSS3 است. این قابلیت سعی می کند صفحات را طوری تنظیم کند که با تغییر سایز مرورگر کاربر و دستگاه های مختلف، صفحه به هم نریزد بلکه مناسب با آن سایز نمایش داده شود. در
دوره ی CSS در این مورد صحبت خواهیم کرد.(
ایران گستر)
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<!DOCTYPE html> <html lang="en"> <head> <title>CSS Template</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; }
/* Style the header */ header { background-color: #666; padding: 30px; text-align: center; font-size: 35px; color: white; }
/* Container for flexboxes */ section { display: -webkit-flex; display: flex; }
/* Style the navigation menu */ nav { -webkit-flex: 1; -ms-flex: 1; flex: 1; background: #ccc; padding: 20px; }
/* Style the list inside the menu */ nav ul { list-style-type: none; padding: 0; }
/* Style the content */ article { -webkit-flex: 3; -ms-flex: 3; flex: 3; background-color: #f1f1f1; padding: 10px; }
/* Style the footer */ footer { background-color: #777; padding: 10px; text-align: center; color: white; }
/* Responsive layout - makes the menu and the content (inside the section) sit on top of each other instead of next to each other */ @media (max-width: 600px) { section { -webkit-flex-direction: column; flex-direction: column; } } </style> </head> <body>
<h2>CSS Layout Flexbox</h2> <p>In this example, we have created a header, two columns/boxes and a footer. On smaller screens, the columns will stack on top of each other.</p> <p>Resize the browser window to see the responsive effect.</p> <p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 and earlier versions.</p>
<header> <h2>Cities</h2> </header>
<section> <nav> <ul> <li><a href="#">London</a></li> <li><a href="#">Paris</a></li> <li><a href="#">Tokyo</a></li> </ul> </nav>
<article> <h1>London</h1> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> <p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p> </article> </section>
<footer> <p>Footer</p> </footer>
</body> </html> |
ماژول Grid در CSS به شما اجازه می دهد تا طرحی داشته باشید که بر اساس یک Grid (به معنی شبکه توری» یا مشبک») باشد. به تصویر زیر نگاه کنید:(
ایران گستر)
در این تصویر دو صفحه ی وب را می بینید. صفحه ی سمت راست بر اساس Grid طراحی شده است و همانطور که گفتیم Grid به شکل یک شبکه ی توری مانند است و خانه هایی را که می بینید، شکل می دهد. حالا می توانید عناصر خود را با دقت فراوان داخل این خانه ها قرار دهید. اگر از
Grid استفاده کنید دیگر نیازی به استفاده از float و مدیریت فضای پیشرفته نخواهید داشت.(
ایران گستر)
نکته: خصوصیت Grid که به صورت پیش فرض در CSS وجود دارد در مرورگر Internet Explorer 15 و قبل تر کار نمی کند اما Grid هایی وجود دارند که توسط توسعه دهندگان به عنوان کدهای جداگانه ساخته شده اند. شما می توانید با دانلود کردن این نوع Grid ها از آن ها در هر مرورگری استفاده کنید.(
ایران گستر)
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
عنصر <head>
در یک سند HTML وظیفه ی نگه داری از
metadata را دارد و بین <html>
و <body>
قرار می گیرد. metadata یعنی داده هایی که در مورد داده های دیگر» هستند! به طور مثال وقتی می گوییم metadata های سند HTML» یعنی اطلاعاتی درباره ی سند HTML (که خود اطلاعات است).(
ایران گستر)
واضح است که metadata نمایش داده نمی شود و شکل بصری ندارد بلکه مواردی مثل این موارد را شامل می شود:(
ایران گستر)
بیایید تک تک این موارد را بررسی کنیم.(
ایران گستر)
عنصر <title>
عنوان و تیتر کل سند را انتخاب می کند و باید در تمام اسناد HTML وجود داشته باشد تا HTML شما غیر معتبر تلقی نشود.(
ایران گستر)
به عبارت دیگر 3 کار اصلی <title>
از این قرار است:(
ایران گستر)
<title>
خواهد بود<title>
همان چیزی است که در موتورهای جست و جو به عنوان لینک سایت شما می آید
به این مثال ساده نگاه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body dir = 'rtl'>
<p>محتوای body در صفحه ی مرورگر نمایش داده می شود</p> <p>محتوای تگ title نیز در تب مرورگر، در favorites و در موتور های جست و جو به نمایش در می آید</p>
</body> </html> |
همانطور که می بینید این موضوع بسیار ساده بود.
تگ <style>
استایل های CSS را مشخص می کند.
ما در دوره ی CSS توضیح میدهیم که کدهای CSS به سه روش اصلی نوشته می شوند:
در واقع تگ <style>
مورد دوم یا internal است. به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> <style> body {background-color: powderblue;} h1 {color: red;} p {color: blue;} </style> </head> <body>
<h1>This is a Heading</h1> <p>This is a paragraph.</p>
</body> </html> |
استفاده از کدهای
CSS به این صورت ایده آل ترین حالت ممکن نیست اما ضربه ی جدی نیز به شما نمی زند. معمولا در یک
وب سایت واقعی از آن جا که کدهای CSS بسیار حجیم می شوند مجبور می شوید آن ها را در یک فایل جداگانه (external) بنویسید و سپس با استفاده از link آن ها را به سند HTML متصل کنید. این نوع از نوشتن کدهای CSS معمولا برای مباحث یادگیری و تمرین و یا کدهای CSS خاصی است که برنامه نویس می خواهد در آن قسمت قرار بگیرند.(
ایران گستر)
از تگ <link>
برای آدرس دهی به یک فایل خارجی استفاده می شود که معمولا جاوا اسکریپت و یا CSS است. با این کار فایل های خارجی خود را به سند HTML متصل کرده و می توانیم از کدهای داخلشان استفاده کنیم.(
ایران گستر)
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> <link rel="stylesheet" href="https://www.w3schools.com/html/mystyle.css"> </head> <body>
<h1>This is a Heading</h1> <p>This is a paragraph.</p>
</body> </html> |
همانطور که میبینید از یک فایل CSS خارجی و متعلق به سایت دیگری استفاده کرده ایم.(
ایران گستر)
تگ <meta>
کار مشخص کردن اطلاعات خاصی را دارد. به طور مثال اینکه character set استفاده شده در سند چیست؟ یا چه keyword هایی برای این صفحه تعیین شده است؟ author (نویسنده) ی این صفحه کیست؟ و الی آخر …(
ایران گستر)
مرورگرها به طور عمده از <meta>
برای بهتر نمایش دادن محتوا و موتورهای جست و جو برای دریافت keyword ها استفاده می کنند.(
ایران گستر)
– برای تعیین character set از این کد استفاده می کنیم:(
ایران گستر)
1 |
<meta charset="UTF-8"> |
پیشنهاد تمام متخصصین حوزه ی وب این است که اگر هر جایی (چه پایگاه داده، چه اسناد HTML و …) مجبور به انتخاب نوع encoding یا همان character set شدید، آن را روی UTF-8 بگذارد چرا که بسیار از زبان ها را
پشتیبانی می کند. در غیر این صورت ممکن است برخی از کاراکتر های صفحه ی شما نمایش داده نشود. البته این موضوع اگر در پایگاه داده باشد، خسارات سنگین تری بر جای می گذارد؛ مانند اشتباه ذخیره شدن نام و اطلاعات مشتریان.(
ایران گستر)
– برای تعیین description (توضیحات در مورد صفحه ی وب خود) از این قالب استفاده کنید:(
ایران گستر)
1 |
<meta name="description" content="site description"> |
به طور مثال در سایت روکسو این توضیح را ارائه داده ایم:(
ایران گستر)
1 |
<meta name="description" content="دستیابی به هزاران مقاله آموزش رایگان برنامه نویسی و آموزش رایگان طراحی گرافیک در وب سایت روکسو. آموزش رایگان فتوشاپ و برنامه نویسی"/> |
این توضیح علاوه بر خلاصه و کوتاه بودن، جامع است و محتوای سایت را به خوبی توضیح میدهد. شما نیز باید به همین شکل توضیحاتی در رابطه با سایت خود ارائه کنید.(
ایران گستر)
– برای تعیین کلیدواژه ها (keywords) از این قالب استفاده کنید:(
ایران گستر)
1 |
<meta name="keywords" content="HTML, CSS, XML, JavaScript"> |
– همچنین شما می توانید نویسنده ی صفحه یا همان author را به این شکل تعیین کنید:(
ایران گستر)
1 |
<meta name="author" content="Amir Zouerami"> |
نکته: این نوع اطلاعات بیشتر به درد موتور های جست و جو می خورد نه کاربران شما. وب سایت شما بدون این اطلاعات نیز به شکل صحیح کار می کند اما از نظر سئو ضربه خواهد خورد.(
ایران گستر)
– شما حتی می توانید صفحات خود را طوری تنظیم کنید که هر فلان ثانیه (مثلا اینجا 30 ثانیه) refresh شوند:(
ایران گستر)
1 |
<meta http-equiv="refresh" content="30"> |
بیایید این موارد را در یک مثال استفاده کنیم:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,CSS,XML,JavaScript"> <meta name="author" content="Amir Zouerami"> </head> <body>
<p dir='rtl'>تمام اطلاعات قسمت body که دیده می شوند در این قسمت قرار خواهند گرفت</p>
</body> </html> |
HTML5 روشی ارائه کرد تا طراحان وب سایت به viewport دسترسی پیدا کنند. viewport به معنای قسمتی از صفحه ی HTML است که کاربر مشاهده می کند. به طور مثال اگر صفحه طولانی باشد و اسکرول عمودی بخورد، در هر لحظه، آن قسمتی از صفحه که کاربر مشاهده می کند، viewport نام دارد.(
ایران گستر)
مشخص است که viewport در تلفن های همراه (مانند دستگاه های اندرویدی) کوچکتر است بنابراین باید مراقب این نوع کاربران نیز باشیم.(
ایران گستر)
نکته: کد زیر باید برای تمام صفحات وب شما تعیین شده باشد:(
ایران گستر)
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
این کد به مرورگر کاربر می گوید که صفحه را چطور نمایش دهد و چطور با مقایس یک صفحه کار کند.(
ایران گستر)
قسمت width=device-width
می گوید عرض صفحه (width) باید با عرض صفحه ی دستگاه کاربر (چه کامپیوتر، په تبلت، چه گوشی و …) هماهنگ باشد. از طرفی قسمت initial-scale=1.0
می گوید، مقدار بزرگنمایی اولیه ی یک صفحه چقدر باید باشد؛ وقتی به آن عدد 1.0 داده ایم یعنی 1 برابر بزرگنمایی داشته باشد و همانطور که می دانید 1 برابر بزرگنمایی یعنی همان سایز اصلی و بدون بزرگنمایی. اگر مقادیر بیشتری از 1 به آن بدهید، پس از بارگذاری صفحات برای کاربر، صفحه به همان اندازه بزرگنمایی (zoom) خواهد داشت که اصلا کار قشنگی نیست.(
ایران گستر)
بگذارید تفاوت استفاده از این دستور را در صفحات وب به شما نشان دهم.(
ایران گستر)
ابتدا به کد زیر نگاه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body>
<p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
<img src="https://www.w3schools.com/css/img_chania.jpg" alt="Chania" width="560" height="345">
<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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</body> </html> |
در این کد از width=device-width
و … استفاده نکرده ایم. اگر به خروجی این صفحه در JSBin بروید و صفحه ی مرورگرتان یا قسمت راست JSBin (یعنی قسمت مشاهده ی خروجی) را کوچک تر کنید میبینید که تصویر از کادر خارج می شود!
حالا به این کد نگاه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <style> img { max-width: 100%; height: auto; } </style> </head> <body> <p><b>To understand this example, you should open this page on a phone or a tablet.</b></p>
<img src="https://www.w3schools.com/css/img_chania.jpg" alt="Chania" width="460" height="345">
<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. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </p>
</body> </html> |
در این صفحه از دستور زیر استفاده کرده ایم:(
ایران گستر)
1 |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
اگر در JSBin، صفحه سمت راست را کوچک کنید و یا اندازه ی مرورگر خود را بسیار کوچک کنید، متوجه می شوید که اندازه ی تصویر متناسب با اندازه ی صفحه تغییر می کند و دیگر از کادر خارج نمی شود! دلیل استفاده از این دستور همین موضوع ساده اما بسیار کاربردی است.(
ایران گستر)
تگ <script>
برای اضافه کردن کدهای جاوا اسکریپت است (چه خارجی و چه داخلی).
به طور مثال در کد زیر میخواهیم عبارت Hello JavaScript را نمایش دهیم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> <script> function myFunction() { document.getElementById("demo").innerHTML = "Hello JavaScript!"; } </script> </head> <body>
<h1>My Web Page</h1> <p id="demo">A Paragraph</p> <button type="button" onclick="myFunction()">Try it</button>
</body> </html> |
در دوره ی جاوا اسکریپت ما می توانید بیشتر در رابطه با این مورد مطالعه کنید.
تگ <base>
در عمل URL یا آدرس اینترنتی پایه ی وب سایت شما را مشخص می کند تا تمام آدرس های اینترنتی دیگری که در صفحه ی ما موجود هستند با آن شروع شوند.(
ایران گستر)
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <title>Page Title</title> <base href="https://www.roxo.ir/plus/" target="_blank"> </head> <body>
<p><a href="/react-loops/">تکرار عناصر (حلقه ها) در ری اکت</a></p>
</body> </html> |
هشدار: در استاندارد HTML5 گفته شده است که شما اجازه دارید تگ های <html>
و <body>
و <head>
را حذف کنید. یعنی کد شما به این شکل باشد:(
ایران گستر)
1 2 3 4 5 |
<!DOCTYPE html> <title>Page Title</title>
<h1>This is a heading</h1> <p>This is a paragraph.</p> |
اما ما به شما پیشنهاد می کنیم تحت هیچ شرایطی چنین کاری را انجام ندهید. پاک کردن تگ های <html>
و <body>
می تواند DOM یا نرم افزار
XML را به طور کامل از کار بیندازد و در مرورگرهای قدیمی مانند IE9 نیز باعث خطاهای فراوان می شود. این مسئله که شما اجازه به پاک کردن برخی از تگ ها دارید، به شرایط و حالت خاصی مربوط است، نه اینکه چون می توانیم باید تمام این تگ ها را در شرایط عادی حذف کنیم.(
ایران گستر)
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
Semantics به خودی خود و جدا از دنیای
برنامه نویسی، مطالعه ی معنی کلمات و عبارات در یک زبان است و از دروس دانشگاهی بسیاری از رشته های علوم انسانی می باشد. اما در دنیای وب زمانی که می گوییم عناصر
Semantic یعنی عناصری که فقط عنصر ظاهری نیستند بلکه معنی خاصی را نیز با خودشان دارند. این معنی از یک طرف برای مرورگر و موتور های جست و جو است و از طرف دیگر برای توسعه دهندگان.(
ایران گستر)
عناصر غیر معنایی یا non-semantic مانند <div>
و <span>
معنا یا اطلاعاتی را در مورد محتوای خود به ما نمی دهند اما عناصر معنایی یا semantic مانند <form>
و <table>
و <article>
مشخص می کنند که چه نوع محتوایی دارند.(
ایران گستر)
قبل از ارائه ی HTML5 برای مشخص کردن قسمت های مختلف صفحه از
کدهایی مثل <div id=”nav> یا <div class=”header> استفاده می کردیم اما امروزه چنین کاری منسوخ شده است (متاسفانه برخی از توسعه دهندگان هنوز هم این کار را می کنند). اجزای مختلف یک صفحه در HTML5 به این شکل است:(
ایران گستر)
طرح کلی HTML5
بنابراین HTML5 عناصر معنایی جدیدی را برای پایه ریزی این طرح به ما می دهد:(
ایران گستر)
این عنصر وظیفه ی تعریف یک قسمت خاص را در سند شما بر عهده دارد. بر اساس documentation ارائه شده از سمت W3C، این عنصر:(
ایران گستر)
A section is a thematic grouping of content, typically with a heading.
یعنی عنصر <section>
مجموعه ای از محتوا را که موضوع و مضمون مشابهی دارند در یک قسمت جمع می کند و معمولا یک heading نیز به آن ها می دهد. بنابراین صفحه ی اصلی سایت شما می تواند به <section>
های مختلفی مانند مقدمه، محتوا، اطلاعات تماس و … تقسیم شود.(
ایران گستر)
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body>
<section> <h1>WWF</h1> <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p> </section>
<section> <h1>WWF's Panda symbol</h1> <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p> </section>
</body> </html> |
این عنصر محتوای مستقل و جداگانه ای در صفحه را مشخص می کند. یک <article>
باید به خودی خود با معنی باشد به طوری که اگر تمام قسمت های دیگر صفحه را حذف کنیم باز هم آن قسمت به صورت جداگانه قابل خواندن و درک باشد و به هیچ عنوان به قسمت های دیگر وابسته نباشد. نمونه های <article>
عبارت اند از:(
ایران گستر)
به مثال زیر توجه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <body>
<article> <h1>What Does WWF Do?</h1> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article>
</body> </html> |
آیا تو در تو سازی <article> در <section> و یا بالعکس شدنی است؟ <article>
مشخص کننده ی مقالات مستقل و جداگانه در صفحه ی ما بود. <section>
نیز تعریف کننده ی یک قسمت خاص در صفحه ی ما بود.(
ایران گستر)
سوال اینجاست: آیا قانون خاصی برای ترکیب این عناصر معنایی به جز معنی شان وجود دارد؟ پاسخ شما خیر است!
حتما در بعضی از وب سایت های اینترنتی دیده اید که <section>
درون تگ <article>
قرار دارد و <article>
نیز دارای تگ های <section>
است. همچنین برعکس این موضوع را نیز مشاهده کرده اید. به طور مثال ممکن است در یک خبرگزاری اینترنتی، مقالات ورزشی در یک <article>
گذاشته شوند که قسمت (section) ورزشی قرار دارند، و از طرفی همان <article>
ممکن است قسمت (section) های فنی داشته باشد. بنابراین تو در تو سازی (nesting) این عناصر بر پایه ی معنای آن ها است.(
ایران گستر)
این عنصر یک header (موضوع) برای کل سند شما و یا یک section در صفحه ی شما تعیین می کند. در واقع باید از <header>
به صورت نگه دارنده ی اطلاعاتی مانند موضوع و … استفاده کرد و از آن جایی که می توان چند مقاله در یک صفحه داشت، می توانیم چندین <header>
نیز در یک صفحه داشته باشیم.(
ایران گستر)
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body>
<article> <header> <h1>What Does WWF Do?</h1> <p>WWF's mission:</p> </header> <p>WWF's mission is to stop the degradation of our planet's natural environment, and build a future in which humans live in harmony with nature.</p> </article>
</body> </html> |
این عنصر برای صفحه ی شما یک footer (قسمت پایینی وب سایت یا یک مقاله که معمولا اطلاعات تکمیلی مانند اطلاعات تماس یا نام نویسنده در آن قرار می گیرد) تعیین می کند. بنابراین <footer>
باید اطلاعاتی در مورد عنصر نگه دارنده اش داشته باشد و معمولا شامل این موارد می شود: نام نویسنده، اطلاعات مربوط به کپی رایت، شرایط و قوانین استفاده، اطلاعات تماس و …. . از آنجا که می توان چندین
مقاله در یک صفحه داشت، می توانیم چندین <footer>
نیز در یک صفحه داشته باشیم.(
ایران گستر)
به مثال زیر توجه کنید:
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <body>
<footer> <p>Posted by: Amir Zouerami</p> <p>Contact information: <a href="mailto:Zouerami@gmail.com"> Zouerami@gmail.com</a>.</p> </footer>
</body> </html> |
این عنصر لینک های navigation (مسیریابی – لینک هایی که در بالای سایت هستند مانند خانه» و تماس با ما» و …) را در بر می گیرد. نکته ای که باید به آن توجه کنید این است که لازم نیست هر لینکی داخل <nav>
قرار بگیرد. <nav>
ها تنها برای مجموعه ای از لینک ها هستند که قرار است کاربر را به قسمت خاصی منتقل کنند. مثال:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body>
<nav> <a href="https://www.roxo.ir/series/html-tutorials/">HTML</a> | <a href="https://www.roxo.ir/series/html-tutorials/">CSS</a> | <a href="https://www.roxo.ir/series/javascript-tutorials/">JavaScript</a> | <a href="https://www.roxo.ir/series/sql-language-tutorial/">MySQL</a> </nav>
</body> </html> |
<aside>
این عنصر محتوایی را تعیین می کند که در کنار محتوای اصلی قرار می گیرد (مانند sidebar ها – مثلا لیست مقالات پر بازدید که به صورت عمودی در برخی از سایت ها موجود است). محتوای درون <aside>
باید با محتوای پیرامونش مرتبط باشد.(
ایران گستر)
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <body>
<p>My family and I visited The Epcot center this summer.</p>
<aside> <h4>Epcot Center</h4> <p>The Epcot Center is a theme park in Disney World, Florida.</p> </aside>
</body> </html> |
هدف <figure>
ارائه ی توضیحات متنی برای یک تصویر است. در HTML5 می توانیم این توضیح متنی را به همراه تصویر مورد نظر در <figure>
قرار دهیم. بنابراین درون <figure>
یک تگ img و یک تگ <figcaption>
قرار دارد که حاوی توضیحات متنی است.(
ایران گستر)
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body>
<h2>Places to Visit</h2>
<p>Puglia's most famous sight is the unique conical houses (Trulli) found in the area around Alberobello, a declared UNESCO World Heritage Site.</p>
<figure> <img src="https://www.w3schools.com/html/pic_trulli.jpg" alt="Trulli" style="width:100%"> <figcaption dir='rtl'>خانه های Trulli در ایتالیا</figcaption> </figure>
</body> </html> |
در نسخه های قبلی HTML مانند HTML4 توسعه دهندگان بر اساس سلیقه ی خود از هر عنصری که می خواستند برای ایجاد هر قسمتی از صفحه که می خواستند استفاده می کردند. این موضوع باعث می شود که م
وتور های جست و جو نتوانند قسمت های مختلف یک صفحه را تشخیص دهند اما با عناصر HTML5 این کار راحت تر شده است.(
ایران گستر)
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
برای درک HTML5 بهتر است تاریخچه ای کوتاه از زبان HTML را بدانیم. ما از سال 1991 تا سال 1999 شاهد عرضه ی نسخه های 1 تا 4 از HTML بوده ایم. سپس در سال 2000 کنسرسیوم جهانی وب (W3C) پیشنهاد استفاده از XHTML 1.0 را داد که توسعه دهندگان را مجبور به نوشتن کد های تمیز و دقیق می کرد. این مسئله تا جایی پیش رفت که در سال 2004 کنسرسیوم جهانی وب تصمیم گرفت که دیگر HTML را توسعه ندهد بلکه فقط به
XHTML بپردازد.(
ایران گستر)
سپس در سال 2004 نهاد و گروهی به نام WHATWG (مخفف Web Hypertext Application Technology Working Group) ایجاد شد که هدفشان توسعه ی HTML به صورت مرتب بود، به نحوی که با نسخه های قدیمی هم سازگاری داشته باشد. این گروه طی سال های 2004 تا 2006 توانست پشتیبانی اکثر شرکت های سازنده ی مرورگرهای اینترنتی مطرح را به دست آورد. سپس در سال 2006 کنسرسیوم جهانی وب اعلام کرد که از WHATWG پشتیبانی می کند.(
ایران گستر)
در نهایت در سال 2008 اولین نسخه ی آزمایشی HTML5 منتشر شد. سپس در سال 2012 گروه WHATWG و کنسرسیوم جهانی وب تصمیم گرفتند که از هم جدا شوند چرا که WHATWG میخواست زبان HTML را به صورتی توسعه دهد که مرتبا بروزرسانی و ویرایش شود، و در عین
بروزرسانی با قابلیت های قدیمی نیز سازگار باشد. به همین دلیل اولین نسخه ی ارائه شده توسط گروه WHATWG در سال 2012 ارائه شد. از طرفی کنسرسیوم جهانی وب قصد داشت استانداردی مشخص و قطعی برای HTML5 و XHTML بنویسد. بنابراین اولین نسخه ی پیشنهادی HTML5 طبق اعلام کنسرسیوم جهانی وب در 28 اکتبر سال 2014 ارائه شد. متعاقبا HTML5.1 و HTML5.2 نیز به ترتیب در 3 اکتبر 2017 و 14 دسامبر 2017 ارائه شدند.(
ایران گستر)
بنابراین همانطور که میدانید HTML5 نسخه ی جدیدتر HTML بوده و در صدد ارتقاء تجربه ی کاربری و کدنویسی افراد در دنیای وب تلاش هایی را انجام داده است. در این مقاله میخواهیم بیشتر با این نسخه از HTML آشنا شویم.(
ایران گستر)
1 |
<!DOCTYPE html> |
همچنین تعیین encoding مناسب نیز بسیار راحت شده است:(
ایران گستر)
1 |
<meta charset="UTF-8"> |
البته باید بدانید که
encoding پیش فرض در HTML5 همان UTF-8 است.(
ایران گستر)
بنابراین یک سند عادی به این شکل خواهد بود:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Page Title</title> </head> <body>
<h1>This is a Heading</h1> <p>This is a paragraph.</p>
</body> </html> |
در HTML5 عناصر جدیدی نیز معرفی شده اند:(
ایران گستر)
<header>
و <footer>
و <article>
و <section>
و …<svg>
و <canvas>
<audio>
و <video>
همچنین API جدیدی نیز معرفی شده است که عبارت اند از:(
ایران گستر)
بعدا با این موارد آشنا خواهیم شد.
از طرفی عناصر مختلفی نیز منسوخ شدند و شما دیگر نباید از آن ها استفاده کنید:(
ایران گستر)
عنصر منسوخ | نسخه ی جدید آن |
<acronym> | <abbr> |
<applet> | <object> |
<basefont> | قوانین CSS |
<big> | قوانین CSS |
<center> | قوانین CSS |
<dir> | <ul> |
<font> | قوانین CSS |
<frame> | – |
<frameset> | – |
<noframes> | – |
<strike> | قوانین CSS یا <s> یا <del> |
<tt> | قوانین CSS |
وقتی صحبت از HTML5 میکنیم بسیاری از توسعه دهندگان نگران موضوع عدم سازگاری با تکنولوژی های قدیمی هستند اما شما می توانید به مرورگرهای قدیمی تر بگویید که در مواجهه با HTML5 چکار کنند. همانطور که حدس می زنید، HTML5 در تمام مرورگرهای امروزی پشتیبانی می شود اما در مورد
مرورگر های قدیمی تر نکته ی جالبی وجود دارد؛ تمام مرورگرها، چه جدید و چه قدیمی، در برخورد با عنصری که آن را نشناسند، آن را یک عنصر inline در نظر می گیرند. به همین دلیل شما می توانید به مرورگرهای قدیمی یاد بدهید که چطور با عناصر HTML5 که برایشان ناشناخته است کنار بیایند. شما حتی می توانید به IE6 که متعلق به Windows XP 2001 است نیز یاد بدهید که چطور با HTML5 کار کند.(
ایران گستر)
HTML5 هشت عنصر معنایی (semantic) جدید را معرفی کرده است که همگی از نوع block هستند. بنابراین برای حل مشکل عدم سازگاری می توانیم دوباره آن ها را در CSS به صورت block تعریف کنیم:(
ایران گستر)
1 2 3 |
header, section, footer, aside, nav, main, article, figure { display: block; } |
شما همچنین می توانید عناصر جدیدی را در HTML ایجاد کنید. به طور مثال در کد زیر یک عنصر جدید به نام <myHero>
را به دلخواه خود ساخته ایم و سپس آن را استایل دهی کرده ایم:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <head> <script>document.createElement("myHero")</script> <style> myHero { display: block; background-color: #dddddd; padding: 50px; font-size: 30px; } </style> </head> <body>
<h1>A Heading</h1> <myHero>My Hero Element</myHero>
</body> </html> |
کد کوتاه جاوا اسکریپت در مثال بالا (("document.createElement("myHero
) برای ایجاد عناصر در مرورگرهای IE 9 و قدیمی تر لازم است.(
ایران گستر)
شما می توانید از این راه حل برای تمام مرورگرها استفاده کنید اما متاسفانه مرورگرهای IE8 و نسخه های قدیمی تر آن اجازه ی استایل دهی به عناصر ناشناخته را نمی دهند. خوشبختانه آقای Sjoerd Visscher کد جاوا اسکریپتی به نام HTML5Shiv ساخته است که به مرورگرهایی مانند IE8 و نسخه های قدیمی تر اجازه ی این کار را می دهد.(
ایران گستر)
برای استفاده از HTML5Shiv باید آن را در قسمت <head>
و درون تگ <script>
قرار دهید. شما می توانید آن را در صفحه ی گیت هاب HTML5Shiv دانلود کنید و یا کد زیر را به مرورگر خود اضافه کنید:(
ایران گستر)
1 2 3 4 5 |
<head> <!--[if lt IE 9]> <script src="/js/html5shiv.js"></script> <![endif]--> </head> |
بنابراین یک مثال کامل از HTML5Shiv به این شکل خواهد بود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]--> </head> <body>
<section>
<h1>Famous Cities</h1>
<article> <h2>London</h2> <p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </article>
<article> <h2>Paris</h2> <p>Paris is the capital and most populous city of France.</p> </article>
<article> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p> </article>
</section>
</body> </html> |
نکته: تمام این موارد فقط و فقط جهت اطلاع شما گفته شده است. در دنیای واقعی نیازی به این کار نیست؛ توجه کنید که ما (در زمان نگارش این مقاله) در سال 2019 هستیم و به هیچ عنوان نباید نگران سازگاری با مرورگرهای IE8 و غیره باشیم. این مرورگرهای قدیمی خیلی وقت است که از رده خارج شده اند و به توصیه ی تمام محققین و متخصصین باید پشتیبانی از آن ها را رها کرد.(
ایران گستر)
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
این ویژگی مقدار اولیه ی یک
input در فرم ما را مشخص می کند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h2>The value Attribute</h2> <p>The value attribute specifies the initial value for an input field:</p>
<form action=""> First name:<br> <input type="text" name="firstname" value="John"> <br> Last name:<br> <input type="text" name="lastname"> </form>
</body> </html> |
این ویژگی باعث می شود که input ما
read only شود یعنی هیچکس نتواند آن را تغییر دهد:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h2>The readonly Attribute</h2> <p>The readonly attribute specifies that the input field is read only (cannot be changed):</p>
<form action=""> First name:<br> <input type="text" name="firstname" value ="John" readonly> <br> Last name:<br> <input type="text" name="lastname"> </form>
</body> </html> |
این ویژگی باعث می شود که input ما غیرفعال شود. input ای که غیرفعال باشد، غیر قابل کلیک کردن و تغییر دادن است و همچنین مقدار آن در هنگام submit (ارسال نهایی) فرم به سرور ارسال نمی شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h2>The disabled Attribute</h2> <p>The disabled attribute specifies that the input field is disabled:</p>
<form action=""> First name:<br> <input type="text" name="firstname" value ="John" disabled> <br> Last name:<br> <input type="text" name="lastname"> </form>
</body> </html> |
این ویژگی سایز یک input را بر اساس تعداد کاراکتر تعیین می کند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h2>The size Attribute</h2> <p>The size attribute specifies the size (in characters) of the input field:</p>
<form action=""> First name:<br>
<input type="text" name="firstname" value="John" size="40"> <br> Last name:<br> <input type="text" name="lastname"> </form>
</body> </html> |
این ویژگی حداکثر طول مجاز یک input را برای کاربر تعیین می کند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h2>The maxlength Attribute</h2> <p>The maxlength attribute specifies the maximum allowed length for the input field:</p>
<form action=""> First name:<br> <input type="text" name="firstname" maxlength="10"> <br> Last name:<br> <input type="text" name="lastname"> </form>
</body> </html> |
به طور مثال اگر مقدار maxlength
را 5 بگذارید دیگر فرم اجازه ی تایپ بیشتر از 5 کاراکتر را به کاربر نمی دهد اما توجه داشته باشید که این ویژگی هیچ هشداری به کاربر نمیدهد بنابراین اگر میخواهید پیامی برای کاربر نمایش داده شود و به او بگوید که این فیلد محدود است و یا اینکه چرا این فیلد محدود است باید از کد های جاوا اسکریپت یا روش های دیگر استفاده کنید.(
ایران گستر)
هشدار: تمام روش های محدود سازی با HTML (مانند مثال بالا) و Javascript قابل دور زدن هستند و اصلا امن نیستند، بلکه تنها برای راحتی سرور شما و خود کاربران ایجاد شده اند. لازم است که حتما و حتما داده ها را در سمت سرور نیز چک کنید.(
ایران گستر)
این ویژگی می گوید که آیا یک فرم قابلیت autocomplete (تکمیل خودکار) داشته باشد یا خیر. زمانی که autocomplete فعال باشد مرورگر به صورت خودکار مقادیر ورودی را بر اساس مقادیری که کاربر قبلا وارد کرده است پر می کند. autocomplete با عنصر <form>
و <input>
های متنی، جست و جو،
URL، تلفن، ایمیل، رمز عبور، datepicker ها، محدوده و رنگ ها کار می کند.(
ایران گستر)
نکته: شما می توانید autocomplete را برای کل فرم (<form>) فعال کرده و سپس برای برخی از input ها غیر فعالش کنید.(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<h2>The autocomplete Attribute</h2>
<form action="/action_page.php" autocomplete="on"> First name:<input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> E-mail: <input type="email" name="email" autocomplete="off"><br> <input type="submit"> </form>
<p dir='rtl'>فرم را پر کرده و سپس ارسال کنید. حالا یک بار صفحه را refresh کنید تا ببینید قابلیت تکمیل خودکار چطور کار می کند.</p> <p dir='rtl'>توجه کنید که قابلیت تکمیل خودکار برای email غیر فعال است.</p>
</body> </html> |
برای مشاهده ی خروجی در صفحه مورد نظر کلید Run را بزنید.
این ویژگی میگوید که داده های فرم در هنگام ارسال نباید Validate (اعتبار سنجی) شوند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body>
<h2>The novalidate Attribute</h2> <p>The novalidate attribute specifies that the form data should not be validated when submitted.</p>
<form action="/action_page.php" novalidate> E-mail: <input type="email" name="user_email"> <input type="submit"> </form>
<p dir='rtl'><strong>هشدار:</strong> این قابلیت در مرورگر های internet explorer 9 و نسخه های قبل آن و همچنین در safari 10 و نسخه های قبل آن کار نمی کند.</p>
</body> </html> |
این ویژگی باعث می شود که پس از بارگذاری صفحه، یکی از input های ما (به انتخاب خودمان) focus بگیرد (یعنی بدون کلیک کاربر فعال شود):(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h2>The autofocus Attribute</h2> <p>The autofocus attribute specifies that the input field should automatically get focus when the page loads.</p>
<form action="/action_page.php"> First name:<input type="text" name="fname" autofocus><br> Last name: <input type="text" name="lname"><br> <input type="submit"> </form>
<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>
</body> </html> |
پس از ورود به صفحه ی خروجی دکمه ی RUN را بزنید و متوجه خواهید شد که فیلد اول انتخاب شده است و آماده ی تایپ کردن شماست! این همان حالت focus است.(
ایران گستر)
این ویژگی مشخص می کند که فلان <input>
متعلق به کدام فرم و یا چند فرم است:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h2>The form Attribute</h2> <p>The form attribute specifies one or more forms an input element belongs to.</p>
<form action="/action_page.php" id="form1"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> </form>
<p dir='rtl'>فیلد Last name که در زیر مشاهده می کنید خارج از form بالا است اما هنوز هم به آن تعلق دارد.</p> Last name: <input type="text" name="lname" form="form1">
</body> </html> |
نکته: در صورتی که میخواهید یک فیلد را به چند فرم نسبت دهید از ویرگول انگلیسی بین آن ها استفاده کنید.(
ایران گستر)
این ویژگی مسیر فایلی را مشخص می کند که قرار است فرم ما را پردازش کند. این ویژگی action
را باطل می کند و با "type="submit
و "type="image
استفاده می شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<h2>The formaction Attribute</h2> <p>The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.</p>
<form action="/action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"><br> <input type="submit" formaction="/action_page2.php" value="Submit to another page"> </form>
<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>
</body> </html> |
این ویژگی encoding ارسال فرم را تعیین می کند (فقط برای فرم های method=”post) و attribute قبلی فرم یعنی enctype
را باطل می کند. این ویژگی با "type="submit
و "type="image
استفاده می شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h2>The formenctype Attribute</h2> <p>The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with method="post").</p>
<form action="/action_page_binary.asp" method="post"> First name: <input type="text" name="fname"><br> <input type="submit" value="Submit"> <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data"> </form>
<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>
</body> </html> |
این ویژگی متد HTTP برای ارسال فرم ها به action را تعیین می کند و attribute قبلی فرم یعنی method
را باطل می کند. این ویژگی با "type="submit
و "type="image
استفاده می شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<h2>The formmethod Attribute</h2> <p>The formmethod attribute defines the HTTP method for sending form-data to the action URL.</p>
<form action="/action_page.php" method="get"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit"> <input type="submit" formmethod="post" value="Submit using POST"> </form>
<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>
</body> </html> |
این ویژگی، novalidate
را باطل کرده و تغییر میدهد و با "type="submit
استفاده می شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h2>The formnovalidate Attribute</h2>
<form action="/action_page.php"> E-mail: <input type="email" name="userid"><br> <input type="submit" value="Submit"><br> <input type="submit" formnovalidate value="Submit without validation"> </form>
<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن و همچنین در safari 10 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>
</body> </html> |
این ویژگی مشخص می کند که مرورگر جواب دریافتی از سرور (پس از ارسال فرم) را کجا نمایش دهد. این ویژگی attribute قبلی فرم یعنی target
را باطل می کند و این ویژگی با "type="submit
و "type="image
استفاده می شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body>
<h2>The formtarget Attribute</h2> <p>The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.</p>
<form action="/action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="submit" value="Submit as normal"> <input type="submit" formtarget="_blank" value="Submit to a new window/tab"> </form>
<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>
</body> </html> |
این دو ویژگی عرض و ارتفاع <"input type="image>
را مشخص می کنند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body>
<h2>The height and width Attributes</h2> <p>The height and width attributes specify the height and width of an input type="image" element.</p>
<form action="/action_page.php"> First name: <input type="text" name="fname"><br> Last name: <input type="text" name="lname"><br> <input type="image" src="https://www.w3schools.com/html/img_submit.gif" alt="Submit" width="48" height="48"> </form>
</body> </html> |
این ویژگی به <datalist>
اشاره می کند که گزینه های از پیش تعریف شده ای برای <input> دارد:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html> <body>
<h2>The list Attribute</h2> <p>The list attribute refers to a datalist element that contains pre-defined options for an input element.</p>
<form action="/action_page.php" method="get">
<input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form>
<p dir='rtl'><strong>هشدار:</strong>
این قابلیت در internet explorer 9 و نسخه های قبل تر آن و همچنین در safari پشتیبانی نمی شود.
</p>
</body> </html> |
این دو ویژگی حداقل و حداکثر مقادیر مجاز برای <input>
را تعیین می کنند و با input های عددی، محدوده ای، تاریخ، datetime-local، ماه، زمان و هفته کار می کند (اگر با انواع input ها آشنا نیستید به قسمت های قبل از همین سری آموزشی مراجعه کنید):(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<!DOCTYPE html> <html> <body>
<h2>The min and max Attributes</h2> <p>The min and max attributes specify the minimum and maximum values for an input element.</p>
<form action="/action_page.php">
Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br>
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"><br>
<input type="submit">
</form>
<p dir='rtl'><strong>هشدار:</strong>این دو ویژگی در مرورگر Internet Explorer 9 و نسخه های قبل تر آن کار نمی کنند</p>
<p dir='rtl'><strong>هشدار:</strong>این دو ویژگی اگر برای تاریخ و زمان به کار بروند در مرورگر Internet explorer 10 کار نمی کنند.</p>
</body> </html> |
این ویژگی مشخص می کند که کاربر می تواند بیشتر از یک مقدار را در <input>
وارد کند. این ویژگی با <input>
های از نوع ایمیل و فایل کار می کند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body>
<h2>The multiple Attributes</h2> <p>The multiple attribute specifies that the user is allowed to enter more than one value in the input element.</p>
<form action="/action_page.php"> Select images: <input type="file" name="img" multiple> <input type="submit"> </form>
<p>Try selecting more than one file when browsing for files.</p>
<p dir='rtl'><strong>هشدار:</strong>این دو ویژگی در مرورگر Internet Explorer 9 و نسخه های قبل تر آن کار نمی کنند</p>
</body> </html> |
این ویژگی از regular expression (عبارات با قاعده) استفاده می کند تا محتوای فرم را چک کند و با انواع input های متنی، جست و جو، URL، تلفن، ایمیل و رمز عبور کار می کند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body>
<h2>The pattern Attribute</h2> <p>The pattern attribute specifies a regular expression that the input element's value is checked against.</p>
<form action="/action_page.php"> Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code"> <input type="submit"> </form>
<p dir='rtl'><strong>هشدار:</strong>این قابلیت در internet explorer 9 و نسخه های قبل تر آن و همچنین در safari 10 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>
</body> </html> |
مبحث عبارات با قاعده از مباحث بسیار طولانی در دنیای برنامه نویسی است و نمی شود آن را در این مقاله توضیح داد. اگر با آن ها آشنایی ندارید باید در اینترنت به دنبالشان بگردید و مقالات مختلف در این زمینه را مطالعه کنید.
نکته: برای اینکه به کاربر کمک کنید تا بهتر متوجه الگوی درخواستی بشود از
attribute ای به نام title استفاده کنید.(
ایران گستر)
این ویژگی متنی کوتاه را در فیلد مورد نظر نشان می دهد تا به کاربر توضیحات خلاصه ای ارائه کند. به طور مثال اگر میخواهید به کاربر بگویید که در این قسمت با حروف انگلیسی تایپ کند می توانید از این ویژگی استفاده کنید. این ویژگی با input های متنی، جست و جو، URL، تلفن، ایمیل و رمز کاربری کار می کند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h2>The placeholder Attribute</h2> <p>The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).</p>
<form action="/action_page.php"> <input type="text" name="fname" placeholder="First name"><br> <input type="text" name="lname" placeholder="Last name"><br> <input type="submit" value="Submit"> </form>
<p dir='rtl'><strong>هشدار:</strong>این دو ویژگی در مرورگر Internet Explorer 9 و نسخه های قبل تر آن کار نمی کنند</p>
</body> </html> |
این ویژگی تعیین می کند که فلان فیلد این فرم اجباری است و حتما باید پُر شود و با انواع فیلد های text, search, url, tel, email, password, date pickers, number, checkbox, radio, و file کار می کند.(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body>
<h2>The required Attribute</h2> <p>The required attribute specifies that an input field must be filled out before submitting the form.</p>
<form action="/action_page.php"> Username: <input type="text" name="usrname" required> <input type="submit"> </form>
<p dir='rtl'><strong>هشدار:</strong>این ویژگی در مرورگر Internet explorer 9 و نسخه های قبل تر آن و همچنین در Safari 10.1 و نسخه های قبل تر آن کار نمی کند.</p>
</body> </html> |
این ویژگی بازه های مجاز برای یک <input>
را تعیین می کنند. به طور مثال اگر این ویژگی برابر با 3 باشد (step=”3) اعداد مجاز 3- و 0 و 3 و 6 و … خواهند بود. همچنین می توانید از max و min هم به همراه آن استفاده کنید. این ویژگی با فیلد های umber, range, date, datetime-local, month, time و week کار میکند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body>
<h2>The step Attribute</h2> <p>The step attribute specifies the legal number intervals for an input element.</p>
<form action="/action_page.php"> <input type="number" name="points" step="3"> <input type="submit"> </form>
<p dir='rtl'><strong>هشدار:</strong>این ویژگی در مرورگر Internet explorer 9 و نسخه های قبل تر آن کار نمی کند.</p>
</body> </htmlایران > |
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
همزمان با معرفی HTML5 انواع مختلفی از
input ها نیز به توسعه دهندگان معرفی شد تا بتوانند با استفاده از آن ها برنامه های کاربردی تر و راحت تری بنویسند. آن ها عبارت اند از:(
ایران گستر)
search
نکته: از آن جایی که این نوع input ها نسبتا جدید تر هستند ممکن است در تمام مروگر ها کار نکنند. اگر input ای در مرورگری پشتیبانی نشود، به جای آن یک فیلد خالی از نوع <"input type="text>
نمایش داده خواهد شد.(
ایران گستر)
این نوع از input ها به صورت <"input type="color>
مشخص می شوند و کارشان ایجاد فیلد هایی است که رنگ خاصی را انتخاب کنند. اگر مرورگر کاربر از این input پشتیبانی کند یک color picker برای کاربر نمایش داده خواهد شد:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<h2>Color Picker</h2> <p>The <strong>input type="color"</strong> is used for input fields that should contain a color.</p>
<p dir='rtl'>رنگ مورد نظرتان را انتخاب کنید</p>
<form dir='rtl' action="/action_page.php"> <input type="color" name="favcolor" value="#ff0000"> <input type="submit" value='ارسال رنگ'> </form>
<p dir='rtl'>این قابلیت در internet explorer 11 و safari 9.1 و نسخه های قبلی این دو مرورگر پشتیبانی نمی شود.</p>
</body> </html> |
input های نوع <"input type="date>
فیلد هایی مخصوص نگه داری تاریخ می سازند. اگر مرورگر کاربر از آن پشتیبانی کند یک date picker نمایش داده خواهد شد:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<h2>Date Field</h2> <p>The <strong>input type="date"</strong> is used for input fields that should contain a date.</p> <p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.<p>
<form dir='rtl' action="/action_page.php"> تاریخ تولد: <input type="date" name="bday"> <input type="submit" Value='ارسال فرم'> </form>
<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari پشتیبانی نمی شود.</p>
</body> </html> |
شما همچنین می توانید از attribute های min
و max
استفاده کنید تا محدودیت هایی را برای این تاریخ ایجاد کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body>
<h2>Date Field Restrictions</h2> <p>Use the min and max attributes to add restrictions to dates:</p>
<form dir='rtl' action="/action_page.php"> تاریخی قبل از سال 1980-01-01 را انتخاب کنید:<br> <input type="date" name="bday" max="1979-12-31"><br><br> تاریخی بعد از سال 2000-01-01 را انتخاب کنید:<br> <input type="date" name="bday" min="2000-01-02"><br><br> <input type="submit" value='ارسال فرم'> </form>
<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari پشتیبانی نمی شود.</p>
</body> </html> |
این نوع از input ها با <"input type="datetime-local>
مشخص شده و کار آنها دریافت ساعت و تاریخ (بدون هر گونه time zone – منطقه ی زمانی) می باشد:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<h2>Local Date Field</h2> <p>The <strong>input type="datetime-local"</strong> specifies a date and time input field, with no time zone.</p> <p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>
<form action="/action_page.php"> Birthday (date and time): <input type="datetime-local" name="bdaytime"> <input type="submit" value="Send"> </form>
<p dir='rtl'>این قابلیت در internet explorer 12 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.</p>
</body> </html> |
این نوع input ها با <"input type="email>
مشخص می شوند و کارشان دریافت ایمیل کاربران است. این نوع input ها معمولا از نظر ظاهری دقیقا شبیه به فیلدهای متنی ساده هستند و تنها تفاوتشان در این است که آدرس ایمیل کاربر را
validate می کنند؛ یعنی چک می کنند که آدرس ایمیل نامعتبر نباشد و از الگوی صحیح پیروی کند.(
ایران گستر)
همچنین برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید com.” را اضافه کنند.(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<h2>Email Field</h2> <p>The <strong>input type="email"</strong> is used for input fields that should contain an e-mail address:</p>
<form action="/action_page.php"> E-mail: <input type="email" name="email"> <input type="submit"> </form>
<p dir='rtl'> <b>هشدار:</b>این قابلیت در Internet Explorer 9 و نسخه های قبل از آن پشتیبانی نمی شود.</p>
</body> </html> |
سعی کنید در خروجی بالا یک ایمیل نا معتبر (مانند example.com یا example یا example.com@me و …) وارد کنید. خواهید دید که فرم ثبت نخواهد شد و به جای آن یک هشدار به شما نمایش داده می شود.(
ایران گستر)
کار این نوع input ها که با <"input type="file>
مشخص می شوند دریافت فایل های کاربر است. در صورتی که نیاز باشد کاربر فایلی را روی سرور شما آپلود کند (مانند تصویر پروفایل) می توانید از این نوع input استفاده کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html> <body>
<h1>File upload</h1>
<p>Show a file-select field which allows a file to be chosen for upload:</p> <br> <form dir='rtl' action="/action_page.php"> یک فایل انتخاب کنید: <input type="file" name="myFile"><br><br> <input type="submit" Value='ارسال فرم'> </form>
</body> </html> |
نوع <"input type="month>
به کاربر اجازه می دهد که یک ماه و سال را انتخاب کند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<h2>Month Field</h2> <p>The <strong>input type="month"</strong> allows the user to select a month and year.</p> <p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>
<form action="/action_page.php"> Birthday (month and year): <input type="month" name="bdaymonth"> <input type="submit"> </form>
<p dir='rtl'><strong>هشدار:</strong> این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.</p>
</body> </html> |
این نوع input ها که به صورت <"input type="number>
مشخص می شوند به کاربر اجازه میدهند که در یک فیلد تنها از اعداد استفاده کند. شما می توانید با min و max حداقل و حداکثر اعداد مجاز را نیز تعیین کنید.(
ایران گستر)
در مثال زیر به مرورگر گفته ایم که کاربر حق دارد یک عدد بین 1 و 5 را انتخاب کند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<h2>Number Field</h2> <p>The <strong>input type="number"</strong> defines a numeric input field.</p> <p>You can use the min and max attributes to add numeric restrictions in the input field:</p>
<form action="/action_page.php"> Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"> <input type="submit"> </form>
<p dir='rtl'><b>هشدار:</b> این قابلیت در internet explorer 9 و نسخه های قبل تر آن پشتیبانی نمی شود.</p>
</body> </html> |
این نوع input ها با <"input type="range>
مشخص می شوند و کارشان تعیین عددی است که مقدار دقیق آن برای ما مهم نیست (مانند
slider ها). حد پیش فرض آن از 0 تا 100 است اما شما می توانید آن را تغییر دهید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body>
<h2>Range Field</h2> <p>Depending on browser support:<br>The input type "range" can be displayed as a slider control.<p>
<form action="/action_page.php" method="get"> Points: <input type="range" name="points" min="0" max="10"> <input type="submit" value='ارسال فرم'> </form>
<p dir='rtl'> <b>هشدار:</b> این قابلیت در internet explorer 9 و نسخه های قبل تر از آن پشتیبانی نمی شود. </p>
</body> </html> |
این نوع input ها با <"input type="search>
مشخص می شوند و فیلدهایی برای قسمت جست و جو در سایت شما هستند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body>
<h2>Search Field</h2> <p>The <strong>input type="search"</strong> is used for search fields (behaves like a regular text field):</p>
<form action="/action_page.php"> Search Google: <input type="search" name="googlesearch"> <input type="submit"> </form>
</body> </html> |
این input ها از نظر کارکرد و از نظر ظاهر هیچ تفاوتی با فیلد های متنی ساده ندارند. تفاوت اصلی در بحث semantics و درک موتور های جست و جو از سایت شما است.
این نوع input ها که با <"input type="tel>
مشخص می شوند مسئولیت دریافت شماره تلفن کاربران را دارند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body>
<h2>Telephone Field</h2> <p>The <strong>input type="tel"</strong> is used for input fields that should contain a telephone number:</p>
<form action="/action_page.php"> Telephone: <input type="tel" name="phone" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required> <input type="submit"> <span>Format: 123-45-678</span> </form>
</body> </html> |
احتمالا متوجه قسمت "{pattern="[0-9]{3}-[0-9]{2}-[0-9]{3
نشده اید. از آنجا که هر کشوری الگوی شماره تلفن های مخصوص خودش را دارد شما می توانید این الگو را بر اساس شماره تلفن های کشور خودتان تنظیم کنید. در الگوی بالا گفته شده است {3}
[0-9]
که یعنی 3 رقم اول شماره تلفن می توانند شامل اعداد 0 تا 9 (همه ی اعداد) بشوند. سپس دو رقم بعدی و در آخر سه رقم بعدی را مشخص کرده ایم. شما می توانید سعی کنید این الگو را مطابق با ایران طراحی کنید.(
ایران گستر)
این نوع input ها با <"input type="time>
مشخص می شوند و به کاربر اجازه می دهند که بدون ذکر هیچ time zone یا منطقه ی زمانی، یک زمان خاص را انتخاب کند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body>
<h2>Time Field</h2> <p>The <strong>input type="time"</strong> allows the user to select a time (no time zone):</p>
<p>Depending on browser support:<br>A time picker might pop-up when you enter the input field.</p>
<form action="/action_page.php"> Select a time: <input type="time" name="usr_time"> <input type="submit"> </form>
<p dir='rtl'>این قابلیت در internet explorer 12 و نسخه های قبل تر آن و همچنین در safari پشتیبانی نمی شود.</p>
</body> </html> |
این نوع input ها به صورت <"input type="url>
مشخص می شوند و مسئولیت دریافت یک آدرس اینترنتی (URL) را دارند. برخی از تلفن های هوشمند می توانند این نوع input را تشخیص دهند و در کیبورد کاربر کلید com.” را اضافه کنند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<!DOCTYPE html> <html> <body>
<h2>URL Field</h2> <p>The <strong>input type="url"</strong> is used for input fields that should contain a URL address:</p>
<form action="/action_page.php"> Add your homepage: <input type="url" name="homepage"> <input type="submit"> </form>
<p dir='rtl'>این قابلیت در internet explorer 9 و نسخه های قبل آن پشتیبانی نمی شود.</p>
</body> </html> |
کار اصلی این نوع فیلد validate کردن داده ی کاربر است؛ یعنی چک می کند تا ببیند آیا آدرس
URL ای که کاربر وارد کرده است دارای الگوی صحیحی است یا خیر. می توانید این مورد را در خروجی بالا چک کنید.(
ایران گستر)
این نوع input ها به صورت <"input type="week>
نوشته می شوند و به کاربر اجازه می دهند تا یک هفته و یک سال را انتخاب کند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<h2>Week Field</h2> <p>The <strong>input type="week"</strong> allows the user to select a week and year:</p> <p>Depending on browser support:<br>A date picker can pop-up when you enter the input field.</p>
<form action="/action_page.php"> Select a week: <input type="week" name="year_week"> <input type="submit"> </form>
<p dir='rtl'>این قابلیت در internet explorer 11 و نسخه های قبلی آن و همچنین در safari و firefox پشتیبانی نمی شود.</p>
</body> </html> |
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
همانطور که در دو قسمت قبلی دیدیم،
input ها قسمت مهمی از فرم های HTML هستند و ما می خواهیم در این قسمت انواع آن ها را بررسی کنیم. انواع input ها از این قرار هستند:(
ایران گستر)
<"input type="button>
<"input type="checkbox>
<"input type="color>
<"input type="date>
<"input type="datetime-local>
<"input type="email>
<"input type="file>
<"input type="hidden>
<"input type="image>
<"input type="month>
<"input type="number>
<"input type="password>
<"input type="radio>
<"input type="range>
<"input type="reset>
<"input type="search>
<"input type="submit>
<"input type="tel>
<"input type="text>
<"input type="time>
<"input type="url>
<"input type="week>
ما می خواهیم این موارد را طی دو قسمت بررسی کنیم. در قسمت اول که همین قسمت می باشد، input هایی را به شما معرفی می کنیم که بسیار کاربردی بوده و سال های سال است که مورد استفاده قرار می گیرند. این نوع input ها توسط تمام برنامه نویسان وب شناخته شده هستند و سابقه ای دیرینه دارند. در قسمت بعد به سراغ input هایی خواهیم رفت که در
HTML5 معرفی شده اند؛ این input ها تقریبا جدید تر هستند و بعضی از آن ها ممکن است در تمام مرورگر ها پشتیبانی نشوند اما امکانات بیشتری به ما می دهند. پس ابتدا برویم سراغ input های اصلی و رایج(
ایران گستر)
<"input type="text>
به معنی این است که input ما از نوع متنی بوده و تبدیل به یک فیلد خالی برای تایپ کاربر می شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <body>
<h2>Text field</h2> <p>The <strong>input type="text"</strong> defines a one-line text input field:</p>
<form action="/action_page.php"> First name:<br> <input type="text" name="firstname"> <br> Last name:<br> <input type="text" name="lastname"> <br><br> <input type="submit"> </form>
<p dir='rtl'>توجه داشته باشید که خود تگ form نمایش داده نمی شود.</p> <p dir='rtl'>عرض پیش فرض هر فیلد 20 کاراکتر است</p>
</body> </html> |
فیلد های رمز عبور دقیقا مانند فیلد های متنی هستند بنابراین <"input type="password>
هنوز هم یک فیلد خالی برای تایپ به ما می دهد اما تفاوت اینجاست که برای حفظ حریم شخصی کاربر، ظاهر هر چیزی که در این قسمت بنویسید با دایره های سیاه جایگزین می شود و کسی نمی تواند رمز تایپ شده ی شما را ببیند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body>
<h2>Password field</h2> <p>The <strong>input type="password"</strong> defines a password field:</p>
<form action=""> User name:<br> <input type="text" name="userid"> <br> User password:<br> <input type="password" name="psw"> </form>
<p dir='rtl'>کاراکتر هایی که در input های رمزی تایپ می شوند دیده نمی شوند. می توانید در قسمت راست این موضوع را امتحان کنید.</p>
</body> </html> |
<"input type="submit>
بدین معنا است که input مورد نظر می خواهد فرمی را ثبت و ارسال (submit) کند. این فرم سپس به یک form-handler ارسال می شود. همانطور که قبلا هم توضیح دادیم form-handler صفحات اسکریپتی در سمت سرور هستند که کار پردازش و ذخیره ی داده های ارسالی را بر عهده دارند و آدرسشان در قسمت action
مشخص می شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body>
<h2>Submit Button</h2> <p>The <strong>input type="submit"</strong> defines a button for submitting form data to a form-handler:</p>
<form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
<p>If you click "Submit", the form-data will be sent to a page called "/action_page.php".</p>
</body> </html> |
نکته: اگر مقدار value
را برای submit تعیین نکنید، یک مقدار پیش فرض برای آن تعیین می شود که معمولا همان کلمه ی submit است.(
ایران گستر)
input هایی که به صورت <"input type="reset>
نوشته می شوند، معمولا یک reset button (دکمه ی ریستارت یا شروع مجدد) را ایجاد می کنند و زمانی که کاربر روی این دکمه کلیک کند تمام محتوایی که در فیلد ها نوشته است پاک می شود.(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <body>
<h2>Reset Button</h2> <p>The <strong>input type="reset"</strong> defines a reset button that will reset all form values to their default values:</p>
<form action="/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> <input type="reset"> </form>
<p dir='rtl'>اگر در فیلد های بالا مقداری را بنویسید و تغییرشان دهید، سپس روی دکمه ی reset کلیک کنید تمام محتوای فرم به حالت اولیه ی آن بازمیگردد.</p>
</body> </html> |
در جلسات قبل با radio button ها آشنا شدیم؛ آن ها به هر کاربر اجازه می دهند تا از بین چند گزینه تنها یک گزینه را انتخاب کند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<h2>Radio Buttons</h2> <p>The <strong>input type="radio"</strong> defines a radio button:</p>
<p dir='rtl'>لطفا جنسیت خود را انتخاب کنید:</p>
<form dir='rtl' action="/action_page.php"> <input type="radio" name="gender" value="male" checked> مرد<br> <input type="radio" name="gender" value="female"> زن<br> <input type="radio" name="gender" value="other"> نمیخواهم اعلام کنم<br><br> <input type="submit" Value='ارسال فرم'> </form>
</body> </html> |
input های checkbox به صورت <"input type="checkbox>
ساخته می شوند؛ آن ها به کاربر اجازه می دهند که از بین چند گزینه صفر، یک، دو، سه و … یا همه را انتخاب کند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body>
<h2>Checkboxes</h2> <p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>
<p dir='rtl'>مالک کدام موارد هستید؟</p>
<form dir='rtl' action="/action_page.php"> <input type="checkbox" name="vehicle1" value="Bike">من دوچرخه دارم <br> <input type="checkbox" name="vehicle2" value="Car">من ماشین دارم <br> <input type="checkbox" name="bus" value="Car">من اتوبوس دارم <br><br> <input type="submit" Value='ارسال فرم'> </form>
</body> </html> |
این نوع از input ها به صورت <"input type="button>
تعریف می شوند. سوالی که در ابتدا پیش می آید این است که برخی از input های قبلی نیز دکمه می شدند. چرا به این نوع از input ها به طور خاص دکمه ای می گوییم؟ جواب این است که این نوع از input ها تنها یک دکمه هستند و کارکرد آن ها را شما و معمولا با جاوا اسکریپت مشخص می کنید. input های قبلی که تبدیل به یک دکمه شدند کارشان تعریف شده بود و از این نظر با input های دکمه ای متفاوت هستند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<h2>Input Button</h2>
<input type="button" onclick="alert('سلام کاربر گرامی!')" value="!روی من کلیک کن">
</body> </html> |
تا اینجای کار با input های معروف HTML آشنا شدیم. در قسمت بعد به سراغ input هایی خواهیم رفت که در HTML5 معرفی شده اند، یعنی:(
ایران گستر)
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
در جلسه ی قبل به صورت خلاصه اشاره ای به این عنصر داشتیم اما در این قسمت کمی مفصل تر صحبت خواهیم کرد. مهم ترین عنصر یک فرم <input>
است که بر اساس مقدار type
میتواند به انواع و اشکال مختلفی ظاهر شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body>
<h2>The input Element</h2>
<form action="/action_page.php"> Enter your name: <input name="firstname" type="text"> <br><br> <input type="submit"> </form>
</body> </html> |
نکته: اگر مقدار type
را خالی بگذارید، مقدار پیش فرض که همان text است برایش تعیین می شود.(
ایران گستر)
این عنصر یک لیستِ drop-down را می سازد. لیست های drop-down لیست هایی هستند که با کلیک روی آن ها می توانید از بین گزینه هایشان که نمایان می شود انتخاب کنید. به مثال زیر توجه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body>
<h2>The select Element</h2> <p>The select element defines a drop-down list:</p>
<form action="/action_page.php"> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit"> </form>
</body> </html> |
نکته: این خروجی ها تنها برای نمایش ظاهر این عناصر هستند و فاقد قدرت پردازشی می باشند، بنابراین با کلیک روی
submit اتفاقی نمی افتد اما در حالت واقعی داده ها پردازش خواهند شد.(
ایران گستر)
هر کدام از <option>
های بالا یکی از گزینه های لیست ما می باشد و در حالت پیش فرض اولین <option>
بدون کلیک و در فیلد ما نمایان خواهد بود. اگر می خواهید این موضوع را تغییر دهید و <option>
مورد نظر خود را گزینه ی پیش فرض کنید از selected
استفاده کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body>
<h2>Pre-selected Option</h2> <p>You can preselect an option with the selected attribute.</p>
<form action="/action_page.php"> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit"> </form>
</body> </html> |
همچنین اگر می خواهید تعداد گزینه هایی که نمایان هستند افزایش پیدا کنند، می توانید از size
استفاده کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body>
<h2>Visible Option Values</h2> <p>Use the size attribute to specify the number of visible values.</p>
<form action="/action_page.php"> <select name="cars" size="3"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit"> </form>
</body> </html> |
در آخر اگر می خواهید کاربر بتواند چندین گزینه را انتخاب کند از multiple
استفاده می کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <body>
<h2>Allow Multiple Seletcions</h2> <p>Use the multiple attribute to allow the user to select more than one value.</p>
<form action="/action_page.php"> <select name="cars" size="4" multiple> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select> <br><br> <input type="submit"> </form>
<p>Hold down the Ctrl (windows) / Command (Mac) button to select multiple options.</p>
</body> </html> |
برای این کار کاربر باید کلید کنترل (Ctrl) را نگه دارد و سپس گزینه های مورد نظرش را انتخاب کنید. بدین ترتیب می توان چندین گزینه را انتخاب نمود. می توانید این مورد را در مثالا بالا امتحان کنید.(
ایران گستر)
عنصر <textarea>
یک فیلد متنیِ چند خطی را ایجاد می کند. به مثال زیر توجه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <body>
<h2>Textarea</h2> <p>The textarea element defines a multi-line input field.</p>
<form action="/action_page.php"> <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea> <br> <input type="submit"> </form>
</body> </html> |
در کد بالا rows
مسئول مشخص کردن تعداد خطوط قابل رویت در text area و cols
مسئول مشخص کردن عرض قابل رویت آن هستند. البته می توانید این اندازه ها را با CSS نیز تعیین کنید:(
ایران گستر)
1 2 3 |
<textarea name="message" style="width:200px; height:600px;"> The cat was playing in the garden. </textarea> |
عنصر <button>
یک دکمه را تعریف می کند:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <body>
<h2>The button Element</h2>
<button type="button" onclick="alert('سلام کاربر گرامی')">روی من کلیک کن</button>
</body> </html> |
همانطور که می بینید دکمه ها به خودی خود کاری نمی کنند و ما باید برایشان تعریف کنیم که قرار است چه کار کنند.
نکته: مرورگر های مختلف ممکن است از مقادیر مختلفی برای حالت پیش فرضِ
type استفاده کنند بنابراین بهتر خودتان آن را مشخص کنید.(
ایران گستر)
با معرفی HTML5 دو عنصر دیگر نیز به عناصر بالا اضافه شدند:(
ایران گستر)
<datalist>
<output>
این عناصر جدید هستند بنابراین در مرورگر های قدیمی نمایش داده نمی شوند و جای آنها خالی گذاشته می شود.(
ایران گستر)
عنصر <datalist>
لیستی از گزینه های از پیش تعیین شده را برای <input>
ایجاد می کند و کاربران هنگام کار با آن با یک لیست drop-down سر و کار دارند. همچنین list
مربوط به <input>
باید به id مربوط به <datalist>
اشاره کند.(
ایران گستر)
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <body>
<h2>The datalist Element</h2> <p>The datalist element specifies a list of pre-defined options for an input element.</p>
<form action="/action_page.php"> <input list="browsers" name="browser"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> <input type="submit"> </form>
<p dir='rtl'><b>هشدار:</b> این قابلیت در مرورگر های سافاری و اینترنت اکسپلورر 9 و قبل تر پشتیبانی نمی شود</p>
</body> </html> |
عنصر <output>
نیز نماینده ی یک محاسبه است (معمولا محاسبه هایی که با اسکریپت و در سمت سرور انجام می شوند):(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<!DOCTYPE html> <html> <body>
<h2>The output Element</h2> <p>می توانید مقدار جمع این دو عدد را به راحتی پیدا کنید</p>
<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form>
<p dir='rtl'><strong>هشدار:</strong> این قابلیت در Edge 12 و IE و مرورگر های قدیمی پشتیبانی نمی شود</p>
</body> </html> |
نکته: این عملیات فعلا کار نمی کند چرا که برای محاسبه ی این اعداد و دریافت خروجی شان نیاز دارید در سمت سرور هم کدهایش را بنویسید.(
ایران گستر)
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
عنصر <form>
فرمی را تعریف می کند که برای دریافت داده های کاربر مورد استفاده قرار می گیرد و به طور کل به این شکل است:(
ایران گستر)
1 2 3 4 5 |
<form> . عناصر مختلف فرم در این قسمت نوشته می شوند. . </form> |
هر
فرم HTML ای دارای عناصر فرم (form elements) است و به خودی خود هیچ کاری را نمی تواند انجام دهد. این
عناصر فرم در واقع انواع مختلف دریافت داده ها هستند؛ به طور مثال text field (مانند فیلد دریافت نام و نام خانوادگی کاربر)،
checkbox (فیلد هایی که کاربر آن ها را تیک می زند) و … . ما می خواهیم با این عناصر به صورت خلاصه آشنا شویم.(
ایران گستر)
عنصر <input>
مهم ترین و شناخته شده ترین عنصر یک فرم است. ظاهر این تگ بر اساس
attribute ای به نام type تغییر می کند و بستگی دارد که ما به این attribute چه مقداری داده باشیم:(
ایران گستر)
Type | توضیحات |
<input type=”text”> | یک فیلد متنی خالی به ما می دهد |
<input type=”radio”> | یک radio button به ما می دهد (انتخاب یک گزینه بین چند گزینه) |
<input type=”submit”> | یک submit button به ما می دهد (برای ثبت نهایی و ارسال فرم) |
<"input type="text>
نوع text یک فیلد متنی خالی به ما می دهد:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body>
<h2>Text Input</h2>
<form> نام:<br> <input type="text" name="firstname"> <br> نام خانوادگی:<br> <input type="text" name="lastname"> </form>
<p dir='rtl'>توجه داشته باشید که خود تگ form قابل مشاهده نیست.</p>
<p>همچنین باید بدانید که عرض پیشفرض این فیلد 20 کاراکتر است</p>
</body> </html> |
نکته: در مورد این فرم باید به دو مورد توجه کرد؛ اولا خود
تگ form قابل مشاهده نیست و ثانیا عرض پیشفرض فیلدهای text برابر با 20 کاراکتر است.(
ایران گستر)
<"input type="radio>
این نوع از type یک radio button را تعریف می کند. این نوع دکمه ها به کاربر اجازه می دهند که از بین چند گزینه تنها یک گزینه را انتخاب کند. در مثال زیر از کاربر خواسته ایم که جنسیت خود را به ما بگوید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html> <body>
<h2>Radio Buttons</h2>
<form> <input type="radio" name="gender" value="male" checked> مرد<br> <input type="radio" name="gender" value="female"> زن<br> <input type="radio" name="gender" value="other"> نمیخواهم اعلام کنم </form>
</body> </html> |
<"input type="submit>
در این نوع type، دکمه ای برای ارسال نهایی فرم به form-handler ایجاد می شود. form-handler ها در اکثر اوقات صفحات اسکریپت نویسی شده ای هستند که اطلاعات کاربر را پردازش می کنند. این صفحات در attribute ای به نام action آدرس دهی می شوند. به مثال زیر نگاه کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <html> <body>
<h2>HTML Forms</h2>
<form action="https://www.w3schools.com/action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
<p dir='rtl'>اگر بر روی دکمه ی submit کلیک کنید اطلاعات فرم به صفحه ی "https://www.w3schools.com/action_page.php" ارسال می شود</p>
</body> </html> |
پیامی که پس از ثبت فرم به شما نشان داده می شود توسط سرور و پس از بررسی داده ها تولید شده است.(
ایران گستر)
attribute ای به نام action
در تمام فرم ها وجود دارد (به غیر از موارد معدودی که استثناء هستند) و تعیین می کند که پس از ثبت نهایی فرم و ارسال آن چه اتفاقی بیفتد. البته خودِ action
کاری انجام نمی دهد بلکه فرم و اطلاعاتش را به صفحه ی اسکریپتی هدایت می کند تا پردازش شود و عکس العملی نشان دهد.(
ایران گستر)
در مثال بالا، فرم به صفحه ای به نام action_page.php ارسال شد که شامل اسکریپت های server-side (مانند PHP یا ASP.NET و …) است:(
ایران گستر)
1 |
<form action="/action_page.php"> |
نکته: اگر action
را کاملا حذف کنید، فرم به همان صفحه ای که در آن هستید ارسال می شود.(
ایران گستر)
target
تعیین می کند که پس از ارسال فرم، پاسخ در یک سربرگ جدید در مرورگر باز شود، در یک frame دیگر باز شود، در همان صفحه باز شود و الی آخر. مقدار پیش فرض آن self_
است که می گوید فرم در همین پنجره ارسال شود اما اگر می خواهید در یک پنجره ی جدید باز شود باید از blank_
استفاده کنید.(
ایران گستر)
مثال:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html> <body>
<h2>The target Attribute</h2> <p>When submitting this form, the result will be opened in a new browser tab:</p>
<form action="https://www.w3schools.com/action_page.php" target="_blank"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
</body> </html> |
مقادیر مجاز دیگر parent_
و top_
و یا نام یک iframe هستند.(
ایران گستر)
در فرم ها یک attribute بسیار مهم دیگری به نام method
(به معنی روش») وجود دارد. در واقع این attribute روش یا متد ارسال اطلاعات را مشخص می کند که یا می تواند GET باشد و یا POST.(
ایران گستر)
مثالی از متد GET:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body>
<h2>The method Attribute</h2> <p>This form will be submitted using the GET method:</p>
<form action="https://www.w3schools.com/action_page.php" target="_blank" method="GET"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
<p>پس از ثبت فرم به نوار آدرس مرورگر نگاه کنید. اطلاعات ثبت شده را در آنجا می بینید</p>
</body> </html> |
مثالی از متد POST:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <body>
<h2>The method Attribute</h2> <p>This form will be submitted using the GET method:</p>
<form action="https://www.w3schools.com/action_page.php" target="_blank" method="POST"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
<p>پس از ثبت فرم به نوار آدرس مرورگر نگاه کنید. هیچ اطلاعاتی در آنجا دیده نمی شود</p>
</body> </html> |
حالت پیش فرض مرورگر برای ارسال اطلاعات حالت GET است اما زمانی که از GET استفاده می شود تمام اطلاعات ثبت شده در نوار آدرس مرورگر نمایان خواهند بود (رجوع کنید به دو مثال بالا):(
ایران گستر)
1 |
/action_page.php?firstname=Mickey&lastname=Mouse |
نکاتی در مورد GET:(
ایران گستر)
URL محدود است (حدود 3000 کاراکتر)
اما اگر داده های شما حاوی اطلاعات مهم، شخصی، حساس و … است حتما باید از POST استفاده کنید. این متد داده های شما را در نوار آدرس نشان نمی دهد
نکاتی در مورد POST:
هر فیلد ورودی (input) باید یک name
داشته باشد و اگر فیلدی آن را نداشته باشد، داده های درون آن فیلد اصلا ارسال نمی شوند.(
ایران گستر)
در مثال زیر می توانید ببینید که تنها Last name ثبت و ارسال می شود:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!DOCTYPE html> <html> <body>
<h2>The name Attribute</h2>
<form action="https://www.w3schools.com/action_page.php"> First name:<br> <input type="text" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form>
</body> </html> |
عنصر <fieldset>
داده های مرتبط با هم را در یک گروه جمع می کند. تگ <legend>
نیز توضیحی درباره ی <fieldset>
ارائه می کند. به مثال زیر دقت کنید:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <body>
<h2>Grouping Form Data with Fieldset</h2> <p>The fieldset element is used to group related data in a form, and the legend element defines a caption for the fieldset element.</p>
<form action="/action_page.php"> <fieldset> <legend>Personal information:</legend> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </fieldset> </form>
</body> </html> |
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های
HTML مارا دنبال کنید.
[caption id="attachment_3063" align="aligncenter" width="255"] HTML[/caption]
به زبان ساده،
XHTML همان HTML است که به صورت XML نوشته شده باشد.(
ایران گستر)
XHTML مخفف EXtensible HyperText Markup Language و به معنی زبان امتدادپذیر نشانهگذاری فرامتنی» است اما نگذارید این اسم های قلمبه و سلمبه شما را فریب دهد! XHTML دقیقا مانند HTML نوشته می شود اما قوانین سخت گیرانه تری دارد و همانطور که گفتیم انگار می خواهیم HTML را به صورت یک برنامه ی XML بنویسیم. همچنین قابل ذکر است که XHTML توسط تمام مرورگر های مطرح پشتیبانی می شود.(
ایران گستر)
بسیاری از
صفحات وب دارای HTML بد و غیر معتبر هستند. به طور مثال کد HTML زیر در تمام مرورگر ها کار می کند اما از نظر فنی غیر صحیح است:(
ایران گستر)
1 2 3 4 5 6 7 8 |
<html> <head> <title>This is bad HTML</title>
<body> <h1>Bad HTML <p>This is a paragraph </body> |
به نظر شما مشکل کد بالا چیست؟
کد بالا در وهله ی اول هیچ DOCTYPE ای ندارد و مشخص نکرده است که از چه ورژنی از HTML استفاده می کند. همچنین تگ <html> را در آخر سند بسته نشده است و هیچ تگ پایانی را مشاهده نمی کنیم. این اتفاق برای
تگ های <head> و <h1> و <p> نیز اتفاق افتاده است.(
ایران گستر)
این کد HTML کاملا غیر معتبر و غیر صحیح است اما در اکثر مرورگر های وب بدون مشکل به نمایش در می آید چرا که خود مرورگر ها متوجه اشکالات می شوند و آن ها را در هنگام نمایش تصحیح می کنند. اما این مسئله برای مرورگر های تلفن های همراه اتفاق نمی افتد. معمولا گوشی های هوشمند آنقدر پیشرفته نشده اند که هر نوع خطایی را متوجه شوند و تصحیحش کنند. بنابراین علاوه بر ضربه خوردن از جهت سئو، ممکن است کاربران تلفن های هوشمند نتوانند سایت شما را ببینند و کاربران زیادی را از دست بدهید.(
ایران گستر)
از طرفی XML نوعی زبان نشانه گذاری است که در آن باید قوانین نشانه گذاری را به طور کامل رعایت کرد. همانطور که حدس می زنید ترکیب XML و HTML همان XHTML می باشد.(
ایران گستر)
برخی از مهم ترین خصوصیات زبان XHTML از این قرار اند:(
ایران گستر)
DOCTYPE در این زبان اجباری است
attribute ها باید در Quotation قرار بگیرد
1- خلاصه سازی attribute ها یعنی مواردی مثل مورد زیر:(
ایران گستر)
اگر به جای نوشتن <"option selected="selected>
بنویسید <option selected>
می گوییم attribute (در اینجا selected
) را خلاصه کرده اید.
می خواهیم این موارد را به صورت خلاصه بررسی کنیم.(
ایران گستر)
یک سند XHTML باید علاوه بر DOCTYPE شامل تگ های <html> و <head> و <title> و <body> باشد.
یک نمونه سند صحیح به این شکل است:(
ایران گستر)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Title of document</title> </head>
<body> some content </body>
</html> |
DOCTYPE ای که در بالا می بینید، نحوه ی اعلام DOCTYPE به عنوان XHTML است.
در زبان HTML بعضا می توانیم اشتباها عناصر را nest کنیم:(
ایران گستر)
1 |
<b><i>This text is bold and italic</b></i> |
در این کد تگ های پایانی جا به جا بسته شده اند.
اما در XHTML باید کاملا صحیح nest شوند:
1 |
<b><i>This text is bold and italic</i></b> |
در HTML این کد غلط است:(
ایران گستر)
1 2 |
<p>This is a paragraph <p>This is another paragraph |
و این حالت صحیح است:(
ایران گستر)
1 2 |
<p>This is a paragraph</p> <p>This is another paragraph</p> |
حتی تگ هایی که در HTML تگ پایانی ندارند باید در XHTML بسته شوند. در HTML این تگ ها به این صورت هستند:(
ایران گستر)
1 2 3 |
A break: <br> A horizontal rule: <hr> An image: <img src="happy.gif" alt="Happy face"> |
اما در XHTML باید به این شکل نوشته شوند:
1 2 3 |
A break: <br /> A horizontal rule: <hr /> An image: <img src="happy.gif" alt="Happy face" /> |
همچنین همیشه باید تگ هایتان با حروف کوچک باشند بنابراین کد زیر غلط است:(
ایران گستر)
1 2 3 |
<BODY> <P>This is a paragraph</P> </BODY> |
حالت صحیح این کد به این صورت است:(
ایران گستر)
1 2 3 |
<body> <p>This is a paragraph</p> </body> |
کوچک بودن حروف برای attribute ها نیز صدق می کند، بنابراین کد زیر غلط است:(
ایران گستر)
1 |
<table WIDTH="100%"> |
و شکل صحیح آن بدین صورت است:
1 |
<table width="100%"> |
همچنین باید مقدار این attribute ها در quotation باشد. کد زیر غلط است:(
ایران گستر)
1 |
<table width=100%> |
و شکل صحیح آن بدین صورت است:
1 |
<table width="100%"> |
خلاصه سازی attribute ها نیز غیر مجاز است. به نمونه های صحیح و غلط زیر نگاه کنید.(
ایران گستر)
کد غلط:
1 |
<input type="checkbox" name="vehicle" value="car" checked /> |
حالت صحیح آن:(
ایران گستر)
1 |
<input type="checkbox" name="vehicle" value="car" checked="checked" /> |
کد غلط:(
ایران گستر)
1 |
<input type="text" name="lastname" disabled /> |
حالت صحیح آن:(
ایران گستر)
1 |
<input type="text" name="lastname" disabled="disabled" /> |
سوال: چطور می توانیم از HTML به XHTML مهاجرت کنیم؟(
ایران گستر)
پاسخ: ابتدا باید یک DOCTYPE برای XHTML بنویسید و DOCTYPE قبلی را حذف کنید. سپس attribute ای به نام xmlns را به خودِ عنصر html اضافه کنید. سپس نام تمامی عناصر را با حروف کوچک بنویسید و این کار را با attribute ها نیز انجام دهید. در آخر تگ های خالی (تگ هایی که تگ پایانی ندارند) را ببندید و برای مقادیر attribute ها Quotation قرار دهید.(
ایران گستر)
یک مثال از یک سند XHTML برای شما آورده ام:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title> Strict DTD XHTML Example </title> </head> <body> <p> Please Choose a Day: <br /><br /> <select name="day"> <option selected="selected">Monday</option> <option>Tuesday</option> <option>Wednesday</option> </select> </p> </body> </html> |
با نگاهی به این سند کوتاه متوجه می شوید که تمام موارد بالا در آن رعایت شده است.(
ایران گستر)
ابدومینوپلاستی که معمولاً به عنوان "شکم تاک" شناخته می شود، یک روش جراحی است که برای برداشتن پوست و چربی اضافی از ناحیه شکم و سفت کردن ماهیچه های زیرین برای ایجاد ظاهری صاف تر و صاف تر طراحی شده است. این یک گزینه جراحی زیبایی محبوب برای افرادی است که به دلیل عواملی مانند کاهش وزن قابل توجه، بارداری یا افزایش سن، پوست شل، افتاده و عضلات شکم ضعیف شده اند.
100 پرسش و پاسخ ابدومینوپلاستی و رفع تمامی ابهامات و سولاات شما در این زمینه.
ادامه مطلب
درباره این سایت