Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

Haga lo que hicimos en el aula

Código HTML

<!DOCTYPE html>
<html lang="en-col">
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML BASICS</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
      <header></header>
      <main>
        <h1>Learning HTML</h1>
        <h2>Intro</h2>
        <p>Learning HTML is an essential first step in web development. It starts with understanding the basic structure of web pages, such as elements, tags, and attributes. Practice by creating simple web pages, gradually adding complexity by incorporating lists, tables, forms, and media. Consistent practice and experimenting with different projects solidify knowledge and build confidence in creating effective web content.</p>
        <img src="img.jpeg" alt="HTML5">
        <h3>Elements</h3>
        <p>Here are five of the most important HTML elements, fundamental for creating the structure and content of web pages:</p>
        <ul>
            <li>
                <strong>&lt;html&gt;</strong>: The root element of an HTML document. It wraps all the content on the entire web page.
                <pre>
                  &lt;!DOCTYPE html&gt;
                  &lt;html&gt;
                  ...
                  &lt;/html&gt;
                </pre>
              </li>
              <li>
                <strong>&lt;head&gt;</strong>: Contains meta-information about the HTML document, such as its title, links to stylesheets, scripts, and other metadata.
                <pre>
                  &lt;html&gt;
                    &lt;head&gt;
                      &lt;title&gt;Page Title&lt;/title&gt;
                    &lt;/head&gt;
                  &lt;/html&gt;
                </pre>
              </li>
              <li>
                <strong>&lt;body&gt;</strong>: Encloses all the visible content on the web page, such as text, images, and other elements.
                <pre>
                  &lt;html&gt;
                    &lt;body&gt;
                      &lt;h1&gt;This is a heading&lt;/h1&gt;
                      &lt;p&gt;This is a paragraph.&lt;/p&gt;
                    &lt;/body&gt;
                  &lt;/html&gt;
                </pre>
              </li>
              <li>
                <strong>&lt;div&gt;</strong>: A block-level element used to group together other HTML elements and apply CSS styles or JavaScript functions to them as a single unit.
                <pre>
                  &lt;div&gt;
                    &lt;h2&gt;Section Title&lt;/h2&gt;
                    &lt;p&gt;Some content here.&lt;/p&gt;
                  &lt;/div&gt;
                </pre>
              </li>
              <li>
                <strong>&lt;a&gt;</strong>: Defines a hyperlink, which is used to link from one page to another. The <em>href</em> attribute specifies the URL of the page the link goes to.
                <pre>
                  &lt;a href="https://www.example.com"&gt;Visit Example.com&lt;/a&gt;
                </pre>
              </li>
        </ul>
        <p>These elements form the basic building blocks of most web pages, providing structure, style, and navigation. To get more information <a href="https://www.w3schools.com/html/html_basic.asp"> click here.</a> </p>
      </main>
      <footer>
        <div>Copyright&copy; 2024 - Created by Diego H. All Rights Reserved</div>
      </footer>
    </body>
</html>

Código CSS


body {
    background-color: rgb(184, 206, 224);
    color: rgb(11, 21, 31);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h1 {
    font-size: 4ch;
    text-align: center;
}
p {
    font-size: 1.5ch;
}
ul {
    font-size: 1.5ch;
}
pre {
    font-size: 1.7ch;
}
a {
    color: rgb(151, 5, 170);
    text-decoration: none;
}
footer {
    font-size: 1ch;
}
1 respuesta

Hola, Diego,

Gracias por compartir tu experiencia con nosotros. Recuerda que estamos aquí para ayudarte. Si necesitas más ayuda, no dudes en buscarnos en el foro.

¡Gracias nuevamente!

Saludos,

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios!