Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Introduccion Basica HTML

    Cargado por

    Hugo Alvez
    4 vistas4 páginas

    Título original

    Introduccion_Basica_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

    Copyright:

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

    Introduccion Basica HTML

    Cargado por

    Hugo Alvez

    Copyright:

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

    HTML

    Antuña Pablo
    March 22, 2020∗

    Abstract
    Este apunte es una pequeña guía para la materia Aplicaciones de Redes Específicas de
    6to año especialidad Informática del Instituto Politécnico Superior Gral. San Martín con la
    finalidad de ayudar al estudiante en cuestiones básicas del tema que titula. Puede presentar
    algún que otro mistype o error de ortografía.

    ∗ Updated March 22, 2020

    1
    IPS Aplicaciones Especificas de Redes 2020 2

    1 Introducción
    Este pequeño apunte servirá de guía para la introducción al uso de HTML en la creación de
    nuestra página web.

    2 HTML
    HTML, siglas en inglés de HyperText Markup Language, hace referencia al lenguaje de
    marcado para la elaboración de páginas web. Es un estándar a cargo del World Wide Web
    Consortium (W3C) o Consorcio WWW, organización dedicada a la estandarización de casi
    todas las tecnologías ligadas a la web, sobre todo en lo referente a su escritura e interpretación.
    Es el estándar que se ha impuesto en la visualización de páginas web y es el que todos los nave-
    gadores actuales han adoptado.

    El lenguaje HTML basa su filosofía de desarrollo en la diferenciación. Para añadir un elemento


    externo a la página (imagen, vídeo, script, entre otros.), este no se incrusta directamente en el
    código de la página, sino que se hace una referencia a la ubicación de dicho elemento mediante
    texto. De este modo, la página web contiene solamente texto mientras que recae en el navegador
    web (interpretador del código) la tarea de unir todos los elementos y visualizar la página final.
    Al ser un estándar, HTML busca ser un lenguaje que permita que cualquier página web escrita
    en una determinada versión, pueda ser interpretada de la misma forma (estándar) por cualquier
    navegador web actualizado.

    2.1 Marcado
    HTML usa "marcado" (markup en inglés) para anotar textos, imágenes y otro contenido para
    ser mostrado en un navegador web. El marcado en HTML incluye elementos.

    Un elemento HTML se separa de otro texto en un documento por medio de "etiquetas", las
    cuales consisten en elementos rodeados por < y >

    2.2 Elementos
    Los elementos son la estructura básica de HTML. Los elementos tienen dos propiedades básicas:
    atributos y contenido. Cada atributo y contenido tiene ciertas restricciones para que se considere
    válido al documento HTML. Un elemento generalmente tiene una etiqueta de inicio y una
    etiqueta de cierre.
    Los atributos del elemento están contenidos en la etiqueta de inicio y el contenido está ubicado
    entre las dos etiquetas.
    < nombre - elemento atributo = " valor " > Contenido </ nombre - elemento >

    Pablo Antuña HTML Básico IPS


    IPS Aplicaciones Especificas de Redes 2020 3

    2.3 Etiquetas Básicas


    Ahora veamos algunas de las etiquetas mas comunes de HTML:

    • <html>: define el inicio del documento HTML.


    • <script>: incrusta un script en la web.

    • <head>: define la cabecera del documento HTML; esta cabecera contiene información
    sobre el documento que no se muestra directamente al usuario.
    – <title>: define el título de la página
    – <link>: para vincular el sitio a hojas de estilo (css) o iconos
    – <style>: para colocar estilo interno a la pagina. Normalmente se utiliza la etiqueta
    <link> y se coloca todo estilo en un archivo separado.
    • <body>: define el contenido principal o cuerpo del documento. Es lo que el usuario verá en
    el navegador.
    – <h1> a <h6>: encabezados o titulos siendo <h1> un formato de mayor tamaño de
    fuente hasta <h6> el de menor tamaño.
    – <p>: inicio de párrafo.
    – <table>: define una tabla.
    ∗ <tr>: define la fila de la tabla.
    ∗ <td>: define la celda (dentro de una fila).
    – <a>: enlace dentro o fuera del sitio web.
    – <div>: división de la página. Anteriormente era común utilizar <table> para realizar
    divisiones en la página, al día de hoy eso es considerado una pesima práctica y se
    recomienda el uso de <div> junto a css en su lugar.
    – <img>: inserta una imagen en el sitio web.
    – <li><ol><ul>: etiquetas para listas.
    – <b>: texto en negrita (actualmente se recomienta reemplazar por <strong>).
    – <i>: texto en cursiva (actualmente se recomienta reemplazar por <em>).
    – <s>: texto tachado (actualmente se recomienta reemplazar por <del>).
    – <span>: sirve para diferenciar un texto de otro.
    – <form>: indica el inicio de un formulario.
    ∗ <input>: dentro de cada formulario a cada campo de texto, checkbox, selector,
    etc se lo llama input. Esta etiqueta permite la creación de cada uno de esos
    campos.
    La mayoria de las etiquetas requieres ser cerradas, esto es: </etiqueta>.
    Hay muchas mas etiquetas y a su vez cada etiqueta posee multiples atributos. Por no hacer un
    apunte muy extenso no trataremos todas las etiquetas y sus atributos pero es algo que pueden
    encontrar en multiples páginas, como por ejemplo W3Schools, donde también pueden encontrar
    ejercicios para practicar.

    Pablo Antuña HTML Básico IPS


    IPS Aplicaciones Especificas de Redes 2020 4

    2.4 Ejemplo
    <! DOCTYPE html >
    < html lang = " en " >
    < head >
    < meta charset = " UTF -8 " >
    < meta name = " viewport " content = " width = device - width , initial - scale =1.0 " >
    < link rel = " stylesheet " type = " text / css " href = " styles . css " media = " screen " >
    < title > Eventos Basicos </ title >
    </ head >
    < body onload = " init () " >
    < form name = " formRegistro " action = " # " >
    < div class = " container " >
    <h1 > Registro </ h1 >
    <p > Por favor rellene el siguiente formulario para crear su cuenta . </p >
    <hr >

    < label for = " email " >< strong > Email </ strong > </ label >
    < input type = " text " placeholder = " mail@ejemplo . com " name = " email " required >

    < label for = " psw " >< strong > Contrasena </ strong > </ label >
    < input type = " password " placeholder = " ******** " name = " PassReg " onkeyup = "
    confirmPass () " required >

    < label for = " psw - repeat " >< strong > Repita Contrasena </ strong > </ label >
    < input type = " password " placeholder = " ******** " name = " Confir mPassR eg " onkeyup = "
    confirmPass () " required >
    < div id = " passmatch " >

    </ div >


    <hr >
    <p > Al crear su cuenta acepta nuestros <a href = " # " > Terminos y Condiciones </ a >. </
    p>

    < button id = " botonenvio " type = " submit " class = " registerbtn " disabled > Registrar </
    button >
    </ div >

    < div class = " container signin " >


    <p > Ya esta registrado ? <a href = " # " > Iniciar Sesion </ a >. </ p >
    </ div >
    </ form >

    < button type = " button " class = " registerbtn " onclick = " ch a ng eB a ck Co l or () " > Cambiar
    color fondo </ button >

    < script type = " text / javascript " src = " script . js " > </ script >
    </ body >
    </ html >

    Este ejemplo se encuentra subido en la página de la materia

    Pablo Antuña HTML Básico IPS

    También podría gustarte