Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Basico HTML

    Încărcat de

    juancarlosaraujo
    6 vizualizări8 pagini

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    DOCX, PDF, TXT sau citiți online pe Scribd

    Vi se pare util acest document?

    Este necorespunzător acest conținut?

    Raportați acest document

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    6 vizualizări8 pagini

    Basico HTML

    Încărcat de

    juancarlosaraujo

    Drepturi de autor:

    © All Rights Reserved
    Descărcați ca DOCX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    din 8

    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).
    HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado
    hipertextual", y esto ya es ms de lo que necesitas saber a estas alturas. En todo caso, para
    mantener un buen orden, 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 ejectutaban 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.

    Por medio de este tutorial aprenders lo que se ha dado en llamar XHTML (Extensible HyperText
    Mark-up Language, es decir, Lenguaje de marcado hipertextual extensible) que, en pocas palabras,
    es una forma de escribir HTML nueva y mejor estructurada.

    Ahora que ya sabes qu representan las siglas HTML (y XHTML), nos ponemos en marcha y
    empezamos a crear sitios web.

    Etiquetas o tags HTML
    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.

    HTML trata esencialmente de elementos. Aprender HTML consiste en aprender a usar diferentes
    etiquetas.
    <A> Hipervnculo. (Ej: < a href="DIRECCION WEB" >Text</a>

    <ADDRESS> Formato para direccin del autor.

    <BASE> Url del autor; contexto del documento.

    <BASEFONT SIZE> Tamao de la fuente base.

    <BGSOUND> Sonido de fondo.

    <BIG> Aumenta el tamao.

    <BLINK> Hace parpadear el texto.[Slo con algunos Navegadores]

    <BLOCKQUOTE> Da formato con sangra a un prrafo

    <BODY> Cuerpo del documento. < body > & < /body >

    <BR> Retorno de lnea

    <CAPTION> Posicin de la leyenda en una tabla.

    <CENTER> Centrar. <center> Texto </center>

    <CI> Formato para citas en itlicas.

    <CODE> Formato en tipo cdigo. < code > Texto < /code >

    <DD> Definiciones marcadas, para Lista de Definiciones

    <DFN> Formato en itlica.

    <DIR> Lista de directorio, con elementos marcados con <LI>.

    <DL> Definiciones, con trminos marcados con <DT> y <DD>.

    <DT> Trminos marcados, para Lista de Definiciones <DL>.

    <EM> Formato enfatizado en itlica.

    <EMBED> Sonido de Fondo. [Slo con algunos Navegadores]

    <FONT> Definicin de la fuente. < font="arial" size="12" type="bold" >Texto</font>

    <FORM> Para ingreso
    de datos del usuario en un formulario.

    <H1 ...H6> Tamao de letras del 1 al 6. <h1/2/3/4/5/6>

    <HEAD> Encabezamiento del documento. <head> & </head>

    <HR> Lnea horizontal.

    <HTML> Al principio y al fin de todo documento. <html> & </html>

    <I> Itlica (Cursiva).

    <IMG> Cargar imgenes. <img src="LINK">

    <INPUT> Define un objeto de ingreso en un formulario.

    <ISINDEX> Indica que existe un index en el server para doc.

    <ISMAP> Activa la seleccin de imgenes para el usuario.

    <KBD> Formato monoespaciado.

    <LI> tem de lista.

    <LISTING> Listados.

    <LIT> Literal. Como PRE, pero letra proporcional.

    <MARQUEE> Marquesina. <marquee direction="up/left/right/donw"> Texto </marquee>

    <MENU> Lista men.

    <META> Metainformacin ubicada en HEAD.

    <NEXTID> Es un parmetro que identifica al documento.

    <NOBR> Elimina los saltos de lneas.

    <OL> Lista ordenada, con elementos marcados con < LI >.

    <OPTION> Opcin de seleccin dentro de un formulario.

    <P> Retorno de lnea, con un espacio.

    <P ALIGN> Alineacin de texto.

    <PLAINTEXT> Pasaje de texto plano.

    <PRE> Visualiza el texto en su formato original.

    <S> Texto tachado.

    <SAMP> Formato tipo ejemplo.

    <SELECT> Para seleccin de opciones dentro de un formulario.

    <SMALL> Disminuye el tamao.

    <STRONG> Formato enfatizado ms fuerte que <EM>.

    <SUB> Subndice.

    <SUP> Superndice.

    <TABLE> Tabla.

    <TD> Celdas de una fila en una tabla, dentro de <TR>.

    <TEXTAREA> rea para ingreso de texto dentro de un formulario.

    <TH> Ttulo de Tabla.

    <TITLE> Ttulo dentro de HEAD. <title> & </title>

    <TR> Fila de una Tabla.

    <TT> Formato tipo mquina.

    <UL> Lista no ordenada, con elementos marcados con <LI>.

    <VAR> Formato tipo variable.

    <WBR> Se usa con NOBR para una seccin separada.

    <XMP> Similar a PRE.

    Etiquetas indispensables en toda pagina web
    <html>

    <head>
    </head>

    <body>
    </body>

    </html>

    Atributos de la etiqueta body

    Veremos ahora una serie de etiquetas y atributos bsicos para la creacin de pginas web. No
    entraremos a describir una a una todas las etiquetas y atributos de que HTML dispone.
    Simplemente explicaremos las ms utilizadas y las que nosotros creemos indispensables.

    BGCOLOR
    Parmetro usado para especificar el color de fondo de la pgina. El color se define en base
    hexadecimal de la siguiente forma (#rrggbb) en el orden rojo, verde, azul (Red, Green, Blue). Es
    decir, cada color se define con el carcter # seguido de 6 letras nmeros. Cada combinacin de
    letras o nmeros da lugar a distintos colores. Tambin se puede usar el nombre en ingls de los
    colores predefinidos en los navegadores (red, blue, green, etc.).

    Sintaxis: <body bgcolor=#0000FF> o <body bgcolor=blue>

    En este ejemplo el color azul vemos que lo podemos poner tanto con su cdigo como
    simplemente escribiendo blue, porque es un color bsico. Los colores no bsicos slo podremos
    indicarlos como cdigo hexadecimal. Una buena ayuda para la seleccion de colores con #rrggbb la
    puedes encontrar escribiendo en un buscador como Google, Yahoo o Bing el texto colores
    hexadecimales y entrando a cualquiera de las pginas que te permiten seleccionar un color y te
    dicen cul es su cdigo.

    TEXT
    Parmetro usado para definir el color del texto. Su formato es el mismo que el de bgcolor. Si no se
    pone nada es negro.

    Sintaxis: <body text=#0000FF> o <body text=blue>


    BACKGROUND
    Parmetro usado para especificar la ruta y nombre de archivo (URL) de la imagen (formato GIF,
    JPG o PNG habitualmente) que ser usada como fondo del documento. Esta se ver como mosaico
    para cubrir toda la zona de visualizacin del navegador si es pequea (lo habitual es poner como
    fondo una imagen pequea y dejar que se repita, porque as la pgina carga ms rpido).


    Sintaxis tipo: <body background="ruta/archivo.gif">

    Por ejemplo: <body background="http://www.aprenderaprogramar.com/images/BgTexture.jpg">


    Es conveniente especificar la ruta de modo relativo, esto quiere decir que si cambiamos el
    directorio completo donde estn nuestras pginas (nuestros archivos html), desde C:\ a C:\webs
    por ejemplo, la ruta especificada debe seguir siendo vlida. En el primer ejemplo que pusimos, la
    ruta utilizada es absoluta. Dentro de un servidor tambin se pueden usar rutas relativas, el
    formato ser similar a ste:

    <body background="images/BgTexture.jpg">



    Como ves en este ejemplo no aparece el nombre del dominio. De esta forma si cambiamos el
    dominio, las rutas de las imgenes seguirn siendo correctas.


    Veamos otro ejemplo. Supongamos la siguiente estructura de directorios y archivos:


    APR2HTML/pagina1.html: el archivo denominado pagina1.html est dentro de la carpeta
    APR2HTML.

    APR2HTML/gifs/fondo.gif

    APR2HTML/ejemplos/pagina2.html: el archivo denominado pagina2.html est dentro de una
    subcarpeta denominada ejemplos, que se encuentra dentro de la carpeta APR2HTML.



    Si desde la pgina pagina1.html queremos poner como fondo la imagen fondo.gif, que se
    encuentra en el directorio gifs, se debe poner:



    <body background="gifs/fondo.gif">



    Si desde la pgina pagina2.html queremos poner como fondo la imagen fondo.gif, que se
    encuentra en el directorio gifs, se debe poner:



    <body background="../gifs/fondo.gif">



    Fjate en ../ pues es lo que indica al navegador que debe acudir al directorio superior. Si
    quisiramos subir dos niveles, por ejemplo si tenemos la pgina en
    APR2HTML/ejemplos/miweb/pagina3.html escribiramos ../../gifs/fondo.gif.





    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 pegado los mrgenes igual que al escribir en una hoja no escribimos pegado al
    borde sino que dejamos un margen.



    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.



    Los mrgenes se suelen medir en pixeles, trmino ingls que en castellano equivaldra a puntos
    (ten en cuenta que una pantalla tiene unas dimensiones en pixeles de ancho y pixeles de alto). Si
    queremos que nuestros mrgenes sean de 10 pixeles por todas partes escribiremos lo siguiente:



    <body leftmargin="10px" topmargin="10px" rightmargin="10px" bottommargin="10px"></body>

    S-ar putea să vă placă și