Propriul meu padlet by https://padlet.com/cazacuandra601/7splvpofiwnmddn2 Împărtășește-ți ideile și comentează-le pe ale altora! en-us 2024-11-21 19:00:27 UTC 2024-11-21 19:02:12 UTC hello@padlet.com https://padlet.net/icons/png/1f9e0.png Coduri cazacuandra601 https://padlet.com/cazacuandra601/7splvpofiwnmddn2/wish/3228737964 Iată o serie de exemple de coduri HTML pentru diverse scopuri:

1. Structura de bază a unei pagini HTML

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pagina mea</title>
</head>
<body>
    <h1>Bun venit pe pagina mea!</h1>
    <p>Aici poți învăța HTML.</p>
</body>
</html>

Explicație: Acesta este un cod HTML de bază care definește o structură simplă a unei pagini web, cu un titlu și un paragraf.

2. Crearea unui meniu de navigare

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Menú de navigare</title>
    <style>
        nav ul {
            list-style-type: none;
            padding: 0;
        }
        nav ul li {
            display: inline;
            margin-right: 20px;
        }
        nav ul li a {
            text-decoration: none;
            color: blue;
        }
    </style>
</head>
<body>
    <nav>
        <ul>
            <li><a href="#home">Acasă</a></li>
            <li><a href="#despre">Despre</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</body>
</html>

Explicație: Acest cod creează un meniu de navigare cu linkuri. Folosind CSS, meniul este afișat pe o singură linie, iar linkurile sunt colorate în albastru.

3. Formular de contact

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formular de contact</title>
</head>
<body>
    <h2>Formular de Contact</h2>
    <form action="procesare.php" method="post">
        <label for="nume">Nume:</label><br>
        <input type="text" id="nume" name="nume" required><br><br>

        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required><br><br>

        <label for="mesaj">Mesaj:</label><br>
        <textarea id="mesaj" name="mesaj" rows="4" cols="50" required></textarea><br><br>

        <button type="submit">Trimite</button>
    </form>
</body>
</html>

Explicație: Acesta este un formular simplu cu câmpuri pentru nume, email și mesaj. Formularul trimite datele către un fișier PHP pentru procesare (deși acest fișier PHP nu este inclus în exemplu).

4. Inserarea unei imagini

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Imagine</title>
</head>
<body>
    <h2>Imaginea mea preferată</h2>
    <img src="https://example.com/imagine.jpg" alt="Descrierea imaginii" width="500">
</body>
</html>

Explicație: Acest cod încarcă o imagine dintr-o locație externă folosind tagul <img>. Parametrii src specifică sursa imaginii, iar alt oferă o descriere alternativă a imaginii (pentru accesibilitate și SEO).

5. Listă ordonată și neordonată

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Liste</title>
</head>
<body>
    <h2>Listă Ordinară</h2>
    <ol>
        <li>Primul punct</li>
        <li>Al doilea punct</li>
        <li>Al treilea punct</li>
    </ol>

    <h2>Listă Neordonată</h2>
    <ul>
        <li>Primul punct</li>
        <li>Al doilea punct</li>
        <li>Al treilea punct</li>
    </ul>
</body>
</html>

Explicație: Acest cod creează două tipuri de liste: una ordonată (<ol>) și una neordonată (<ul>), cu puncte numerotate și nespecificate.

6. Crearea unui tabel simplu

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabel</title>
</head>
<body>
    <h2>Tabel de Produse</h2>
    <table border="1">
        <tr>
            <th>Produs</th>
            <th>Preț</th>
            <th>Cantitate</th>
        </tr>
        <tr>
            <td>Apple</td>
            <td>3.50 RON</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Banane</td>
            <td>2.00 RON</td>
            <td>8</td>
        </tr>
        <tr>
            <td>Căpșuni</td>
            <td>5.00 RON</td>
            <td>10</td>
        </tr>
    </table>
</body>
</html>

Explicație: Acest cod creează un tabel simplu cu 3 coloane (produs, preț și cantitate) și 3 rânduri de date.

7. Crearea unui link

<!DOCTYPE html>
<html lang="ro">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Linkuri</title>
</head>
<body>
    <h2>Vizitează paginile următoare</h2>
    <a href="https://www.example.com" target="_blank">Mergi pe Example</a>
</body>
</html>

Explicație: Acest cod creează un link către „https://www.example.com”. Atributul target="_blank" deschide linkul într-o fereastră nouă.

Aceste exemple acoperă cele mai frecvente elemente HTML: structura de bază, meniuri, formulare, imagini, liste, tabele și linkuri. Fiecare este simplu și ușor de înțeles, potrivit pentru a învăța elementele fundamentale ale HTML-ului.

]]> 2024-11-21 19:02:11 UTC https://padlet.com/cazacuandra601/7splvpofiwnmddn2/wish/3228737964 cazacuandra601 https://padlet.com/cazacuandra601/7splvpofiwnmddn2/wish/3228738710 2024-11-21 19:02:50 UTC https://padlet.com/cazacuandra601/7splvpofiwnmddn2/wish/3228738710