Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • S4 2023 HTML

    Cargado por

    KM Navarro
    20 vistas11 páginas
    Ejercicios HTML

    Título original

    S4-2023-HTML

    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
    Ejercicios HTML

    Copyright:

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

    S4 2023 HTML

    Cargado por

    KM Navarro
    Ejercicios HTML

    Copyright:

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

    HTML

    Julio Alfaro
    Objetivos de la semana
    ● Que el alumno conozca HTML como una herramienta para formateo de
    documentos.
    ● Que el alumno conozca HTML como una herramiento para ingreso de
    formularios
    ● Que el alumno conozca algunas capacidades de HTML5 que son
    interesantes e integran Javascript
    ¿QUE ES UN HTML?
    HTML es un lenguaje que permite la inclusión de etiquetas, los que permiten
    ser interpretados por un browser y desplegados en función lo que representa
    cada etiqueta. Un tag está formado por las siguiente estructura :

    <etiquetas atributo1=”valor1” atributo2=”valor2”> Contenido </tag>

    HTML significa HyperText Markup Language, inició como una manera de


    formatear documentos y estandarizar la presentación de los mismos, por lo
    que las etiquetas interactúan con el texto y al ser interpretados por un
    browser le dan algún formato.
    ESTRUCTURA DE UN HTML BASICO
    <!doctype html> : Esta es la primera linea que se coloca en el archivo html e
    indica que es una archivo HTML5

    <html></html> : Estas es la primera etiqueta que define un documento HTML

    <head></head> : Estas etiquetas permiten definir el encabezado de la página


    html, aca se definen configuraciones y en general las cosas que no se ven.

    <body></body> : Estas etiquetas permiten definir el cuerpo del documento,


    generalmente acá las cosas que se ven.
    ETIQUETAS DE FORMATEO
    H1 .. H5 : Estas etiquetas sirven para P : Define un parrafo
    identificar headers, en este caso un titulo
    es el h1, un subtitulo el h2 y asi BR: Esta es un salto de linea
    sucesivamente hasta anidando niveles.
    A : Este permite insertar un link a una
    B : convierte a negrita el contenido de la referencia.
    etiqueta
    DIV : Esto permite hacer una division
    I : convierte en italica el contenido de la dentro de la pagina.
    etiqueta.
    U : convierte en subrayado el texto que
    IMG : Permite incluir una imagen contiene en su interior.

    UL, LI : UL son listas no ordenadas y cada


    elemento de estas listas es identificado con
    LI que es un item de la lista
    EJEMPLO DE HTML BÁSICO
    <!doctype html> Etiqueta que define como HTML5

    <html>

    <head> Etiqueta que define el encabezado

    <title>Hola Mundo</title>

    </head>

    <body> Etiqueta que define el cuerpo

    <h1>Hola Mundo</h1> Contenido a desplegar en el HTML

    </body>

    </html>
    ETIQUETAS DE FORMULARIO
    INPUT : Permiten ingresar datos escritos, INPUT TYPE=”radio” : Permite ingresar
    los cuales pueden ser definidos por tipo, un radio button, que tienen la caracteristica
    TEXT, NUMBER, DATE, PASSWORD, etc. de permitir seleccionar solo uno a la vez.

    TEXTAREA : Permite que se ingrese un INPUT TYPE=”checkbox” : Permite


    contenido que ocupe más de la información ingresar un checkbox, que tiene la
    que quepa en una sola línea, de esta forma caracteristica que se pueden seleccionar
    se pueden pedir comentarios o algo que simultáneamente varios elementos a la vez
    definitivamente tome más tiempo.
    BUTTON: Permite definir un boton.
    SELECT / OPTION : Este Objeto permite
    crear un dropdownlist y las opciones que FORM: Permite agrupar todos los
    muestra, se definen en la etiqueta OPTION elementos correspondientes a un
    formulario.
    LABEL : Permite definir una etiqueta para
    definir el nombre de un control de
    formulario específico.
    EJEMPLO DE UN FORMULARIO
    <form method=”POST”> Etiqueta que enmarca un formulario

    <label for=”nombre”>Nombre :</label> Etiqueta del input

    <input type=”text” id=”nombre” /> Input que permite ingresar un texto

    <label for=”password”>Password</label>

    <input type=”password” id=”password” />

    <button type=”button”>Ingresar</button> Boton para ingresar los


    datos
    </form>
    QUE ES EL DOM
    El DOM es el Document Object Model, que permite acceder a cada elemento
    que existe en la página HTML, ya que si vemos la página HTML hay una
    jerarquía, por ejemplo cada etiqueta puede encerrar en su interior otras
    etiquetas y estos elementos permiten mostrar una estructura como de arbol
    en la cual se puede acceder a cada elemento de HTML.

    Esto es una estructura que luego nos ayuda a entender la apariencia de


    pagina y tambien modificarla, veremos luego que esto se logra mediante
    javascript.
    CANVAS DE HTML 5
    Canvas es un elemento que permite realizar dibujos en el interior .
    <canvas id="myCanvas" width ="200" height ="100" style ="border:1px solid #000000;">

    </canvas >

    y en un script, se maneja de la siguiente manera :


    <script>

    var c = document.getElementById( "myCanvas" );

    var ctx = c.getContext( "2d");

    ctx.moveTo( 0, 0);

    ctx.lineTo( 200, 100);

    ctx.stroke();

    </script>
    LOCAL STORAGE HTML 5
    Permite almacenar valores en el browser, manejando una estructura de llave
    y valor , asi se define si el browser soporta localstorage:
    if (typeof(Storage) !== "undefined") {
    // Code for localStorage/sessionStorage.
    } else {
    // Sorry! No Web Storage support..
    }

    Y para acceder los valores lo hace asi :


    // Store
    localStorage.setItem("lastname", "Smith");
    // Retrieve
    document.getElementById("result").innerHTML = localStorage.getItem("lastname");

    También podría gustarte