Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Guía para Aprender HTML5

    Cargado por

    vaciocomp
    7 vistas8 páginas
    como aprender html

    Título original

    Guía para aprender HTML5 (1)

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    como aprender html

    Copyright:

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

    Guía para Aprender HTML5

    Cargado por

    vaciocomp
    como aprender html

    Copyright:

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

    Diseño y programación de sistemas Web Doc.

    Miguel Ticona
    Mamani

    Guía para aprender HTML5

    1. Introducción a HTML5
    HTML5 es la última versión del lenguaje de marcado para la creación de contenido
    en la web. Permite definir la estructura de una página web mediante etiquetas y
    elementos.

    2. Estructura básica de un documento HTML


    html

    Copy code

    <!DOCTYPE html>
    <html>
    <head>
    <title>Título de la página</title>
    </head>
    <body>
    <h1>Encabezado principal</h1>
    <p>Este es un párrafo de ejemplo.</p>
    </body>
    </html>

    ● <!DOCTYPE html>: Declaración que especifica la versión de HTML que estás


    utilizando.
    ● <html>: Elemento raíz que contiene todo el contenido de la página.
    ● <head>Contiene metadatos y enlaces a recursos externos.
    ● <title>: Define el título de la página que se muestra en la pestaña del
    navegador.
    ● <body>: Contiene el contenido visible de la página.

    3. Etiquetas básicas
    ● Encabezados: <h1> al <h6> para títulos de diferentes
    niveles. ● Párrafos: <p> para párrafos de texto.
    ● Enlaces: <a> para crear enlaces a otras páginas.
    ● Imágenes: <img> para mostrar imágenes.
    Diseño y programación de sistemas Web Doc. Miguel Ticona
    Mamani
    4. Listas
    ● Listas ordenadas: <ol> con <li> para elementos de la lista. ●
    Listas desordenadas: <ul> con <li> para elementos de la lista.

    5. Elementos de texto
    ● Negrita: <strong> o <b>.
    ● Cursiva: <em> o <i>.
    ● Subrayado: <u>.

    6. Comentarios
    Los comentarios son útiles para dejar notas en el código que no se muestran en la
    página.

    html

    Copy code

    <!-- Este es un comentario -->

    7. Formularios básicos
    Los formularios permiten a los usuarios ingresar y enviar datos.

    html

    Copy code

    <form>
    <label for="nombre">Nombre:</label>
    <input type="text" id="nombre" name="nombre">
    <input type="submit" value="Enviar">
    </form>

    8. Etiquetas semánticas
    HTML5 introduce etiquetas semánticas que describen el significado del contenido.

    ● <header>: Encabezado de la página.


    ● <nav>: Navegación.
    Diseño y programación de sistemas Web Doc. Miguel Ticona
    Mamani
    ● <main>: Contenido principal.
    ● <section>: Secciones de contenido.
    ● <article>: Contenido independiente.
    ● <footer>: Pie de página.

    9. Multimedia
    ● Videos: <video> para incrustar videos.
    ● Audio: <audio> para incrustar contenido de audio.

    10. Enlaces y anclajes


    ● Enlaces internos: <a href="#seccion"> para enlazar a una sección dentro de
    la misma página.
    ● Enlaces externos: <a href="https://www.ejemplo.com"> para enlazar a una
    página externa.

    11. HTML y CSS


    CSS se utiliza para dar estilo al contenido HTML y hacer que las páginas se vean
    atractivas.

    Diseño y programación de sistemas Web Doc. Miguel Ticona


    Mamani

    Guía para aprender CSS3

    1. Introducción a CSS3
    CSS3 (Cascading Style Sheets 3) es la última versión de la tecnología utilizada para
    controlar la presentación y el diseño de las páginas web. Con CSS3, puedes
    cambiar colores, fuentes, márgenes, alineaciones y más.

    2. Aplicación de estilos
    Los estilos se aplican utilizando selectores y propiedades. Un selector elige los
    elementos HTML a los que se aplicará un estilo y las propiedades definen cómo se
    verá ese estilo.
    3. Selectores básicos
    ● Selector de elemento: elemento selecciona todos los elementos del tipo
    especificado.
    ● Selector de clase: .nombre-clase selecciona elementos con la clase
    especificada.
    ● Selector de ID: #nombre-id selecciona un elemento con el ID especificado.

    4. Propiedades de estilo comunes

    ● color: Define el color del texto.


    ● font-family: Especifica la fuente del texto.
    ● font-size: Define el tamaño del texto.
    ● background-color: Establece el color de fondo.
    ● margin: Define los márgenes alrededor del elemento.
    ● padding: Establece el espacio interno del elemento.
    ● border: Crea un borde alrededor del elemento.

    5. Clases e IDs
    ● Clases: Utilizadas para aplicar estilos a múltiples elementos.
    ● IDs: Usados para estilizar un elemento específico.

    Diseño y programación de sistemas Web Doc. Miguel Ticona


    Mamani
    6. Modelos de caja
    ● width y height: Controlan el ancho y alto de un elemento.
    ● margin, padding, border: Definen el espacio alrededor y dentro de un
    elemento.

    7. Posicionamiento y Diseño
    ● position: Controla cómo se posiciona un elemento en relación con su
    contenedor.
    ● display: Define cómo se muestra un elemento (bloque, en línea, etc.).
    ● float: Permite que un elemento flote a la izquierda o derecha de su
    contenedor.
    ● clear: Controla cómo los elementos se comportan en relación con los
    elementos flotantes.
    8. Flexbox y Grid
    CSS3 introduce Flexbox y Grid Layout, métodos avanzados para crear diseños
    más complejos y flexibles.

    9. Pseudoclases y Pseudoelementos
    ● Pseudoclases: Se aplican a elementos en ciertos estados (como :hover para
    estilos de enlace cuando el cursor está sobre ellos).
    ● Pseudoelementos: Representan partes específicas de un elemento (como
    ::before para agregar contenido antes de un elemento).

    10. Media Queries


    Las media queries permiten crear diseños responsivos adaptados a
    diferentes tamaños de pantalla.

    css

    Copy code

    @media (max-width: 768px) {


    /* Estilos para pantallas pequeñas */
    }

    Diseño y programación de sistemas Web Doc. Miguel Ticona


    Mamani
    11. Animaciones y Transiciones
    CSS3 permite crear animaciones y transiciones fluidas sin necesidad de JavaScript.

    Diseño y programación de sistemas Web Doc. Miguel Ticona


    Mamani

    Guía para aprender JavaScript

    1. Introducción a JavaScript
    JavaScript es un lenguaje de programación que se ejecuta en el navegador
    del usuario y permite agregar interactividad y dinamismo a las páginas web.

    2. Variables y tipos de datos


    javascript
    Copy code

    // Declaración de variables
    let nombre = "Juan";
    const edad = 25;

    // Tipos de datos
    let numero = 10; // Número
    let texto = "Hola"; // Cadena de texto
    let booleano = true; // Valor booleano (verdadero/falso)

    3. Operadores
    javascript

    Copy code

    let suma = 5 + 3;
    let resta = 10 - 4;
    let multiplicacion = 3 * 6;
    let division = 15 / 3;

    let concatenacion = "Hola" + " " + "Mundo";

    4. Estructuras de control

    If-else
    javascript

    Copy code

    Diseño y programación de sistemas Web Doc. Miguel Ticona


    Mamani
    let edad = 18;

    if (edad >= 18) {


    console.log("Eres mayor de edad");
    } else {
    console.log("Eres menor de edad");
    }

    Bucles
    javascript

    Copy code
    // Bucle for
    for (let i = 0; i < 5; i++) {
    console.log(i);
    }

    // Bucle while
    let contador = 0;
    while (contador < 5) {
    console.log(contador);
    contador++;
    }

    5. Funciones
    javascript

    Copy code

    function saludar(nombre) {
    console.log("Hola, " + nombre + "!");
    }

    saludar("María");

    6. Eventos
    JavaScript permite responder a eventos en la página, como clics de botón.

    javascript

    Copy code

    Diseño y programación de sistemas Web Doc. Miguel Ticona


    Mamani
    document.getElementById("miBoton").addEventListener("click", function() {
    alert("¡Botón clickeado!");
    });

    7. Manipulación del DOM


    El DOM (Modelo de Objeto de Documento) permite interactuar con los elementos de
    la página.

    javascript
    Copy code

    let elemento = document.getElementById("miElemento");


    elemento.innerHTML = "Nuevo contenido";

    elemento.style.color = "blue";

    8. Objetos y Propiedades
    javascript

    Copy code

    let persona = {
    nombre: "Ana",
    edad: 30,
    saludar: function() {
    console.log("Hola, soy " + this.nombre);
    }
    };

    console.log(persona.nombre);
    persona.saludar();

    9. Arrays
    javascript

    Copy code

    let frutas = ["manzana", "pera", "plátano"];


    console.log(frutas[0]); // Muestra "manzana"

    frutas.push("naranja"); // Agrega "naranja" al final

    Diseño y programación de sistemas Web Doc. Miguel Ticona


    Mamani
    frutas.pop(); // Elimina el último elemento

    10. Ajax y APIs


    JavaScript se usa para hacer peticiones a servidores y trabajar con datos en formato
    JSON.

    También podría gustarte