تگ های HTML و CSS

در CSS نیز از خصوصیت‌ها و انتخابگرها استفاده می‌شود: HTML: CSS: HTML: CSS: HTML: CSS: HTML: CSS: HTML: CSS: HTML: CSS: HTML: CSS: HTML: CSS: HTML: CSS: HTML: CSS: HTML: CSS: HTML: CSS: HTML: CSS: HTML: CSS:

در مفهوم برنامه‌نویسی، مفهوم وراثت به ایجاد یک رابطه بین کلاس‌ها توسط برنامه‌نویس اشاره دارد. این رابطه به برنامه‌نویس این امکان را می‌دهد که یک کلاس را بر اساس خصوصیات و رفتارهای یک کلاس دیگر ایجاد کند.

در زبان‌های برنامه‌نویسی شیءگرا، وراثت به وراثت از یک کلاس (کلاس پایه یا والدین) به یک کلاس دیگر (کلاس فرزند) اشاره دارد. این کلاس فرزند می‌تواند ویژگی‌ها و رفتارهای کلاس پایه را به ارث ببرد و به این ترتیب از تعداد زیادی کد تکراری جلوگیری کند. 


مثال در زبان Java:

```java
class Animal {
    void eat() {
        System.out.println("Animal is eating");
    }
}

class Dog extends Animal {
    void bark() {
        System.out.println("Dog is barking");
    }
}

public class Main {
    public static void main(String[] args) {
        Dog myDog = new Dog();
        myDog.eat(); // این متد از کلاس پایه ارث‌بری شده است
        myDog.bark(); // این متد از کلاس فرزند است
    }
}
```

در این مثال، کلاس `Dog` از کلاس `Animal` ارث‌بری کرده است و به این ترتیب می‌تواند به ویژگی‌ها و رفتارهای کلاس `Animal` دسترسی داشته باشد و همچنین ویژگی‌ها و رفتارهای خود را نیز اضافه کند.

در CSS، مفهوم وراثت به ارث‌بری ویژگی‌های استایل از یک المان به المان دیگر اشاره دارد. این مفهوم به طراحان و توسعه‌دهندگان این امکان را می‌دهد تا ویژگی‌های استایل را از یک نود (المان) به نود دیگر منتقل کنند و به این ترتیب از تکرار کدهای استایل جلوگیری کنند.

ویژگی‌های استایل به وسیله انتخابگرها (Selectors) به المان‌ها اختصاص می‌یابند. وراثت در CSS به وسیله استفاده از انتخابگرهای متداول و یا ایجاد انتخابگرهای خاص به سادگی امکان‌پذیر است. 


مثال:

```css
/* انتخابگر عمومی برای تمام المان‌ها */
body {
  font-family: 'Arial', sans-serif;
  color: #333;
}

/* انتخابگر خاص برای المان‌های div داخل body */
body div {
  margin: 10px;
  padding: 5px;
  background-color: #f0f0f0;
}

/* وراثت از انتخابگر عمومی برای المان‌های p داخل div */
body div p {
  font-size: 16px;
  line-height: 1.5;
}
```

در این مثال، ویژگی‌های استایلی که به `body` اختصاص یافته است، به طور اتوماتیک به المان‌های داخل آن نیز ارث داده می‌شود. این امکان در کدهای CSS بزرگتر و پیچیده‌تر به برنامه‌نویسان این امکان را می‌دهد تا کد خود را مدیریت‌پذیرتر و قابل توسعه‌تر کنند.

در HTML، تگ‌های `<meta>` و `dir` دارای کاربردهای مختلفی هستند.

`<meta>` Tag:
تگ `<meta>` برای تعریف متا اطلاعات در سند HTML استفاده می‌شود. این اطلاعات معمولاً برای موتورهای جستجو و مرورگرها ارائه می‌شوند و در سربرگ (head) صفحه قرار می‌گیرند. 


**مثال استفاده برای تعیین مجموعه کاراکتر:
```html
<meta charset="UTF-8">
```


**مثال استفاده برای تعیین توضیحات صفحه:
```html
<meta name="description" content="توضیحات صفحه">
```


