Scribd Logo
Upload

Welcome to Scribd!

  • El HTML

    Uploaded by

    chinjoda
    9 views5 pages
    NINGUNA

    Original Title

    EL HTML

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    NINGUNA

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    9 views5 pages

    El HTML

    Uploaded by

    chinjoda
    NINGUNA

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    EL HTML

    ALGO DE HISTORIA
    HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML),
    publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta
    publicación se describen 22 etiquetas que mostraban un diseño inicial y
    relativamente simple de HTML. Varios de estos elementos se conservan en la
    actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con
    el paso de los años. De esta manera, podemos hablar de que han existido distintas
    versiones de HTML a lo largo de la historia de internet. Nosotros vamos a trabajar con
    el HTML estándar actual, que es el utilizado por los navegadores y páginas web de
    hoy en día. Sin embargo, no vamos a prestarle atención a las versiones y
    especificidades de cada versión, ya que el objetivo de este curso es aprender los
    fundamentos de HTML y entender cómo funciona, no conocer la sintaxis o
    especificidades de una versión concreta. ¿Por qué no le damos importancia a la
    versión? Porque una persona que cuenta con los fundamentos y comprensión
    básica sobre el lenguaje es capaz de adaptarse a las características particulares de
    una versión sin problema. En cambio, centrarse en los detalles de una versión sin
    conocer los fundamentos hará que no tengamos capacidad para comprender lo
    que hacemos ni para adaptarnos a los continuos cambios que tienen lugar en el
    ámbito de los desarrollos web.

    Tim Berners-Lee

    QUES EL HTML
    HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»),
    hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un
    estándar que sirve de referencia para la elaboración de páginas web en sus
    diferentes versiones, define una estructura básica y un código (denominado código
    HTML) para la definición de contenido de una página web, como texto, imágenes,
    videos, entre otros. Es un estándar a cargo de la W3C, 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.
    El lenguaje HTML basa su filosofía de desarrollo en la referenciació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 sólo 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

    PARA QUE SIRVE


    Podríamos decir que HTML sirve para crear páginas web, darles estructura y
    contenido. Un ejemplo sencillo de código HTML podría ser:

    <html>
    <body>
    <p>Esto es un párrafo. Bienvenidos a esta página web.</p>
    </body>
    </html>

    Este ejemplo está formado por 3 etiquetas HTML. Como podemos observar cada
    una de las etiquetas debe acabar con su homóloga de cierre. En este caso la
    etiqueta <html> debe cerrarse con </html>, la etiqueta <body> con </body> y la
    etiqueta <p> con </p>.
    Hay muchas más etiquetas que veremos más adelante pero nos debe quedar claro
    que por cada etiqueta que abramos, deberemos incluir la correspondiente etiqueta
    de cierre. Así conseguiremos un código HTML bien formado y que los navegadores
    puedan interpretar sin ambigüedad.
    Este sencillo ejemplo mostraría por pantalla lo siguiente.

    ¿Qué ocurriría si una etiqueta que abramos no tiene su correspondiente cierre?


    Digamos que se trataría de un código HTML mal construido, y los navegadores esto
    lo pueden interpretar de distintas maneras. Quizás nos muestren la página tal y
    como esperábamos sin aparente error. Quizás nos muestren una página de error o se
    quede en blanco el navegador. Nuestro objetivo ha de ser siempre construir páginas
    HTML bien estructuradas y sin ambigüedades, es decir, hacer un correcto uso del
    lenguaje para que los navegadores puedan saber exactamente qué es lo que
    pretendemos mostrar.

    COMO SE UTILIZA
    Los mensajes de correo electrónico suelen utilizar dos formatos: texto y HTML. Muchos
    clientes de correo electrónico ofrecen la opción de alternar ambas modalidades.
    Esto es lo que sucede cuando se utiliza cada uno de estos formatos en Mail-to-
    Blogger:

    Formato de texto: todo el contenido se publica en su blog exactamente igual que


    como lo ha escrito. Esto significa que si escribe <strong> en su entrada, el texto no
    aparecerá en negrita. Las llaves <> aparecerán como caracteres de escape y el
    blog publicado mostrará <strong> como texto.

    HTML: todo el código HTML se interpreta como tal. Si utiliza las funciones de formato
    de su cliente de correo electrónico para convertir el texto en negrita, es posible que
    no vea el código <strong>, pero que se incluya en su entrada y el texto aparezca en
    negrita en su blog. Si desea introducir el código manualmente, probablemente
    deberá utilizar un modo de "edición del código fuente" o una funcionalidad similar
    en su cliente de correo.

    ETIQUETAS ABIERTAS CERRADAS Y CON ATRIBUTO


     <html>.....</html>: Es una etiqueta cerrada que determina el inicio del
    documento html. Todas las demás etiquetas que contiene un documento html,
    para que sean reconocidas por los navegadores WEB deben estar incluidas
    dentro de estas dos instrucciones.
     <head>....</head>: Esta etiqueta determina la cabecera del documento dentro
    del encabezado pueden ir otras etiquetas como <title></title> ó <meta>.
     <title>....</title>: Es una instrucción cerrada donde se incluye el titulo de la pagina
    web.
     <meta>: instrucción que es abierta, sirve para indicar el contenido y las palabras
    clave de la pagina web.
     <!-- Comentarios -->: Para incluir comentarios en la página web se utiliza esta
    instrucción.
     <body>....</body>: Dentro de esta instrucción cerrada, es donde va a ir todo el
    contenido que queramos que tenga nuestra página web. Dentro de sus atributos
    importantes encontramos: background="nombre del fichero", Para colocar una
    imagen como fondo de la pagina. bgcolor="black", Para colocarle un color de
    fondo a nuestra pagina, en este caso el color será el negro pero puede variar.
    text="white", Indica un color para el texto que incluyamos en nuestro documento,
    en este caso será blanco, pero por defecto es negro.
     <center>....</center>: Con esta etiqueta cerrada, puedo centrar en mi pagina
    todos los objetos que inserte entre el inicio y el final del la instrucción.
     <marquee>....</marquee>: Crea una marquesina con un texto en su interior, el
    cual se desplaza por la pantalla. Entre sus atributos encontramos direction
    ="valor". Indica hacia que lugar se desplaza el texto, hacia la izquierda (left) o
    hacia la derecha (right). También scrolldelay="número". Indica los milisegundos
    que tarda en reescribirse el texto por la marquesina, a mayor número mas
    lentamente se desplazará.
     <h1>....</h1>: En html existen diferentes tipos de cabeceras, El uso de esta
    instrucción puede ser útil para poner el título, pero los tipos de titulo pueden ser
    mas pequeños utilizando las etiquetas <h2>, <h3>, <h4>, <h5>.
     <hr>....</hr>: Esta instrucción permite trazar una línea horizontal dentro de nuestra
    pagina. Posee varios atributos como: size="5", para darle un grosor a la línea y
    color="white", para determinar el color que tendrá la línea, en este caso será
    blanca.
     <br>: Es una etiqueta abierta, que permite saltar al renglón siguiente o indicar un
    salto de línea.
     <p>....</p>: Es una instrucción cerrada, se usa para indicar los atributos de un
    párrafo en concreto y para un cambiar de un párrafo a otro. el parámetro
    align="center" que indica la forma de justificar el párrafo.
     <font>....</font>: Esta etiqueta permite determinar la fuente que queremos que
    tengan nuestros títulos o párrafos dentro de la pagina web. Entre los principales
    atributos encontramos: size="5", para determinar el tamaño de la fuente.
    face="Tahoma", para determinar el tipo de fuente en este caso es Tahoma, pero
    puede ser Verdana, Arial u otra. color="yellow", para determinar el color de la
    fuente, en este caso será amarillo pero puede ser otro color.
     <b>....</b>: Permite mostrar el texto en negrita.
     <i>....</i>: Permite mostrar el texto en cursiva.
     <u>....</u>: Permite mostrar el texto subrayado.
     <img>: Se usa para incluir una imagen en nuestra página web, tiene varios
    parámetros: src="imagen", indica la ruta en el disco y el nombre del fichero
    gráfico a mostrar. alt="Logotipo LINUX", mostrara algún comentario relacionado
    con la imagen, cuando el cursor pase por encima de está. align="middle",
    indica cómo se alineará el texto que siga a la imagen, top) alinea el texto con la
    parte superior de la imagen, y (bottom) con la parte inferior.
     <a>....</a>: Un hiperenlace es un elemento que permite el acceso a otro recurso,
    página web o archivo. Para incluirlos en nuestra pagina se utiliza esta instrucción,
    esta directiva tiene el parámetro href que indica el lugar a donde nos llevará el
    hiperenlace si lo pulsamos. Para ver las otras ventanas del hipervínculo tenemos
    el parámetro target, que puede tener los siguientes valores: _blank, _self, _top.
     <ol>....</ol>: Se utiliza para trabajar con listas numeradas. representan los
    elementos de las lista numerando cada uno de ellos según el lugar que ocupan.
    Cada uno de los elementos debe ir precedido de la instrucción <li>. puede llevar
    los siguientes parámetros: start="número", Indica qué número será el primero de
    la lista. type="tipo", Indica el tipo de numeración utilizada. Si no se usan ninguno
    de los dos parámetros anteriores la numeración comenzara desde 1.
     <ul>....</ul>: Se utiliza para listas sin numerar, representa los elementos de la lista
    con una marca que antecede a cada uno de ellos y <li> para indicar cada uno
    de los elementos. Puede contener el parámetro type que indica la forma de la
    marca que antecede a cada elemento de la lista. Los valores de type pueden
    ser disk (disco), circle (circulo)o square (cuadrado).
     <table>....</table>: Esta instrucción nos permite representar tablas, Es una
    herramienta muy útil para ordenar los contenidos. Los parámetros opcionales de
    esta directiva son: border="número", Indica el ancho del borde de la tabla en
    puntos. cellpadding="número", Indica el espacio en puntos que separa el borde
    de cada celda y el contenido de ésta. bordercolor="green" Indica el color del
    borde de la tabla. bgcolor= "código de color", Especifica el color de fondo de
    toda la tabla.
     <tr>....</tr>: Para indicar donde comienza y donde termina una fila de la taba.
     <th>....</th>: sirve para definir las celdas que componen, indica una celda de
    cabecera, el contenido será resaltado en negrita y en un tamaño ligeramente
    superior al normal.
     <td>....</td>: También sirve para definir las celdas que componen la tabla, indica
    una celda normal.

    You might also like