Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Referencia HTML+CSS

    Cargado por

    EL Msb
    11 vistas8 páginas
    design

    Derechos de autor

    © Attribution Non-Commercial (BY-NC)

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    design

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    11 vistas8 páginas

    Referencia HTML+CSS

    Cargado por

    EL Msb
    design

    Copyright:

    Attribution Non-Commercial (BY-NC)
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 8

    E D S A T N E I M A R B R E E W H O E S DI SS

    R L+ M T H A NCI E R E F E C

    Definiciones
    HTML (HyperText Markup Language) es un lenguaje que define la estructura del contenido de una pgina web, basado en marcas o etiquetas (tags) que indican el inicio y fin de cada uno de los elementos; a su vez estos elementos pueden contener a otros. CARCTERSTICAS IMPORTANTES Todos los tags abren con <tagname> y cierran con </tagname> a excepcin de <meta />, <link/>, <img/> que cierran en la misma etiqueta de apertura. Los tags pueden tener uno o ms atributos dentro de la apertura: <tagname attr1=valor> SIEMPRE se debe iniciar un documento HTML con la etiqueta <!DOCTYPE html> Las etiquetas <html></html>, <head></head> y <body></body> SON NECESARIAS Las etiquetas y atributos SIEMPRE van en minsculas.

    Definiciones
    CSS (Cascade Style Sheet) es el lenguaje que define estilos o caractersticas visuales de los elementos contenidos en el HTML por medio de SELECTORES (tags, clases, ids) y propiedades con valores (width, background-color, font-size, etc.) CARACTERSTICAS IMPORTANTES SIEMPRE se usa un selector para definir a que elemento se aplican las propiedades. Los selectores pueden ser el nombre del tag (body por ejemplo), una clase (.clase1) o un ID (#header) SIEMPRE abre { y cierra con } Las propiedades SIEMPRE se separan con ; Para las propiedades con valores numricos SIEMPRE debe ir con px o % (height:12px, width:50px, background-position:50%, background-size:100%, etc)

    El lenguaje HTML
    Etiquetas bsicas

    ETIQUETA
    INICIO
    <html>

    FIN
    </html>

    FUNCIN
    Define el inicio/fin del documento HTML, le indica al navegador que debe ser interpretado como cdigo HTML. Incrusta un script (JavaScript, por ejemplo) que permite manipular comportamientos del navegador o de elementos dentro del documento. Define la cabecera del documento HTML; suele contener informacin sobre el documento que no se muestra directamente al usuario como, por ejemplo, el ttulo de la ventana del navegador. Define el titulo del documento, visible en la ventana del navegador. Define la ruta a una hoja de estilos (CSS) o conos (favicon) para aplicarse a los elementos del documento. Define un bloque de estilos CSS dentro de la cabecera del documento. Proporciona parmetros adicionales, por ejemplo las palabras clave del documento, usadas por los buscadores para indexar. Define el contenido principal o cuerpo del documento. Esta es la parte del documento html que se muestra en el navegador; dentro de esta etiqueta se incluyen TODOS los elementos visibles por el usuario, como tablas, divisiones, prrafos, imgenes, bullets, etc.

    ATRIBUTOS POSIBLES
    (*OBLIGATORIO)

    NINGUNO

    <script>

    </script>

    language =text/javascript (*) src=nombre_archivo.js (*)

    <head>

    </head>

    NINGUNO

    <title>

    </title>

    NINGUNO rel=stylesheet (*) href=archivo_de_estilos.css (*) NINGUNO name=keywords / name=description content=key1,key2,key3. / content=descripcion de mi pgina HTML

    <link />

    NO

    <style>

    </style>

    <meta />

    NO

    <body>

    </body>

    NINGUNO

    El lenguaje HTML
    Etiquetas bsicas

    ETIQUETA
    INICIO
    <h1> <table> <tr> <td> <a>

    FIN
    </h1> </table> </tr> </td> </a>

    FUNCIN
    Headers: Se utilizan para definir encabezados ttulos, (<h1> a <h6>).
    Define un bloque de cdigo para insertar una tabla.

    ATRIBUTOS POSIBLES
    (*OBLIGATORIO)

    class, id. width, border, cellspacing, cellpadding, class, id, style. align. NINGUNO class, id, style, width, colspan, rowspan, align. href*, target, title*, class, id. class, id, style. src*, alt*, title, width*, height* id, class, align. class, id, type (1,a,A, i, I) class, id, type (circle, disc, square) NINGUNO

    Table Row: inserta una fila en la tabla Table Data: Inserta una celda dentro de la fila que hemos creado.
    Agrega un hipervnculo (link) a algn elemento como textos o imgenes.

    <div> <img /> <p> <ol> <ul> <li>

    </div> NO </p> </ol> </ul> </li>

    Division: Representa una divisin en el documento, como un contenedor para cierta informacin. Dentro de HTML5 es utilizada en vez de las tablas.
    Inserta una imagen.

    Paragraph: Define un bloque de un prrafo de texto. Ordered list: Inserta una lista ordenada (numerada secuencialmente). Unordered list: Inserta una lista sin orden, es decir como vietas (bullets). List: Representa un elemento dentro de una lista ordenada (<ol>) desordenada (<ul>).

    El lenguaje HTML
    Hojas de Estilo (CSS) NOMBRE (tag) DE ELEMENTO tag { parametro1: valor; }
    body { background-color: #000000; } table { border-color: #FF0000; }

    IDENTIFICADOR (id) DEL ELEMENTO #id { parametro1: valor; }


    #parrafo1 { font-size: 20px; } #lista{ color: #00FF00; }

    CLASE (class) DEL ELEMENTO .clase { parametro1: valor; }


    .copyright { background-color: #000000; color: #FFFFFF; font-size: 10px; font-weight: bold; }

    RECUERDA QUE PARA DEFINIR UN ESTADO OVER DE ALGN ELEMENTO SE USA :HOVER, POR EJEMPLO:
    .mi_boton{ color: #000; } .mi_boton:hover{ color: #FFF; }

    NORMAL

    MOUSE ENCIMA

    El lenguaje CSS
    atributos bsicas

    ATRIBUTO

    VALORES POSIBLES

    CARACTERISTICAS

    ATRIBUTOS DE FONDO (Aplica para cualquier elemento del HTML)


    background-color: background-image: background-position: background-repeat: backgroundattatchment: background-size: #VALOR_HEXADECIMAL; url(ruta_de_la_imagen.jpg); coordenada_Xpx coordenada_Ypx; (En X o Y: top, left, center, bottom, right) no-repeat, repeat-x, repeat-y, repeat fixed, scroll porcentaje, valor en pixeles Da el color de fondo a un elemento en HEXADECIMAL. Coloca una imagen de fondo a un elemento Define las coordenadas x,y de la imagen de fondo respecto al elemento que se aplica acompaado de las letras px (solo si es una distancia exacta) Repite el fondo en las direcciones que se definan. Deja fijo o mvil el fondo en caso de que haya un scrollbar (para fondos de todo el documento) Define el tamao del fondo en cantidad exacta en pixeles o porcentaje

    ATRIBUTOS DE TEXTO (Aplica para cualquier elemento que contenga texto)


    font-family: font-size: font-weight: font-style: color Nombre de la tipografia 10px, 12px, 14px etc. bold, normal italic, normal #VALOR_HEXADECIMAL Tipografa usada en el texto Tamao del texto en pixeles Permite aplicar el estilo NEGRITAS (bold) a un texto Permite utilizar cursiva (italic) Establece el color del texto

    El lenguaje CSS
    atributos bsicas

    ATRIBUTO

    VALOR(ES) POSIBLE(S)

    CARACTERISTICAS

    ATRIBUTOS DE TEXTO (Aplica para cualquier elemento que contenga texto)


    text-align: text-decoration: text-shadow: center, left, right, justify underline, none #COLOR_HEXADECIMAL pos_x pos_y tamao Ejemplo: text-shadow:#000 2px 2px 5px; Establece el ajuste del texto dentro del elemento que lo contiene. Establece si el texto esta subrayado (underline) o no. Coloca una sombra debajo del texto con algn color y posicin especifica.

    ATRIBUTOS DE DIMENSION Y MARGEN (Aplica para Tablas, TDs y DIVS)


    width: height: 100%, 60px, 85%, 150px etc. 150px, 100px, 50px etc. Ancho del elemento en pixeles o porcentaje. Alto del elemento en pixeles. Borde o espacio que se deja alrededor del elemento (por fuera) en pixeles. Cada valor representa las cordenadas: top, right, bottom, left. (En ese orden). El ejemplo deja un espacio de 5 px en la parte superior, 10px a la derecha, 8 px abajo y 2 px a la izquierda Permite crear un borde o espaciado alrededor del interior del elemento en pixeles.

    margin:

    EJEMPLO: margin: 5px 10px 8px 2px;

    padding:

    EJEMPLO: padding:10px 5px 10px 10px;

    También podría gustarte