**مثال استفاده برای تعیین کلمات کلیدی (keywords):
```html
<meta name="keywords" content="کلمه کلیدی ۱، کلمه کلیدی ۲، کلمه کلیدی ۳">
```

`dir` Attribute:
ویژگی `dir` به منظور تعیین جهت متن در یک المان HTML مورد استفاده قرار می‌گیرد. این ویژگی می‌تواند مقدار `ltr` (از چپ به راست) یا `rtl` (از راست به چپ) داشته باشد و جهت نوشتار متن را تعیین می‌کند. 


**مثال استفاده:
```html
<p dir="rtl">متن به جهت راست به چپ</p>
```


**مثال استفاده با اشاره به جهت دلیل:
```html
<p dir="auto" lang="fa">متن به جهت خودکار</p>
```

در مثال دوم، مقدار `auto` به مرورگر اجازه می‌دهد تا بر اساس زبان محتوا (مقدار `lang`) جهت مناسب را انتخاب کند.

HTML Attributes:
در HTML، ویژگی‌ها (Attributes) به المان‌ها اطلاعات اضافی ارائه می‌دهند. این ویژگی‌ها برخی اطلاعات مهم و یا تنظیمات را در مورد یک المان HTML مشخص می‌کنند. برخی از ویژگی‌های رایج عبارتند از: 


 - class: برای اعمال یک نام کلاس به یک المان.
    ```html
    <div class="container">محتوا</div>
    ```


 - id: برای تعیین یک شناسه یکتا به یک المان.
    ```html
    <p id="unique-paragraph">متن یکتا</p>
    ```


 - style: برای تعیین استایل‌های خاص به یک المان با استفاده از CSS inline.
    ```html
    <p style="color: blue; font-size: 16px;">متن با استایل</p>
    ```


 - src: برای تعیین مسیر منبع (مثل تصویر یا ویدئو) به یک المان.
    ```html
    <img src="image.jpg" alt="تصویر">
    ```

CSS Attributes:
در CSS، مفهوم Attributes به ترکیب ویژگی‌های ساختاری HTML با ویژگی‌های استایل مرتبط است. برخی از ویژگی‌های معروف CSS عبارتند از: 


 - color: برای تعیین رنگ متن.
    ```css
    p {
        color: #333;
    }
    ```


 - font-size: برای تعیین اندازه فونت.
    ```css
    p {
        font-size: 16px;
    }
    ```


 - margin: برای تعیین حاشیه اطراف یک المان.
    ```css
    .container {
        margin: 10px;
    }
    ```


 - background-color: برای تعیین رنگ پس‌زمینه.
    ```css
    body {
        background-color: #f0f0f0;
    }
    ```

در CSS، ویژگی‌ها بر اساس انتخابگرها به المان‌ها اعمال می‌شوند و به آنها استایل می‌دهند. این ویژگی‌ها به طراحان و توسعه‌دهندگان این امکان را می‌دهند که ظاهر و تنظیمات یک صفحه وب را به دقت کنترل کنند.

کلاس (Class) در HTML و CSS:
HTML:
کلاس در HTML به صورت یک ویژگی (Attribute) اضافی به یک المان (Element) اضافه می‌شود تا این المان با یک یا چند عنصر دیگر مشابه تعیین شود. این کلاس‌ها به ویژه برای اعمال استایل‌ها و تنظیمات CSS به گروه‌های خاص از المان‌ها استفاده می‌شوند. 


**مثال:
```html
<p class="highlight">این یک متن است</p>
<p class="highlight">و این هم یک متن دیگر</p>
```

CSS:
در CSS، کلاس به وسیله نام کلاس با استفاده از نقطه (.) اشاره داده می‌شود. این امکان را به طراحان می‌دهد تا استایل‌ها را بر اساس کلاس مرتبط با المان اعمال کنند. 


**مثال:
```css
.highlight {
    color: red;
    font-weight: bold;
}
```

آیدی (ID) در HTML و CSS:
HTML:
آیدی به عنوان یک شناسه یکتا برای یک المان در سند HTML تعیین می‌شود. هر آیدی در یک سند باید یکتا باشد و تنها می‌تواند به یک المان متصل باشد. 


