tirotir برنامه نویسی وب مقدماتی

برنامه نویسی وب مقدماتی









درس ۱ – آشنایی با HTML





مثال





<!DOCTYPE html>
<html>
<head>
    <title>My First Web Page</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my web page.</p>
</body>
</html>










مثال





<!DOCTYPE html>
<html>
<head>
    <title>HTML Basics</title>
</head>
<body>
    <h1>HTML Structure</h1>
    <ul>
        <li>HTML stands for HyperText Markup Language.</li>
        <li>It is used to structure content on the web.</li>
        <li>HTML elements are enclosed in tags.</li>
    </ul>
</body>
</html>




















درس ۲ – کار با المنت‌ها و ویژگی‌ها





مثال





<!DOCTYPE html>
<html>
<head>
    <title>HTML Attributes</title>
</head>
<body>
    <h1>HTML Attributes</h1>
    <p>The <code>src</code> attribute is used to specify the source of an image.</p>
    <p>The <code>href</code> attribute is used for hyperlinks.</p>
</body>
</html>










مثال





<!DOCTYPE html>
<html>
<head>
    <title>HTML Elements</title>
</head>
<body>
    <h1>Common HTML Elements</h1>
    <ul>
        <li><a href="https://www.example.com">Link</a></li>
        <li><img src="image.jpg" alt="Image"></li>
        <li><p>Paragraph</p></li>
    </ul>
</body>
</html>




 









درس ۳ کار با عناصر form و input





مثال





<!DOCTYPE html>
<html>
<head>
    <title>HTML Forms</title>
</head>
<body>
    <h1>HTML Forms</h1>
    <form action="submit.php" method="post">
        <label for="name">Name:</label>
        <input type="text" id="name" name="name"><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br>
        <input type="submit" value="Submit">
    </form>
</body>
</html>










مثال





<!DOCTYPE html>
<html>
<head>
    <title>HTML Input Elements</title>
</head>
<body>
    <h1>HTML Input Elements</h1>
    <p>The <code>input</code> element is used to create various types of form fields, such as text boxes, email, and buttons.</p>
</body>
</html>










آزمون










درس ۴- لیست و جدول





مثال





<!DOCTYPE html>
<html>
<head>
    <title>HTML Lists</title>
</head>
<body>
    <h1>HTML Lists</h1>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>










مثال





<!DOCTYPE html>
<html>
<head>
    <title>HTML Tables</title>
</head>
<body>
    <h1>HTML Tables</h1>
    <table>
        <tr>
            <th>Name</th>
            <th>Age</th>
        </tr>
        <tr>
            <td>John</td>
            <td>30</td>
        </tr>
        <tr>
            <td>Jane</td>
            <td>25</td>
        </tr>
    </table>
</body>
</html>









 




درس ۱- کار با CSS





مثال





/* CSS Code Example 1 */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

h1 {
    color: #007BFF;
}

p {
    font-size: 16px;
}










<!DOCTYPE html>
<html>
<head>
    <title>My CSS Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  <Style>
    /* CSS Code Example 1 */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    color: #333;
}

h1 {
    color: #007BFF;
}

p {
    font-size: 16px;
}
  </Style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my web page.</p>
    <a href="https://www.example.com">Visit Example</a>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>










مثال





/* CSS Code Example 2 */
a {
    text-decoration: none;
    color: #FF5733;
}

ul {
    list-style-type: circle;
}










<!DOCTYPE html>
<html>
<head>
    <title>My CSS Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  <style>
    /* CSS Code Example 2 */
a {
    text-decoration: none;
    color: #FF5733;
}

ul {
    list-style-type: circle;
}
  </style>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my web page.</p>
    <a href="https://www.example.com">Visit Example</a>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>





















درس ۲- انتخابگرها و کلاس‌ها در CSS





/* CSS Code Example 1 */
.button {
    background-color: #007BFF;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#header {
    font-size: 24px;
    font-weight: bold;
}










