Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML y CSS

    Cargado por

    gabriel gonzalez
    6 vistas9 páginas
    El documento resume los conceptos básicos de HTML y CSS. HTML define la estructura de una página web mediante etiquetas, mientras que CSS controla su presentación y estilo. El documento explica elementos clave como encabezados, párrafos, listas, tablas, formularios e imágenes en HTML, y cómo aplicar estilos mediante hojas de estilo en línea, el elemento <style> y archivos CSS externos.

    Descripción original:

    Trabajo

    Título original

    HTML Y CSS

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    El documento resume los conceptos básicos de HTML y CSS. HTML define la estructura de una página web mediante etiquetas, mientras que CSS controla su presentación y estilo. El documento explica elementos clave como encabezados, párrafos, listas, tablas, formularios e imágenes en HTML, y cómo aplicar estilos mediante hojas de estilo en línea, el elemento <style> y archivos CSS externos.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    6 vistas9 páginas

    HTML y CSS

    Cargado por

    gabriel gonzalez
    El documento resume los conceptos básicos de HTML y CSS. HTML define la estructura de una página web mediante etiquetas, mientras que CSS controla su presentación y estilo. El documento explica elementos clave como encabezados, párrafos, listas, tablas, formularios e imágenes en HTML, y cómo aplicar estilos mediante hojas de estilo en línea, el elemento <style> y archivos CSS externos.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 9

    República Bolivariana de Venezuela

    Ministerio del Poder Popular Para la Defensa


    Universidad Nacional Experimental Politécnica de la Fuerza Armada Nacional
    Bolivariana
    Núcleo Guacara – Cuarto Semestre de Ing. Sistemas - 04S-2629

    HTML Y CSS

    PROFESORA: BACHILLER:
    Aryeling Manasalva Gabriel González
    C.I:31.445.815

    Guacara, marzo 2024


    HTML y CSS: Un viaje por la estructura y el estilo
    web
    HTML y CSS son los pilares fundamentales del desarrollo web, trabajando en
    conjunto para crear la estructura y la estética de las páginas web que visitamos a
    diario.
    HTML (HyperText Markup Language) es un lenguaje de marcado que define
    la estructura y el contenido de una página web. Se compone de etiquetas, que
    son palabras clave que delimitan diferentes elementos de la página, como
    párrafos, encabezados, imágenes, etc.
    CSS (Cascading Style Sheets) es un lenguaje de estilo que define la
    presentación de una página web, controlando aspectos como el color, la tipografía,
    el diseño y la disposición de los elementos.

    Estructura de un documento HTML:


    ¡Un documento HTML comienza con la etiqueta <!DOCTYPE HTML> y termina
    con </HTML>. En su interior, se encuentra el contenido de la página, organizado
    en dos secciones principales:
    • Head: Contiene información sobre la página, como el título, la codificación
    de caracteres y las hojas de estilo CSS.
    • Body: Contiene el contenido visible de la página, como texto, imágenes,
    videos, formularios, etc.

    Estructura de un elemento HTML:


    Cada elemento HTML se compone de:
    • Etiqueta de apertura: Indica el inicio del elemento.
    • Contenido: El texto o elementos que forman parte del elemento.
    • Etiqueta de cierre: Indica el final del elemento.
    Ejemplo:
    <h1>Título de la página</h1>
    En este caso, <h1> es la etiqueta de apertura, Título de la página es el
    contenido y </h1> es la etiqueta de cierre.

    Elementos HTML:
    HTML posee una amplia variedad de elementos para definir diferentes tipos de
    contenido:
    • Etiquetas: Definen la estructura y el contenido de la página.
    • Atributos: Proporcionan información adicional sobre las etiquetas.
    • Anidar elementos: Permite colocar elementos dentro de otros.
    • Comentarios: Permiten añadir información que no se muestra en la página.

    Enlaces e Hipervínculos:
    Permiten navegar entre diferentes páginas web. Se crean con la etiqueta <a> y
    el atributo href.
    Ejemplo:
    <a href="https://www.google.com">Google</a>

    Listas ordenadas y no ordenadas:


    Permiten organizar el contenido en forma de lista.
    • Listas ordenadas: Se crean con la etiqueta <ol>.
    • Listas no ordenadas: Se crean con la etiqueta <ul>.
    Ejemplo
    Lista ordenada
    <ol>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
    </ol>
    Lista no ordenada:
    <ul>
    <li>Primer elemento</li>
    <li>Segundo elemento</li>
    <li>Tercer elemento</li>
    </ul>
    Imágenes:
    Se insertan en la página con la etiqueta <img> y el atributo src.
    Ejemplo:
    <img src="imagen.jpg" alt="Texto alternativo">

    Encabezados:
    Se utilizan para definir diferentes niveles de títulos en la página. Se crean con las
    etiquetas <h1> a <h6>.
    Ejemplo:
    <h1>Título principal</h1>
    <h2>Subtítulo</h2>
    <h3>Subtítulo secundario</h3>

    Párrafos:
    Definen un bloque de texto. Se crean con la etiqueta <p>.

    Símbolos y acentuación:
    Se pueden usar entidades HTML para insertar símbolos y caracteres especiales.

    Tablas:
    Permiten organizar la información en filas y columnas. Se crean con las etiquetas
    <table>, <tr> y <td>.
    Ejemplo:
    <table>
    <tr>
    <th>Nombre</th>
    <th>Edad</th>
    <th>Ciudad</th>
    </tr>
    <tr>
    <td>Ana</td>
    <td>25</td>
    <td>Caracas</td>
    </tr>
    </table>

    Formularios:
    Permiten la interacción del usuario con la página web. Se crean con la etiqueta
    <form>.
    Ejemplo:
    <form action="/action_page.php">
    <label for="fname">Nombre:</label><br>
    <input type="text" id="fname" name="fname"><br>
    <label for="lname">Apellido:</label><br>
    <input type="text" id="lname" name="lname"><br><br>
    <input type="submit" value="Enviar">
    </form>

    Etiquetas div y span:


    • div: Define una sección genérica en la página.
    • span: Define un bloque de texto con un estilo específico.
    Ejemplo:
    Div
    <div class="container">
    <h1>Título</h1>
    <p>Este es un párrafo dentro de un div.</p>
    <p>Otro párrafo dentro del mismo div.</p>
    </div>
    En este ejemplo, la etiqueta div crea un contenedor con la clase "container"
    que agrupa el título y dos párrafos.
    Span
    <p>Este es un párrafo con una parte importante en <span
    class="importante">negrita</span>.</p>
    En este caso, la etiqueta span aplica la clase "importante" al texto "negrita",
    haciendo que se muestre en negrita.

    HTML5: Declaración de Documentos y Nuevas


    Etiquetas
    Estructura:
    Un documento HTML5 comienza con la siguiente declaración:
    <!DOCTYPE html>
    Luego, se incluye la información del documento dentro de las etiquetas <html>
    y </html>:
    HTML
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Mi página web</title>
    </head>
    <body>
    <h1>Título de la página</h1>
    <p>Este es un párrafo. </p>
    </body>
    </html>
    Nuevas Etiquetas:
    HTML5 introduce nuevas etiquetas para mejorar la semántica y la accesibilidad de
    las páginas web:
    • header: Define el encabezado de la página.
    • nav: Define un área de navegación.
    • section: Define una sección de contenido.
    • article: Define un artículo independiente.
    • aside: Define contenido secundario.
    • footer: Define el pie de página.
    • audio: Permite insertar audio.
    • video: Permite insertar video.
    • canvas: Permite crear gráficos dinámicos.

    CSS: Aplicando Estilos


    Estilos en línea:
    Se pueden aplicar estilos directamente a las etiquetas usando el atributo style.
    Ejemplo:
    <p style="color: red; font-size: 20px;">Texto en rojo y grande</p>

    Elemento <style>:
    Permite definir estilos dentro del encabezado del documento HTML.

    Ejemplo:
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Mi página web</title>
    <style>
    p{
    color: blue;
    font-family: Arial;
    }
    </style>
    </head>
    <body>
    <p>Este párrafo es azul y Arial.</p>
    </body>
    </html>

    Archivos CSS:
    Los estilos se pueden separar en archivos .css externos para una mejor
    organización y reutilización.

    Ejemplo:
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Mi página web</title>
    <link rel="stylesheet" href="estilos.css">
    </head>
    <body>
    <p>Este párrafo tiene los estilos del archivo estilos.css</p>
    </body>
    </html>
    Clases CSS
    Las clases son identificadores que se pueden aplicar a uno o más elementos
    para aplicarles un conjunto de estilos.
    Ejemplo:
    <p class="importante">Este párrafo es importante</p>
    <p class="normal">Este párrafo es normal</p>

    CSS
    . importante {
    color: red;
    font-weight: bold;
    }
    . normal {
    color: black;
    font-weight: normal;
    }
    En este caso, el primer párrafo tendrá color rojo y negrita, mientras que el
    segundo tendrá color negro y normal.

    También podría gustarte