**مثال:
```html
<p id="unique-paragraph">این یک متن است</p>
```

CSS:
در CSS، آیدی به وسیله علامت `#` و سپس نام آیدی مرتبط استفاده می‌شود. استفاده از آیدی در CSS به طراحان این امکان را می‌دهد تا به طور مستقیم استایل‌ها را برای یک المان خاص تعیین کنند. 


**مثال:
```css
#unique-paragraph {
    font-size: 18px;
    color: blue;
}
```

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

HTML (Hypertext Markup Language) و CSS (Cascading Style Sheets) دو زبان مهم برای ایجاد و طراحی صفحات وب هستند. در اینجا به بررسی کلیات این دو زبان و چگونگی استفاده از تگ‌ها و ویژگی‌ها در هرکدام می‌پردازیم.

HTML:
HTML از تگ‌ها (tags) برای تعریف المان‌ها استفاده می‌کند. هر تگ با یک علامت شروع و یک علامت پایان همراه است. به عنوان مثال: 


```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>صفحه وب من</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>سلام دنیا!</h1>
    </header>
    <section>
        <p>این یک متن است.</p>
        <img src="image.jpg" alt="تصویر">
    </section>
    <footer>
        <p>© 2023. تمامی حقوق محفوظ است.</p>
    </footer>
</body>
</html>
```


```css
body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

header {
    background-color: #4CAF50;
    padding: 20px;
    text-align: center;
}

section {
    margin: 20px;
}

img {
    max-width: 100%;
    height: auto;
}

footer {
    text-align: center;
    padding: 10px;
    background-color: #333;
    color: #fff;
}
```

`<fieldset>` در HTML یک تگ است که برای گروه‌بندی موارد یک فرم (form) به کار می‌رود و با استفاده از `<legend>` می‌توانید یک عنوان (legend) برای گروه ایجاد کنید. این امکان به شما این امکان را می‌دهد که موارد فرم را به گروه‌های منطقی تقسیم کنید. 


```html
<form>
  <fieldset>
    <legend>اطلاعات شخصی</legend>
    <label for="name">نام:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">ایمیل:</label>
    <input type="email" id="email" name="email">
  </fieldset>
  
  <fieldset>
    <legend>اطلاعات حساب</legend>
    <label for="username">نام کاربری:</label>
    <input type="text" id="username" name="username">
    <br>
    <label for="password">رمز عبور:</label>
    <input type="password" id="password" name="password">
  </fieldset>
  
  <input type="submit" value="ارسال">
</form>
```

در این مثال، دو `<fieldset>` تعریف شده‌اند: یکی برای اطلاعات شخصی و دیگری برای اطلاعات حساب. هر `fieldset` دارای یک `<legend>` است که عنوان گروه را نشان می‌دهد.

1. `<div>`:
- `<div>` نیز برای گروه‌بندی موارد به کار می‌رود اما بدون هیچ ساختار خاصی. برخلاف `<fieldset>` که به طور خاص برای گروه‌بندی فرم‌ها استفاده می‌شود، `<div>` به عنوان یک کانتینر عمومی برای گروه‌بندی المان‌ها به کار می‌رود. 


    ```html
    <div>
      <label for="name">نام:</label>
      <input type="text" id="name" name="name">
    </div>
    ```

2. `<section>`:
- `<section>` برای گروه‌بندی موارد مرتبط به یک بخش از صفحه استفاده می‌شود. معمولاً برای سازماندهی منطقی صفحه به بخش‌های مختلف. 


    ```html
    <section>
      <h2>عنوان بخش</h2>
      <p>محتوای بخش</p>
    </section>
    ```

تگ `<form>` در HTML برای ایجاد فرم‌های وب به کار می‌رود. این تگ اطلاعاتی را جمع‌آوری می‌کند که توسط کاربر وارد می‌شود و به وسیله متد POST یا GET به یک منبع دیگر ارسال می‌شود. 



```html
<form action="/submit" method="post">
  <label for="username">نام کاربری:</label>
  <input type="text" id="username" name="username" required>
  
  <label for="password">رمز عبور:</label>
  <input type="password" id="password" name="password" required>
  
  <input type="submit" value="ورود">
</form>
```

