ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های 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 ها قسمت مهمی از فرم های 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]
به زبان ساده، 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 از این قرار اند:(ایران گستر)
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> |
با نگاهی به این سند کوتاه متوجه می شوید که تمام موارد بالا در آن رعایت شده است.(ایران گستر)
ایران گستر در صدد آن است تا با آموزش های تصویری خود, شما را با به روز ترین زبان های برنامه نویسی آشنا کند تا با یادگیری آنها بتوانبد وارد بازار کار شوید و کسب و کار خود را رونق بخشید. از این پس آموزش های 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 به این صفحه (از سایت کنسرسیوم جهانی وب) و این صفحه مراجعه کنید.
درباره این سایت