Scribd Logo
Hochladen

Willkommen bei Scribd!

  • Qué Es HTML

    Hochgeladen von

    clajibar
    9 Ansichten6 Seiten

    Originaltitel

    Qué es HTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Verfügbare Formate

    DOCX, PDF, TXT oder online auf Scribd lesen

    Stufen Sie dieses Dokument als nützlich ein?

    Sind diese Inhalte unangemessen?

    Dieses Dokument melden

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    9 Ansichten6 Seiten

    Qué Es HTML

    Hochgeladen von

    clajibar

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Als DOCX, PDF, TXT herunterladen oder online auf Scribd lesen
    Markieren Sie unangemessene Inhalte
    von 6

    Qu es HTML?

    HTML es la "lengua materna" de tu navegador. Para abreviar una larga historia, podemos decir que un cientfico llamado Tim Berners-Lee invent HTML all por 1990. El objetivo era facilitar a cientficos de diferentes universidades el acceso a los documentos de investigacin de cada uno de ellos. El proyecto obtuvo un xito mucho mayor del que Tim Berners-Lee nunca hubiese llegado a imaginar. Al inventar HTML, este cientfico sent las bases de la web tal y como la conocemos hoy da. HTML es un lenguaje que hace posible presentar informacin (por ejemplo, investigaciones cientticas) en Internet. Lo que ves al visualizar una pgina en Internet es la interpretacin que hace el navegador del cdigo HTML. Para ver el cdigo HTML de una pgina slo tienes que pinchar en la opcin "Ver" de la barra de mens y elegir "Cdigo fuente" (en Internet Explorer).

    qu representan las siglas H-T-M-L?


    HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado hipertextual", vamos a explicar qu significa con mayor detalle.

    Hiper es lo contrario de lineal. En los buenos viejos tiempos -cuando un ratn era un animalillo que persegua un gato- los programas de ordenador se ejecutaban de forma lineal: cuando el programa haba ejecutado una accin segua hasta la siguiente lnea, y despus de sta a la siguiente, y a la siguiente, ... HTML, sin embargo, es diferente: se puede ir donde uno quiera cuando uno quiera. Por ejemplo, no es necesario visitar MSN.com antes de visitar HTML.net. Texto se explica por s solo. Marcado es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edicin de textos con encabezados, vietas, negrita, etc. Lenguaje es lo que es HTML. Este lenguaje hace uso de muchos trminos en ingls.

    Elementos y etiquetas
    Los elementos proporcionan la estructura al documento HTML e indican al navegador cmo quieres que se presente tu sitio web. Por lo general, los elementos estn formados por una etiqueta de inicio, el contenido, y una etiqueta de cierre. Las etiquetas son marcas que se usan para sealar el inicio y el fin de un elemento. Todas las etiquetas comparten el mismo formato: empiezan con el signo menor que "<" y terminan con el signo mayor que ">". Por lo general, hay dos tipos de etiquetas: la etiquetas de inicio, por ejemplo, <html>, y las etiquetas de cierre, por ejemplo, </html>. La nica diferencia entre la etiqueta de inicio y la de cierre es la barra oblicua "/". El contenido queda etiquetado al colocarlo entre una etiqueta de inicio y una etiqueta de cierre.

    ESTRUCTURA BSICA DE UN DOCUMENTO HTML


    Un documento HTML comienza con la etiqueta <html>, y termina con </html>. Dentro del documento (entre las etiquetas de principio y fin de html), hay dos zonas bien diferenciadas: el encabezamiento, delimitado por <head> y </head>, que sirve para definir diversos valores vlidos en todo el documento; y el cuerpo, delimitado por <body> y </body>, donde reside la informacin del documento. La nica utilidad del encabezamiento en la que nos detendremos es la directiva <title>, que permite especificar el ttulo de un documento HTML. Este ttulo no forma parte del documento en s: no aparece, por ejemplo, al principio del documento una vez que este se presenta con un programa adecuado, sino que suele servir como ttulo de la ventana del programa que nos la muestra. Por ejemplo <title>Manual prctico de HTML</title> en minsculas. Obsrverse que el ttulo que encabeza este texto se ha escrito con maysculas, para distinguirlo del ttulo global del documento. El cuerpo de un documento HTML contiene el texto que, con la presentacin y los efectos que se decidan, se presentar ante el hiperlector. Dentro del cuerpo son aplicables todos los efectos que se van a mencionar en el resto de esta gua. Dichos efectos se especifican exclusivamente a travs de directivas. Esto quiere decir que los espacios, tabulaciones y retornos de carro que se introduzcan en el fichero fuente no tienen ningn efecto a la hora de la presentacin final del documento. Por ejemplo, escribiendo: Estas palabras forman una frase. producimos exactamente lo mismo que con: Estas palabras forman una frase.

    A la hora de la verdad lo que se ve es: Estas palabras forman una frase. En resumen, la estructura bsica de un documento HTML queda de la forma siguiente: <html> <head> <title>Ttulo</title> </head> <body> <h1>Bienvenidos</h1> Texto del documento, menciones a grficos, enlaces, etc. </body> </html>

    1, Para realizar nuestra pagina vamos a usar el bloc de notas, programa que viene por defecto al instalar Windows. 2. Escribe el siguiente texto tal cual esta escrito: <html> <body> <head> <title> Mi compaa s.a. </title> </head> <body> <h1> Bienvenidos a mi pgina web </h1> <br> Mi compaa se especializa en el diseo de pginas web. </body> </html> 3. Guarda el texto que acabas de escribir index.htm. Es importante que aadas .htm ya que si no se guardara por defecto como un documento de texto .txt 4. Enhorabuena, acabas de crear tu primera pgina web llamada index.htm. Para ver tu pgina puedes usar cualquier navegador web como Internet Explorer. Etiquetas bsicas de html

    <html> </html> Todos los documentos HTML deben empezar y acabar con esta etiqueta. <head> <head/> Cabecera del documento HTML. Contiene informacin bsica sobre la pgina. <title> </title> Titulo de la pgina que aparecer en la barra de titulo encima de la ventana. Debe ir incluido entre las etiquetas <head> </head>. <body> </body> Contiene toda la informacin propia del documento que queremos que se visualice en el navegador (texto, grficos, formularios, etc.). <h1> </h1> Encabezado o titulo con un tamao de aproximadamente 24 puntos. Existen 6 tipos de encabezado <h1> >h2>..<h6>. <h1> es el de mayor tamao, <h6> es el mas pequeo con aproximadamente 8 puntos. <strong> </strong> Resalta el texto en negrita. <em> </em> Convierte el texto en cursiva, puede combinarse con el atributo <strong> para escribir texto en cursiva y negrita. <strong> <em> el texto aparece en negrita y cursiva </strong> </em> <ul> </ul> Indica el comienzo y el final de una lista. Cada elemento de la lista se indica con la etiqueta <li>. <br> Salto de lnea forzado.

    <p> </p> Provoca una separacin de dos espacios entre cada bloque de texto creando un prrafo nuevo.

    Crea tu segunda pgina en HTML

    <html> <body> <head> <title> Nombre del producto </title> </head> <body> <h1> Ahorra mucho dinero con este increble producto </h1> <h4> El mejor producto que nunca encontrara </h4> <br> Deja de buscar. Mi producto te solucionara todos tus problemas. El mejor producto que puedes comprar al mejor precio. Tan solo cuesta <strong> la mitad </strong> de lo que cuestan otros productos similares. <p> Beneficios del producto:<ul> <li> Puedes usarlo por la maana </li> <li> Puedes usarlo por la noche </li> <li> Puedes usarlo los das lluviosos </li> <li> Puedes usarlo los das soleados </li> </ul> <br> Mi producto ha sido escogido como <em> producto del ao </em> por la revista del consumidor. <p> No esperes mas! Compra mi producto ahora. </body> </html> Guarda la pagina como producto1.htm en el bloc de notas.

    Aade grficos e hipervnculos a tu pgina


    Con HTML podrs aadir grficos e hipervnculos a otras pginas o documentos fcilmente consiguiendo que vuestra pgina sea mucho ms atractiva e interactiva.

    Grficos
    La etiqueta necesaria para insertar grficos en una pagina es <img=src..> Ejemplo: <img=srchttp://www.enlared.biz/imagenes2/welcomecomp.jpg> as indicamos al navegador que debe mostrar el grafico welcomecomp.jpg guardado en el directorio imagenes2 del dominio enlared.biz

    Hipervnculos
    Para incluir hipervnculos en tu web debes insertar la etiqueta <a herf=..> </a> En los puntos suspensivos debes indicar la direccin url del documento al que quieres acceder al hacer clic sobre el link. Si quieres poner un texto especifico que describa el link y ser el que lean los usuarios debes situarlo entre > y </a> justo antes del cierre de la etiqueta. Ejemplo: <a herf=http//www.enlared.biz>Gana dinero con Internet<a/> Cuando alguien cliquee sobre las palabras gana dinero con Internet automticamente ser redireccionado a la pagina htttp://www.enlared.biz

    Etiqueta body.
    Anteriormente os hemos explicado que todo lo que queramos que se vea en nuestra pgina web deberemos escribirlo dentro de la etiqueta body. Eso es lo que llamamos el "cuerpo" del documento. Es la parte visible. Pero debes saber que ese cuerpo, o sea, que la etiqueta body tambin podemos personalizarla para darle el aspecto que nosotros deseemos. Esta personalizacin la conseguiremos a travs de una serie de parmetros que a continuacin te presentaremos. Bien, pues vamos a empezar. Color de fondo: bgcolor El primer parmetro que debes conocer es el del color de fondo, el "bgcolor". A travs de este parmetro podremos definir el color de fondo que queramos que tenga nuestra pgina. Un ejemplo muy simple es el siguiente: Si queremos que nuestra pgina quede con un fondo rojo deberemos escribir: <body bgcolor="#FF0000"></body> Imagen de fondo: background Puede que no quieres que tu pgina tenga un color slo de fondo, sino que quieras que tu pgina tenga una imagen. En ese caso debers indicarlo con la etiqueta "background". La etiqueta quedara de la siguiente manera: <body background="URL"> </body> Dnde leemos "URL" deberemos escribir la direccin de la imagen que queramos que sea nuestro fondo. Una cosa muy importante que debes saber es que si la imagen no es suficientemente grande para rellenar toda la pgina, la imagen se repetir tanto a lo ancho como a lo largo hasta rellenar todo el espacio. Color de texto: text Una vez tenemos el fondo definido, tendremos que predefinir ahora el color del texto de nuestra web. Es decir, tendremos que decirle al navegador de qu color queremos que sea nuestro texto. Esto lo definiremos con el parmetro "text". Como ejemplo vamos a poner que queremos que nuestro texto sea en negro, con lo que escribiremos lo siguiente: <body text= "#000000"></body> Mrgenes: leftmargin, topmargin, rightmargin y bottommargin Ya sabemos de qu color ser nuestro fondo y nuestro texto, pero tambin podemos predefinir los mrgenes de nuestra pgina web para que queda mucho mejor. Porque no queremos que nuestro texto se quede muy pegada a los mrgenes, verdad? Para especificar los mrgenes utilizaremos el parmetro margin, con su correspondiente indicacin delante. As encontraremos "leftmargin" para el margen izquierdo, "topmargin" para el margen de arriba, "rightmargin" para el margen de la derecha y "bottommargin" para el margen de abajo. Si queremos que nuestros mrgenes sean de 10 pxeles por todas partes escribiremos lo siguiente: <body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body> Color de links: link, alink y vlink

    En body tambin podemos ( y de hecho debemos hacerlo) definir el color de los vnculos de nuestra pginas, definir el color con el que se mostraran los links. Aqu debemos diferenciar tres tipos de instrucciones: Debemos definir el color del link (con la etiqueta "link"), el color del link activo (con la etiqueta "alink") y el color del link ya visitado (con la etiqueta "vlink"). As pues, si queremos que nuestra pgina tenga un color de enlaces (de links) de color rojo y que esos enlaces sean rojos cuando estn activos y se queden en azul cuando estn inactivos deberemos escribir lo siguiente: <body link= "#FF0000" alink= "#FF0000" vlink= "# 0000FF"></body>

    Das könnte Ihnen auch gefallen