Scribd Logo
Încărcați

Bine ați venit la Scribd!

  • Clase1 HTML

    Încărcat de

    Jonathan Silva
    6 vizualizări24 pagini

    Drepturi de autor

    © © All Rights Reserved

    Formate disponibile

    PPTX, 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 PPTX, PDF, TXT sau citiți online pe Scribd
    Indicator pentru conținut neadecvat
    6 vizualizări24 pagini

    Clase1 HTML

    Încărcat de

    Jonathan Silva

    Drepturi de autor:

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

    LENGUAJE HTLM

    Clase # 1
    introduccin a la programacin y computacin 1
    Qu es HTML?
    HTML es un lenguaje para describir pginas web. Es un
    lenguaje de hipertexto, es decir, un lenguaje que
    permite escribir texto de forma estructurada, y que est
    compuesto por etiquetas, que marcan el inicio y el fin
    de cada elemento del documento.

    HTML significa Hyper Text Markup Language
    Un lenguaje de etiquetas es un conjunto de etiquetas
    de marcado
    Las etiquetas describen el contenido del documento
    Documentos HTML contienen etiquetas HTML y texto
    plano
    Los documentos HTML son tambin llamadas pginas
    web
    Tabla de versione de HTML
    Versin Ao
    HTML 1991
    HTML+ 1993
    HTML 2.0 1995
    HTML 3.2 1997
    HTML 4.01 1999
    XHTML 2000
    HTML5 2012
    Estructura de archivo HTML
    Estructura de archivo HTML (2)
    Encabezado (HEAD)
    es la primera de las dos partes en que se estructura un
    documento HTML.

    En la HEAD reside informacin acerca del documento, y
    generalmente no se ve cuando se navega por l. En la
    HEAD se pone el elemento lleno <TITLE> que es una breve
    descripcin que identifica la pgina. Es lo que el navegador
    se guarda en el "Bookmarks" (libro de marcas o libro de
    direcciones, lo que aparece en la esquina superior izquierda
    cuando se imprime el documento, y lo que aparece en el
    marco de la ventana del navegador. Tambin lo guarda en
    su cach, y servir para mostrar la pgina, cuando sea
    llamada otra vez, sin necesidad de conectarse de nuevo al
    servidor de origen.
    Modos de encabezado
    1- etiqueta <TITLE> el titulo de una pagina HTML.
    Ejemplo:
    el siguiente encabezado solo pone el titulo de la pagina.
    <HEAD>
    <TITLE> Mi pagina html</TITLE>
    </HEAD>

    2- etiqueta <META> esta etiqueta contiene los datos
    que no son visibles, pero le indican al visualizador
    parmetros como: cuando recargar, en que servidor
    se aloja, tipo de codificacin de caracteres



    Modos de encabezado(2)
    Ejemplos:
    2.1- el siguiente hace que el visualizador vuelva a cargar la pgina activa al cabo
    de 10 segundos. Tambin puede hacerse a un servidor
    <HEAD>
    <TITLE>Head de un documento </TITLE>
    <META HTTP-EQUIV="Refresh" CONTENT="10;
    URL=http://miservidor/mipagina.htm">
    </HEAD>

    2.2 El siguiente es importante con los nuevos navegadores, ya que le indica la
    tabla de caracteres que se ha empleado al escribir la pgina. De no usarlo,
    puede ocurrir que el navegador no muestre correctamente los caracteres
    especiales no ascii, tales como acentos, letras de alfabetos no occidentales, etc.,
    que se hayan quedado sin codificar de la forma tpica en html.
    <HEAD>
    <TITLE>Head de un documento </TITLE>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </HEAD>


    Cuerpo (Body)
    <body> es la segunda y ltima de las dos partes en que se
    estructura un documento HTML. Por supuesto es obligatoria, ya
    que es aqu donde reside el verdadero contenido de la pgina, y
    por tanto, al contrario de la HEAD s se ve cuando navegamos
    por ella

    Algunas propiedades:
    bgcolor="#xxyyzz" : define el color de fondo de la pgina.
    text="#xxyyzz" : define el color por defecto del texto en la
    pgina.
    link="#xxyyzz" : define el color de los enlaces.
    vlink="#xxyyzz" : define el color de los enlaces visitados.
    alink="#xxyyzz" : define el color de los enlaces activos.
    background="imagen.gif" : establece una imagen para el fondo
    de la pgina.

    Tamaos de texto
    Para definir distintos tamaos de letra, en HTML se
    utiliza el elemento lleno <Hx> </Hx> donde x es un
    nmero que puede variar entre 1 y 6, siendo 1 el
    tamao mayor.
    Este tipo de elemento se suele utilizar para escribir
    encabezamientos, ya que despus del cierre
    automticamente el visualizador inserta un salto de
    prrafo.
    Ejemplo
    <H1> IPC1 </H1>
    <H2> IPC1 </H2>
    <H3> IPC1 </H3>
    <H4> IPC1 </H4>
    <H5> IPC1 </H5>
    <H6> IPC1 </H6>
    Tamaos de texto(2)
    Otra forma de cambiar los tamaos de letra es utilizar el
    elemento <FONT > con el atributo VALOR, que es un nmero
    entre 1 y 7. El valor por defecto del texto es 3. La gran
    diferencia de esta notacin respecto a la anterior es que no
    se produce un salto de prrafo despus de cada cambio, por
    lo que pueden hacerse cosas como esta:
    <FONT SIZE=3>IPC1</font>
    <FONT SIZE=4>IPC1</font>

    atributo FACE. Este atributo permite forzar el tipo de letra
    que el diseador de la pgina quiere que vea el cliente, sin
    importar el que por defecto tenga establecido el visualizador.
    <FONT SIZE=3 FACE="arial">IPC1</FONT>
    <FONT SIZE=4 FACE="times new roman"> IPC1</FONT>
    Tipos de Separadores
    Para definir los prrafos se utiliza el elemento lleno <P>
    </P> (por Paragraph). Aunque a menudo no se utiliza el
    cierre </P>, ya que el texto continuar normalmente
    hasta que encuentre otro prrafo <P>, es conveniente
    acostumbrarse a ponerlo siempre.

    <P> laboratrio IPC1 clase#1</P>

    El elemento <P> admite cuatro atributos de alineacin:
    ALIGN=LEFT (por defecto), ALIGN=RIGHT ,
    ALIGN=CENTER y ALIGN=JUSTIFY.

    <P ALIGN=RIGHT> laboratrio IPC1 clase#1 </P>
    <P ALIGN=CENTER> laboratrio IPC1 clase#1 </P>


    Tipos de Separadores(2)
    <DIV> admite los mismos atributos que <P>:
    ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER

    <div ALIGN=RIGHT> laboratrio IPC1 clase#1 </div>
    <div ALIGN=CENTER> laboratrio IPC1 clase#1 </div>

    <br> para una lnea en blanco entre los dos bloques. Si no
    se quiere dejar esa lnea vaca entre los dos prrafos
    puede utilizarse el elemento <br> (por break). Es decir,
    que el elemento <br> es un separador, no un indicador de
    bloque.
    <P ALIGN=RIGHT> laboratrio IPC1 clase#1 </P>
    <br>
    <P ALIGN=CENTER> laboratrio IPC1 clase#1 </P>


    TABLAS
    Descripcion basica:
    <table> define en html el inicio de una
    tabla
    </table> define en html el cierre de una
    tabla
    <tr> define el inicio de una fila
    </tr> define el cierre de una fila
    <td> define el inicio de una columna
    </td> ddefine el cierre de una columna
    <th> define que el texto que sigue sera
    el encabezado de X columna
    </th> define el cierre del anterior

    Ejemplo
    <table>
    <tr>
    <th> Nombre1</th>
    <th> Nombre 2</th>
    <th> Nombre 3</th>

    <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>
    </tr>
    <tr>
    <td>Celda 4</td>
    <td>Celda 5</td>
    <td>Celda 6</td>
    </tr>
    </table>
    Manejo de celdas
    Si se coloca colspan dentro del tag
    de un columna esta se unira con otras
    columna segun sea el numero que le
    asignemos de la siguiente manera
    <td colspan="2">Campos 4 y 5</td>
    como se puede observar se estan
    uniendo dos celdas, si en dado caso se
    hubiera colocado el numero 4 se unirian
    4 celas en una.
    De igual forma si se coloca rowspan
    en el tag de una fila esto unira el
    numero de filas que le sean asignados
    de la siguiente forma

    <td rowspan="3">Campo
    unificado</td>
    Formularios
    <form> define el inicio de un
    formulario
    </form> define el final de un formulario

    Atributos:
    METHOD:
    indica cmo se enviarn las
    respuestas "POST" es el valor que
    enva los datos al agente de
    procesamiento almacenndolos en el cuerpo del
    formulario, en tanto que "GET" enva los datos
    agregndolos a la direccin URL y
    separndolos de la direccin con un
    signo de interrogacin.
    ACTION:
    indica la direccin a la que se enviar la
    informacin

    OTROS COMPLEMENTOS:

    Otros complementos:
    La etiqueta INPUT: Todos los botones y
    casillas de texto.
    La etiqueta TEXTAREA: una casilla de
    texto
    La etiqueta SELECT: una lista de
    opciones mltiples

    Listas
    Listas no ordenadas
    <ul> etiqueta que inicia una lista
    </ul> etiqueta que cierra una lista
    <li> inicia un item dentro de la lista
    </li> termina un item dentro de la lista
    ejemplo:
    <ul>
    <li type="circle">Esto es un tipo de
    punto.</li>
    <li type="square">Este es otro.</li>
    <li type="disc">Y este es otro diferente.</li>
    </ul>
    Listas ordenadas
    <ol> abre una lista ordenada
    </ol> cierra una lista ordenada

    Ejemplo:
    <ol>
    <li value="20">Este ser el nmero 20.
    </li>
    <li>Este ser el 21. </li>
    <li> Este ser el 22. Y as sucesivamente.
    </li>
    </ol>

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