Scribd Logo
Carica

Benvenuto in Scribd!

  • Tit I HTML

    Caricato da

    Kike Feria
    116 visualizzazioni36 pagine

    Titolo originale

    TIT-I-HTML

    Copyright

    © Attribution Non-Commercial (BY-NC)

    Formati disponibili

    PDF, TXT o leggi online da Scribd

    Hai trovato utile questo documento?

    Questo contenuto è inappropriato?

    Segnala questo documento

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    116 visualizzazioni36 pagine

    Tit I HTML

    Caricato da

    Kike Feria

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Scarica in formato PDF, TXT o leggi online su Scribd
    Segnala contenuti inappropriati
    di 36

    TECNOLOGAS DE INTERNET

    HTML

    Profesor: Ing. Carlos David Zacaras Vlez Correo: carlos.zacarias@udep.pe

    CONTENIDOS
    HTML Historia Estructura bsica de una pgina web Estructura de un conjunto de pginas web Tipos de estructura Estndares de HTML

    Sintaxis HTML

    HTML
    HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de etiquetas para construir pginas Web. Las etiquetas HTML son palabras clave que se encuentran entre signos mayor y menor (<,>)

    Cada etiqueta por lo general tiene una apertura (<>) y un cierre (</>) y adems puede contener atributos que ayudan al manejo de contenido.
    Ejemplo
    <html> (etiqueta de apertura) </html> (etiqueta de cierre)

    HISTORIA
    La primera descripcin de HTML disponible pblicamente fue un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. Describe 22 elementos comprendiendo el diseo inicial y relativamente simple de HTML. Trece de estos elementos todava existen en la versin 4 de HTML. HTML fue usado por el segundo Navegador grfico disponible llamado MOSAIC para visualizar pginas web.

    Estructura de una pgina web


    El tag <html> ndica al navegador que all comienza una pgina web El tag <head> ndica el encabezado de la pgina web.

    El tag <title> ndica el ttulo de la pgina web


    El tag <body> indicado al navegador que all empieza el contenido de la pgina web.

    Estructura de un conjunto de pginas web


    La estructura de un conjunto de pginas Web es importante, porque una buena estructura permitir al lector visualizar todos los contenidos de una manera fcil y clara, mientras que un conjunto de pginas web con una mala estructura producir en el lector una sensacin de estar perdido, no encontrar rpidamente lo que busca y terminar por abandonar nuestro sitio.

    Tipos de estructuras

    Lineal

    Jerrquica

    Lineal con jerarqua

    Red
    7

    Estndares de HTML
    HTML ha evolucionado durante su desarrollo y est disponible en varias versiones. Todas ellas son estndares, y puedes elegir una que se adapte a tus necesidades. La mayora de las veces, la ltima versin ser la mejor eleccin, a menos que te dirijas a una audiencia muy especfica, o los navegadores ms antiguos, o interrumpidos. La versin que elijas define los elementos y atributos que puedes usar.

    Estndares de HTML

    HTML 4.01
    La W3C recomienda que todos los archivos HTML deben tener una una cabecera o identificador de la versin que se utiliza aunque esto no es estrictamente necesario.
    - HTML 4.01 Strict (Recomendado): puedes slo usar las etiquetas de la versin. - HTML 4.01 Transitional: una mezcla de todas las versiones anteriores de HTML. En esta versin se aceptan etiquetas obsoletas. Se llama Transitional porque est pensado para los que no se atreven a usar el Strict, pero les gustara en el futuro. - HTML 4.01 Frameset: una variante del Transitional, y soporte para frames.

    NOTA: En este curso tomaremos el estndar HTML 4.01 Transitional.


    10

    HTML 5
    Es la quinta revisin importante del lenguaje bsico de la WWW.

    HTML5 es considerado la considerado la combinacin de HTML, CSS Y JAVASCRIPT como una sola unidad organizada.
    - HTML se encarga de la estructura
    - CSS se encarga de presentar la estructura - JavaScript hace el resto (funcionalidad)

    Cabe recalcar que esta versin no es soportada por todos los navegadores y versiones.

    11

    MetaTags
    Se usa para contener la informacin general del documento. La informacin contenida en los metatags no es mostrada en la ventana del navegador,

    La informacin contenida en los mettags es slo importante para motores de bsqueda y dispositivos que necesitan realizar una vista previa del documento.

    12

    Ttulos y Prrafos
    Ttulos o cabeceras

    Prrafos: Para definir prrafos se hace mediante el tag <p> </p>, adems contiene las siguientes atributos: align, class, id.

    13

    Centrado, Presentado y Direcciones


    <center> La etiqueta <center></center> se utiliza por lo general dentro de un prrafo (tag <p>) y sirve para centrar el texto. <pre> Presenta el texto con un tipo de letra especial para representar cdigo fuente. <address> Tag que nos ayuda a presentar direcciones.

    14

    Listas

    15

    Caracteres especiales

    16

    Comentarios y Grficos
    Comentarios Para comentar dentro del cdigo HTML se hace de la siguiente manera <!- - Comentario - -> Grficos Para insertar imgenes a nuestra pgina Web se hace mediante el tag <img> Ejemplo: <img src=imagen> Los atributos usados dentro de este tag son: align, border, alt, title, class, width, height.
    17

    Lnea horizontal
    Sita en el documento una lnea horizontal

    18

    Enlaces
    Permiten desplazarnos entre pginas Web o dentro de la misma pgina Web. El tag usado es <a> </a> Ejemplo
    - <A HREF="http://www.udep.edu.pe/">UDEP</A>

    Para hacer un enlace dentro de la misma pgina se utiliza el atributo NAME Ejemplo
    - <A HREF="#final"> Pulsa para ir al final</A> (Enlace) - <A NAME="final"> (Donde se dirige el enlace)
    19

    Tablas
    Las tablas permiten a los diseadores acomodar datos, texto, imgenes dentro de las filas columnas. En los primeros das de la web, las tablas fueron una revolucin, un gran paso hacia adelante con respecto a la visualizacin de los documentos. Las tablas contienen filas y columnas. Una fila siempre contiene una o muchas columnas. <table></table> (Inicia y termina una tabla)

    <tr></tr> (Inicia y termina una fila)


    <td></td> (Inicia y termina una columna) <th></th> (Indica y termina el encabezado de columnas)
    20

    Ejemplo de Tablas

    21

    Tablas
    Atributos del tag <table>
    border=p width="p" height= "p" cellspacing= p" cellpadding= p" align= "left /center /right

    Atributos del tag <th> y <td>


    align = left /center /right / justify valign = top / middle / baseline / bottom". width= "n", HEIGHT= "n rowspan= "n colspan= "n"
    22

    Formularios
    Los formularios se utilizan para enviar datos a otras pginas web ya sean estas estticas o dinmicas. Los formularios contienen elementos llamados controles. Los tags son <form> </form> (Inicia y termina un formulario) Atributos del tag <form>:
    - action: Atributo que me ndica a donde se envan los datos del formulario
    - method: Atributo que me ndica el mtodo de enva ya sea por POST (Oculto) o GET (Visible) - name: Atrubuto que le da un nombre al formulario
    23

    Cajas de texto y valores ocultos

    24

    Radio Button y Checkbox

    25

    Botones

    26

    TextArea

    27

    Combos

    28

    Capas (<div>)
    Esta etiqueta define una seccin o bloque en un documento HTML. Se utiliza a menudo para agrupar elementos y aplicar estilo. Ayuda tambin en el posicionamiento de elementos en HTML.

    29

    Flujo de capas
    Capas en flujo normal Las cajas se colocan una despus de otra, verticalmente.

    Capas en flujo flotante Un div flotante tiene la propiedad float establecida a left o a right. Sale del flujo normal y se mueve a izquierda o derecha tanto como sea posible, hasta que su borde externo toca el borde del bloque de contencin o el borde externo de otro flotante. El contenido puede fluir por su costado a no ser que lo impidamos mediante la propiedad clear (valores: left / right / both / none). Las cajas no posicionadas anteriores y posteriores a la caja flotante fluyen verticalmente como si el flotante no existiera.

    30

    Posicionamiento de capas
    Capa posicionada Un div con la propiedad position establecida a absolute o relative sale del flujo normal y establece un nuevo bloque de contencin para los hijos. El posicionamiento puede ocasionar que las cajas se superpongan, por lo que tendremos que usar la propiedad z-index para establecer el orden de apilamiento adecuado. Para posicionar un div las propiedades que usaremos son: top, bottom, left y right y los valores podemos darlos como longitud, porcentaje o auto. Posicionamiento absoluto Un div con position: absolute; sale del flujo normal (no tiene ningn impacto sobre los hermanos siguientes) y se le asigna una posicin con respecto al bloque de contencin padre ms cercano que est posicionado, ya sea absoluto o relativo. Si ningn bloque de contencin padre est posicionado tomar como referencia el body.
    31

    Posicionamiento de capas
    Posicionamiento relativo

    Un div con position: relative; sale del flujo normal (la posicin de los hermanos siguientes se calcula como si el div posicionado no se hubiera desplazado) y ocupa una posicin relativa a la que le hubiera correspondido en el flujo normal.

    32

    Ejemplo de flujo normal

    33

    Ejemplo de flujo flotante

    34

    Ejemplo de posicionamiento relativo

    35

    Ejemplo de posicionamiento absoluto

    36

    Potrebbero piacerti anche