1. `<input>`:
- این المان به عنوان یکی از مهم‌ترین المان‌های داخلی فرم به شمار می‌آید. نوع آن می‌تواند text، password، checkbox و ... باشد.

2. `<label>`:
- استفاده از تگ `<label>` موجب افزایش قابلیت دسترسی و کاربرپسندی می‌شود، زیرا به کمک این تگ، کاربر می‌تواند با کلیک روی متن برچسب، فیلد ورودی مرتبط را انتخاب کند.

3. `action` و `method`:
- مقدار `action` مشخص می‌کند به کجا داده‌های فرم ارسال می‌شود (مسیریابی می‌شود).
- مقدار `method` تعیین می‌کند که اطلاعات با متد POST یا GET ارسال می‌شود.

4. `required`:
- ویژگی `required` اطمینان حاصل می‌کند که کاربر فیلدهای اجباری را پر کند.

5. `<select>` و `<textarea>`: - برای انتخاب‌های چندگانه از `<select>` و برای وارد کردن متن بلند از `<textarea>` استفاده می‌شود. 


```html
<select name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

<textarea name="message" rows="4" cols="50">
  متن پیام شما
</textarea>
```

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

GET و POST دو نوع از متدهای ارسال داده در HTTP (Hypertext Transfer Protocol) هستند. این دو متد برای ارسال اطلاعات از مشتری (مرورگر کاربر) به سرور (وب سرور) در فرآیند ارتباط از طریق HTTP استفاده می‌شوند. در ادامه تفاوت‌ها بین GET و POST را می‌توانید بیابید:

GET:
1. مناسبیت:
- GET بیشتر برای درخواست اطلاعات از سرور استفاده می‌شود. معمولاً درخواست‌هایی که برای دریافت اطلاعات از سرور هستند از GET استفاده می‌کنند.

2. نمایش در URL:
- اطلاعات ارسالی در GET به صورت پارامترهای Query String در URL نمایش داده می‌شوند. این اطلاعات به راحتی قابل خواندن و تغییر از سوی کاربران هستند.

3. محدودیت حجم داده:
- برخلاف POST، GET برای انتقال داده‌های کم حجم مناسب‌تر است. بنابراین، معمولاً برای انتقال پارامترهای کوچک یا درخواست‌های ساده به کار می‌رود.

4. Cache:
- اطلاعات ارسالی با GET ممکن است توسط مرورگر در کش (cache) ذخیره شود، بنابراین امکان استفاده مجدد از آنها و افزایش سرعت بارگذاری صفحات وب وجود دارد.

POST:
1. مناسبیت:
- POST بیشتر برای ارسال اطلاعات به سرور و ایجاد تغییرات در سمت سرور استفاده می‌شود. این متد معمولاً برای ارسال داده‌های حساس یا انجام عملیاتی که منجر به تغییر در سرور می‌شوند، مناسب‌تر است.

2. نمایش در URL:
- اطلاعات ارسالی با POST در بدنه درخواست (Request Body) قرار می‌گیرند و نمایش در URL ندارند. بنابراین، اطلاعات از دید کاربران قابل مشاهده نیستند.

3. حجم داده بزرگ:
- POST برای انتقال داده‌های بزرگ یا حساس مناسب‌تر است. از آنجایی که اطلاعات در بدنه درخواست قرار می‌گیرند، ارسال داده‌های بزرگتر و پیچیده‌تر امکان‌پذیر است.

4. Cache:
- POST نیازی به ذخیره در کش ندارد و داده‌های ارسالی با این متد ممکن است در کش مرورگر ذخیره نشوند.

کاربردها:
- GET:
- درخواست اطلاعات.
- درخواست صفحات وب.
- ارسال پارامترها در URL.

- POST:
- ارسال اطلاعات فرم به سرور.
- ارسال داده‌های حساس (مثل رمز عبور) به سرور.
- انجام عملیات‌هایی که منجر به تغییر در سرور می‌شوند.

همواره انتخاب بین GET و POST به وابستگی‌های مختلف پروژه و نیازهای امنیتی و کاربری مربوط است.

  1. ورود به صفحه فارسی