The post دوره آموزش رایگان html و css همراه با تمرین appeared first on ویرا وردپرس.
]]>HTML و CSS دو زبان نشانهگذاری هستند که برای ساخت صفحات وب استفاده میشوند. HTML (HyperText Markup Language) برای ایجاد ساختار و محتوای صفحه وب استفاده میشود. CSS (Cascading Style Sheets) برای استایلدهی به عناصر HTML استفاده میشود.
ایجاد یک صفحه وب ساده
برای ایجاد یک صفحه وب ساده، به یک ویرایشگر متن نیاز دارید. در ویرایشگر متن، کد زیر را وارد کنید:
مثال
<!DOCTYPE html> <html> <head> <title>صفحه وب ساده</title> </head> <body> <h1>این یک عنوان است</h1> <p>این یک پاراگراف است</p> </body> </html>
این کد یک صفحه وب ساده با یک عنوان و یک پاراگراف ایجاد میکند.
هر صفحه HTML از چهار بخش اصلی تشکیل شده است:
CSS برای کنترل ظاهر عناصر HTML استفاده میشود. برخی از مفاهیم اولیه CSS عبارتند از:
برای افزودن CSS به صفحه HTML، میتوانید از تگ <style> استفاده کنید. تگ <style> در بخش <head> صفحه HTML قرار میگیرد.
کد زیر یک مثال از نحوه افزودن CSS به صفحه HTML است:
<!DOCTYPE html> <html> <head> <title>صفحه وب ساده</title> <style> h1 { color: red; font-size: 20px; } p { color: blue; font-size: 16px; } </style> </head> <body> <h1>این یک عنوان است</h1> <p>این یک پاراگراف است</p> </body> </html>
این کد رنگ عنوان را قرمز و اندازه آن را 20px میکند. همچنین رنگ پاراگراف را آبی و اندازه آن را 16px میکند.
چند نکته برای شروع
نتیجه
HTML و CSS دو زبان قدرتمند هستند که میتوان از آنها برای ساخت صفحات وب زیبا و کارآمد استفاده کرد. با یادگیری این دو زبان، میتوانید وبسایتهای خود را ایجاد کنید یا به عنوان یک طراح وب حرفهای کار کنید.
HTML شامل یک مجموعه از تگهای متنی است که برای قالببندی و نمایش متن در صفحات وب استفاده میشوند. برخی از تگهای متنی پرکاربرد عبارتند از:
مثال
کد زیر یک صفحه HTML ساده را ایجاد میکند که از تگهای متنی برای قالببندی متن استفاده میکند:
<!DOCTYPE html> <html lang="fa"> <head> <title>صفحه وب ساده</title> </head> <body> <h1>عنوان صفحه</h1> <p>این یک پاراگراف است.</p> <b>متن ضخیم</b> <i>متن ایتالیک</i> <u>متن زیرخطدار</u> <strong>متن برجسته</strong> <em>متن تأکید</em> <code>کد</code> <pre>متن بدون قالببندی</pre> </body> </html>
حتما تست کنید و خروجی ببینید با کد زدن و تمرین کردن هست که کد نویسیتون قوی میشه و یاد میگیرید.
HTML شامل یک تگ برای قرار دادن تصاویر در صفحات وب است. تگ <img> برای قرار دادن تصاویر استفاده میشود.
مثال
کد زیر یک صفحه HTML ساده را ایجاد میکند که از تگ <img> برای قرار دادن یک تصویر استفاده میکند:
<!DOCTYPE html> <html lang="fa"> <head> <title>صفحه وب ساده</title> </head> <body> <img src="image.jpg" alt="یک تصویر"> </body> </html>
تگ <img> دارای چندین صفت است که میتوان از آنها برای کنترل نحوه نمایش تصویر استفاده کرد. برخی از صفتهای پرکاربرد عبارتند از:
مثال
کد زیر یک صفحه HTML ساده را ایجاد میکند که از صفتهای تگ <img> برای تغییر اندازه و نمایش متن جایگزین استفاده میکند:
<!DOCTYPE html> <html lang="fa"> <head> <title>صفحه وب ساده</title> </head> <body> <img src="image.jpg" alt="یک تصویر" width="100" height="100"> </body> </html>
تگهای متنی و تصاویر ابزارهای مهمی برای ایجاد صفحات وب هستند. با استفاده از این تگها، میتوانید متن و تصاویر را به روشهای مختلف قالببندی و نمایش دهید.
لیستها برای سازماندهی و نمایش اطلاعات به صورت منظم استفاده میشوند. HTML شامل دو نوع لیست است:
ساخت لیستهای غیرمرتب
برای ایجاد یک لیست غیرمرتب، از تگهای <ul> و <li> استفاده میشود. تگ <ul> نشاندهنده شروع و پایان یک لیست غیرمرتب است. تگ <li> نشاندهنده یک آیتم در یک لیست غیرمرتب است.
مثال
کد زیر یک صفحه HTML ساده را ایجاد میکند که یک لیست غیرمرتب را نمایش میدهد:
<!DOCTYPE html> <html lang="fa"> <head> <title>صفحه وب ساده</title> </head> <body> <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> </body> </html>
برای ایجاد یک لیست مرتب، از تگهای <ol> و <li> استفاده میشود. تگ <ol> نشاندهنده شروع و پایان یک لیست مرتب است. تگ <li> نشاندهنده یک آیتم در یک لیست مرتب است.
مثال
کد زیر یک صفحه HTML ساده را ایجاد میکند که یک لیست مرتب را نمایش میدهد:
<!DOCTYPE html> <html lang="fa"> <head> <title>صفحه وب ساده</title> </head> <body> <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> </body> </html>
میتوان از CSS برای استایلدهی به لیستها استفاده کرد. برخی از ویژگیهای CSS که میتوان برای استایلدهی به لیستها استفاده کرد عبارتند از:
مثال
کد زیر یک صفحه HTML ساده را ایجاد میکند که یک لیست مرتب را نمایش میدهد و از CSS برای استایلدهی به آن استفاده میکند:
<!DOCTYPE html> <html lang="fa"> <head> <title>صفحه وب ساده</title> <style> ol { color: red; list-style-type: circle; } </style> </head> <body> <ol> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ol> </body> </html>
برای ایجاد یک جدول، از تگهای <table>، <tr>، <td>، و <th> استفاده میشود. تگ <table> نشاندهنده شروع و پایان یک جدول است. تگ <tr> نشاندهنده یک ردیف در یک جدول است. تگ <td> نشاندهنده یک سلول در یک ردیف است. تگ <th> نشاندهنده یک سلول عنوان در یک ردیف است.
مثال
کد زیر یک صفحه HTML ساده را ایجاد میکند که یک جدول را نمایش میدهد:
<!DOCTYPE html> <html lang="fa"> <head> <title>صفحه وب ساده</title> </head> <body> <table> <tr> <th>عنوان</th> <th>مقدار</th> </tr> <tr> <td>item 1</td> <td>value 1</td> </tr> <tr> <td>item 2</td> <td>value 2</td> </tr> </table> </body> </html>
میتوان از CSS برای استایلدهی به جداول استفاده کرد. برخی از ویژگیهای CSS که میتوان برای استایلدهی به جداول استفاده کرد عبارتند از:
مثال
کد زیر یک صفحه HTML ساده را ایجاد میکند که یک جدول را نمایش میدهد و از CSS برای استایلدهی به آن استفاده میکند:
<!DOCTYPE html> <html lang="fa"> <head> <title>صفحه وب ساده</title> <style> table { border: 1px solid black; border-collapse: collapse; width: 500px; height: 200px; } th { background-color: lightblue; color: black; text-align: center; } td { background-color: lightgray; color: black; text-align: center; } </style> </head> <body> <table> <tr> <th>عنوان</th> <th>مقدار</th> </tr> <tr> <td>item 1</td> <td>value 1</td> </tr> <tr> <td>item 2</td> <td>value 2</td> </tr> </table> </body> </html>
لیستها و جداول ابزارهای مهمی برای ایجاد صفحات وب هستند. با استفاده از این ابزارها، میتوانید اطلاعات را به روشهای مختلف سازماندهی و نمایش دهید.
فرمها برای جمعآوری اطلاعات از کاربران استفاده میشوند. ورودیها عناصری هستند که کاربران میتوانند برای وارد کردن اطلاعات در فرم استفاده کنند.
برای ایجاد یک فرم، از تگ <form> استفاده میشود. تگ <form> نشاندهنده شروع و پایان یک فرم است.
برای ایجاد یک ورودی، از تگ <input> استفاده میشود. تگ <input> انواع مختلفی دارد که هر کدام برای جمعآوری نوع خاصی از اطلاعات استفاده میشوند. برخی از انواع ورودیهای پرکاربرد عبارتند از:
مثال
کد زیر یک صفحه HTML ساده را ایجاد میکند که یک فرم را نمایش میدهد:
<!DOCTYPE html> <html lang="fa"> <head> <title>صفحه وب ساده</title> </head> <body> <form action="submit.php" method="post"> <input type="text" name="name" placeholder="نام"> <input type="email" name="email" placeholder="آدرس ایمیل"> <input type="password" name="password" placeholder="رمزعبور"> <textarea name="message" placeholder="پیام"></textarea> <button type="submit">ارسال</button> </form> </body> </html>
نحوه مدیریت و ارسال دادهها با فرمها برای مدیریت و ارسال دادههای فرم، از روشهای زیر میتوان استفاده کرد: متد GET: این متد دادههای فرم را به صورت رشته در URL ارسال میکند. متد POST: این متد دادههای فرم را به صورت مخفی ارسال میکند. مثال کد زیر یک صفحه HTML ساده را ایجاد میکند که از متد POST برای ارسال دادههای فرم استفاده میکند:
میتوان از CSS برای استایلدهی به فرمها و ورودیها استفاده کرد. برخی از ویژگیهای CSS که میتوان برای استایلدهی به فرمها و ورودیها استفاده کرد عبارتند از:
مثال
کد زیر یک صفحه HTML ساده را ایجاد میکند که از CSS برای استایلدهی به فرم استفاده میکند:
<!DOCTYPE html> <html lang="fa"> <head> <title>صفحه وب ساده</title> <style> form { width: 500px; height: 200px; border: 1px solid black; border-radius: 5px; background-color: lightgray; } input { width: 200px; height: 30px; font-size: 16px; color: black; } textarea { width: 500px; height: 100px; font-size: 16px; color: black; } button { width: 100px; height: 30px; background-color: blue; color: white; } </style> </head> <body> <form action="submit.php" method="post"> <input type="text" name="name" placeholder="نام"> <input type="email" name="email" placeholder="آدرس ایمیل"> <input type="password" name="password" placeholder="رمزعبور"> <textarea name="message" placeholder="پیام"></textarea> <button type="submit">ارسال</button> </form> </body> </html>
فرمها و ورودیها ابزارهای مهمی برای تعامل با کاربران هستند. با استفاده از HTML و CSS، میتوانید فرمها و ورودیهای سفارشی ایجاد کنید که نیازهای شما را برآورده میکنند.
انتخابگرها بخش مهمی از CSS هستند که به شما امکان میدهند عناصر خاص در صفحه را هدف قرار دهید و به آنها سبکدهی کنید. انتخابگرهای CSS به دو دسته تقسیم میشوند:
انتخابگرهای ساده به شکل زیر هستند:
selector { property: value; }
مثال
کد زیر یک عنصر p
را با رنگ قرمز هدف قرار میدهد:
p { color: red; }
انتخابگرهای ترکیبی با استفاده از عملیات منطقی مانند and
و or
میتوانند چندین عنصر را هدف قرار دهند.
مثال
کد زیر تمام عناصر p
را که کلاس my-class
دارند را با رنگ قرمز هدف قرار میدهد:
.my-class p { color: red; }
CSS دارای یک سیستم سلسله مراتبی است که به عناصر امکان میدهد از سبکهای والدین خود ارث ببرند.
مثال
کد زیر یک عنصر div
را با رنگ قرمز هدف قرار میدهد:
div { color: red; }
این کد همچنین باعث میشود که تمام عناصر p
که در داخل عنصر div
قرار دارند نیز قرمز شوند.
تصاویر پسزمینه (Background Images)
CSS به شما امکان میدهد به عناصر تصاویر پسزمینه اضافه کنید.
مثال
کد زیر یک عنصر div
را با تصویر پسزمینه یک گل target قرار میدهد:
div { background-image: url("image.jpg"); }
CSS انیمیشن به شما امکان میدهد عناصر صفحه را به صورت پویا حرکت دهید.
مثال
کد زیر یک عنصر div
را به صورت عمودی به بالا حرکت میدهد:
div { animation: move 2s ease-in-out; } @keyframes move { 0% { top: 0; } 100% { top: 100px; } }
انتخابگرها، سلسله مراتب و ارث بری، تصاویر پسزمینه و انیمیشن CSS ابزارهای قدرتمندی هستند که میتوانند به شما کمک کنند تا صفحات وب خود را به صورت سفارشی ایجاد کنید.
The post دوره آموزش رایگان html و css همراه با تمرین appeared first on ویرا وردپرس.
]]>