<!DOCTYPE html>
<html>
<head>
    <title>My CSS Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  <Style>
    /* CSS Code Example 1 */
.button {
    background-color: #007BFF;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#header {
    font-size: 24px;
    font-weight: bold;
}
  </Style>
</head>
<body>
    <h1 id="header">Welcome to My Website</h1>
    <p>This is a paragraph of text on my web page.</p>
    <a href="https://www.example.com" class="button">Visit Example</a>
</body>
</html>










مثال





/* CSS Code Example 2 */
.container {
    width: 80%;
    margin: 0 auto;
}

.text-center {
    text-align: center;
}










<!DOCTYPE html>
<html>
<head>
    <title>My CSS Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
  <Style>
    /* CSS Code Example 2 */
.container {
    width: 80%;
    margin: 0 auto;
}

.text-center {
    text-align: center;
}
  </Style>
</head>
<body>
    <div class="container">
        <p class="text-center">This is a centered text.</p>
    </div>
</body>
</html>















درس ۳- لایه‌ها و کادرها در CSS





مثال





/* CSS Code Example 1 */
.box {
    width: 200px;
    height: 150px;
    background-color: #FF5733;
    padding: 20px;
    margin: 10px;
    border: 2px solid #333;
}

.container {
    display: flex;
    justify-content: space-between;
}










<!DOCTYPE html>
<html>
<head>
    <title>My CSS Example</title>
  <!--  <link rel="stylesheet" type="text/css" href="styles.css"> -->
  <Style>
    /* CSS Code Example 1 */
.box {
    width: 200px;
    height: 150px;
    background-color: #FF5733;
    padding: 20px;
    margin: 10px;
    border: 2px solid #333;
}

.container {
    display: flex;
    justify-content: space-between;
}
  </Style>
</head>
<body>
    <div class="box">
        <p>This is a box with some content.</p>
    </div>
</body>
</html>










مثال





/* CSS Code Example 2 */
.header {
    background-color: #007BFF;
    color: #fff;
    padding: 10px;
}

.footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
}










<!DOCTYPE html>
<html>
<head>
    <title>My CSS Example</title>
  <!--  <link rel="stylesheet" type="text/css" href="styles.css"> -->
  <Style>
    /* CSS Code Example 2 */
.header {
    background-color: #007BFF;
    color: #fff;
    padding: 10px;
}

.footer {
    background-color: #333;
    color: #fff;
    padding: 10px;
}
  </Style>
</head>
<body>
    <header class="header">Header</header>
    <footer class="footer">Footer</footer>
</body>
</html>















درس ۴- CSS Flexbox و طراحی واکنش‌گرا





مثال





/* CSS Code Example 1 */
.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flex-item {
    flex: 1;
    padding: 10px;
    background-color: #FF5733;
    color: #fff;
    text-align: center;
}










<!DOCTYPE html>
<html>
<head>
    <title>My CSS Example</title>
  <!--  <link rel="stylesheet" type="text/css" href="styles.css"> -->
  <Style>
    /* CSS Code Example 1 */
.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.flex-item {
    flex: 1;
    padding: 10px;
    background-color: #FF5733;
    color: #fff;
    text-align: center;
}
  </Style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">Item 1</div>
        <div class="flex-item">Item 2</div>
        <div class="flex-item">Item 3</div>
    </div>
</body>
</html>










مثال





/* CSS Code Example 2 */
@media (max-width: 768px) {
    .menu {
        display: none;
    }
}










<!DOCTYPE html>
<html>
<head>
    <title>My CSS Example</title>
  <!--  <link rel="stylesheet" type="text/css" href="styles.css"> -->
  <Style>
    /* CSS Code Example 2 */
@media (max-width: 768px) {
    .menu {
        display: none;
    }
}
  </Style>
</head>
<body>
    <nav class="menu">
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
</body>
</html>